Vous êtes sur la page 1sur 33

Réalisation d’un

site web
dynamique
E-Commerce
pour la société
MANAR Technologie

Encadré par : Réalisé par :


M.DAHMAN SAIDI CHAOUI Abdelilah
Abdarrahim

2005/2006
3.1. Java
Java est à la fois un langage
de programmation et une
plateforme d'exécution [7]. Le

1 page texte 0.5 DH


langage Java a la particularité
principale d'être portable,
puisqu'il peut tourner sur
n'importe quelle machine
disposant d'un interpréteur
Java. Cette portabilité est
fondamentale sur Internet,

4. Réalisation
Au lancement de
l’application, l’utilisateur a le
choix entre deux menus : New

1 page mixte 1 DH
Project et Load Project.

1 page image 2 DH

1 CD vierge 2 DH

1 pochette
0.5 DH
double
1 reliure
(baguette +
transparent +
6 DH
papier cartonné)
Remerciements

Je tiens sincèrement à remercier vivement M.DAHMAN

SAIDI Abderrahim pour son encadrement et son assistance durant


la réalisation de mon stage de fin d'année.

Je remercier également le personnel de la société MANAR

Technologie pour leur collaboration au long de la période de stage.

En fin, veuillez accepter, mesdames et messieurs les membres


du jury, toutes nos reconnaissances.

CHAOUI Abdelilah

ENSIAS 2005 Stage d’été de 1ère année : Réalisation d’un site web dynamique. 2
Liste des figures

Figure 1 : la base de données.


Figure 2 : L’environnement WebDev 9.
Figure 3 : Le code serveur et le code navigateur.
Figure 4 : L’accès aux base de données avec WebDev.
Figure 5 : La distribution des pages web réalisées.
Figure 6 : La page d’accueil.
Figure 7 : La page de l’inscription.
Figure 8 : La page des produits.
Figure 9 : La page de chariot.
Figure 10 : La page de paiement.
Figure 11 : Facture générée en format PDF.
Figure 12 : La page de l’administrateur.
Figure 13 : La page des nouveaux adhérents.
Figure 14 : La page des adhérents admis.
Figure 15 : La page des nouvelles commandes.
Figure 16 : La page des commandes validées.
Figure 17 : La page des commentaires.
Figure 18 : La page de l’insertion des produits.
Figure 19 : La page des produits existants.

ENSIAS 2005 Stage d’été de 1ère année : Réalisation d’un site web dynamique. 3
Table des matières

Remerciements …………………………………………………………..…………….… 2
Liste des figures ………………………………………………………………………… 3
Table des matières …………………………………….…………….………………... 4
Introduction ……………………………………………………….….....……………… 5

Chapitre 1 : L’organisme d’accueil ……………………………...………. 6


1.1. l’organisme d’accueil………………………………………………..…. 6
1.2. Le service eCommerce……………………………………….………… 7

Chapitre 2 : Analyse et conception du projet ……………………… 8


2.1. Analyse des besoins …………………………………….…………….…. 8
2.2. Conception de la base de données …………………….………..…. 9

Chapitre 3 : Réalisation du projet……………..………………………. 14


3.1. Les outils de travail …………………………………….……………… 14
3.1.1. Architecture de Webdev 9 ………………………….…..…..……. 14
3.1.2. Le W-Language ………………………………………..….…..……. 14
3.1.3. L’éditeur de code ……………………………………..………..…… 16
3.1.4. La base de données Hyper File…………………..…………...… 18

3.2. Les procédures et les requêtes……………………………………… 19


3.1.1. Les procédures …………………..………………………..…..……. 19
3.1.2. Les requêtes ……………………………………….….………..……. 20

3.3. Réalisation du projet ……………………………………….……..…... 23


3.3.1. Les pages client ……………………………………..……..……… 23
3.3.2. Les pages administrateur ……………………………………… 27

Conclusion ……………………………………………………………………....………..31
Bibliographie …………………………………………………………….…………….. 32

ENSIAS 2005 Stage d’été de 1ère année : Réalisation d’un site web dynamique. 4
Introduction

L’expansion de l’Internet provoque des changements


profonds au niveau commercial, de la publicité jusqu'à la
livraison, tous les détails d’une relation commerciale entre le
vendeur et le client passe aujourd’hui par l’Internet, ce dernier
met à la disposition de tous les partenaires, tous les outils pour
finaliser l’achat et la vente en succès et en toute sécurité, ce
qu’on l’appelle aujourd’hui le eCcommerce.

L’Internet peut être aussi un facteur majeur pour réduire le


