Réalisation d’une plateforme e-commerce de vente de prestations HTML dotée d’un générateur de sites à base de différentes solutions PHP

Université Mohammed Premier Oujda
Ecole Nationale des Sciences Appliquées
Filière : Génie Informatique
Mémoire
Présenté en vue d’obtenir le diplôme d’Ingénieur d’Etat
Option : Qualité logiciel
N° : GI 2010 / 25
Sujet :
Présenté par : Encadré par :
M. BETARI Amine Mme. BELOUALI Saida (ENSAO)
M. KADDARI Zakaria M. ROUATI Abdelkader (SQLI)
Membres de jury :
Mme. BELOUALI Saida
M. BOUCHENTOUF Toumi
M. BERRICH Jamal
M. BELKASMI Mohammed Ghaouth
Année universitaire : 2009 - 2010
Réalisation d’une plateforme e-commerce de vente de
prestations HTML dotée d’un générateur de sites à base
de différentes solutions PHP

Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria
Année Universitaire 2009/2010 2

Dédicace
A mes très chers parents,
Pour leurs sacrifices, leur amour, leurs prières et leur soutien.
A ma chère famille,
Petit ou grand, proche ou lointaine.
A tous mes amis,
Sans qui la vie me semblerait bien fade, je vous souhaite la prospérité et le
succès.
A tous nos enseignants avec notre profonde considération,
Qui n’ont épargné aucun effort pour nous offrir un bon enseignement.
Et A tous ceux qui nous ont assisté, dans la réalisation et le bon
déroulement de ce travail.
Zakaria

Dédicace
A mes chers parents,
Pour leurs sacrifices, leurs amours et leurs soutiens.
A mes petites sœurs,
Je vous porte toujours dans mon cœur, je vous souhaite tout le bonheur et la
joie.
A ma chère famille,
Petit ou grand, proche soit-elle ou lointaine.
A tous mes amis,
Je vous souhaite le courage et le succès dans votre vie aussi bien
professionnelle que familiale.
Et A tous ceux qui nous ont aidés et soutenus durant notre stage
Amine

Remerciements
Il nous est agréable de nous acquitter d’une dette de reconnaissance auprès
de toutes les personnes qui ont contribué de prés ou de loin à l’aboutissement de ce
projet.
Nous tenons à adresser nos plus vifs remerciements à M. RAMI Rachid,
Directeur de la société SQLI Oujda, de nous avoir offert l’opportunité d’effectuer
notre projet de fin d’études au sein de SQLI.
Nous tenons à exprimer notre gratitude à notre encadrant M. ROUAHTI
Abdelkader, pour sa disponibilité et les conseils pertinents qu’il nous a prodigués
tout au long du projet.
Nous remercions également M GIGOT Florian, Directeur du pôle Agency
Offshore pour ces conseils et orientations.
De même, nous remercions tous les membres de l’équipe Agency Oujda pour
les conseils, les critiques et les suggestions qui nous ont été d’un précieux recours.
Nous tenons aussi à remercier Mme BELLOUALI Saida, notre encadrant de
l’Ecole Nationale des Sciences Appliquées Oujda, pour ses conseils pertinents
durant la rédaction de ce rapport.
L’aboutissement de ce travail nous donne également l’occasion d’exprimer
notre très sincère reconnaissance à M. Toumi BOUCHNTOUF, chef de filière
informatique, pour son aide et remarques constructives ainsi qu’à tous le corps
professoral de l’ENSAO.

Résumé
Le projet HTMLSHOP, a pour objectif de mettre en place une plateforme e-
commerce de vente de prestations HTML dotée d’un générateur de sites.
HTMLSHOP a comme but de fournir des prestations HTML de qualité. Ainsi un
client peut demander la réalisation d’une maquette statique à travers un processus de
commande interactive.
HTMLSHOP propose un espace d’administration complet offrant une gestion des
clients, des commandes et une gestion d’un système d’échange de
questions/réponses.
HTMLSHOP est réalisé de sorte qu’il permette un bon positionnement dans les
moteurs de recherche. Il offre une fonctionnalité de génération de sites. En effet, à
travers un processus quasiment automatisé, un administrateur peut facilement
générer des sites déclinés basés sur un site principal.
La solution HTMLSHOP, a été réalisée avec le langage PHP et dans un
environnement basé sur le système de contrôle de versions SVN. La méthode UP et
la méthode agile XP ont été adoptées. Le Framework Symfony et le Système de
Gestion de Contenu EZ Publish ont également été utilisés. Ce dernier a aussi permis
l’amélioration du site de l’ONISEP.
Mots clés: HTMLSHOP, E-commerce, Symfony, EZ Publish, ONISEP, SVN,
LAMP

Abstract
Our final year project entitled HTMLSHOP performed within our internship in SQLI
Oujda, aims to establish an e-commerce platform to sell quality HTML design
services, HTMLSHOP is based on multiple technologies, include a powerful a sites
generating system, and is built to simplify search engine optimization.
The goal of HTMLSHOP is to provide quality HTML services, a customer can ask
for an HTML mock-up through an interactive checkout process, on the other hand,
HTMLSHOP offers comprehensive administration capabilities that are available to
administrators, allowing them, among other things to manage customers and orders,
Another important point, is SEO (Search Engine Optimization), in fact, our solution
is built to allows a good ranking in search engines.
Another advantage of HTMLSHOP is the sites generation feature, through an
automatic process, an administrator can easily generate declined sites based on a
central one (Master Site), HTMLSHOP was built with the PHP programming
language in an environment based on the version control system SVN. The XP and
UP methodologies have been choosing, The Symfony Framework and the content
management system EZ Publish also have been used, which also helped improving
the ONISEP site.
Key words: HTMLSHOP, SEO, E-commerce, Symfony, EZ Publish, sites generator,
ONISEP, SVN, LAMP

Liste des figures
Figure 1. Le portail Skills de SQLI .................................................................10
Figure 2. Méthodologie agile ..........................................................................14
Figure 3. Cas d’utilisation de gestion de la commande et ticket.......................21
Figure 4. Cas d’utilisation de gestion de contenu.............................................22
Figure 5. Diagramme de séquence pour la gestion de la commande.................23
Figure 6. Diagramme de classes (Contenu) .....................................................24
Figure 7. Modèle logique de données..............................................................25
Figure 8. Fonctionnement de SVN ..................................................................27
Figure 9. Architecture MVC du Framework Symfony.....................................31
Figure 10. Arborescence de HTMLSHOP.......................................................37
Figure 11. Comment Ez Publish parcourt les fichiers de configurations..........38
Figure 12. L’arborescence du projet HTMLSHOP dans Symfony ...................39
Figure 13. Décoration des pages par le layout dans Symfony ..........................40
Figure 14. Mécanisme des SLOT dans Symfony.............................................41
Figure 15. Arborescence de design de l’extension HTMLSHOP .....................41
Figure 16. Plugin sfDoctrineGuardPlugin........................................................42
Figure 17. Surcharge de module user sous EZ Publish....................................43
Figure 18. L’insertion du contenu dans le Backend .........................................47
Figure 29. Contenu et design dans EZ Publish.................................................48
Figure 20. Les modules de la solution HTMLSHOP........................................49
Figure 21. Processus de génération d’un site ...................................................52
Figure 22. Le système de Site Accesses dans EZ Publish ................................53
Figure 23. Document pour l’affectation des anomalies....................................54
Figure 24. Diagramme de cas d’utilisation Du ONISEP ..................................56
Figure 25. Description des attributs de la classe Académie..............................57

Liste des abréviations
Sigle, terme,
abréviation
Désignation
LAMP Linux Apache MySQL PHP/Perl/ Python
CMMI Capability Maturity Model Integration
UML Unified Modeling Language
PDT PHP development tools
SEO Search engine optimization
SSII Société de service d’ingénierie informatique
TMA Tierce maintenance applicative
XP eXtreme Programming
PHP Hypertext Preprocessor
SSH Secure Shell
SFTP Secure File Transfer Protocol
CSS Cascading Style Sheets
MVC Model–View–Controller
ORM Object-relational mapping
YAML Yet Another Markup Language
SVN Subversion
CMS Content management system
UP Unified Process
URL Uniform Ressource Locator
ONISEP L’Office National d’Information Sur les Enseignements et les
professions
MLD Modèle logique de données
BO Back Office
FO Front Office
TIC Technologie de l’information et de la communication
R&D Recherche et Développement
SGBDR Système de Gestion de Bse de Données Relationnelle
XHTML (eXtensible) HyperText Markup Language

Sommaire
Introduction générale ...........................................................................................14
Partie I: Présentation de l'organisme d'accueil SQLI et du projet HTMLSHOP
Chapitre 1 : Présentation de l’organisme d’accueil SQLI
Introduction............................................................................................................19
I. Présentation du groupe SQLI et de l’agence SQLI Oujda ................................19
1. Présentation du Groupe SQLI.......................................................................19
2. Présentation de l’agence SQLI OUJDA : Open source un axe fondamental..19
3. Présentation du pôle SQLI Agency...............................................................20
II. Modèle CMMI, le garant de qualité des projets chez SQLI..............................20
1. Le modèle CMMI ........................................................................................20
2. SQLI et la certification CMMI .....................................................................21
3. Le nouveau concept de SKILLS...................................................................21
Conclusion .............................................................................................................22
Chapitre 2 : A propos du projet HTMLSHOP
Introduction............................................................................................................23
I. Cadre général du projet HTMLSHOP ............................................................24
II. Conduite du projet HTMLSHOP.....................................................................26
Conclusion .............................................................................................................28
Partie II: Etude fonctionnelle et conceptuelle et environnement technique du
projet HTMLSHOP
Chapitre 1 : Etude fonctionnelle et conceptuelle du projet HTMLSHOP
Introduction............................................................................................................31
I. Etude fonctionnelle.........................................................................................31
1. Etude de l’existant........................................................................................31
2. Spécifications fonctionnelles........................................................................32
II. Conception et modélisation.............................................................................36
1. Modélisation UML.......................................................................................36
2. Conception de la base de données ................................................................40
Conclusion .............................................................................................................40
Chapitre 2 : Environnement de développement, Outils et technologies utilisées
dans le projet HTMLSHOP
Introduction............................................................................................................41

