RecupNews et AdminNews

Transcription

1 IUT de BLAGNAC, TOULOUSE II Département Informatique 1, place Georges Brassens, BP BLAGNAC Cedex ToulouseWeb Avenue Emile Dewoitine BLAGNAC Récupérer et administrer les actualités toulousaines Rapport du stage effectué du 6 avril 2009 au 12 juin 2009 Destinataires : Tuteur pédagogique : Mme SOULE Gérante de ToulouseWeb : Mme Didelot Responsable de stage : M. RIOU Responsable technique : M. GASC Cyril PERRIN Promotion 2009

2

3 Récupérer et administrer les actualités toulousaines

4 Remerciements Je tiens à remercier : Mme Didelot pour m avoir accueilli dans son entreprise M. Riou, responsable de stage Je tiens également à remercier : M. Gasc, responsable technique, pour m avoir accompagné dans mes projets Tous les employés et stagiaires pour l ambiance sympathique Page 4

5 Sommaire Remerciements... 4 Table des illustrations... 8 Introduction... 9 Présentation de l entreprise Historique Ses activités Le portail Publicité Conception et hébergement de sites Web Référencement de sites Internet Divers Infrastructure matérielle Les locaux et les stations de travail Le serveur dédié Le personnel Ma place dans l entreprise Les projets réalisés Moyens matériels mis a disposition Travail en équipe Documentation Structure de fichiers Facilité d installation et adaptabilité des projets RecupNews Analyse Analyse du besoin Choix des technologies Conception Cas d utilisation Création des tables de données Développement Analyse des nouvelles technologies PHP orienté objet L extension curl Page 5

6 Les classes Classe Logs Classe ListeFlux Classe Flux Classe Item Classe news Classe FormattedString Intégration Tests et réparations de bogues Installation sur le serveur de production Recherche et intégration de flux RSS Conclusion sur le projet AdminNews Analyse Analyse du besoin Choix des technologies Conception Développement Analyse des nouvelles technologies PDO Zend Studio for Eclipse Adaptation des classes déjà existantes Nouvelles classes/fonctions et fichiers Surcouche JavaScript Intégration Tests et réparation de bogues Installation sur le serveur de production Conclusion sur le projet AdminVitrine Développement Réalisation des classes Adaptation de certains de mes librairies personnelles Intégration Tests et réparation de bogues Installation sur le serveur de production Conclusion sur le projet Page 6

7 Planning Conclusion Index lexical Bibliographie Abstract Page 7

8 Table des illustrations Figure 1 - Coccinelle de ToulouseWeb... 9 Figure 2 - Logo actuel du portail de ToulouseWeb Figure 3 - Exemple d'encadré publicitaire Figure 4 - Plan de l'iut de Blagnac à ToulouseWeb Figure 5 - Aperçu de Zend Studio for Eclipse Figure 6 - Accueil de la documentation Figure 7 - Documentation d'une fonction Figure 8 Le long formulaire de proposition d'actualité Figure 9 - Logo de RSS Figure 10 - Diagramme des cas d'utilisation de RecupNews Figure 11 - Tables de données des actualités avant Figure 12 - Tables de données des actualités après Figure 13 - Implémentation de l'interface Iterator Figure 14 Diagramme des classes de RecupNews Figure 15 - Utilisation de la classe Logs Figure 16 - Utilisation de l'implémentation de l'interface Iterator Figure 17 - Parcours d'objets instanciés des classes ListeFlux, Flux et Items Figure 18 - Exemple d'utilisation de la fonction sscanf() Figure 19 - Exemple d'utilisation des expressions régulières Figure 20 - Exemple d'utilisation de la classe FormattedString Figure 21 - RecupNews, liste des flux RSS enregistrés Figure 22 - RecupNews: ajouter d'un nouveau flux RSS Figure 23 - Ancien formulaire de validation des actualités Figure 24 - Ancien formulaire d'édition d'une actualité Figure 25 - Diagramme des cas d'utilisation d AdminNews Figure 26 - Aperçu d'une actualité sous AdminNews Figure 27 - Fonction JavaScript texttotextarea() Figure 28 - Exemple d'édition d'une actualité Figure 29 - Exemple d'édition d'une image d'une actualité Figure 30 - Aperçu de la liste des actualité sous AdminNews Figure 31 - Extrait de la vitrine des sites réalisés par ToulouseWeb Figure 32 - Aperçu d'adminvitrine Figure 33 - Première partie du planning Figure 34 - Deuxième partie du planning Page 8

9 Introduction ToulouseWeb 1 est le premier portail 2 Internet toulousain. Celui-ci est spécialisé dans la l élaboration de site Web et dans l information des activités culturelles toulousaines. Pour fonctionner, elle vend ses services de création de sites Web selon plusieurs formules et de l espace publicitaire sur leur portail. Le recours à Internet pour faire de la publicité, s est incroyablement bien démocratisé depuis les premières campagnes publicitaires, avec affichage de bannières. Ceci explique en grande partie pourquoi les clients de ToulouseWeb sont, pour la plupart d entre eux, des petites entreprises toulousaines, telles que des entreprises hôtelières ou de services, qui ont recours à ToulouseWeb afin de se constituer une vitrine 3 sur le Web, bénéficiant de la popularité du portail toulousain. Figure 1 - Coccinelle de ToulouseWeb Du 6 avril 2009 au 12 juin 2009, j ai effectué mon stage au sein de l entreprise ToulouseWeb, située juste à coté des pistes de l aéroport de Blagnac. Au cours de ce stage, j ai eu le plaisir de pouvoir développer deux utilitaires : récupérer et administrer les actualités toulousaines. Ces deux utilitaires permettent de chercher sur le Web du contenu et de l insérer dans les pages de ToulouseWeb, permettant ainsi d augmenter la visibilité du portail sur Internet. Plus largement, ce stage a été pour moi l opportunité d appréhender le fonctionnement d une agence Web ainsi que le métier de développeur Web. J ai pu notamment approfondir mes connaissances dans les langages PHP, XHTML et JavaScript. De plus, ce stage m a non seulement permis de comprendre les moyens techniques et humains à mettre en place pour l élaboration d une agence Web mais aussi d intégrer la réalisation d une agence Web dans mes objectifs professionnels. Au cours de ce rapport, nous allons étudier dans un premier temps le fonctionnement de l entreprise et du portail ToulouseWeb, en faisant une étude globale de son historique, de ses activités et de son personnel. Nous décrirons ensuite les aspects techniques sur le fonctionnement du portail et surtout le travail que j ai pu apporter. Pour finir, je conclurais sur le déroulement de mon stage de et son contexte. 1 ToulouseWeb : disponible à l adresse 2 Portail : un portail se définit, dans le monde de l Internet, comme un site fournissant un ensemble de services et de liens utiles à l internaute, et surtout, un point d entrée sur l Internet pour tous les utilisateurs qui ont besoin d accéder à certains de ces services 3 Vitrine : une vitrine a pour but de rendre visible une entreprise sur Internet Page 9

