Ministère de l'Éducation et de la Formation

Etablissement de Formation en Informatique et Gestion

PROJET DE FIN D'ÉTUDE

POUR L’OBTENTION DU BREVET DE

TECHNICIEN SUPÉRIEUR EN MULTIMEDIA

Thème :

Conception et réalisation d’un site web

marketing « High-Tech »

Elaboré par

Firas ABDELMALEK

Elyes SELLAMI

Encadré par

Mr. Riadh YENGUI

Année universitaire

2014/2015

2

Sommaire

INTRODUCTION GENERALE .............................................................................................................................. 6

CHAPITRE I : ..................................................................................................................................................... 7

ANALYSE DU PROJET ........................................................................................................................................ 7

I. INTRODUCTION.............................................................................................................................................. 8

II. PRESENTATION DE L’APPLICATION ..................................................................................................................... 8

III. PRESENTATION DE LA SOCIETE .......................................................................................................................... 9

IV. OBJECTIFS ET BUT .......................................................................................................................................... 9

V. ETUDE DE L'EXISTANT : .................................................................................................................................... 9

1. Analyse de l’existant : .......................................................................................................................... 9

2. Critique de l’existant : ........................................................................................................................ 10

3. Solution proposée : ............................................................................................................................. 10

VI. CONCLUSION .............................................................................................................................................. 11

CHAPITRE II: ................................................................................................................................................... 12

CONCEPT DE BASE .......................................................................................................................................... 12

I. INTRODUCTION............................................................................................................................................ 13

II. WORLD WIDE WEB ET HYPER TEXT MARKUP LANGUAGE .................................................................................... 13

III. PHP .......................................................................................................................................................... 13

IV. MYSQL ..................................................................................................................................................... 13

V. APACHE HTTP SERVER ................................................................................................................................. 13

VI. DIFFERENCE ENTRE UN SITE WEB STATIQUE ET UN SITE WEB DYNAMIQUE ................................................................. 14

1. Quel avantage pour un site statique ? ............................................................................................... 15

2. Quels avantages pour un site dynamique ? ....................................................................................... 16

3. Quel type de site pour quelle utilisation ? .......................................................................................... 16

VII. CMS (CONTENT MANAGEMENT SYSTEM) ................................................................................................... 17

Pourquoi un CMS? Avantages ? ................................................................................................................... 17

VIII. CONCLUSION : ........................................................................................................................................ 18

CHAPITRE III : ................................................................................................................................................. 19

MODELISATION CONCEPTUELLE & ORGANISATIONNELLE .............................................................................. 19

I. INTRODUCTION............................................................................................................................................ 20

II. PRESENTATION ET JUSTIFICATION DU CHOIX D'UML ........................................................................................... 20

1. Definition ...................................................................................................... Erreur ! Signet non défini.

2. A quoi sert UML ? ............................................................................................................................... 20

3. Diagramme de cas d’utilisation (Uses Case) ...................................................................................... 21

III. DIAGRAMME DE CLASSE ................................................................................................................................ 28

1. DICTIONNAIRE DE DONNEE ................................................................................................................ 29

2. Représentation des méthodes par classe ........................................................................................... 30

IV. DEVELOPPEMENT DU MODELE DYNAMIQUE : ..................................................................................................... 31

1. Diagramme de séquence ......................................................................................................................... 31

2. Diagramme d'Activité : ............................................................................................................................ 38

CHAPITRE VI: .................................................................................................................................................. 39

REALISATION .................................................................................................................................................. 39

I. INTRODUCTION............................................................................................................................................ 40

II. CHOIX DES OUTILS DE DEVELOPPEMENT ............................................................................................................ 40

3

1. Le langage de programmation : PHP5 ............................................................................................... 40

2. Autres outils ....................................................................................................................................... 40

3. Choix du SGBD : MySQL ...................................................................................................................... 40

4. Serveur utilisé : WampServer 2.2D ..................................................................................................... 41

5. Logiciel de développement utilisé :Adobe Dreamweaver CS6 ............................................................ 42

6. Logiciel CMS utilisé : Prestashop 1.6 .................................................................................................. 42

III. PRESENTATION DES INTERFACES GRAPHIQUE ET ADMINISTRATIVES ........................................................................ 43

IV. CONCLUSION GENERALE ................................................................................................................................ 52

4

Dédicace

L'eau coule grâce à sa source

L'arbre pousse grâce à ses racines

A

Nos parents

Pour les sacrifices déployés à nos égards ; pour leur patience

Leur amour et leur confiance en nous

Ils ont tout fait pour notre bonheur et notre réussite.

Qu'ils trouvent dans ce modeste travail, le témoignage de notre

Profonde affection et de notre attachement indéfectible.

Nulle dédicace ne puisse exprimer ce que nous leur devons

Que dieu leur réserve la bonne santé et une longue vie.

A

Nos amis

En témoignage de nos sincères reconnaissances pour les efforts

Qu'ils ont consentis pour nous soutenir au cours de nos études.

Que dieu nous garde toujours unis

A

Toute personne qui nous a aidés à faire notre projet.

5

Remerciements

Au terme de la rédaction de ce mémoire, nous tenons à remercier

notre encadreur Mr. YENGUI.R pour ses précieux conseils et son aide

durant toute la période du travail.

Nos vifs remerciements vont également aux membres du jury pour

l'intérêt qu'ils ont porté à notre recherche en acceptant d'examiner

notre travail et de l'enrichir par leurs propositions.

Merci

6

Pendant les dernières décennies, les applications web ont évolué d’une façon

remarquable qui, parfois, dépasse l’imagination. En effet, ces applications deviennent de plus