I. Environnement de développement et outils utilisés ........................................42
1. Environnement de développement autour de SVN........................................42
2. La plateforme open source LAMP................................................................43
3. CentOS et VMWARE Player .......................................................................44
4. Eclipse PDT.................................................................................................45
5. Putty et WinSCP..........................................................................................45
II. Technologies utilisées.....................................................................................46
1. Le Framework Symfony...............................................................................46
2. EZ Publish, le CMS des géants du média et des entreprises..........................47
3. Magento, le leader des solutions e-commerce...............................................48
4. Bibliothèque JQuery ....................................................................................49
Conclusion .............................................................................................................50
Partie III: Réalisation du projet HTMLSHOP et participation au projet
ONISEP
Chapitre 1 : Réalisation et mise en œuvre du projet HTMLSHOP
Introduction............................................................................................................53
I. Réalisation de la maquette statique et prise en compte de la dimension SEO...53
II. Arborescence du projet HTMLSHOP..............................................................54
1. Arborescence du projet HTMLSHOP sous EZ Publish.................................54
2. Arborescence sous Symfony ........................................................................57
III. Intégration de la maquette statique ...............................................................58
1. Intégration sous Symfony.............................................................................58
2. Intégration sous EZ Publish..........................................................................59
IV. Les principaux modules de la solution HTMLSHOP....................................60
1. Module Client..............................................................................................60
2. Module Commande......................................................................................61
3. Module Paiement .........................................................................................63
4. Module contact ............................................................................................63
5. Gestion de contenu.......................................................................................64
6. Gestion des sites et thèmes...........................................................................66
V. La réalisation du générateur de sites................................................................67
1. La réalisation du générateur de sites sous Symfony......................................68
2. La réalisation du générateur de sites sous eZ Publish....................................70
VI. Recette et TMA............................................................................................71
Conclusion .............................................................................................................72

Chapitre 2 : Participation au développement du projet ONISEP
Introduction............................................................................................................74
I. Contexte général du projet ONISEP................................................................74
1. Présentation du projet...................................................................................74
2. Démarche de réalisation...............................................................................74
II. Besoins fonctionnels du projet ONISEP..........................................................75
III. Conception technique du projet ONISEP......................................................75
IV. Réalisation de la fiche établissement handicap .............................................76
1. Installation de l’environnement....................................................................76
2. Fiche établissement handicap.......................................................................77
Conclusion .............................................................................................................78
Conclusion générale..............................................................................................79
Webographie ..........................................................................................................81
Lexiques.................................................................................................................82
Annexes .................................................................................................................83

Introduction générale
Ces dernières années, le e-commerce (commerce électronique) est devenu une
solution primordiale pour les entreprises qui cherchent à attirer plus de clients. Grâce
à sa flexibilité, son effet de masse sur Internet et au fait qu’une boutique en ligne
n’est jamais fermée.
Le e-commerce est plus concurrentiel que le commerce traditionnel. En effet,
grâce aux moteurs de recherche, il est caractérisé par un marché plus vaste, plus
ouvert et plus homogène. Le succès d’un projet e-commerce et sa capacité
d’affronter la concurrence repose sur la plateforme technologique sur laquelle il est
bâti.
Une plateforme e-commerce doit assurer la simplicité du processus d’achat
pour les clients, une gestion simple et efficace pour les administrateurs, permettant
ainsi un bon positionnement par rapport aux concurrents.
Créer une telle plateforme est l’objet de notre projet de fin d’études. Ce projet
a été effectué au sien de la société SQLI -le leader français des sociétés de services
spécialisées dans les technologies d’information et de communication-.
Dans le cadre de ce projet, il nous a été confié une mission de réalisation
d’une plateforme e-commerce spécialisée dans la vente de prestations HTML dotée
d’un générateur de sites utilisant plusieurs supports technologiques, tout en prenant
en considération la problématique de la concurrence par une approche basée sur le
référencement dans les moteurs de recherche. Le sujet de notre projet de fin d’études
a consisté en la mise en place d’une plateforme e-commerce de vente de prestations
HTML dotée d’un générateur de sites à base de différentes solutions PHP.
La solution que nous avons proposé, baptisée HTMLSHOP, établit un canal
virtuel entre les prestataires et les clients désirant concevoir des pages web, à partir
des maquettes graphiques. Afin d’assurer toutes les fonctionnalités d’un système e-
commerce, HTMLSHOP doit offrir deux applications indépendantes (Frontend et

Backend). En effet, le Frontend doit permettre aux clients d’exprimer leur besoin,
d’effectuer des commandes, de suivre leur état d’avancement et de bénéficier d’une
solution de paiement sécurisée, alors que le Backend doit garantir une gestion
complète des commandes ainsi qu’un contact direct avec les clients.
Pour des raisons évidentes de concurrence, notre solution devrait être bien
positionnée par rapport aux sites offrant le même service. En donnant de la visibilité
à nos prestations dans les moteurs de recherche, notre solution génèrera un trafic
important et ciblé, accroissant les ventes de façon significative.
HTMLSHOP sera dotée aussi avec un générateur de sites offrant la possibilité
de reproduire les fonctionnalités d’un site principal (appelé Site Master) en d’autres
sites déclinés (appelé Sites Déclinés). En d’autres termes, créer d’autres sites clones
qui partagent les mêmes fonctionnalités que le Site Master, mais avec du contenu et
design différents. Le but principal étant d’avoir plusieurs sites et de se faire une place
parmi les concurrents.
Par ailleurs, nous expliquerons notre participation à l’amélioration du site
web ONISEP. Plus précisément il s’agira de la refonte graphique, fonctionnelle et
technique de ce site web. Ce dernier est un établissement public qui diffuse
l’information sur les formations et les métiers en France.
Les fonctionnalités de la configuration actuelle du site seront reprises tout en
exploitant les avantages apportés par la technologie Ez Publish.
Entre autres, nous aurons à améliorer la partie concernant la présentation des
renseignements sur les établissements d’accueil des personnes souffrant d’un
handicap ou d’une déficience physique ou mentale.
Le présent mémoire est une synthèse du travail réalisé. Il est composé de plusieurs
chapitres. Dans le premier nous présenterons le groupe SQLI, l’agence SQLI Oujda
et le pôle Agency. Dans le deuxième, nous exposerons la problématique du projet
HTMLSHOP. Dans le troisième nous aborderons l’étude fonctionnelle et
conceptuelle ainsi que l’environnement technique et les technologies utilisées. Enfin,

dans le quatrième nous détaillerons notre solution HTMLSHOP. Dans le cinquième,
et avant de conclure, nous donnerons un aperçu de notre contribution à la refonte du
site web de l’ONISEP.

Partie I: Présentation de l'organisme d'accueil
SQLI et du projet HTMLSHOP
Chapitre 1 : Présentation de l’organisme d’accueil SQLI

Chapitre 1 : Présentation de l’organisme d’accueil
SQLI
I. Présentation du groupe SQLI et de l’agence SQLI Oujda
II. Modèle CMMI, le garant de qualité des projets chez
SQLI

Introduction
Le présent chapitre s’intéresse à la présentation de l’organisme d’accueil,
l’organisme où nous avons effectué notre projet de fin d’études, nous allons donner
une idée générale sur le groupe SQLI, puis l’agence SQLI Oujda et le pôle Agency.
Ensuite, nous allons terminer par les modèles CMMI adoptés par le groupe.
I. Présentation du groupe SQLI et de l’agence SQLI Oujda
1. Présentation du Groupe SQLI
Le groupe SQLI est une société de services dans le domaine du conseil et de
l’intégration des nouvelles technologies orientés web, créée en 1990, Le groupe est
un des acteurs majeurs français sur l’e-business avec ses 22 implantations dont trois
agences au Maroc (Casablanca, Rabat et Oujda). Sa vocation, en tant qu’intégrateur
de services Internet, est d’apporter aux entreprises et aux établissements publics une
couverture complète de leurs besoins en matière d’évolution de leurs Systèmes
d’information. SQLI propose ainsi une large gamme de compétences, qui va du
conseil en urbanisation des systèmes d’information à la maîtrise d’œuvre de projets
utilisant des technologies différentes. Ces compétences sont organisées en quatre
pôles principaux :
Le conseil (conseil fonctionnel, organisationnel, technologique),
L’ingénierie (intégration et mise en œuvre),
Le web agency: e-marketing et web 2.0,
La formation, le transfert de compétences.
Une présentation détaillée du groupe SQLI est abordée dans l’annexe A.
2. Présentation de l’agence SQLI OUJDA : Open source un axe
fondamental
Dans le cadre de sa stratégie de développement, le groupe SQLI a voulu renforcer
son organisation en pôles spécialistes, en disposant chacun d’une expertise
technologique et métier spécifique.

Mémoire de projet de fin d’études / ENSAO BETARI Amine KADDARI Zakaria
Pour accompagner le développement de son pôle dédié Open Source de Poitiers, en
septembre 2006 SQLI ouvre en partenariat avec l’Université Mohammed 1er
d’OUJDA, son premier centre de RD /offshore.
3.Présentation du pôle SQLI Agency
Le développement exponentiel d’Internet marque l’émergence de nouveaux usages
en termes de consommation et d’information, c’est dans ce cadre que se situe
Agency ; le pôle dans lequel nous avons effectué notre stage, Agency est dédié aux
métiers et technologies du web.
Communiquer mieux et partout, c’est le slogan choisi par Agency pour bien
résumer sa vocation : conseiller les entreprises pour tirer le meilleur parti de
nouveaux usages du web : e-marketing et Web 2.0, entreprise 2.0 et applications
métiers, ROI web (trafic, e-commerce, e-pub…), Web management…etc.
SQLI Agency, quelques chiffres :
200 spécialistes du Web : conseil, création, solutions,
Plus de 60 Consultants maîtrisant usages Internet et enjeux des marques,
4 agences en France : Paris, Lyon, Nantes et Sud,
1 site spécialisé.
Voir l’annexe A pour une présentation détaillée des solutions proposées par SQLI
Agency.
II. Modèle CMMI, le garant de qualité des projets chez
SQLI
1. Le modèle CMMI
CMMI, que l'on pourrait traduire par Modèle de maturité logicielle est le garant de
la qualité des projets chez SQLI, c’est un modèle pour les entreprises désireuses
d'accroître leur compétitivité en améliorant les processus liés au développement
logiciel.
Voir l’annexe A pour une Description détaillée de CMMI et ses différents niveaux.

