Réalisation d`un site web dynamique

Transcription

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
1 page texte
Java est à la fois un langage
de programmation et une
plateforme d'exécution [7]. Le
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,
0.5 DH
4. Réalisation
1 page mixte
Au
lancement
de
l’application, l’utilisateur a le
choix entre deux menus : New
Project et Load Project.
1 DH
1 page image
2 DH
1 CD vierge
2 DH
1 pochette
double
1 reliure
(baguette +
transparent +
papier cartonné)
0.5 DH
6 DH
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
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
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
dynamique permet à la société
de
réaliser
un
MANAR Technologie
site
web
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
5
Chapitre I
L’organisme d’accueil
Dans
d’accueil,
ce
chapitre
puis
nous
nous
allons
eCommerce pour la société
allons
présenter
expliquer
le
choix
l’organisme
de
service
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
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
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
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
9
COMMENTAIRE
CATEGORIE
0,n
IDCommentaire
CodeClient
Commentaire
Archive
Categorie
1,1
1,1
0,n
CLIENT
PRODUIT
CodeProduit
Description
Prix
Photo
Categorie
Marque
Designation
QteStock
DescriptionDetaille
COMMANDE
LIGNECDE
0,n
Ventes réalisées
idlignecommande
CodeProduit
Idcommande
QteCommandee
Montant
1,1
1,1
Produits
commandés
0,n
CodeClient
Idcommande
DateCommande
MontantTotal
bPaye
facture
1,1
a passé les
commandes
0,n
DOSSIER
1,1
MARQUE
IDDossier
CodeClient
NomComplet
Pseudo
MotPasse
0,n
Marque
CodeClient
Nom
Prenom
Adresse
CodePostal
Ville
GSM
Telephone
Fax
eMail
0,1
1,1
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
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
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
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
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
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
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 cidessous 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
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
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
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
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
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
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
administrateur
Les pages
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
22
La page d’accueil :
Cette page d’accueil
permet d’ouvrir toute les
aux autres pages, elle
contient
gauche
un
menu
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
disponible
inscription,
qui
seront
par
cette
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.
ENSIAS 2005
Figure 7 : La page de l’inscription.
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
recherche
de
d’un
produit désiré.
Cette
page
présente tous les
produits par leurs
désignations,
prix,
et
photos.
Et
le
leurs
pour
plus de détails sur
un produit il suffit
de
cliquer
sur
Figure 8 : La page de recherche des produits.
l’image.
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
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
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
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
passe de client.
Figure 13 : La page des nouveaux adhérents.
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
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
cliquer sur
Supprimer
suffit
de
le bouton
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
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.
ENSIAS 2005
Figure 19 : La page des produits existants.
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
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
31
Bibliographie
Les sites :
Site 1 : http://www.pcsoft.com
ENSIAS 2005
32