DEPARTEMENT INFORMATIQUE. Rapport de stage. Stage effectué du 9 février au 24 avril 2009

Transcription

1 INSTITUT UNIVERSITAIRE DE TECHNOLOGIE DEPARTEMENT INFORMATIQUE Rapport de stage Stage effectué du 9 février au 24 avril 2009 Alexandre LACOCHE Maître de stage : Samuel BRETON Responsable pédagogique : Jeannine BOYAT Stage chez Lexik*, en tant que Analyste programmeur

2 REMERCIEMENTS J adresse mes remerciements à l entreprise Lexik* pour m avoir permis d effectuer mon stage au sein de leur équipe. Je remercie plus particulièrement : Madame Jeannine Boyat, mon maître de stage. Messieurs Samuel Breton, Thomas Duhamel, Benjamin Gaussorgues, Yoann Aparici, Olivier Maisonneuve et Lionel Raggini, qui ont fait preuve d une grande disponibilité à mon égard, et qui, grâce à leurs compétences techniques, m ont permis de mener à bien mon stage. Je remercie également les différents stagiaires que j ai pu rencontrer, au sein de l entreprise, avec qui nous avons pu échanger nos connaissances respectives dans les domaines Informatiques et de l Internet. 2

3 TABLE DES MATIERES Remerciements... 2 Table des matières... 3 Glossaire... 4 Table des figures... 6 Introduction... 7 Organisation du stage... 8 Premiers repères dans l entreprise et le travail... 8 Organisation du travail... 8 * Analyse... 8 Outils de travail... 9 Programmation Programmation objet Framework Symfony * Symfony * Mapping objet-relationnel ou ORM Les projets Applications Facebook Domains-tracker.com Père-mathieu.com Kelamour.fr Quiz Conclusion générale Annexes Sitographie Résumé Summary

4 GLOSSAIRE Note : tout au long du document, les mots figurant dans le glossaire sont mis en évidence par leur soulignement. AJAX (Asynchronous JavaScript and XML) : AJAX n'est pas une technologie en elle-même, mais un terme qui évoque l'utilisation conjointe d'un ensemble de technologies libres couramment utilisées sur le Web: c'est un moyen de faire une requête HTML (vers une page, ou un script) et d'afficher le résultat de la requête sans être obligé de recharger la page actuelle. Cache : le cache est une mémoire relativement petite et rapide qui stocke les informations les plus utilisées d une autre mémoire plus grande et plus lente. Elle permet d accélérer les traitements. Classe : description abstraite d un ensemble d objet de même structure et de même Comportement CSS (Cascading Style Sheet) : les feuilles de style en cascade permettent de décrire la présentation des documents HTML et XML. Il est par exemple possible de ne décrire que la structure d'un document en HTML, et de décrire toute la présentation dans une feuille de style CSS séparée. Les styles sont appliqués au dernier moment, dans le navigateur web des visiteurs qui consultent le document. Diagramme de classe : diagramme UML qui représente les classes et les interfaces d un système ainsi que les différentes relations entre celles-ci. Ce diagramme fait partie de la partie statique d UML car il fait abstraction des aspects temporels et dynamiques. Filtre : dans Symfony, quand le système reçoit une requête il exécute une série de filtre permettant un découpage logique efficace des actions à traiter. On peut intégrer ses propres filtres afin de modifier des comportements du Framework. Flux RSS : désigne une famille de formats XML utilisés pour la syndication de contenu Web. Framework : ensemble de bibliothèques, d outils et de conventions permettant le développement d applications. Il impose suffisamment de rigueur pour pouvoir produire une application aboutie et dont la maintenance est aisée. HTML (HyperText Markup Language) : format de données conçu pour représenter les pages web. C'est un langage de balisage qui permet d'écrire de l'hypertexte, d où son nom. Un standard initié par le W3C et compatible avec tous les systèmes. Nom de domaine : identifie de manière unique un site Internet. C est l adresse Internet principale d un site Web. 4

5 Open-source : Les logiciels Open Source ont une licence qui respecte les critères définis par l'association Open Source Initiative (OSI). Ainsi les logiciels approuvés par l OSI offrent la possibilité de libre redistribution, d'accès au code source et de Travaux dérivés. PHP (Hypertext PreProcessor) : langage de scripts libre principalement utilisé pour produire des pages web dynamiques via un serveur HTTP, mais pouvant également fonctionner comme n'importe quel langage interprété de façon locale, en exécutant les programmes en ligne de commande. PHP est un langage impératif disposant depuis la version 5 de fonctionnalités de modèle objet complètes. SGBD (Système de Gestion de Base de Données):ensemble de programmes qui permet la gestion et l'accès à une base de données. Un SGBD héberge généralement plusieurs bases de données, qui sont destinées à des logiciels ou des thématiques différentes. SQL (Structured Language Query) : langage de manipulation et d'interrogation de données correspondant aux concepts des bases de données relationnelles. UML (Unified Modeling Language) : langage graphique de modélisation des données et des traitements. C'est une formalisation très aboutie et non-propriétaire de la modélisation objet utilisée en génie logiciel. URL (Uniform Resource Locator): chaîne de caractères utilisée pour accéder aux ressources du Web : document HTML, image, son, forum, boîte aux lettres électroniques, etc. Elle est informellement appelée une adresse web. URL Rewriting : technique utilisée pour réécrire les URL afin de les simplifier. Wiki : système de gestion de contenu de site web rendant ses pages web librement modifiables par tous les visiteurs y étant autorisés. Les wikis sont utilisés pour faciliter l'écriture collaborative de documents avec un minimum de contraintes. W3C (World Wide Web Consortium) : organisme de normalisation à but non-lucratif, fondé en octobre 1994 comme un consortium chargé de promouvoir la compatibilité des technologies du World Wide Web telles que HTML, XHTML, XML, RDF, CSS, PNG, SVG et SOAP. Le W3C n'émet pas des normes. XML (Extensible Markup Language) : langage HTML amélioré permettant de définir de nouvelles balises. Les balises XML décrivent le contenu plutôt que la présentation. 5

6 TABLE DES FIGURES 6