2. SQLI et la certification CMMI
Convaincue très tôt de l’absolue nécessité d’industrialiser le développement
informatique, SQLI est la première SSII française à avoir adopté la démarche qualité
spécialisée dans le logiciel (CMMI) et à être certifiée en 2004. SQLI apporte ainsi à
ses clients une garantie totale de résultat et un très haut niveau de productivité. Etant
déjà certifié CMMI niveau 3, SQLI prépare maintenant le passage au niveau 4.
En 2005 SQLI a obtenu une certification CMMI de niveau 3, ainsi le groupe a d'ores
et déjà déployé les pratiques CMMI de niveaux 4 et 5 au sein de ses agences.
Fort de sa dynamique d'amélioration continue et de l'utilisation d'un outillage
sophistiqué mis au point par le groupe (solution IdeoProject), SQLI a atteint un
niveau de maîtrise de ses projets leur conférant une qualité et une performance
frôlant l'excellence : la conjonction de trois éléments clés fait du groupe l'acteur de
référence dans la conduite de projets
Un niveau de qualité inégalé,
Un respect strict des charges,
Un respect strict des délais.
3. Le nouveau concept de SKILLS
Afin de faciliter l’accès des collaborateurs aux informations relatives aux pratiques
CMMI, SQLI a mis en place le portail Skills qui est un référentiel de processus,
produits et outils pour les projets TMA, ces outils prennent généralement la forme
soit de documents Word, utilisés comme modèles pour la rédaction par exemple de
dossiers de spécifications ou de dossiers d’architecture ; soit de feuilles Excel pour
présenter par exemple des check-lists de revue de produits, pour organiser un suivi
des actions ou plus généralement un suivi de projet, ou encore pour illustrer au
travers de graphiques l’évolution d’indicateurs sur un projet.

Figure 1 : Le portail Skills de SQLI
Skills a pour but de
Favoriser des processus liés à une activité « temporelle » délimitée,
Savoir ce qu’il faut faire selon l’instant du projet,
Savoir ce qu’on a à faire selon son rôle projet,
Connaître rapidement les ajustements des processus par projet,
Ne plus prendre CMMI pour une norme, mais seulement comme un modèle.
Conclusion
A travers ce chapitre nous avons pu constituer une image assez précise de
l’environnement organisationnel où s’est déroulé notre projet de fin d’études. Après
avoir présenté l’organisme d’accueil il sera question dans le chapitre suivant du
contexte du projet ainsi que de la démarche suivie.

I. Cadre général du projet HTMLSHOP
II. Conduite du projet HTMLSHOP

Introduction
Le contexte de chaque projet est l’un des points les plus importants à prendre en
considération lors de l’étude du projet, aussi la façon de gérer et de conduire un
projet joue-t-elle un grand rôle dans la détermination de son résultat final. Dans le
présent chapitre, nous allons présenter le cadre et le contexte de notre projet
HTMLSHOP, ainsi que la méthodologie de gestion et de conduite de projet que nous
avons suivi.
I. Cadre général du projet HTMLSHOP
Durant notre stage, nous avons bénéficié d’un ensemble de formations techniques.
Nous avons acquis des connaissances pertinentes que nous avons rapidement mises
en œuvre sur des projets concrets.
Ces formations ont été données par des professionnels, qui nous ont apporté leur
expertise et expérience. Cela nous a aidés par la suite pour réduire les risques
techniques. Nous présentons ici un aperçu sur les différentes technologies qui ont
fait l’objet de la formation qui nous a été assurée.
Formations HTML/XHTML –CSS
XHTML est un langage de balisage qui permet la création des documents
hypertextes affichables par un navigateur Web. Les styles CSS sont un complément
du langage XHTML prévu pour gérer toute la mise en forme de la page. Cela va de
l’esthétique (couleurs, typographie) à la fonctionnalité (positionnement, structure,
navigation).
Formations PHP
Lors de cette formation, nous avons commencé dans un premier temps par une
initiation au langage PHP, les bases de ce langage, le traitement des formulaires.
Dans un second temps, la formation a porté sur le langage PHP5 : le modèle MVC.
PHP est un langage de script côté serveur, open source, souple vu que la déclaration
des variables et des attributs n’est pas obligatoire. Il est principalement utilisé dans le
développement des applications web. Toutefois, il peut être utilisé comme un
langage de programmation en ligne de commande.

Formations EZ Publish
Le CMS EZ Publish a fait l’objet d’une formation qui s’est étalée sur cinq jours.
Pendant cette durée nous avons eu l’occasion de comprendre les concepts et
l’architecture d’EZ Publish et aussi de mettre en pratique.
Après la formation sur la technologie EZ Publish, une autoformation sur la même
technologie durant une semaine nous a été prodiguée. Ensuite, chacun de nous a
participé à des projets clients.
Durant cette période notre Manager nous a proposé un projet, intitulé HTMLSHOP,
qui permet de vendre des prestations HTML de qualité depuis une multitude de sites
web.
Ce projet s’inscrit dans le cadre des solutions e-commerce, il doit, de façon générale
- Offrir une interface accessible par tous les internautes, quel que soit leur
navigateur,
- Assurer un jeu de simplicité d’utilisation, flexibilité et robustesse,
- Permettre une gestion parfaite des commandes des utilisateurs,
- Offrir des solutions de paiement extrêmement sécurisées.
HTMLSHOP doit permettre de garantir un suivi complet des commandes.
En effet, l’application doit garder un historique sur l’avancement de l’état de la
commande. Elle doit assurer un système de gestion de téléchargement des
maquettes.
Une fois la commande réalisée, une notification par mail sera envoyée au client.
L’application permet aussi d’offrir un système d’échange question/réponse entre le
client et l’administrateur.
Ce projet offre également la possibilité de reproduire les fonctionnalités de site
principal (appelé Master) en d’autres sites déclinés (appelé Déclinaison), en d’autres
termes, créer d’autres sites clones qui partagent les mêmes fonctionnalités que le site
master, mais avec du contenu et design différents.
Le but principal étant d’avoir plusieurs sites et de se faire une place parmi les autres
sites qui offrent cette alternative de vente de prestation HTML.
Pour des raisons évidentes de concurrence, notre site se devait d’être parfait en terme
de compatibilité navigateur. De la même manière, nous avons ajouté une dimension

SEO (Search Engine Optimazation – Référencement Naturel dans les moteurs de
recherche), afin de faciliter l’indexation des pages.
En résumé, SEO est un ensemble de techniques visant à favoriser la compréhension
de la thématique et du contenu de site par les moteurs de recherche. L’objectif de ce
procédé est d’orienter le positionnement de site dans les résultats de recherche des
moteurs sur des mots-clés correspondant aux thèmes principaux du site.
HTMLSHOP offre un avantage, un contenu est dynamique qui rend la mise à jour
plus aisée ainsi que le fait qu’un site soit mis à jour à chaque fois, et donc facilité
son apport régulier de contenu, chose extrêmement apprécie des moteurs de
recherche et particulièrement de Google.
Cela engendre une plus grande visibilité et donc dans la logique de E commerce,
plus de vente.
II. Conduite du projet HTMLSHOP
Avant le début effectif du travail sur notre projet HTMLSHOP, les premières
décisions qu’il fallait prendre étaient : quelle méthodologie de gestion de projet
choisir ? Quelle méthode de conduite de projet ? Qui fait quoi ? …
D’abord, pour le choix de méthodologie de travail, puisque notre projet est un projet
web et que tous les projets au sein d’Agency étaient gérés en suivant la méthode
agile, la méthode qui vise à réduire le cycle de vie du logiciel en développant une
version minimale, puis en intégrant les fonctionnalités par un processus itératif basé
sur une écoute client et des tests tout au long du cycle de développement. Grâce aux
méthodes agiles, le client est pilote à part entière de son projet et obtient très vite une
première mise en production de son logiciel. Ainsi, il est possible d'associer les
utilisateurs dès le début du projet.
Nous avons décidé d’opter pour un processus qui tiens en compte de nos contraintes
et qui suit les consignes de l’école agile, après une étude des choix possibles et une
discussion au sein de l’équipe, nous avons choisi d’aller avec la méthode XP, l’une
des méthodes agiles les plus utilisées actuellement, cette méthode définit un certain
nombre de bonnes pratiques permettant de développer un logiciel dans des conditions
optimales en plaçant le client au cœur du processus de développement, en relation
étroite avec le client.

L'eXtreme Programming est notamment basé sur les concepts suivants :
Les équipes de développement travaillent directement avec le client sur des
cycles très courts d'une à deux semaines maximum,
Les livraisons de versions du logiciel interviennent très tôt et à une fréquence
élevée pour maximiser l'impact des retours utilisateurs,
L'équipe de développement travaille en collaboration totale sur la base de
binômes,
Le code est testé et nettoyé tout au long du processus de développement,
Des indicateurs permettent de mesure l'avancement du projet afin de
permettre de mettre à jour le plan de développement.
Figure 2 : Méthodologie agile
Dû au fait que la méthode XP ne couvre pas tout le cycle de développement,
notamment en ce qui concerne la gestion de projet, nous avons opté pour l’utilisation
d’une partie de la méthodologie UP en parallèle avec l’utilisation de la méthode XP.

Un autre point important dans notre projet HTMLSHOP est la conduite du projet, en
fait notre équipe est constituée de cinq membres (tous stagiaires), nous avons
travaillé ensemble dans toutes les phases du projet, parmi les points cités dans notre
sujet de stage était que chaque deux semaines, un membre de l’équipe projet doit
prendre en charge la responsabilité de gestion de projet, en établissant le planning
des tâches, affectation des rôles et tâches aux membres de l’équipe, coordination
avec notre encadrant technique à Oujda et avec l’encadrent fonctionnel à Paris, cela
nous a permis d’apprendre comment gérer un projet et comment communiquer avec
l’ensemble des intervenants dans le projet.
Conclusion
Le contexte de notre projet, l’adoption de la méthode XP et le processus agile qui
nous a permis d’aboutir à la satisfaction du client tout au long du projet et après la
livraison finale, tous ces éléments ont favorisé nos chances pour aboutir à la réussite
du projet, dans le chapitre suivant, nous allons présenter l’étude fonctionnelle et
conceptuelle ainsi que l’environnement technique de notre projet HTMLSHOP.

