Embed Size (px)
Citation preview
Université de Carthage Institut des Hautes Etudes commerciales
Année universitaire : 2010/2011
MÉMOIRE DE PROJET DE FIN D’ETUDES
POUR L’OBTENTION DU DIPLÔME DE MASTÈRE PROFESSIONNEL
Filière
Commerce Electronique
Conception et développement d’un siteConception et développement d’un site web Marchand pour vente du matérielweb Marchand pour vente du matériel
informatique en ligneinformatique en ligne
Organisme
Réalisé par : Tbini Walid
Dirigé par : Mr. Nabil Chaabani (IMS) Mme. Thouraya Daoues (IHEC) Mr. Melki Sofiene (IHEC)
Abstract: A company that offers products and / or services, always looking to adopt
the best business management in order to compete on the market that is growing
competition.
It is the goal of our project is to develop a website that will allow
electronic commerce to manage orders, customers, products, brands…
Our application also has the objectives: to broaden the scope of
intervention by involving all users in the website, save society's resources (staff
assignments, financing of the commercial approach ...) reduce costs and increase
revenue.
This report describes the analysis, design, and state of the art, directing,
implementing and evaluating the application.
Key-Words: Cart, catalog, PHP, product management, invoice management, 3-tier architecture, online shopping, UML, jquery, CSS, HTML...
Résumé : Une société qui propose des produits et/ou des services, cherche toujours à
adopter la meilleure gestion commerciale afin de pouvoir rivaliser sur le marché
qui ne cesse d’augmenter la concurrence.
C’est l’objectif de notre projet qui consiste à mettre en place un site web
de commerce électronique qui permettra de gérer les commandes, clients,
produits, marques, factures…etc.
Notre application a aussi pour objectifs : d’élargir le champ d’intervention
en impliquant tout les internautes dans le site web, d’économiser les ressources
de la société (tâches du personnel, financement de la démarche commerciale…
etc.), de réduire les coûts et augmenter les revenus.
Ce rapport décrit l’analyse, la conception, l’état de l’art, la réalisation,
l’implémentation et l’évaluation de l’application.
Mots clés : Panier, catalogue, PHP, gestion des produits, gestion des factures, architecture 3-tiers, achat en ligne, UML, jquery, CSS, HTML…
Dédicaces
A mes très chers parents
Dont leurs mérites, leurs sacrifices, leurs qualités
humaines m’ont permis de vivre ce jour, Les mots me
manquent pour exprimer toute la reconnaissance, la
fierté et le profond amour que je vous porte pour les
sacrifices qu’ils ont consenti pour ma réussite, qu’ils
trouvent ici le témoignage de mon attachement ma
reconnaissance, gratitude et respect, que dieu leur
préservent bonne santé et longue vie. Tous mes
sentiments de reconnaissance pour vous.
A mes frères et sœurs
J’espère atteint le seuil de vos espérances. Que ce travail
soit l’expression de ma profonde affection Je vous
remercie pour le soutient moral et l’encouragement que
vous m’avez accordés .Je vous souhaite tout le bonheur
que vous méritez
En leur souhaitant un brillant avenir.
A mes oncles et ma famille
Que je ne pourrais nommer de peur d’en oublier mon
attachement et mes affections les plus Sincères.
A mes ami(e) s
A tout ceux qui ont su m’apporter aide et soutient aux
moments propices, Je dédie ce travail, reconnaissant et
remerciant chaleureusement.
Remerciement
C’est avec un bonheur au cœur que je consacre ces mots
signe de gratitude et de reconnaissance à tous ceux qui
ont contribué, de prés ou de loin, à la réalisation de ce
projet, qu’ils trouvent ici mon terme les plus sincères de
remerciements
Je remercie tous ceux qui m’ont accueilli bras ouverts au
sein de la société « IMS» spécialement, mon encadreur
Mr Nabil Chaabani.
Mes fortes gratitudes à mes encadreurs à
l’IHEC CARTHAGE : Mr. Melki Sofiene et Mme.
Thouraya Daoues qui m’ont su me mettre sur les railles
de la réussite du projet.
Mon remerciements au personnel et enseignant de l’IHEC
de Carthage pour leur aide durant notre parcours
universitaire.
Table des matières
Introduction…………………………………………………. …………….. 6Chapitre I Présentation générale……………………………………….. 8I.1. Introduction…………………………………………………………... 8I.2. Présentation de l’organisme d’accueil……………………………… 8 I.2.1. Les objectifs d’IMS……………………………………………….. 8 I.2.2. Les produits et les services offerts par IMS………………………. 8I.3. Présentation du sujet………………………………………………... 9I.4. Méthodologie et formalisme adoptés………………………………... 9I.5. Conclusion…………………………………………………………... 12
Chapitre II Analyse des besoins et spécifications…………………….. 13II.1. Introduction………………………………………………………... 13II.2. Objectifs……………………………………………………………. 13II.3. Critique de l’existant………………………………………………. 14II.4. Spécification des exigences………………………………………... 14 II.4.1. Liste des exigences……………………………………………... 15 II.4.1.1. Besoins fonctionnels…………………………………….. 15 II.4.1.2. Besoins non fonctionnels………………………………... 16 II.4.2. Quelques concepts……………………………………………… 16 II.4.3. Scénarios et des cas d’utilisation……………………………….. 17 II.4.3.1. Identification des acteurs………………………………... 17 II.4.3.2. Les diagrammes des cas d’utilisation…………………… 17 II.4.3.2.1. Diagramme de cas d’utilisation globale………………… 18 II.4.3.2.2. Diagramme de cas d’utilisation «Acheté un produit»........ 19 II.4.3.2.3. Diagramme de cas d’utilisation « Gérer produit»……….. 20 II.4.3.3. Les diagrammes de séquence……………………………. 20 II.4.3.3.1. Propriétés du diagramme de séquences…………………. 20 II.4.3.3.2. Diagramme de séquence «Authentification»……………. 21 II.4.3.3.3. Diagramme de séquence «Mise à jour d’un produit»......... 22 II.4.3.3.4. Diagramme de séquence «Ajout d’un nouveau produit»… 24 II.4.3.3.5. Diagramme de séquence «Suppression d’un produit»…… 25 II.4.3.3.6. Diagramme de séquence «Gestion du panier»…………... 27II.5. Conclusion………………………………………………………….. 28
Chapitre III Etat de l’art…………………………………………………. 29III.1. Introduction………………………………………………………….. 29
1
III.2. Architecture de l’application……………………………………….. 29 III.2.1. Architecture de client-serveur……………………………………. 29 III.2.1.1. Présentation……………………………………………….. 29 III.2.1.2. Avantages de l’architecture client-serveur………………... 30 III.2.1.3. Inconvénient de l’architecture client-serveur……………... 30 III.2.2. Architecture 3-tiers……………………………………………….. 31 III.2.2.1. Présentation……………………………………………….. 31 III.2.2.2. Avantages de l’architecture 3-tiers………………………... 32 III.2.2.3. Inconvénient de l’architecture 3-tiers……………………... 32 III.2.3. Architecture N-tiers………………………………………………. 32 III.2.3.1 Présentation………………………………………………... 32 III.2.4. Architecture adoptée……………………………………………… 33III.3. Choix techniques…………………………………………………….. 34 III.3.1. SGBD utilisé ……………………………………………………... 34 III.3.1.1. MySQL ………………………………………………….... 34 III.3.1.1.1. Communication du MySQL avec le serveur web…….. 34 III.3.1.2. Les autres SGBD face à MYSQL : PostgreSQL …………. 34 III.3.1.3. SGBD adoptée (MySQL)…………………………………. 35 III.3.2. Les Langages utilisés……………………………………………... 35 III.3.2.1. Le langage Jquery…………………………………………. 35 III.3.2.2. Le langage PHP…………………………………………… 36 III.3.2.3. Les autres langages face à PHP : ASP…………………….. 36 III.3.2.4. Coopération de PHP et MySQL…………………………... 37III.4. Conclusion…………………………………………………………… 37
Chapitre IV Conception…………………………………………………... 38IV.1. Introduction………………………………………………………….. 38IV.2. Conception de l’application…………………………………………. 38 IV.2.1. Diagramme de classes...………………………………………….. 38IV.3. Conception de la base de données…………………………………... 40 IV.3.1.Passage à un modèle relationnel à partir d’un diagramme de classes.. 40 IV.3.2. Schéma Relationnel de la base de données……………………….. 40IV.4. Conclusion……………………………………………………………. 42
Chapitre V Réalisation et implémentation……………………………….. 43V.1. Introduction…………………………………………………………... 43V.2. Environnement de travail……………………………………………. 43 V.2.1. Environnement matériel…………………………………………... 43 V.2.2. Environnement logiciel……………………………………………… 44V.3. Architecture du Système …………………………………………….. 45 V.3.1. Diagramme de composante……………………………………….. 45
2
V.4. Choix techniques……………………………………………………… 46 V.4.1. Choix du langage………………………………………………….. 46 V.4.2. Choix de la technologie de sécurité……………………………….. 46 V.4.2.1. Protection contre les attaques d’injection SQL……………. 46 V.4.2.2. Les sessions………………………………………………... 46 V.4.2.3. Mécanisme de hachage de mot de passe…………………... 47 V.4.3. Autres choix technologiques……………………………………… 48V.5. Diagramme de GANTT………………………………………………. 48V.6. Phase d’implémentation……………………………………………… 49 V.6.1. Contraintes………………………………………………………… 49 V.6.2. Pratiques adoptées………………………………………………… 50V.7. Phase de tests et validation…………………………………………... 50 V.7.1. Jeux de tests et validation…………………………………………. 51V.8. Conclusion…………………………………………………………….. 53
Chapitre VI Interface de l’application…………………………………... 54VI.1. Introduction………………………………………………………….. 54VI.2. Interface de l’application……………………………………………. 54 VI.2.1. Back-office……………………………………………………….. 54 VI.2.1.1. Page d’authentification……………………………………. 54 VI.2.1.2. Session administrateur…………………………………….. 55 VI.2.1.2.1. Page d’accueil du back-office…………………………. 55 VI.2.1.2.2. Page gestion des produits……………………………... 56 VI.2.1.2.3. Page ajout d’un nouveau produit (pop-up)……………... 56 VI.2.1.2.4. Suppression d’un produit……………………………... 57 VI.2.2. Front-office……………………………………………………….. 58 VI.2.2.1. Page d’accueil du front-office …………………………….. 58 VI.2.2.2. Page gestion de panier…………………………………… .. 60 VI.2.2.3. Page choix de méthode d’expédition……………………... 61 VI.2.2.4. Page choix de méthode de payement……………………… 62 VI.2.2.5. Page confirmation commande……………………………... 63 VI.2.2.6. Page de payement………………………………………….. 64VI.3. Conclusion……………………………………………………………. 66Conclusion générale………………………………………………………….. 67Glossaire……………………………………………………………………… 68Bibliographie et Néographie………………………………………………… 69Annexe………………………………………………………………………... 70
3
Table des figuresListe des figures Titres
Figure I.1 Démarche d’élaboration du projet
Figure I.2 Organigramme de faisabilité du projet
Figure II.1 Diagramme de cas d'utilisation globale
Figure II.2 Diagramme de cas d'utilisation « Acheté un produit »
Figure II.3 Diagramme de cas d'utilisation « gérer les produits »
Figure II.4 Diagramme de séquence « authentification »
Figure II.5 Diagramme de séquence « Mise à jour d’un produit »
Figure II.6 Diagramme de séquence « Ajout d’un nouveau produit »
Figure II.7 Diagramme de séquence « Suppression d’un produit »
Figure II.8 Diagramme de séquence « Gestion du panier »
Figure III.1 Architecture client-serveur
Figure III.2 Architecture 3-tiers
Figure III.3 Architecture N-tiers
Figure IV.1 Diagramme de class
Figure IV.2 Schéma relationnel de la base de données
Figure V.1 Diagramme de composante
Figure V.2 Protection contre les attaques d’injection SQL
Figure V.3 Protection des données avec Les sessions
Figure V.4 Protection de mot de passe avec le mécanisme de hachage
Figure V.5 Script d'appel des plugins de jquery
Figure V.6 Menu slider
Figure V.7 Diagramme de GANTT
Figure V.8 Tableau jeux de tests et validation
Figure VI.1 Page de connexion de l’utilisateur
Figure VI.2 Message d’erreur lorsque le login ou le mot de passe est invalide
4
Figure VI.3 Page d’accueil du back-office
Figure VI.4 Page gestion des produits
Figure VI.5 Page ajout d’un nouveau produit
Figure VI.6 Contrôle de saisie dans l’ajout d’un nouveau produit
Figure VI.7 Supprimer un produit
Figure VI.8 Page d’accueil du back-office
Figure VI.9 Ajout d’un produit au panier
Figure VI.10 Page détails d’un produit
Figure VI.11 Page Gestion du panier
Figure VI.12 Page d’authentification du client
Figure VI.13 Formulaires d’inscription d’un nouveau client
Figure VI.14 Page Choix de méthode d’expédition
Figure VI.15 Formulaire de modification de l’adresse d’expédition
Figure VI.16 Page Choix de méthode de payement
Figure VI.17 Page confirmation de la commande
Figure VI.18 Page de payement
5
Introduction
GénéraleL’évolution du secteur informatique durant ces dernières années a
favorisé l’apparition de nouvelles technologies web qui ont permis d’unir
les différents organismes et les différentes sociétés d’une manière
croissante et remarquable.
Cette évolution prend sa part dans divers secteurs et impose son
existence vue la simplicité des applications facilitant la communication
entre les différents membres des établissements surtout que le facteur
temps joue un rôle très important dans l’évolution de la qualité des
services.
Le secteur du commerce n’a pas échappé à cette vague, en effet ce
secteur a donné naissance à un nouveau secteur dit E-Commerce qui
désigne l’ensemble des échanges numérisés liés à des activités
commerciales.
C’est dans ce contexte que s’inscrit ce projet de fin d’études, dans
lequel nous sommes amenés à réaliser un site web marchand, qui permet
de vendre des ordinateurs en ligne.
Donc, après avoir introduit notre travail de projet de fin d’études,
nous présentons dans un premier chapitre la société IMS qui nous a
accueillis, nous délimitons le cadre général du travail et nous spécifions
notre sujet.
Le deuxième chapitre est consacré à une analyse des besoins qui
s’intéressera aussi bien aux aspects fonctionnels qu’aux aspects non-
fonctionnels liées à notre sujet. Dans ce chapitre nous identifierons les cas
6
d’utilisations ainsi que les diagrammes de séquences décrivant les
scénarios d’utilisation de site web.
Le troisième chapitre est consacré à la conception de notre site web.
Dans ce chapitre nous allons spécifier les différentes classes constituantes
notre system. A partir du diagramme de classe nous dégagerons la
structure de notre base do données.
Dans le quatrième chapitre nous présenterons les outils qui nous
étaient utiles dans l’élaboration de ce travail.
Le cinquième chapitre s’occupera de la réalisation de site web en
passant par l’environnement matériel et logiciel utilisé avec les différentes
techniques de réalisation et de sécurité.
Le dernier chapitre nous donne une vue sur le site web dans son état
final et ce en nous fournissant les différentes IHM.
Pour conclure, nous revenons sur nos apports et perspectives dans la
conclusion de ce projet.
7
Chapitre I. Présentation
Générale
I.1. Introduction
I.2. Présentation de l’organisme d’accueil
La société tunisienne IMS est une société de services et d‘ingénierie informatique
(SSII) spécialisée dans la conception, la réalisation et le développement de tout procédé et
applications informatiques et télécommunications incluant l’aspect logiciel (Software) et
l’aspect matériel (Hardware).
La société IMS est composée par des ingénieurs et des techniciens diplômés des
grandes écoles tunisiennes disposant d’une expérience laborieuse dans le domaine des TIC et
des scientifiques hautement qualifiés.
I.2.1. Les objectifs de IMS
Les objectifs qu’IMS visent à les atteindre sont :
Satisfaction des clients et Anticipation totale de leurs besoins
Développement des relations de partenariat solides avec des sociétés nationales
et internationales.
Satisfaction de ces collaborateurs puisque la relation humaine est son axe
stratégique.
Atteindre une qualité de haut niveau
Renforcer son avancée technologique
Innover toujours en se basant sur des études et des recherches avancées
I.2.2. Les produits et les services offerts par IMS
- La société IMS offre plusieurs types de produits tels que :
CMS ERP /CRM E-Banking E-Portail Formed
- La société IMS offre aussi plusieurs types de service tels que :
Applications Web Web Marketing E-Solution Développement Informatique Outsourcing Réseau ET Télecommunication Assistance Technique
I.3. Présentation du sujet
Le sujet intitulé « Conception et développement d’un site web Marchand pour vendre
du matériel informatique en ligne ». Le travail demandé a pour finalité de créer un site web
marchand destinée à la vente du matériel informatique en ligne, qui est encore au stade de la
recherche, et ce dans l’optique de concevoir et de réaliser une application qui permet de
vendre en ligne, de gérer les commandes, les clients, les factures, et le stock en temps réel.
I.4. Méthodologie et formalise adoptés
La méthodologie, est bien sûr la démarche méthodologique et l’ensemble des modèles
associés mais c’est aussi, en amont mettre à plat la logique applicative : les outils de
modélisation comme Merise ou UML sont donc primordiaux.
Dans ce qui suit, nous allons décrire la démarche de développement et argumenter le
choix d’UML comme langage de modélisation.
UML, est bien connu par les développeurs. Il est souvent utilisé pour la conception et
la représentation graphique (sous forme de diagrammes) de n’importe quelle application de
manière détaillée (éléments, paramètres, fonctions, etc.)
Outre sa souplesse et son caractère polyvalent, UML, est le mieux adapté aux
développements des applications e-commerce.
La démarche d’élaboration de notre projet s’appuie sur UML qui permettra de
modéliser d’une manière claire et précise la structure et le comportement du système. Cette
démarche est itérative, incrémentale, pilotée par les cas d’utilisation et centrée sur
l’architecture, la figure ci-dessous décrit cette démarche.
Figure I.1 : Démarche d’élaboration du projet
Figure I.2 : Organigramme de faisabilité du projet
Vu que 50% des échecs des projets informatiques proviennent de la spécification, nous
avons donné une attention particulière au maquettage.
Le maquettage est une technique qui permet de surmonter la difficulté de spécification
du logiciel due à la différence de terminologie et au manque de précision dans l'expression
des besoins. Cette activité consiste à dessiner rapidement des écrans du futur système
(maquette).
I.5. Conclusion
Nous avons présenté le cadre du travail au sein de l’entreprise IMS, le sujet ainsi que
les méthodologies utilisées pour concevoir notre site web. Ces éléments seront par la suite les
piliers pour la conception et la mise en place de notre application ils nous ont, en effet, fournis
les grandes lignes du système qui seront par la suite exploitées, détaillées et mises en œuvre
pour la suite du travail.
Dans ce qui suit nous allons effectuer une analyse des besoins et des spécifications du
projet à réaliser ce dont nous allons aborder au cours du prochain chapitre.
Chapitre II. Analyse des besoins
et spécifications
II.1. Introduction
L'identification des besoins est la pierre angulaire de conception et développement des
sites web, car l’analyse des besoins est essentielle à la réussite d'un projet de développement.
En effet cette phase consiste à qualifier les besoins fonctionnels et à analyser l’existant afin
d’obtenir les spécifications et les exigences détaillées techniques.
Dans cette partie, nous avons spécifié les différents besoins fonctionnels et non
fonctionnels requis pour l’implémentation de notre site web et les cas d’utilisations possibles.
Nous allons ensuite passés à la conception de notre site web.
II.2. Objectif
La vente en ligne est une forme de commerce électronique qui a apparut avec le
développement massive des technologies d’informations et qui consiste à réaliser tout les
étapes d’une transaction commercial sur internet.
Dans ce contexte que s’inspire notre travail qui consiste à concevoir et à développer un
site web marchand.
Notre solution aura pour objectif :
Vendre du matériel informatique en ligne.
Contrôle et gestion des différents processus.
Réduire les coûts et augmenter les revenus.
Augmenter le nombre des clients.
II.3. Critique de l’existant
- La vente du matériel informatique se fait d’une manière traditionnel, c'est-à-dire si
les clients veulent acheter du matériel informatique, ils doivent se présenter dans les points de
vente.
- La gestion des ventes, des factures, des produits, des clients…, se fait manuellement et
puis enregistrer sur un ordinateurs dans des fichiers Excel.
La façon de gère et de vendre le matériel informatique engendre les défaillances
suivantes :
Les frais de locations et les frais des personnels qui travaillent dans les
boutiques sont élevée.
Les clients qui viennent pour acheter du matériel informatique n’ont pas une
visibilité totale sur tous les matériels.
Une perte du temps dans la recherche des informations concernant le
matériel informatique.
Le processus de la gestion des ventes du matériel informatique (Ajout,
Modification,… des facteurs, des clients, des produits,…) est long.
Un Manque de publicité.
II.4. Spécification des exigences
Les objectifs de la phase spécification des exigences sont de faciliter la
reconnaissance et la compréhension du lien entre les exigences, de permettre leur priorisation,
et surtout de tracer leur prise en charge dans le projet.
II.4.1. Liste des exigences
II.4.1.1. Besoins fonctionnels :
1 - Besoin de deux interfaces conviviales et interactives, front-office et back-office
puisque le site web est destiné à deux types d’utilisateurs qui sont les internautes, les clients
et le administrateur.
2 - Pour La partie back-office du site :
Besoin d’une page d’authentification pour accéder au back-office.
Besoin de gérer les produits : Consultation, ajout, modification, suppression, recherche des produits, gestion des marques ...
Besoin de gérer les medias : ajout, modification et suppression des medias (Logo, Bannière…).
Besoin de gérer les contacts : consultation et suppression des contacts.
Besoin de gérer le compte d’administrateur : Modifier le login et le mot de passe, ajouter un administrateur…
Besoin de gérer les factures : consultation, recherche, suppression des factures.
Besoin de gérer les clients inscrit dans l’espace clients : informer les clients sur l’avancement de leurs commandes, rechercher des clients, consultation des informations concernant les clients…
Besoin d’un module de newsletter pour communiquer les clients et les internautes sur toutes les nouveautés.
Besoin de gérer les commandes : Ajout, suppression, consultation et recherche des commandes.
Gestion des stocks en temps réel.
3 - Pour la partie front office du site:
Besoin d’un menu qui contient tout les catalogues du matériel informatique.
Besoin d’une page de contact.
Besoin d’une page de paiement.
Besoin d’un espace membre pour nos clients qui contient l’historique des
achats réalisé, toutes les offres spéciales, le suivi de la livraison...
Besoin d’un Moteur de recherche.
Besoin d’une Newsletter.
Besoin d’un Module de partage des produits sur les réseaux sociaux.
Besoin d’un panier pour gérer les quantités des produits acheté.
II.4.1.2 Besoins non fonctionnels :
En plus des besoins fonctionnels cités ci-dessus nous devons tenir compte des
contraintes suivantes :
La satisfaction complète des besoins de tous les utilisateurs.
Simplifier le travail des utilisateurs avec une ergonomie sobre et efficace.
L’implémentation des mesures sécuritaires.
Assurer la Confidentialité des informations.
L'optimisation du code.
L'optimisation des ressources consommées.
La compatibilité avec le matériel existant.
L’application doit assurer la non-répudiation et la traçabilité de l’information.
L’application doit être sécurisée. Un profil d’accès est affecté à chaque
utilisateur.
II.4.2. Quelques concepts
Dans notre site web, nous allons définir les différents types d'utilisateurs qui ont des
droits et des fonctionnalités qui leurs sont propres.
Nous abordons alors notre travail par une identification des acteurs, en fait un acteur
représente un rôle joué par une personne ou par un groupe de personnes qui interagit avec le
système.
Dans notre site web on trouve 3 types d’acteurs : l’internaute, le client, et
l’administrateur du site.
II.4.3. Scénarios et des cas d’utilisation
II.4.3.1 Identification des acteurs :
Les principaux acteurs de notre application sont :
L’administrateur.
Les internautes.
Les clients.
Chaque acteur à ses propres tâches qu’on va les modéliser dans les sections suivantes.
En effet, tous les acteurs passent obligatoirement par deux interfaces qui sont :
- Le back-office : destinée à l’administrateur.
- Le front-office : destinée aux internautes et aux clients.
Espace Administrateur : C’est le back-office de notre site web. Dans cette espace
l’administrateur a le droit d’effectuer toutes sortes d’opérations pour administrer le site tel que
l’ajout, la modification, la suppression, la mise a jour des produits ou des medias, ou des
factures…, définir les droits d’accès, consulter les contacts…
Espace Internaute : C’est le front-office de notre site web. Cette espace est destinée
aux internautes et aux clients qui peuvent naviguer sur le site, effectuer des recherches sur les
marques du matériel informatique proposée, s’inscrire dans la newsletter, faire des achats,
s’inscrire dans l’espace membre, consulter le catalogue…
II.4.3.2 Les diagrammes des cas d’utilisation :
Il s'agit de la solution UML pour représenter le modèle conceptuel, les diagrammes
des cas d’utilisation permettent de décrire l'interaction entre l'acteur et le système.
II.4.3.2.1 Diagramme de cas d’utilisation globale :
Figure II.1 : Diagramme de cas d'utilisation globale
Ce diagramme de cas d’utilisation nous donne une vue globale sur les utilisateurs et
leurs interactions avec les 2 parties du site, le back-office et le front-office.
- l’internaute : son interaction se fait avec le front-office du site soit par la consultation
du contenue du site, la création d’un compte, la recherche …
- le client : c'est un internaute qui s'est transformé en client dés son premier acte
d’achat en ligne, il hérite tout les fonctionnalités de l’internaute (consultation du contenue du
site, la création d’un compte, la recherche …).
- l’administrateur : son interaction se fait avec le back-office du site, son rôle est la
gestion du site (gestion des produits, gestion des medias, gestion des commandes…)
II.4.3.2.2 Diagramme de cas d’utilisation « Acheté un produit »
Figure II.2 : Diagramme de cas d'utilisation « Acheté un produit »
Ce diagramme de cas d’utilisation nous montre l’interaction du client avec le front-
office du site lorsqu’il va acheter un produit. Le client ici peut consulter les produits, gérer
son panier, passer une commande et suivre son avancement après l’authentification.
II.4.3.2.3 Diagramme de cas d’utilisation « Gérer les produits »
Figure II.3: Diagramme de cas d'utilisation « Gérer les produits »
Ce diagramme de cas d’utilisation nous montre comment l’administrateur gère les
produits. Pour gérer un produit, l’administrateur doit tout d’abord s’authentifier, puis il peut
ajouter, modifier, ou supprimer un produit.
II.4.3.3 Les diagrammes de séquence:
II.4.3.3.1 Propriétés du diagramme de séquences :
L’analyse des cas d’utilisation commence par l’élaboration des diagrammes de
séquences avec des objets d’analyses. Les objets d’analyses sont des instances de classes
d’analyses qui représentent les éléments majeurs ayant des comportements et des
responsabilités dans le système.
Les objets de contrôle : ils représentent les activités systèmes. Ces objets dirigent les
activités des objets d’entités et d’interfaces.
Les objets d’entités : ce sont des entités persistantes au système (tel que les tables de
la base de données).
Les objets d’interface : ils représentent l’interface qui est en interaction directe avec
l’utilisateur (exemples : les écrans de saisies).
II.4.3.3.2 Diagramme de séquence « Authentification » :
Titre : S’authentifier.
Résumé : Ce cas d’utilisation permet à l’utilisateur de se connecter au système et de
s’authentifier a travers un profile qui déterminera les rubriques aux quels il a le droit d’y
accéder.
Acteurs : Se sont les différant utilisateurs du système qui sont : l’internaute, le client
et l’administrateur.
Description des scénarios :
1. Pré condition :
Existence d’une interface permettant la saisie d’identificateur ainsi du mot de passe
pour l’utilisateur.
2. Scénario Normal :
L’utilisateur accède au site web
Une interface Homme/Machine est apparue contenant un formulaire
l’authentification.
Saisie du Login et de Mot de Passe.
Le system vérifie l’existence de l’utilisateur.
Le system cherche les rubriques disponibles pour cet utilisateur
Le system affiche les rubriques selon le profil de l’utilisateur connecté.
3. Scénario d’erreur :
Login et Mot de Passe erroné.
Le system indique à l’utilisateur que le Login et le Mot de Passe sont
erronés.
Le system affiche l’échec de la saisie (Le scénario normal reprend au point
1).
Figure II.4 : Diagramme de séquence « Authentification »
II.4.3.3.3 Diagramme de séquence « Mise à jour d’un produit » :
Titre : Mettre à jour un produit.
Résumé : Décrire les étapes à suivre par l’administrateur afin de mettre à jour un
produit.
Acteurs : l’administrateur.
Description des scénarios :
1. Pré condition :
Dans l’interface du back-office on trouve un menu qui contient des modules, on
choisit le module Produits
2. Scénario Normal :
a. L’administrateur entre dans le back-office et choisi le module produits
b. L’écran du produit affiche tout les produits.
c. L’administrateur appuie sur le bouton mise à jour du produit qu’il veut le
modifier.
d. L’écran du produit affiche tout les informations du produit concerné.
e. L’administrateur modifie les informations du produit et valide son choix.
f. Le system enregistre les modifications réalisé par l’administrateur dans la base
de données.
g. L’écran du produit affiche un message de mise à jour avec succès.
3. Scénario d’erreur :
Des Informations erronées ou des champs vides.
L’écran du produit affiche un massage d’erreur qui indique à
l’administrateur que les informations saisis sont erronées ou indique qu’il
y’a des champs vides et qu’il doit les remplis (Le scénario normal reprend
au point 5).
Figure II.5 : Diagramme de séquence « Mise à jour d’un produit »
II.4.3.3.4 Diagramme de séquence « Ajout d’un nouveau produit »:
Titre : Ajouter un nouveau produit.
Résumé : Décrire les étapes à suivre par l’administrateur afin d’ajouter un produit.
Acteurs : l’administrateur.
Description des scénarios :
1. Pré condition :
Dans l’interface du back-office on trouve un menu qui contient des modules, on
choisit le module Produits
2. Scénario Normal :
a. L’administrateur entre dans le back-office et choisi le module produits
b. L’écran du produit affiche tout les produits.
c. L’administrateur appuie sur le bouton ajouter un produit.
d. L’écran du produit affiche un formulaire d’ajout d’un nouveau produit.
e. L’administrateur remplie le formulaire du produit et valide son choix.
f. Le system enregistre le nouveau ajouté par l’administrateur dans la base de
données.
g. L’écran du produit affiche un message d’ajout avec succès.
3. Scénario d’erreur :
Des Informations erronées ou des champs vides.
L’écran du produit affiche un massage d’erreur qui indique à
l’administrateur que les informations saisis sont erronées ou indique qu’il
y’a des champs vides et qu’il doit les remplis(Le scénario normal reprend
au point 4).
Figure II.6 : Diagramme de séquence « Ajout d’un nouveau produit »
II.4.3.3.5 Diagramme de séquence « suppression d’un produit » :
Titre : Supprimer un produit.
Résumé : Décrire les étapes à suivre par l’administrateur afin de supprimer un
produit.
Acteurs : l’administrateur.
Description des scénarios :
1. Pré condition :
Dans l’interface du back-office on trouve un menu qui contient des modules, on
choisit le module Produits
2. Scénario Normal :
a. L’administrateur entre dans le back-office et choisi le module produits
b. L’écran du produit affiche tout les produits.
c. L’administrateur appuie sur le bouton supprimer du produit qu’il veut le
supprimer.
d. L’écran du produit affiche un message qui demande la confirmation de la
suppression.
e. L’administrateur confirme son choix.
f. Le system supprime le produit dans la base de données.
g. L’écran du produit affiche un message de suppression avec succès.
Figure II.7 : Diagramme de séquence « Suppression d’un produit »
II.4.3.3.6 Diagramme de séquence « Gestion du Panier »
Titre : Gérer un panier.
Résumé : Décrire les étapes à suivre par le client afin de gérer son panier lors d’une
opération d’achat.
Acteurs : Le client.
Description des scénarios :
1. Pré condition :
Dans l’interface du front-office on trouve les catalogues des produits offerts, alors il
suffit de choisir le produit à acheter.
2. Scénario Normal :
a. Le client parcoure les catalogues des produits offerts et choisi un produit(s) on
appuyant sur le bouton ajouter au panier.
b. Le produit(s) s’ajout dans le panier.
c. Le client accède à son panier en appuyant sur l’icone panier.
d. Le client peut modifier les quantités des produits dans le panier.
e. Le client peut supprimer des lignes dans le panier.
f. Le client peut passer la commande après avoir terminer la gestion de son
panier.
3. Scénario d’erreur :
Des Informations erronées ou des champs vides.
L’écran du produit affiche un massage d’erreur qui indique au client que
les informations saisis lorsque il a modifié son panier sont erronées, ou
indique qu’il y’a des champs vides et qu’il doit les remplis(Le scénario
normal reprend au point 4).
Figure II.8 : Diagramme de séquence « Gestion du panier »
II.5. Conclusion
Ce chapitre nous a permis de couvrir tous les cas d'utilisations concernant les
différents utilisateurs de notre système et de définir les besoins non fonctionnels à prendre en
considérations afin de satisfaire les utilisateurs. La spécification des besoins étant établie,
nous essayerons dans le chapitre suivant de concevoir clairement les différentes technologies
existantes pouvant être utilisées pour l’élaboration du projet.
Chapitre III. État de l’art
III.1. Introduction
Dans ce chapitre, nous allons détailler les différentes architectures existantes pouvant
être utilisées pour l’élaboration de notre projet, en suite nous allons présenter les différents
moyens techniques qui peuvent être utilisées dans la réalisation de notre projet.
III.2.Architecture de l’application
III.2.1. Architecture client-serveur
III.2.1.1. Présentation :
Les architectures client-serveur constituent une étape importante dans l'évolution des
systèmes d'informations. Ce type d'architecture est constitué uniquement de deux parties: un
client qui gère la présentation et la logique applicative est un serveur qui stocke les données
de façon cohérente et gère éventuellement une partie de la logique applicative. L'interface
entre ces deux parties est classiquement le langage. Dans ce type d'architecture on constate
une certaine indépendance du client par rapport au serveur. La programmation du client peut
s'effectuer sans se préoccuper de la mise en place de la base de données. En particulier, les
questions concernant l'administration des données ne concerneront pas le développeur du
client (dimensionnement des disques, répartition des données sur le système, optimisation des
accès aux données, sauvegarde des données,...).
Figure III.1 : Architecture client-serveur
III.2.1.2. Avantages de l’architecture client-serveur :
Les principaux avantages de l’architecture client-serveur sont :
L'Atomicité : permet à la transaction d'avoir un comportement indivisible; soit
toutes les modifications sur les données effectuées dans la transaction sont
effectives, soit aucune n'est réalisée.
La Cohérence des données de la base est permanente.
L'Isolation des transactions : signifie que les modifications effectuées au cours
d'une transaction ne sont visibles que par l'utilisateur qui effectue cette
transaction.
La Durabilité : elle garantit la stabilité de l'effet d'une transaction dans le
temps, même en cas de problèmes graves tel que la perte d'un disque.
III.2.1.3. Inconvénients de l’architecture client-serveur :
L'architecture client-serveur possède toutefois des inconvénients. Ce sont ces
inconvénients qui poussent les entreprises à utiliser d'autres technologies. Les deux
inconvénients principaux sont la difficulté à gérer correctement les questions de sécurité et le
coût du déploiement.
La sécurité d'un système en architecture client-serveur est gérée au niveau du SGBDR.
Celui-ci contrôle l'accès aux données en attribuant des autorisations d'accès aux différents
utilisateurs du système. Le problème vient du fait que cette attribution de droit ne peut pas
tenir compte des spécificités du logiciel réalisé.
L'autre problème est souvent considéré comme beaucoup plus important par les
entreprises car il est beaucoup plus visible. Il s'agit des durées et coûts de déploiement des
logiciels. En effet un logiciel classique, développé en architecture client-serveur, nécessite
une installation et une éventuelle configuration sur chaque poste utilisateur. Le déplacement
d'un technicien coûte déjà très cher aux entreprises. Mais ce qui reste le plus laborieux est la
nécessité de mettre à jour régulièrement le logiciel. Dans une architecture client-serveur,
chaque mise à jour du logiciel nécessite un nouveau déploiement accompagné de nombreux
coûts.
III.2.2. Architecture 3-tiers:
III.2.2.1 Présentation :
Le principe d'une architecture 3-tiers est relativement simple: il consiste à séparer la
réalisation des trois parties vues précédemment (stockage des données, logique applicative,
présentation). Nous avons déjà pu entrevoir la possibilité de séparer la conception de ces trois
subdivisions, ici il s'agit de séparer leur implantation. Tout comme dans le client-serveur,
cette séparation signifie qu'il est possible de déployer chaque partie sur un serveur
indépendant, toutefois cela n'est pas obligatoire.
La mise en place de ce type d'architecture permet dans tous les cas une plus grande
évolutivité du système. Il est ainsi possible de commencer par déployer les deux serveurs sur
la même machine, puis de déplacer le serveur applicatif sur une autre machine lorsque la
charge devient excessive.
Les éléments permettant la réalisation classique d'un système en architecture 3- tiers
sont les suivants:
Système de gestion de base de données relationnel (SGBDR) pour le stockage
des données,
Serveur applicatif pour la logique applicative,
Navigateur Web pour la présentation.
Figure III.2 : Architecture 3-tiers
III.2.2.2. Avantages de l’architecture 3-tiers :
Les avantages de l'architecture 3-tiers sont principalement au nombre de quatre :
Les requêtes clients vers le serveur sont d'une plus grande flexibilité que dans
celles de l'architecture 2-tiers basées sur le langage SQL.
Cette flexibilité permet à une entreprise d'envisager dans le cadre d'une
architecture 3-tiers une grande souplesse pour l'introduction de toutes
nouvelles technologies.
D'un point de vue développement, la séparation qui existe entre le client, le
serveur et le SGBD permet une spécialisation des développeurs sur chaque
tiers de l'architecture.
Plus de flexibilité dans l'allocation des ressources; la portabilité du tiers serveur
permet d'envisager une allocation et ou modification dynamique aux grés des
besoins évolutifs au sein d'une entreprise.
III.2.2.3. Inconvénients de l’architecture 3-tiers :
Les inconvénients de l’architecture 3-tiers sont :
Les coûts de développements d'une architecture 3-tiers sont plus élevés que
pour du 2-tiers.
Plus de charge sur le serveur et le réseau.
III.2.3. Architecture n-tiers
III.2.3.1. Présentation :
Une architecture n-tiers va plus loin dans le découpage de l'application sur différents
serveurs. Une architecture n-tiers est également appelée architecture distribuée du fait de la
distribution des traitements et des données sur différents serveurs. Le découpage de base du
système reste toujours le même: une partie gestion de données, une partie gestion de la
logique applicative et bien entendu le client assurant la présentation. Toutefois les deux
parties développées coté serveur vont pouvoir être déployées chacune sur plusieurs serveurs.
L'objectif général de ce type d'architecture est de permettre l'évolutivité du système
sous plusieurs aspects: la quantité de données stockée, la disponibilité du serveur, le nombre
d'utilisateurs…
Il existe deux types de répartition possibles dans une architecture distribuée. Il est
possible de répartir les données et de répartir la logique applicative. Chacune de ces deux
répartitions permet de résoudre des problèmes de natures différentes. Elles peuvent donc être
mises en place soit séparément, soit en parallèle sur le même système.
Figure III.3 : Architecture N-tiers
III.2.4. Architecture adoptée
Vu que notre application nécessite un serveur Web pour fonctionner, alors
l’architecture la plus adoptée au système à réaliser est l’architecture 3-tiers. Donc les
éléments qui constituent l’architecture de notre application sont les suivant :
La présentation : C’est la partie la plus immédiatement visible pour l'utilisateur.
On parle d'Interface Homme Machine. En informatique, elle peut être réalisée par
une application graphique ou textuelle ou en WML pour être utilisée par un
téléphone portable.., et pour notre cas il est représentée en HTML pour être
exploitée par un navigateur web.
La logique applicative : Elle correspond à la partie fonctionnelle de l'application,
celle qui implémente la « logique », et qui décrit les opérations que l'application
opère sur les données en fonction des requêtes des utilisateurs, effectuées au
travers de la couche présentation.
La couche accès aux données : La fonction principale de cette couche est de
gérer les données. La façon dont elle organise, manipule et stocke les données est
transparente vis-à-vis des applications externes et des utilisateurs.
III.3. Choix techniques
III.3.1. SGBD utilisé :
III.3.1.1. MYSQL
MySQL est un système de gestion de base de données relationnelle. Une base de
données relationnelle augmente la vitesse et la flexibilité, en stockant des données dans des
tables séparées plutôt que de mettre toutes les données dans un secteur. Ces tables sont liées
par des relations définies permettant de combiner des données de plusieurs tables sur
demande. Employer une SGBDR signifie qu'il est possible d'ajouter, d'accéder, et de traiter
les données stockées dans votre base de données. SQL est "Structured Query Language" - le
langage normalisé le plus commun pour accéder à des bases de données.
III.3.1.1. 1. Communication du MySQL avec le serveur web :
La totalité du dialogue avec une base de données s’effectue en passant des messages
au serveur MySQL. Ces messages peuvent être envoyés de plusieurs façons. Les requêtes
faites sont formulées dans le langage SQL (Strutured Query Language).
PHP, lui ne comprend pas ce langage, mais cela n’est pas utile car PHP est là
seulement pour passer de façon transparente à MySQL les requêtes écrites en SQL. Le serveur
web les interprète, les exécute, et renvoie un message contenant le résultat de cette exécution
ou un diagnostic d’erreur si la requête n’était pas correcte.
III.3.1.2 Les autres SGBD face à MYSQL : PostgreSQL
PostgreSQL est un Système de Gestion de Base de Données open source basé sur
POSTGRES développé à l'université de Californie au département des sciences informatiques
de Berkeley.
Ce système est concurrent d'autres systèmes de gestion de base de données, qu'ils
soient libres (comme MySQL et Firebird), ou propriétaires (comme Oracle, Sybase, DB2 et
Microsoft SQL Server). Comme les projets libres Apache et Linux, PostgreSQL n'est pas
contrôlé par une seule entreprise, mais est fondé sur une communauté mondiale de
développeurs et d'entreprises.
- Principales caractéristiques :
PostgreSQL peut stocker plus de types de données que les types traditionnels
entiers, caractères, etc. L'utilisateur peut créer des types, des fonctions, utiliser
l'héritage de type etc.
Il fonctionne sur diverses plates-formes matérielles et sous différents systèmes
d'exploitation.
III.3.1.3. SGBD adoptée (MySQL)
On a choisie MySQL car il est très rapide, fiable, et facile à employer. MySQL a
également un ensemble de dispositifs très pratiques développés en coopération avec ses
utilisateurs. C'est également 'Open Source' et donc librement accessible. MySQL est employé
pour accéder à des bases de données sur Internet dû à sa connectivité, à sa vitesse et à sa
sécurité. Il a été à l'origine développé pour contrôler de grandes bases de données à une
vitesse beaucoup plus rapide que les solutions qui ont précédemment existé. MySQL a
pendant plusieurs années prospéré dans les secteurs compliqués de la production.
III.3.2. les langages utilisés :
III.3.2.1. Le langage JQuery :
JQuery est une librairie JavaScript, et c’est un langage conçu pour simplifier les
scripts du coté client dans le navigateur. Il a été crée par John Resig au Barcamp de New-
York en 2006. C’est un logiciel open source sous les licences combinées du MIT et GPL.
Le slogan de jQuery est Coder moins pour en faire plus est parfaitement adapté, et on
peut faire de beaux effets avec quelques lignes de code. Sa syntaxe est très facile à
comprendre, et on code de manière transparente une fois qu’on a compris les concepts de
base. JQuery est particulièrement adapté pour :
Créer des animations
Gérer les évènements du navigateur
Sélectionner les éléments DOM
Créer des programmes AJAX
- Avantages d’utiliser jQuery
Premièrement, c’est beaucoup plus rapide de programmer une fonctionnalité avec
jQuery que de l’écrire à partir de rien. Il permet donc de rehausser la valeur de vos projets de
conception web en diminuant le temps consacré ou bien en vous permettant d’implémenter
des fonctionnalités plus poussées.
Ensuite, il est conçu pour fonctionner dans tous les navigateurs récents. Si vous
programmez souvent en JavaScript vous savez à quel point chaque navigateur offre une
version différente de JavaScript et à quel point ça peut rendre le code complexe et illisible.
Aussi, le fait d’utiliser une librairie aussi poussée peut vous éviter d’avoir recours à
Flash, qui est une technologie propriétaire
III.3.2.2. Le langage PHP :
PHP est un langage interprété, de scripts et libre. Il connaît un succès toujours
croissant sur le Web. L'environnement Linux est sa plateforme de prédilection. Combiné avec
le serveur Web Apache et la base de données MySQL, PHP offre une solution
particulièrement robuste, stable et efficace, offrant en outre l'avantage d'être gratuite, tous ces
logiciels viennent du monde des logiciels libres. Il est conçu pour le développement d
‘application Web interactive et dynamique.
PHP possède un grand nombre de fonctions permettant des opérations sur le système
de fichiers, la gestion de la base de données telle que MySQL et de pouvoir le gérer
dynamiquement. C’est un langage qui s’inclut dans le HTML. Il est principalement conçu
pour servir de langage de scripts côté serveur. Il est rapide (le serveur n’a pas besoin d’être
réinitialisé souvent) et stable (ne change pas radicalement d’une version à une autre).
III.3.2.3. Les autres langages face à PHP : ASP (Active Server
Pages) :
ASP est un standard mis au point par Microsoft en 1996. Son syntaxe est un peu
différente de celui de PHP mais les bases sont les même. Il supporte pratiquement tous les
standards du Web et maintenant il est supporté par le serveur Web Apache. En fait, c’est un
langage VB script.
PHP est l’un des langages les plus utilisé dans le monde et est passé devant la
technologie ASP de Microsoft.
En effet, PHP possède plusieurs avantages par rapport à ASP. Les principaux sont :
La portabilité.
La réutilisabilité.
La modularité.
L’extensibilité.
Un faible coût.
La simplicité d'utilisation.
III.3.2.4. Coopération de PHP et MySQL :
MySQL et PHP, le couple parfait : ils sont fréquemment utilisés conjointement. On les
appelle parfois le duo dynamique. MySQL assure la gestion de la base de données, PHP
langage de programmation dans lequel sont écrites les applications de bases de données sur le
Web.
III.4. Conclusion
Dans ce chapitre, nous avons présenté l’architecture à adopter pour notre application
ainsi qu’une comparaison avec les autres architectures. Aussi, nous avons détaillé les
technologies utilisées pour la programmation et la base de données. Dans ce qui suit nous
allons effectuer la conception du projet Représenté dans le diagramme de class et dans le
schéma relationnel, ce dont nous allons aborder au cours du prochain chapitre.
Chapitre IV. Conception
IV.1. Introduction
La phase de conception permet de décrire de manière non ambiguë, le plus souvent en
utilisant un langage de modélisation, le fonctionnement futur du système, afin d'en faciliter la
réalisation. Cette phase englobe la conception de la base de données et celle des applications.
Dans ce chapitre nous exposons notre conception du système à réaliser et qui a pour
but de rendre flexible la tâche de développement de notre application.
En premier lieu, on va présenter l'architecture du système par la suite, vu la diversité
des méthodes de conception qui n’ont cessé d’évoluer, nous présentons en deuxième lieu
notre choix qui est la méthode objet basée sur le langage de modélisation unifié UML.
Ensuite, nous décrivons la conception du projet avec UML en présentant les différents
diagrammes issus de l’application et enfin on va décrire l’architecture de la base de données et
les relations entre ses tables.
IV.2. Conception de l’application
IV.2.1. Diagramme de classes
Le diagramme de classes constitue un élément très important de la modélisation : il
permet de définir quelles seront les composantes du système final : il ne permet pas en
revanche de définir le nombre et l’état des instances individuelles. Néanmoins, on constate
souvent qu’un diagramme de classes proprement réalisé permet de structurer le travail de
développement de manière très efficace; il permet aussi, dans le cas de travaux réalisés en
groupe (ce qui est pratiquement toujours le cas dans les milieux industriels), de séparer les
composantes de manière à pouvoir répartir le travail de développement entre les membres du
groupe.
Figure IV.1 : Diagramme de classes
IV.3.Conception de la base de données
IV.3.1. Passage à un modèle relationnel à partir d’un diagramme de classes :
Dans le but de se manifester le plus possible de l’approche orienté objet, on a décidé
d’adopter le modèle objet dans la conception de la base de données. Ce modèle est basé sur le
diagramme de classes (Figure IV.1) pour le passage vers le modèle entité relation.
Pour cela, les règles de passages de modèle objet au modèle relationnel sont les
suivants :
Chaque classe se transforme en une table.
Chaque attribut de classe se transforme en un champ de cette table.
Règle1: Présence de la Cardinalité (? .. 1) d’un côté de l’association :
L’identifiant de la classe qui est associée à la cardinalité (?...1) devient la clé
étrangère de l’autre classe.
Règle 2: présence de (? .. N) des deux côtés de l’association :
L’association se transforme en une table. Cette table a comme champs
l’identifiant de chacune des deux classes, plus d’éventuels autres attributs.
Règle 3: présence d’une généralisation :
Créer une table pour chaque sous type, chaque table se compose des attributs
génériques et d’attributs spécifiques. [B1]
IV.3.2. Schéma Relationnel de la base de données :
En se basant sur les règles de passage du modèle objet utilisé tout au long de notre
conception vers un modèle relationnel qui va schématiser notre base de données on a aboutit
aux transformations suivantes :
Figure IV.2 : Schéma relationnel de la base de données
IV.4. Conclusion
Dans ce chapitre, nous avons présenté le diagramme de class de notre projet puis
nous avons précisé les règles de passage à suivre pour arriver au schéma relationnel de la
base de données de notre projet.
Dans le chapitre suivant, nous exposons l'environnement logiciel et matériel utilisé
pour réaliser notre application.
Projet de fin d’études Année universitaire : 2010/2011
Chapitre V. Réalisation et
implémentation
V.1. Introduction
La réalisation du système est faite sur une machine dédiée au projet sur une
plateforme de développement incluant un serveur d’application Apache et un serveur
gestion de base de données MYSQL, à l’aide des outils de développement et de tests
nécessaires.
Cette phase est aussi critique que les précédentes puisqu’elle est pratiquement la
dernière étape avant de livrer l’application aux futurs utilisateurs.
Cette phase repose sur la phase de conception pour implémenter les algorithmes
définis par les diagrammes de séquences.
V.2. Environnement de travail
V.2.1. Environnement matérielDans la réalisation de notre application nous avons travaillé avec un ordinateur
portable :
HP Compaq 610
Processeur : Intel® Core 2 Duo T5870 (2 GHz).
Mémoire : 2 GO de RAM.
Disque dur : 320Go.
Système d’exploitation : Microsoft Windows 7
Projet de fin d’études Année universitaire : 2010/2011
V.2.2. Environnement logiciel
Outils de développement :
Dreamweaver 8 :
C’est l’Environnement de développement qui nous a permis de créer les interfaces,
les menus, les boutons …et d’utiliser les langages PHP, HTML, CSS, JAVASCRIPT pour
coder notre application. [N4]
Serveur d’application :
Wamp 5 :
Regroupe un serveur d’application Apache, un serveur gestion de base de données
MySQL, ainsi que des outils facilitant le développement de notre application. [N6]
Outil pour la conception :
Edraw max 5.6
Utilisé tout au long de la phase de spécification et de conception pour la modélisation
des besoins non fonctionnels en des besoins fonctionnels. [N7]
Outil pour le graphique et le désigne :
Adobe Photoshop CS 5
C’est un logiciel de retouche, de traitement et de dessin assisté par ordinateur qui
nous a permet de désigner notre application. [N8]
Autre :
Gantt Project 2.0.4
Utilisé pour la réalisation du diagramme de GANTT dans la phase de gestion de
projet, pour modéliser le planning de notre projet. [N9]
Projet de fin d’études Année universitaire : 2010/2011
V.3. Architecture du Système
V.3.1. Diagramme de composants
Les diagrammes de composants permettent de décrire l'architecture physique et
statique d'une application en termes de modules : fichiers sources, librairies, exécutables,
etc. Ils montrent la mise en œuvre physique des modèles de la vue logique avec
l'environnement de développement.
Les dépendances entre composants permettent notamment d'identifier les contraintes
de compilation et de mettre en évidence la réutilisation de composants.
Les composants peuvent être organisés en paquetages, qui définissent des sous-
systèmes. Les sous-systèmes organisent la vue des composants (de réalisation) d'un système.
Ils permettent de gérer la complexité, par encapsulation des détails d'implémentation.
Ce diagramme de composante est basé sur l’architecture que nous avons utilisée pour
l’élaboration de notre projet (Voir chapitre III État de l’art).
Figure V.1 : Diagramme de composants
Projet de fin d’études Année universitaire : 2010/2011
V.4. Choix techniques
Comme nous avons bien justifié les choix technique adopté dans le chapitre état de
l’art. De ce fait, les choix techniques sont :
Langages de programmation : PHP, HTML, CSS, JQUERY. [N1], [N2], [N3]
SGBD : MySQL. [N5]
Serveur : Apache.
Ces choix satisfont les besoins nécessaires pour réaliser l’application. Donc, nous
avons approuvé ces choix et réalisé les différents modules dans ces conditions.
V.4.1. Choix de la technologie de sécurité
V.4.1.1. Protection contre les attaques d’injection SQL
Pour assurer la sécurité de notre application, nous allons appliquer la fonction
qui va permettre d’éviter les injections SQL via
PHP.
Figure V.2 : Protection contre les attaques d’injection SQL
Une injection SQL est un type d'exploitation d'une faille de sécurité d'une application
interagissant avec une base de données, en injectant une requête SQL non prévue par le
système et pouvant compromettre sa sécurité.
V.4.1.2. Les sessions
Pour assurer la sécurité de notre application, nous allons utiliser les sessions
qui vont nous permettre d’assurer la sécurité et l’intégrité des
données.
Projet de fin d’études Année universitaire : 2010/2011
Figure V.3 : Protection des données avec Les sessions
Une session est un mécanisme technique permettant de sauvegarder temporairement
sur le serveur des informations relatives à un internaute. Ce système a notamment été
inventé pour palier au fait que le protocole HTTP agit en mode non connecté.
Nous avons implémenté les sessions particulièrement dans :
Les espaces membres et accès sécurisés avec authentification.
La Gestion du panier par le client.
Stockage d'informations relatives à la navigation de l'utilisateur.
Les informations seront quant à elles transférées de page en page par le serveur et
non par le client. Ainsi, la sécurité et l'intégrité des données s'en voient améliorées ainsi
que leur disponibilité tout au long de la session. Une session peut contenir tout type de
données : nombre, chaîne de caractères et même un tableau. [N2]
V.4.1.3. Mécanisme de hachage de mot de passe
Pour assurer la sécurité de notre application, nous avons utilisé la fonction MD5
qui va nous permettre d’assurer la sécurité des données contre le piratage.
Figure V.4 : Protection de mot de passe avec le mécanisme de hachage
Projet de fin d’études Année universitaire : 2010/2011
Tous les mots de passe sont hachés au niveau de base de données à l’aide de
l’algorithme MD5 qui est une fonction de hachage cryptographique qui permet d'obtenir
pour chaque fichier, une empreinte numérique.
V.4.2. Autres choix technologiques
A fin de donner notre application un aspect convivial nous avons utilisé la
technologie jquery qui est une bibliothèque JavaScript libre, qui permet, grâce à ses plugins,
d’intégrer bon nombres d’effets assez époustouflants sur vos pages (x)HTML. (Voir chapitre
III Etat de l’art).
Nous avons mis ce script d’appel des plugins de jquery dans les pages HTML :
Figure V.5 : Script d'appel des plugins de jquery
Puis avons utilisé ces plugins dans les animations :
Figure V.6 : Menu slider
V.5. Diagramme de GANTT
Le diagramme de Gantt est un outil utilisé (souvent en complément d'un
réseau PERT) en ordonnancement et gestion de projet et permettant de visualiser dans
le temps les diverses tâches liées composant un projet (il s'agit d'une représentation d'un
graphe connexe, évalué et orienté). Il permet de représenter graphiquement l'avancement du
projet.
Projet de fin d’études Année universitaire : 2010/2011
Cet outil répond à deux objectifs : planifier de façon optimale et communiquer sur le
planning établi et les choix qu'il impose.
Figure V.7 : Diagramme de GANTT
V.6. Phase d’implémentation
L’implémentation de l’application est une phase très importante dans le cycle de vie
d’un projet. Et comme toute autre phase, cette étape est soumis à des contraintes soit
évoqués dans les besoins fonctionnels et non fonctionnels au niveau de la Spécification
(chapitre II) soit qu’ils sont posés implicitement par les langages utilisées ou explicitement
de la part de notre responsable.
V.6.1. Contraintes
Pour adapter le modèle de conception au modèle d'implémentation nous devons en
premier lieu identifier les contraintes techniques avec lesquelles notre système doit être
construit.
L'implémentation doit répondre à des contraintes qui lui sont propres notamment le
temps d’implémentation.
- La modularité : C’est une approche structurante qui sépare un logiciel en petites
unités qui, rassemblées, composeront l'ensemble du logiciel.
Projet de fin d’études Année universitaire : 2010/2011
- La portabilité : C’est la capacité du système à fonctionner plus ou moins
facilement dans différents environnements d'exécution.
- La maintenabilité : C’est la capacité de pouvoir maintenir de manière cohérente
et à moindre coût certains composants de l’application. Elle désigne la capacité d'un système
à être simplement et rapidement réparé; et ainsi diminuer les temps d'interventions. La
maintenabilité d'un système est souvent caractérisée lors de sa conception.
.
V.6.2. Pratiques adoptées
Tout au long de la phase de réalisation, nous avons appliqué des différentes règles et
de techniques de codage :
- Règles de nommage : donner un nom explicite et facile à retenir pour les noms
des tables, des attributs, des packages, nom des méthodes...
- Règles de présentation : commenter clairement tous modules au niveau de la base
de données, le code de l’application.
- Règles Syntaxique : évité les structures syntaxiques complexes qui réduisent la
facilité de compréhension du code afin de réduire les risques de dysfonctionnement.
V.7. Phase de tests et validation
Les tests et validations se sont déroulés pratiquement tout au long du projet et se sont
divisés en cinq parties :
- Tests unitaires : Ces tests sont faits pour chaque fonction, ou avancement de
travail, et sont réalisés en premier lieu par le même membre qui a réalisé le travail, et par
l’autre membre en deuxième lieu et sont synthétisés dans un rapport de tests dans l’étiquette
de la version courante. Ce rapport contient les résultats indésirables des tests ainsi que des
remarques d’ordre général.
- Tests d’Intégration : Ces tests son effectués pour chaque page, module ou grande
partie terminée. Ils ont pour but de clore la partie en question et vérifier la compatibilité des
différentes fonctions et modules. Les résultats, ainsi que les remarques, sont mentionnés
dans un rapport de tests.
Projet de fin d’études Année universitaire : 2010/2011
- Tests Alpha et Bêta : Ces tests sont effectués lors de la fin de chaque module et à
la fin de toute l’application. Ils sont aussi effectués en parallèle et ont pratiquement le même
principe que les tests d’intégration, sauf qu’ils ont de plus une tendance sur les
incommodassions de manipulation, l’interface graphique (couleurs, textes, …) et sont
effectués ensuite par les futurs utilisateurs.
- Tests de fonctionnalités : Les tests de fonctionnalité ont pour objectif d’une part
de vérifier le bon fonctionnement de l’application ainsi que la qualité de restitution des
médias sur différentes plates-formes matérielles (CPU, cartes graphiques, OS, Ram), et
d’autre part de déterminer ainsi la configuration minimale.
- Tests de qualité : Par un parcours exhaustif du produit, chaque testeur met en
évidence les problèmes liés à la restitution des médias. Cela permet de s’assurer que la
configuration minimale a été correctement évaluée.
Images : rendu des couleurs.
Textes : typographie, lisibilité.
V.7.1. Jeux de tests et Validation
Suite à la réalisation du travail demandé, nous avons essayé de faire le maximum de
jeux de tests possibles permettant de valider notre application.
Profile Scénario ValidationAdministrateur Authentification pour au back-office OK
Administrateur Ajout d’un nouveau produit OK
Administrateur Suppression d’un produit OK
Administrateur Modification d’un produit OK
Administrateur Ajout d’une nouvelle marque OK
Administrateur Modification d’une marque OK
Administrateur Suppression d’une marque OK
Administrateur Consultation d’un message de contact OK
Administrateur Suppression d’un message de contact OK
Internaute, Client L’envoi d’un message de contact OK
Internaute, Client Inscription dans la newsletter OK
Projet de fin d’études Année universitaire : 2010/2011
Administrateur Consultation des inscrits dans la newsletter OK
Administrateur L’envoi d’un mail aux inscrits dans la newsletter (mailing list). OK
Administrateur Suppression d’un inscrit dans la newsletter OK
Administrateur Ajout d’une nouvelle catégorie de newsletter OK
Administrateur Modification d’une catégorie de newsletter OK
Administrateur Suppression d’une catégorie de newsletter OK
Administrateur Ajout d’un nouveau media (logo, bannière) OK
Administrateur Modification d’un media (logo, bannière) OK
Administrateur Suppression d’un media (logo, bannière) OK
Administrateur Ajout d’un nouvel utilisateur (crée un compte) OK
Administrateur Modification d’un utilisateur (login, mot de passe…) OK
Administrateur Suppression d’un utilisateur OK
Client Inscription dans l’espace membre OK
Administrateur Recherche des clients OK
Administrateur Consultation des clients OK
Client Modification des informations concernant le client OK
Administrateur Consultation des factures OK
Administrateur Recherche des factures OK
Client Ajout des factures OK
Administrateur Suppression des factures OK
Administrateur Consultation des commandes OK
Administrateur Recherche des commandes OK
Client Confirmation de la commande OK
Administrateur Suppression des commandes OK
Client Consultation des produits OK
Client Recherche des produits OK
Client Ajout d’un produit au panier OK
Client Mise à jour du panier OK
Figure V.8 : Tableau jeux de tests et validation
V.8. Conclusion
En dépit de certains problèmes que nous avons rencontrés, nous avons pu les
surmonter et réaliser le travail qui nous a été proposé, en outre nous avons acquis certains
Projet de fin d’études Année universitaire : 2010/2011
apports au cours de cette phase. En plus des nouvelles technologies de développement des
applications et la familiarisation avec certains logiciels, notamment en matière de
maintenance du code, la réalisation de cette application nous a permis d’acquérir une
expérience concernant le processus de développement.
Projet de fin d’études Année universitaire : 2010/2011
Chapitre VI. Interfaces de
l’application
VI.1.Introduction
Dans ce chapitre, nous allons présenter notre application à travers quelques captures
d'écran.
VI.2.Interfaces de l’application
VI.2.1. Back-office
VI.2.1.1. Page d’authentification
Cette interface présente un formulaire de connexion permettant à l'utilisateur de
s'identifier avec un login et un mot de passe pour qu'il soit autorisé à accéder au back-office
du site.
Figure VI.1 : Page de connexion de l’utilisateur
Projet de fin d’études Année universitaire : 2010/2011
Lorsque le login ou le mot de passe est invalide, un message d’erreur sera affiché à
l’utilisateur :
Figure VI.2 : Message d’erreur lorsque le login ou le mot de passe est invalide
VI.2.1.2. Session administrateur
Après avoir s’authentifier, l’administrateur sera redirectionné vers la page d’accueil du
back-office :
VI.2.1.2.1. Page d’accueil du back-office
Elle contient un menu de navigation, composer de plusieurs rubriques permettant de
gérer le contenu du site, le processus d’achat, la relation avec les clients…
Figure VI.3 : Page d’accueil du back-officeVI.2.1.2.2. Page gestion des produits
Projet de fin d’études Année universitaire : 2010/2011
Elle contient tous les produits offerts, cette page nous permet de gérer les produits soit
par la consultation, l’ajout, la modification, ou la suppression.
Figure VI.4 : Page gestion des produits
VI.2.1.2.3. Page ajout d’un nouveau produit (pop-up)
Pour ajouter un nouveau produit, on clique sur le bouton Ajout d’un nouveau produit,
ensuite on saisie les informations nécessaire du produit puis on valide.
Figure VI.5: Page ajout d’un nouveau produit
Projet de fin d’études Année universitaire : 2010/2011
On a mis des contrôles de saisie pour éviter tout type d’erreurs (champs vide,
informations erroné….), lorsqu’on fait une erreur, un message d’alerte s’affiche et nous
indique le type d’erreur.
Figure VI.6: Contrôle de saisie dans l’ajout d’un nouveau produit
VI.2.1.2.4. Suppression d’un produit
Pour supprimer un produit, on clique sur le bouton supprimer un produit, un message
de confirmation sera afficher et nous demande de confirmer notre choix ou d’annuler.
Figure VI.7 : Supprimer un produit
Projet de fin d’études Année universitaire : 2010/2011
VI.2.2. Front-office
VI.2.2.1 Page d’accueil du front-office
Cette page est destiner aux clients et aux internautes, elle contient un moteur de
recherche, un catalogue des produits offerts, un menu de navigation, les nouveautés dans
chaque catégorie de produit, une newsletter, top des ventes, les offres spéciales, un panier et
les publicités.
Figure VI.8 : Page d’accueil du back-office
- Pour acheter un produit le client doit tout d’abord choisir le produit désiré et l’ajouter
au panier. Pour ajouter un produit au panier, il suffit de cliquer l’icône chariot.
Projet de fin d’études Année universitaire : 2010/2011
Figure VI.9 : Ajout d’un produit au panier
- Avant d’ajouter un produit au panier, le client peut voir les détails concernant le
produit désiré. Pour voir les détails d’un produit il suffit de cliquer sur le lien plus de détails.
Figure VI.10 : Page détails d’un produit
Projet de fin d’études Année universitaire : 2010/2011
VI.2.2.2 Page gestion de panier
-Cette page est destinée à la gestion de panier, Le client peut ici gérer son panier soit
par la modification des quantités des produits à acheter ou la suppression des produits.
Figure VI.11 : Page Gestion de panier
- Après avoir gérer son panier, le client peut valider ces achats, et il sera rédirectionner
vers cette page ou il va s’authentifier s’il est déjà inscrit, sinon il doit s’inscrire pour continuer
le processus d’achat.
Figure VI.12 : Page d’authentification
Projet de fin d’études Année universitaire : 2010/2011
Figure VI.13 : Formulaires d’inscription d’un nouveau client
VI.2.2.3. Page choix de méthode d’expédition
- Après l’authentification le client sera rédirectionner vers la page choix de méthode
d’expédition, ou il va choisir la méthode dont la quel le produit va être expédié a lui.
Figure VI.14 : Page Choix de méthode d’expédition
Projet de fin d’études Année universitaire : 2010/2011
- Dans la page choix de méthode d’expédition, le client a la possibilité de modifier
l’adresse d’expédition. Pour modifier l’adresse d’expédition il suffit de cliquer sur le bouton
changer d’adresse.
Figure VI.15 : Formulaire de modification de l’adresse d’expédition
VI.2.2.4. Page choix de méthode de payement
Après avoir choisir la méthode d’expédition le client sera rédirectionner vers la page
choix de méthode de payement, dans cette page le client va choisir la méthode avec la quelle
il va payer ces achats.
Projet de fin d’études Année universitaire : 2010/2011
Figure VI.16 : Page Choix de méthode de payement
VI.2.2.5. Page confirmation commande
Dans cette page on trouve tout les détails concernant la commande (Adresse du client,
méthode d’expédition, les produits achetés avec leurs quantités et leurs prix, le prix total des
achats, méthode de payement, frais de livraison, montant à payer). Il ne reste que la
confirmation de la commande après avoir vérifier les détails de la commande.
Projet de fin d’études Année universitaire : 2010/2011
Figure VI.17 : Page confirmation de la commande
VI.2.2.6. Page de payement
Dés que le client confirme la commande, il est envoyé vers le serveur de paiement
SPS qui est un Système de Paiement Sécurisé qui permet d’offrir les autorisations sur les
cartes bancaires, dans un environnement sécurisé. Toutes les cartes de paiement locales ou
étrangères sont acceptées.
Projet de fin d’études Année universitaire : 2010/2011
Figure VI.18 : Page de payement
Projet de fin d’études Année universitaire : 2010/2011
VI.3.Conclusion
Nous avons essayé au cours de ce chapitre de vous présenter les interfaces illustrant
les différentes fonctionnalités fournies par notre projet. Pour assurer une meilleure qualité de
notre travail et garantir sa fiabilité, nous étions amenés à augmenter le nombre de test, en
prenant en compte le maximum de cas particulier, et en adaptant les différentes interfaces
pour une utilisation général.
Projet de fin d’études Année universitaire : 2010/2011
Conclusion
GénéraleLe projet que nous avons réalisé a consisté en la conception et le développement d’un site
web marchand pour vente de matériel informatique en ligne répondant, d’une part, aux besoins de
ce concept qui vient tout juste de faire son apparition dans notre marché et d’autre part, aux besoins
d’IMS.
Entre les objectifs fixés, les attentes de la société, nous avons, toutefois, réussis à atteindre
nos principaux objectifs dont la réalisation d’un site web marchand composée de plusieurs modules
contenant les fonctionnalités nécessaires pour le bon déroulement des différentes gestions côté
client (panier, commande, profils, …) et côté marchand (administration, produits, catalogue,
marques, medias …).
Le dernier mot est consacré pour dire que notre parcours durant ce projet nous a retourné
plus d’avantages que d’inconvénients en nous rapprochant de l’environnement professionnel et en
faisant connaissance avec ses acteurs. Ceci dit, nous souhaitons que notre travail puisse être un une
contribution au développement du concept e-commerce.
Perspectives :
Nous tenons à préciser que durant tout le projet, on avait cherché à détailler et perfectionner
notre travail. Toutefois, des améliorations peuvent bien être rajoutées par exemple :
- Comparateur de prix.
- Module de produit similaire.
- Développement d’un module de payement.
- Statistiques.
Projet de fin d’études Année universitaire : 2010/2011
Glossaire
AJAX Asynchronous JavaScript and XML.
ASP Active Server Pages.
CSS Cascading Style Sheets.
CMS Content management system.
CPU Central processing unit.
CRM Customer relationship management.
DAO Data access object.
DOM Document Object Model.
DTO Data transfer object.
ERP Enterprise resource planning.
GPL General Public License.
HTML HyperText Markup Language.
HTTP Hypertext Transfer Protocol.
IHM Interface homme-machine.
MIT Massachusetts Institute of Technology.
PERT Program Evaluation and Review Technique.
PHP Hypertext Preprocessor.
RAM Random-access memory.
SGBD Système de Gestion de Bases de Données.
SGBDR Système de Gestion de Bases de Données Relationnelles.
SSII Société de services et d‘ingénierie informatique.
SQL Structured Query Language.
TIC Technologies de l'information et de la communication.
UML Unified Modeling Language.
VB script Visual Basic script.
WAMP Windows, Apache, MySQL, and PHP.
WML Wireless Markup Language.
Projet de fin d’études Année universitaire : 2010/2011
Bibliographie et
Nétographie
- Bibliographie :
[B1] : Modélisation des données et notation UML, Bruno Cremilleux et Jacque Madelaine, Université de Caen Basse-Normandie (mars 2010).
- Nétographie :
[N1] : (Jeff, Présentation du HTML, octobre 2008) www.commentcamarche.net/ /contents/html/htmlintro.php3
[N2] : (Jeff, Introduction à PHP, avril 2009) www.commentcamarche.net /contents/php/phpintro.php3.
[N3] : (Jeff, Feuilles de style, mars 2011) www.commentcamarche.net/contents/css/cssintro.php3
[N4]: (Nariman Mohammed, Dreamweaver 8, October 2005) www.slideserve.com/presentation/54984/Dreamweaver-8 [N5]: (Paul Dubois, Stefan Hinz, Carsten Pedersen, MySQL - Guide official, 2004) fr.wikipedia.org/wiki/MySQL
[N6] : (damien, WAMP serveur, november 2008) www.6ma.fr/tuto/wamp+server+0-454
[N7]: (EDrawSoft, Edraw Max, mars 2011) windows.podnova.com/trends/edraw_max_home_network.html
[N8]: (jolie, Présentation de Photoshop, septembre 2009) gass.forumgratuit.fr/t17-presentation-photoshop
[N9] : (Paoh, Présentation de GanttProject, juin 2010) www.framasoft.net/article2071.html
Projet de fin d’études Année universitaire : 2010/2011
Annexe A
I. Langages
1. HTML
Le HTML (« HyperText Mark-Up Language ») est un langage dit de « marquage » (de
« structuration » ou de « balisage ») dont le rôle est de formaliser l'écriture d'un document avec
des balises de formatage. Les balises permettent d'indiquer la façon dont doit être présenté le
document et les liens qu'il établit avec d'autres documents.
Le langage HTML permet notamment la lecture de documents sur Internet à partir de
machines différentes, grâce au protocole HTTP, permettant d'accéder via le réseau à des
documents repérés par une adresse unique, appelée URL.
On appelle World Wide Web (noté WWW) ou tout simplement Web (mot anglais
signifiant toile) la "toile virtuelle" formée par les différents documents (appelés « pages web »)
liés entre eux par des hyperliens.
Les pages web sont généralement organisées autour d'une page d'accueil, jouant un point
central dans la navigation à l'aide des liens hypertextes. Cet ensemble cohérent de pages web liées
par des liens hypertextes et articulées autour d'une page d'accueil commune est appelée site web.
Le Web est ainsi une énorme archive vivante composée d'une myriade de sites web
proposant des pages web pouvant contenir du texte mis en forme, des images, des sons, des vidéo,
etc. [N.1]
2. PHP
PHP est un langage interprété (un langage de script) exécuté du côté serveur (comme les
scripts CGI,ASP, ...) et non du côté client (un script écrit en JavaScript ou une applet
Java s'exécute sur votre ordinateur...). La syntaxe du langage provient de celles du langage C,
du Perl et de Java. Ses principaux atouts sont :
Une grande communauté de développeurs partageant des centaines de milliers
d'exemples de script PHP ;
La gratuité et la disponibilité du code source (PHP est distribué sous licence GNU
GPL) ;
La simplicité d'écriture de scripts ;
70
Projet de fin d’études Année universitaire : 2010/2011
La possibilité d'inclure le script PHP au sein d'une page HTML (contrairement aux
scripts CGI, pour lesquels il faut écrire des lignes de code pour afficher chaque
ligne en langage HTML) ;
La simplicité d'interfaçage avec des bases de données (de nombreux SGBD sont
supportés, mais le plus utilisé avec ce langage est MySQL, un SGBD gratuit
disponible sur de nombreuses plateformes :Unix, Linux, Windows, MacOs X,
Solaris, etc...) ;
L'intégration au sein de nombreux serveurs web (Apache, Microsoft IIS, etc.). [N.2]
3. CSS
Le concept de feuilles de style est apparu en 1996 avec la publication par le W3C d'une
nouvelle recommandation intitulée « Cascading StyleSheets » (feuilles de style en cascade),
notée CSS.
Le principe des feuilles de style consiste à regrouper dans un même document des
caractéristiques de mise en forme associées à des groupes d'éléments. Il suffit de définir par un
nom un ensemble de définitions et de caractéristiques de mise en forme, et de l'appeler pour
l'appliquer à un texte. Il est ainsi possible de créer un groupe de titres en police Arial, de couleur
verte et en italique.
Les feuilles de style ont été mises au point afin de compenser les manques du langage
HTML en ce qui concerne la mise en page et la présentation. En effet, le HTML offre un certain
nombre de balises permettant de mettre en page et de définir le style d'un texte, toutefois chaque
élément possède son propre style, indépendamment des éléments qui l'entourent. Grâce aux
feuilles de style, lorsque la charte graphique d'un site composé de plusieurs centaines de pages
web doit être changée, il suffit de modifier la définition des feuilles de style en un seul endroit
pour changer l'apparence du site tout entier !
Elles sont appelées « feuilles de style en cascade » (en anglais « Cascading Style Sheets »)
car il est possible d'en définir plusieurs et que les styles peuvent être hérités en cascade.
Les feuilles de style permettent notamment :
d'obtenir une présentation homogène sur tout un site en faisant appel sur toutes les
pages à une même définition de style ;
de permettre le changement de l'aspect d'un site complet entier par la seule
modification de quelques lignes ;
une plus grande lisibilité du HTML, car les styles sont définis à part ;
71
Projet de fin d’études Année universitaire : 2010/2011
des chargements de page plus rapides, pour les mêmes raisons que précédemment ;
un positionnement plus rigoureux des éléments. [N3]
II. Editeur web
1. Dreamweaver 8
Il est un éditeur HTML développé par Macromedia. Il était à l'origine destiné aux
concepteurs de sites Web professionnels et offre un système de montage qui combine à la fois
la productivité de la conception WYSIWYG avec le contrôle du mode d'édition de code
HTML.
Cette combinaison a été tout à fait unique en fin des années 1990 et a aidé à
Dreamweaver à une adoption généralisée.
Dreamweaver peut masquer les détails du code HTML page de l'utilisateur, ce qui
permet aux non-experts de créer facilement des pages web et de sites
Permet aux utilisateurs de récupérer la plupart des navigateurs installés sur son
ordinateur vers des sites de prévisualisation.
Permet aux utilisateurs de se connecter aux bases de données (comme MySQL) pour
filtrer et afficher du contenu en utilisant les technologies de scripts tels que PHP, ASP,
ASP.net et, sans aucune expérience de programmation précédente. [N4]
III. SGBD
1. MYSQL
MySQL est un système de gestion de base de données (SGBD). Selon le type
d'application, sa licence est libre ou propriétaire. Il fait partie des logiciels de gestion de base
de données les plus utilisés au monde, autant par le grand public (applications web
principalement) que par des professionnels, en concurrence avec Oracle et Microsoft SQL
Server. [N5]
IV. Serveur
72
Projet de fin d’études Année universitaire : 2010/2011
1. WAMPSERVER
WampServer est une plate-forme de développement Web sous Windows. Il vous
permet de développer des applications Web dynamiques à l'aide du serveur Apache2, du
langage de scripts PHP et d'une base de données MySQL. Il possède également
PHPMyAdmin et SQLite Manager pour gérer plus facilement vos bases de données. [N6]
V. Autres
1. Edraw max
EDraw Max est un programme de diagramme et de présentation destiné
aux étudiants et aux professionnels. Avec elle, les utilisateurs peuvent créer n'importe quel
type de dessins comme les organigrammes, diagrammes de réseau, des présentations, des
plans de construction, dessins de mode, des flux de travail, structures de programmes,
UML, design web, l'ingénierie électrique, des schémas de base de données, et plus encore.
[N7]
2. Adope Photoshop CS5
Photoshop est un logiciel de retouche, de traitement et de dessin assisté par ordinateur
édité par Adobe. Il est principalement utilisé pour le traitement de photographies numériques,
mais sert également à la création d’images ex nihilo (hors source photographique).
Photoshop est un logiciel travaillant sur images matricielles (également appelées
"bitmap", à ne pas confondre avec le format d’enregistrement Windows bitmap) car les
images sont constituées d’une grille de points appelés pixels. L’intérêt de ces images est de
reproduire des graduations subtiles de couleurs.
Photoshop possède son propre format de projet (PSD), qui est plus qu’un simple
format de fichier. Le programme accepte également d’importer et d’exporter des fichiers
d’image dans les formats les plus courants (GIF, JPEG, TIFF, PNG, ILBM, etc.).
Il offre :
un système de tri et d’organisation des fichiers permettant l’application
d’une opération sur plusieurs fichiers simultanément.
73
Projet de fin d’études Année universitaire : 2010/2011
des outils de dessin en mode bitmap : pinceau, crayon, formes
géométriques…
des outils de sélection de zones de travail (ou zones d’intérêt) : lasso,
rectangle de sélection, sélection par plage de couleur…
des outils de copie, collage et duplication de zones de travail
des outils de manipulation de calques : par l’empilement de zones
graphiques et l’utilisation de transparence et autres effets, on peut construire
l’équivalent de photomontages complexes.
des outils de manipulation de la palette de couleurs : changement de palette,
réglages colorimétriques, de luminosité, de contraste, de saturation…
des filtres pour appliquer divers effets à des zones d’intérêt : textures,
ombres, renforcement des contours, estampage, flou, etc. [N8]
3. GANTT PROJECT
GanttProject est logiciel qui permet la planification de projets à l’aide du diagramme
de Gantt. Il propose les fonctionnalités de base de ce type d’outil, comme la création des
tâches, l’affectation des ressources, la gestion des dépendances et de l’avancement, mais
dispose également de propriétés plus avancées comme l’exportation des documents en
HTML/PDF et le travail collaboratif à distance sur internet... [N9]
74