10 Présentation de l entreprise Historique La société ToulouseWeb fait partie des startups Internet, qui, comme bon nombre d entre elles, ont été crées lors du boom Internet en France, juste avant les années La date de création de ToulouseWeb remonte à Après le passage à l an 2000, la bulle des startups s est effondrée dans les marchés financiers, mettant en difficultés les entreprises du milieu de l Internet. Le portail toulousain n a pu échapper à cette crise, et deux ans plus tard, en 2002, les fondateurs cèdent l entreprise pour raison financière. En Août 2002, la société est rachetée par la gérante actuelle Mme. Didelot. A ce jour, l entreprise semble avoir repris le dessus sur la crise et les clients que compte ToulouseWeb, toujours plus nombreux, reflètent la bonne santé financière de l entreprise et de son expansion certaine dans l avenir. Ses activités Cette entreprise est une S.A.R.L 4 au capital de et concentre son activité pour l essentiel sur Internet. Voici un aperçu des différentes activités de ToulouseWeb : Le portail ToulouseWeb, c est avant tout un portail, un vecteur d information locale et régionale, qui offre une multitude d informations culturelles, économiques et sociales. De plus, ce portail propose une multitude de services annexes plus ou moins variés. Figure 2 - Logo actuel du portail de ToulouseWeb Le portail est ainsi composé de plusieurs parties : L espace culturel (cinéma, musique et théâtre) : qui informe les internautes toulousains de la programmation quotidien des événements culturels à venir (spectacle, festival, ) Les petites annonces : des milliers d annonces publiées par les utilisateurs du portail L annuaire Web : des milliers de sites Web en rapport avec l activité toulousaine mais aussi des sites Web de clients qui souhaitent être mis en avant monnayant une certaine somme d argent Utile : un très grand nombre de numéros d urgences (pompiers, hôpital, ), de bons plans (réductions), de bonnes adresses (restaurant, discothèques, ), 4 S.A.R.L. : Société à Responsabilité Limitée Page 10

11 ToulouseWeb, c est aussi un ensemble de sites spécialisés : ToulouseWeb Emploi : espace d offres et de demandes d emploi ToulouseWeb Etudiant : espace d informations sur la vie étudiante toulousaine ToulouseWeb Shop : boutique en ligne ToulouseWeb Enfant : espace d informations pour les parents et enfants ToulouseWeb Coquin: actualités nocturnes et libertines de la ville rose ToulouseWeb Aéronautique : actualités aéronautiques liés à l air et à l espace Les principaux concurrents du portail de ToulouseWeb sont : ToulouseBlog.fr ToulouseBy.net LaDepeche.fr Pilipili.com Publicité La première activité, la plus répandue parmi la demande client, est la vente d espaces publicitaires sur le portail. En effet, le site Internet de la société est le portail commercial n 1 à Toulouse, et de ce fait, il jouit d un important trafic de visiteurs, ainsi que d un excellent référencement sur les principaux moteurs de recherche (Google, Bing, Yahoo, ). On dénombre environ visiteurs uniques pour de pages vues par mois. Ainsi on s aperçoit que la publicité est une bonne source de revenu et qu il ne faut pas la négliger. Des outils de statistiques sont fournis aux clients, afin de suivre en temps réel, le nombre de clics sur un encadré ou une bannière. Les clients peuvent ainsi se rendre compte du potentiel de la publicité qu ils ont mis en place sur ToulouseWeb et éventuellement d ajuster leur stratégie. Figure 3 - Exemple d'encadré publicitaire Page 11