en plus gourmandes en termes de ressources afin d’assuré le confort et l’adaptation rapide de

l’utilisateur, ce qui nécessite des équipements matériels robustes et performant. Ainsi, ce

dernier est obligé d’acheter des équipements chers ou de renouveler fréquemment ceux qu’il

possède, mais ce n’est pas évident de nos jours d’attirer l’attention de l’internaute vers toute

nouveauté, d’être à jour en termes de nouvelle technologie et le poussé à acquérir un nouvelle

équipement, vue qu’il n’y connaît pas toute les fonctionnalités et utilités de ce produit et sa

contribution dans le quotidien.

C’est pour cela on a pensée à fournir une interface fluide adapter à n’importe quel

support, qui reste accessible et accueillante et qui permet de fournir des services en ligne tel

un catalogue de différents produits de haute technologie informatique, leurs accessoires et

maintenance sans dépensé trop d’argent, ni perte de temps et assuré l’obtention du produit

sans se soucier de la sécurité.

Notre rapport est présenté en quatre chapitres : Le premier chapitre s’intéresse à

l’étude préalable du contexte du projet et des activités de l’entreprise en question. Le

deuxième chapitre caractérise les logiciels, les langages et l’architecture utilisés. Le troisième

chapitre présente la conceptualisation du site web proposé pour cette boutique. Enfin, dans le

quatrième chapitre, nous présentons les travaux et la réalisation du site web proposé.

7

8

Chapitre I : Analyse du projet

I. Introduction

Dans ce chapitre nous découvrirons le contexte général de notre projet. Pour ce faire, nous

présentions dans un premier lieu l’organisme, nous exposons ensuite la méthodologie de

développement adoptée ainsi que le cadre du sujet avant d’évoquer les concepts étudiés durant

notre travail pour finir par une étude de l’existant à la lumière de laquelle nous énumérons les

objectifs à atteindre.

On peut définir le commerce électronique comme l’ensemble des méthodes d’achat, de vente,

et d’échanges de biens ou de services entre deux entités sur les réseaux informatiques

notamment Internet.

Dans le secteur de la haute technologie, probablement plus que dans tout autre, les entreprises

utilisent le Web comme principal outil d'interaction avec leurs clients et prospects. Parce que

les directeurs informatiques et les responsables de lignes d'activité préfèrent effectuer eux-

mêmes leurs premières recherches en ligne, il est primordial que votre site Web communique

clairement les propositions de valeur uniques qui vous démarquent de vos concurrents. Mais

ce n'est pas tout.

Pour identifier et convertir les visiteurs en prospects qualifiés, voir en acheteurs, ou pour

satisfaire les attentes de vos clients en matière de service, vous devez anticiper leurs besoins

et les orienter efficacement vers les commerciaux ou les agents compétents. « High-Tech »

offre des solutions innovantes pour différencier vos messages, optimiser l'utilisation de vos

agents et maximiser les résultats positifs.

Nous décrivons l’environnement de la réalisation du travail et nous donnons un aperçu sur les

résultats obtenus.

II. Présentation de l’application

C’est un site web de marketing de la nouvelle technologie « High-Tech », Ce projet a pour but

d’élaborer un contact entre le client et une société afin de proposer et vendre quelques

produits électroniques, montrant toutes les informations nécessaires sur le produit, en ajoutant

la fonctionnalité « Panier » qui permet de sélectionner et ajouté les produits que le client

désire acheter puis confirmer l’achat et définir la méthode de payement et livraison.

9

III. Présentation de la société

Dans l’élaboration de ce projet on a travaillé sur un plan étendu et globale, en se référençant

sur plusieurs boutiques et exemples principalement au niveau internationale en ajoutant bien

sûr quelques spécificités, donc sans se limiter à une société précise d’où on va considérer une

société virtuelle portant le même nom du projet « High-tech ». Ce site est fonctionnel et peut

servir surtout au niveau européen plus particulièrement en France mais aussi en Tunisie même

si la possibilité de profiter de quelques fonctionnalités et peu probable pour le moment.

IV. Objectifs et But

Facilité la communication, vente/achat de produits High-tech en ligne permettant un accès

fluide à l’information demandé et payement instantané du produit tout en garantissant la

sécurité. En premier lieu, on va représenter les différents produits dans l’ensemble du site web

de façon que le site conserve son attractivité et vivacité en mettant à jour les différentes

entités du Catalogue. Cette application va permettre :

• A l’administrateur de bien : gérer les produits, les catégories, les personnelles, les

clients et maintenir le site web en cas de besoin.

• Au gérant de la boutique : gérer et mettre à jour les produits, répondre aux

réclamations des clients, gérer les commandes des clients et assurer la livraison.

• Au client : consulter un produit en ligne, recevoir une réponse concernant à une

demande d’information et commander un produit.

• A l’internaute : consulter les produits de la boutique et faire l’inscrit.

• Faciliter et rendre rapide la consultation de la boutique et la communication entre ses

agents et ses clientèles.

V. Etude de l'existant :

1. Analyse de l’existant :

Après multiple recherche sur internet on à remarquer que les sites les plus visité sont ceux qui

propose des produits électroniques et en contactant les différentes sociétés et des clients nous

avons constatées que la plupart juge que les différents sites web sont généralement surchargé

10

de produit et de publicité, nécessite un assez long temps de chargement, manquant de

dynamisme qui oblige généralement le client à se déplacer vers le local pour l’achat d’un

produit et généralement les fiches clients ainsi la gestion des stocks sont fait sur papier ou

