B.T.S. Services Informatiques aux Organisations. Solutions Logicielles et Applications Métier. Note de synthèse

Transcription

1 DOEUFF Steven B.T.S Services Informatiques aux Organisations Solutions Logicielles et Applications Métier Note de synthèse Migration d un site internet de location de villas et Adaptation d un site Joomla en version mobile Année :

2 Sommaire Introduction...3 Présentation de l organisation... 3 Premier projet...4 Nature du projet... 4 Existants et besoins... 4 Réalisation... 4 Première étape : La migration de données... 4 Solutions possibles et solutions retenues... 5 Deuxième Etape : La modification du site... 6 Phase de test:... 8 Troisième étape : Envoyer les fichiers du site sur le serveur final... 8 Quatrième étape : Faire évoluer le site... 9 Problèmes rencontrés Conclusion Deuxième projet Nature du projet Existant et besoins Solutions possibles et solutions retenues Problèmes rencontrés Conclusion Conclusion

3 Introduction Actuellement en BTS SIO deuxième année, j ai effectué un stage de 7 semaines entre le 10/12/2012 et le 01/02/2013. Cette note de synthèse reprend l ensemble des activités effectuées durant ce stage. Ayant travaillé sur deux projets indépendants, je vais donc traiter chacun d eux en détail. Présentation de l organisation La société Oziolab est une SARL située à Quimper et dirigée par 2 associés depuis maintenant 2 ans. Elle se charge de créer des sites internet grâce à des CMS (logiciels de création de site Web) et les complète avec des modules codés à la main afin de satisfaire des besoins non pris en charge par l application de base. Si jamais ceux-ci ne répondent pas aux demandes des clients, alors un développement total est envisagé. En plus de créer des sites Web, elle héberge ses sites ainsi que des boîtes . Elle prend aussi en charge la création d application Web ou bien l utilisation d applications existantes hébergées sur leur serveur. Dans le cas où l application demande une formation, alors il est tout à fait possible qu elle soit faite par l un des deux gérants. Sa clientèle se trouve principalement dans le département du Finistère voire en Bretagne. Ce sont pour la plupart des entreprises ou des organisations publiques (Ex : Office du tourisme et bibus). Le projet qui m a été confié est orienté «Web». Avant de démarrer mon projet, j ai été amené à installer mon poste de travail, ceci passant par l installation de Windows 7 Professionnel et des logiciels qui m ont été nécessaires pour travailler (ex : FileZilla, Microsoft SQL SERVER, VM PLAYER ) Une fois cela fait, j ai installé un Ubuntu Server 8.04 sur une machine virtuelle afin de l utiliser comme serveur. Pour cela, j ai dû configurer les comptes utilisateurs de cette machine, les paquets à installer ainsi que les connexions lui permettant de communiquer avec ma machine physique et internet afin de l utiliser comme serveur web (similaire au serveur sur lequel le site web sera hébergé plus tard). 3

4 Premier projet Nature du projet Afin d améliorer ma capacité à comprendre le code existant et me confronter à la migration d une application, mon but a été de migrer un site web datant de 2004 (actuellement sur un serveur Windows 2000 lié à une base de données Microsoft SQL SERVER) vers un serveur Linux (avec une base de données MySQL). Une fois cela effectué, une évolution du site a été mise en œuvre. Existants et besoins Le site belles-villas-bretagne.com est un site de location de villas. Ce site a été créé il y a un bon nombre d années. Il est actuellement hébergé sur un serveur Windows 2000 et lié à une base de données Microsoft SQL SERVER. Le client possédant ce site souhaite apporter des modifications afin de le faire évoluer c est pourquoi une migration du site et des données a été faite avant afin que le nouveau soit en production sur un serveur qui lui, est plus récent et donc plus rapide. Réalisation Aperçu du site: Première étape : La migration de données Avant d envoyer le site sur le serveur Linux préparé au préalable, une migration des données est à effectuer. Si un site internet n accède pas à sa base de données, il est fort 4

