Mise à jour du site web de l auto-école et de son interface d administration

Transcription

1 Auto-école bld de Fourmies ROUBAIX Rapport de stage : Stage du 20 Avril au 29 mai Année universitaire Mise à jour du site web de l auto-école et de son interface d administration Réalisé par : Romain Paris : Etudiant en 1ère année de Master Informatique et Document Sous la tutelle de : Tuteur professionnel : Gervais Clercx (directeur de l'auto-école 2000) Tuteur universitaire : Jérémie Mary (maitre de conférence à Lille 3) Université Charles-de-Gaulle - Lille 3 Domaine universitaire du "Pont de Bois" rue du Barreau - BP Villeneuve d'ascq Cedex Page 1/30

2 Table des matières : Table des matières...2 Remerciements...3 Introduction...4 Chapitre 1 : L'ENTREPRISE Présentation de l'entreprise et de son directeur...5 Chapitre 2 : LE SITE EXISTANT L'existant Analyse de l'existant...7 Chapitre 3 : LE STAGE Les objectifs Le cahier des charges a.L'analyse des besoins b.Les besoins Le système d'administration a.Les différents systèmes b.Les différents modules/plugins c.Le choix du directeur L'hébergement La réalisation a.L'installation b.Les modules et leurs installations b.i.Le menu par catégorie : module PATH b.ii.L'éditeur WYSIWYG : module FCKeditor b.iii.Le module IMCE b.iv.Le module QUIZ b.v.Le module BACKUP AND MIGRATE c.La traduction du module QUIZ d.Le thème e.La formation du directeur...21 Chapitre 4 : CONCLUSION...22 Chapitre 5 : WEBOGRAPHIE...23 Chapitre 6 : ANNEXE Les modifications du style Le tutoriel...28 Page 2/30

3 Remerciements Je tiens particulièrement à remercier Gervais CLERCX (directeur de l'auto-école 2000 et tuteur professionnel) qui a accepté cette proposition de stage et répondu à tous les contacts et rendez-vous malgré un emploi du temps surchargé. Je remercie aussi mon tuteur universitaire Jérémie MARY (Maitre de conférences) qui a répondu à toutes mes questions et inquiétudes, et qui m'a conseillé tout au long de ce stage. Ensuite je souhaite remercier Agnieszka TONA (Enseignante chercheuse) qui m'a aidé à réaliser plus facilement un cahier des charges en donnant en fin d'année un document sur la méthodologie à adopter. Page 3/30

4 INTRODUCTION Ce rapport témoigne du stage de 6 semaines (20 Avril au 29 Mai 2009) pour l'entreprise "Auto-école 2000" sous la tutelle de Monsieur Gervais Clercx, directeur de l'auto-école, dans le cadre de l'unité d'enseignement "Travail d'étude et de recherche" de ma 1ère année de Master Informatique et Document. Ce stage fût une proposition de ma part. J'avais demandé si l'auto-école avait besoin de modifier son site web, et il s'avérait que les mises à jour étaient difficiles à réaliser. La difficulté première était de mettre à jour les tests. La proposition fût donc acceptée. Le but de ce stage, pour l'entreprise, était donc de réaliser le site web de façon à améliorer les mises à jour, en étudiant auparavant les besoins et les compétences du directeur, et ensuite de le former à l'utilisation du site. L'intérêt de ce stage pour moi, était principalement de découvrir le travail de webmaster, entre autres, les contacts avec les clients et travailler sous contraintes. Ce rapport est découpé en trois parties. La première partie correspond à la présentation de l'auto-école et de ses membres. La deuxième concerne la description du site existant et de ses défauts. Pour finir, la dernière explique tout ce qu'il s'est passé durant le stage, ainsi que le travail qui a été effectué. Les chapitres suivants concernent la conclusion, la bibliographie ainsi que les documents annexes. Page 4/30

5 Chapitre 1: L'ENTREPRISE 1.1.Présentation de l'entreprise et de son directeur L'auto-école 2000 est une entreprise située à Roubaix qui, comme toutes auto-écoles, effectue des cours théoriques qui correspondent à des questionnaires sur le code de la route, ainsi que des cours pratiques réalisés en conduisant un véhicule. Elle forme les inscrits à la conduite d'une voiture et donc leur permet d'obtenir le permis B. Elle effectue aussi toutes les inscriptions aux examens (du code et de la conduite). L'entreprise n'est composée que d'une personne, Gervais Clercx, qui s'occupe des leçons de code 4 fois par semaine et des cours de conduite le reste du temps. Il s'occupe aussi de fournir tous les papiers disponibles pour participer aux examens et de le proposer dans la période qui correspond le mieux à l'inscrit. Elle dispose d'un site web à but principal d'informer le visiteur (qu'il soit déjà dans une auto-école ou non) mais également de s'entrainer et de réviser pour les examens. Page 5/30

6 Chapitre 2: LE SITE EXISTANT 2.1.L'existant Le site actuel, présent à l'adresse a été réalisé par le directeur de l'auto-école. N'ayant que peu de connaissances dans le domaine de la création de site web, il a été développé avec le logiciel "Nanoweb Editor". Chaque page est ensuite transférée par un logiciel FTP. Il est à but informatif. Il permet de connaître toutes les informations sur les procédures pour avoir son permis (bien choisir son auto-école, connaître le déroulement des examens, etc...). Voici des aperçus de ce site : Illustration 1: Page du site Illustration 2: Page du site Les pages du site contiennent un menu déroulant réalisé en JavaScript par un programme. Il est situé en haut à gauche et permet de se diriger vers toutes les pages du site. Les pages contiennent principalement du texte et pour certaines d'entre elles, quelques images. Il n'y a pas vraiment de style commun entre les différentes pages, juste le titre qui est une image. Page 6/30

7 Le site contient aussi des parties permettant de réviser pour les examens : Illustration 3: Page sur les vérifications Ces pages permettent soit de se tester sur le code de la route, soit de réviser les questions qui pourront être posées lors de la conduite. 2.2.Analyse de l'existant Illustration 4: Test du code Ce site comporte plusieurs problèmes qui ont plus un rapport avec mon apprentissage en cours. Les corrections de ces problèmes seront donc des améliorations non prévues dans les objectifs, mais qui seront corrigées automatiquement lors de la réalisation. Voici les quelques problèmes : Deux adresses sont affichées sur le site. Ceci provoque un doute au visiteur sur l' exact, et sur laquelle envoyer le message. Dans la page "Le permis", le lien vers la page de la procédure d'évaluation est mal formé. Le visiteur qui désire cliquer sur "Les procédures d'évaluations" ne Page 7/30

8 peut cliquer que sur une partie du mot. Seules les lettres "valuat" sont cliquables. De même pour les liens dans la page des vérifications intérieures, les liens commencent pour une réponse et continuent (en prenant aussi les questions) jusqu'à une autre réponse possédant un lien. (Voir illustration 3) Les pages contiennent toutes le même titre (balise <title>). Ceci ne favorise pas un référencement performant. Les liens du menu ne sont pas considérés comme tels avec un clic droit ou un clic sur la molette (impossibilité d avoir le menu spécifique au lien comme "ouvrir dans un onglet" ou "une fenêtre", etc.) Safari réalise le clic de la molette mais comme un clic gauche normal. Le visiteur ne peut donc pas choisir comment naviguer sur le site. Invisibilité du menu occasionnant une impossibilité de naviguer dans le site : Le menu étant en JavaScript, il devient invisible si l'utilisateur a cette fonctionnalité désactivée. Ceci se produit aussi lorsque les images ne se chargent pas ou sont désactivées. Le fond du menu étant une image ( ou ) et l'écriture (au survol) étant en blanc, si l'image n'apparait pas, le texte ne se voit plus. Illustration 5: Menu avec les images désactivées et normales Si le visiteur décide de couper les styles de pages ou si ceux-ci ne se chargent pas, le texte du menu est visible mais n'est pas sous forme de lien. Il est donc impossible de cliquer dessus. Illustration 6: Menu avec les styles désactivés Le site ne contient aucun repère permettant à l'utilisateur de savoir où il se trouve dans le site. Les images ne contiennent pas de texte alternatif permettant aux visiteurs de Page 8/30

9 comprendre l'image en cas de non chargement, ou pour les personnes à déficience visuelle. Les titres principaux et de sections sont sous forme d'images. Avec le point précédent, il est impossible d'avoir les informations. De plus ceci ne favorise pas le référencement du fait que les robots des moteurs de recherches ne peuvent pas lire le texte dans ces images. Il n'y a pas de style pour l'impression. Le menu apparaît donc lorsque l'on veut imprimer une page. Le site étant fait avec un logiciel codant en html 4.0, il n'y a pas de séparation entre la forme et le contenu. (Il n'y a pas de CSS, des espaces sont utilisés pour aligner le texte, il y a l'utilisation des balise <font>, <u>, <b>, etc...) Le style du site n'est pas commun à toutes les pages. Les pages de tests sont différentes des autres, même chose avec les vérifications (voir illustration 4 avec illustrations 1 et 2). Le visiteur peut donc se sentir perdu et dans un autre site en navigant entre ces pages. Ensuite il y a le plus gros problème du site, qui est l'un des objectifs du stage. Page 9/30

10 Chapitre 3: LE STAGE 3.1.Les objectifs L'objectif principal du stage est de corriger le problème des mises à jour du site. Celles-ci étant assez difficilement faisables, notamment pour les pages de tests. En effet, pour modifier une question d'un test, il faut refaire celui-ci en entier. Les autres pages se modifient plus facilement en modifiant le texte avec le logiciel WYSIWYG, ou avec Word (Pages de vérifications). Cette correction du problème permet de rendre le site plus performant. Il ne délivrera plus de données inexactes pendant quelques temps après une modification des recommandations. Le visiteur pourra donc réviser en toute sérénité pour ses examens. L'autre objectif demandé était de refaire le design du site, il permettra de corriger en même temps les problèmes remarqués lors de l'analyse de l'existant. Un cahier des charges a donc été établi pour répondre aux objectifs, en commençant par une analyse des besoins. 3.2.Le cahier des charges 3.2.a.L'analyse des besoins Plusieurs réunions et discussions par mail ont été faites pour comprendre tous les besoins du directeur qui étaient nécessaires pour mener à bien ce projet. Au fils des rencontres, les questions ont été de plus en plus précises. Lors de la première rencontre, les questions étaient accès sur 3 parties : Les objectifs du site et du projet (Buts du site, bénéfices du projet, les différentes cibles, etc...) Les contenus et fonctionnalités qui doivent être présents sur le site. Le graphisme du site. Ainsi que la question : Le site gardera-t-il le même hébergeur et nom de domaine? Les questions posées lors des rencontres suivantes ont approfondi la fonctionnalité principale qui est le test. 3.2.b.Les besoins Le site devra informer les clients sur les auto-écoles et les réglementations du permis. Le site doit pouvoir être maintenu à jour plus facilement. Les mises à jour doivent être faites par le directeur. Page 10/30

11 Le contenu devra être repris du site existant. Le logo de l'auto-école doit obligatoirement être repris et visible. La couleur du site doit être de couleur claire. Après avoir montré plusieurs teintes claires, celle choisie fût une teinte bleue-violette. Les formes doivent être de forme arrondie. Le site doit être découpé en trois parties et le menu en deux parties. En haut, il doit y avoir le logo de l'auto-école ainsi que le menu principal. À gauche, doit se trouver les menus secondaires, et le reste contiendra le contenu de la page. Les menus secondaires ne doivent être visibles que pour les pages correspondantes. (exemple : Les pages de tests auront le menu des tests.) Le contenu doit pouvoir être ajouté ou modifié sans ajouter de balise donc en utilisant un éditeur WYSIWYG. Le site doit contenir des tableaux pour les pages de vérifications. Il doit aussi contenir des tests sur le code de la route. Le site doit garder le même hébergeur et nom de domaine. Les tests du code de la route étant un point essentiel, la fonctionnalité a été approfondie et de nouveaux besoins ont fait leurs apparitions : Les questionnaires doivent correspondre à des catégories différentes. Les questionnaires doivent afficher une question par page. Les questions peuvent contenir une ou aucune image. Les visiteurs peuvent choisir plusieurs réponses correctes. Les bonnes réponses doivent être affichées en fin de questionnaire. Il doit être possible de donner des explications aux bonnes/mauvaises réponses. Les questionnaires doivent pouvoir proposer quatre réponses comme lors de l'examen. Les questions présentes dans un questionnaire doivent être affichées dans un ordre aléatoire. Les questions doivent pouvoir être reprises pour le test sur l'ensemble des thèmes. Pour pouvoir répondre à ces besoins, un système d'administration doit être utilisé. 3.3.Le système d'administration Celui-ci a pour but de fournir au directeur de l'auto-école une gestion simple des contenus affichés sur le site. L'administrateur doit pouvoir modifier, ajouter, supprimer du contenu sans avoir une quelconque connaissance en langage informatique. Il est possible de le réaliser à la main (par moi-même) ou avec un système spécialisé dans ce domaine qui est un CMS (Content Management Systems ou système de gestion de contenu) Page 11/30

12 3.3.a.Les différents systèmes L'hébergeur devant être gardé, le système d'administration devait correspondre aux caractéristiques de celui-ci. Peu d'informations sur l'hébergeur étaient récupérables du fait qu'il n'y avait pas de lien ou formulaire de contact. Les seules données étaient celles affichées en page d'accueil. Ces données indiquent que le PHP et MySQL sont disponibles dans leur dernière version. Le système d'administration pourra donc être fait avec PHP/MySQL. Une comparaison de plusieurs CMS a été faite et trois d'entre eux ont été sélectionnés pour être gratuits, libres, simples d'utilisation, sécurisés, ainsi que d'avoir une communauté francophone et au moins un module/plugin permettant de faire des tests. Les trois choisis furent Spip, Joomla!, Drupal. Un choix supplémentaire dû être proposé du fait que l'hébergeur, pour finir, ne proposait pas SQL pour les comptes déjà existants. Ce choix portait sur la gestion des données par fichiers. Après études de plusieurs CMS fonctionnant avec PHP/fichiers, aucun ne s'est montré concluant pour réaliser la fonctionnalité des tests. La solution proposée fût donc le codage à la main par fichiers. Sous ses conditions, la sécurité n'était pas suffisante du fait que la fonctionnalité permettant avec htpasswd/htaccess de protéger par mot de passe la partie d'administration n'affichait jamais la fenêtre demandant le compte et mot de passe. 3.3.b.Les différents modules/plugins Un module ou plugin s'apparente à un programme permettant de rajouter ou modifier des fonctionnalités. Spip utilise le terme plugins et Drupal les modules, Joomla! utilise le terme module pour cette fonctionnalité mais aussi les plugins pour autre chose. Peu de modules/plugins supplémentaires au cœur des CMS sont utiles pour ce projet. Les besoins se concentraient principalement sur la possibilité d'écrire le contenu sans insérer de codes et pouvoir faire des questionnaires. Pour le premier point, un éditeur WYSIWYG fût intéressant. Pour Joomla!, aucun module supplémentaire n'est nécessaire puisque TinyMCE est installé avec. Pour Spip, il faut installer deux plugins (CFG et FCKeditor). Pour drupal, il y a plusieurs choix: TinyMCE, FCKeditor, openwysiwyg, etc... Après plusieurs tests, FCKeditor accompagné d' IMCE fût choisi. Pour le codage à la main, la solution se serait portée sur le cliquage de boutons pour insérer automatiquement le code dans le texte. Page 12/30

13 Le choix pour la fonctionnalité des tests fût plus complexe. Tout d'abord pour spip, aucun plugin ne correspondait dans la liste des plugins. Il fallut une recherche extérieure pour trouver un plugin pouvant répondre à certains besoins mais sans que ça ne soit vraiment suffisant. Pour Joomla!, un module spécial pour les quiz existe mais ne fonctionne pas avec la dernière version du CMS. La recherche s'est donc poursuivi sur d'autres. Beaucoup de modules furent payants et donc ne correspondaient pas aux exigences. Un des modules gratuits permettaient de répondre à beaucoup de besoins mais étant en version de démonstration, il n'affichait qu'une seule question et sur une partie latérale de la page (comme un sondage). Le choix s'est donc porté sur un autre module (BfQuiz) mais ne répond pas à tous les besoins. Tandis que pour Drupal, un module spécialisé dans les questionnaires existe et répond à toutes les demandes. 3.3.c.Le choix du directeur Le choix a été réalisé avec la comparaison suivante : Drupal Joomla! Spip Codage à la main PHP/MYSQL Codage à la main fichier Délais réalisable réalisable réalisable Pas sûr d être réalisable Pas sûr d être réalisable (plus long que php/mysql) Sécurité *** *** *** *** * Editeur WYSIWYG Oui (Module FCKeditor) TinyMCE intégré Oui (plugin CFG + FCKeditor) Pas de prévisualisation directe Même adresse Non Non Non Non oui Pas de prévisualisation directe Pérennité Oui Oui Oui Pendant quelques années Pendant quelques années Quiz Séparations en catégorie(thèmes) Oui (Module Quiz) Oui (Module BfQuiz) Oui (Plugin Jeux) Oui Oui Oui Oui Oui 1 question par page Oui Oui Non Oui Oui Image dans la question Oui Oui (mais avec une balise) Plusieurs réponses correctes Affichage des réponses correctes Explications des réponses Nombre de possibilités de réponses possibles Question affichée aléatoirement Question utilisable dans plusieurs thèmes Remarque quiz : Oui Oui Non Oui Oui Oui Oui Oui Oui Oui Oui Non Non (affiche si on a bon ou faux mais n indique pas les bonnes réponses) Oui Non Non Oui Oui 5 20 infinité Nombre décidé Nombre décidé Oui Non Non Oui Oui Oui Non Non Oui Oui Obligation de donner un pseudo et son mail (car l option pour être anonyme ne fonctionne pas) Oui Oui Le système d'administration choisi par le directeur fût celui correspondant le plus aux Page 13/30

14 besoins demandés, c'est à dire le CMS Drupal. 3.4.L'hébergement La demande qui consistait à garder le même hébergeur ainsi que le même nom de domaine, n'a pu être réalisée. La possibilité de créer le site ainsi que l'administration avec des fichiers n'ayant pas été choisie, le nom de domaine a dû obligatoirement être modifié. L'autre demande a pu être respectée en créant un nouveau compte chez l'hébergeur "chez.com". Malgré que le choix de l'hébergeur fût un des besoins, une liste de plusieurs d'entre eux fût proposé pour palier à deux problèmes : Le premier est apparu du fait que l'hébergeur, pour des raisons de partage de ressources avec d'autres sites, a bloqué les fonctionnalités de flux RSS, forum, etc... Ces blocages provoquent sur le site ici produit, l'impossibilité d'avoir les informations sur les mises à jour à faire. Le second concerne la modification des droits en écriture des fichiers de configurations. Lors de l'installation, le CMS Drupal écrit les configurations du site (Nom, utilisateur, mot de passe de la base de données, etc...) sur un fichier. Pour sécuriser le site contre la modification de ces données, il procède à une modification des droits sur ces fichiers en fin d'installation. Il enlève les droits d'écriture pour tous les utilisateurs (propriétaire et autres) et groupes. L'hébergeur a malheureusement bloqué la fonction (CHMOD) permettant de modifier les droits, provoquant l'impossibilité d'enlever les droits au propriétaire. Les droits d'écriture restent accessibles pour cet utilisateur mais pas pour les autres. La recherche d'hébergeurs s'est effectuée sur des gratuits du fait que l'actuel (chez.com) l'est lui-même. La principale difficulté lorsque l'on cherche des hébergeurs gratuits, c'est de récupérer les informations nécessaires. Il est très rare que les informations sur le serveur soient indiquées (pas d'informations sur les fonctionnalités comme chmod, safemode, etc...). Par contre certaines d'entre-elles peuvent être récupérées sur le forum des hébergeurs si l'accès est autorisé et si des utilisateurs ont posé une question permettant de récupérer certaines indications sur le serveur. Une seconde difficulté est le fait que les meilleurs hébergeurs gratuits sont très prisés et donc surchargés de demandes. Pour avoir un compte, il faut déposer un dossier de description du projet pendant une période très précise qui est celle où l'hébergeur accepte d'ouvrir de nouveaux comptes. Les hébergeurs sélectionnés pour faire parti de la comparaison ont été choisis parce qu'ils n'avaient pas de période pour ouvrir un compte ou celle-ci été ouverte, qu'ils proposaient également suffisamment de ressources (espaces disques et bande passante), ainsi qu'un uptime élevé (peu de temps où le serveur est indisponible) et un fonctionnement de Drupal. Le fonctionnement de Drupal a été vérifié en regardant les sujets des forums ayant des messages disant que ça fonctionnait parfaitement. Page 14/30

15 Malgré plusieurs choix proposés, l'hébergeur choisi resta "chez.com" puisque les difficultés ont pu être en partie corrigées. La première devait être fait manuellement. La vérification des mises à jour se fera en allant sur les pages du site de Drupal et en regardant si la version a changé. Pour la seconde, la solution a été donnée pour la version antérieure de Drupal avec l'hébergeur Free. "Chez.com" ayant été racheté et transféré sur les serveurs de Free, la solution est identique. Elle consiste à modifier l'emplacement de ces fichiers de configuration ainsi que le dossier les contenant et d'indiquer dans un autre fichier le nouveau chemin. Pour la création du nouveau compte sur l'hébergeur, j'ai indiqué comment procéder mais malheureusement le nom du site qui a été entré fût "ae2000rbx.chez.com". Comme le nom de domaine de l'hébergeur (chez.com) est rajouté à la fin, celui-ci se trouvait deux fois dans l'adresse. J'ai donc demandé à créer "une nouvelle page perso" (un nouveau site) sur le même compte. Cette fois-ci l'adresse fût bonne en ayant qu'un seul "chez.com", mais il y eu un nouveau problème du fait que la base de donnée ne s'activait que pour la première page perso du compte. Un nouveau compte a donc du être créé avec le bon nom de sous-domaine et une base de données Mysql activée. Le site a donc pour adresse "ae2000roubaix.chez.com". 3.5.La réalisation L'auto-école n'étant pas équipée d'une connexion internet, la réalisation a été effectuée à mon domicile. Les tests d'installation et de configuration de Drupal ainsi que des différents modules ont été réalisés avec le logiciel WampServer fournissant tous les éléments nécessaires à la réalisation de tests pour des sites web dynamiques. Il installe Apache, Mysql et PHP. 3.5.a.L'installation Celle-ci s'est faîte différemment entre celle de test et celle en ligne pour deux raisons. La première est que la gestion de base de données du serveur test est effectuée par PhpMyAdmin alors que la gestion pour celui en ligne fonctionne avec FlashMyAdmin. Tout d'abord, une activation de Mysql doit être demandée, ensuite FlashMyAdmin doit être installé en le transférant par FTP à la racine du site. En allant à l'adresse url du dossier, on arrive à la gestion des bases de données. En se connectant pour la première fois, on doit indiquée le nom de la base de données désirée et celle-ci se crée. La seconde concerne le blocage de la fonctionnalité CHMOD qui a forcé à modifier le chemin des fichiers de configuration utilisé lors de l'installation. Le dossier contenant les fichiers de configuration doit être copié et la copie, renommée avec un autre nom. Ensuite, une ligne du fichier "bootstrap.inc" Page 15/30

16 présent dans le dossier "includes" doit être modifiée. Cette ligne est "$confdir='sites';" et doit être remplacée par "$confdir='nouvel_emplacement';" Une fois ces modifications faites, la procédure est identique à une installation normale de Drupal. Il faut aller sur l'adresse du site et suivre les procédures. Si Drupal n'arrive pas à se connecter à la base de données, il faut modifier une ligne du fichier de configuration en mettant : $db_url='mysql://nom_user:pass@serveur/nom_de_la_base'; 3.5.b.Les modules et leurs installations Précisément, pour Drupal, les modules sont généralement des bibliothèques de fonctions s'ajoutant au cœur du CMS permettant d'ajouter ou modifier des fonctionnalités. L'installation d'un module (qu'il soit présent lors de l'installation du CMS ou ajouter manuellement) est une chose simple à faire puisqu'il suffit de cocher dans la liste des modules celui que l'on désire installer/activer. Illustration 7: plusieurs modules ayant une case à cocher pour les activer Pour ajouter un module externe au CMS, il suffit de télécharger le module désiré à l'adresse : et de décompresser le contenu de l'archive dans le dossier des modules supplémentaires "sites/all/modules". Il apparaitra donc dans la liste des modules et pourra donc être installé. 3.5.b.i.Le menu par catégorie : module PATH Dans Drupal, il n'y a pas de catégories. Pour afficher un menu pour seulement une partie des pages, j'ai donc utilisé une fonctionnalité proposée pour les blocs. Un bloc est un élément spécifique (comme un menu, un formulaire de recherche, etc...) qui est principalement destiné à être affiché en dehors du contenu (en bannière, en bas de page, etc...). Dans notre cas, les blocs sont des menus et doivent être affichés pour les pages de la même catégorie. Les blocs ont la possibilité d'être affichés pour seulement quelques pages. J'ai donc utilisé ce moyen en association avec le module PATH. Le module PATH disponible avec le CMS, mais non activé, permet de choisir l'url de la page. Ceci nous permet donc de créer une catégorie à laquelle appartient la page. Les url sont du type : catégorie/nom_de_la_page Ainsi nous pouvons avec la fonctionnalité des blocs, demander à ce qu'un menu Page 16/30

17 n'affiche les pages que pour les url de sa catégorie. Ceci se fait en choisissant l'option "Afficher le bloc seulement sur les pages listées" et en remplissant le formulaire de deux lignes : la_catégorie et la_catégorie/* La première ligne affiche le menu pour la page d'accueil de la catégorie et la seconde affiche le menu pour toutes les autres pages de cette catégorie. Le module qui permet de créer des quiz pose un problème avec cette méthode puisque lorsque l'on choisit une url, celle-ci ne correspond qu'à la première question du test et non à toutes. J'ai donc utilisé une autre option de la fonctionnalité qui permet de n'afficher le bloc que si un certain code PHP renvoie "True". Pour que ça fonctionne, l'option choisie est donc "Afficher si le code PHP suivant retourne TRUE" avec le code suivant (inspiré d'un code du forum Drupal 1 et d'un code sur la fonction strpos 2 ): 1.<?php 2.$categorie = "test"; 3.if (is_numeric(arg(1)) && (arg(0) == 'node')) { 4. $node = node_load(arg(1)); 5. $recherche = strpos($node->path, $categorie); 6. if (($recherche) or ((string)$recherche === (string)0)) 7. { 8. return True; ?> La ligne 2 permet d'indiquer la catégorie des pages où le menu sera affiché. La ligne 3 teste si c'est un nœud et la 4 le récupère. La ligne 5 cherche si l'url du nœud contient la catégorie et la 6 teste si la recherche a était fructueuse. La deuxième partie du test de la ligne 6 permet de savoir s'il renvoie la position 0 où le 0 correspondant à FALSE. 3.5.b.ii.L'éditeur WYSIWYG : module FCKeditor Ce module permet d'ajouter au formulaire des boutons pouvant modifier l'apparence du contenu, insérer des images, des tableaux, etc... Illustration 8: Boutons ajoutés au formulaire Les premiers tests de celui-ci ainsi que de TinyMCE n'étaient pas concluant du fait que le bouton permettant d'uploader des images sur le serveur ne fonctionnait pas. L'éditeur Openwysiwyg a donc été testé et semblait satisfaisant jusqu'à ce que je découvre que le code généré ne respectait pas le W3C. Je suis donc revenu sur FCKeditor qui validait les normes et installait un second module (IMCE) pour Page 17/30

18 pouvoir insérer des images. Les points qui ne validaient pas les normes, comme par exemple "le souligné", ont pu être corrigés grâce à une fonctionnalité permettant de créer ses propres styles. J'ai donc créé un style qui permet de souligner le texte tout en respectant les normes et indiquer au directeur que cette utilisation est préférable. Des styles ont aussi été créés pour accélérer la création du contenu notamment pour les pages d'évaluations. Illustration 9: Les styles créés et le résultat Cet éditeur permet également de choisir quel formulaire aura les boutons. Ceci fût très utile puisque l'éditeur a pu être désactivé pour les formulaires des propositions de réponses. Ceci était important du fait que les rectangles pour insérer les réponses étaient très petits et que l'éditeur occupé toute la place. Pour finir ce module remplit l'une des demandes consistant à proposer des tableaux dans le contenu d'une page. 3.5.b.iii.Le module IMCE Ce module permet de palier au fait que le navigateur de fichiers par défaut de l'éditeur FCKeditor provoquait plusieurs erreurs xml et donc ne permettait pas d'upload des images sur le serveur. De plus, celui-ci montre un aperçu des images et offre la possibilité de créer des miniatures. 3.5.b.iv.Le module QUIZ Ce module rajoute deux nouveaux types de contenu (choix multiple et quiz) en plus de ceux existants (article et page). Le premier permet de créer un questionnaire. Lorsque l'on crée un contenu de ce type, on doit indiquer la configuration de celui-ci. Les configurations sont, par exemple, le moment où les explications sont données (en fin de questionnaire pour nous), le délai pendant lequel le questionnaire sera visible (indéfiniment dans notre cas), les questions seront-elles tirées au hasard, etc... Une fois la configuration validée, on peut créer des questions rattachées à ce questionnaire. Ces questions correspondent au second type créé. Les questions disposent : d'un formulaire pour la question, accompagné de l'éditeur FCKeditor. Une image peut être insérée. Mais aussi quatre formulaires permettant de proposer des réponses, accompagnés d'autre formulaires présents à côté permettant de donner des explications. Pour indiquer que la réponse est exacte, il suffit de cocher une case. Page 18/30

19 Pour les questions créées à la suite d'un questionnaire, celles-ci lui sont directement affectées. Mais il est possible de créer de nouvelles questions n'appartenant à aucun en passant par le menu de création du type "choix multiples". Une fois que la question est créée, elle est mémorisée mais n'est pas utilisée. Pour quelle le soit, il faut l'affecter à un test en choisissant son apparition dans la configuration de celui-ci. De la même façon, on peut utiliser une même question pour de multiples quiz. Lorsque la question possédait une seule réponse correcte parmi toutes celles proposées, le visiteur avait des boutons à cocher et non des cases. Ceci rendait impossible de choisir plusieurs réponses. Pour corriger ce problème, une ligne du fichier multichoice.module a été modifiée : $additions->multiple_answers = $additions->properties['number_of_answers'] > 1? 1 : 0; a été remplacé par : $additions->multiple_answers = $additions->properties['number_of_answers'] >= 1? 1 : 0; Un signe égal a été rajouté pour que le module affiche des cases même s'il n'y a qu'une seule réponse correcte. 3.5.b.v.Le module BACKUP AND MIGRATE A été installé pour pouvoir effectuer facilement des sauvegardes de la base de données. Ceci permet d'avoir une version de secours en cas d'erreur et est utile lors des mises à jour de Drupal. 3.5.c.La traduction du module QUIZ Le module quiz n'existe pas en français. Une traduction a donc été faite. Pour pouvoir la faire. Le module "Translation template extractor" a été utilisé. Ce module extrait le texte utilisé par le module et crée un fichier avec ce texte. Ce fichier est ensuite utilisé par un logiciel qui affiche un texte par ligne et propose, à côté, un emplacement pour mettre la traduction. Une fois les traductions effectuées, il suffit de transférer le fichier qui est produit par ce logiciel dans Drupal avec la fonctionnalité "Traduction de l'interface". 3.5.d.Le thème Un thème correspond au design du site web. Drupal propose par défaut le thème Garland et quelques autres. Mais il est possible d'en rajouter. Le thème réalisé pour le site utilise une bonne partie du thème Garland ainsi qu'une petite partie du thème Zen_classic. La partie de Zen utilisée permet l'affichage du menu principal en une ligne, tandis que le code repris du thème de Garland permet l'affichage du site en deux colonnes (le menu à gauche et le contenu à droite). Le reste du code de ces deux thèmes qui n'avait aucune interférence sur le design a été supprimé. Page 19/30

20 Avec le module Quiz, il y a un problème au niveau des liens du menu. Ceci du fait que la coloration indiquant sur quelle page le visiteur se trouve n'est visible que pour la première question d'un questionnaire et non pour les suivantes. Pour palier à cette difficulté, le template (modèle) des blocs a été modifié. Le code "$block->content;" a été remplacé par : if ($block->module == "menu" && $block->subject == "Les tests") { $contenu = $block->content; if (is_numeric(arg(1)) && (arg(0) == 'node')) { $node = node_load(arg(1)); $url = $node->path; $recherche = strpos($contenu, $url); $active = strpos($contenu, 'class="active"'); if ($recherche &&!($active)) { $contenu = str_replace($url.'"', $url.'" class="active"', $contenu); print $contenu; else { print $block->content; La première ligne permet de savoir si le bloc est un menu et que c'est celui appelé "Les tests". Si ce n'est pas le cas, on utilise l'affichage normal. Si c'est bien le menu des quiz, on récupère le contenu puis l'adresse de la page actuelle. Ensuite on recherche et teste si l'adresse est bien dans le contenu et si le lien du menu n'est pas déjà en rouge (pas de 'class="active"'). Si toutes ces conditions sont remplies, on remplace, dans le contenu du menu, le lien par un lien ayant la class "active" permettant de le mettre en rouge. Pour que le style indique l'emplacement du visiteur, les images constituant le menu ont dû être réalisées deux fois mais avec des couleurs différentes. Lors des tests, le nombre d'images chargées était trop élevé. J'ai donc utilisé la technique des sprites consistant à regrouper plusieurs images en une et à n'afficher que la partie voulu. Ensuite j'ai découvert que Drupal disposait d'une fonctionnalité permettant de regrouper tous les fichiers CSS en un seul, améliorant ainsi encore plus les performances. Voici un aperçu du style à la fin du stage : Page 20/30

21 Illustration 10: Design du site web 3.5.e.La formation du directeur Pour que le directeur puisse utiliser le site web correctement et facilement, un tutoriel a été réalisé. Il explique toutes les étapes nécessaires à la création d'une page, d'un questionnaire, d'une question ainsi que leur modification et suppression mais aussi de la création de menus et de catégories de pages. Il informe aussi de la procédure à suivre pour bien utiliser l'éditeur WYSIWYG. Page 21/30

22 Chapitre 4: CONCLUSION Le stage a été une réussite puisque l'auto-école 2000 dispose d'un nouveau site répondant à tous les besoins (sauf celui d'avoir le même nom de domaine) autant au niveau fonctionnel qu'au niveau esthétique. Il est donc maintenant assez aisé de mettre à jour le site lors d'une modification des réglementations. Ce stage m'a apporté plusieurs choses. Premièrement lorsque j'ai proposé le stage au directeur, le but personnel était de découvrir la relation avec le client ainsi que le travail sous contraintes. Tout au long du stage, de nombreuses rencontres ont été réalisées pour comprendre tous les besoins. N'ayant eu aucun refus à chaque présentation du travail effectué, le stage m'a permis de découvrir une facette de la relation avec le client. Le deuxième but a aussi été réalisé, du fait que ce fût la première fois que je travaillais sous contraintes de temps et d'objectifs. Deuxièmement j'ai fait la découverte des CMS et plus particulièrement Drupal. Ceci m'a permit d'utiliser le travail d'autres personnes, et donc de pouvoir découvrir une petite partie du travail en équipe. Ensuite, le fait d'avoir eu plusieurs fois des problèmes avec les restrictions de l'hébergeur, m'a permit de découvrir l'importance du choix de celui-ci ainsi que de rechercher de nouvelles méthodes permettant de corriger ces difficultés, ainsi que des méthodes pour améliorer les performances. Page 22/30

23 drupalfr : Drupal France et francophonie Disponible sur : Chapitre 5: WEBOGRAPHIE drupalfr / tostinni : Afficher blocs en fonction du vocabulaire. Drupal France et francophonie Disponible sur : php.net / jburns131 : PHP: strpos - Manual Disponible sur : drupalfr : Manuel du traducteur Drupal France et francophonie Disponible sur : Performance web : Des sprites jusqu à plus soif «Performance web» Disponible sur : M@teo21 / site du zero : Protéger un dossier avec un.htaccess Disponible sur : Spip : spip - français Disponible sur : Joomla : Joomla.fr Disponible sur : Page 23/30

24 Chapitre 6: ANNEXE 6.1.Les modifications du style Le template pour les pages a été modifié, voici les modifications : <?php if (isset($primary_links)) :?> <?php print theme('links', $primary_links, array('class' => 'links primary-links'))?> <?php endif;?> <?php if (isset($secondary_links)) :?> <?php print theme('links', $secondary_links, array('class' => 'links secondary-links'))?> <?php endif;?> Ceci a été remplacé par le code du thème de Zen_classic : <div id="primary" class="clear-block"> <?php if (isset($primary_links)){ print theme('links', $primary_links);//, array('class' => 'links primary-links'))?> </div> Ensuite pour les parties latérales, j'ai remplacé les id des div. BandeGauche remplace Sidebar-left et BandeDroite remplace Sidebar-right Voici le css réalisé par moi même: body { background: #b3bcff; margin: 0px; padding: 0px; font-size: 1em; text-align: justify; #entete #logo { float: left; #entete h1 { margin: 0; #bandegauche.menu a { color: #000088; background: url(images/bande_menu.gif.png) no-repeat 0px -50px; padding : 5px 0px 0px 25px; min-height: 20px; display: block; margin: 1px 0px; text-decoration: none; #bandegauche.menu a.active { background: url(images/bande_menu.gif.png) no-repeat; Page 24/30

25 padding : 5px 0px 0px 25px; min-height: 20px; color: black; #bandegauche.menu li { margin: 0px; padding: 0px; #bandegauche.menu a:hover { color: red; text-decoration: underline; #center h2 { background: url(images/sprite.gif.png) no-repeat center -256px; padding: 15px 0 0 0; text-align: center; margin: 0px; #center.node h2 { background: url(images/sprite.gif.png) no-repeat left -326px; padding: 18px px; height: 22px; text-align: left; td { border: 2px ridge white; padding: 2px; #bandegauche h2, #bandedroite h2 { margin: 0px; text-align: center; background: url(images/sprite.gif.png) no-repeat; font-size: 19px; height: 23px; #bandegauche.avant_h2, #bandedroite.avant_h2 { margin: 0px 5px; padding: 0px; background: url(images/sprite.gif.png) repeat-x 0px -101px; #bandegauche.apres_h2, #bandedroite.apres_h2 { background: url(images/sprite.gif.png) no-repeat right -48px; td.quiz_summary_question img { max-width: 300px; div.clear-block>table.sticky-enabled { width: 95%; #center img { max-width: 95%; Page 25/30

26 #center.node.h2_admis { background-color: rgb(204, 255, 204); background-image: none; padding: 0px; height: auto; text-align: center; #center.node.h2_tolere { background-color: rgb(255, 170, 119); background-image: none; padding: 0px; height: auto; text-align: center; #center.node.h2_non_tolere { background-color: rgb(255, 102, 102); background-image: none; padding: 0px; height: auto; text-align: center; Le code tiré du thème de Zen : #primary { font-size: 0.8em; line-height: normal; padding: 0 0 0px 20px; border-bottom: 0px solid #2763A5; margin-left: 35%; #primary ul.links li, #secondary ul.links li { display: inline; border-left: none; margin: 0; padding: 0; #primary a { background: #2763A5 url(images/sprite.gif.png) no-repeat 0px -152px; color: #FFF; font-weight: bold; display: block; float: left; padding: 2px 10px 8px 30px; margin: 0 5px 0 0; border: solid black 0px; border-width: 0px 1px 0 0px; height: 13px; #primary a:hover { /*background-position: 0% -42px;*/ background: #6DA6E2 url(images/sprite.gif.png) no-repeat 0px -152px; text-decoration: none; Page 26/30

27 #primary a.active { /*background-position: 0% -84px;*/ background: #dd0000 url(images/sprite.gif.png) no-repeat 0px -204px; border: solid #8e0000 1px; border-width: 0px 1px 0 0px; #primary a.active:hover { /*background-position: 0% -42px;*/ background: #ff9c9c url(images/sprite.gif.png) no-repeat 0px -204px; text-decoration: none; Le code provenant du thème de Garland : #wrapper #container #center { float: left; width: 96%; /* 95% si on veut la partie droite */ font-family: Serif; font-size: medium; body.sidebar-left #center { margin-left: -200px; body.sidebar-right #center { margin-right: -200px; body.sidebars #center { margin: 0-200px; /* permet de décaler le corps à coté du menu */ body.sidebar-left #squeeze { margin-left: 210px; body.sidebar-right #squeeze { margin-right: 210px; body.sidebars #squeeze { margin: 0 210px; #wrapper #container.sidebar { /* menu */ margin: 0 0 5em; padding: 5px 5px; width: 15em; min-width: 210px; float: left; z-index: 2; position: relative; font-size: 0.8em;.block.content { margin: 0.5em 0; Page 27/30

28 #wrapper #container #center #squeeze { background: #edefff url(images/sprite.gif.png) repeat-x 0-389px; /*-115px;*/ position: relative; min-width: 310px; #wrapper #container #center.right-corner { /* coin droit */ background: transparent url(images/bg-content-right.gif.png) no-repeat 100% 0; position: relative; left: 10px; #wrapper #container #center.right-corner.left-corner { /* coin gauche */ padding: 60px 25px 5em 35px; background: transparent url(images/bg-content-left1.gif.png) no-repeat 0 0; margin-left: -10px; position: relative; left: -10px; min-height: 300px; #wrapper #container #footer { /* bas de page */ float: none; clear: both; text-align: center; margin: 4em 0-3em; color: #898989; #wrapper #container.breadcrumb { /* liens repere */ position: absolute; top: 15px; left: 35px; /* LTR */ z-index: 3; padding-left: 20px; Un CSS permet de faire de petites corrections pour le navigateur Internet Explorer. Et un autre permet d'enlever le superflu lors des impressions. 6.2.Le tutoriel Le tutoriel explique toutes les procédures pour effectuer des mises à jour du site. Voici des parties de celui-ci : Supprimer un/des contenu(s) cliquez sur «Administrer» Ensuite sur «Contenu» dans le corps de page (1ère colonne, partie : Gestion du contenu) Page 28/30

29 Cochez la/les page(s) à supprimer Vous pouvez trier les contenus pour retrouver plus facilement celui que vous désirez Ensuite choisissez «Supprimer» dans la liste «Options de mise à jour» Puis cliquez sur le bouton «mise à jour» juste à côté Ensuite confirmer la suppression en vérifiant bien que c est le(s) bon(s) contenu(s) qui sera/seront supprimé(s) Afficher un menu pour certaines pages Pour un menu contenant au moins un quiz, ceci n est pas efficace puisque le menu ne reconnait plus la page à laquelle on est et donc le menu devient invisible (donc voir : 2 ème méthode). Cliquez sur «configurer» pour le menu choisi Tout en bas dans «Paramètres de visibilité spécifique à la page» cochez «Afficher le bloc seulement sur les pages listées.» (le 2 ème choix) Remplissez le champ «Pages» par 2 lignes (en remplaçant «categorie» par la catégorie concernée par ce menu) : categorie : permet d afficher le menu pour la page d accueil de la catégorie concernée par ce menu (exemple test) categorie/* : permet d afficher le menu pour toute les pages faisant parti de la catégorie spécifié Chaque contenu créé ayant une URL du type categorie/page. Les contenus ayant la catégorie correspondant aura le menu qui apparait. Les autres ne verront pas ce menu. Ex : test/signalisation verra le menu qui aura : test test/* Catégories existantes : test permis auto-ecoles Page 29/30

30 Pour mettre les ADMIS, TOLERE, NON TOLERE de la bonne couleur et centrer automatiquement Tapez le texte ADMIS ou TOLERE ou NON TOLERE Puis sélectionnez ce texte Style pour les pages des évaluations Cliquez sur la liste «Style» Et choisissez H2_??? en fonction du texte que vous avez mis. H2_admis colorera en vert clair H2_tolere colorera en orange H2_non_tolere colorera en rouge Souligner du texte N UTILISEZ PAS ce symbole (U) pour souligner. Celui-ci rend le texte invalide selon les normes d internet (W3C) Cliquez sur la liste «Style» Et choisissez Souligné UTILISEZ PLUTOT CE QUI SUIT Recliquez dessus pour annuler le soulignement Si vous avez fait une sélection de texte, vous n avez pas besoin de recliquer dessus Page 30/30