7 INTRODUCTION J ai été accueilli du 9 février au 24 avril 2009 au sein de l équipe d analystes programmeurs de l entreprise Lexik. L agence de communication Lexik est une SARL implantée à Montpellier créée en 2007 par Thomas Duhamel et Samuel Breton. Lexik regroupe plusieurs services qui permettent de gérer l ensemble des communications papier et numérique des clients. En effet, elle propose la création d applications Internet et une large gamme de produits de communications papier. Pendant ce stage, j ai réalisé des sites Internet plus ou moins importants. Tout d abord, je vais présenter l entreprise dans laquelle j ai effectué mon stage, ainsi que les missions qui m ont été confiées. J exposerai l organisation du stage. C'est-à-dire : les premiers pas dans le monde du travail, l organisation de celui-ci et les outils utilisés. J aborderai ensuite l aspect programmation et présenterai les différents projets que j ai réalisés. 7

8 ORGANISATION DU STAGE Premiers repères dans l entreprise et le travail Arrivée à l entreprise Lexik le lundi 9 février 2009 à 9h00. L entreprise se situe dans la zone d activité de Pérols. Mon intégration s est faite sans aucun problème : j ai été reçu par un des associés qui m a présenté les locaux de l entreprise (une présentation rapide de l entreprise m avait déjà été faite lors de l entretien pour le stage). L entreprise compte deux directeurs associés et trois développeurs salariés. Organisation du travail Le travail dans l entreprise commence à 9h00 et termine à 18h00. Chaque personne connait le travail qu elle doit effectuer. Pour ma part, le matin, une mise au point du travail à faire est effectuée afin d organiser la journée. Pour chaque projet effectué, la même démarche suivante a été faite : * Analyse Afin que l application, ici un site Internet, réponde à la demande du client, il faut définir les besoins de l application. Après lecture du cahier des charges, j ai pu définir un diagramme de classes. Ce diagramme permet de modéliser les différentes tables de la base de données et les méthodes pour chaque type d objet de l application. 8

9 Outils de travail Lors de mon arrivée au sein de l entreprise, un ordinateur personnel m a été attribué. J ai travaillé sous Ubuntu : c est un système d exploitation libre basé sur Linux. Quelques infos sur Ubuntu : «Ubuntu» est un ancien mot africain qui signifie «Humanité». Ubuntu signifie également «Je suis ce que je suis grâce à ce que nous sommes tous». La distribution Ubuntu apporte l'esprit Ubuntu au monde logiciel. Les outils utilisés sont : Pour le développement : - Netbeans : environnement de Développement Intégré (IDE) pour différents langages de programmation : Java, PHP, Python, Ruby, Ce logiciel a été placé en Open Source par Sun (éditeur de logiciel Américain). Figure 1 : Aperçu du logiciel Netbeans. - PhpMyAdmin : interface gratuite réalisée en langage PHP pour le SGBD MySQL afin de faciliter la gestion des bases de données MySQL sur un serveur. Figure 2 : Aperçu de phpmyadmin - FileZilla : client FTP développé sous licence publique. Ce logiciel permet d envoyer des fichiers vers un hébergement Web. - Mozilla Firefox : navigateur Web gratuit, développé et distribué par la Mozilla Foundation. - Trac : logiciel de gestion de projet Web utilisant Subversion, implémentant un Wiki et un système de suivi de bug. Sur le Trac, il est possible de contrôler les versions d un projet en cours de développement, de proposer la rédaction de «ticket» (message concernant un point du projet, un bug à corriger ). C est le côté serveur. Figure 3 : Aperçu du Trac - Subversion (en abrégé SVN) : système de gestion de versions du coté client. S utilise en ligne de commande mais plusieurs logiciels pourvus d'interface graphique existent. J ai utilisé Rapid SVN. 9

10 Pour la communication au sein de l équipe : - Le blog de Lexik : il permet à l équipe de faire partager à la communauté des développeurs des astuces, des résolutions de problèmes, des corrections de bugs La majeure partie des articles de ce blog concernent le Framework Symfony. J ai moi-même rédigé quelques articles (sur la création de virtual host sous Ubuntu et la mise en place de la fonction Edit-in-place sous Symfony) - Réunions : des réunions sont organisées régulièrement. Soit en petit comité, avec les personnes concernées, afin de faire un point sur le projet en cours et de fixer les prochains objectifs ; soit en groupe afin de faire partager les problèmes rencontrés mais surtout les solutions qui leur ont été apportées. Ces réunions sont aussi importantes pour discuter des conventions de programmation, des nouvelles méthodes et fonctions trouvées. - Google Site : ce service, fourni par Google, permet de mettre en place des pages Internet de façon simple, de contrôler les droits d affichage et de modification. Google Site comprend aussi Google Document, Google Agenda, Gmail et Google Talk. Il permet au sein de l équipe de partager des documents (liens vers des sites intéressants, documents rédigés par un membre de l équipe, ), d avoir un agenda afin de fixer des rétro-plannings pour chaque membre et une boîte mail pour rester en contact permanent. 10

11 PROGRAMMATION Programmation objet Il y a deux types de programmation : la programmation dite procédurale et la Programmation Orientée Objet (POO). Ce qui les distingue : la programmation procédurale est constituée de procédures et fonctions sans liens particuliers agissant sur des données dissociées, pouvant mener rapidement à des difficultés en cas de modification de la structure des données. La programmation objet tourne autour d une unique entité : l objet. Un objet est une structure de données. Il s agit d une entité chargée de gérer des données, de les classer, et de les stocker sous une certaine forme. En cela, rien ne distingue un objet d une quelconque autre structure de données. La principale différence vient du fait que l objet regroupe les données et les moyens de traitement de ces données. La programmation utilisée lors de mon stage est une programmation objet (dans la continuation du programme de l IUT). Cependant, après avoir fait de la programmation objet à l IUT, le concept de l objet n était pas encore très clair. Je n avais pas bien assimilé les relations entres les différents éléments de l objet, et de l application elle-même (j en parlerais plus en détail un peu plus loin dans mon rapport). Framework Symfony * Symfony Symfony est un Framework MVC libre PHP5. Symfony permet d'avoir une base solide et performante pour concevoir rapidement des sites web avancés. Le Framework Symfony est un projet Open-Source depuis plus de trois ans. Il est devenu l'un des plus populaire Framework PHP grâce à ses fonctionnalités et sa bonne documentation. Cette grande tradition a commencé dès le début de son développement. Afin d apprendre à se servir du Framework, les éditeurs ont mis au point un tutorial appelé Jobeet : c est une série de 24 tutoriaux. Ce tutorial permet de se familiariser rapidement et en peu de temps avec Symfony 1.2. J ai donc, avant de commencer tout projet, réaliser ce tutorial. Jobeet passe en revue une très grande partie des fonctions de Symfony. 11