coût de publicité, et élargir le champ de diffusion de
l’information à tout le monde. Ceci en mettant à la disposition de
client tout les outils d’aides à la recherche d’informations, la
mise à jour des prix et de stock, et les dernières nouvelles de
touts les marchés, et la disposition de vendeur tous les outils
pour commercialiser leur produits.

Notre stage d’été s’était dans ce sens, durant la durée de sa


réalisation, nous étions chargés de réaliser un site web

dynamique permet à la société MANAR Technologie d’offrir le

service eCommerce.

Le présent rapport comporte 3 chapitres. Dans le chapitre I,


nous allons présenter l’organisme d’accueil et son besoin d’un
site web dynamique permet de réaliser commander via web.
Ensuite, dans le chapitre II, nous allons analyser le besoin et
détailler notre conception du site, et dans le chapitre III, nous
allons entamer la partie réalisation du site de l’organisme
d’accueil.

ENSIAS 2005 Stage d’été de 1ère année : Réalisation d’un site web dynamique. 5
Chapitre I
L’organisme d’accueil

Dans ce chapitre nous allons présenter l’organisme


d’accueil, puis nous allons expliquer le choix de service

eCommerce pour la société MANAR Technologie.

1.1. L’organisme d’accueil

MANAR Technologie est une société multiservices, elle offre les


services de l’informatique, maintenance, et la vente de matériels informatique.
En général, elle est crée pour aider les entreprises, les bureaux de services
privées au publics et à tirer profit des nouvelles technologies informatiques, et
d’apporter aux individus, aux toutes établissements -publics ou privée- une
couverture complète de besoins informatique.

MANAR Technologie propose des services en informatique


différents qui couvre les aspects matériel et logiciel, et les principaux volets de
sa spécification sont :

• Matériels : dans ce domaine la société MANAR Technologie


offre les services suivants :

ƒ Vente de matériels informatiques pour les individus et les


établissements.
ƒ Installation, et configuration des équipement de bureautique
et réseau.

ENSIAS 2005 Stage d’été de 1ère année : Réalisation d’un site web dynamique. 6
• Maintenance : la société MANAR Technologie offre aussi le
service de réparation et maintenance de matériels informatiques, réseaux,
et logiciels.

• Logiciel et progiciels : Le 3éme domaine de MANAR

Technologie c’est le développement des applications sur demandes des


clients.

1.2. Le service eCommerce


Le eCommerce est l’abréviation de commerce électronique, c’est un terme
générique désignant aussi bien la vente par correspondance de biens physiques,
via le PC, c'est-à-dire, l’utilisation de la technologie Internet à des fins
économiques, que le téléchargement de biens numériques (logiciels, musique,
vidéos, jeux, eBooks, etc...) et bien sûr l'achat de services (voyages, services
financiers, matériels informatiques, etc...).

La société MANAR Technologie a décidé de profiter ce service


d’Internet, en réalisant un site web dynamique permettant la vente par
correspondance, ce qui va mettre le boutique de produits de la société, avec
toutes les informations possible, à la disposition de clients qui aura la
possibilité d’acheter à distance tout ce qu’il veut.

Dans ce chapitre nous avons présenté l’organisme d’accueil


et ses domaines de travail, puis nous avons défini le service

eCommerce et la motivation de la société MANAR Technologie


par ce service.

ENSIAS 2005 Stage d’été de 1ère année : Réalisation d’un site web dynamique. 7
Chapitre II
Analyse et conception du projet

Dans ce chapitre, nous essayerons d'analyser le besoin de


la société, ainsi que concevoir une solution optimale pour
faciliter le contact entre la société et le client.

2.1. Analyse des besoins


Aujourd’hui le eCommerce devient de plus en plus l’un des services les
plus forts de l’Internet, et cela revient à la diffusion de l’information sur le web
qui est rapide et pas coûteuse, ce qui permet une expansion publicitaire d’un
nouveau produit, avec un coût de publicité très économique, ce qui encourage
les société offrantes le service de vente, de choisir le eCommerce.

Pour les même raisons qu’on a cité la société MANAR Technologie a


décidé de réaliser un site web dynamique répond aux besoins suivants :
• Commercialiser les produits de la société sur le web.
• Permettre aux clients d’inscrire chez la société.
• Permettre aux clients de réaliser des commandes via web, et
d’envoyer leurs remarques et leurs commentaires.
• Permettre aux clients de recevoir les produits achetés dans leurs
maisons.

Pour garantir un bon fonctionnement de site, la société MANAR

Technologie a choisi de cibler les clients selon des critères à respecter, le


premier critère c’est la ville de client, parce que le service de commander via
web n’est possible que pour les clients de Tanger, le deuxième critère c’est que