bien sur une autre base de données différente et séparé du site web de tel façon la mise à jour

de ces dernier ce fait manuellement.

2. Critique de l’existant :

La critique de l’existant se focalise essentiellement sur les problèmes rencontrés du travail

manuel, alors nous citons quelques insuffisances dégagées à partir de l’analyse de l’existant :

• Manque de gestion et suivi des vente/achat de produit.

• Manque de communication entre le client et la boutique pour recevoir certains

renseignements sur les services, les produits.

• La perte de temps liée à la saisie multiple des données chaque fois et la mise à jour de

la base de données de la boutique.

• Les données sont stockées sur d’autre support peu pratique séparé du site.

Pour cela, nous proposons de concevoir et de réaliser un site web servant à améliorer la

réactivité et l’efficacité du processus de gestion et le suivi des différentes transactions et

activité telle la messagerie, la commande d’un produit, le payement, la livraison.

3. Solution proposée :

Pour remédier aux inconvénients cités dans le paragraphe précédent, nous proposons une

application web complète et plus fluide entre le client et le gérant qui automatise certaines

tâches tel que l’analyse et le suivi des consultations, la connectivité et le partage de

l’information via un service de messagerie entre le client et le gérant ; et la commande des

produits en ligne via la boutique.

On peut constater que notre site devra contenir trois interfaces séparées en accès tel

l’administrateur, le gérant et le client ; sauf que dans notre cas on va travailler sur seulement

deux :

Client :

➢ Consulter les produits

➢ Gestion du panier

➢ Passer commande pour un produit

➢ Contacter gérant

11

Administrateur :

➢ Gérer les personnelles

➢ Gérer les clients

➢ Gérer les produits

➢ Gérer les catégories

➢ Gérer le site et l’accès

➢ Gérer commande

➢ Gérer factures

➢ Gérer messages

VI. Conclusion

Ce chapitre nous a permis d’avoir une vision plus claire sur le sujet. Par ailleurs, nous avons

pu déterminer les objectifs à atteindre en faisant une étude de l’existant. Nous pouvons donc

aborder l’étape de spécification des besoins et présenter les concepts de base.

12

13

I. Introduction

Lors de notre formation et la réalisation de ce site web on a rencontré plusieurs définitions,

concepts et outils que nous allons citer en bref si dessous.

II. World Wide Web et Hyper Text Markup Language

Le WWW désigne le World Wide Web (alias la toile mondiale) et représente un système

hypertexte utilisant le réseau internet. À l'intérieur d'une page web représenté sous le format

HTML, il y a des mots clés ou des images qui ont des liens qui, lorsque vous cliquez dessus,

vous amènent à une autre page Web.

On parle aujourd'hui de plus de 8 milliards de pages web. L'une des raisons est la facilité de

concevoir une page Web. Tous les logiciels de traitement de texte populaires peuvent

maintenant convertir leurs documents en format de page Web (HTML). Mais, il y a aussi des

logiciels spécialisés pour la conception qui sont encore plus puissant.

Le format des fichiers de pages Web est appelé le format HTML pour Hyper Texte Markup

Langage. Ce format est composé de codes pour les différentes options disponibles. Une

instruction est toujours encadrée entre des <>, appeler balise qui peut inclure des ressources

multimédias dont des images, des formulaires de saisie, et des programmes informatiques. Il

permet de créer des documents interopérables avec des équipements très variés de manière

conforme aux exigences de l’accessibilité du web. Il est souvent utilisé conjointement avec

des langages de programmation (JavaScript) et des formats de présentation (feuilles de style

en cascade).

III. PHP

PHP : HyperText Preprocessor3, plus connu sous son sigle PHP (acronyme récursif), est un

langage de programmation libre principalement utilisé pour produire des pages Web

dynamiques via un serveur HTTP3, mais pouvant également fonctionner comme n'importe

quel langage interprété de façon locale. PHP est un langage impératif orienté objet comme

C++. PHP Il est aujourd'hui considéré comme la base de la création des sites Internet dits

dynamiques.

IV. MySQL

C’est un système de gestion de base de données relationnelles (SGBD).il est distribué sous

une double licence GPL et proprietaire.il fait partie des logiciels e gestion de base de données

les plus utilisés au monde, autant par le grand public (applications web uniquement) que par

des professionnels, en concurrence avec oracle, informix et Microsoft SQL server.

V. Apache HTTP Server

Est un serveur HTTP créé et maintenu au sein de la fondation Apache. C'est le serveur HTTP

le plus populaire du World Wide Web. Il est distribué selon les termes de la licence Apache.

14

Apache est conçu pour prendre en charge de nombreux modules lui donnant des

fonctionnalités supplémentaires : interprétation du langage Perl, PHP, Python et Ruby,

serveur proxy, Common Gateway Interface, Server Side Includes, réécriture d'URL,

négociation de contenu, protocoles de communication additionnels, etc. Néanmoins, il est à

noter que l'existence de nombreux modules Apache complexifie la configuration du serveur

web. En effet, les bonnes pratiques recommandent de ne charger que les modules utiles : de

nombreuses failles de sécurité affectant uniquement les modules d'Apache sont régulièrement

découverts.

Les possibilités de configuration d'Apache sont une fonctionnalité phare. Le principe repose

sur une hiérarchie de fichiers de configuration, qui peuvent être gérés indépendamment. Cette

caractéristique est notamment utile aux hébergeurs qui peuvent ainsi servir les sites de

plusieurs clients à l'aide d'un seul serveur HTTP. Pour les clients, cette fonctionnalité est

rendue visible par le fichier .htaccess. Parmi les outils aidant la maintenance d'Apache, les