12 Conception et hébergement de sites Web La seconde activité, plus rémunératrice, mais moins prisée que la précédente, est la conception et l hébergement de sites Web en tour genre, pour les entreprises ou les particuliers. La méthode de création d un site Web est toujours la même, malgré certaines différences liées aux différentes technologies utilisées : Plusieurs maquettes 5 sont réalisées par un infographiste et sont proposées au client La maquette choisie est «informatisée» pour pouvoir l afficher dans un navigateur Web La programmation du site Web est réalisée par les développeurs Les technologies utilisées sont fonction de la formule choisie par le client : Pour un site animé : Flash Pour un site statique : XHTML, CSS et JavaScript Le langage de programmation utilisé côté serveur est le PHP. Le système de bases de données est MySQL. Ces derniers proposent un avantage certain, ils sont libres et surtout gratuits. L hébergement quant à lui s effectue sur un serveur dédié 6 situé à Paris. ToulouseWeb se charge de l hébergement de sites Web de ses clients sur celui-ci en proposant un serveur mutualisé 7. A titre indicatif, le serveur dédié de ToulouseWeb héberge à présent plus de 230 sites web de clients, ce qui témoigne de la bonne santé de l entreprise. Référencement de sites Internet L expérience dont bénéficie ToulouseWeb au niveau du référencement est très riche, et son portail commercial en est un exemple plus que probant. C est par le biais de cet argument que les commerciaux vendent des prestations de référencement de site, à certains clients, pour qu à leur tour ils puissent profiter du référencement de ToulouseWeb pour augmenter la popularité de leur site Web. Divers Enfin, certaines activités annexes et moins rémunératrices que les précédentes sont offertes par ToulouseWeb : la création de mailings listes pour certaines sociétés commerciales, la réalisation d affiches et de plaquette pour la communication, et l organisation de jeu-concours au sein du portail. 5 Maquette : graphique permettant de donner l'aperçu le plus juste du rendu final 6 Serveur dédié : Un serveur est dit dédié quand il est mis à disposition d'un seul client par un hébergeur et qui sera soit administrable à distance via le réseau Internet soit administré par l'hébergeur. (Wikipédia) 7 Serveur mutualisé : l'hébergement mutualisé est un concept d'hébergement internet, destiné principalement à des sites web, dans un environnement technique dont la caractéristique principale est d'être partagé par plusieurs utilisateurs. (Wikipédia) Page 12

13 Infrastructure matérielle Les locaux et les stations de travail Le siège de ToulouseWeb est situé à Blagnac, près de Toulouse, plus précisément de l ancien aéroport toulousain. L ensemble des locaux possède un accès Internet, desservie sur chaque poste par le biais d un réseau en étoile. La plupart des machines sont de configuration moyenne. Figure 4 - Plan de l'iut de Blagnac à ToulouseWeb De plus, étant une petite entreprise, les locaux ne sont pas très grands et l espace vient souvent à manquer, c est pourquoi nous étions 2 à 4 personnes dans la même pièce. Ceci dit, le fait d être plusieurs dans une pièce nous a permis d établir un contact plus facilement avec les employés ainsi que les autres stagiaires, plus nombreux que les employés. Le serveur dédié L ensemble des sites de ToulouseWeb sont hébergés sur un serveur dédié et les opérations de transferts de fichiers ainsi que de maintenance se font à distance depuis Blagnac. Quelques versions logicielles du serveur : Système d exploitation : Linux RedHat, noyau Serveur Web : Apache 2.0 Système de bases de données : MySQL a Serveur PHP : Page 13

14 Le personnel Ma place dans l entreprise Lors de mon stage, j ai pris le poste de développeur Web et coéquipier de Mehdi Lauters. M. Gasc était notre responsable technique et aussi notre client. C est donc avec lui que nous avons défini nos projets réalisés durant le stage. M. Riou quant à lui fut notre responsable de stage. Page 14

15 Les projets réalisés Dès mon arrivée au sein de l entreprise, Mehdi Lauters et moi-même avons été pris en charge, comme vu précédemment, par M. Gasc qui fut notre responsable technique ainsi que notre véritable client. Tous les projets demandés par ce dernier ont été réalisés en équipe avec Mehdi, chacun s occupant d une partie différente. Durant tout le stage, nous avons le plaisir de travailler ensemble sur les projets suivant : RecupNews : récupérer des actualités AdminNews : administrer des actualités AdminVitrine : administrer une vitrine de sites web Moyens matériels mis a disposition La configuration des ordinateurs présents à ToulouseWeb ne nous permettant pas de travailler dans de bonnes conditions, il nous a été demandé d apporter notre propre ordinateur. Au début du stage, j ai principalement utilisé Windows Vista avec les logiciels WampServer (Apache , PHP 5.2.8, MySQL a), Notepad Les projets que nous avions à réaliser m ont poussé à installer Ubuntu 9.04, pour pouvoir faire fonctionner le PHP en ligne de commande. Mehdi quant à lui utilise Kubuntu 8.04 avec les paquets : Apache 2.2.8, PHP 5.2.4, MySQL a, Kate Travail en équipe L une des grandes particularités de ce stage fut le travail en équipe. Cela nous permis d enrichir notre expérience en travail collaboratif. Nous avons donc du mettre en œuvre une répartition bien pensée des tâches au sein du groupe de travail ainsi que d utiliser la technologie disponible à notre avantage. Pour pouvoir travailler sur un même projet simultanément, nous l un de nous hébergeait sur son ordinateur le projet qu il mettait en partage sur le réseau pour que l autre puisse accéder aux fichiers. La répartition des tâches faisait que nous n avions pas à modifier un même fichier en même temps, ce qui aurait posé problème. A partir de notre deuxième projet, AdminNews, nous avons décidé d utiliser un IDE 8 compatible Linux et Windows : Zend Studio for Eclipse Nous avons ainsi pu tirer profit de ses nombreux avantages : Un vrai outil collaboratif : nous avons utilisé le système SVN 10 qui nous a permis de travailler sur un même projet sans se soucier des problèmes de partage de fichiers mais aussi de pouvoir avoir un historique avancé des modifications apportées au projet 8 IDE : environnement de développement intégré 9 Zend Studio for Eclipse : IDE commercial pour PHP développé par Zend Technologies, basé sur le plugin PHP Development Tools (PDT) pour la plateforme Eclipse (Wikipédia) Page 15