MANAR Technologie n’accepte que les clients qui ont envoyé des
données correctes.

ENSIAS 2005 Stage d’été de 1ère année : Réalisation d’un site web dynamique. 8
Pour répondre aux besoins de la société, ainsi que satisfaire aux
contraintes d’admission les clients, on a décidé que la relation entre le client et
la société doit partir par les étapes suivantes :

1- Le client envoie une demande d’inscription dans la page concernée.


2- L’administrateur de site a le choix, soit de valider l’inscription si elle est
satisfaite aux contraintes d’admission, soit de la rejeter sinon.
3- Le client admis choisit les produits, réalise une commande, et génère la
facture de la commande en format PDF.
4- Le client admis envoie la facture signée avec un chèque comporte le
montant de la facture.
5- La société envoie les produits commandés vers l’adresse de client et
finalise les procédures de l’achat.

2.2. Conception de la base de données:


Pour répondre aux besoins q’on a étudié dans la partie d’analyse, nous
avons décidé la construction d’une base de données de 9 tables –figure 1-, ce
choix garanti une couverture complète des besoins de notre site web, ainsi que
la satisfaction de contraintes.

Les tables de la base de données sont :


• Les tables concernant des produits :
PRODUIT, CATEGORIE, MARQUE.
• Les tables traitantes les commandes :
COMMANDE, LIGNECDE.
• Les tables des clients :
• CLIENT, DOSSIER, COMMENTAIRE.

Le suivant –figure 1- montre les tables de la base de données, la relation


entre les tables, et les cardinalités.

ENSIAS 2005 Stage d’été de 1ère année : Réalisation d’un site web dynamique. 9
COMMENTAIRE
CATEGORIE
IDCommentaire
0,n
Categorie CodeClient 1,1

Commentaire
1,1
Archive 0,n

PRODUIT CLIENT

CodeProduit COMMANDE CodeClient


Description LIGNECDE Nom
Prix CodeClient Prenom
idlignecommande
Photo Produits Idcommande Adresse
0,n Ventes réalisées 1,1 CodeProduit 1,1 0,n
a passé les
DateCommande 1,1 0,n CodePostal
Categorie Idcommande commandés commandes
Marque MontantTotal Ville
QteCommandee
Designation bPaye GSM
Montant
QteStock facture Telephone
DescriptionDetaille Fax
eMail
DOSSIER
0,1
1,1
MARQUE IDDossier
0,n
CodeClient
Marque 1,1
NomComplet
Pseudo
MotPasse

Figure 1 : la base de données.

Description des tables de la base de données :


Table PRODUIT :
C’est la table qui regroupe les informations de chaque produit, elle
comporte 9 attributs :
ƒ Codeproduit : c’est le clé de la table de type identificateur automatique,
et il s’incrémente automatiquement après l’ajout d’un nouveau produit.
ƒ Description : c’est phrase de forme publicitaire qui accompagne tout
produit et il est de type texte mémo.
ƒ DescriptionDetaille : tous les détailles et les options d’un produit, et il
est de type texte mémo.
ƒ Marque : c’est un clé doublons parce qu’il est clé dans la table
MARQUE, il caractérise la marque d’un produit, et il est de type texte.
ƒ Categorie : c’est un clé doublons aussi parce qu’il est clé dans la table
CATEGORIE, il caractérise la catégorie d’un produit, et il est de type
chaîne de caractère.
ƒ Designation : c’est la désignation d’un produit, et il est de type texte.
ƒ Prix : c’est le prix de produit, et il est de type monétaire.

ENSIAS 2005 Stage d’été de 1ère année : Réalisation d’un site web dynamique. 10
ƒ Photo : C’est l’image de produit. Il est de type texte, car il caractérise le
nom de l’image.
ƒ QteStock : c’est la quantité de stock d’un produit, et il est de type
numérique.

Tables MARQUE et CATEGORIE :


Ce sont deux tables qui possèdent un seul attribut, c’est l’attribut Marque
pour la table MARQUE, et l’attribut Categorie pour la table CATEGORIE. Ces
deux tables servent pour faciliter la recherche d’un produit par la marque et par
la catégorie.

Table CLIENT :
C’est la table qui regroupe les informations de chaque client, elle
comporte 10 attributs :
ƒ CodeClient : c’est le numéro identificateur d’un client, il est de type
automatique, il incrémente après l’inscription d’un nouveau client.
ƒ Nom, Prenom, Adresse, CodePostal, Ville, Telephone, GSM, Fax,
eMail : sont les informations nécessaires pour faciliter le contact avec le
client, il sont tous de type texte, et tous ces informations sont
enregistrées après l’inscription d’un client.