Partie II: Etude fonctionnelle et conceptuelle et
environnement technique du projet HTMLSHOP
Chapitre 1 : Etude fonctionnelle et conceptuelle du
HTMLSHOP
Chapitre 2 : Environnement de développement, Outils et
technologies utilisées dans HTMLSHOP

Chapitre 1 : Etude fonctionnelle et conceptuelle du
projet HTMLSHOP
I. Etude fonctionnelle
II.Conception et modélisation

Introduction
Le présent chapitre décrit l’étude fonctionnelle et conceptuelle réalisée pour
HTMLSHOP. Nous commençons par exposer l’étude fonctionnelle par une étude
détaillée sur des projets similaires afin de dégager les fonctionnalités assurées, les
modules utilisés, les modules non utilisés et les configurations particulières de
l’application. Ensuite nous abordons la conception du système tout en spécifiant les
différents diagrammes réalisés.
I. Etude fonctionnelle
1. Etude de l’existant
Au sein du pôle Agency, deux projets existent déjà sont similaires au notre. Ces
projets (freelance et MyHTMLShop) qui sont des sites de e-commerce et dont
l’objectif est de fournir un ensemble de prestations informatiques destinées aux
entreprises, sont réalisés sous la technologie Symfony. Nous avons effectué une
étude sur ces deux projets, afin de dégager les fonctionnalités assurées, les modules
utilisés, les modules non utilisés et les configurations particulières de l’application.
Cette étude nous a facilité la tâche afin de mieux comprendre ce qui existe. Une autre
étude des différentes données recueillies, lors des réunions avec le directeur et le chef
de projet nous a permis de mieux appréhender les nouvelles fonctionnalités. Les
principales remarques relevées après notre analyse sont :
• Contenu statique des deux sites,
• Difficulté de la mise à jour,
• Nécessité d’avoir quelques notions de base en HTML,
• Paiement en ligne non traité,
• Absence de certaines fonctionnalités (Demande d’information,
Suggestion à un ami),
• Historique de la commande non traitée,
• Absence de la gestion des questions/réponses sur les commandes,
• Le traitement est un peu lourd (manque d’utilisation des
bibliothèques).

Pour accomplir ces points et satisfaire les nouvelles fonctionnalités, HTMLSHOP
est la solution optimale. Il s’agit d’un site où tous les modules non assurés
auparavant ont été traités. En effet HTMLSHOP est une plateforme de vente de
prestations HTML de qualité sous différents supports technologiques tout en
ajoutant une dimension SEO. Il permet aussi que chaque site réalisé soit facilement
décliné, de telle sorte qu’un simple administrateur puisse générer des sites déclinés
basés sur le site principal.
2. Spécifications fonctionnelles
Dans cette section, nous décrivons les différents besoins fonctionnels du système, en
nous basant sur l’analyse de l’existant (projets similaires) et les différentes réunions
effectuées.
Notre projet nécessite l’intervention, à la fois, du client et de l’administrateur, mais
chacun avec des actions bien précises à effectuer et des règles de gestion spécifique.
Ce qui impose la création de deux applications indépendantes :
Frontend (côté client),
Backend (côté administration).
Les deux applications doivent contenir les modules suivants :
Module authentification,
Module client,
Module commande,
Module ticket,
Module gestion de contenu,
Module générateur de sites.
2.1. Partie Frontend
2.1.1 Module commande
Ce module propose des fonctionnalités permettant à un client de
- Passer des commandes,
- Lister ces commandes.
Pour passer une commande, le client doit télécharger des pages HTML (maquettes
statiques), dans un fichier d’archive. D’autres informations sont saisies par le client

comme le nombre de gabarits, nombre de pages, la technologie souhaitée. De plus ils
existent des informations qui sont facultatives comme par exemple l’accessibilité,
compatibilité entre les navigateurs, largeur de son site (fixé ou flexible), etc. qui
peuvent être choisies par le client. Un prix se calcule automatiquement sur ce qui a
été choisi ou saisi. Si tout ce qui a été saisi par le client est bien respecté, un
récapitulatif de la commande est affichée, ce dernier peut être imprimé et envoyé
avec un chèque. Le client a toujours la possibilité de modifier sa commande, sinon la
confirmer.
Il peut arriver qu’un client se connecte à son espace pour lister ces commandes, ces
dernières seront affichées selon l’ordre de création. Afin de suivre la situation de sa
commande, cette dernière peut avoir un des quatre statuts suivants :
- En cours de qualification,
- En cours de réalisation,
- Réalisée,
- Livrée.
2.1.2 Module ticket
Ce module assure la gestion des questions/réponses posées pour chaque commande.
Un client qui a des questions sur une commande précise, a la possibilité de créer un
ticket. Il renseigne le sujet, le corps de la question et si par exemple sa question
nécessite plus de détails, il a la possibilité de télécharger un fichier. Comme le client
peut créer des tickets il peut aussi les lister, là où il peut suivre la situation par un
statut affiché. Ce module permet aussi au client de voir le détail du ticket choisi. Il
peut répondre à des questions posées par l’administrateur. Pour chaque opération
effectuée par le client qu’elle soit une création ou bien une réponse, une notification
sera envoyée à l’administrateur.
2.1.3 Module contact
Ce module permet aux visiteurs de sites de renseigner leurs informations afin d’être
rappelés (en laissant leur numéro de téléphone directement sur le site). Ainsi, le
visiteur qui a des propositions ou qui cherche d’autres informations, a la possibilité

de les demander auprès de l’administrateur. Il peut arriver qu’un internaute ne soit
pas intéressé par le service offert par le site, dans ce cas il peut le suggérer à un ami.
2.1.4 Module authentification
Pour permettre l’accès aux fonctionnalités sécurisées du site dans l’espace
d’administration ainsi que le passage de commandes et l’accès à l’espace personnel
du client dans le cas du Frontend, ce module doit permettre une gestion complète de
la problématique d’authentification et sécurisation de la plateforme, ce module doit
prendre en compte tous les types d’utilisateurs qui sont susceptibles d’interagir avec
l’application et qui sont :
Internaute : visiteur n’ayant pas encore un compte sur le site,
Client : Utilisateur ayant un compte : Il peut passer une commande, consulter
les commandes qu’il a effectuées, poster ou consulter un ticket et modifier ses
informations personnelles,
Administrateur : Il peut gérer les clients et les commandes, répondre aux
questions posées par les clients, gérer le contenu ou gérer les sites déclinés.
2.1.5 Module client
Ce module doit permettre aux internautes de créer leurs comptes, afin d’accéder aux
fonctionnalités sécurisés du site (passage de commande, espaces personnel, etc.),
dans la partie BO ce module permet la gestion des clients (mise à jour, suppression et
ajout d’un compte client).
2.2 Partie Backend
2.2.1 Module ticket
Ce module a le même fonctionnement que le côté Frontend. Si l’administrateur a un
souci sur une commande non compréhensible, il peut lui aussi créer un ticket et suit
le même processus que le client.

2.2.2 Module commande
Ce module permet à l’administrateur de gérer les commandes effectuées par les
clients. Il lui permet de consulter une liste avec les commandes de tous les clients, A
travers cette liste il peut modifier le statut d’une commande si elle est traitée, de plus
il peut afficher le détail d’une commande précise où il peut voir un récapitulatif sur
les informations du client, récapitulatif sur la commande et un historique sur le statut
de la commande avec les dates de modifications. A chaque modification de statut un
mail est envoyé au client (celui qui a effectué la commande).
2.2.3 Module gestion des clients
Ce module doit assurer tout ce qui est gestion des clients, il doit permettre de :
- Lister les clients,
- Créer un compte client,
- Editer un compte client,
- Supprimer un client,
- Rechercher un client.
2.2.4 Module de gestion de contenu
Ce module doit permettre à l’équipe d’administration du site de gérer le contenu du
site principal ainsi que des sites déclinés, la gestion de contenu doit inclure aussi la
gestion des pages, des sous pages et des blocs, l’administrateur doit pouvoir ajouter,
modifier et supprimer n’importe quelle brique de contenu dans le site, l’ajout de
contenu doit supporter l’insertion directe du code HTML pour permettre une
présentation riche.
2.2.5 Module gestion des sites et thèmes
Permettre à un administrateur du site, qui n’est pas nécessairement un développeur
de reproduire les fonctionnalités du site principale (site master) dans d’autre site
déclinés, l’administrateur peut alors créer d’autres site clones qui partagent les
mêmes fonctionnalités que le site master, mais qui peuvent avoir un design ou du
contenu différent, l’ensemble des sites doivent être gérés à partir de ce module, la

gestion des sites inclus : modification des paramètres du site tel que le nom de
domaine par exemple, la définition d’un design particulier à un site quelconque…etc.
II. Conception et modélisation
1. Modélisation UML
1.1. Diagrammes de cas d’utilisation
Figure 3 : Cas d’utilisation de gestion de la commande et ticket
Le but de ce diagramme est de décrire comment un client peut passer une
commande, créer ou bien répondre à un ticket pour une commande précise. En effet
après une authentification du client, ce dernier passe une commande, un récapitulatif
est affiché, il peut confirmer la commande sinon la modifier.
Le client peut lister toutes ces commandes, à partir de la liste affichée il peut créer un
ticket pour une commande précise. Le client peut afficher le détail d’un ticket soit
pour une consultation soit, pour répondre à une question posée.

Figure 4 : Cas d’utilisation de gestion de contenu
Ce diagramme décrit les fonctionnalités offertes à l’administrateur pour la gestion de
contenu, l’administrateur peut créer, modifier ou supprimer une page, une sous page
ou le contenu du site. En effet, après l’authentification l’administrateur peut soit
visualiser, modifier ou supprimer une page / contenu, soit créer une page / contenu.
Dans le cas de modification ou d’ajout, l’administrateur peut soit modifier soit
ajouter du contenu à travers un éditeur de texte évolué.
Voir l’annexe D pour les autres diagrammes de cas d’utilisation.

1.2. Diagrammes de séquence
Figure 5 : Diagramme de séquence pour la gestion de la commande
Ce diagramme de séquence décrit le processus d’une commande. Après
l’authentification du client, ce dernier passe une commande. Un récapitulatif est
affiché. Le client peut modifier sa commande, si c’est le cas un récapitulatif est
affiché de nouveau. Le client peut répéter ce mécanisme pas mal de fois. Si le client
est satisfait par sa commande, il confirme. Juste après un mail est envoyé à
l’administrateur et au client.
Voir l’annexe D pour les autres diagrammes de séquence.

