Romain SERGEANT

IUT de Reims Dpartement Informatique

Rapport de stage Cration d'un site Web sous Joomla

Informatique

Reims Champagne Hockey 41 chausse Bocquaine - 51100 Reims

Avril Juin 2009

-2Romain Sergeant Rapport de stage Reims Champagne Hockey

Cration d'un site Web sous Joomla

Romain Sergeant

Rsum : Ce rapport porte sur la cration et le dveloppement du nouveau site Web du club de hockey sur glace Reims Champagne Hockey avec le systme de gestion de contenu Joomla! ,ainsi que sur la formation de ses futurs utilisateurs. Mots-cls : Site Web, CMS, Joomla!, PHP, MySQL.

-3Romain Sergeant Rapport de stage Reims Champagne Hockey

Remerciements
Je tiens remercier l'association Reims Champagne Hockey pour l'accueil qui m'a t rserv et

particulirement M. Marc Lefvre , responsable du service communication et tuteur de ce stage, pour le projet qui m'a t confi. Mes remerciements vont aussi aux membres de l'agence 800.600 pour leur participation bnvole et le temps qu'ils ont consacr l'laboration de la charte graphique du site, malgr leur charge de travail. Je souhaite galement remercier M. Florent Notelet pour son implication dans l'administration et la gestion du forum. Enfin, je souhaite remercier tous les bnvoles de l'association pour le soutien et la contribution apportes ce projet.

-4Romain Sergeant Rapport de stage Reims Champagne Hockey

Table des matires

1. 2. Table des sigles et des abrviations Introduction Prsentation de l'association 2.1 Gnralits 2.2 Historique 2.3 Environnement humain 2.4 Site Web existant L'environnement informatique Travail personnel 4.1 Objectifs 4.2 Analyse 4.2.1 Arborescence du site Web 4.2.2 Mthodes de travail 4.3 Dveloppement 4.3.1 Le template 4.3.2 Agencement des modules 4.3.3 Gestion des joueurs : mise en uvre des mthodes de travail 4.4 Gestion des utilisateurs Conclusion Bibliographie Annexes 7.1 Cahier des charges 7.2 Extrait de la page d'accueil de l'ancien site Web 7.3 Panneau d'administration de Joomla! 7.4 Position des modules du template Sport line 7.5 Capture d'cran de la nouvelle page d'accueil 6 7 8 8 8 9 10 11 15 15 16 16 19 23 23 24 29 35 38 39 40 41 46 47 48 49

3. 4.

5. 6. 7.

-5Romain Sergeant Rapport de stage Reims Champagne Hockey

Table des sigles et des abrviations

CMS ( Content Management System ) : Le Systme de Gestion de Contenu est un type de logiciels destins la cration et la mise jour de sites et d'applications Web. Open Source : Ce terme dsigne les logiciels dont la licence permet sa libre redistribution, ainsi que l'accs en lecture et en criture de son code source. BackEnd / FrontEnd : cela dsigne la diffrence entre le panneau d'administration de Joomla! (BackEnd) et la partie visible du site par les utilisateurs ( FrontEnd ). Extensions : Ce sont des applications complmentaires Joomla! pour grer la mise en forme ou pour ajouter des nouveaux services . Les extensions sont classes en 4 catgories : les composants, les modules, les plugins et les templates. La version standard de Joomla! intgre un certain nombre dextensions. Composant : C'est une mini-application intgre un site Web Joomla! qui possde sa propre interface de configuration et qui constitue la majeure partie des pages d'un site Web ( gestion du contenu, authentification d'utilisateurs, gestion de formulaires ). Module : Un module est un bloc que l'on trouve un certain emplacement dans le corps de la page Web ( colonne de gauche , de droite , pied de page ). Les modules sont souvent associs des composants, comme par exemple un module qui affichera des images alatoires d'une galerie d'images gre par un composant. Plug in : Ce sont des morceaux de code activs sur un vnement. L'excution de n'importe quelle partie de Joomla!, que ce soit un module ou un composant, peut dclencher un vnement et alors les plug ins associs cet vnement sexcuteront. Template : Il gre toute la partie graphique d'un site Web : les couleurs des caractres et des fonds, la police des caractres, les cadres, les menus ...
Menu : Cest une liste dlments, disposs de faon verticale ou horizontale selon le module choisi

pour lafficher. Lappui sur un lment du menu provoque laffichage dune page avec ses modules et ses composants.

-6Romain Sergeant Rapport de stage Reims Champagne Hockey

1. Introduction
Dans le cadre de mon stage de deuxime anne de DUT Informatique, j'ai t accueilli du 6 avril au 12 juin 2009 au sein du Club de Hockey de Reims (Reims Champagne Hockey) la patinoire Bocquaine. Les Phnix, qui constituent l'quipe snior de ce club de hockey sur glace, voluent depuis 2007 en Division 1 . Un site Web attractif, dynamique et interactif, autant pour son administration que pour son utilisation, est alors ncessaire au bon fonctionnement et la communication interne et externe d'une telle structure. L'ancien site Web de ce club ne correspondant pas aux attentes de ses utilisateurs, ma mission fut de recrer entirement un site Web rpondant aux critres noncs ci-dessus. Mais le but du stage de seconde anne fut galement de me mettre en contact avec le monde du travail, cela pour me permettre davoir une premire exprience professionnelle et de mettre en pratique toutes les connaissances acquises tout au long de ma formation lIUT. Vous verrez donc tout au long de ce rapport le droulement de ce stage, comment les comptences acquises lIUT ont t mises en pratique, et lapport que ce stage a t, aussi bien au niveau des comptences quau niveau du vcu professionnel. Tout d'abord, je vous prsenterais l'association dans laquelle j'ai effectu mon stage, ainsi que les diffrents moyens et outils informatiques que celle-ci a mis ma disposition. J'exposerais ensuite les diffrentes mthodes de travail que j'ai utilis sous Joomla!, avant de les illustrer par le choix du template utilis pour dfinir la charte graphique du site Internet mais aussi sa structure ainsi que par un exemple concret de leur application : la mise en place d'un gestionnaire de joueurs et de ses diffrentes applications. Enfin, je conclurais par la formation et la gestion des diffrents utilisateurs qui seront amens l'administration du site Internet, lment nouveau dans ma formation.

-7Romain Sergeant Rapport de stage Reims Champagne Hockey