Table DOSSIER :
Cette table comporte les données d’accès d’un tel client et ces données
sont :
ƒ CodeClient : c’est le même de la table client.
ƒ IDDossier : c’est la clé de parcours de la table.
ƒ NomComplet, Pseudo, MotPasse : sont les données qui permettent à
un client d’accéder au site par ces coordonnées, et de réaliser une
commande.

ENSIAS 2005 Stage d’été de 1ère année : Réalisation d’un site web dynamique. 11
Table COMMENTAIRE :
C’est la table que nous avons choisi pour enregistrer les commentaires et
les questions des clients, et elle possède les attributs suivants :
ƒ IdCommentaire : c’est le clé de parcours de la table.
ƒ CodeClient : c’est le même attribut de la table CLIENT.
ƒ Commentaire : c’est le commentaire ou la question du client, c’est un
attribut de type texte.

Table COMMANDE :
C’est la table qui englobe tous les informations sur une commande, et elle
comporte les attributs suivants :
ƒ CodeClient : c’est le même attribut le la table CLIENT, il caractérise le
client propriétaire de la commande dans cette table.
ƒ Idcommande : c’est le numéro de la commande.
ƒ DateCommande : c’est un attribut de type date, il caractérise la date de
réalisation de commande.
ƒ MontantTotal : c’est le montant total de la facture, il est de type
monétaire.
ƒ bPaye : c’est indicateur booléen qui prend le 1 pour une commande
finalisée et 0 pour une commande en cours de traitement.
ƒ facture : c’est un attribut de type texte, il comporte le chemin de la
facture en PDF.

Table LIGNECDE :
C’est la table qui possède les détails de la commande, c'est-à-dire des
informations sur les produits commandés, et elle comporte les attributs
suivants :
ƒ IdLignecommande : c’est la clé de la table.
ƒ CodeProduit : c’est le même attribut de la table PRODUIT, il
caractérise un produit commandé.
ƒ Idcommande : c’est le même attribut de la table COMMANDE, il
caractérise la commande qui possède le produit indiqué.

ENSIAS 2005 Stage d’été de 1ère année : Réalisation d’un site web dynamique. 12
ƒ QteCommandee : c’est la quantité commandée d’un produit.
ƒ Montant : c’est le prix de produit fois la quantité commandée.

Dans ce chapitre, nous avons analysé les besoins de la


société d’accueil et la nécessité d’un site dynamique permet
de commander à distance, puis nous avons décrit les tables et
la conception de la base de données utilisée.

ENSIAS 2005 Stage d’été de 1ère année : Réalisation d’un site web dynamique. 13
Chapitre III
Réalisation du projet

Dans ce chapitre, nous allons commencer par la


présentation des outils de développement de ce projet, et le
SGBD utilisé, puis nous allons entamer les étapes de la
réalisation et une brève manuelle d’utilisation.

3.1. Les outils de travail


3.1.1. L’environnement WebDev 9
Le WebDev 9 est un atelier de développement complet, il peut gérer
toutes les phases de développement, dès la conception de site jusqu'à
l’installation.
Le WebDev 9 est ouvert sur tous les langages de programmation de
web, il est possible de taper de code HTML, PHP, Javascript…Mais, nous
avons choisi son langage intégré W-Langage comme langage de
développement.
Concernant la base de données, le WebDev 9 peut interroger n’importe
qu’il base données, et notre choix pour ce projet s’était le SGBD intégré de
WebDev 9 : Hyper File.

3.1.2. Architecture de WebDev 9 :


WebDev 9 est architecturé autour d'éditeurs, adaptés à chacun des
besoins du développeur, unifiés dans un environnement unique :

• Éditeur de projet.
• Éditeur d'analyses.
• Éditeur de modèles UML
• Éditeur de requêtes

ENSIAS 2005 Stage d’été de 1ère année : Réalisation d’un site web dynamique. 14
• Éditeur de fenêtres
• Éditeur d'états
• Éditeur de code source, débogueur et compilateur
• Éditeur d'aide
• Éditeur de documents
• Gestionnaires de versions

Ces différents éditeurs vont permettre de créer les différents objets


(fenêtres, états, base de données, programmes…etc.) manipulés par
l'application.
Le schéma suivant présente l’environnement de travail WebDev 9 et les
principaux éditeurs qui servent à la réalisation d’un site web. Les autres
éditeurs qui ne paraissent pas dans ce schéma existent tous ans le volet
Webdev.

Volet
WebDev

Editeur
de
projet

Editeur
des
requête

Editeur
des
pages

Editeur
d’analyse

