réalisation d’un site web dynamique - plus besoin de ... · ensias 2005 stage d’été de 1ère...

Réalisé par :

CHAOUI Abdelilah

2005/2006

Réalisation d’un site web

dynamique

E-Commerce pour la société

MANAR Technologie

Encadré par :

M.DAHMAN SAIDI

Abdarrahim

مصعب البكدوري

Stamp

1 page texte

0.5 DH

1 page mixte

1 DH

1 page image

2 DH

1 CD vierge

2 DH

1 pochette double

0.5 DH

1 reliure (baguette + transparent + papier cartonné)

6 DH

3.1. Java 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,

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

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

2

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


3

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.


4

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


5

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.


6

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.


7

• 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.


8

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.


9

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.


10

0,n

1,1

0,n

1,1

0,n1,10,n 1,1

0,1

1,1

0,n1,1

0,n

1,1

MARQUE

Marque

CATEGORIE

Categorie

PRODUIT

CodeProduitDescriptionPrixPhotoCategorieMarqueDesignationQteStockDescriptionDetaille

CLIENT

CodeClientNomPrenomAdresseCodePostalVilleGSMTelephoneFaxeMail

LIGNECDE

idl ignecommandeCodeProduitIdcommandeQteCommandeeMontant

COMMANDE

CodeClientIdcommandeDateCommandeMontantTotalbPayefacture

DOSSIER

IDDoss ierCodeClientNomCompletPseudoMotPasse

Produitscommandés

Ventes réalisées a passé lescommandes

COMMENTAIRE

IDCommentaireCodeClientCommentaireArchive

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.

Figure 1 : la base de données.


11

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.


12

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é.


13

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.


14

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


15

• É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.

Editeur de

projet

Editeur des

requête

Editeur des

pages

Editeur d’analyse

Volet WebDev

Figure 2 : L’environnement WebDev 9.


16

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 :


17

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.


18

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.

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.

Editeur de code

S’exécuter sous

navigateur

Figure 3 : Le code serveur et le code navigateur.

S’exécuter sur le

serveur


19

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.

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.

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


20

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 :


21

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.


22

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.

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.

Les pages administrateur

Les pages clients

La page d’accueil Une page de projet

Une requête

Un état


23

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.

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.

Figure 6 : La page d’accueil.


24

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.

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.

Figure 8 : La page de recherche des produits.


25

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

nom de la société.

Figure 9 : La page de chariot.

Figure 10 : La page de paiement.


26

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.

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 11 : Facture générée en format PDF.

Figure 12 : La page de l’administrateur.


27

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.

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

comporte la validation de

l’inscription et le mot de

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 13 : La page des nouveaux adhérents.

La case de mot de passe

Valider

Suppr

Figure 14 : La page des adhérents admis.


28

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

le bouton valider pour la

valider, et dans le cas

contraire, il suffit de

cliquer sur le bouton

Supprimer afin de

supprimer la commande.

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 15 : La page des nouvelles commandes.

Figure 16 : La page des commandes validées.

Valider

Supprimer Valider


29

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.

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.

Figure 17 : La page des commentaires.

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


30

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.


31

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.


32

Bibliographie

Les sites :

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

réalisation d’un site web dynamique - plus besoin de ... · ensias 2005 stage d’été de 1ère...

Documents