16 Un vrai éditeur : un système d auto complétion permet de guider l édition de script, la coloration syntaxique du code permet de mieux repérer les parties du script, un système de vérification syntaxique permet d éviter certaines erreurs, Des fonctionnalités utiles : un système de rechercher/remplacer dans toute l arborescence du projet, un système de tâches à effectuer, Figure 5 - Aperçu de Zend Studio for Eclipse Avec cette liste de nombreux avantages par rapport à un éditeur «classique» (Kate, Notepad++, ), nous avons finalement adopté Zend Studio for Eclipse dans nos projets personnels. Pour tester un projet, il y avait deux façons de procéder : Si le projet est un script générant une interface graphique : celui qui héberge le projet ajoute un alias à Apache qui pointe sur le projet, puis il autorise les accès au projet depuis le réseau pour que l autre puisse accéder au projet via l IP locale de la machine qui héberge Si le projet est un script en ligne de commande : celui qui héberge le projet (doit forcement utiliser une distribution Linux) active le protocole SSH 11 et crée un compte utilisateur pour que l autre puisse se connecter et lancer le script (utilisation de PuTTY 12 sur Windows) 10 SVN : Subversion (en abrégé SVN) est un système de gestion de versions, distribué sous licence Apache et BSD. Il a été conçu pour remplacer CVS. (Wikipédia) 11 SSH : Secure Shell (SSH) est à la fois un programme informatique et un protocole de communication sécurisé (Wikipédia) 12 PuTTY : PuTTY est un émulateur de terminal doublé d'un client pour les protocoles SSH, Telnet, rlogin, et TCP brut (Wikipédia) Page 16

17 Documentation Pour la génération de la documentation développeur, nous avons préféré utiliser Doxygen 13 à PHPDoc qui selon propose plus de fonctionnalités et génère une documentation plus clair. Pour pouvoir générer la documentation avec Doxygen il faut respecter des règles de commentaire de code, disponibles sur le site officiel Respecter les règles nous a forcé à bien commenter notre code ce qui, en plus de pouvoir génerer la documentation, nous permis de produire un code très lisible. Exemple d entête de fonction documentée : De la même façon que Zend Studio for Eclipse que nous utilisons à présent pour nos projets personnels, nous avons adopté ces règles de commentaire qui s avèrent très utiles. Figure 6 - Accueil de la documentation Figure 7 - Documentation d'une fonction 13 Doxygen : logiciel informatique libre permettant de créer de la documentation à partir du code source d'un programme (Wikipédia) Page 17

18 Structure de fichiers Travailler proprement est très important. Cela permet de faciliter les choses lorsqu on travaille à plusieurs et lorsque le projet doit être repris. C est pourquoi nous avons décidé d utiliser une structure de fichiers simple et clair pour tous nos projets. Exemple de structure (RecupNews) : conf/ : contient tous les fichiers de configuration doc/ : contient toutes la documentation (développeur et utilisateur) lib/class/ : contient toutes les classes lib/func/ : contient toutes les fonctions logs/ : contient les fichier de logs sql/ : contient les requetes SQL 14 à executer lors de l installation du projet Facilité d installation et adaptabilité des projets Plusieurs impératif furent fixés par M. Gasc, notre responsable technique, et notamment de réaliser des projets faciles à installer. Et pour cela, nous avons : réunis au sein d un même dossier les requêtes SQL à exécuter lors de l installation du projet créer un fichier de configuration qui permet non seulement de remplir rapidement et facilement des données nécessaires, les identifiants de connexion à la base de données par exemple, mais aussi d obtenir un projet adaptable Note sur les deux derniers chapitres Utiliser une bonne structure de fichiers ainsi que faire un projet facile d installation et adaptable sont importants et devraient être enseignés à l IUT pendant les cours de Web. De même que des notions sur le référencement. C est pourquoi je vous demande de faire remonter l information aux professeurs en question afin de pousser les élèves à travailler proprement. Merci d avance. 14 SQL : Structured Query Language, ou langage structuré de requêtes, est un pseudo-langage informatique (de type requête) standard et normalisé, destiné à interroger ou à manipuler une base de données relationnelle (Wikipédia) Page 18

19 RecupNews Analyse Analyse du besoin Notre premier projet fut de réaliser un utilitaire permettant de récupérer automatiquement les actualités toulousaines. L actualité est un des piliers du portail ToulouseWeb et le seul moyen d ajouter une actualité est de passer par un long formulaire. Ceci ne permettant pas d avoir un nombre conséquent d actualités et ToulouseWeb se devant d avoir un nombre important face à ses principaux concurrents, c est donc ici que notre utilitaire prend tout son importance. Figure 8 Le long formulaire de proposition d'actualité Page 19

20 Après quelques réflexions, nous avons décidé d exploiter les flux RSS 15 des sites Web officiels tels que Voici un exemple de flux RSS (mis en forme par le navigateur Firefox) : Item Titre et lien de l item Description de l item Notre utilitaire doit donc récupérer les actualités via plusieurs flux RSS que l administrateur lui donne, met en forme ces actualités et les enregistre dans la base de données. Par la suite, elles sont traitées comme n importe quelle autre actualité provenant du formulaire, c'est-à-dire que l administrateur pourra modifier son contenu s il est erroné et valider ou non en fonction de la pertinence de l actualité. Un autre problème se pose alors : un flux RSS ne proposant qu un titre et qu une description par actualité, comment récupérer d autres informations, comme le lieu de l événement ou encore le prix d entrée s il s agit d un flux qui informent des prochains spectacles, qu il était possible de saisir via le formulaire? Nous avons choisi d extraire ces informations dans la page Web liée à l actualité (disponible lorsqu on clique sur l item d une actualité). De là est venue l idée de formatage, que l on expliquera avec la classe FormattedString. Figure 9 - Logo de RSS 15 RSS : désigne une famille de formats XML utilisés pour la syndication de contenu Web. L'usage le plus courant est de recevoir la liste des nouveaux articles publiés sur un blog ou un site d'informations, avec un résumé pour chaque article. (Wikipédia) Page 20