Figure 2 : L’environnement WebDev 9.

ENSIAS 2005 Stage d’été de 1ère année : Réalisation d’un site web dynamique. 15
3.1.3. Le W-Langage :
C’est un langage de 5ème génération L5G, c’est à dire que les ordres sont
très évolués, et remplacent des dizaines ou des centaines d’ordres de L4G,
comme il est disponible en anglais et en français et la traduction d’une langue à
l’autre est automatique. Le français permet une programmation intuitive, les
fonctions sont exprimées dans des termes explicites, proches du langage
courant ce qui facilite la compréhension des ordres du langage. Les ordres du
W-Langage (HLitPremier, HTrouvé, etc…).

La programmation en W-Langage peut être "traditionnelle" ou "orientée


objet". WebDev met à disposition du développeur un grand nombre de
fonctions classées selon leurs domaines d’utilisation, nous ne citerons ci-
dessous que quelques exemples vu la grande diversité de domaines ou WebDev
peut intervenir.

Les fonctions du W-Langage permettent de gérer :

• Les opérations sur des chaînes de caractères.


• Les opérations arithmétiques.
• L'affichage des fenêtres et des champs.
• Les bases de données au format Hyper File, SQL Server, Oracle….
• Divers types de fichiers : fichiers XML, Excel, texte, les
multimédias, les exécutables…
• Des Emails...

Il fournit aussi des fonctions permettant de communiquer avec divers


serveurs :
ƒ Serveur FTP pour le transfert des fichiers.
ƒ Serveur WEB pour manipuler des pages web.
ƒ Serveur "SOAP" (Simple Objet Access Protocol), protocole de
communication qui permet d'exécuter des procédures sur un
serveur distant.
D’autres fonctions, et qui nous ont été très utiles comme :

ENSIAS 2005 Stage d’été de 1ère année : Réalisation d’un site web dynamique. 16
ƒ Des fonctions mathématiques : que nous avons utilisées pour
calculer les statistiques.
ƒ Des fonctions de dessin : nous les avons utilisés pour dessiner les
secteurs.
ƒ Des fonctions pour créer et manipuler les graphes : avec lesquelles
on a crée les graphes affichant les statistiques sur les
consommations.

Un seul ordre du W-Langage permet de remplacer plusieurs lignes de code


traditionnel, Par exemple :

EcranVersFichier

HAjoute(CLIENT)

Ces deux lignes suffisent pour :

i. renseigner les variables des rubriques du fichier avec les valeurs


saisies dans les champs reliés aux rubriques,
ii. ajouter l'enregistrement dans le fichier CLIENT.
iii. mettre à jour le fichier d'index.

Les principales caractéristiques du W-Langage sont les suivantes :

• Intuitif avec un apprentissage rapide.


• Proche de votre langage habituel (C, Basic ou Pascal).
• Syntaxe en français (anglais disponible).
• Gestion de l'encapsulation des traitements associés aux fenêtres.
• Programmation "objet" possible en W-Langage, mais pas
nécessaire.
• Gestion événementielle transparente.
• Gestion des procédures.
• Appels à des fonctions de l'API Windows.
• Présence d'un débogueur pour tracer les programmes.

ENSIAS 2005 Stage d’été de 1ère année : Réalisation d’un site web dynamique. 17
3.1.4. L’éditeur de code :
L’éditeur de code participe à la puissance et à la productivité de WebDev.
La saisie de code est intuitive, plus rapide et se fait directement dans les
champs concernés.
L’éditeur de code identifie le lieu d’exécution de code :
• Un bandeau jaune signifie que le code s’exécutera sur le serveur.
• Un bandeau vert signifie que le code s’exécutera sous le navigateur, et
qu’il s’agit de W-Langage. Sous le navigateur le code peut être saisi aussi
en PHP ou Javascript et les bandeaux seront coloriés par le rose et le bleu,
mais ces deux cas ne sont pas posés dans notre projet parce que nous
avons saisi tout le code en W-Langage.
Editeur de code

S’exécuter
sous
navigateur

S’exécuter
sur le
serveur

Figure 3 : Le code serveur et le code navigateur.

3.1.5. La base de données Hyper File :


Hyper File est livrée en standard avec WebDev 9. Il s’agit d’une base de
données rapide et fiable. Elle gère tout les types de données : texte, numérique,
binaire, date, etc... Elle gère aussi tout les type de clés.
Hyper File existe sous trois versions, classique ou monoposte, mobile ou
réseau, et client/serveur pour un accès à distance facile. La diffusion du moteur
hyper File est gratuite avec les sites réalisés en WebDev.