12 Avant d aborder les différentes fonctionnalités de Symfony, je vais expliquer son architecture qui fait aussi la force de ce Modèle Vue Contrôleur (MVC) : La base de données : - Configuration de la base de données : la base de données doit être configurée dans PHPMyAdmin. Pour cela, une commande console existe où l on définit le nom de la base de données et les identifiants pour y accéder. - Création de la structure de la base de données : La création de ce fichier n est pas compliquée mais son écriture est très stricte. En effet, le moindre caractère ou espace mal placé fausse tout le fichier. Lors de sa création, il existe de nombreux paramètres. Voici ceux que j ai utilisés : Le nom de l objet Le nom de la table Les différents champs souhaités, leur type, leur(s) «validateur(s)» (Les validateurs sont des outils qui permettent de définir si le champ ne doit pas être nul, s il doit avoir une valeur par défaut, si ce doit être un format d , de carte bancaire etc. Ces consignes sont vérifiées avant l enregistrement dans la base de données.) Définir quel champ devra être en multi-langue Ajout de la fonction «Timestampable» : celle-ci permet d ajouter automatiquement les champs : date «creates_at» (créée_le) et «updated_at» (mise_a_jour_le). Ces champs sont automatiquement gérés par Symfony Ajout de la fonction «NestedSet» : cette fonction permet la gestion d arbres intervallaires (gestion de catégories et sous catégories par exemple) Voici un exemple «type» de structure de base de données : 12

13 Ce fichier est très important pour la suite du projet. Il est préférable de passer du temps dessus car une modification du schéma engendre un grand nombre de changements dans le reste du code. Une fois la base de données terminée il faut l exporter dans PhpMyAdmin via la commande : $ php symfony doctrine:build-all Lors de cette exportation, Symfony génère automatiquement les différents formulaires pour l ajout de données, les filtres et les modèles (permettant les requêtes avec la base de données) en prenant en compte les validateurs pour chaque objet. L arborescence d un projet : Figure 4 : Arborescence d un projet - Le dossier APP contient les différentes applications du site (la partie administration, la partie visiteur par exemple). Chaque application contient un dossier de configuration qui permet de paramétrer l inclusion des styles CSS, des scripts JavaScript et la sécurité pour chaque action de chaque module. Les différents modules se trouvent dans un dossier séparé. Un module est généré par une commande. Il peut être généré soit en fonction d un objet (des fonctions seront alors déjà présentes afin d interagir avec cet objet) soit «vide». Chaque module contient un dossier ACTION où sont stockés les traitements de données et un dossier TEMPLATE où sont stockées les «vues» de chaque action. Par exemple : On veut afficher l heure sur la page d accueil : l action fait le traitement pour avoir l heure dans un format bien précis et la vue récupère le résultat du traitement et l affiche. Voici deux exemples de fonctions (à faire dans l action) : Récupérer un objet par sa clé primaire : $membre = Doctrine::getTable( Membre)->findOneById( 2 ) ; Récupérer le nom du membre : $nom = $membre->getnom() ; - Lorsqu un utilisateur visite un site Internet, Symfony doit générer des pages. Pour éviter que cette génération se fasse à chaque visite, les pages créées la première fois sont placées dans le dossier CACHE. De cette manière, la prochaine fois, Symfony ira directement récupérer ces pages. - Afin de savoir tout ce qui se passe sur le site, le dossier LOG crée des fichiers qui contiennent les requêtes qui ont été effectuées (ainsi que leurs dates). - Le dossier LIB comporte des librairies. Ce sont des classes auxquelles ont peut accéder à n importe quel moment car tout le dossier est «chargé» lors de l accès au site. Elle contient les différents formulaires, les filtres, les modèles que Symfony a générés en fonction du schéma de la base de données. 13

14 Voici un exemple de requête qui peut être présent dans MembreTable.class.php : Récupération d un membre selon plusieurs conditions : $requete = $this->createquery( a ) ->where( a.nom =?, Lacoche ) ->andwhere( a.prenom =?, Alexandre ) ->fecthone(); Récupération d un member avec ses amis : $requete = $this->createquery( a ) ->leftjoin( Enfant ) ->where( a.nom =?, Lacoche ) ->andwhere( a.prenom =?, Alexandre ) ->execute(); Ce n est pas nécessaire de préciser la clé étrangère car si la structure de la base de donnée est bien faite les enfants (dans l exemple) sont aussi récupérés). - Symfony possède un outil de TESTS afin de contrôler le bon fonctionnement de l application. Il y a deux types de tests (expliqués ultérieurement). - Le dossier WEB contient les images, les styles CSS, les scripts JavaScript et les pages pour accéder aux différentes applications. L organisation des fichiers : Les fichiers propres à Symfony (les fichiers de configurations du site) ont une extension unique :.yml. Grâce à cela, il est facile de repérer rapidement les fichiers qui permettent de gérer la configuration de l application. Une arborescence ordonnée permet aussi d avoir accès aux fichiers voulus rapidement. Voici quelques fonctionnalités clés par défaut du Framework: Les fonctionnalités sont nombreuses, je parlerai plus précisément de certaines fonctions qui me semblent être importantes et que j ai utilisées. Sécurité : Symfony garde une trace de chaque opération effectuée dans ses logs. Par défaut, il gère les protections telles que : Le cross site scripting (XSS) : Faille concernant l injection de code dans l url lorsque les variables JavaScript sont mal protégées. 14