21 Choix des technologies Le portail de ToulouseWeb reposant sur un serveur Web utilisant PHP/MySQL, nous avons donc décidé d utiliser PHP comme langage de programmation, en ligne de commande afin de pouvoir facilement établir des tâches cron 16, et MySQL comme SGBD 17. Pour récupérer des données depuis un site Web telles qu un flux RSS ou bien une image, nous avons utilisé l extension PHP curl 18. Conception Cas d utilisation Dès le début, nous avons mis en évidence les différentes tâches qui devront être réalisées via notre utilitaire : Figure 10 - Diagramme des cas d'utilisation de RecupNews Nous pouvons donc remarqué deux parties de tâches : La première partie, réservée à l administrateur, permet d ajouter et supprimer un flux RSS La deuxième partie, réservée à un utilisateur ou bien l ordinateur via une tâche cron, permet de mettre à jour les actualités d un ou plusieurs flux RSS 16 Cron : nom d'un programme qui permet aux utilisateurs des systèmes Unix d'exécuter automatiquement des scripts (Wikipédia) 17 SGBD : Système de Gestion de Base de Données 18 curl : Client URL Request Library, ce logiciel curl est une interface en ligne de commande destinée à récupérer le contenu d'une ressource accessible par un réseau informatique (Wikipédia) Page 21

22 Création des tables de données Avant toute chose, nous avons commencé par faire une courte analyse de l existant, nous avons vu que les actualités sont enregistrées à l aide de deux tables de données, la première qui contient les catégories et la deuxième qui contient les actualités. La seule modification que nous avons apportée à la table des actualités fut d ajouter un champ permettant de différencier les actualités rentrées via le formulaire de celles récupérées via notre utilitaire. Ce champ indique pour chaque actualité sa provenance : vide pour une actualité provenant du formulaire et pour les actualités provenant d un flux RSS. Afin de pouvoir sauvegarder les différents flux RSS et les paramètres qui leur sont associés, nous avons créé une table de données supplémentaire. Voici un petit schéma explicatif des modifications apportées : Figure 11 - Tables de données des actualités avant Figure 12 - Tables de données des actualités après Explications des champs de la table des flux RSS : url : url du flux RSS infosflux : informations supplémentaires telle que la catégorie des actualités qu il contient datemaj : date de la dernière mise à jour du flux RSS Les autres champs : formatage des données dans le titre, la description et la page d un item Page 22

23 Développement Pour ce projet nous nous sommes répartis les tâches de la façon suivante : Mehdi s occupait de créer les classes métiers Moi, je m occupais de l extraction des données et de l intégration Analyse des nouvelles technologies PHP orienté objet Fort d une longue expérience personnelle dans le PHP et ayant découvert la programmation objet à l IUT avec Java, ce projet fut pour moi l opportunité de pratiquer le PHP orienté objet. Le concept objet étant le domaine de prédilection de Java et les cours de Java à l IUT étant assez complets, j ai surtout appris la syntaxe à utiliser. Dans ce projet, j ai pu implémenter l interface Iterator qui permet le parcours d un objet qui l implémente de façon aisée avec un foreach() par exemple. Figure 13 - Implémentation de l'interface Iterator L extension curl Afin de pouvoir télécharger des données telles que les flux RSS ou bien des images liées aux actualités, il nous fallait une solution. C est pourquoi notre responsable technique nous a conseillé d utiliser curl qui pour lui était la meilleure solution. Mehdi a ainsi pu se familiariser avec l extension pour développer ses classes. Les classes Pour les besoins du projet, nous avons du développer 6 classes : Logs : enregistrer une trace des actions réalisées avec l utilitaire et notamment les erreurs Items : contient les données d un item d un flux RSS tels que le titre, la description, Flux : permet de télécharger les items d un flux RSS et contient donc des items ListeFlux : contient la liste des flux RSS FormattedString : extrait des données à partir d une chaine et d un formatage donnés News : permet de créer une actualité Page 23