2. Prsentation de l'association
2.1 Gnralits
Le Reims Champagne Hockey est un club de Hockey sur glace de la ville de Reims fond en 2002 et voluant actuellement au second niveau national ( Division 1 ) grce l'quipe Les Phnix. Arrive en dixime position lors de la dernire saison, cette quipe a l'ambition d'arriver dans les huit premires quipes de cette ligue l'anne prochaine. L'association dispose de deux sites o se droulent ses entrainements et ses matchs : la patinoire Bocquaine et la patinoire Jacques Barot, toutes deux situes dans l'agglomration rmoise. Le bureau de l'association est situ la patinoire Bocquaine, lieu o mon stage s'est droul. J'ai donc bnfici d'un des trois bureaux de la patinoire Bocquaine, mitoyen de celui occup par mon matre de stage, le troisime tant occup par le Club de Patinage Artistique.

2.2 Historique

Juillet 2002 Cration du Reims Champagne Hockey. Les licencis se rpartissent dans les 8 catgories existantes (cole de glace, Moustiques, Poussins, Benjamins, Minimes, Cadets, Loisirs, Senior D3). 5 Octobre 2002 Premier match officiel du Reims Champagne Hockey, l'quipe de Reims affrontant en troisime division l'quipe de Wasquehal. Victoire des "bleus" 14-5. Le premier but de l'histoire du RCH est marqu par William PLACE. Saison 2003/2004 - Champion de France - Cadet Excellence. - Cration de la catgorie "fminine", elle ne compte qu'une dizaine de joueuses, mais participe de nombreux tournois. - L'quipe Snior accde la 2e division. -8Romain Sergeant Rapport de stage Reims Champagne Hockey

Saison 2004/2005 - Les espoirs remportent le titre de Vice-Champion de France Espoir Excellence (8 mai). - Vice-Champion de France D2B des Sniors. - L'quipe Espoir (juniors) accde aux championnats de France Excellence. Saison 2005/2006 Cration d'une nouvelle section : Loisir initiation jeunes Saison 2007/2008 Les Phenix passent en premire division. Saison 2008/2009 Les Phnix finissent 10me du Championnat de France D1

2.3 Environnement humain

Image 1 : Organigramme du service Communication

Pendant toute la dure de ce stage, j'ai travaill en troite collaboration avec diffrents bnvoles de l'association, ceux-ci occupant des rles aussi divers qu'importants la russite de ma mission. La bonne entente rgnant entre les membres de l'association m'a permis de m'intgrer rapidement.

-9Romain Sergeant Rapport de stage Reims Champagne Hockey

Mon matre de stage, Marc Lefvre, galement stagiaire au Reims Champagne Hockey dans le cadre de son DESS Communication-Marketing, occupe le poste de responsable de la communication externe du club. Son rle dans la ralisation de ce projet fut sa collaboration dans la rdaction d'un cahier des charges ( cf Annexe 1 , pages ) volutif, destin retranscrire les besoins des futurs utilisateurs du site Web en un ensemble de solutions informatiques. Par la suite, les diffrentes dcisions importantes relatives la construction du site Web furent toutes prises aprs concertation avec mon matre de stage, qui supervisait l'ensemble de mon travail. J'ai galement travaill en collaboration avec ric Feck, responsable de l'ancien site Web, pour qu'il puisse rapidement matriser le nouveau site Web, afin de maintenir une continuit dans la gestion et la maintenance de celui-ci. Samuel Panon, bnvole responsable de l'actualit et de la gestion de l'quipe de premire division Les Phnix , tait destin devenir un des principaux administrateurs du futur site Web. Son aide fut prcieuse car il me permit de mieux cerner les diffrents objectifs de la section du site web relative aux Phnix et sa participation ma mission me permit trs vite de tester les diffrentes fonctionnalits du site. Florent Notelet, personne supporter du club, a pris en charge la gestion et l'administration du forum intgr au site Web, aprs son installation. Lui dlguer cette tche m'a permis de focaliser mon attention sur le reste du projet.

2.4 Site Web existant

A mon arrive au Reims Champagne Hockey, cette association possdait dj un site Internet, dvelopp par une personne extrieure au club. Au dbut de mon stage, mon matre de stage m'a fait une rapide prsentation du site Web ( extrait de sa page d'accueil, cf Annexe 2 , page ). Lors de cette prsentation, il m'a nonc les diffrents dfauts que les utilisateurs prtaient ce site et qui ont corrobor mes premires impressions : Une charte graphique peu attractive Un site Web dvelopp uniquement en HTML Des pages Web non dynamiques

- 10 Romain Sergeant Rapport de stage Reims Champagne Hockey

 L'absence d'une interface de modration et d'administration intgre au site Web : pour mettre jour le site, ses gestionnaires devaient la plupart du temps directement modifier le code source du site, ce qui constitue une lacune trs importante vu le nombre de donnes devant tre mises jour chaque semaine.

3. L'environnement informatique
Matriel :

L'association dans laquelle j'ai effectu mon stage tant une petite structure, il n'y avait pas de service informatique proprement parler. C'est pourquoi le parc informatique de l'association s'est avr assez limit : un seul ordinateur aux performances limites tait la disposition des bnvoles du club de hockey. J'ai donc, l'instar des autres membres de l'association, apport mon ordinateur portable personnel pour travailler. Cependant, cela ne m'a pas gn dans mon travail, puisque l'association a mis disposition une connexion Internet Wifi, ainsi qu'un hbergeur 1&1 me permettant d'abriter le site Web et sa base de donnes.

Langages :

PHP (Hypertext Preprocessor ) est un langage de scripts principalement utilis pour produire des pages HTML dynamiques via un serveur HTTP, mais pouvant galement fonctionner comme n'importe quel langage de faon locale, en excutant les programmes en ligne de commande. PHP est un langage disposant depuis la version 5 de fonctionnalits de modle objet compltes. En raison de la richesse de sa bibliothque, on dsigne parfois PHP comme une plate-forme plus qu'un simple langage. Le site Internet de l'association se devant d'tre un site dynamique et interactif, la cration de pages HTML la vole est alors indispensable, ce qui m'a logiquement amen choisir PHP - 11 Romain Sergeant Rapport de stage Reims Champagne Hockey

pour dvelopper le site Web. De plus, Joomla! et ses extensions tant codes en PHP, la matrise et l'utilisation de ce langage s'avrent ncessaires leur modification. Site officiel : http://www.php.net

