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

6 724 vues

Publié le

Mémoire:
Présenté en vue d’obtenir le diplôme d’Ingénieur d’Etat
Option : Qualité logiciel
GI 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

Publié dans : Logiciels
0 commentaire
3 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
6 724
Sur SlideShare
0
Issues des intégrations
0
Intégrations
865
Actions
Partages
0
Téléchargements
323
Commentaires
0
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

  1. 1. 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
  2. 2. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 2
  3. 3. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 3
  4. 4. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 4 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
  5. 5. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 5 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
  6. 6. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 6 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.
  7. 7. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 7 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
  8. 8. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 8 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
  9. 9. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 9 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
  10. 10. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 10 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
  11. 11. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 11 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
  12. 12. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 12 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
  13. 13. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 13 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
  14. 14. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 14 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
  15. 15. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 15 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,
  16. 16. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 16 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.
  17. 17. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 17 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 2 : A propos du projet HTMLSHOP
  18. 18. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 18 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
  19. 19. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 19 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.
  20. 20. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 20 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 R&D /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.
  21. 21. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 21 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.
  22. 22. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 22 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.
  23. 23. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 23 Chapitre 2 : A propos du projet HTMLSHOP I. Cadre général du projet HTMLSHOP II. Conduite du projet HTMLSHOP
  24. 24. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 24 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.
  25. 25. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 25 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
  26. 26. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 26 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.
  27. 27. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 27 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.
  28. 28. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 28 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.
  29. 29. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 29 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
  30. 30. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 30 Chapitre 1 : Etude fonctionnelle et conceptuelle du projet HTMLSHOP I. Etude fonctionnelle II.Conception et modélisation
  31. 31. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 31 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).
  32. 32. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 32 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
  33. 33. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 33 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é
  34. 34. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 34 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.
  35. 35. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 35 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
  36. 36. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 36 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.
  37. 37. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 37 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.
  38. 38. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 38 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.
  39. 39. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 39 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.
  40. 40. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 40 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.
  41. 41. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 41 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
  42. 42. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 42 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
  43. 43. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 43 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 :
  44. 44. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 44 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.
  45. 45. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 45 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.
  46. 46. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 46 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.
  47. 47. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 47 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.
  48. 48. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 48 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.
  49. 49. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 49 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
  50. 50. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 50 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.
  51. 51. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 51 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
  52. 52. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 52 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
  53. 53. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 53 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.
  54. 54. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 54 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.
  55. 55. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 55 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.
  56. 56. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 56 - 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
  57. 57. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 57 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)
  58. 58. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 58 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.
  59. 59. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 59 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
  60. 60. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 60 - 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
  61. 61. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 61 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.
  62. 62. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 62 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.
  63. 63. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 63 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.
  64. 64. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 64 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
  65. 65. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 65 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.
  66. 66. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 66 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
  67. 67. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 67 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.
  68. 68. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 68 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.
  69. 69. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 69 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
  70. 70. Mémoire de projet de fin d’études / ENSAO BETARI Amine & KADDARI Zakaria Année Universitaire 2009/2010 70 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.

×