15 Cross-Site Request Forgeries (CSRF): Cette faille utilise l utilisateur comme déclencheur, celui-ci devient complice sans en être conscient. De cette manière, un grand nombre de systèmes d authentification sont contournés. Injection SQL : Injection de requête SQL non prévue dans le système pouvant compromettre sa sécurité. Gestion des environnements : Symfony peut gérer différents environnements tel que l environnement de développement, de production, de test De cette manière, en développement par exemple, les erreurs sont affichées de telle sorte qu elles soient compréhensibles (et précises) pour le développeur. Tests unitaires et fonctionnels : Il y a deux sortes de tests automatiques dans Symfony : les tests unitaires et les tests fonctionnels. Les tests unitaires vérifient que chaque méthode et fonction répondent bien. Chaque test doit être aussi indépendant que possible des autres. Les tests fonctionnels, quant à eux, permettent de contrôler l application dans son ensemble. Configuration et extensibilité : La configuration de Symfony se fait très simplement. Que ce soit l architecture de la base de données, les différentes applications, les environnements et les modules, leur configuration se fait intuitivement et se démarque bien du reste des fichiers (voir schéma sur l arborescence d un projet Symfony). Les plugins Symfony offrent un moyen de conditionner et de distribuer une partie des fichiers d un projet. Comme un projet, un plugin peut contenir des classes, des aides, la configuration, les tâches, les modules, des schémas, Cela permet l utilisation de mêmes fonctions dans un même projet mais aussi de faire partager des fonctions à la communauté Symfony. Exemple de plugins Symfony : - sfguardplugin : il permet la gestion des utilisateurs, des groupes d utilisateurs, des permissions Tout cela de façon sécurisée. Figure 5 : Aperçu de sfguardplugin 15

16 - sfformextraplugin : il possède des paquetages utiles de validateurs, de widgets et de formulaires. Exemple de plugins «Lexik» : - sflexikhtmlplugin : les développeurs de l entreprise ont mis au point un plugin permettant à un administrateur d un site de gérer différentes zones de texte sans aucune connaissance en programmation. Il permet aussi bien de gérer un contenu textuel mais aussi la publicité du site. - Nested : ce plugin permet de gérer l arborescence de menus, des catégories, grâce à la gestion d'arbres par représentation intervallaire. Modèle Vue Contrôleur (MVC) : Le MVC de Symfony est très poussé. C est une architecture, une méthode de conception qui organise l interface Homme-Machine d une application. Il divise l interface Homme-Machine en un modèle (modèle de données), une vue (présentation, interface utilisateur) et un contrôleur (logique de contrôle, gestion des événements, synchronisation), chacun ayant un rôle précis dans l interface. ARCHITECTURE MVC 16

17 Admin Generator : Grâce à Symfony, l administration complète d un site peut être générée rapidement. Pour chaque modèle de l application, Symfony génère tout ce qui est nécessaire afin d ajouter, éditer et supprimer des informations dans la base de données. Figure 6 : Aperçu de «l admin generator» Outils de développement : La gestion des erreurs est très avancée : dans l environnement de développement, une barre de logs est affichée en haut de la fenêtre. Elle permet d avoir en temps réel toutes les données qui transitent au sein du site (données post, get, session, http ), les requêtes effectuées, le nombre de requêtes effectuées et le temps de chargement. De plus, les pages d erreur sont précises et permettent une correction du problème rapidement. Gestion du cache : Symfony permet de gérer le cache du site Internet. Par exemple, les fichiers de configuration YAML sont d'abord convertis en PHP et ensuite mis en cache sur le système de fichiers. Le cache HTML permet d améliorer les performances du site Web, le site entier peut être mis en cache ou seulement une partie des pages. De cette manière, les pages ne sont pas générées à chaque chargement de la page mais seulement au premier. La navigation est donc plus rapide. URL propres : Symfony présente un système d URL Rewriting qui permet d avoir des adresses Internet propres avec un système de routage très évolué. La modification de l affichage d une URL est très facile puisqu il suffit de la corriger une seule fois pour qu elle prenne effet sur tout le site. Internationalisation : Grace au Framework, un site multilingue peut être facilement mis en place. Il permet de créer des formulaires où une zone est réservée au contenu à traduire puis à être stocké dans la base de données (contenu dynamique). D autre part, il facilite la traduction du contenu brut: il suffit de formater le texte d une certaine façon pour qu un processus puisse l extraire (sous forme de document XML), de traduire le texte puis Symfony charge automatiquement la bonne version du texte. Figure 7 : Aperçu des formulaires d internationalisation Figure 8 : Document XML pour le multi-langue Support avancé des formulaires : La création de formulaires est simple et avancée. Lorsqu un formulaire est créé il faut lui définir : Des widgets : permettent de générer les éléments HTML du formulaire (input, textarea, select, ) 17

18 Des validateurs : permettent de valider le contenu du formulaire (entier, chaîne de texte, date, adresse , ) Figure 9 : Création de formulaire Gestionnaire de fixtures : A un certain stade du projet, le développeur a besoin de faire des tests afin de voir si les futures données seront compatibles avec le site. Pour cela, Symfony met à disposition les «fixtures» ; ce sont des fichiers.yml contenant des données qui sont automatiquement sauvegardées dans la base de données lorsqu on recharge la configuration du site. Le contraire (sauvegarder la base de données) est aussi possible en passant par la commande :./symfony doctrine :data-dump nom_du_fichier_de_sauvegarde Pour conclure : Symfony permet aux programmeurs de développer plus rapidement les points qui sont redondants. De ce fait, le programmeur peut passer plus de temps sur les particularités du site. L utilisation de Symfony rend le code mieux organisé. Le point fort d une programmation comme celle-ci permet de revenir sur un projet plus tard ou de reprendre un projet en cours avec facilité. * Mapping objet-relationnel ou ORM Un ORM (Object Relational Mapping) est une technique permettant de lier un objet à une base de données relationnelle. A titre d'exemple, en PHP 5 (Orienté Objet), nous aurons un Objet Membre qui sera directement lié à une table Membre. Ainsi l'objet est directement lié et permet de mettre en place des méthodes rapides pour créer, modifier, récupérer, supprimer et traiter des informations... Ce concept existe dans beaucoup de langages, et en PHP5, il existe notamment deux Framework d'orm qui sont: et Ce sont ces deux Framework qui sont proposés dans Symfony. On ne peut en utiliser qu'un seul par projet web, il faut donc choisir l'un des deux. 18