ENSIAS 2005 Stage d’été de 1ère année : Réalisation d’un site web dynamique. 18
Si l'application développée doit gérer des données, vous aurez le choix
d’utiliser la base de données de WebDev : Hyper File 9 ou une base de données
externe.
Ce moteur puissant est parfaitement adapté à la gestion de bases de
données de toute taille (jusqu'à des milliards d'enregistrements), il est sécurisé,
gère les transactions, le cryptage et sa diffusion est gratuite avec les
applications WebDev.
Vous pouvez accéder à une base de données existante en utilisant un accès
OLE DB, ODBC ou via un accès natif.
Un accès natif à Oracle, SQL Server ou DB2 400 (AS/400) est disponible
en option.
Le schéma suivant –Figure 4- résume l’accès aux bases de données dans
l’environnement WebDev 9.

Figure 4 : L’accès aux base de données avec WebDev

3.2. Les procédures et les requêtes


3.2.1. Les procédures :
Durant la réalisation de notre projet, nous avons trouvé des traitements qui
se répètent plusieurs fois, dans des différentes positions. Pour cela nous avons
écrit quelques procédures pour dépasser ce problème.

ENSIAS 2005 Stage d’été de 1ère année : Réalisation d’un site web dynamique. 19
Procédure de remplissage de détails d’un produit :
PROCEDURE RemplitDétails(): Permet de charger les informations
sur un produit dans la page de présentation des produits, la catégorie, la
désignation, les détails, le photo, et le prix.

Procédure de remplissage de chariot :


PROCEDURE RemplitChariot(): Permet de remplir le chariot selon le
choix du client, elle permet aussi de calculer le montant de chariot, ainsi que
remplir une zone répétée par les informations nécessaires des produits choisis.

Procédure de remplissage de facture :


PROCEDURE Etat_Facture(): Permet de remplir une facture par les
informations de client, le nom, l’adresse, et l’email, et celles des produits
commandés, le prix, la quantité de stock, ainsi que des informations sur
l’opération d’achat, le montant total, la date de commande, et le taux de TVA
du montant total.

Le reste de programme est rédigé au fur et à la mesure pour chaque page,


chaque lien, et chaque bouton dans les champs concernés. Et le code source
complet de toutes procédures précédentes sera mentionné dans l’annexe.

3.2.2. Les requêtes :


L’utilisation de la base de données qu’on a réalisée dans la phase de
conception, nécessite l’accès aux différentes tables, cet accès se fait par des
fonctions prédéfinies de W-langage pour une simple recherche, mais pour une
recherche conditionnée, nous avons besoin des requêtes selon les traitements
existants dans le site.
Pour un bon fonctionnement de site, et de leurs fonctionnalités intégrées,
nous avons proposé les requêtes suivantes :

ENSIAS 2005 Stage d’été de 1ère année : Réalisation d’un site web dynamique. 20
Requête de recherche des produits :
ReqProduits: C’est la requête de recherche d’un produit par la
catégorie et la marque, et cette requête s’exécute dans la page de recherche
d’un produit.

Requête de recherche des commandes :


ReqCommande: C’est la requête de recherche d’une commande par son
état, est ce qu’elle est finalisée, ou bien en train de traitement, et cette requête
s’exécute dans deux pages parmi les pages de l’administrateur, sont les pages
d’affichage des commandes.

Requête de recherche des produits commandés :


ReqStock: C’est la requête de recherche des produits commandés et
leurs quantité demandées, et elle sert pour décrémenter la quantité de stock
dans le cas de vente, et elle s’exécute directement après la validation de la
commande par l’administrateur.

Requête de recherche des anciens adhérents :


ReqAnciensAdherents: C’est la requête de recherche des anciens
adhérents qui sont déjà acceptés par l’administrateur de site, et cette requête
s’exécute dans une page de l’administrateur qui affiche les adhérents de site.

Requête de recherche des anciens adhérents :


ReqNouveauInscrit: C’est la requête de recherche les nouveaux
clients qui demandent l’inscription dans la liste des adhérents, et cette requête
s’exécute dans une page de l’administrateur qui affiche les nouveaux
demandeurs de l’inscription.

ENSIAS 2005 Stage d’été de 1ère année : Réalisation d’un site web dynamique. 21
3.3. Réalisation du projet
La distribution des pages :
Notre site web comporte 25 pages, 18 pages sont des pages clients, et 7
pages sont des pages administrateur. Les pages clients sont : la page de
l’inscription, la page de recherche des produits, la page d’envoi des
commentaires et des questions, le page de derniers produits, la page des
promos, et les pages de réalisation et de validation des commandes. Les pages
administrateur sont : la page des clients inscrits, la page des dernières
demandes d’inscription, la pages des commande qui sont en cours de
traitement, la page des commandes validées, la pages des produits existants, la
page des commentaires.
La figure suivante générée par le WebDev 9 décrit les pages de projet, les
états, et les requêtes.