1.3. Diagrammes de classes
Ci-dessous, le diagramme de classes participantes présentant la gestion de contenu, la
classe Page de type Entité regroupe les propriétés et les méthodes d’accès aux
données, au milieu ; la classe CtrPage de type Contrôle, cette classe regroupe les
principales méthodes de traitement et de communication entre la couche présentation
et la couche d’accès aux données, à gauche, la classe GestionPage de type Dialogue,
cette classe regroupe toutes les propriétés qui vont apparaitre dans la couche
présentation sous forme de champs de saisies dans les formulaires
Figure 6 : Diagramme de classes (Contenu)
Voir l’annexe D pour voir les autres diagrammes de classes.

2. Conception de la base de données
2.1. Modèle logique de données (MLD)
Après une conception approfondie en se basant sur les spécifications fonctionnelles,
nous avons entamé l’étape de conception de base de données, afin de déduire les
tables et les relations, en essayant de couvrir toutes les fonctionnalités demandées, à
la fin nous sommes sortis avec le MLD ci-dessous.
Figure 7 : Modèle logique de données
Conclusion
A travers ce chapitre, nous avons présenté d’abord, les besoins et les exigences
fonctionnelles du site HTMLSHOP. Nous avons enchaîné ensuite par une étude
conceptuelle en nous basant sur les diagrammes nécessaires du formalisme UML.
Dans le chapitre qui suit nous allons présenter l’environnement et les technologies
utilisées.

Chapitre 2 : Environnement de développement,
Outils et technologies utilisées dans le projet
HTMLSHOP
I. Environnement de développement et outils utilisés
II.Technologies utilisées

Introduction
Le présent chapitre décrit l’ensemble des outils et les technologies que nous avons
utilisées tout au long de notre stage, nous allons commencer dans un premier temps
par la présentation de la procédure de développement que nous avons suivi, ainsi que
l’environnement de développement autour de SVN et la plateforme de
développement LAMP ensuite nous allons passer à la présentation des différents
outils et technologies que nous avons utilisé dans notre projet HTMLSHOP.
I. Environnement de développement et outils utilisés
1. Environnement de développement autour de SVN
Subversion (SVN)
SVN est un système de gestion de versions client/serveur conçu pour remplacer
CVS, ce système permet aux membres d’une équipe de développeurs de modifier le
code du projet quasiment en même temps. SVN permet de gérer les accès
concurrents, c'est-à-dire qu’il est capable de détecter les conflits de version lorsque
deux personnes travaillent simultanément sur le même fichier. Le fonctionnement
d’SVN s’appuie sur une base centralisée appelée « repository » hébergée sur un
serveur et contenant l’historique de l’ensemble des versions successives de chaque
fichier. Le repository stocke les différences entre les versions successives, les dates
de mise à jour, le nom de l’auteur de la mise à jour et un commentaire éventuel, ce
qui permet un réel suivi des modifications.
Checkout
À l’aide d’un client SVN, chaque utilisateur souhaitant travailler sur le projet (pour
modifier des fichiers ou simplement pour voir la dernière version des fichiers dans la
base) récupère une copie de travail grâce à une opération appelée « Checkout ».
Update
S’il arrive qu’un utilisateur tente de transmettre ses modifications alors qu’un autre
utilisateur a lui-même modifié le même fichier précédemment, SVN va détecter un
conflit. Si les modifications portent sur des parties différentes du fichier, le système

SVN peut proposer une fusion des modifications, grâce à une opération appelée diff.
Sinon SVN va demander à l’utilisateur de fusionner manuellement les modifications,
il est donc nécessaire, avant chaque modification de fichier, de mettre à jour sa copie
de travail grâce à une opération appelée « update », afin de limiter les risques de
conflits.
Commit
Lorsque l’utilisateur a terminé de modifier les fichiers, il peut transmettre les
modifications à la base, cette opération est appelée « Commit ».
Figure 8 : Fonctionnement de SVN
2. La plateforme open source LAMP
LAMP est un acronyme désignant un ensemble de logiciels libres qui constitue une
plateforme de développement web. L'acronyme original se réfère aux logiciels
suivants :
Linux : Le système d'exploitation,
Apache : Le serveur Web,
MySQL : Le serveur de base de données,
PHP : Le langage de programmation côté serveur.
Les rôles de ces quatre composants sont les suivants :

Linux assure l'attribution des ressources aux autres composants,
Apache est le serveur web frontal, il répond directement aux requêtes du
client web,
MySQL est un système de gestion de bases de données. Il permet de stocker
et d'organiser des données,
le langage de script PHP permet la génération de pages web dynamiques et la
communication avec le serveur MySQL.
Tous ces composants peuvent être situés :
• Sur une seule machine,
• Sur deux machines, généralement Apache et le langage de script d'un côté et
MySQL de l'autre, c’est le cas que nous avons opté pour notre projet
HTMLSHOP et c’est d’ailleurs le cas pour l’environnement de
développement et de recette à Oujda,
• Sur de nombreuses machines pour assurer la haute disponibilité par la
répartition de charge.
LAMP est la plateforme de développement choisie par Agency et dû fait que nous
devrions travailler sur des CMS et des Framework définis préalablement et qui sont
réalisés autour de cette plateforme, nous avons directement basé tout notre travail
autour de cette plateforme
3. CentOS et VMWARE Player
Le système d’exploitation que nous avons utilisé pour le développement est CentOS,
qui est une distribution Linux dont tous ses paquets sont compilés à partir des
sources de la distribution Linux Red Hat, la distribution Linux orientée entreprise et
éditée par la société Red Hat, elle est donc quasiment identique et compatible, depuis
le début de notre stage ; nous avons utilisé une version de CentOS précompilée
préalablement par SQLI Paris en tenant en compte toutes les contraintes et les
paramètres imposés dans le cadre de développement web et plus précisément le
développement sous PHP.

Nous avons utilisé le système d’exploitation CentOS pour deux raisons :
Développement de projets destinés à un environnement de production Linux,
Améliorer les performances en temps d’exécution du système EZ Publish qui
s’adapte mieux à une plateforme Linux que Windows.
Afin d’utiliser CentOS comme système d’exploitation pour notre environnement de
développement et continuer en même temps à utiliser Windows comme système
d’exploitation principale, nous avons opté pour l’utilisation de VMPLAYER qui est
un logiciel de virtualisation de post de travail qui permet de simuler n’importe quelle
machine virtuelle
La virtualisation de système d'exploitation a plusieurs intérêts :
Utiliser un autre système d'exploitation sans redémarrer son ordinateur,
Tester des systèmes d'exploitation sans devoir repartitionner ses disques durs,
Tester des logiciels dans des environnements contrôlés, isolés du système hôte.
.
4. Eclipse PDT
Comme environnement de développement intégré, nous avons utilisé Eclipse PDT
2.0. Eclipse est un environnement de développement intégré libre et extensible,
universel et polyvalent, permettant de créer des projets de développements mettant
en œuvre n’importe quel langage de programmation.
Eclipse PHP Développent Tools (PDT) est destiné au développement d’application
web basées sur le langage PHP côté serveur. C’est une extension permettant de se
doter des fonctionnalités nécessaires au développement PHP (débogage,
colorisation, syntaxique, auto complétion, ..).
5. Putty et WinSCP
5.1 Putty
Putty est un client SSH, Telnet, Serial Link, rlogin et TCP. Il était à l’origine
disponible uniquement pour Windows, mais il est présent porté sur diverses plates-
formes Unix, il permet de se connecter à un serveur distant à partir d’un ordinateur
connecté à un réseau.

5.2 WinSCP
WinSCP est un client SFTP graphique pour Windows. Il utilise SSH, il est open
source. Le protocole SCP est également supporté. Le but de ce programme est de
permettre la copie sécurisée des fichiers entre un ordinateur local et un ordinateur
distant.
II. Technologies utilisées
1. Le Framework Symfony
Symfony, la première technologie que nous avons choisi pour la réalisation de notre
projet HTMLSHOP, est un Framework MVC libre écrit en PHP 5. En tant que
Framework, il facilite et accélère le développement de sites et d'applications web,
Symfony propose entre autres:
• Une séparation du code en trois couches, selon le modèle MVC, pour une
plus grande maintenabilité et évolutivité,
• Un « templating » simple, basé sur PHP et des jeux de « helpers » qui sont
des fonctions additionnelles pour les gabarits,
• Des performances optimisées et un système de cache pour garantir des temps
de réponse optimums,
• Une gestion des url « parlantes », qui permet de formater l'url d'une page
indépendamment de sa position dans l'arborescence fonctionnelle,
• Un système de configuration en cascade qui utilise de façon extensive le
langage YAML,
• Un générateur de back-office et un démarreur de module,
• Un support de l'internationalisation - symfony est nativement multi-langue,
• Une couche de « mapping » objet-relationnel (ORM) et une couche
d'abstraction de données basée sur l’ORM Doctrine et qui support aussi
Propel,
• Le support de l'AJAX,
• Une architecture extensible, permettant la création et l'utilisation de plugins.

Figure 9 : Architecture MVC du Framework Symfony
2. EZ Publish, le CMS des géants du média et des entreprises
2.1 Présentation EZ Publish
EZ Publish est un CMS (Content Management System) très flexible et configurable.
Il peut être utilisé pour réaliser n’importe quel site, allant d’un site personnel au site
d’une multinationale avec gestion des accès Multiutilisateurs, achats en ligne, forum
de discussion et d’autres fonctionnalités avancées. Basé sur des technologies et
principes Open Source, il peut aisément être configuré afin d’interagir avec d’autres
solutions, EZ Publish a été créé par l’entreprise norvégienne EZ Systems.
Parmi les fonctionnalités clés du CMS EZ Publish :
Accès décentralisé,
Multilinguisme,
Moteur de recherche intégré,
E-commerce,
Possibilité d’extension,
Import/export,
Système de versionning intégré,
Système de workflow,
Système de gestion des accès,
Système de notification.