19 Ces deux ORM possèdent quelques différences : Génération de code Propel: génère du code pour les méthodes et requêtes. C est un avantage car il garde une trace du code généré en cas de débogage. Doctrine: analyse interne du code Optimisation des requêtes Propel: récupère plus facilement l'objet complet qu'une seule partie des informations Doctrine: facilité d'optimisation des données à récupérer etc. Plus rapide au développement. Performances de l'orm Propel est plus rapide que Doctrine sur une même requête mais seulement lorsqu'il n y a pas gestion du cache. L'ORM dans Symfony Propel: depuis la première version, Symfony utilise Propel comme ORM (Ancré dans la version 1.0 puis il a été séparé à partir de la version 1.1) Doctrine: plus récemment proposé dans Symfony (Version 1.1) Doctrine, c'est l'avenir dans Symfony, dès la version 2.0, seul Doctrine sera utilisée. De plus, Sensio (Editeur de Symfony) a embauché le lead développeur de Doctrine récemment, cela va de soi qu'il sera bien plus optimisé avec Doctrine dans les prochaines versions à venir. Pour ma part j ai utilisé seulement Doctrine. Apparemment, les requêtes faites avec Doctrine semblent plus simples qu avec Propel lorsqu elles sont avancées (Count, Group By, ). 19

20 LES PROJETS Pour chacun des projets, j expliquerai les points intéressants, l aspect technique et les problèmes rencontrés. Je ne rentrerai pas dans une explication détaillée du code. Applications Facebook * Présentation et besoins de l application Pour ce premier «mini» projet, je devais concevoir une application Facebook, simple. L objectif était de me documenter sur les langages de programmation possibles à utiliser mais aussi sur tout le coté hébergement de l application, communication avec l utilisateur ur et gestion des données. En type d application test, j ai réalisé une interface où l utilisateur peut renseigner un champ texte (ici le numéro de sa plaque minéralogique). Lors de la validation, le texte ainsi que l identifiant de l utilisateur sont sauvegardés dans une base de données externe et un mail est envoyé afin de confirmer l enregistrement. * Analyse La plupart des personnes connaissent le site communautaire Facebook. Lorsqu un utilisateur crée un compte sur ce site, il doit tout d abord renseigner des données personnelles (nom, prénom, âge, sexe ). Une fois qu il a créé son compte, il a accès à une multitude d applications. Il y a deux types d application : les applications dites «officielles», ce sont celles qui ont été développées par Facebook ; et les applications créées par les utilisateurs. Un utilisateur ayant quelques bases en programmation est capable d en développer une. En effet, le site met à disposition une application («Développeur») qui permet d en créer. Figure 10 : Application Facebook «Développeur» 20

21 «Développeur» est indispensable car elle permet de configurer l application : son nom, sa description, la langue, son avatar, les identifiants du créateur, le type de l application, la méthode de programmation, les codes de sécurité, etc. Il y deux méthodes de programmation : - En iframe : cette technique permet d insérer dans le Facebook une page extérieure au site. Le développeur crée l application sur un site externe et d une manière totalement indépendante au site. De ce fait, l application ne peut pas avoir accès aux informations de l utilisateur. Le type d application peut être un quiz, un sondage - En FBML (Facebook Markup Language) : le FBML est le langage créé par Facebook afin de faciliter la communication entre l application et les données de l utilisateur. Ce langage se caractérise par des balises du type : <fb:name uid="12345" /> Chaque balise est préfixée de fb pour «Facebook», suivie de la référence de l information souhaitée puis de l uid (l identifiant de l utilisateur courant). * Développement Pour développer l application (décrite précédemment), j ai choisi d utiliser le langage de Facebook. Quelle que soit la manière de faire l application, Facebook ne fournit pas de base de données, ni d hébergement. De cette manière, le site communautaire ne gère que l affichage et ne se préoccupe pas du contenu (c est le site hébergeur qui doit le contrôler). J ai donc eu à ma disposition un hébergement et une base de données afin d y stocker l application. L application se comporte comme un site internet. Lors de sa configuration, il faut lui préciser l adresse externe du site pour pouvoir l inclure dans Facebook. Pour la sécurité de l application, des codes doivent être placés dans les pages externes pour permettre au site communautaire d identifier le site. Coté externe à Facebook : Avant de commencer le développement de l application, j ai donc du me familiariser avec le FBML. Pour ce projet, la page de l application doit faire apparaître un formulaire, le pseudo et l avatar de l utilisateur. Afin de pouvoir utiliser le langage FBML, Facebook met à disposition des fichiers qu il faut inclure dans chaque page de l application. 21

22 Voici une partie du code de la page : <fb:prompt-permission perms=" "> Souhaitez-vous recevoir des s à partir de cette application? </fb:prompt-permission> <!-- FORMULAIRE ENREGISTREMENT IMMATRICULATION,ID_USER --> <p>bienvenue, <fb:name uid="<?php echo $user?>" useyou="false" linked="false" />!</p> <fb:profile-pic uid="<?php echo $user?>" linked="false" /> <fb:editor action="record_imma.php" labelwidth="100"> <fb:editor-text label="votre numéro d'immatriculation" name="numero" value=""/> <fb:editor-buttonset><fb:editor-button value="enregistrer"/></fb:editor-buttonset> </fb:editor> </fb:request-form> Dans Facebook : Après avoir renseigné la page de configuration de l application, celle-ci est accessible uniquement en effectuant une recherche. En effet, pour que l application soit présente dans le répertoire des applications il faut qu elle y soit inscrite. De cette manière, l application créée sera répertoriée et les utilisateurs pourront y accéder plus facilement. Figure 11 : Configuration de l application * Résultat Voici un aperçu de l application, intégrée dans Facebook : 22

23 * Conclusion Le développement d application Facebook n est pas compliqué. La documentation du FBML est très bien structurée (c est un wiki). De plus, le site communautaire met à disposition des outils qui permettent de faire des tests de l application. Au niveau de la programmation FBML, le wiki présente un listing de toutes les balises qui peuvent être utilisées. Leur utilisation est intuitive pour quelqu un qui débute en programmation car elle reprend les conventions du HTML. Cependant, il faut savoir que lorsqu un utilisateur souhaite accéder à une application, il doit lui autoriser l accès aux informations de son profil, à ses photos, aux informations sur ses amis et à tout autre contenu nécessaire à son fonctionnement. Il semblerait qu un développeur malveillant puisse récolter un nombre important d informations sur les personnes utilisant son application. Sans aucune restriction, je pouvais sauvegarder toutes les informations de son profil sans même qu il en soit averti. Pour information, en août dernier, un développeur allemand a découvert une faille permettant de récupérer les identifiants de connexion de l utilisateur. Le bug a été corrigé, mais nos données sont elles vraiment en sécurité sur un site comme Facebook? 23