24 Voici le diagramme correspondant : Figure 14 Diagramme des classes de RecupNews Classe Logs Le fait de pouvoir enregistrer toutes les opérations effectuées avec notre utilitaire fut un des impératifs fixés par M. Gasc dès le début du projet. Il nous fallait donc une classe qui permettrait d enregistrer dans des fichiers de log 19 Mehdi s est chargé de développer cette classe. Lors de son utilisation, cette classe fut très facile à utiliser : il suffit d instancier la classe en début de fichier et d utiliser la méthode ajouter() sur l objet de log créé pour ajouter un événement, l un des paramètres définissant s il s agit d un message d erreur ou non. Exemple : Figure 15 - Utilisation de la classe Logs 19 Fichier de log : En informatique, le concept d'historique des événements ou de logging désigne l'enregistrement séquentiel dans un fichier ou une base de données de tous les événements affectant un processus particulier (application, activité d'un réseau informatique ). Le journal (en anglais log file ou plus simplement log), désigne alors le fichier contenant ces enregistrements. Page 24

25 Classe ListeFlux Cette classe permet de créer un objet qui contient tous les flux RSS. Cette classe, développée par Mehdi, a la bonne particularité d implémenter l interface Iterator ce qui permet de lister de lister les flux dans un foreach(), exemple : Figure 16 - Utilisation de l'implémentation de l'interface Iterator Classe Flux Cette classe, une nouvelle fois développé par Mehdi, permet de téléchargé les items d un flux RSS et de chargé les différentes informations disponibles sur le flux RSS, contenues dans la table de données des flux RSS. Pour cela, elle utilise curl, pour télécharger le flux RSS, et des classes DOM 20, pour le manipuler, de la SPL 21. Elle permet également de tester si un flux RSS, dont l url est donné, s il est enregistré dans la base de données. Lors de l intégration, cela m a permis notamment de vérifier s il l utilisateur ne fournit pas des données incohérentes. Classe Item Cette classe, encore développée par Mehdi, permet d encapsuler les données d un item et de télécharger le contenu de la page du lien hypertexte de l item. Elle permet également de téléchargé une image. Lors de l intégration, ces trois dernières classes ont vraiment été très pratiques à utiliser, d autant plus que ListeFlux et Flux implémentent toutes les deux Iterator. Exemple d utilisation : Figure 17 - Parcours d'objets instanciés des classes ListeFlux, Flux et Items 20 DOM : Document Object Model, recommandation du W3C qui décrit une interface indépendante de tout langage de programmation et de toute plate-forme, permettant à des programmes informatiques et à des scripts d'accéder ou de mettre à jour le contenu, la structure ou le style de documents (Wikipédia) 21 SPL: Standard PHP Library, librairie de classes et d'interfaces PHP Page 25

26 Classe news Cette classe, une nouvelle fois développé par Mehdi, permet de créer une actualité. Elle permet aussi de savoir si une actualité a déjà été enregistrée ou non. Classe FormattedString Nos avons vu précédemment que récupérer uniquement le titre et la description d un item ne suffit pas, il faut pouvoir récupérer d autres informations telles que le lieu de l événement ou encore le prix d entrée s il s agit d un flux qui informent des prochains spectacles. Nous avons choisi d extraire ces informations dans la page Web liée à l actualité (disponible lorsqu on clique sur l item d une actualité). Après réflexion, j ai décidé de créer une classe dédiée à l extraction des données. Il suffirait de créer une instance de la classe en passant la page Web ainsi que le formatage des données en paramètre au constructeur et la l objet retrouverait les données. Deux problèmes se posaient : Extraire correctement des données dans n importe quelle chaine de caractères Elaborer un système utilisable par un utilisateur non expert des expressions régulières 22 Extraction des données Pour extraire les données, j ai d abord pensé à l utilisation de la fonction sscanf() 23 qui permet de récupérer les données contenu dans une chaine dont le formatage est donné. Exemple d utilisation : Figure 18 - Exemple d'utilisation de la fonction sscanf() 22 Expression régulière : une chaîne de caractères que l on appelle parfois un motif et qui décrit un ensemble de chaînes de caractères possibles selon une syntaxe précise (Wikipédia) 23 sscanf() : mixed sscanf ( string $str, string $format [, mixed &$... ] ) $str : la chaine à analyser $format : le format interprété pour la chaîne str : variables passées par référence qui contiendront les valeurs de l'analyse Page 26

27 Après quelques tests, la fonction sscanf() marche bien mais n a pas été pensé dans le but de récupérer des données dans des chaines complexes comme une page Web qui comprend des centaines de lignes. C est alors que j ai pensé à l utilisation des expressions régulières que j avais déjà manipulées auparavant et qui permettent de faire des choses assez puissantes. Exemple d utilisation : Figure 19 - Exemple d'utilisation des expressions régulières Nous pouvons voir d après cet exemple que les expressions régulières permettent de reconnaitre différentes données contenues dans une page HTML mais ne sont pas très adaptées pour une personne qui ne connait pas ou très peu les expressions régulières. Faciliter la description des formats des données Après réflexion, j ai décidé d utiliser un système de raccourcis. C'est-à-dire qu au lieu d écrire un motif, qui n est pas forcement évident pour tout le monde, il suffirait d écrire son raccourci. Après de nombreux tests, j ai de mettre place quatre raccourcis : %s : chaine de caractère %d : nombre %c : caractère %spaces : caractères d espacement Page 27

28 D après le dernier exemple sur l utilisation des expressions, nous pouvons voir qu il faut mettre entre parenthèse les éléments à récupérer. J ai gardé ce principe en ajoutant le fait que pour chaque pair de parenthèse, il faut savoir de quelle donnée il s agit (date d événement, site Web, ) et pour cela il faut spécifier la liste du nom des données à récupérer. C est pourquoi le constructeur de FormattedString dispose de 3 paramètres obligatoires : la chaine à analyser, le format et la liste des noms des données à récupérer. Exemple d utilisation : Figure 20 - Exemple d'utilisation de la classe FormattedString Nous pouvons maintenant expliquer les champs dans la table de données des flux RSS concernant le formatage des données. Pour chaque source d information (titre, description et page de l item) un formatage est possible et donne donc lieu aux 6 champs vus précédemment : formatagetitre, formatageflux et formatagepage : formats listechampstitre, listechampsflux et listechampspage. : listes des noms des données Pour de plus amples informations sur le fonctionnement interne de cette classe, merci de bien vouloir vous rendre dans la documentation développeur disponible dans /doc/dev/html/index.html ou bien dans le fichier PHP de la classe disponible ici : /lib/class/formattedstring.php. Intégration L intégration fut pour moi l occasion d utiliser les classes développées jusque là. Relativement peu de problèmes sont apparus. J ai pu également pu utiliser le PHP en ligne de commande, ce que je n avais jamais fait auparavant. Exemple d interaction avec le clavier en PHP : Comme vu précédemment, la plupart des classes implémentent l interface Iterator ce qui m a beaucoup aidé lors de l intégration de ces classes. Afin de rendre l expérience utilisateur la meilleure possible, l interface étant en ligne de commande, j ai mis en place un système de coloration afin de bien pouvoir identifier les différentes Page 28

29 parties qui sont affichées à l écran. De plus, j ai minimisé la forme pour plus laisser place au contenu, les messages sont clairs et concis. Figure 21 - RecupNews, liste des flux RSS enregistrés Figure 22 - RecupNews: ajouter d'un nouveau flux RSS Page 29

30 Tests et réparations de bogues Nous avons effectué de nombreux tests afin de détecter l existence de bogues. Il s est avérer que nous avions pas mal de problèmes liés à l extraction des données et d autres plus minimes. Après de longs efforts, tous les problèmes furent réglés. Installation sur le serveur de production Quand le moment de l installation sur le serveur de production fut venu, nous avons déposé notre projet sur l ordinateur de notre responsable technique, M. Gasc, qui se chargea de paramétrer RecupNews à sa guise à travers le fichier de configuration. Une fois les fichiers mis en ligne, le tout marchait admirablement bien et nous étions contents de notre travail, de même pour M. Gasc. Recherche et intégration de flux RSS Le but du projet étant de récupérer des actualités via des flux RSS, nous avons été chargés, Mehdi et moi-même, de trouver de nombreux flux RSS en rapport avec la vie toulousaine. Après avoir récupérer des dizaines de flux RSS, nous avons cherché les meilleurs formatages possibles afin d extraire le plus de données possible des actualités. A partir de ces informations, nous avons crée une requête SQL qui insère les nouveaux flux RSS dans la table de donnée correspondante sans avoir à passer par l interface de RecupNews pour chaque flux RSS. Juste après, nous avons lancé RecupNews qui a très bien récupérer toutes les actualités de tous les flux RSS : plus de 400 actualités au total. Notre objectif, de proposer un utilitaire permettant de récupérer automatique des actualités, été rempli. Conclusion sur le projet J ai trouvé ce projet très intéressant non seulement d un point de vue technique ou j ai pu apprendre de nouvelles choses mais aussi d un point de vue humain en travaillant en collaboration avec Mehdi. Du point de vue technique, j ai pu apprendre : la programmation objet en PHP l utilisation d un fichier de configuration unique : qui permet non seulement d avoir un projet facile à installer mais aussi adaptable en fonction des besoins l utilisation de générateurs de documentation : qui force a bien commenter le code et qui permet surtout d obtenir une documentation développeur digne de ce nom l utilisation du protocole SSH : qui se révèle très pratique pour accéder à un terminal Linux à distance, depuis un autre ordinateur sous Linux ou bien sous Windows De plus, ce projet étant adaptable en fonction des besoins, il pourrait nous être utile à des fins personnelles. Nous avons déjà envisagé avec Mehdi d en faire un script libre et donc de le proposer gratuitement. Page 30

31 AdminNews Nous avions finis notre projet et il nous reste un mois de stage devant nous alors notre responsable technique, visiblement étonné de notre rapidité et de notre capacité à travailler à deux, nous a donné un deuxième projet dans la continuité du premier. Ainsi, après avoir réalisé un utilitaire de récupération automatique d actualités, nous avons du développé un système d administration de ces actualités afin de remplacer celui existant qui commençait à se faire vieux. Analyse Analyse du besoin Le système d administration des actualités existant était très mal conçu et ne permettait vraiment pas de faire un travail rapide et efficace. C est pourquoi notre responsable a jugé bon de mettre un coup de jeune à celui-ci. Figure 24 - Ancien formulaire d'édition d'une actualité Figure 23 - Ancien formulaire de validation des actualités Page 31

32 Choix des technologies Toujours pour les même raisons, le serveur de ToulouseWeb reposant sur un serveur Web reposant sur PHP/MySQL, nous avons décidé de garder le même langage et le même SGBD que pour RecupNews. Une nouveauté malgré tout, cette fois ci, nous devions réaliser une interface Web. Nous avons choisi d utiliser des standards que sont XHTML, Javascript et CSS. Nous verrons cela en détail par la suite. Conception Les tâches que devait réaliser notre utilitaire se limitaient à : valider une actualité, refuser une actualité et modifier une actualité. Voici un petit diagramme explicatif : Figure 25 - Diagramme des cas d'utilisation d AdminNews Pour ce qui est de l analyse des tables de données enregistrant les actualités, il s agit des mêmes tables vues précédemment avec RecupNews : une table qui contient les catégories et une qui contient toutes les actualités. Développement Pour ce projet, nous nous sommes repartis les tâches de la façon suivante : Mehdi s occupait d adapter les classes développées pour RecupNews Moi, je m occupais de l intégration des classes et de la surcouche JavaScript Analyse des nouvelles technologies PDO 24 Notre responsable technique nous a vivement conseillé d utiliser PDO. Pour ma part, je n ai pas eu à l utiliser car je m occupais de l intégration des classes qui s occupait elle-même de faire les requêtes SQL. C est donc Mehdi qui s est chargé de l utiliser dans ses classes. Zend Studio for Eclipse Déjà décris précédemment à propos du travail d équipe, je ne m étendrais pas une nouvelle fois sur le sujet. Merci de bien vouloir vous reportez au paragraphe sur le travail d équipe pour un rappel sur les nombreux avantages sur Zend Studio for Eclipse qui nous ont poussés à l utiliser. 24 PDO : PHP Data Objects définit une interface pour accéder à une base de données (ManuelPHP) Page 32

33 Adaptation des classes déjà existantes Nous avions déjà développé quelques classes pour RecupNews traitant des actualités. Nous avons donc décidé de tout simplement les réutiliser. Cependant, Mehdi a du procédé à des adaptations pour répondre aux nouveaux besoins mais aussi de mettre en place l utilisation de PDO. Etant donné que Mehdi s est chargé de cette partie, je vous renvoi donc à son dossier pour en savoir plus sur l adaptation des classes : News : permet de créer, charger, modifier et supprimer une actualité Logs : enregistrer une trace des actions réalisées avec l utilitaire et notamment les erreurs Nouvelles classes/fonctions et fichiers De même que précédemment, Mehdi s est chargé du développement de nouvelles classes, fonction et fichiers que voici : ListeNews : liste d actualités, implémentant les interfaces IteratorAggregate, Countable et ArrayAccess permettant un parcours facile des actualités lors de l intégration Ajax : fichier PHP permettant d effectuer toutes les requêtes AJAX Recherche : fonction permettant d effectuer une recherche dans les actualités Surcouche JavaScript Afin d être en rupture totale avec le précédant utilitaire d administration et donc de proposer une interface fonctionnel et ergonomique, j ai décidé d utiliser un maximum les capacités offertes par JavaSript. Le but étant également d éviter au maximum les rechargements de page et éviter ainsi la surcharge du serveur et de la perte de temps lors de l administration des actualités. Une donnée de l actualité Bouton valider Bouton refuser Actualité Figure 26 - Aperçu d'une actualité sous AdminNews Page 33

34 Après de longs efforts : mission réussie! Plus aucun rechargement de page n est effectué, excepté lors d une recherche dans les actualités. Mehdi s occupant du fichier gérant les reqûetes AJAX coté PHP, ce résultat est du à une étroite collaboration. Désormais, lorsque l on désire valider ou refuser une actualité, un message de confirmation s affiche, on clique et l actualité est validée ou refusée puis disparait de la liste des actualités à valider. Pour éditer une actualité, il suffit de cliquer sur un champ que l on désire modifier et le texte est automatiquement remplacé un champ input/textarea pour pouvoir effectuer la modification. Il ne reste plus qu à cliquer sur le bouton enregistrer et la modification est enregistré. Voici le code de la fonction qui se charge de remplacer le texte d un champ par un textarea : Figure 27 - Fonction JavaScript texttotextarea() Page 34

35 N étant pas l objectif dans ce rapport, je n étalerais pas toutes les fonction, donc pour de plus amples informations sur les fonctions JavaScript développées, merci de bien vouloir vous rendre dans la documentation développeur disponible dans /doc/dev/html/index.html ou bien dans les fichiers JavaScript disponibles ici : /js/ manipulateelements.js, /js/ interactionsajax.js et /js/divers.js Figure 28 - Exemple d'édition d'une actualité Pour ce qui est de l image liée à une actualité, il suffit de cliquer sur lien d édition de l image situé à coté, un champ input remplace l image automatiquement. Il ne reste plus qu à cliquer sur le bouton enregistrer et l image est envoyée sans rechargement de page. Pour cette partie, j ai décidé d utiliser une iframe, masquée via CSS, qui est pointée par le formulaire d envoi de l image. Figure 29 - Exemple d'édition d'une image d'une actualité Page 35

36 Listes rétractables Rapport de stage Pour chaque «action AJAX» sur une actualité, un message d attente s affiche en haut de cette actualité afin d indiquer à l utilisateur une activité de la part du serveur. Toutes les règles de commentaire vus précédemment pour PHP sont valables pour JavaScript, ce qui permet de bénéficier des même avantages également pour les fonctions en JavaScript. Intégration L intégration fut pour moi l occasion de réaliser une interface fonctionnelle et ergonomique en alliant au mieux les technologies PHP, XHTML, JavaScript et CSS. Figure 30 - Aperçu de la liste des actualité sous AdminNews A noter que logos utilisés font partie de la bibliothèque de logos Silk créée par Mark James et disponible à l adresse Ils sont sous licence Creative Commons Attribution 3.0, ce qui nous autorise a les utilisé gratuitement, en n oubliant pas de citer la source. Tests et réparation de bogues Lors de nos tests, nous nous sommes aperçu qu il y avait un problème au niveau de l encodage des caractères après la modification d une actualité, ce qui sous entend qu il y a un problème entre le champ input de la page et l insertion dans la base de données, sachant que les données lors de l enregistrement sont à fois manipuler par JavaScript et par PHP. Nous avons travaillé dessus afin d être sûre de l encodage des caractères, de préférence UTF8, à chaque endroit où passent les données et nous avons finalement réussi à régler le problème. Page 36

37 Installation sur le serveur de production A l installation sur le serveur de production : même manipulation que pour RecupNews pour un même résultat. AdminNews marchait très bien et notre responsable technique, M. Gasc, en été très content. L ancien formulaire est maintenant définitivement à oublier. Nous avions, avec, contribué à une belle avancée de ToulouseWeb en termes en récupération et administration de contenu, aidant ainsi le portail toulousain à mieux se faire connaître des moteurs de recherche. Conclusion sur le projet J ai trouvé ce deuxième projet, bien que fondamentalement différent par rapport au premier en ce qui me concerne, également très intéressant. J ai notamment plus enrichir mes acquis en JavaScript qui est de plus en plus utilisé dans le monde Web et permet d améliorer grandement l expérience utilisateur. AdminVitrine Il nous restait quelques jours et voyant la rapidité à laquelle nous développions, notre responsable technique nous a chargé d un dernier petit projet : AdminVitrine. Celui a pour but d administrer la vitrine montrant tous les sites Web réalisés pour des clients de ToulouseWeb aux futurs clients potentiels. Figure 31 - Extrait de la vitrine des sites réalisés par ToulouseWeb La simplicité de l utilitaire ne nous a pas encouragés à faire d étape d analyse et de conception, nous avons donc directement «attaquer» le code. Nous avons malgré tout planifié et reparti les tâches à l oral afin de ne pas avoir de divergence lors du développement. Page 37

38 Développement Réalisation des classes Comme à notre habitude, Mehdi s est occupé du cœur de l utilitaire, je vous renvois donc à son dossier pour de plus amples informations sur la réalisation des classes. Adaptation de certains de mes librairies personnelles Afin de gagner du temps, j ai mis à disposition pour ce projet des librairies de fonction personnelles couvrant plusieurs besoins : Génération de champs de formulaire Gestion de l upload d un fichier Gestion du redimensionnement d une image Intégration L intégration de ce projet fut vraiment très simple. L essentiel du travail ayant déjà été réalisé à travers les classes de Mehdi et mes librairies personnelles. Figure 32 - Aperçu d'adminvitrine Tests et réparation de bogues Lors de nos tests, nous n avons pas, ou très peu, détecté de problèmes. Installation sur le serveur de production A l installation sur le serveur de production, tout s est bien déroulé. Conclusion sur le projet Le projet étant simplissime et très court, j en ai seulement retenu que Mehdi et moi-même étions à l aise au travail à plusieurs, nous avions trouvé nos repères. Planning Page 38