5 probable que des erreurs soient affichées à l écran ou bien qu il y ait une page blanche si le serveur est en production. Microsoft SQL SERVER ne pouvant pas fonctionner sur un système Linux, le choix d utilisation d une base de données MySQL est donc assez naturel car beaucoup de sites fonctionnent avec une base de type MySQL. Une fois la migration de données effectuée, il sera nécessaire de modifier le code source du site afin que les accès à la base se fassent correctement. Solutions possibles et solutions retenues Il est donc question de trouver une solution pour migrer les données car les SGBD (Système de Gestion de Base de données Relationnelles) émetteurs et destinataires sont très différents. Pour cela, j ai donc installé Microsoft SQL SERVER dans le but de restaurer une sauvegarde de la base afin de comprendre le fonctionnement de ce logiciel. Avant de tenter toute importation de contenu dans MySQL, il faut créer les tables avec les champs et types de données dans lesquelles les insertions auront lieu. J ai donc écrit un script SQL qui créer les tables, les types de données n étant pas identiques dans les deux SGBD, il a d abord été nécessaire de chercher les types correspondants dans chaque base. J ai créé un tableau pouvant être comparable à un «dictionnaire de données». Il recense tous les champs des tables avec le type associé dans chaque SGBD. Cela a facilité l écriture du script car tous les types étaient déterminés. La migration des données peut donc maintenant être lancée. Deux solutions s offrent alors à moi. La première est de les exporter en fichier.csv (fichiers contenant toutes les données de chaque table séparées par un point-virgule) et d importer directement dans MySQL en indiquant que le point-virgule est le caractère qui sépare chaque information. Exemple de l interface d importation de fichiers CSV : Ceci a été l option choisie pour toutes les tables dont les champs ne contiennent pas de code HTML pur (le HTML contenant des guillemets, le fichier.csv est presque inexploitable car chaque paire de guillemets est considérée comme un champ dans la base, un champ HTML pouvant contenir une infinité de guillemets, l importation est donc problématique). 5