24 Domains-tracker.com Projet réalisé avec Benjamin Gaussorgues (stagiaire). Ce projet n est pas une commande d un client. C est un service mit à disposition des utilisateurs. * Présentation et besoins de l application Domains-tracker.com est un site destiné tant aux professionnels qu aux particuliers. Il permet aux personnes ayant de nombreux noms de domaines d être au courant en tant réel de la date d expiration de ceux-ci. Afin que chaque utilisateur puisse avoir la liste de ses propres domaines, il peut créer un compte sur le site et ajouter les domaines qu il souhaite suivre. Il y a deux types de comptes : - Les comptes dits «free»: ils s adressent aux utilisateurs qui souhaitent suivre jusqu à cinq domaines, gratuitement. - Les comptes dits «premium»: ils permettent de suivre autant de domaines que l on souhaite. Avec un compte premium l utilisateur a accès à certains avantages : Un flux RSS Un récapitulatif régulier par Un widget (gadget) JavaScript permettant d avoir le listing sur son site * Analyse Le point technique de ce projet est la récupération des informations du nom de domaine. Cette méthode s appelle le «Whois» (contraction de l'anglais who is?, signifiant «qui c'est?»). C est un service de recherche fourni par les registres Internet permettant d'obtenir des informations sur une adresse IP ou un nom de domaine. Cette partie a été développée par Benjamin. Figure 12 : la sortie actuelle du serveur whois via la commande sous Ubuntu pour Google.fr. Pour ce premier projet avec le Framework Symfony, la base de données n est pas très complexe mais a tout de même nécessité une analyse UML. 24

25 Diagramme des classes : Base de données : 25

26 * Développement Après l installation de Symfony sur le projet, il faut le configurer : Figure 13 : Exportation du fichier «schema.yml» dans phpmyadmin Une fois la base de données en place la programmation peut commencer. Pour chaque projet, le design n était pas présent au début. J ai donc codé sans mise en page. De cette manière, on ne se soucie pas des problèmes de placement des informations mais uniquement des traitements des données. Voici les différentes étapes du développement pour ce projet : Mise en place de la partie utilisateur : Pour la création de la partie utilisateur, un plugin a été installé : sfguardplugin. Ce plugin permet la gestion des utilisateurs mais aussi la possibilité de créer des groupes et de gérer les permissions de chaque groupe. Il génère automatiquement les formulaires pour la création d un nouvel utilisateur, la connexion de l utilisateur à son compte et la modification des données. Intégration de la fonction «Whois» : Après le développement de la classe (par Benjamin), pour pouvoir utiliser la fonction «Whois», il a fallu l intégrer dans le projet. Pour cela, Symfony a un dossier «lib» qui comporte des librairies. Lorsque quelqu un accède au site toutes les librairies présentes dans le dossier sont chargées : on peut donc accéder aux classes à tout moment. * Résultat Différentes captures d écran sont disponibles en annexe. Figure 14.1 : Page d accueil de Domains-tracker.com Figure 14.2 : Aperçu d'un compte utilisateur 26

27 * Conclusion La première prise en main du Framework n a pas été très difficile mis à part quelques problèmes lors de son installation dans le projet. Je pense qu il a été judicieux de commencer par un petit projet afin de me familiariser avec Symfony. De plus, n ayant pas eu l habitude de programmer de cette façon lors de mes réalisations de site web personnelles, il m a fallu un petit temps d adaptation. Mais je me suis vite aperçu des grosses possibilités de Symfony. 27

28 Père-mathieu.com * Présentation et besoins de l application Ce site Internet est une commande d un client de l entreprise. Le concept de ce site : le père Mathieu est un paysan ayant une vache qui a des bons plans à faire partager. C est donc un site où l utilisateur peut trouver des bonnes affaires et des codes de réductions pour certains magasins. Il y a un autre type de bons plans, appelé «offre flash». C est l offre du moment qu il ne faut pas rater. Cette offre a sa propre page et ne dépend pas des autres offres. L affichage des bonnes affaires a différentes contraintes : Le bon plan doit être activé : l administrateur pourrait, par exemple, ne pas être sûr d une offre mais souhaite tout de même l enregistrer dans la base de données. Une fois l information vérifiée il n aura plus qu à «l activer» d un simple clic. Le bon plan doit être affiché uniquement pendant sa période d effet. L administrateur doit renseigner la date de début et de fin lors de la création de l offre. Le site doit donc présenter des bons plans appartenant à des catégories ; j ai donc utilisé la fonction Nested. De plus, il fallait que le client puisse gérer l affichage de différentes publicités à différents emplacements du site. Pour cela, le plugin sflexikcontenu a été utilisé. * Analyse et développement Le point technique de ce projet est la gestion dynamique des catégories. Le terme de dynamique traduit le fait que les pages peuvent être générées à la demande, contrairement à un site Web statique. En d autres termes, l administrateur du site doit pouvoir créer et gérer les catégories (et sous catégories) du site. De la même manière, il doit avoir la possibilité d ajouter des bons plans et de les lier à une catégorie (c est la gestion de la paternité, d arbre). La gestion d arbres en SQL se fait traditionnellement par une auto-jointure, avec le champ classique parent_id. Cette méthode est cependant très coûteuse quand il s agit de faire des recherches dans cet arbre car il faut alors utiliser la récursivité. Une autre méthode beaucoup plus puissante existe : la gestion intervallaire. 28