La page d’accueil Une page de projet

Les pages Les pages


administrateur clients

Un état

Une requête Figure 5 : La distribution des pages web réalisées.

3.3.1. Les pages client :


Dans cette partie, nous allons décrire les pages principales pour réaliser
une commande, de l’inscription de client jusqu’à l’impression de la commande.

ENSIAS 2005 Stage d’été de 1ère année : Réalisation d’un site web dynamique. 22
La page d’accueil :

Cette page d’accueil


permet d’ouvrir toute les
aux autres pages, elle
contient un menu à
gauche regroupant les
fonctionnalité de site, et
un menu à droite
regroupant les derniers
produits, et dans la page
les offres promotionnelles
et autres choses.
Figure 6 : La page d’accueil.

La page d’inscription :

La page d’inscription permet au client de faire entrer ses informations qui


vont être utile s pour profiter les services de site web de MANAR Technologie.
Les principaux services
de ce site qui seront
disponible par cette
inscription, le service de
l’envoie des questions et
remarques, et le service de
réaliser des commandes.
Une seule inscription est
suffisante pour réaliser
plusieurs commandes. Si
un client veut modifier ses
informations, elle est aussi
possible, il suffit de cliquer
sur le lien votre profil. Figure 7 : La page de l’inscription.

ENSIAS 2005 Stage d’été de 1ère année : Réalisation d’un site web dynamique. 23
La page de recherche d’un produit :
La recherche d’un produit se fait par le choix d’une catégorie, ce choix
génère une zone répétée de toutes les marques de cette catégorie.
Le choix de la
marque augmente
la précision de
recherche d’un
produit désiré.
Cette page
présente tous les
produits par leurs
désignations, le
prix, et leurs
photos. Et pour
plus de détails sur
un produit il suffit
de cliquer sur
l’image. Figure 8 : La page de recherche des produits.

Dans le cas de choisir un produit à acheter, il suffit de cliquer sur ajouter au


chariot, et dans le cas de choix multiple d’un produit, il faut cliquer sur ajouter au
chariot autant de fois de quantité désirée.
Pour choisir des produits différents, il faut les chercher et faire la même chose
qu’on a dit précédemment.
Pour savoir le montant de chariot qu’on a rempli, il suffit de cliquer sur le lien
votre chariot.

La page de chariot :
Dans cette page le client a une idée sur son chariot rempli, et le montant total.
Dans le cas où il décide de réaliser une demande de ce chariot, il doit cliquer sur le
bouton acheter. Dans ce cas, si il est déjà inséré son pseudo et son login, le
déroulement de la demande sera continu normalement, sinon il y aura une page
d’identification sera générée. Mais dans le cas ou le client n’est pas inscrit, il doit
d’abord insérer ses coordonnées et attendre l’email de l’acceptation, puis envoyer la
commande désirée.

ENSIAS 2005 Stage d’été de 1ère année : Réalisation d’un site web dynamique. 24
Figure 9 : La page de chariot.

La page de paiement et la facture en PDF :


Dans cette page le client doit validée d’abord la commande, en cliquant sur
valider, cette validation va mettre la commande en cours de traitement.
Pour finaliser
la commande, le
client doit cliquer
sur le symbole
PDF en bas de
cette page, il va
générer une copie
de facture en
format PDF, il doit
imprimer une
copie de la facture
et l’envoyer à la
société avec un
chèque portant le
montant total au Figure 10 : La page de paiement.

nom de la société.

ENSIAS 2005 Stage d’été de 1ère année : Réalisation d’un site web dynamique. 25
Il y a aussi la
possibilité de lire
les factures en
format HTML si il
n’y a pas de lecteur
des fichiers PDF. Il
suffit de cliquer sur
le symbole adéquat
dans la page de
paiement.

Figure 11 : Facture générée en format PDF.

3.3.2. Les pages administrateur :


Dans cette partie, nous allons présenter les pages de l’administrateur, les pages
de la validation de commandes et les demandes de l’inscription, les pages de contrôle
des adhérents et des produits, et les pages de commentaires et de questions des
adhérents.

La page de l’administrateur :
C’est une page propre
à l’administrateur, il accède
à cette page par son pseudo
et son mot de passe, il y
aura alors un lien
Administrateur en rouge qui
ne parait que pour
l’administrateur, un clique
sur ce lien permet au
l’administrateur d’accéder à
cette page.

