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
52
Embed
PROJET DE FIN D'ÉTUDE · 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
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
VI. CONCLUSION .............................................................................................................................................. 11
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
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
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