29 Gestion d'arbres par représentation intervallaire : Je vais expliquer cette méthode sans développer le procédé complètement car l explication serait très longue. Représentation classique par auto-jointure : Voici un arbre dont les données représentent des familles de véhicules : Voilier Transport Terrestre Marin Moto Camion Voiture Paquebot Planche à voile Site-car Trail Vélo Une manière habituelle de représenter un tel arbre est de prévoir une auto-jointure de la table sur elle-même. Voici la création de la table : CREATE TABLE FAMILLE (FAM_ID INTEGER, FAM_LIB VARCHAR(16), FAM_PERE INTEGER) INSERT INTO FAMILLE (FAM_ID, FAM_LIB, FAM_PERE) VALUES (0, 'Transport', NULL) INSERT INTO FAMILLE (FAM_ID, FAM_LIB, FAM_PERE) VALUES (1, 'Terrestre', 0) INSERT INTO FAMILLE (FAM_ID, FAM_LIB, FAM_PERE) VALUES (2, 'Marin', 0) INSERT INTO FAMILLE (FAM_ID, FAM_LIB, FAM_PERE) VALUES (3, 'Voiture', 1) INSERT INTO FAMILLE (FAM_ID, FAM_LIB, FAM_PERE) VALUES (4, 'Camion', 1) INSERT INTO FAMILLE (FAM_ID, FAM_LIB, FAM_PERE) VALUES (5, 'Moto', 1) INSERT INTO FAMILLE (FAM_ID, FAM_LIB, FAM_PERE) VALUES (7,'Vélo', 1) INSERT INTO FAMILLE (FAM_ID, FAM_LIB, FAM_PERE) VALUES (6, 'Voilier', 2) INSERT INTO FAMILLE (FAM_ID, FAM_LIB, FAM_PERE) VALUES (7, 'Paquebot', 2) INSERT INTO FAMILLE (FAM_ID, FAM_LIB, FAM_PERE) VALUES (16,'Planche à voile', 2) INSERT INTO FAMILLE (FAM_ID, FAM_LIB, FAM_PERE) VALUES (8, 'Trail', 6) INSERT INTO FAMILLE (FAM_ID, FAM_LIB, FAM_PERE) VALUES (9, 'Side-car', 6) 29