fichiers de log peuvent s'analyser à l'aide de nombreux scripts et logiciels libres tels

qu’AWStats, Webalizer ou W3Perl. Plusieurs interfaces graphiques facilitent la configuration

du serveur.

Voici une simplification de processus de transmissions des données :

VI. Différence entre un site web statique et un site web dynamique

· Site statique : les pages du site ne sont pas modifiables par des utilisateurs. Le site est donc

rempli et mis à jour par l'administrateur qui le fait depuis son poste de travail. Une fois le site

mis à jour sur l'ordinateur de l'administrateur, celui-ci devra être envoyé sur le site via FTP.

Le site est dit statique car les pages HTML qui le compose sont toujours identiques entre deux

visites sans mise à jour. Le serveur donc n'a pas besoin de éléments de Scripting.

Site Web statique

15

· Site dynamique : les pages du site qui le compose peuvent être modifiables par les visiteurs.

De plus, entre deux visites sur un même site, le contenu de la page peut être différent sans

action de l'administrateur du site Internet. Les grandes applications de ce type de site sont :

Les forums, les Wiki (Wikipédia étant le plus grand représentant du genre) et tous les sites

communautaires (Facebook, Twitter, hi5, etc.). Le serveur qui fait fonctionner le site utilise

une technologie de Scripting (comme PHP, Ruby, Python ou Perl) ainsi qu'une base de

données comme MySQL.

Site Web dynamique

1. Quel avantage pour un site statique ?

On vient de voir qu'un site statique possède beaucoup d'inconvénient : il faut s'y connaître en

HTML pour le modifier et l'étape de mise à jour est fastidieuse. (Pour résumer) Mais il faut

aussi reconnaître au site statique des avantages dans plusieurs domaines :

· Le site internet est mis à jour en local sur la machine de l'administrateur : il n'y a donc pas de

surprise une fois que le site est en ligne.

· Le site internet ne fait pas appel aux technologies en perpétuelles évolutions qui permettent

la mise en place de sites dynamique (Php, Ruby, Python, Perl, Java, ASP, etc.) : on gagne

donc en sécurité et en veille technologique.

· Le site internet statique consomme peu de ressource serveur : le site n'utilisant aucune

technologie compliquée (au hasard : Php + MySql + Apache), les coûts d'entretien et de

maintenance en activité sont très inférieurs à ceux d'un site dynamique.

· Le site internet statique se sauvegarde plus facilement : ceux qui ont déjà manipulé les bases

de données MySQL utilisées pour la création de sites dynamiques savent que c'est une galère

à sauvegarder et à restaurer. Le fait de disposer directement des pages HTML du site facilite

la sauvegarde.

16

2. Quels avantages pour un site dynamique ?

· De nombreux scripts gratuits existent déjà et permettent de réaliser tous les sites qu'on

souhaite. Ainsi en téléchargeant le script (ou CMS : Content Management System) qui va

bien, il sera très simple de créer un forum, un blog ou tout autre site.

· La mise à jour est très simple : une fois le script dynamique en place, on met à jour le site en

ligne dans la partie « administration » du site. On peut donc mettre à jour le site de n'importe

quel ordinateur et même depuis certains téléphones mobiles (avec accès Internet

naturellement)

· Avec un site dynamique il est possible de réaliser une grande interaction avec les visiteurs :

les visiteurs peuvent donc rester beaucoup plus longtemps sur vos pages si les fonctionnalités

sont intéressantes.

3. Quel type de site pour quelle utilisation ?

On utilisera un site web statique pour un site web nécessitant peu de maintenance, peu de

mise à jour et contenant peu de pages.

En effet, comme la mise à jour d'un site Internet statique peut être fastidieuse, on utilisera ce

type de site uniquement si les mises à jour sont exceptionnelles. Car, à chaque mise à jour il

faudra modifier la page HTML du site et la mettre en ligne en effectuant une copie par FTP.

On utilisera plutôt un site dynamique si on souhaite créer une interaction avec ses lecteurs. Le

site dynamique permet de se connecter en ligne sur son site pour réaliser sa mise à jour en

direct. Une fois la mise à jour du site dynamique effectuée, le résultat apparaît directement

aux lecteurs. On privilégiera donc les sites web dynamiques pour les sites permettant aux

visiteurs de laisser des commentaires (blogs) ou de converser avec d'autres lecteurs (forums).

De même si le site doit être mis à jour très fréquemment (plusieurs fois par semaine) on

pourra choisir de créer un site dynamique même si aucune interaction n'est prévue avec les

visiteurs.

Par exemple pour réaliser un site vitrine présentant les 10 produits vendus par une entreprise

on pourra choisir :

· Un site statique si les produits ne sont modifiés qu'une ou deux fois par mois et qu'un ou

deux nouveaux produits sont ajoutés au catalogue chaque année. Ici on parle d’un site vitrine

où l’on peut voir seulement les produits.

· Un site dynamique si on souhaite que les visiteurs ajoutent des commentaires sur les fiches

produits et/ou qu'il faut modifier très souvent (ajout, suppression, modification) les fiches

produites. Dans ce cas on parle d’un site marchand et ainsi interagir avec l’ensemble des

produits en les ajoutant au panier, passer commande puis payer.

17

VII. CMS (Content Management System)

CMS est l’acronyme de Content Management System, soit, en français, « Système de

Gestion de Contenu ». Il s’agit d’un programme informatique, une famille de logiciels

utilisant une base de données et permettant de gérer de A et Z l’apparence et le contenu d’un

site web. Ils permettent, à des individus ou à des groupes hiérarchisés, la conception et la mise