HTML ( HyperText Markup Language) est le format de donnes conu pour reprsenter les pages web. Cest un langage de balisage qui permet dcrire de l'hypertexte, do son nom. HTML permet aussi de structurer smantiquement et de mettre en forme le contenu des pages, dinclure des ressources multimdia , des formulaires de saisie, etc ... Il est souvent utilis conjointement avec des langages de programmation(Javascript) et des formats de prsentation (feuilles de style en cascade). Le PHP gnrant des pages HTML la vole, une bonne connaissance de ce langage de balisage fut donc requise pour raliser ce projet.

Le SQL (Structured Query Language), ou langage structur de requtes, est un pseudo-langage informatique de type requte, standard et normalis, destin interroger ou manipuler une base de donnes relationnelle. La base de donnes d'un site Web dynamique tant constamment consulte et manipule par celui-ci, l'utilisation de ce langage de requte constituait donc la meilleure solution pour manipuler la base de donnes du site Internet en dveloppement.

Autres langages : Au cours de ce stage, j'ai t amen utiliser d'autres langages relatifs au dveloppement Web. J'ai d principalement tudier le contenu de certaines fonctions Javascript, notamment pour rsoudre certains problmes de compatibilit avec certains navigateurs Web. J'ai galement manipuler le langage CSS ( Cascading Style Sheet ), ou feuille de style en cascade afin de modifier la feuille de style ( charte graphique ) de certaines pages Web du site.

- 12 Romain Sergeant Rapport de stage Reims Champagne Hockey

Logiciels de dveloppement :

Joomla! est un systme de gestion de contenu libre, gratuit et Open Source. Il est cod en PHP et utilise une base de donnes MySQL. Il comprend de nombreuses fonctionnalits telles que l'affichage d'articles en blog, de galeries photo, de flux RSS, de sondages Une communaut trs active permet ce logiciel de bnficier de plusieurs centaines d'extensions disponibles en plus des fonctionnalits de base de Joomla!. L'utilisation de ce logiciel pour la construction du site internet fut une des plus importantes dcisions prises au cours de mon stage. Il a dtermin l'utilisation des langages, ainsi que du SGBD utilis. 10 semaines tant un dlai assez court pour raliser mon projet, j'ai dcid d'utiliser ce logiciel car il me permettait de construire un site Internet rapidement, en utilisant des composants regroupant la majeure partie des fonctionnalits d'un site Internet interactif. De plus, le fait que ce logiciel soit en Open Source m'a permis de modifier et d'amliorer un certain nombre de ses composants pour que ceux-ci correspondent parfaitement aux besoins de l'utilisateur. Site officiel : http://www.joomla.org/ Dev-PHP IDE permet de crer des scripts et applications utilisant le langage PHP. Le programme permet une colorisation syntaxique de nombreux langages ( HTML, CSS, PHP ). Son systme de colorisation, sa rapidit ainsi que sa stabilit l'ont plac mes yeux comme le logiciel idal pour diter les diffrentes pages Web su site Internet.

- 13 Romain Sergeant Rapport de stage Reims Champagne Hockey

SGBD :
MySQL est un Systme de Gestion de Bases de Donnes (SGBD), parmi les plus utiliss au monde. Il fait partie du quatuor LAMP , qui est l'association du systme d'exploitation Linux, du serveur HTTP Apache, de MySQL et du langage de scripts PHP. Ce quatuor a pour but de crer un serveur de sites Web partir de logiciels libres. Le couple PHP/MySQL utilis conjointement avec Apache est la solution la plus utilise pour la cration de sites Web et est souvent propose par les hbergeurs, ce qui est le cas de l'hbergeur utilis par la structure o s'est droul mon stage. Site officiel : http://www.mysql.fr/

Une partie de la gestion de la base de donnes s'est faite via phpMyAdmin, interface graphique dveloppe en PHP et destine la gestion d'une base de donne MySQL. Cette interface sera aussi utilise pour tester les diffrentes requtes SQL lors de la construction du site, ce qui constitue un gain de temps important. Site officiel : http://www.phpmyadmin.net

Serveur :

Apache est un logiciel de serveur HTTP dvelopp par l'Apache Software Foundation. C'est actuellement le serveur HTTP le plus populaire du Web. C'est un logiciel libre faisant partie du LAMP, voqu ci-dessus. Site officiel : http://www.apache.org/

- 14 Romain Sergeant Rapport de stage Reims Champagne Hockey

4. Travail personnel
4.1 Objectifs
L'objectif de ce stage tait de raliser le nouveau site Web de l'association du Reims Champagne Hockey. Ce nouveau site devait remplir diffrents critres auxquels l'ancien site ne correspondait pas et il devait galement respecter le cahier des charges ( cf Annexe 1 , pages ) : - Le site web se devant d'tre la vitrine du club de Hockey, une charte graphique plus attractive et un meilleur agencement des diffrents modules taient ncessaires. - Les diffrentes fonctionnalits dveloppes se devaient de respecter le cahier des charges; noter que celui-ci est volutif, et qu'il a subi plusieurs changements ds un changement des besoins de l'association. - Pour tre interactif et et bnficier d'un affichage dynamique de ses pages, le site se devait donc d'tre dvelopp en PHP. - Pour pouvoir tre modr et administr par des personnes ayant des connaissances rduites en informatique, le site avait galement besoin d'une passerelle d'administration, ergonomique, intuitive, simple d'utilisation, ce qui faisait beaucoup dfaut l'ancien site Web. - La formation des utilisateurs la modration et l'administration du site Web tait aussi ncessaire, notamment auprs des bnvoles du club chargs de la maintenance et la gestion globale du site Web aprs le lancement de celui-ci.

Nous allons maintenant nous intresser la phase d'analyse qui a dtermin les mthodes de construction et de dveloppement du site Web, ce qui va nous amener l'laboration de l'arborescence du site, qui va dterminer l'agencement des modules du site et dfinir la structure du site Web.

- 15 Romain Sergeant Rapport de stage Reims Champagne Hockey

4.2 Analyse
4.2.1 Arborescence du site Web