30 Ici, c'est la colonne FAM_PERE qui permet de joindre l'élément de l'arbre à son ancêtre. Trouver le supérieur direct d'un élément n'est pas une chose difficile. Prenons par exemple le Voilier (ID = 6); la recherche du père s'effectue par la requête : SELECT * FROM FAMILLE WHERE FAM_ID = (SELECT FAM_PERE FROM FAMILLE WHERE FAM_ID = 6) FAM_ID FAM_LIB FAM_PERE 2 Marin 0 Dans un cas comme celui-ci, la recherche de tous les ascendants passe par une procédure récursive. Or, non seulement la récursivité est très coûteuse, mais certains langages de procédures stockées (ensemble d'instructions SQL pré-compilées) ne savent pas la gérer (Transact SQL de Microsoft par exemple). En général, cette méthode n est pas utilisée si l arbre est trop profond (plus de 5 niveaux), si l'arbre est large (plus de 100 éléments sur un même niveau), si l'arbre contient beaucoup de valeurs (à partir de 200 à 300 éléments) et si la majorité des requêtes sont des requêtes d'interrogation - SELECT (au moins 50% des requêtes). Représentation intervallaire des arborescences : Une manière performante de représenter les hiérarchies de type arborescentes est de créer des intervalles adjacents et recouvrant. Le principe est simple : des feuilles situées au même niveau ont des intervalles adjacents des nœuds englobant des feuilles ou d'autres nœuds ont des intervalles recouvrant Avec cette méthode, l'insertion ou la suppression est un peu coûteuse, l'interrogation et notamment la recherche s'exprime la plupart du temps en une seule requête. Pour cette modélisation, nous devons donc attribuer à toutes les entrées de notre table arborescente les deux bornes de l'intervalle que nous appellerons BG (Borne Gauche) et BD (Borne Droite). L'attribution des valeurs de ces bornes se fait en parcourant l'arbre et en numérotant séquentiellement chaque feuille ou nœud une première fois par le bord gauche et une seconde fois par le bord droit. 30

31 Voici une façon de représenter cet arbre par tranches englobantes. La racine est la tranche la plus large, et chaque feuille est une tranche fine : Avec cette méthode la base de données devient : CREATE TABLE NEW_FAMILLE (NFM_BG INTEGER, NFM_BD INTEGER, NFM_LIB VARCHAR(16)) INSERT INTO NEW_FAMILLE (NFM_BG, NFM_BD, NFM_LIB) VALUES (1, 24, 'Transport') INSERT INTO NEW_FAMILLE (NFM_BG, NFM_BD, NFM_LIB ) VALUES (2, 15, 'Terrestre') INSERT INTO NEW_FAMILLE (NFM_BG, NFM_BD, NFM_LIB) VALUES (3, 4, 'Vélo') INSERT INTO NEW_FAMILLE (NFM_BG, NFM_BD, NFM_LIB) VALUES (5, 6, 'Voiture') INSERT INTO NEW_FAMILLE (NFM_BG, NFM_BD, NFM_LIB) VALUES (7, 8, 'Camion') INSERT INTO NEW_FAMILLE (NFM_BG, NFM_BD, NFM_LIB) VALUES (9, 14, 'Moto') INSERT INTO NEW_FAMILLE (NFM_BG, NFM_BD, NFM_LIB) VALUES (10, 11, 'Side-car') INSERT INTO NEW_FAMILLE (NFM_BG, NFM_BD, NFM_LIB) VALUES (12, 13, 'Trail') INSERT INTO NEW_FAMILLE (NFM_BG, NFM_BD, NFM_LIB) VALUES (16, 23, 'Marin') INSERT INTO NEW_FAMILLE (NFM_BG, NFM_BD, NFM_LIB) VALUES (17,18,'Planche à voile') INSERT INTO NEW_FAMILLE (NFM_BG, NFM_BD, NFM_LIB) VALUES (19, 20,'Paquebot') INSERT INTO NEW_FAMILLE (NFM_BG, NFM_BD, NFM_LIB) VALUES (21, 22, 'Voilier') 31

32 Voici maintenant comment s'expriment les principales requêtes de gestion de ce modèle d'arbre : Rechercher toutes les feuilles : Il s'agit simplement de rechercher les éléments dont la longueur de l'intervalle vaut un : SELECT * FROM NEW_FAMILLE WHERE NFM_BD - NFM_BG = 1 NFM_BG NFM_BD NFM_LIB Vélo Voiture Camion Side-car Trail Planche à voile Paquebot Voilier Rechercher tous les nœuds : Il suffit de rechercher tous les éléments dont la longueur de l'intervalle est supérieure à un : SELECT * FROM NEW_FAMILLE WHERE NFM_BD - NFM_BG > 1 NFM_BG NFM_BD NFM_LIB Transport Terrestre Marin Moto Toutes les feuilles sous un élément de référence : Dans ce cas il faut restreindre la plage de recherche des bords à ceux de l'élément, toujours en recherchant les intervalles de longueur un. Exemple: toutes les feuilles sous l'élément 'Terrestre' dont les bords droit et gauche sont : NFM_BG = 2 et NFM_BD = 15 SELECT * FROM NEW_FAMILLE WHERE NFM_BD - NFM_BG = 1 AND NFM_BG > 2 AND NFM_BD < 15 NFM_BG NFM_BD NFM_LIB Vélo Voiture Camion Side-car Trail 32

33 Afin de rendre les requêtes encore plus faciles, il est possible d ajouter le niveau de chaque élément dans l arbre (exemple : la planche à voile a un niveau égal à 2 (si transport égal 0)) et aussi de préciser l identifiant du père de l élément. Grâce à cette méthode la gestion de catégories et de sous catégories est simple. De plus, la fonction nested permet, via l administration, de créer ces hiérarchies facilement : lorsque l on souhaite créer une sous catégorie, il suffit de préciser le père de la catégorie lors de sa création et les bornes sont calculées automatiquement. Une fonction très utile pour la gestion de ces catégories est le glissédéposé : lorsque les catégories sont créées, il suffit de glisser une catégorie dans une autre pour que cette dernière devienne le son «père». Figure 14 : Gestion des catégories pour ce projet Génération d un menu : Avec la représentation intervallaire d arbre, la génération de menu peut se faire facilement. Pour cela, il suffit que l arborescence des catégories soit bien organisée et le menu correspondant peut être créé. De cette manière, même si les catégories sont modifiées (aussi bien leur nom que leur position) le menu pourra toujours être généré. Voici l algorithme générant le menu de «père-mathieu» : 33

34 * Résultat Différentes captures d écran sont disponibles en annexe. Figure 15.1 : Page d accueil de Père-mathieu.com Figure 15.2 : Aperçu d'une bonne affaire Figure 15.3 : Page de contact * Conclusion Ce projet m a beaucoup appris en terme de gestion de catégories et de création de menus. Jamais je n avais pensé que cela pouvait être géré de cette manière (représentation intervallaire). Ce projet étant une commande d un client, j ai dû avoir affaire à ses exigences : aussi bien d un point de vue affichage (emplacement des éléments) que technique (fonctions du site). Mais ce fut une expérience intéressante car lors du développement, on peut penser qu un élément du site soit bien fait (emplacement ou mise en page) alors que pour un utilisateur lambda ce n est pas du tout intuitif. Avoir un avis différent sur l application est une très bonne chose car la personne externe au projet ne perçoit pas de la même manière le travail qui a été effectué et se met à la place d un nouvel utilisateur (contrairement au développeur qui est fixé sur le travail tout au long de la création). 34

35 Kelamour.fr Projet réalisé pour un client de l entreprise. * Présentation et besoins de l application Kelamour.fr est un site Web pour jeunes internautes. Il permet de calculer, pour chaque jour, la compatibilité amoureuse entre deux prénoms. Pour cela, il suffit de renseigner les deux prénoms et la calculatrice donne le résultat. Différentes fonctions sont disponibles sur la page du résultat : La possibilité d intégrer la calculatrice sur le site des utilisateurs Permettre l envoi d à ses amis afin de faire connaitre le site Pouvoir s inscrire à la newsletter Pour les statistiques et la gestion du site, chaque test est enregistré (les deux prénoms et le pourcentage d affinité). La partie administration permet de connaître le nombre de tests effectués, les meilleurs résultats et les moins bons. De plus, la gestion de la publicité doit être présente (plugin sflexikhtmlplugin). * Analyse et développement Kelamour.fr est un simple de petite taille. Il comprend peu de pages et peu de fonctions. En raison du public visé la navigation et l utilisation de la calculatrice doivent être intuitives et claires. Le pourcentage d affinité est le résultat d un algorithme qui prend en compte différents paramètres : les noms, le jour et le mois. Pour un même couple de prénoms, le résultat est différent chaque jour. De ce fait, l utilisateur aura tendance à revenir sur le site régulièrement pour refaire le test. La page de résultat affiche le pourcentage ainsi qu une phrase paramétrable (via l administration). * Résultat Figure 16.1 : Page d accueil de kelamour.fr Figure 16.2 : Page de résultat 35

36 * Conclusion Ce projet n a pas de fonction particulière et a été réalisé rapidement. Dès sa mise en ligne, le site a accueilli un grand nombre de visiteurs. Le concept de la calculatrice de l amour semble donc séduire les jeunes internautes! De nombreux sites proposent ce même service. Cependant, kelamour.fr se démarque des autres par son design soigné. Ce projet a été une bonne expérience car il n a pas de fonction compliquée et a donc pu être réalisé rapidement. Les connaissances acquises sur Symfony avec les projets précédents ont aussi contribué à ne pas perdre de temps au niveau de l organisation du projet (il est vrai qu à la prise en mains de Symfony, il est arrivé que je cherche les fichiers adéquats.). 36

37 Quiz Ce projet n a pas été finalisé. * Présentation et besoins de l application Ce projet est un site Web où les visiteurs peuvent créer des questionnaires : Sondage : une seule question à choix multiples Enquête : plusieurs questions à choix multiples Quiz score : plusieurs questions à choix multiples. Pour chaque question une seule réponse est vraie. Le résultat est le nombre de bonnes réponses. Quiz personnalité : plusieurs questions à choix multiples. Toutes les réponses sont possibles. Chacune des réponses a une valeur, le résultat dépend du total de ces valeurs. La création de ces questionnaires peut se faire uniquement si l utilisateur a auparavant créé un compte. Tout utilisateur peut répondre à un questionnaire et lui ajouter un commentaire. Si l internaute est connecté à son compte alors son résultat sera enregistré. * Analyse de développement Le point technique de ce projet est la création d un questionnaire. Lors de la création du projet, on a vu que Symfony crée automatiquement les formulaires pour enregistrer des données dans la base. Les formulaires créés sont indépendants. Il a donc fallu les imbriquer. De cette manière la création d un questionnaire sera facile car un seul formulaire regroupera les informations du quiz, ses questions, ses réponses possibles et les résultats selon les réponses choisies. Symfony a une fonction qui permet d imbriquer des formulaires : fonction embedform. L insertion d un formulaire dans un autre se fait facilement. Pour illustrer ceci, prenons un formulaire de quiz auquel on imbrique une question : <?php class QuizForm extends sfform { $this->embedform( Formulaire du quiz, new QuestionForm) ; }?> 37