à jour du contenu d’un site web ou d'applications multimédia à partir d’un panneau

d’administration. Ils partagent les fonctionnalités suivantes :

• Ils permettent à plusieurs individus de travailler sur un même document ;

• Ils fournissent une chaîne de publication (workflow) offrant par exemple la possibilité

de mettre en ligne le contenu des documents ;

• Ils permettent de séparer les opérations de gestion de la forme et du contenu ;

• ils permettent de structurer le contenu (utilisation de FAQ, de documents, de blogs, de

forums de discussion, etc.) ;

• Ils permettent de hiérarchiser les utilisateurs et de leur attribuer des rôles et des

permissions (utilisateur anonyme, administrateur, contributeur, etc.) ;

• Certains SGC incluent la gestion de versions.

Lorsque le SGC gère du contenu dynamique, on parle de système de gestion de contenu

dynamique ou SGCD (Dynamic Content Management System ou DCMS).

Les SGC ne doivent pas être confondus avec les systèmes de gestion électronique des

documents (GED) qui permettent de réaliser la gestion de contenu/stocks dans l'entreprise.

Pourquoi un CMS ? Avantages ?

• Le gestionnaire de contenu se charge de la partie commune aux pages de votre site et

génère les pages à partir du texte, balises ou des données que vous lui fournissez. Il

vous délivre donc de tâches répétitives.

• Il peut être statique et créer les pages avant qu’elles ne soient mises en lignes, ou

dynamique et créer la page à la demande du visiteur.

• Il n’apporte rien quant au contenu lui-même, mais permet de gérer la structure du site,

ajouter et classer les pages… Les principaux CMS permettent de gérer un forum, un

annuaire, les nouvelles, la plupart du temps par l’ajout d’extensions.

• Quelquefois il permet d’adapter l’interface du site, de générer des pages imprimables

plus dépouillées ou de faire participer des contributeurs au site.

- Pages dynamiques

Le CMS dynamique construit la page au moment où le visiteur veut la consulter, en cliquant

sur un lien. Les données sont lues dans une base de données et la page créée selon un modèle.

18

- Séparation entre contenu et présentation

C'est un principe fondateur de la gestion de contenu :

• Le contenu est stocké le plus souvent dans une base de données, structurée en tables et

en champs. C'est le contenu des champs de la base qui est créé/modifié par le

rédacteur, et non pas la page elle-même. On parle de site « dynamique » ;

• La présentation est définie dans un gabarit. Le gabarit définit deux choses : la mise en

page proprement dite - via les feuilles de style (parmi lesquelles les CSS, ou les règles

de transformation XSLT), et la structuration des données, au moyen de standards tels