2.2 Fonctionnement général d’EZ Publish
Contenu et design
Avec EZ Publish, le contenu et la présentation sont séparés. Cette séparation apporte
les avantages suivants :
Les éditeurs de contenu et les designers peuvent travailler sans conflits,
Le contenu peut facilement être publié dans différents formats,
Le changement de design peut être réalisé par de simples modifications.
EZ Publish et la notion d’objets
Le principe d’EZ Publish est la gestion de contenu sous forme d’objets. Dans EZ
Publish tout est un objet, du texte en passant par un sujet de forum, un fichier
téléchargé, un utilisateur, un workflow…
De plus, chaque objet est créable et modifiable à travers une interface
d’administration. On a donc une véritable séparation de la forme et du contenu. Ainsi
chaque objet peut être un parent ou un fils, être situé à plusieurs endroits, copié,
dupliqué et déplacé.
EZ Publish et les extensions
Une extension EZ Publish est avant tout un concept qui permet l’ajout de
fonctionnalités au système de base EZ Publish sans toucher le noyau d’une
quelconque manière.
EZ Publish et les templates
Le CMS EZ Publish possède son propre langage de template, ce langage offre un
ensemble de mécanisme pour résoudre les questions de programmation les plus
courantes, comme par exemple les conditions de contrôle, les boucles, etc.
3. Magento, le leader des solutions e-commerce
3.1 Présentation de Magento
Magento est une nouvelle solution e-Commerce Open Source qui offre une
flexibilité. Magento a été conçu en partant de l’idée que chaque projet e-commerce
est unique en son genre, puisqu’il n’y a pas deux commerces identiques.

L’architecture modulaire de Magento redonne le contrôle aux commerçants et
n’impose aucune contrainte aux processus métiers ou aux flux d’entreprise.
Magento est développé par Varien, une entreprise californienne spécialisée dans le
développement et le consulting web, sur les bases du Framework Zend
Parmi les principales fonctionnalités de Magento :
Solution clé en main pour e-marchand,
Processus de commande sur une seule page,
Outils de marketing avancés (promotion, comparateur de produit),
Fonctionnalités d’optimisation pour les moteurs de recherche,
API : permettant l’intégration avec des technologies tierces.
3.2 Fonctionnement général de Magento
Le principe de séparation des métiers
Tout site web digne de ce nom, pas uniquement les sites e-commerce, a adoptés les
recommandations du W3C concernant la séparation claire entre le code fonctionnel
et le design. Magento utilise ce concept avec réussite, notamment en proposant une
séparation très claire de design, du XHTML et du code PHP, au moyen entre autres
de templates.
Multi-boutiques, multi-sites, multi-langues
Les notions de thèmes, layout et template sont les concepts majeurs qui constituent
le design d’un site sous Magento. Un thème est un ensemble de fichiers applicables
à une boutique donnée.
Les layouts définissent la structure du site en termes de rendu visuel : position des
différents blocs
Les templates sont l’implémentation, sous forme de XHTML/PHP de la logique de
navigation sur le site.
4. Bibliothèque JQuery
JQuery est une bibliothèque JavaScript libre qui porte sur l'interaction entre
JavaScript (comprenant AJAX) et HTML, et a pour but de simplifier des commandes

communes de JavaScript. Le Framework contient notamment les fonctionnalités
suivantes :
Parcours et modification de l’arborescence DOM.
Événements
Effets et animations
Manipulations des feuilles de style en cascade (ajout/suppression des classes,
d'attributs…)
AJAX
Plugins
Utilitaires (version du navigateur…).
Nous avons beaucoup utilisé la bibliothèque jQuery dans notre projet : dans les
calcules et les traitements côté client dans la partie commande par exemple ainsi que
pour les animations et la validation des formulaires coté client.
Conclusion
Ce chapitre a été consacré à la présentation aux différentes technologies et outils
auxquels nous avons eu recours lors de la réalisation de notre projet. Dans le
prochain chapitre, nous allons entamer la partie de réalisation du projet ainsi que les
chapitres concernant la participation dans le projet ONISEP.

Partie III: Réalisation du projet HTMLSHOP et
participation au projet ONISEP
Chapitre 1 : Réalisation et mise en œuvre du projet
HTMLSHOP
Chapitre 2 : Participation au développement de projet
ONISEP

Chapitre 1 : Réalisation et mise en œuvre du projet
HTMLSHOP
I. Réalisation de la maquette statique et prise en
compte de la dimension SEO.
II. Arborescence du projet HTMLSHOP
III. Intégration de la maquette statique
IV. Les principaux modules de la solution
HTMLSHOP
V. La réalisation du générateur de sites
VI. Recette et TMA

Introduction
Le présent chapitre vise à décrire de façon détaillée, la phase de mise en œuvre du
projet HTMLSHOP, présente dans un premier temps, la réalisation des maquettes
statiques, pour entamer ensuite la réalisation et la mise en œuvre de l’application.
VII. Réalisation de la maquette statique et prise en compte
de la dimension SEO
Juste après la conception, nous avons entamé la réalisation de la maquette statique,
parmi les contraintes du projet : c’est que la maquette doit être utilisée dans tous les
sites ; et en conséquence sous différentes technologies, c’est pour cela que nous
avons considéré cette partie comme essentiel, parmi les contraintes qu’il fallait
prendre en compte c’est : la prise en compte de la dimension SEO : code HTML et
CSS valide, respect des standards, code HTML facilement lisible par les «
Crawlers » des moteurs de recherche, aussi une autre contrainte était la prise en
compte des consignes Marketing et commerciale : donner une première bonne
impression avec design qui donne envie de naviguer et découvrir le service.
Le travail a été entièrement réalisé autour de SVN, dans un premier temps, un
membre de l’équipe a mise en place le dossier initial du projet contenant la structure
de base : dossier CSS, JS, Images,… ainsi que les fichiers HTML, CSS et JavaScript
de base tel que main.css pour le CSS principale du site, main.js et reset.css : le ficher
qui garantit la présentation identique des pages dans tous les navigateurs, après et
sous la direction du chef de projet, nous avons réparti les tâches entre nous de sorte
que chaque membre de l’équipe travaille sur une partie un peu isolée : un membre
travaille sur le header et le Footer, un autre sur les blocs, etc., la réalisation de la
maquette statique nous a posé plusieurs problèmes tels que les conflits dans les
fichiers après l’ajout ou la récupération par SVN ainsi que le manque de maquette
graphique (PSD).
Mais nous avons palier à tous ces problèmes en progressant dans la réalisation, le
résultat final était une maquette statique professionnelle, identique dans tous les
navigateurs et qui respecte les standards du web et les consignes SEO.
Voir l’annexe E figure E.8 pour une capture d’écran de la page d’accueil.

SEO
L'optimisation pour les moteurs de recherche (en anglais, Search Engine
Optimization : SEO) est un ensemble de techniques visant à favoriser la
compréhension de la thématique et du contenu d'une ou de l'ensemble des pages d'un
site Web par les moteurs de recherche. Ces techniques visent donc à apporter un
maximum d'informations concernant le contenu d'une page web aux robots
d'indexation des moteurs de recherche.
L'objectif de ce procédé est d'orienter le positionnement d'une page Web dans les
résultats de recherche des moteurs sur des mots-clés correspondant aux thèmes
principaux du site. On considère généralement que le positionnement d'un site est
bon lorsqu'il est positionné (classé) dans l'une des dix premières réponses d'une
recherche sur des mots-clés correspondant précisément à sa thématique.
L'optimisation pour les moteurs de recherche (SEO) représente un véritable enjeu
car, il permet d'augmenter de façon significative le nombre de visiteurs d'un site.
Apparaître sur Google en première page pour une requête forte (exemple « mp3 »),
assure un gros trafic en volume. En effet, environ 2 tiers des utilisateurs cliquent sur
un des résultats de la première page et la quasi-totalité ne regarde pas au-delà de la
troisième.
VIII.Arborescence du projet HTMLSHOP
1. Arborescence du projet HTMLSHOP sous EZ Publish
L’utilisation de CMS EZ Publish a permis de produire un code bien organisé et
structuré, grâce à l’architecture qu’il respecte : chaque type de composant est placé
dans un répertoire particulier, ce qui fait au final un projet bien ordonné.
Dès l’installation d’EZ Publish, ce dernier génère une arborescence standard qu’il
propose.

Figure 10 : Arborescence de HTMLSHOP
Pour mieux comprendre cette arborescence, on va détailler les deux répertoires que
nous avons plus utilisés.
a- extension : comporte les différents extensions d’EZ Publish, que ce soit les
extensions qui s’installent par défaut (ezflow, ezfind, etc.) ou bien les
extensions qu’on peut les installer (ezpaypal, ezjscore, etc.). EZ Publish
fonctionne avec ce système des extensions, donc si on veut ajouter nos
propres fonctionnalités, on doit passer par ce système. D’ailleurs c’est le cas
pour l’extension htmlshop.
- Répertoire classes/ : contient les différentes classes qui assurent le
fonctionnement d’EZ Publish.
- Répertoire cronjobs/ : contient les scripts qui permettent d’exécuter
les tâches planifiées. Nous avons créé à l’intérieur de ce dossier un
script pour la génération des sites déclinés.
- Répertoire design/ : contient le design de notre extension. Ce point
sera détaillé par la suite.
- Répertoire module/ : contient les différents modules que nous avons
créé. On cite par exemple le module ‘sitemaster’ qui permet à
l’administrateur de télécharger le design et la structure de pages pour
un nouveau site.

- Répertoire settings/ : contient les différents fichiers de
configurations de l’extension. Ces fichiers sont la surcharge des
fichiers qu’on veut utiliser.
b- settings : comporte les différents fichiers de configurations.
- Répertoire override/ : contient les fichiers de configurations
(.ini.append.php), les derniers consultés.
- Répertoire siteaccess/ : il s’agit d’un répertoire qui ne contient que
des fichiers de configuration (.ini.append.php). Il suffit de regarder la
liste des sous répertoires de siteaccess pour savoir exactement quels
siteaccess sont présents sur le système. Parmi ces siteaccess on trouve
les deux sites que nous avons créés lors de l’installation (backend,
frontend).
Les siteaccesses définissent deux choses :
- la façon dont EZ Publish reconnaît l’interface de site à laquelle on
accède
- les différents paramètres de configuration qui remplacent ceux par
défaut
Pour bien expliquer le système de fichiers de configurations des extensions,
ainsi comment EZ Publish parcoure ces fichiers. Voici un schéma explicatif :
Figure 11: Comment EZ Publish parcourt les fichiers de configurations
Fichier de configuration par défaut
Fichier de configuration de l’extension
Fichier de configuration du dossier Settings
Fichier de configuration du dossier Override
Génère un fichier cache