Avant d'aborder cette tape essentielle qu'est la cration de l'arborescence, vritable colonne vertbrale du site Web, il est ncessaire de souligner la diffrence sous Joomla! entre la gestion du contenu et la gestion des menus du site Web. Car un des principaux atouts d'un CMS comme Joomla! est de sparer la gestion du contenu et celle de la structure, comme on peut le voir sur le panneau d'administration de Joomla! ( cf Annexe 3 , page ). Le contenu qui est voqu ici est en ralit l'ensemble des articles du site Web. Ces articles sont regroups en diffrentes catgories, qui sont elles-mmes regroupes par sections. Ainsi l'arborescence cre pour le contenu vise segmenter ce contenu afin de mieux grer son affichage comme nous allons le voir par la suite. Joomla! permet de crer diffrents menus. Ceux-ci sont diviss en plusieurs lments de menu, pouvant tre diviss en sous-lments de menu. Chaque lment de menu ainsi que tous ses ventuels fils , correspond l'utilisation d'un composant. A noter que l'affichage de ses menus dpend du template. En gnral, on dfinit un menu comme menu principal qui est souvent plac en haut de page, les autres menus devant tre affichs via des modules destins afficher les diffrents lments d'un menu. J'ai aussi constat que l'excution d'un composant se lance dans un seul et mme emplacement, gnralement dans la partie centrale du corps de page. Ces deux arborescences ont donc t dfinies selon le cahier des charges ( cf Annexe 1 , pages ). Sur celui-ci, on peut observer l'arborescence initiale du menu principal : les rubriques correspondent ses lments de menu et les sous-rubriques ses sous-menus. Pour l'arborescence du menu, les diffrentes rubriques seront interprtes comme des sections. Par contre seules certaines sous-rubriques correspondent des catgories, un certain nombre de sous-menus n'ayant pas de rle dans l'affichage des articles. Ces deux arborescences, malgr leurs diffrences de fonctionnement sont souvent associes l'une l'autre. Par exemple, le sous-menu La vie du club, fils de l'lment de menu LE CLUB fait appel un composant com_content , qui aura pour rle d'afficher en mode blog les diffrents articles de la catgorie La vie du club de la section LE CLUB . - 16 Romain Sergeant Rapport de stage Reims Champagne Hockey

Image 2 : Affichage en mode blog des articles de La vie du club .

Certaines modifications du menu principal ont bien sr eu lieu lors du dveloppement du site. Certains lments ont t ajouts : - Accueil : c'est, comme son nom l'indique la page par dfaut du site Web, sa vitrine. Celle-ci affiche un nombre important d'articles sous diffrentes formes : diaporama, blog,

- 17 Romain Sergeant Rapport de stage Reims Champagne Hockey

bande dfilante, module flash - le sous-menu Coupe de France de Les Phnix , affichant les diffrents matches de Coupe de France. - la transformation du sous-menu Centre de formation en lment de menu, en raison de son importance pour le club.

D'autres lments ont t suspendus : - le sous-menu Vidos de Mdias , en raison des difficults techniques relatives la transmission d'un match en direct. - le sous-menu Nous rejoindre de Partenaires , en l'absence d'une plaque de prsentation du club, destins des entreprises intresses par un partenariat avec l'association. - le sous-menu Jeux/Pronostics de Les Phnix , qui devait permettre un systme de pronostics et de paris comme un quivalent de Loto foot .

J'ai galement dvelopp d'autres menus en dehors du menu principal, destins crer une interface conviviale pour l'utilisateur, et qui constituent une majeure partie de l'interactivit su site Web. C'est pourquoi j'ai cr un menu nomm Panneau de l'utilisateur affich dans un module lors de l'identification de l'utilisateur. Son premier lment permet de modifier les identifiants de l'utilisateur ( pseudonyme, mot de passe , adresse e-mail), et est accessible tous les utilisateurs enregistrs. Le deuxime lment de menu que j'ai dvelopp et qui est accessible aux utilisateurs possdant des droits suprieurs, est une passerelle d'administration intgre au site Web. Cependant ses diffrentes fonctionnalits et son fonctionnement ne seront pas dvelopps dans le rapport, mais lors de la soutenance, car cet lment du site Web est une solution importante un des objectifs atteindre : l'interactivit du site Web du point de vue administration et modration .

L'arborescence du site cre, nous allons maintenant nous intresser aux diffrentes mthodes de travail utilises pour pouvoir rpondre aux besoins des utilisateurs.

- 18 Romain Sergeant Rapport de stage Reims Champagne Hockey

4.2.2 Mthodes de travail

Afin de respecter le cahier des charges, je me devais de rechercher une solution informatique correspondant parfaitement aux besoins des utilisateurs. Je rappelle que ces besoins taient les suivants : - charte graphique attractive - pages Web dynamiques - interactivit du site - proposer des fonctionnalits spcifiques l'utilisateur

J'ai rpondu au besoin d'un site Web affichant des pages dynamiques par l'utilisation du CMS Joomla!, utilisant le PHP comme langage de scripts pour le site Web, et permettant la gnration de pages HTML la vole . Quant la nouvelle charte graphique, elle est dtermine par le choix du template, ainsi que par l'intervention d'une agence de Web design extrieure au club de Hockey de Reims, rcent partenaire du club, et offrant bnvolement de participer l'laboration de cette nouvelle charte graphique. Les diffrentes fonctionnalits du site Web seront quant elles gnres par une multitude d'extensions de Joomla! ( composants, modules, plugins, template ). En effet, un template est galement une extension de Joomla!, et si il intervient dans la charte graphique du site, il occupe aussi une place primordiale dans la structure des diffrentes pages Web; son choix est donc trs important, ce qui m'amnera parler de son rle dans le dveloppement du site Web. Il faut noter que l'interactivit du site est due un certain nombre de fonctionnalits possdant un certain nombre de qualits que nous tudierons lors de la soutenance.

Nous allons donc maintenant nous intresser la mthode de travail utilise pour choisir, installer, configurer, voire amliorer les diffrentes extensions ncessaires au dveloppement des diffrentes fonctionnalits du site Web.

- 19 Romain Sergeant Rapport de stage Reims Champagne Hockey

La premire tape consiste se demander quels sont, en dtail, les caractristiques de la fonctionnalit dvelopper : sur quelles pages du site cette fonctionnalit sera disponible, quels utilisateurs y auront accs

Ensuite, on peut dterminer quel type et quel genre d'extensions l'on a besoin ( Ai-je besoin d'un plug in pour pouvoir attacher des pices jointes sous un diteur WYSIWYG ? Ai-je besoin d'un composant qui soit gestionnaire d'vnements ainsi qu'un module lui tant subordonn soit un minicalendrier ?). Joomla! propose un certain nombre de composants, modules, plugins, templates, de base. Cependant, le plus grand nombre de ces lments sont crs et proposs par la communaut de Joomla! : ce sont des extensions de Joomla!. Elles doivent tre installes via l'interface de gestion des extensions.

Image 3 : Interface d'installation et de gestion des extensions sous Joomla!