Figure 12 : La page de l’administrateur.

ENSIAS 2005 Stage d’été de 1ère année : Réalisation d’un site web dynamique. 26
Cette page comporte 7 liens vers les pages de gestion des produits et des
adhérents de site.

La page des nouveaux adhérents :


Cette page affiche les nouveaux adhérents de site, et qu’ils attendent la validation
de leur inscriptions. La case de mot de passe Suppr
L’administrateur de
site traite ces demandes,
dans le de l’acceptation,
l’administrateur écrit le
mot de passe pour le
nouveau adhèrent dans la
case de mot de passe, puis
il clique sur valider, alors
un email va être générer
de l’administrateur vers le
nouveaux adhérent qui Valider
comporte la validation de
l’inscription et le mot de
Figure 13 : La page des nouveaux adhérents.
passe de client.
Dans le cas de rejet de la demande, l’administrateur clique sur le bouton Suppr
pour supprimer cette ligne de la base de données.

La page des adhérents :

C’est la page qui


parcourt la liste de tous
les adhérents de site qui
sont déjà acceptés. Et cet
affichage comporte toutes
les informations des
clients, le nom, le pseudo,
le mot de passe, l’email, le
mot de passe, et le GSM,
le téléphone, le fax si
possible.

Figure 14 : La page des adhérents admis.

ENSIAS 2005 Stage d’été de 1ère année : Réalisation d’un site web dynamique. 27
La page des nouvelles commandes :
C’est la page qui informe l’administrateur de site par les dernières commandes
réalisées, et les informations nécessaires sur ces commande, l’administrateur a aussi la
possibilité de voir la facture par un simple clique sur le bouton Facture, ce qui donne
la main au l’administrateur pour traiter la commande.
Après le traitement
d’une commande, si cette
dernière est acceptée,
l’administrateur clique sur Valider
le bouton valider pour la
valider, et dans le cas
contraire, il suffit de
cliquer sur le bouton
Supprimer afin de
supprimer la commande.
Valider Supprimer

Figure 15 : La page des nouvelles commandes.

La page des commandes validées :


C’est la page qui présente la liste de toutes les commandes qui sont déjà validées.

Figure 16 : La page des commandes validées.

ENSIAS 2005 Stage d’été de 1ère année : Réalisation d’un site web dynamique. 28
La page des commentaires :
C’est la page de l’affichage de tous les commentaires et les questions des
adhérents, en commençant par les derniers commentaires envoyés.

Figure 17 : La page des commentaires.

Les pages des produits :


Ce sont deux pages, la première –figure 18- aide l’administrateur d’insérer un
nouveau produit dans la table produit sans ouvrir la base de données, et la deuxième –
figure 19- sert à afficher tous les produits existants, par la catégorie, la marque, la
désignation, le prix et la quantité restante de chaque produit.

Figure18 : La page de l’insertion des produits. Figure 19 : La page des produits existants.

ENSIAS 2005 Stage d’été de 1ère année : Réalisation d’un site web dynamique. 29
Dans ce chapitre, nous avons réalisé une présentation des
outils de développement, puis nous avons cité et expliqué les
procédures et requêtes utilisées, et à la fin de chapitre nous
avons décrit les phases nécessaires pour réaliser une
commande.

ENSIAS 2005 Stage d’été de 1ère année : Réalisation d’un site web dynamique. 30
Conclusion

L’objectif de notre stage d’été est la réalisation d’un site


web. Cette réalisation a été effectuée après trois étapes, la
première c’est l’analyse des besoins de notre projet, la
deuxième c’est la modélisation de la base de données utilisée, et
la troisième étape c’est l’étude des outils proposés et leurs
capacités.

Durant la réalisation de ce projet nous avons essayé de


couvrir le maximum des besoins, ainsi qu’augmenter l’efficacité
des fonctionnalités de site, tout cela pour faciliter la tache aux
clients d’une part et à l’administrateur d’une autre.

Par ailleurs ce projet de stage était pour nous une occasion


pour acquérir des atouts et des connaissances techniques sur un
outil important dans web existants sur le marché, ainsi que
l’utiliser pour réaliser un site web dynamique.

Enfin, s'il nous a resté plus de temps, nous pourrions faire


plus de fonctionnalités au niveau de client, et aussi au niveau de
l’administrateur.

ENSIAS 2005 Stage d’été de 1ère année : Réalisation d’un site web dynamique. 31
Bibliographie

Les sites :

Site 1 : http://www.pcsoft.com

ENSIAS 2005 Stage d’été de 1ère année : Réalisation d’un site web dynamique. 32