que XML, ainsi que les informations extraites de la base de données (de même que

l'endroit où celles-ci doivent être affichées et sous quelles conditions).

- Édition de page simplifiée

Du fait du principe de séparation contenu/présentation, les rédacteurs peuvent se concentrer

sur le contenu. L'édition des pages est considérablement simplifiée. Deux mécanismes sont

proposés :

• Une interface WYSIWYG qui propose une interface graphique de mise en forme

similaire à celle qui existe dans un traitement de texte ;

• L'utilisation de balises simplifiées, visant à mettre le texte en forme. Il en existe

plusieurs types, dont le plus répandu est BBCode. On peut aussi citer des alternatives

plus modernes telles que Markdown ou Textile. Les wikis qui ne sont pas WYSIWYG

utilisent le wikitexte.

Notre projet c’est basé sur ces concepts, se posant ces quelques questions clés pour déterminer

notre choix, travaillant avec un logiciel CMS qui nous facilite la communication entre notre

site web et la base de données.

VIII. Conclusion :

Ce projet représente un mélange homogène dynamique et statique à la fois pour assurer la

vivacité des pages sans pour autant les surchargés et dans ce chapitre, nous avons présenté le

mécanisme de transport de l'information sur Internet, la différence entre un site statique et un

site dynamique les outils nécessaires qui ont révolutionné la création et gestion de site web tel

que les « CMS ». Ainsi nous allons voir plus en détail dans les chapitres suivants, la

présentation des concepts de base de langage de modélisation UML. Pour permettre une

bonne lecture de ce qui va suivre et exprimer de manière uniforme l'analyse et la conception

de notre magazine en ligne.

19

20

I. Introduction

La réalisation d'un site web doit être impérativement précédée d'une méthodologie d'analyse

et de conception qui a pour objectif de permettre de formaliser les étapes préliminaires du

développement d'un site afin de rendre ce développement plus fidèle aux besoins du client.

La phase d'analyse permet de lister les résultats attendus, en termes de fonctionnalités.et 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.

II. Présentation et justification du choix d'UML

1. Définition

Unified Modeling Language est un langage unifié de modélisation objets. Ce n'est pas une

méthode, il ne donne pas de solution pour la mise en œuvre d'un projet. C'est avant tout un

formalisme graphique issu de notations employées dans différentes méthodes objets.

2. A quoi sert UML ?

UML utilise l'approche objet en présentant un langage de description universel. Il permet

grâce à un ensemble de diagrammes très explicites, de représenter l'architecture et le

fonctionnement des systèmes informatiques complexes en tenant compte des relations entre

les concepts utilisés et l'implémentation qui en découle.

UML est avant tout un support de communication performant, qui facilite la représentation et

la compréhension de solutions objet :

· Sa notation graphique permet d'exprimer visuellement une solution objet, ce qui facilite la

comparaison et l'évaluation de solutions.

· L'aspect formel de sa notation, limite les ambiguïtés et les incompréhensions.

· Son indépendance par rapport aux langages de programmation, aux domaines d'application

et aux processus, en fait un langage universel.

UML est donc bien plus qu'un simple outil qui permet de "dessiner" des représentations

mentales... Il permet de parler un langage commun, normalisé mais accessible, car visuel.

Il représente un juste milieu entre langage mathématique et naturel, pas trop complexe mais

suffisamment rigoureux, car basé sur un métamodèle. Une autre caractéristique importante

d'UML, est qu'il cadre l'analyse. UML permet de représenter un système selon différentes

vues complémentaires : les diagrammes.

Que ce qu'un diagramme UML ?

Un diagramme UML est une représentation graphique, qui s'intéresse à un aspect précis du

modèle ; c'est une perspective du modèle.

21

Chaque type de diagramme UML possède une structure (les types des éléments de

modélisation qui le composent sont prédéfinis) et véhicule une sémantique précise (il offre

toujours la même vue d'un système).

Combinés, les différents types de diagrammes UML offrent une vue complète des aspects

statiques et dynamiques d'un système. Les diagrammes permettent donc d'inspecter un modèle

selon différentes perspectives et guident l'utilisation des éléments de modélisation (les

concepts objet), car ils possèdent une structure.

Une caractéristique importante des diagrammes UML, est qu'ils supportent l'abstraction. Cela

permet de mieux contrôler la complexité dans l'expression et l'élaboration des solutions objet.

UML opte en effet pour l'élaboration des modèles, plutôt que pour une approche qui impose

une barrière stricte entre analyse et conception. Les modèles d'analyse et de conception ne

diffèrent que par leur niveau de détail, il n'y a pas de différence dans les concepts utilisés.

UML n'introduit pas d'éléments de modélisation propres à une activité (analyse, conception.)

le langage reste le même à tous les niveaux d'abstraction.

Cette approche simplificatrice facilite le passage entre les niveaux d'abstraction. L'élaboration

encourage une approche non linéaire, les "retours en arrière" entre niveaux d'abstraction

différents sont facilités et la traçabilité entre modèles de niveaux différents est assurée par

l'unicité du langage. Il s'agit d'une tâche très complexe, qui nécessite une approche itérative,

car il est plus efficace de construire et valider par étapes, ce qui est difficile à cerner et

maîtriser.

C'est donc avec beaucoup d'intérêt que nous avons pris connaissance de cette proposition de

notre encadreur à utiliser comme langage de modélisation UML.

3. Diagramme de cas d’utilisation (Uses Case)

En analysant les besoins exprimés dans le cahier des charges, nous avons déduit les acteurs

ainsi que les cas d'utilisations tels que résumés dans le tableau suivant :

Acteur

Cas d'utilisation

Client

· Consulter les produits.

· Gérer panier.

· Passer commande.

·

Gérer compte.

· Envoyer message.

22

Administrateur

· Envoyer message.

· Gérer compte administrateur.

· Gérer les clients.

· Gérer les catégories.

·

Gérer les produits.

· Gérer commandes.

· Gérer les actualités. (Mise à jour)

Liste des acteurs et leur cas d'utilisation

a. Cas d'utilisation « consulter magazine en ligne »

Un lecteur qui veut visiter le magazine en ligne doit établir une connexion.

Consulter magazine en ligne

Ce cas d'utilisation donne la possibilité à n'importe quel visiteur d'accéder au magazine

Client, Administrateur

Début : Entrer l'adresse URL du site

En cours : l'internaute vas consulter le magazine, afficher les articles après avoir établie une

Connexion.

Sinon connexion non établi (Impossible d'afficher cette page).

Fin : la fin de ce cas d'utilisation engendre deux possibilités, soit l'affichage de la page

D’accueil du site, ou bien l'affichage d'une page de refus.

23

Modélisation générale des cas d'utilisations « Figure 1 »

24

b. Description textuelle Cas d'utilisation « S’inscrire »

Le visiteur peut s'inscrire au site en remplissant un formulaire d'inscription.

S’inscrire

S'inscrire au site permet à un visiteur d'avoir le ok d’acheter des produits dans le magazine

Client

Début : Entrer les informations d'inscription (pseudo, nom, mot de passe).

En cours : le système contrôle les informations fournies au clavier

Si « conditions vérifier » alors enregistrement automatique de ce visiteur dans la base de

données autant que client. Sinon message d'erreur.

Fin : un message d'erreur dans le cas où le système n'acceptera pas le visiteur, dans le cas

Contraire un message de validation sera affiché.

c. Description textuelle Cas d'utilisation « Authentification »

Un rédacteur ou bien un administrateur qui existe dans la base de données doit entrer son nom

et son mot de passe.

Authentification

Ce cas ne permet pas à n'importe quel visiteur de faire des modifications ou d'autre

opérations dans le site

Client, Administrateur

Début : le système affiche le formulaire d'authentification (pseudo, mot de passe).

En cours : le système contrôle les informations fournis au clavier. Si la condition est vérifiée

Alors accéder au site. Sinon message d'erreur.

Fin : Afficher les infos du site. Dans le cas contraire afficher le message d'erreur.

25

d. Description textuelle Cas d'utilisation « Gérer produit »

Gérer produit

Ce cas d'utilisation permet d'ajouter, modifier et de supprimer des articles

Administrateur

Début : le système affiche la page d'authentification.

En cours : l’administrateur saisit son code :

Si le code est correct alors une page sera affichée dans laquelle l’administrateur :

Peut ajouter, modifier et même de supprimer un de ces articles. Ainsi publier et dépublier un

article.

Sinon le système affiche la page de refus (code incorrect).

Fin : ce cas se termine soit par l'affichage d'une page de refus.

e. Description textuelle Cas d'utilisation « Gérer Catégorie »

Gérer catégorie

Ce cas d'utilisation permet d'ajouter, modifier et de supprimer des catégories

Administrateur

Début : le système affiche la page d'authentification.

En cours : l'administrateur saisit son code :

Si le code est correct alors une page sera affichée dans laquelle l'administrateur : Peut ajouter

des catégories, les modifier, et même supprimer des catégories. Sinon le système affiche la

page de refus (code incorrect).

Fin : ce cas se termine soit par l'affichage d'une page de refus.

26

f. Description textuelle Cas d'utilisation « Gérer commande »

Gérer commande

Ce cas d'utilisation permet d'ajouter, modifier et de supprimer des commandes

Administrateur

Début : le système affiche la page d'authentification.

En cours : l'administrateur saisit son code :

Si le code est correct alors une page sera affichée dans laquelle l'administrateur : Peut ajouter,

les modifier, et même supprimer des commandes.

Sinon le système affiche la page de refus (code incorrect).

Fin : ce cas se termine soit par l'affichage d'une page de refus.

g. Description textuelle Cas d'utilisation « Gérer client »

Gérer client

Ce cas d'utilisation permet d'ajouter, supprimer des clients et modifier leurs

informations.

Administrateur

Début : le système affiche la page d'authentification.

En cours : l'administrateur saisit son code :

Si le code est correct alors une page sera affichée dans laquelle l'administrateur :

Peut ajouter, en acceptant ou refusant leurs inscriptions, peut modifier les informations des

clients, et même les supprimer.

Sinon le système affiche la page de refus (code incorrect).

Fin : ce cas se termine soit par l'affichage d'une page de refus.

27

h. Description textuelle Cas d'utilisation « gérer les actualités »

(Mise à jour)

L'administrateur doit s'authentifier afin d'accéder à la base de données pour effectuer des

modifications. L'administrateur est le responsable de la maintenance du site, d'héberger le site

et faire la mise à jour des programmes (Template, applications).

Gérer les actualités

Ce cas d'utilisation permet de modifier ou de mettre à jour le site

Administrateur

Début : l'hébergeur affiche la page d'authentification.

En cours : l'administrateur saisi son code :

Si le code est correct alors une page d'administrateur sera affichée dans laquelle

L’administrateur :

Peut éventuellement ajouter d'autres interfaces (modifier le design du site).

Sinon l'hébergeur affiche la page de refus.

Fin : ce cas se termine soit par l'affichage d'une page de refus, soit la page d'accueil de

L’administrateur (interface admin).

28

III. Diagramme de classe

Diagramme de classe figure -2-

29

1. DICTIONNAIRE DE DONNEE

Classe Attributs Description Type Longueur

Client

id_client id d'un client Numerique 10

Nom Nom d'un client Texte 20

Prenom Prenom d'un client Texte 20

DateNaissance Date_nais d'un client Date -

Email Email d'un client Texte 20

MotPasse Mot_de passe d'un client Texte 20

Adresse Adresse d'un client Texte 30

Tel Telephone d’un client Texte 20

AdresseLivraison Adresse de Livraison d'un client Texte 30

Administrateur

id_admin id d'un admin Numerique 10

Nom Nom d'un admin Texte 20

Prenom Prenom d'un admin Texte 20

Email Email d'un admin Texte 20

MotPasse Mot de passe d'un admin Texte 20

Adresse Adresse d'un admin Texte 30

Tel Telephone d’un admin Texte 20

Panier

NbreArticles Nombre d’articles texte 10

Total Prix Total texte 25

id_produit id d'un produit numerique 10

NumModel Reference d’un produit texte 20

30

Produit

NomModel Nom d’un produit texte 20

Description Description d’un produit texte -

Prix Prix d'un produit numerique -

Quantité Quantite d'un produit entier 5

Categorie

id_categorie numero d'un cathégorie entier 5

NomCategorie Nom d'un cathégorie texte 25

Contact

id_contact Id d'un message numerique 10

NomContact Nom du messager texte 20

SujetContact Sujet du message texte 20

EmailContact Email du messager texte 20

Message Contenu du message texte -

Tableau 1. « Dictionnaire de données »

2. Représentation des méthodes par classe

Numéro Classe Méthode

1 Client Ajouter ()

Modifier ()

Supprimer ()

2 Administrateur Ajouter ()

Supprimer ()

Modifier

3 Panier Ajouter ()

Modifier ()

Supprimer ()

4 Produit Ajouter ()

Modifier ()

Supprimer ()

5 Catégorie Ajouter ()

Modifier ()

Supprimer ()

6 Contact Ajouter ()

Modifier ()

Supprimer ()

Tableau 2. « Représentation des méthodes par classe »

31

IV. Développement du modèle dynamique :

1. Diagramme de séquence

En général il n'est pas possible d'écrire tous les scénarios d'un cas d'utilisation, il faudra

choisir les principaux scénarios nominaux et quelques exceptions.

a. Diagramme de séquence consulter magazine

Diagramme de séquence consulter magazine figure -3-

32

b. Diagramme de séquence d'inscription

Diagramme de séquence d'inscription figure -4-

33

c. Diagramme de séquence d’authentification

Diagramme de séquence d’authentification figure -5-

:

Utilisateur

:

Utilisateur

:

EcranAuthentification

:

EcranAuthentification : Contrôle des

données

: Contrôle des

données

1.Saisir(nom d'utilisateur,mot de passe)

2.vérifier(nom d'utilisateur,mot de passe)

if valide

3.Afficher l'interface correspondante

else4.afficher l'interface d'authentification

34

d. Diagramme de séquence passer commande

Diagramme de séquence gérer produit figure -6-

35

e. Diagramme de séquence gérer panier

Diagramme de séquence gérer produit figure -7-

36

f. Diagramme de séquence gérer produit

Diagramme de séquence gérer produit figure -8-

Remarque : ce diagramme est valide aussi pour la gestion des contacts

37

g. Diagramme de séquence gérer catégorie

Diagramme de séquence gérer catégorie figure -9-

38

2. Diagramme d'Activité :

Diagramme d’activité simplifié « Partie Administrateur » figure -10-

39

40

I. Introduction

Au cours de ce chapitre on va citer les différents logiciels qu’on a utilisés pour réaliser et

achever notre projet ainsi une petite revu sur notre boutique en ligne.

II. Choix des outils de développement

Le développement d'un site web dynamique demande l'inclusion de script et de code pour

garantir le dynamisme des pages et la liaison avec la base de données.

1. Le langage de programmation : PHP5

Pour réaliser notre site, nous avons utilisé le langage de programmation PHP dédié à la

création des applications web dynamique, celui-ci nous l'avons manipulé dans un

environnement de développement intitulé PHP5 qui est un langage de script libre, très

puissant, rapide et principalement exécuté par le compilateur PHP. Un script PHP est

multiplateforme, très bon support des bases de données (Oracle, Microsoft, MySQL).

2. Autres outils

JavaScript : c'est un langage de programmation qui est inclue dans le code HTML. Il permet

d'apporter des améliorations au langage HTML en permettant d'exécuter des commandes.

Les outils de développement web : HTML (HyperText Markup Langage), CSS (Cascade

Style Sheet) seront aussi utilisés pour réaliser les interfaces du site. Ainsi Apache HTTP

Server, souvent appelé Apache, est un logiciel permettant à des utilisateurs d'accéder à des

pages web.

3. Choix du SGBD : MySQL

MySQL (My Structured Query Language) est un Système de Gestion des Bases de données

(SGBD) Open Source très rapide, robuste et multiutilisateur. Le serveur MySQL supporte le

langage de requêtes SQL, langage standard de choix des SGBD modernes. Il est facilement

accessible en réseaux et supporte des connexions sécurisées grâce au protocole SSL. La

portabilité du serveur MySQL lui permet de s'exécuter sur toutes les plateformes et d'être

intégré à plusieurs serveurs web.

41

4. Serveur utilisé : WampServer 2.2D

WampServer est une plateforme de développement Web de type WAMP, permettant de faire

fonctionner localement (sans se connecter à un serveur externe) des scripts PHP. WampServer

n'est pas en soi un logiciel, mais un environnement comprenant deux serveurs (Apache et

MySQL), un interpréteur de script (PHP), ainsi qu'une administration pour les deux bases

SQL PhpMyAdmin et SQLiteManager.

42

5. Logiciel de développement utilisé : Adobe Dreamweaver CS6

Dreamweaver est un éditeur de site web WYSIWYG pour Microsoft Windows, et Mac OS X

créé en 1997, commercialisé par Macromedia puis Adobe Systems sous licence utilisateur

final. Il fut l'un des premiers éditeurs HTML de type « tel affichage, tel résultat », mais

également l'un des premiers à intégrer un gestionnaire de site (CyberStudio GoLive étant le

premier).

6. Logiciel CMS utilisé : Prestashop 1.6

Prestashop est un CMS (système de gestion de contenu) catalogue et e-commerce très

populaire. Il permet de gérer la structure du site, ajouter et classer les pages.

Ce CMS e-commerce se caractérise par sa simplicité d'installation et de gestion,

contrairement aux sites e-commerce classiques. Il est livré avec plus de 300 fonctionnalités

comme la gestion du catalogue, le multilingues, les opérations maketing ou les outils

d'analyses statistiques pour aider les entreprises à booster leurs performances sans grandes

connaissances techniques.

La communauté de Prestashop est très active et met à disposition des utilisateurs plus de 2000

extensions et templates complémentaires sur une marketplace dédiée. Aujourd'hui Prestashop

revendique 125 000 boutiques crées avec leur CMS.

Prestashop commercialise aussi la Prestabox, qui propose un site e-commerce clé en main,

avec l'installation et l'hébergement inclus.

43

III. Présentation des interfaces Graphique et Administratives

Page d’authentification administrateur :

Interface de gestion administrateur :

44

Page de gestion des catégories :

Page de gestion des produits :

45

Page de gestion d’un produit :

Page d’accueil du site :

46

Page de connexion client :

Page inscription client :

47

Compte client :

Ajout des informations et des adresses :

48

Consulter produit :

Ajout au panier et tout le processus de commande :

49

50

51

52

Page Contact :

Remarque : on a cité les principales fonctionnalités du site mais il existe bien entendu d’autres

activités, suit des clients, commandes et services tel la réparation.

IV. Conclusion Générale

Ce projet consiste à mettre en œuvre un site web commerciale intitulée « High-Tech », c’était

notre première réalisation et expérience, une grande opportunité de découvrir le monde

professionnel du point de vue adaptation et difficultés. Il nous a permis d’approfondir nos

connaissances acquises durant les années d’éducation au sein de l’établissement de formation

en informatique et gestion « EFIG » dans le cadre de l'obtention du brevet technicien

supérieur en multimédia. Une agréable expérience qui nous prépare certainement

efficacement au marché professionnel.