Une fois les diffrentes extensions installes, il est possible de modifier leur paramtres afin de les adapter aux besoins de l'utilisateur, via l'interface de gestion d'un composant ou d'un module. Toutefois, il arrive souvent que la plupart des extensions choisies ne soient pas - 20 Romain Sergeant Rapport de stage Reims Champagne Hockey

parfaitement adaptes aux besoins des utilisateurs, surtout lorsque les fonctionnalits demandes par ces derniers leur sont spcifiques. Joomla! tant un logiciel libre, il est possible d'avoir accs son code source, pour l'tudier ou le modifier. C'est pourquoi lors de mon stage j'ai souvent t amen modifier le code source de ces extensions afin de les amliorer.

Image 4 : Interface de transferts de fichiers propos par l'hbergeur

Par exemple, comme on peut le voir ci-dessus, on peut avoir accs, depuis la racine du site joomla , au code source du composant com_content , composant intgr la version originale de Joomla!, et qui a pour rle de grer le contenu du site ( articles ). Pour modifier le code source de chaque composant, j'ai utilis ce mode opratoire : - Tlchargement des fichiers source concerns - dition de ces fichiers sous DEV-PHP - Mise jour des fichiers source sur le FTP Modifier le code source de ces extensions m'a servi modifier l'affichage de ces lments, mais - 21 Romain Sergeant Rapport de stage Reims Champagne Hockey

aussi afficher plus ou d'autres d'informations et fonctionnalits que celles proposes initialement par l'extension. Les amliorations que j'ai effectues sur ces diffrentes extensions sont donc passes par une modification de la base de donnes, vritable bibliothque virtuelle du site Web stockant les donnes que celui-ci utilise. Cela passe gnralement par l'ajout ou la modification de champs d'une table ( comme par exemple, rajouter les champs date de naissance et poids la table individu ). Enfin, dans le but de rendre le site Web plus convivial, il est ncessaire que la majorit des lments du site soient affichs en franais. Certaines extensions sont disponibles au tlchargement en franais ou peuvent tre traduites par l'installation d'un plugin via l'interface de gestion des extensions. Cependant, sur un certain nombre d'extensions, j'ai t oblig de traduire manuellement en modifiant directement les fichiers de configuration contenant les libells associs l'extension. Une fois les extensions choisies modifies et adaptes aux besoins des utilisateurs, j'ai du tester celles-ci sous diffrents navigateurs Web, afin de vrifier que le site Web serait compatible avec le plus grand nombre d'utilisateurs.

Image 5 : Source : http://www.atinternet-institute.com

Les navigateurs Mozilla Firefox et Internet Explorer reprsentant plus de 90% des navigateurs Web utiliss en Europe, je me suis surtout concentr sur leur compatibilit. A noter qu' la diffrence de Firefox, Internet Explorer m'a pos un certain nombre de problmes, tels que l'apparition d'erreurs lors du chargement des pages du site. Pour palier ce problme, j'ai du choisir

- 22 Romain Sergeant Rapport de stage Reims Champagne Hockey

dans ces cas des extensions qui se sont rvles compatibles avec Internet Explorer, mais parfois en moins bonne adquation avec les besoins des utilisateurs, la compatibilit du site avec les diffrents navigateurs tant prioritaire. Aprs chaque ralisation d'une fonctionnalit, j'ai prsent son fonctionnement et ses possibilits mon matre de stage ainsi qu' d'autres bnvoles du club amens grer le site Web, afin de recevoir ses critiques et d'amliorer l'lment concern en consquence. Maintenant que je vous ai prsent les mthodes de travail que je me suis appliqu respecter lors de la construction du site Web, je vais vous prsenter plus en dtail le dveloppement des divers aspects du site Web, en commenant par un de ses plus importants lments : le template.

4.3 Dveloppement
4.3.1 Le template

Le choix cette extension a dtermin, comme nous l'avons voqu, la base de la charte graphique du site, mais aussi l'agencement des modules du site Web, et donc sa structure. Procder un choix judicieux pour cette extension me permettait donc de remplir partiellement l'un des principaux objectifs de mon stage : proposer un site plus attractif grce une charte graphique attirante et une disposition des modules intelligente. Je prcise que la charte graphique du site Web ne sera pas dtermine seulement par le template, mais galement par la participation l'agence de web design 800.600 , devenue rcemment partenaire du Reims Champagne Hockey et responsable de leur communication papier. Cette participation concernera la cration d'lments graphiques du site Web, telles que la bannire de celui-ci. Cela permettra non pas de changer la charte graphique dfinie par le template, mais de la renforcer en l'adaptant l'identit du club de hockey. Leurs crations ne seront malheureusement pas disponibles avant la fin de mon stage en raison de leur importante charge de travail, mais j'espre voir leur travaux intgrs au site avant la fin du mois de juin. La version originale de Joomla! propose quelques modles de template, mais aprs concertation avec mon matre de stage, nous n'avons pas trouv parmi ces templates un modle qui - 23 Romain Sergeant Rapport de stage Reims Champagne Hockey