2. Arborescence sous Symfony
Parmi les avantages de l’utilisation d’un Framework c’est qu’il impose une structure
particulière aux projets, ce qui facilite beaucoup le travail en équipe et accélère
considérablement la prise en main des projets,…etc. Symfony nous a imposé une
structure claire et respectant le modèle MVC, chaque membre de l’équipe savait
instantanément l’emplacement des fichiers à modifier, ce qui a diminué le flux de
communication toute en augmentant la collaboration et la synchronisation du travail
entre les membres de l’équipe.
Figure 12: L’arborescence du projet HTMLSHOP dans Symfony
Description des répertoires :
Apps : accueille toutes les applications du projet
Cache : les fichiers mis en cache par le Framework
Config : les fichiers de configuration du projet
Lib : les bibliothèques et les classes du projet
Log : les fichiers log du Framework
Plugins : les plugins installés
Test : les fichiers de test unitaire et fonctionnel
Web : le répertoire racine Web contenant les fichiers CSS, JavaScript, images,…etc.
De même, chaque application de notre projet (Frontend et Backend) suit la structure
suivante :
Config : les fichiers de configuration de l'application
Lib : les bibliothèques et les classes de l'application
Modules : le code de l'application (MVC)

Templates : les fichiers Template globaux
Cette structuration du projet nous a facilité le travail toute en augmentant notre
productivité.
IX. Intégration de la maquette statique
1. Intégration sous Symfony
Le Framework Symfony adopte le paradigme MVC ainsi que d’autres design
patterns et bonnes pratiques reliés surtout à la présentation, le Framework nous a
facilité la tâche d’intégration de la maquette statique, la séparation de la présentation
au reste du code de l’application et la répartition de certaine partie de la maquette sur
plusieurs fichiers nous a permis de garder notre maquette aussi maintenable qu’avant
l’intégration. Grâce au modèle décorateur, Symfony résout le problème de
duplication de code de la maquette : le code du header et Footer par exemple de la
manière suivante : une page est décorée après que le contenu soit mis en place grâce
à un Template global, appelé Layout.
Figure 13: Décoration des pages par le Layout dans Symfony
Au moment de l’intégration de la maquette dans Symfony et même avant d’écrire
une seule ligne du code, le Framework nous a permis de dynamiser certaines parties
des pages de la maquette, tel que le titre des pages par exemple et cela en utilisant le
mécanisme des SLOT de Symfony, ce mécanisme est utile quand une zone du
Layout dépend de la page à afficher, en utilisant cette fonctionnalité, nous avons pu
avoir par exemple un titre différent dans chaque page sans avoir besoin à dupliquer le
code.

Figure 14: Mécanisme des SLOT dans Symfony
2. Intégration sous EZ Publish
L’une des clés lors du développement d’un site qui doit être facilement gérée et
maintenue, est de séparer clairement le contenu du design. La séparation du contenu
et du design apporte des avantages par exemple :
• le contenu peut facilement être publié dans différents formats
• les changements du design peuvent être réalisés au travers de simples
modifications.
EZ Publish respecte cette séparation, ce qui nous a facilité la tâche d’intégrer les
maquettes statiques.
EZ Publish a une structure spécifique pour organiser les pages du site.
Toutes les pages sont affichées en utilisant un Template de mise en forme global
‘pagelayout.tpl’ qui rassemble toutes les parties partagées du site (header.tpl,
footer.tpl, menu_droite.tpl, etc.).
Figure 15: Arborescence de design de l’extension HTMLSHOP
Pour le projet HTMLSHOP le design de site est organisé selon l’arborescence
suivante :
extension/htmlshop/design/htmlshop

- images : contenant les images de site.
- javascript : contenant les fichiers java scripts de l’application.
- stylesheets : contenant les fichiers CSS de site
- templates : ce dossier contient la structure du Template global
‘pagelayout.tpl’ et le fichier ‘page_head.tpl’ qui contient les
inclusions nécessaires pour le style et les scripts.
C’est dans le fichier ‘pagelayout.tpl’ qu’on met la structure de notre page (les
différentes structures de la page.).
Après avoir structuré le site, l’étape qui suit consiste à dynamiser le contenu en
utilisant le langage de Template propre à EZ Publish. A ce stade on va dynamiser
dans les templates statiques créés les données stockées en dur pour retourner les
données réelles à partir de l’arborescence du back_office.
X. Les principaux modules de la solution HTMLSHOP
1. Module Client
Ce module assure une gestion complète des clients que ce soit côté client ou côté
administration.
Pour mettre en place ce module, nous avons effectué une étude détaillée sur les
différents plugins existent sous la technologie Symfony.
Cette étude nous a permis de choisir le plugin « sfDoctrineGuardPlugin », grâce
aux avantages qu’il offre. IL assure l’authentification et l’autorisation des
utilisateurs et offre des modules comme le module d’authentification, gestion de
l’oubli de mot de passe, création et édition de profil, gestion des groupes, etc.
Figure 16: Plugin sfDoctrineGuardPlugin

Pour l’installation et la configuration, il suffit de suivre la description dans le fichier
‘README’ de plugin.
Afin d’éviter de modifier directement sur les modules de plugin, nous avons
surchargé les modules utilisés dans nos propres applications. (Voir l’annexe E figure
E.8)
Sous la technologie EZ Publish, nous avons utilisé un module qui est natif à EZ
Publish s’appelle ‘user’.
Pour éviter de modifier directement le module, nous avons surchargé les templates
qu’on va utiliser.
Figure 17: Surcharge de module user sous EZ Publish
Pour savoir les templates à surcharger, nous avons utilisé un outil de débogage, afin
de détecter les templates utilisées.
Sous EZ Publish, la gestion des utilisateurs offre plus d’avantages que Symfony
comme par exemple le déplacement d’un client d’un groupe à un autre. Un système
de contrôle d’accès plus performant appelé la gestion des rôles.
2. Module Commande
Ce module est parmi les fonctionnalités principales assurées par HTMLSHOP.
Comme déjà mentionné, nous avons effectué une conception de base du projet
HTMLSHOP et vu que notre projet est réalisé sous différentes technologies, il a fallu
prévoir pour chaque technologie une conception spécifique.

Pour le cas d’EZ Publish, ce CMS travaille avec les classes de contenu. Les
propriétés de ce contenu sont représentées au travers attributs. Dans notre cas par
exemple la classe de contenu Commande contient des attributs comme le nombre de
gabarit, largeur de site, technologie, etc.
Nous avons déclaré notre classe commande avec une option conteneur, cela va
faciliter la gestion des tickets par la suite.
Il est important de comprendre qu’une classe de contenu est juste une définition
d’une structure arbitraire. Donc à chaque fois qu’un client passe une commande, un
objet de contenu est créé dans l’arborescence.
Afin que le client et l’administrateur puissent suivre le changement du statut de la
commande, un système de versions sous EZ Publish permet de faire cela.
L’objet de contenu commande créé est composé d’au moins une version. Chaque
fois qu’on modifie un objet et on sauvegarde les modifications, une version est
sauvée. Cela permet d’avoir plusieurs versions du même contenu.
Pour la gestion de versions, EZ Publish offre cette possibilité de garder une trace
surtout dans la gestion des commandes.
La gestion de commande nécessite pas mal de calculs et cela doit être réalisé en
même temps lorsqu’un client passe une commande. Ceci nous a conduits à utiliser la
technologie JQuery qui a facilité la tâche.
Dans le cas du Framework Symfony, ce dernier fonctionne avec les schémas dont
l’extension est (.yml). Chaque table est représentée par un schéma. Pour assurer la
gestion d’historique, nous avons modifié dans le fichier spécifique à la commande
‘Commande.yml’. Après la génération des tables à partir des schémas, on obtient
deux tables identiques :
Commande et CommandeVersion.
Donc à chaque modification d’un enregistrement dans la table commande, cet
enregistrement est sauvegardé dans la table CommandeVersion. Ce concept nous a
assuré une gestion complète d’historique.
Pour afficher la liste des commandes, nous avons utilisé un composant de la
bibliothèque JQuery qui offre un tableau bien structuré reposant sur la technologie
Ajax
Ce composant permet de faire des recherches sur les colonnes du tableau.

3. Module Paiement
La partie du Paiement est l’une des axes les plus importantes de n’importe quelle
application e-commerce ou de vente de prestation comme notre cas, elle nécessite
une rigueur dans la réalisation et pose des contraintes importantes de sécurité, nous
avons réalisé de cette partie sous Symfony en utilisant le plugin
« sfAtosPaymentPlugin » fourni par la communauté du Framework, nous avons pu
gérer plusieurs méthodes de paiement comme PayPal et le paiement par Carte de
crédit.
Sous eZ Publish, la partie paiement est gérée par le CMS lui-même, elle ne nécessite
qu’un petit effort de configuration, notamment les données bancaires, taxes, etc.
Une capture incluant la liste des méthodes de paiements autorisés est dans l’annexe
D.
4. Module contact
Afin de permettre aux utilisateurs de rester en contact direct avec les responsables
des différents services, l’utilisateur peut, par le biais d’une page de contact, leur
envoyer des messages.
En effet EZ Publish offre la possibilité d’ajouter des formulaires, permettant de
collecter des informations, grâce à certains types d’attributs, à savoir :
Case à cocher, E-mail, Option, Ligne de texte, Bloc de texte, Etc.
Ces types de collecteurs couvrent à peu près tous les types de champs qui peuvent
figurer sur les formulaires HTML.
Comme le veut la coutume d’eZ Publish, une classe de contenu a d’abord été créée
(là notre s’appelle contact).
Pour utiliser un collecteur d’informations, il suffit de rajouter un attribut des types
précités à notre classe et de signaler qu’il s’agit d’un collecteur d’informations.
EZ Publish fournit des fonctions, permettant de manipuler les informations collectées
et de les afficher dans un Template. Ces fonctions aident soit à récupérer le nombre
d’informations collectées, soit de récupérer les informations saisies dans un
collecteur spécifique.