6 La deuxième solution, concerne exclusivement les tables contenant du HTML. Il a été question de créer un script PHP qui récupère les données dans la table par un lien ODBC. Ces dernières seront ensuite redirigées dans un fichier qui contiendra toutes les données récoltées mais cela dans des requêtes d insertion SQL créées à la volée pour chaque ligne d enregistrement située dans la table sélectionnée de l ancienne base de données. Ainsi, il ne reste donc plus qu à copier les requêtes qui se sont écrites dans les fichiers et d exécuter cela dans MySQL. Les insertions s effectuent sans problème. Les données sont maintenant totalement migrées. Il faut donc passer à la modification du site afin que celui fonctionne mais cette fois-ci avec le nouveau SGBD. La phase de migration m a pris 1 semaine car l environnement «SQL SERVER» m était inconnu. Une phase de réflexion a été obligatoire afin de ne pas me tromper dans les types de données et les méthodes d exportation et divers essais ont été nécessaires au bon fonctionnement de l export. Deuxième Etape : La modification du site Pour modifier le site, il faut tout d abord envoyer les fichiers sur le serveur. Pour cela, j ai utilisé FileZilla. Afin de pouvoir modifier et envoyer directement les modifications sur le serveur, j ai utilisé une fonction particulière de Notepad++ : il s agit de NPPFTP, qui permet de voir toute l arborescence de son site et d ouvrir les fichiers souhaités. Une fois une sauvegarde effectuée, le fichier est directement renvoyé au serveur avec les modifications. Les fichiers étant arrivés sur le serveur, j ai pu commencer les modifications afin que les erreurs d accès aux données disparaissent. Le site étant constitué de librairies de fonctions personnalisées, les modifications ont pu être effectuées directement dans les librairies correspondantes (celles qui gèrent l ensemble de l accès aux données (insertion, consultation ). Des modifications ont été apportées principalement sur les fonctions qui réalisent les actions souhaitées. Par exemple, «mssql_connect()» va devenir «mysql_connect()». Une fois les instructions d accès aux données mises à jour, certaines requêtes SQL ne s exécutent toujours pas. Cela est dû au fait que des fonctions spécifiques à Microsoft SQL SERVER sont utilisées dans le code. Par exemple, la fonction GETDATE permet de récupérer la date et l heure courante. Cette fonction n existant pas dans MySQL, j ai donc été amené à chercher la fonction correspondante sur internet pour MySQL. J ai donc remplacé le GETDATE par NOW qui lui renvoie la même chose. D autres problèmes de ce genre sont apparus mais des fonctions ayant les mêmes résultats existent dans MySQL, ce qui facilite l adaptation du code. 6

7 L accès aux données une fois fonctionnel des erreurs d un autre type apparaissent. Il s agit d un problème d envoi de mail. Le site actuel dispose d une fonction d envoi de mail de confirmation en cas de «réservation», «d annulation» et de «validation» des demandes de réservations effectuées. Ainsi, dès qu une personne remplit le formulaire de réservation et qu elle a indiqué son , une confirmation lui est alors envoyée automatiquement. Mon serveur web ne possédant pas d outil d envoi de mail, il est normal que celui-ci ait des problèmes lors de l envoi. Il a donc fallu que je trouve une solution. Après des recherches, j ai cherché quel(s) logiciel(s) pouvait(ent) répondre à mes besoins. J ai trouvé SSMTP et Postfix, le deuxième est très couramment utilisé mais est très complexe à configurer. Le premier logiciel étant plus simple et répondant à mes besoins, j ai donc choisi celui-là. Je me suis donc lancé dans l installation de l outil SSMTP, qui permet d envoyer des mails depuis un serveur. Une fois installé, je l ai configuré en allant modifier ses fichiers de configuration en «vi» (éditeur de texte en ligne de commande) en renseignant les paramètres nécessaires à sa bonne configuration (adresse d envoi, mot de passe ). Le système de mail est donc prêt et fonctionne sans problème. Exemple de modifications apportées à un des fichiers de configuration d *Le mailhub : serveur qui envoi le message * hostname : nom de mon serveur * AuthUser/ AuthPass : identifiant et mot de passe de la boîte qui émet les messages Les pages concernant les villas possèdent des photos afin de montrer un aperçu des pièces de la location que l on consulte. Ces dernières sont ajoutées par l administrateur dans la partie «administration» du site. Il peut, en tout, envoyer jusqu à 20 photos (10 miniatures + 10 photos zoom). Pour comprendre comment marche l upload de fichiers avec PHP, j ai suivi le tutoriel du site php.net afin de partir sur quelque chose de simple puis j ai analysé le script du site pour le faire fonctionner. Pour cela j ai dû changer les droits attribués aux dossiers de réception des fichiers de photo afin que le site puisse placer ces fichiers dans le bon dossier de l arborescence du site. 7

8 Le site est alors presque fonctionnel, il ne manque qu un élément lié au site mais qui n est pas directement dans le code du site lui-même. Il s agit d une tâche planifiée qui, sous le serveur Windows, était exécutée toutes les nuits à 0h30. Ce script.bat a pour but de lancer un script PHP qui contrôle et annule les demandes de location (prise d options) ayant dépassé un certain délai. Si l administrateur ne reçoit pas un appel téléphonique pour confirmer la demande de location, alors il peut valider ou non la location dans la partie administration du site. Cependant, si aucun appel n est passé, les options «expirent» d elles-mêmes pour ne pas bloquer des éventuelles locations faites par d autres personnes. Pour répondre à ce besoin j ai été contraint de transformer le script.bat en.sh (shell) car les fichiers.bat ne fonctionnent que sous Windows. De plus les tâches planifiées sous Linux s appellent des «cron», j ai donc fait des recherches pour comprendre le fonctionnement de cet outil et suis allé modifier les fichiers qui permettent de planifier la tâche qui exécutera le script en question. Exemple de tâches planifiées : *La première tâche s exécute toutes les minutes (phase de test) et la deuxième chaque jour à 0h30 comme prévu à la base. Phase de test: Pour savoir si le site avait le bon comportement en fonction des actions de l utilisateur, je me suis placé dans la partie «administration» du site. J y ai ajouté des périodes de locations, des villas avec des photos puis j ai regardé si l affichage dans la partie «publique» était correct. Ensuite, j ai contrôlé si les informations se stockaient bien dans la base de données (problèmes d accents ). Les modifications des détails concernant les villas et les autres modifications visibles directement sur le site ont fonctionné. Ensuite je me suis placé dans la partie «publique», j ai essayé de poser des options par l intermédiaire du formulaire accessible aux visiteurs du site. Une fois quelques options posées, j ai vérifié si l administrateur du site pouvait bien valider ces demandes ou bien les annuler. L ensemble des tests sont concluants. Le site est prêt à être basculé sur le vrai serveur (en production). La deuxième étape m a demandé 1 semaine et demie de travail car des notions inconnues sont apparues tels que la configuration du serveur de mails et les téléchargements de fichiers sur le serveur via PHP. Troisième étape : Envoyer les fichiers du site sur le serveur final L envoi des fichiers sur le serveur final est à faire en FTP. Pour m y connecter, des identifiants m ont été fournis, il ne reste plus qu à uploader les fichiers. La base de données MySql est aussi à importer. Une fois cela fait, de nouveaux problèmes apparaissent car la 8

9 plateforme est différente de celle de mon serveur de test. Il s agit d une plateforme FreeBSD. C est pourquoi des adaptations telles que l attribution de droits d écriture sur des dossiers (pour le téléchargement de fichiers) et une nouvelle planification pour l exécution de la tâche planifiée ont été nécessaires. Une fois le site fonctionnant sur cette plateforme (en apparence), et avant de faire en sorte que le nom de domaine actuel réservé au site pointe sur cette version du site, des tests ont été effectués pour valider définitivement le basculement. Cette troisième étape ne m a demandé que quelques jours car les problèmes que j ai rencontrés étaient similaires à ceux que j avais rencontrés précédemment sur mon serveur. Ainsi, j ai pu les résoudre rapidement. Quatrième étape : Faire évoluer le site Le client d Oziolab a désormais besoin de pouvoir modifier le délai d expiration des options dans la partie administration. Le délai actuel de 5 jours étant fixe, il faut lui mettre à disposition un formulaire lui permettant de le changer. Ce dernier étant modifiable, il ne peut être écrit en «dur» dans le code. Il est donc nécessaire de le stocker dans la base de données, c est pourquoi, j ai rajouté une table «délai» avec un champ qui contiendra le délai actuellement utilisé. Avant de se lancer dans la création de l interface, il est nécessaire de modifier un autre endroit dans la base de données. Il s agit de la table contenant les informations concernant la pose d option. Il faut rajouter un champ «DélaiOption» afin de stocker la durée du délai au moment de la prise de l option. Toutes les options n auront pas le même délai en fonction du moment où l option a été prise. Aperçu de la table : Au 22/01/2013 : 2 Au 23/01/2013 : 8 Entre 2 prises d option le délai est différent. Une fois la table prête à accueillir ces nouvelles données, il est question de permettre à la personne de modifier le délai depuis la partie administration. J ai donc fait cela sur la page d accueil de cette partie du site. Ainsi, on informe la personne du délai actuel et on lui ouvre un formulaire dès lors qu elle clique sur le bouton «Modifier» afin qu elle puisse passer d un délai de 5 jours à 8 jours par exemple. 9

10 Interface : Dans la partie haute, on informe la personne du délai courant puis on le réaffiche dans la case qui s ouvre quand on clique sur «modifier». La personne peut saisir une valeur et donc modifier le délai qui sera directement mis à jour grâce à une requête «UPDATE». Laisser à l utilisateur une case pour modifier la valeur sans contrôler la validité de la saisie n est pas très judicieux. C est pourquoi j ai créé une fonction JavaScript qui vérifie si une valeur est saisie et si c est le cas, que cette valeur soit un nombre. Malgré le fait que le JavaScript est facultatif sur les navigateurs (il peut être désactivé), ceci est juste un contrôle pour que le code ne plante pas. Seul l administrateur peut modifier cette donnée, ce n est pas dans son intérêt de renseigner des valeurs non utilisables par l application. C est pourquoi aucun contrôle avant l insertion n est fait avec le PHP. 10

11 Aperçu de la fonction : Le délai est maintenant modifiable par l administrateur. Il a ensuite été question de pouvoir l afficher dans la partie publique pour les visiteurs. La variable le contenant étant une variable globale, je n ai eu qu à l initialiser dans les pages d entrée de chaque partie du site, en récupérant celui courant avec une requête SQL. J ai modifié la requête qui insère dans la base une option posée afin qu elle prenne le délai courant en compte. Ainsi, une option a une date d expiration propre à elle-même. Aperçu de l affichage du délai dans la partie publique : La gestion du délai d expiration de chaque option est donc fonctionnelle, il ne reste donc plus qu à afficher cela dans le détail de l option. Cela a été fait en rajoutant une colonne dans la partie administration (Aperçu disponible dans la capture d écran «Gestion courante»). 11

12 Problèmes rencontrés - Quelques difficultés de compréhension du fonctionnement de SQL SERVER o Cela m a amené à utiliser un nouveau SGBD et donc de découvrir son fonctionnement. - Des problèmes d encodage de caractères d un SGBD à l autre o Une recherche sur les types d encodages qui existent m a permis de comprendre comment cela fonctionnait. J ai pu déterminer quel type d encodage serait nécessaire dans la nouvelle base de données pour qu il n y ait pas de problème d accentuation. - Une modification très fréquente du fichier de configuration de PHP (php.ini) a été obligatoire afin de résoudre des problèmes tels que : Des problèmes de rétrocompatibilité : le site ayant été fait en 2004, les variables globales (de session, serveur ) n étaient pas déclarées par un $_SERVER[ DOCUMENT_ROOT ] par exemple mais juste par $DOCUMENT_ROOT. Les versions plus récentes de PHP possèdent une option (register_globals) pour que les variables de session anciennement écrites soient bien interprétées sur les versions plus récentes mais dans ce cas l option doit être activée. Des problèmes de chaînes tronquées en ODBC : le PHP peut transférer, par défaut, des chaînes de 4096 caractères en ODBC. Or certains champs contenant du HTML sont composés, quant à eux, de plus de 3700 caractères car ils incluent le style CSS (créé par l éditeur Wysiwyg). Il a donc fallu modifier le paramètre en question pour pouvoir transférer l ensemble des données par PHP. Des problèmes de répertoires temporaires pour les photos uploadées : il a fallu définir ce répertoire et y attribuer des droits précis (avec la commande chmod) afin que PHP puisse mettre le fichier dans le bon dossier une fois celui-ci arrivé sur le serveur. - La configuration de l outil SSMPT, malgré qu il soit limité et assez facile à configurer, m a demandé pas mal de recherche car les documentations étaient parfois en anglais et faisaient appel à beaucoup de notions de réseau que je ne maitrisais pas vraiment. o Cela m a permis de découvrir comment envoyer des s depuis PHP Conclusion En conclusion, ce projet m a permis de manipuler du code existant, d apprendre à migrer un site en résolvant l ensemble des contraintes pouvant apparaitre. J ai pu aussi manipuler des nouvelles fonctions de PHP tel que le téléchargement de fichiers et l envoi de mails. Il m a fait aussi prendre conscience que les types d encodages des données sont très important et que Microsoft et Linux sont deux systèmes très différents et ayant des particularités spécifiques à chacun. 12

13 Deuxième projet Nature du projet Afin de découvrir Joomla (CMS très utilisé et mondialement connu), il a été question de faire des recherches sur les méthodes possibles pour adapter un site conçu pour PC vers une version mobile de ce site. Un site mobile est accessible depuis un terminal tel qu un téléphone portable ou une tablette. Il s agit d une version légère dans laquelle sont présentes les informations essentielles. Il a donc fallu faire des recherches sur les plugins existants. Existant et besoins Pour découvrir Joomla, j ai installé le site de l Office du Tourisme de Pont-l Abbé sur ma machine virtuelle que j utilise comme serveur. Ce site ayant été refait très récemment, des évolutions sont cependant en cours pour l actualiser. D une part, il était nécessaire de le faire évoluer d une version unilingue vers une version multilingue. D autre part, les mobiles étant utilisés pour consulter certains sites, le projet futur consisterait, pour cette organisation, d adapter leur site à ce nouveau support de communication et de le proposer dans une version adaptée. En effet, il est actuellement beaucoup trop lourd à charger sur un mobile car il y a beaucoup d images et de contenu. Des modifications seront donc à apporter si ce projet se concrétise. Aperçu du site actuel : 13

14 Avant de me lancer sur la recherche de plugins mobiles pour Joomla, j ai tout d abord manipulé la version PC (changement des menus, des articles ) afin de comprendre l environnement. N ayant jamais utilisé de CMS, un temps d adaptation a été nécessaire pour comprendre l architecture de l application, le système de Template, le vocabulaire utilisé dans l application (par exemple : un plugin et un module ne fonctionnent pas de la même façon) et les autres fonctionnalités de l application. Un CMS est un logiciel facilitant la création de site web. Grâce à ces outils, il est possible de faire des sites Internet sans avoir à coder quoi que ce soit dès lors que quelqu un a déjà développé un module qui répond à ce que l on veut avoir comme résultat. C est un outil très intéressant car il permet aussi de développer soi-même des modules spécifiques. Solutions possibles et solutions retenues Pour créer un site mobile, deux plugins très utilisés existent. Il y a «Jtouch» et «Mobile Joomla», tous deux ont le même but, à savoir d adapter le contenu des pages d un site sur un écran de mobile. J ai installé les deux plugins mais mon choix s est orienté vers Jtouch car il est plus facile à utiliser. Jtouch dispose d un seul Template (fichier de mise en page css) contrairement à l autre plugin, qui lui, créer un Template pour chaque type de mobile (imode, android, Iphone ). Cela rendait le plugin beaucoup plus compliqué à utiliser tout en ayant un résultat moins «propre» qu avec Jtouch. Une fois le plugin installé, il a fallu comprendre son fonctionnement. Différents réglages sont disponibles afin de déterminer quelle mise en page utiliser. J ai découvert l outil en faisant des insertions de menus sur la page principale du template Jtouch. Une fois compris comment fonctionnait l outil, je me suis lancé dans la recherche d un plugin permettant de créer des menus adaptés à une interface mobile (soit un clic pour ouvrir et un clic pour fermer le menu). Grâce à mes recherches, j ai trouvé un plugin de menus sur le site d un développeur qui créer différents composants Joomla de menus animés. Cela correspond parfaitement à ce que je veux. J ai donc testé le menu appelé Maximenu : celui-ci est très bien ; le seul problème est qu il ne réagit pas bien au tactile (ouverture et fermeture intempestive). Peu après, j ai trouvé un autre plugin fait par ce développeur qui correspond encore mieux à ce que je recherche. Aperçu du menu créé avec le nouveau plugin : 14

15 Ce plugin correspond bien à une interface tactile (donc mobile) car le «+» en bout de ligne ou un clic sur le menu déplie les sous menus, ce qui fait que l utilisateur ouvre et ferme le menu comme il le souhaite tout en accédant facilement à ces pages. Maintenant, il ne reste plus qu à assembler les deux composants (menu et Jtouch). Jtouch étant un module qui détecte si le site est ouvert ou non depuis un mobile, il est possible, dans les options, de définir quel template utiliser dès lors que cette détection est faite par le plugin. Plus tard, si le projet de proposer une version mobile aux utilisateurs aboutit, la création d un template fait «à la main» sera effectué. C est pourquoi, il m a été demandé de créer un template en prenant exemple sur le celui du site existant mais en tenant compte que le site s affichera sur mobile. Je me suis donc lancé dans cette création. Une analyse de la construction d un template existant a été nécessaire pour comprendre comment sont organisés les fichiers qui le composent. J ai donc découvert que celui-ci se décompose en plusieurs éléments : - un fichier au format XML : Dans lequel on détermine les positions, les zones - Un fichier index.php : zones définies par des <div> - Un dossier image : images intégrées dans le template - Un dossier css : contient le ou les CSS (mise en page) Dès lors que j ai compris comment structurer le template que je dois créer, je me suis tout d abord interrogé sur la mise en page que je devais mettre en place en CSS car les propriétés dans celui-ci seront faites en fonction des positions que l on va définir au préalable dans le fichier.xml. J ai donc opté pour mise en page suivante: On peut donc voir qu on retrouve dans le fichier.xml les mêmes noms que sur le schéma. 15

16 Une fois les positions paramétrées, on les retrouve lors du choix de la position d un élément dans l interface de Joomla. Pour que cela fonctionne, il faut aussi définir ces zones dans le fichier index.php à la racine du template. Ces zones sont représentées par des balises <div>. Ainsi en utilisant des "id" et des "class", il est possible d appliquer du CSS dessus. Dans le fichier CSS, il faut définir la couleur de fond, la taille, la taille des marges et bien d autres choses concernant les zones. Par exemple concernant le menu du haut, on définit différents paramètres dans le CSS : - Marges de 0 pixels - La zone du menu prend en largeur 100% de la taille de l écran - La hauteur s adapte en fonction de la taille du menu - Une chose importante sur la taille des zones est à prendre en compte car il faut se dire que le site peut être consulté depuis différents mobiles soit des appareils possédant des écrans de différentes tailles. Il faut donc que le contenu s adapte en fonction de la taille de l écran. C est pour cela que la largeur des zones «width» est définie en pourcents et non en nombre de pixels. Si on utilise les pixels comme unité de mesure, le résultat pourra être très mauvais si la taille de l écran est 2 fois plus grande ou 2 fois plus petite que les dimensions données dans le fichier. Ainsi le pourcentage s adapte aussi bien à un écran de 200 pixels qu à un de 700 pixels car dans tous les cas, 100% de la taille de l écran est prise en compte pour afficher le site. Le template a été construit petit à petit. Afin de le tester au fur et à mesure des évolutions, ce site a été affiché sur 2 mobiles (sous Android et IOS, soit les 2 systèmes les plus courants sur les smartphones). Ainsi 2 navigateurs mobiles différents ont été utilisés pour réaliser les tests. Il se trouve que les 2 réagissent très bien et affichent la page conformément à ce qui est prévu. La mise en page est en partie terminée. Il est question d insérer les éléments dans ces positions. Cela se fait par l intermédiaire de lignes de code dans le template qui va charger les éléments demandés à la position définie dans l interface graphique de Joomla lors du chargement de la page. 16

17 Par exemple : *La ligne entre les balises <div> va charger l ensemble des "modules" (un menu dans ce cas) dont la position sélectionnée dans Joomla correspond à «menuhautmobile» et l affiche au chargement de la page dans le navigateur. La version de test est terminée : cela donne un résultat correct sur l affichage des articles demandés dans la zone correspondante. Malgré cela, un questionnement a été effectué sur le fait qu il serait plus adapté de créer des versions d articles spécifiques "mobiles". Ces articles contiendraient très peu de mise en page car dès lors qu un tableau est à afficher, le redimensionnement du texte pour qu il soit écrit en gros ne fonctionne pas. Les articles seraient idéalement bruts et la mise en page serait spécifique mobile pour le contenu. Le texte serait écrit dans une police imposante afin de faciliter la lecture et les images seraient centrées. Ces paramètres seraient définis dans la feuille de style du template mobile. Sur une version mobile, le but étant que les pages soient légères, il est préférable de garder un contenu assez léger et aller à l essentiel. Problèmes rencontrés - Peu de connaissances sur Joomla o Cela m a amené à découvrir ce logiciel utilisé très fréquemment par les entreprises et les développeurs - Peu d informations sur internet sont présentes concernant les versions mobiles des sites Joomla o J ai donc installé les modules (ou plugins) et pris du temps pour voir comment ils fonctionnaient indépendamment et se combinaient les uns les autres. - Des incompatibilités de mobiles et des problèmes de stabilité des modules sont apparus o Les modules pouvant être créés par n importe quel développeur, lorsque l on combine 2 modules ensemble, il est fort possible que ceux-ci ne réagissent pas très bien. Par exemple mon module de «menu accordéon» n est pas compatible avec le template de Jtouch mais est compatible avec Jtouch (au niveau de la détection de l appareil). C est pourquoi, créer un template personnalisé tout en utilisant Jtouch a été une obligation afin que l animation du menu fonctionne. 17

18 Conclusion Ce projet m a permis de découvrir le CMS Joomla. Comme c est un CMS très utilisé, cela me permettra d utiliser plus facilement un CMS si un jour j y suis confronté. De plus j ai appris à créer un template et l adapter en fonction de mes besoins. Cela m a fait travailler la mise en page CSS en même temps que de découvrir Joomla dans sa manière de fonctionner et son architecture. 18

19 Conclusion En conclusion, ce stage m a permis de manipuler l environnement Linux Server, de découvrir Microsoft SQLSERVER, de mettre en place une procédure de migration de données entre 2 SGBD opposés, de découvrir Joomla (CMS + templates) et de manipuler PHP et SQL sur du code existant. Les activités : - Automatisation des tâches d'administration : mise en place de «cron» o C Repérer les tâches d'administration à automatiser o C Concevoir, réaliser et mettre en place une procédure - Conception ou adaptation d'une base de données : Recréer une base de données dans un autre SGDB et l implémenter grâce à une procédure de migration. o C Modéliser le schéma de données nécessaire à la mise en place de la solution applicative o C Implémenter le schéma de données dans un SGBD o C Programmer des éléments de la solution applicative dans le langage d'un SGBD o C Manipuler les données liées à la solution applicative à travers un langage de requête - Développement, utilisation ou adaptation de composants logiciels : Adapter le code du site afin qu il fonctionne sur la nouvelle plate-forme avec la nouvelle base de données o C Développer les éléments d'une solution o C Créer un composant logiciel o C Analyser et modifier le code d'un composant logiciel o C Utiliser des composants d'accès aux données - Réalisation des tests nécessaires à la validation d'éléments adaptés ou développés : Test du site pour voir s il fonctionne de manière identique que sur la plateforme initiale. o C Élaborer et réaliser des tests unitaires o C Mettre en évidence et corriger les écarts - Conception ou adaptation de l'interface utilisateur d'une solution applicative : Adapter un site en version mobile o C Définir les spécifications de l'interface utilisateur de la solution applicative o C Maquetter un élément de la solution applicative L ensemble des activités citées m ont amené à mettre en œuvre les compétences associées listées dans le porte-feuille de compétences. 19