soit adapt pour habiller le site Web d'un club de sport. Aussi ai-je dcid de chercher un template cr par la communaut Joomla! et correspondant plus nos besoins. Aprs plusieurs recherches, je me suis arrt sur un template qui a retenu mon attention. Celui-ci semblait idal pour crer un site Web ddi une discipline sportive, comme les membres de l'agence 800.600 se sont accords le dire. Aprs avoir installer le template Sport line ( http://joomla1.0.youjoomla.info/sportline ) via l'interface de gestion des extensions, j'ai procd un rapide paramtrage de celui-ci : affichage des sous-menus du menu principal en un menu droulant, couleurs par dfaut Ce template a t trs bien accueilli par les utilisateurs potentiels du site Web pour sa partie graphique et je considre que le style de ce template, malgr l'absence des lments graphiques qui auraient dvelopp l'identit du site Web, apporte un renouveau par rapport au style de l'ancien site Web. Cependant, l'habillage du site n'est pas le seul aspect dtermin par le template : l'agencement des diffrents modules du site, c'est--dire l'emplacement que prendra une fonctionnalit du site sur la page Web, est galement dtermin par cette extension. Nous allons donc maintenant nous intresser la disposition et l'organisation des diffrents modules du site Web.

4.3.2 Agencement des modules

Comme nous avons pu le voir, le template divise les diffrentes pages Web d'un site en un certain nombre de positions. L'emplacement de ces diffrentes positions est rpertori en Annexe 4 , pages ( A noter que toute position de module fera rfrence cette annexe ). J'ai pu constat que les positions non affectes sont par dfaut dsactives : ainsi, lorsqu'un module occupera la position user1 mais que la position user2 est dsaffecte, la premire occupe toute la largeur de la colonne de gauche. On peut galement remarquer que les modules peuvent tre affectes aux 22 positions du template, mis part une : la position main body ( corps de page ), qui elle est affecte l'affichage du composant excut lors du chargement de la page. A noter que plusieurs modules peuvent tre affects une seule position, et que l'on peut modifier l'ordre d'apparition de ces modules de faon verticale. Par exemple, on peut constater sur 'impression d'cran suivante, que le module de

- 24 Romain Sergeant Rapport de stage Reims Champagne Hockey

recherche a t plac la position header, en tte de page, juste au dessus du menu principal. J'ai galement configurer ce module pour qu'il puisse apparatre sur toutes les pages Web du site, mais il peut galement tre configur pour apparatre seulement sur certaines pages.

Image 6 : Paramtrage du module de recherche

Comme nous l'avons vu prcdemment, le site Web du club de Hockey se doit d'tre sa vitrine. Or la premire impression dgage par un site Web est suscite par sa page Web par dfaut, la page d'accueil. J'ai donc port le plus grand soin organiser cette page ( cf Annexe 5, page ). Et si le site Web du club est une vitrine, alors Les Phnix , leur quipe de Division 1, est son produit le plus vendeur. C'est pourquoi j'ai dcid de placer un module affichant un slideshow , un diaporama qui affiche de manire dynamique les trois derniers articles relatifs l'actualit de cette quipe en mettant en avant l'image correspondant l'article affich ( position advert1 ). La barre surplombant le menu principal abrite galement l'affichage d'articles relatifs cette quipe, sous la forme d'une barre dfilante visible sur l'ensemble des pages du site. Les modules placs en-dessous du slideshow sont destins afficher les derniers articles relatifs de trois catgories juges comme importantes : actualits du club, annonces bnvoles de la - 25 Romain Sergeant Rapport de stage Reims Champagne Hockey

vie du club , interviews des joueurs. Ainsi on affichera en mode blog les deux derniers articles des actualits du club en position user1, les deux derniers articles de Interviews en position user2. J'ai galement plac en pied de page trois modules affichant les trois derniers articles des catgories suivantes : actualits des espoirs lite ( U22 ), des cadets lite ( U18 ), des minimes lite ( U15 ), respectivement placs en position user4, user5, user6. Ces modules affichent le titre et les 50 premiers mots du corps de l'article ainsi qu'une miniature de l'image associe l'article. Tous les modules que j'ai cit ont donc pour but de donner un aperu du contenu du site Web, contenu mis en valeur selon son importance et sa nouveaut. Cela permet l'internaute accdant au site d'avoir une vue gnrale du contenu du site.

Image 7 : Module affichant de faon dynamique du contenu sur la page d'accueil

De manire plus gnrale, chaque page de ce site ( sauf le forum et la passerelle d'administration ) se divise en 2 parties, entre le menu principal et le pied de page, en deux colonnes. La colonne de gauche, comme nous l'avons vu sur la page d'accueil, est destine

- 26 Romain Sergeant Rapport de stage Reims Champagne Hockey

l'affichage de contenu ou le composant li la page Web. La colonne de droite est destine l'affichage de fonctionnalits importantes que je me devais de faire apparatre sur l'ensemble des pages du site.

Image 8 : Capture d'cran des modules figurant sur la colonne de droite du site (identifi/non identifi)

En tte de colonne, j'ai donc dcider d'afficher un tableau multi-onglets dont la particularit est de crer une position relative chacun de ces onglets. Ainsi, le premier onglet cre - 27 Romain Sergeant Rapport de stage Reims Champagne Hockey

une position tab1 auquel j'ai affect un module affichant un mini-calendrier et ainsi de suite. Ce tableau a donc pour but de faire apparatre des informations tels qu'un minicalendrier interactif, permettant d'afficher des vnements tels que les matchs, les entrainements, un module affichant le prochain match et le prcdent match des Phnix, la liste des transferts de joueurs, le classement des meilleurs buteurs des Phnix ainsi que le classement de la division 1 qui sera activ au dbut de la prochaine saison. Ce module est suivi de celui proposant l'utilisateur de se connecter/dconnecter ou de s'inscrire si celui ne possde pas de compte. Les diffrentes oprations proposes l'utilisateur sont affiches dans un menu suivant ce module et s 'affichant la connexion de l'utilisateur. Un sondage est galement propos afin d'amliorer la convivialit du site pour l'utilisateur. Enfin, un module affichant de manire alatoire le logo de chaque partenaire du club chaque chargement d'une page tait ncessaire pour offrir ces partenaires un espace de visibilit sur le site Web . D'autres lments qui seront dvelopps par l'agence 800.600, ne seront srement pas mis en ligne la fin de mon stage. Ce sont des lments graphiques destins mettre en avant certains services proposs par le club ( billetterie et boutique en ligne, cole de glace ).

Agencer les diffrents modules de ce site m'a permis d'amliorer de faon dcisive mes connaissances dans la modlisation et l'organisation d'un site Internet, dans l'affichage de composants et de modules, mettant en place des fonctionnalits dveloppes grce une mthode de travail que je vais maintenant appliquer un exemple concret : la gestion des joueurs du Reims Champagne Hockey.

- 28 Romain Sergeant Rapport de stage Reims Champagne Hockey

4.3.3 Gestion des joueurs : mise en uvre des mthodes de travail

D'aprs le cahier des charges, le nouveau site Web devait pouvoir grer les effectifs des diffrentes quipes du club ( sous-rubrique Effectif dans le cahier des charges ), neuf quipes tant concernes ( Phnix , Espoirs Elite (U22), Cadets Elite (U18), Cadets Excellence (U18), Minimes Elite (U15), Moustiques, Poussins, Benjamins, Loisirs ). Le sous-lment de menu Effectif devait donc pouvoir afficher la liste des joueurs de chaque quipe concerne, avec la possibilit d'accder la fiche de chaque joueur. Un classement des buteurs des Phnix devait galement tre cre, ainsi qu'une interface permettant de grer tous ces joueurs et ces quipes, que je prsenterais lors de la soutenance. Je devais galement installer un module qui puisse afficher le classement de la division 1 de hockey sur glace. Cela m'a donc pouss installer une extension proposant un gestionnaire de ligues et de tournois sportifs. Aprs plusieurs recherches, j'ai enfin trouv un composant qui me semblait idal : League Results . Ce composant permet en effet de grer plusieurs ligues sportives : on peut y crer des joueurs, les affecter des quipes appartenant des clubs et participant des ligues. Un systme de classement par ligues est galement propos.

Image 9 : Interface de gestion du composant League Results intgre Joomla!

- 29 Romain Sergeant Rapport de stage Reims Champagne Hockey

Aprs avoir install ce composant, j'ai donc, via l'interface de gestion de League Results cr deux clubs Reims Champagne Hockey pour la gestion des quipes du club et Equipes adverses , grant les autres quipes de la Division 1, avant de crer les diffrentes quipes appartenant ces clubs. Le composant permet aussi de crer, de modifier et d'affecter une quipe des joueurs. Cependant la gestion des joueurs de fera via une interface intgre au site Web. Puis j'ai associ chaque sous-lment du menu Effectif l'affichage de la liste des diffrents joueurs de l'quipe concerne dans le corps de page. Cependant, mme si ce composant a jou son rle en tant que gestionnaire de joueurs et d'quipes, il ne correspondait pas un certain nombre de besoins et de critres exprims par les futurs gestionnaires du site Web. J'ai donc, aprs la mise en place de ce gestionnaire d'quipes sous sa version originale, reu les critiques de ces utilisateurs et donc pris la dcision d'oprer les modifications suivantes :

- Traduction du composant en franais sur le site Web - Ajout pour le joueur des caractristiques suivantes : Numro, Ancien club, Statistiques ( lien hypertexte vers la fiche complte du joueur sur le site de la fdration de hockey sur glace ) - Suppression du lien hypertexte sur la liste de l'quipe, destin revenir la liste des quipes - Sur la liste des joueurs, suppression de l'affichage de la photographie , du poids et de la saison Ajout de l'affichage du numro et de l'ancien club - Sur la fiche du joueur, suppression de l'affichage du bloc de texte Info destin afficher une description du joueur, ajout de l'affichage de l'ancien club et des statistiques. - Cration d'une interface de gestion intgre au site permet aux administrateurs et responsables du club de grer les quipes et les joueurs

- 30 Romain Sergeant Rapport de stage Reims Champagne Hockey

Image 10 : Liste des joueurs de l'quipe Les Phnix La traduction du composant et donc des tiquettes utilises sur le site Web passe par la modification du fichier de configuration. En effet dans le code HTML, on utilise des tiquettes dont le contenu est spcifi dans le fichier de configuration. Ainsi, par exemple, l'tiquette PLAYERS contiendra la chane de caractres players pour la version anglaise et joueurs pour la version franaise. L'intrt de ce procd est de ne pas avoir modifier le code HTML et de regrouper le texte traduire. Cela permet aux dveloppeurs de composants de proposer diffrents langages.

Image 11 : Fichier de configuration du langage du composant League Results

- 31 Romain Sergeant Rapport de stage Reims Champagne Hockey

Image 12 : Fiche d'un joueur de l'quipe Les Phnix La modification de l'affichage de ce composant passe par une dition de son code HTML, ce langage de balisage dterminant la structure de la page Web. Cependant l'ajout de caractristiques relatives un joueur passent par une modification de la base de donnes. En effet, chaque caractristique supplmentaire d'un joueur sera champ supplmentaire dans la table joueur . Afin d'afficher ces caractristiques, il faut modifier le code HTML pour modifier la structure de la page et la faon dont les donnes sont affiches ( modification du tableau, ajout de cellules dans celui-ci, etc ), mais il faut aussi que la requte SQL qui alimente cette mme page en donnes soit modifie, pour avoir accs un type de donnes qui sera ajout dans la base de donnes.

Image 13 : Ajout du champ numero dans la table players via phpMyAdmin interface de gestion de MySQL - 32 Romain Sergeant Rapport de stage Reims Champagne Hockey

La dernire fonctionnalit demande pour une gestion des joueurs du club est un classement dynamique des buteurs de l'quipe Les Phnix . Je n'ai donc pas modifier le composant League Results pour crer ce classement mais j'ai cr une page Web indpendante de ce composant, mais utilisant la mme base de donnes que ce composant. Pour raliser cette page Web, j'ai donc associ le sous-lment de menu Statistiques un module proposant l'encapsulage de la page Web dveloppe, ou plus simplement l'affichage d'une page dans un cadre incorpor la page courante. Cette page affiche donc un tableau HTML aliment par la table players qui est aussi utilise par le composant League Results . Ainsi la modification des donnes affecte paralllement ce classement. Les donnes affiches sont donc alimentes par la base de donnes que l'on a interrog grce la requte suivante :

SELECT lastname , firstname , buts , assists , points FROM jos_lr_players JP , jos_lr_teamplayers JT WHERE JP.id = JT.player_id AND team_id = 37 ORDER BY points DESC;

Cette requte fonctionne de cette faon :

- SELECTION des champs ( informations) nom , prnom, buts marqus, nombre d'actions dcisives, points - POUR tous les joueurs - O les joueurs sont membres d'une quipe - ET O l'identifiant de l'quipe est le numro 37 ( Les Phnix ) - CLASSE en fonction du nombre de points de chaque joueur

- 33 Romain Sergeant Rapport de stage Reims Champagne Hockey

Image 14 : Classement des buteurs de l'quipe Les Phnix

Aprs ces diverses modifications, j'ai donc conform le composant install en une fonctionnalit correspondant aux attentes de l'utilisateur, grce mes connaissances en dveloppement Web et grce accs en lecture et en criture de Joomla! Et de ses extensions. Cette fonctionnalit du site est galement compatible avec les navigateurs Web les plus utiliss.

Aprs avoir mis en place les diffrentes fonctionnalits du site Web de la mme manire que j'ai mis en place cette gestion et cet affichage des joueurs et des quipes de ce club, je me suis pench sur l'organisation et la mise en place des diffrents droits utilisateurs, importants la bonne gestion du contenu du site Web.

- 34 Romain Sergeant Rapport de stage Reims Champagne Hockey

4.4 Gestion des utilisateurs

Le site Web que j'ai dvelopp au cours de mon stage se devant d'tre interactif pour tous ses utilisateurs, j'ai donc mis en place un systme de gestion de ces utilisateurs. J'ai en effet mis disposition de l'utilisateur un module lui permettant de crer un compte, ainsi que de se connecter/ dconnecter de ce compte ( cf Image 8, page 27 ). L'enregistrement d'un utilisateur via le site permet celui-ci de crer un compte lui donnant des droits d'un utilisateur Enregistr . En effet, les diffrents modules et composants de Joomla! Peuvent tre accessibles pour trois types de groupes d'utilisateurs : - Public : tous les utilisateurs - Enregistr : tous les utilisateurs ayant cr un compte - Spcial : tous les utilisateurs possdant un compte possdant des droits suprieurs donns par l'administrateur du site Web

Image 15 : Edition d'un compte utilisateur via le panneau d 'administration de Joomla!

- 35 Romain Sergeant Rapport de stage Reims Champagne Hockey

Via la passerelle d'administration, le responsable du site Web peut donc modifier les caractristiques de chaque compte utilisateur enregistr sur le site Web, notamment ses droits ( cf Image 15, page 35 ). Sur le site Web, tout le contenu des diffrentes pages est accessible par le groupe d'utilisateurs Public , hormis la passerelle d'administration intgre ( Spcial ). J'ai dlaiss l'utilisation du type Enregistr , celui-ci n'apportant pas vraiment d'utilit spciale mes yeux, part son utilisation pour l'enregistrement et la modification du compte via le site Web. En effet, l'interactivit du site Web que j'ai cr se situe principalement au niveau de la modration et de l'administration, les fonctionnalits dveloppes pour ce site Web ne demandant que ce type d'interactivit. Ainsi, j'ai dcid d'tablir une certaine hirarchie parmi les utilisateurs du site Web. Car Joomla! propose, pour les utilisateurs enregistrs diffrents droits grs par l'administrateur du site ( cf Image 16 , page 36 ) et qui sont eux aussi trs hirarchiss.

Image 16 : Droits des utilisateurs enregistrs sous Joomla! ( Source : Joomla! Pour les nuls )

J'ai donc dcid d'attribuer les droits les plus levs ( Superadmin ) aux personnes qui seront le plus impliques dans la gestion du site Web : - Eric Feck, gestionnaire du site Web - Samuel Panon, responsable de la section Les Phnix - Florent Notelet, gestionnaire du forum - 36 Romain Sergeant Rapport de stage Reims Champagne Hockey

Ces trois personnes auront donc pour rle l'administration globale du site ( validation des articles proposs par les auteurs, gestion des utilisateurs, des menus, des composants et autres lments du site Web ). A un rang infrieur, on trouvera les diffrents coachs des diffrentes sections du club et qui auront pour rle de crer du contenu relatif leur section ( Author ). Ils auront la possibilit de crer des articles, de les diter, mais il leur sera impossible d'diter les articles d'autres auteurs. La publication des articles ou de tout autre contenu qu'ils proposeront sera galement soumis des utilisateurs possdant au moins des droits de rdacteur ( Publisher ). Cette hirarchie sera sans doute amener voluer aprs mon dpart, notamment par la cration d'administrateurs intermdiaires, les rdacteurs, ayant tous les droits en FrontEnd.

- 37 Romain Sergeant Rapport de stage Reims Champagne Hockey

5. Conclusion

Ce stage a t pour moi une premire exprience professionnelle trs enrichissante sur tous les plans : aussi bien du point de vue de lapprofondissement de mes connaissances en informatique que du point de vue relationnel. J'ai donc pu approfondir de manire consquente mes connaissances dans l'utilisation du CMS Joomla! ainsi que mes connaissances dans la conception de sites Web en gnral. Le site que j'ai cr permettra l'association du Reims Champagne Hockey de promouvoir ses quipes de hockey sur glace, que ses bnvoles pourront facilement mettre jour grce au dveloppement d'une passerelle d'administration intuitive, simple d'utilisation et intgre au site Web. J'estime avoir participer un renouveau dans la communication du club par la cration d'un site Web correspondant aux attentes de ses utilisateurs, se dmarquant cette occasion de l'ancien site Web du club. Malgr un enseignement basique et succinct de Joomla! l'IUT, j'ai russi utiliser le potentiel de ce CMS pour dvelopper un site aussi complexe que celui du Reims Champagne Hockey, notamment grce une communaut active et dynamique. Je regrette de ne pas avoir pu intgrer les productions de l'agence 800.600 la charte graphique du site avant la fin de mon stage, ce qui retardera son lancement et donc son changement de nom de domaine, mais cependant je considre avoir rempli mon objectif lors de ce stage. Cette exprience a t mon premier projet informatique de longue dure, qui m'a permis d'approfondir mes connaissances en informatique mais galement d'amliorer mes comptences professionnelles, ceci grce un groupe de personnes qui m'a su m'encadrer au cours de ce projet tout en me laissant une certaine autonomie. Je pense donc avoir russi ce stage en tant l'coute des demandes de chacun et en n'hsitant pas demander conseil si ncessaire.

- 38 Romain Sergeant Rapport de stage Reims Champagne Hockey

6. Bibliographie
Joomla! Pour les nuls , documentation simplifie de Joomla! : http://aide.joomla.fr Documentation officielle PHP : http://www.php.net Portail francopone officiel de Joomla! : http://www.joomlafrance.org Site web officiel de Joomla! : http://www.joomla.org Forum Joomla! Francophone : http://forum.joomla.fr

- 39 Romain Sergeant Rapport de stage Reims Champagne Hockey

7. Annexes

- 40 Romain Sergeant Rapport de stage Reims Champagne Hockey

- 41 Romain Sergeant Rapport de stage Reims Champagne Hockey

Annexe 1 : Cahier des charges

- 42 Romain Sergeant Rapport de stage Reims Champagne Hockey

- 43 Romain Sergeant Rapport de stage Reims Champagne Hockey

- 44 Romain Sergeant Rapport de stage Reims Champagne Hockey

- 45 Romain Sergeant Rapport de stage Reims Champagne Hockey

- 46 Romain Sergeant Rapport de stage Reims Champagne Hockey

Annexe 2 : Capture d'cran de la page d'accueil de l'ancien site Web Annexe 3 : Panneau d'administration de Joomla!

- 47 Romain Sergeant Rapport de stage Reims Champagne Hockey

Annexe 4 : Positions du template Sport line - 48 Romain Sergeant Rapport de stage Reims Champagne Hockey

Annexe 5 : Capture d'cran de la nouvelle page d'accueil - 49 Romain Sergeant Rapport de stage Reims Champagne Hockey