Afin que l’administrateur puisse afficher les informations collectées dans le Back
office, un système est mis en place, un simple clic affiche toutes les informations
collectées. (Voir l’annexe E, figure E.10)
Toujours dans le même contexte, un module qui est natif à EZ Publish permet à un
utilisateur, s’il n’est pas intéressé par le service offert par le site, de le suggérer à un
ami. Pour des besoins fonctionnels, nous avons utilisé ce module. Notre travail à ce
stade était la surcharge de la Template « tipafrind.tpl », afin d’intégrer notre propre
style. Ce même fonctionnement a été mis en place sous la technologie Symfony,
mais cette fois-ci, nous avons développé notre propre module contact. (Voir l’annexe
E, figure E.12).
Dans ce module, on trouve les actions (contrôleur), un dossier lib qui contient la
configuration de différents formulaires et un dossier templates qui contient les
différents templates du module.
L’arborescence du module contact est créée à travers une simple commande.
5. Gestion de contenu
La gestion de contenu est l’une des fonctionnalités les plus utiles dans les
applications web dynamique et les sites e-commerce ou de vente de prestations et
notre projet HTMLSHOP n’échappe pas à la règle.
5.1 Gestion de contenu sous Symfony
Dans un premier lieu, nous avons identifié les parties du site qui doivent être gérées
par un système de gestion de contenu, ces parties sont les pages et leur contenu, le
menu de navigation et les blocs, dû au fait que le Framework Symfony ne permet pas
de gérer le contenu par défaut, nous avons mené une recherche sur les plugins
Symfony qui offrent de telles fonctionnalités, nous avons trouvé deux plugins qui
permettent de faire la gestion de contenu, ces deux plugins sont : Sympal et
Apostrophe, alors nous avons entamé après, une phase d’étude de ces deux solutions,
après cette étude que nous avons mené, il s’est avéré que l’utilisation de ces deux
solutions va nous poser d’autres contraintes concernant la façon dont laquelle le site
doit être réalisé pour le cas de Sympal et va nous poser des problèmes de sécurité et
de stabilité pour le cas d’Apostrophe, puisqu’il est encore en version Beta, alors nous

avons pris la décision de créer notre propre système de gestion de contenu. Pour cela,
nous avons créé le module : gestion de contenu, ce module permet à l’administrateur
d’ajouter et gérer les pages, le contenu, le menu principal ainsi que les blocs, à
travers une interface simple et intuitive situé dans le Backend, l’administrateur peut
consulter et gérer la totalité du contenu du site.
Figure 18: L’insertion du contenu dans le Backend
Dans l’espace d’administration de l’application, l’insertion du contenu riche est
possible grâce à l’utilisation du composant TinyMC qui est porté pour Symfony par
un plugin dédié.
Dans la partie Frontend, le contenu est présenté avec un support de style et une mise
en page évoluée, une capture concernant la présentation du contenu dans le Frontend
est dans l’annexe D.

5.2 Gestion de contenu sous EZ Publish
EZ Publish est un système gestionnaire de contenu (CMS), cela nous a beaucoup
facilité la tâche de gestion de contenu sous EZ Publish puisqu’il offre cette
fonctionnalité. Dans EZ Publish, les éléments d'information sont définis par leur
classe de contenu et leur emplacement dans la hiérarchie de contenu. Le but principal
d'un tel système est de mettre à disposition une solution bien structurée, flexible et
automatisée qui permet à l'information d'être facilement distribuée et mise à jour au
travers de différents canaux de diffusion.
L’utilisation d’EZ Publish nous a permis d’aboutir à une séparation du contenu au
design, cette séparation nous a apporté les avantages suivants :
• Les éditeurs de contenu et les designers peuvent travailler séparément sans
conflits.
• Le contenu peut facilement être publié dans différents formats.
• Le contenu peut facilement être transféré et réutilisé.
• Les changements de design peuvent être réalisés au travers de simples
modifications.
Figure 19: Contenu et design dans EZ Publish
6. Gestion des sites et thèmes
L’une des fonctionnalités clef de notre solution HTMLSHOP est le système de
génération de sites, mais après la génération d’un site, comment celui-là va être
géré ? C’est pour cela que nous avons créé ce module de gestion des sites et thèmes,
ce module permet à l’administrateur de consulter la liste des sites générés, gérer les

informations relatives aux sites tels que le nom de domaine par exemple, affecter un
thème particulier à un site donné, etc.
Ce module permet un contrôle sur la configuration de chaque site décliné d’un côté
et de sa présentation visuelle d’un autre côté, ce qui rend les sites générés
indépendants les un des autres.
Une vue d’ensemble des modules de notre solution HTMLSHOP :
Figure 20: Les modules de la solution HTMLSHOP
XI. La réalisation du générateur de sites
Le système de génération de sites que nous avons réalisé est parmi les fonctionnalités
les plus intéressantes de notre projet HTMLSHOP, il permet à un administrateur
simple, qui n’est pas forcément un programmeur, de générer d’autres sites à base
d’un site principal appelé site Master, ces sites déclinés auront les mêmes
fonctionnalités que le site master, mais qui peuvent avoir un design et du contenu
différents.

1. La réalisation du générateur de sites sous Symfony
Afin d'intégrer facilement la fonctionnalité de génération de site, ainsi que de
pouvoir l'utiliser dans d'autres projet, nous avons décidé de créer ce générateur de
site sous forme de plugin Symfony, le système de plugin de Symfony est l'un de ses
grands points forts, il permet la réutilisation des modules et composants, facilite la
migration et le déploiement et permet le partage de modules entre la communauté.
L’arborescence du plugin de génération des sites est dans l’annexe D.
Un autre atout intéressant de Symfony c'est son système de Task, ce système
permet de lancer des scripts PHP en ligne de commande, ces scripts serrent a créé les
projets Symfony, les modules et même à générer un espace d'administration basique
pour l'application, de même que pour le système de plugins, le développeur Symfony
peut créer lui-même une Task.
Dans un premier temps, nous avons commencé par une conception détaillée pour
déterminer les solutions possibles, durant cette conception nous avons trouvé
plusieurs problèmes techniques tel que:
Comment reproduire les fonctionnalités du site master vers les sites déclinés
sans avoir à dupliquer tout le code du projet ?
Comment nous pouvons détecter le site cible du client ? sachant que le
système est centré.
Opter pour une base de données commune ou une base pour chaque site ?
Comment faciliter au maximum la génération des sites ? Vu que les
administrateurs du site ne seront pas forcement des développeurs....etc.
Nous avons décidé de trouver des solutions pour tous ces problèmes en prenant en
considération les différentes contraintes du projet.
Pour la problématique de reproduction des fonctionnalités du site master vers les
sites déclinés sans avoir à dupliquer le code du projet, après une étude, nous avons
trouvé que ce problème ne peut pas être résolu à part et que la résolution de cette
problématique ne viendrait que par la résolution d’autres problèmes techniques tel
que le choix de travailler avec une seule base de données ou d’utiliser une base de
données pour chaque site.

Après l’étude de toutes ces problématiques et solutions potentielles, nous avons
entamé une phase de conception technique pour ce système de génération de sites,
après cette phase de conception nous sommes sortis avec les décisions suivantes :
Nous allons utiliser une base de données pour chaque site généré, cela doit
impérativement être pris en compte automatiquement au moment de la
génération, une base de données par site c’est pour rendre les sites générés
plus indépendants les un des autres et pour simplifier la réalisation du
système.
Afin de simplifier la vie à l’administrateur qui va générer un site, nous allons
simplifier au maximum la liste des paramètres initiaux requise par le
générateur de site, l’administrateur n’a besoin que d’entrer le nom de
domaine du site pour que le processus de génération commence.
Tout le processus de génération de sites doit être automatisé, seules les tâches
qui ne peuvent être faites que manuellement peuvent être laissées.
Après l’étude des problématiques techniques, recherche de solutions et la prise de
décision, nous avons entamé les développements dans le système de génération de
sites, nous avons commencé par la création de la structure du plugin, qui va par la
suite contenir tout le code du système, nous avons passé après à la création du
schéma des tables, les différentes classes nécessaires pour la prise en compte et la
gestion des sites et du module de gestion des sites générés en Backend. Après, nous
avons passé à la création du Task qui va se charger de la génération effective des
sites, le code du Task se charge de tout le processus de génération qui est schématisé
de la façon suivante :
Figure 21: Processus de génération d’un site

Nous avons intégré ensuite le Task réalisé dans le plugin et entamer la phase de
recette pour valider la conformité du système aux spécifications préalablement
établis.
En combinant les deux systèmes de plugins et de Task, nous avons pu créer un
générateur de site qui est à la fois efficace, simple à utiliser et exploitable dans
d’autres projets.
2. La réalisation du générateur de sites sous eZ Publish
EZ Publish est connu par sa possibilité de gérer multiples sites à travers son système
de SiteAccesses, cela nous a facilité la tâche de réalisation du générateur de sites.
Dans un premier temps, nous avons commencé par une étude du système de
SiteAccesses d’eZ Publish en prenant en compte nos besoins en matière de
génération de sites, nous avons remarqué que Les SiteAccesses définit La façon dont
EZ Publish reconnaît les sites et permet le surcharge des différents paramètres de
configuration qui remplacent ceux par défaut.
Les paramètres de configuration surchargés par le système des SiteAccesses les plus
importants sont les paramètres de design et la base de données utilisée.
L'une des manières pour déterminer de quelle interface de site il s'agit est l'adresse
(URL) demandée par le navigateur, en d'autres termes, une interface de site agit au
niveau de la représentation visuelle tandis qu'un SiteAccesses agit au niveau du
système.

Réalisation d’une plateforme e-commerce de vente de prestations HTML dotée d’un générateur de sites à base de différentes solutions PHP

Réalisation d’une plateforme e-commerce de vente de prestations HTML dotée d’un générateur de sites à base de différentes solutions PHP

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Réalisation d’une plateforme e-commerce de vente de prestations HTML dotée d’un générateur de sites à base de différentes solutions PHP

Similaire à Réalisation d’une plateforme e-commerce de vente de prestations HTML dotée d’un générateur de sites à base de différentes solutions PHP (20)

Réalisation d’une plateforme e-commerce de vente de prestations HTML dotée d’un générateur de sites à base de différentes solutions PHP