文档搜索 > Untitled

Untitled

Page 1

Page 2
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 2
J’autorise la diffusion de mon rapport de stage sur l’Intranet de l’IUT.

Page 3
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 3
REMERCIEMENTS
Tout d’abord, je souhaite remercier mon maître de stage, Monsieur Emmanuel DELAGE Ing??nieur au service informatique du LPC, qui s’est rendu tr??s disponible, et qui m’a conseill?? tout au long de mon stage. Je remercie ??galement Fabrice JAMMES, chef du service informatique du laboratoire, qui m’a apport?? son aide et son exp??rience pour la mise en place d’une authentification par Central Authentication Service (CAS). Enfin, Je remercie le Laboratoire de Physique Corpusculaire des C??zeaux qui m’a accueilli et plus particuli??rement le personnel du service informatique.

Page 4
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 4
SOMMAIRE
I - Introduction ..................................................................................................................................................................................... 5 II - Cadre de travail ............................................................................................................................................................................... 6 1 - Pr??sentation du LPC Clermont .................................................................................................................................................... 6 2 - Environnement de d??veloppement ............................................................................................................................................ 7 2.1 - Logiciels utilis??s ............................................................................................................................................................................ 7 2.2 - Langages de d??veloppement ....................................................................................................................................................... 7 2.3 - Syst??mes d’exploitation rencontr??s ............................................................................................................................................. 8 3 - Pr??sentation du stage ................................................................................................................................................................. 9 4 - Etat des lieux de PhpMyLab ...................................................................................................................................................... 10 5 - Diagramme de Gantt ................................................................................................................................................................ 15 III - Refonte graphique de PhpMyLab ................................................................................................................................................. 16 1 - D??finition d’une charte graphique ............................................................................................................................................ 16 2 - Restructuration du code ........................................................................................................................................................... 17 2.1 - JavaScript ................................................................................................................................................................................... 17 2.2 - HTML .......................................................................................................................................................................................... 17 3 – Mise en place du design ........................................................................................................................................................... 18 4 – L’ergonomie ............................................................................................................................................................................. 19 IV - Proc??dure d’installation automatique ......................................................................................................................................... 20 1 - La page de d??but de l’installation ............................................................................................................................................. 20 2 - L’??tape 1 : Renseignements sur l’organisme ............................................................................................................................. 21 3 - L’??tape 2 : Configuration de la base de donn??es ....................................................................................................................... 22 4 - L’??tape 3 : Choix des modules ................................................................................................................................................... 22 5 - L’??tape 4 : Configuration des derniers param??tres .................................................................................................................... 24 6 - La fin de l’installation ............................................................................................................................................................... 24 V - Int??gration d'une authentification par CAS ................................................................................................................................... 25 1 - Documentation sur CAS ............................................................................................................................................................ 25 2 - Principe de fonctionnement ..................................................................................................................................................... 26 3 - Mise en œuvre .......................................................................................................................................................................... 27 3.1 - Mise en place ............................................................................................................................................................................. 27 3.2 - Adaptation du code existant ...................................................................................................................................................... 27 3.3 - Page de demande d'identifiants ................................................................................................................................................ 28 VI - Site de PhpMyLab ........................................................................................................................................................................ 29 1 - Charte graphique ...................................................................................................................................................................... 29 2 - Restructuration des pages ........................................................................................................................................................ 31 3 - R??f??rencement ......................................................................................................................................................................... 31 VII - Bilan technique ........................................................................................................................................................................... 33 VIII - Prospectives .............................................................................................................................................................................. 34 IX - Conclusion ................................................................................................................................................................................... 35 X - R??sum?? en anglais ........................................................................................................................................................................ 36 XI - Bibliographie ............................................................................................................................................................................... 37 XII - Annexes ...................................................................................................................................................................................... 38 1 - Email envoy?? aux personnes ayant t??l??charg??es PhpMyLab ..................................................................................................... 38 2 - Email reçu lors d’une demande de mission ............................................................................................................................... 39 3 - Documentation utilisateur de PhpMyLab.................................................................................................................................. 40

Page 5
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 5
I - Introduction
Dans le cadre de la validation de ma seconde ann??e de formation ?? l’Institut Universitaire de Technologie de Clermont-Ferrand, j’ai r??alis?? un stage de 10 semaines au Laboratoire de Physique Corpusculaire de Clermont-Ferrand (LPC) sur le campus des C??zeaux. Le travail qui m’a ??t?? confi?? ??tait d’am??liorer le design du logiciel Open Source PhpMyLab, conçu et d??velopp?? au LPC. Mon travail s’est donc concentr?? en premier lieu sur l’aspect visuel et ergonomique du logiciel. L’objectif principal de rendre plus conviviale l’application afin que le personnel du laboratoire puisse s’en servir plus ais??ment. N??anmoins, PhpMyLab ??tant diffus?? en Open Source, certaines tâches ont eu pour but de r??pondre ?? des demandes d’utilisateurs externes au LPC. En outre, cette activit?? de design a permis d’identifier et de corriger quelques bugs. PhpMyLab n’est pas uniquement un logiciel utile pour le LPC de Clermont, d’autres laboratoires du Centre National de la Recherche Scientifique (CNRS) ont les m??mes besoins en terme de gestion des ressources humaines. Cette application peut ??tre mise en production et s’adapter aussi bien pour les laboratoires de recherche que pour les entreprises. C’est pour cette raison qu’elle a ??t?? conçue de mani??re ?? ce qu’elle soit modulaire et adaptable dans d’autres organismes. L’objectif de mon stage r??side donc dans l’am??lioration de ce logiciel afin qu’il soit t??l??charg?? et mis en production le plus largement et simplement possible. Tout d'abord, je vais pr??senter le LPC ainsi que l'environnement de d??veloppement. Ensuite je d??taillerai chacun des objectifs de mon stage qui sont le design de PhpMylab, le d??veloppement de l'installation, l'int??gration CAS et la refonte graphique du site web du logiciel. Finalement, je dresserai un bilan technique, j’??voquerai les perspectives d’am??lioration du logiciel et je conclurai sur ce que m’a apport?? cette exp??rience professionnelle.

Page 6
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 6
II - Cadre de travail
1 - Pr??sentation du LPC Clermont
Le Laboratoire de Physique Corpusculaire (LPC) d??veloppe ses recherches dans le domaine de la physique fondamentale et des applications pluridisciplinaires grâce ?? douze ??quipes de physique exp??rimentale et th??orique ainsi que quatre services techniques et un service administratif. Le LPC est en ??troite collaboration avec le Conseil Europ??en pour la Recherche Nucl??aire (CERN) notamment pour les exp??riences concernant la physique des particules. Le LPC dispose d’un service informatique dans lequel j’ai ??t?? accueilli. Ce service est divis?? en deux parties. Une partie support et fonctionnement g??n??ral compos??e principalement d’administrateurs syst??me/r??seau et une seconde partie pour le support aux exp??riences physiques compos??e de d??veloppeurs et ing??nieurs calcul. Environ 150 personnes travaillent dans ce laboratoire ce qui n??cessite un service administratif pour g??rer les diff??rents services. L’application sur laquelle j’ai travaill?? durant 2 mois et demi a ??t?? d??velopp??e ?? la demande du service administratif. La conception de cette application, PhpMyLab, a ??t?? confi??e ?? Emmanuel Delage. Les membres du laboratoire devaient pouvoir s’enregistrer sur internet de façon s??curis??e, poser un cong??, faire une demande de mission et consulter les absences de leurs coll??gues via un planning. Le d??veloppement a commenc?? en 2008 avec le module « missions ». Par la suite, Emmanuel Delage a d??velopp?? le module « cong??s » ainsi que le module « planning » pour visualiser les absences du personnel. Une interface « administrateur » a ??t?? impl??ment??e afin que l’administrateur du logiciel puisse g??rer les ??quipes, les services techniques, les utilisateurs et avoir un contrôle sur les cong??s pos??s.

Page 7
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 7
2 - Environnement de d??veloppement
Mon poste de travail ??tait situ?? dans un bureau du service informatique. J’avais ?? ma disposition un MacBook Pro r??cent pour pouvoir d??velopper. Mac OS X ??tant un syst??me d’exploitation que je ne connaissais pas, j’ai pu le d??couvrir et apprendre ?? utiliser des outils qui ne m’??taient pas familiers.
2.1 - Logiciels utilis??s
Xcode Xcode est un environnement de d??veloppement pour Mac OS X. Il g??re la coloration syntaxique et reconnaît les langages web. C'est un logiciel gratuit et complet ce qui justifie mon choix. Chicken of the VCN Chicken of the VNC un Virtual Network Computing (VNC) pour Mac OS X c'est-??-dire qu'il permet d'acc??der ?? un bureau distant pour prendre le contrôle d'un ordinateur distant. Je me suis servi de ce logiciel pour me connecter sur la machine du serveur clrweb2 qui se trouve en salle machine VirtualBox Oracle VM VirtualBox est un logiciel de virtualisation disponible sous Linux, Mac OS X et Windows. Il permet de faire fonctionner un ou plusieurs syst??mes d'exploitation sur un m??me ordinateur au lieu d'en installer un seul par machine. J'ai ainsi pu installer Mandriva et Windows 7 sur ma machine qui est sous Mac OS X Leopard. MAMP MAMP, pour Macintosh Apache MySQL PHP, est une plate-forme de d??veloppement Web sous Mac OS X pour des applications Web dynamiques ?? l’aide du serveur Apache2, du langage de scripts PHP et d’une base de donn??es MySQL. Il est livr?? avec PHPMyAdmin pour administrer plus facilement les bases de donn??es ?? l’aide d’une interface graphique.
2.2 - Langages de d??veloppement
HTML5 HTML (HyperText Markup Language) est un langage ?? balisage permettant de structurer une page web. HTML5 est la derni??re r??vision du langage. Cette derni??re apporte des modifications importantes comme l'apparition de nouvelles balises, la gestion des vid??os et de l'audio ainsi que l'affichage d'??l??ments graphiques.

Page 8
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 8
CSS3 CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert ?? d??crire la pr??sentation des documents HTML et XML. La derni??re version, CSS 3, g??re des effets de style plus pouss??s tels que les d??grad??s ou les bords arrondis. CSS3 est de plus en plus compatible avec les navigateurs et c’est la raison pour laquelle je l’ai choisi. PHP Le PHP (Hypertext Preprocessor) est un langage de scripts libre. C'est un langage qui s'ex??cute côt?? serveur et qui permet de g??n??rer de l'HTML afin d'afficher des pages web dynamiques. J'ai utilis?? la version proc??durale de ce langage car elle ??tait d??j?? utilis??e dans l’application existante. JavaScript JavaScript est un langage de programmation s’ex??cutant côt?? client. Il est utilis?? pour rendre des pages web interactives. Je me suis ??galement servi de JQuery, une biblioth??que d??velopp??e en JavaScript qui a pour but de simplifier des commandes communes de ce langage de d??veloppement. AJAX AJAX, pour Asynchronous Javascript and XML, est une mani??re de construire des applications Web et des sites web dynamiques. AJAX est la combinaison de technologies telles que JavaScript, XML, et le XMLHttpRequest dans le but de r??aliser des applications Web qui offrent une maniabilit?? et un confort d'utilisation sup??rieur ?? ce qui se faisait jusqu'alors : les Rich Internet Applications (RIA). Cette technologie permet d’effectuer une requ??te asynchrone vers le serveur sans recharger la page.
2.3 - Syst??mes d’exploitation rencontr??s
Windows 7 Windows 7 est le dernier en date des syst??mes d’exploitation de la soci??t?? Microsoft, sorti le 22 octobre 2009 et successeur de Windows Vista. Cette nouvelle version apporte de nombreuses modifications, notamment par divers changements au niveau de l’interface, de l’ergonomie g??n??rale et des performances globales du syst??me par rapport ?? son pr??d??cesseur. J’ai ??t?? amen?? ?? l’utiliser pour tester le web design sous Internet Explorer. Mac OS X – Leopard Mac OS X 10.5, ??galement appel?? par le nom de code Leopard, est la sixi??me version du syst??me d'exploitation Mac OS X d'Apple. Il a officiellement ??t?? lanc?? le vendredi 26 octobre 2007. Les Max OS X reposent sur un noyau UNIX BSD qui leurs assurent une bonne stabilit??. C’est sous ce syst??me d’exploitation que j’ai majoritairement travaill??.

Page 9
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 9
Scientific Linux Scientific Linux est une distribution Linux Open Source, co-d??velopp??e par Fermi National Accelerator Laboratory et par le CERN. Elle est bas??e sur Red Hat Enterprise Linux avec l'intention d'??tre 100% compatible au niveau binaire. C’est la distribution install??e sur le serveur de production clrweb2. Mandriva Linux Mandriva Linux est une distribution GNU/Linux ??dit??e par la soci??t?? française Mandriva. Elle cible ?? la fois le grand public et les professionnels. Elle propose l'environnement graphique KDE. Mandriva Linux se veut comme ??tant l'une des distributions Linux les plus simples ?? installer et ?? utiliser. J’ai ??t?? amen?? ?? faire des tests sous Mandriva 2010 afin de corriger certains bugs.
3 - Pr??sentation du stage
Avant le d??but du stage, j’ai pris connaissance du cahier des charges dans lequel ??taient d??crites les am??liorations concernant le logiciel. Cahier des charges et estimation de la r??partition de charge de travail PhpMyLab 16 mars 2012 5 jours | Prise en main de l’environnement de travail et du logiciel phpMyLab. 15 jours | Ecriture de rapport qui doit contenir les modifications g??n??rales et les documentations d??veloppeur et utilisateur en annexe. Id??alement, l’??criture du rapport commencera d??s le d??but du stage. 15 jours | am??lioration du design et de l’ergonomie. -Restructuration des fichiers avec la cr??ation d’un fichier « entete.php », d’un fichier « pieddepage.php » et d’un fichier de style (CSS), -D??coupage des fonctionnalit??s globales du logiciel (Demande, recherche…) au moyen du composant d’interface graphique /onglets/, -Am??lioration de la lisibilit?? des plannings (GD), -Am??lioration de l’affichage des tableaux. 9 jours | Mise en œuvre de CAS dans le fichier « reception.php ». -D??veloppement ?? partir du logiciel « php_conges », -Tests sur la machine de d??veloppement et de production -Mise en production, -Mise ?? jour du rapport ?? la fin de chaque ??tape ! 3 jours | G??n??ration du fichier de configuration initiale « config.php » au moyen d’une page WEB (appel??e « genconfig.php » ou « install.php » par exemple) pour faciliter le d??ploiement de l’application dans d’autres organisations. 3 jours | Ajout de la fonctionnalit?? de validation multiple des cong??s pour les chefs d’??quipe et de service. Si temps disponible | Etude de faisabilit?? de la gestion multilingue du site et AJAX.

Page 10
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 10
Apr??s discussions, nous avons conclu que les priorit??s seraient le design de l’application et l’int??gration d’une authentification par CAS car cette fonctionnalit?? semblait un atout majeur pour int??resser une large communaut??. De mani??re globale, l’objectif de mon stage a ??t?? d’am??liorer PhpMyLab afin de faciliter son utilisation en interne, au sein du laboratoire et d’accroître sa notori??t?? sur internet de sorte ?? ce qu’il soit t??l??charg?? et utilis?? par de nombreux organismes.
4 - Etat des lieux de PhpMyLab
PhpMyLab est un logiciel Intranet open source, modulaire multi-utilisateurs, multi-rôles pour la gestion des missions, des cong??s et des plannings des personnels d'une soci??t??. Ce logiciel a ??t?? conçu pour les besoins du LPC de Clermont-Ferrand. Il est donc bien adapt?? aux laboratoires de recherche poss??dant un webmaster afin d'adapter un minimum le code et g??rer la base de donn??es. Dans le cas d’une entreprise, les statuts des employ??s sont g??n??ralement plus simples ?? mettre en œuvre car ils sont moins nombreux. En effet, si l'on peut consid??rer que l'entreprise est constitu??e de plusieurs ??quipes et d'une direction, alors PhpMyLab serait conforme aux besoins. Il existe 6 niveaux d'accr??ditation: • 1 - Membre d’une ??quipe • 2 - Membre d’un service autre qu’administratif • 3 - Responsable d'??quipe • 4 - Responsable de service • 5 - Administratif / Equipe de direction • 6 - Responsable administratif / Directeur Selon le niveau d'accr??ditation, l'utilisateur n'aura acc??s qu'?? certaines partie ou fonctionnalit??s du logiciel.

Page 11
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 11
Gestion des missions
Figure 1 – Capture d’??cran du module « missions » du PhpMyLab existant Demande de mission Une mission est un terme utilis?? dans le domaine de la recherche. Cela correspond au d??placement d’une personne de façon temporaire dans un autre service ou un autre organisme. Au LPC, de nombreuses missions sont effectu??es au CERN. Apr??s authentification, l’utilisateur aura la possibilit?? de faire une demande de mission. Une fois la demande effectu??e, lui, le responsable de l’??quipe concern??e par la mission et les administratifs recevront un email r??capitulatif. Tant que la mission n’a pas ??t?? valid??e par le responsable, le demandeur peut ?? tout moment l’annuler. Voici un sch??ma, tir?? de la documentation en ligne de PhpMyLab, illustrant les flux d’emails lors d’une demande de mission selon le niveau d’accr??ditation (les fl??ches en pointill??s repr??sentent les cas o?? le personnel technique part en mission pour le compte d'une ??quipe.)

Page 12
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 12
Figure 2 - Flux des mails lors d'une demande de mission Recherche de missions Une fonctionnalit?? de recherche est mise ?? la disposition des utilisateurs pour obtenir les missions selon certains crit??res (nom/pr??nom du demandeur, destination, ??quipe concern??e...). Les responsables peuvent effectuer des recherches sur les missions effectu??es par les membres de leur ??quipe ou par les personnes venant faire une mission pour leur ??quipe. Enfin les administratifs peuvent effectuer toutes les recherches. Figure 3 - Possibilit??s de recherche de mission en fonction du statut

Page 13
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 13
Gestion des cong??s
Figure 4 – Capture d’??cran du module « cong??s » du PhpMyLab existant Demande de cong??s Une fois connect?? au logiciel, l’utilisateur peut effectuer une demande de cong??s. Les responsables recevront les demandes et auront la possibilit?? de les valider ou de les annuler. Le demandeur reçoit syst??matiquement par mail le lien vers sa demande ainsi que le responsable du demandeur et l'administrateur du logiciel (en g??n??ral, le secr??tariat de direction). Le sujet du mail contient le service ou l'??quipe. Figure 5 - Flux des mails lors d'une demande de cong??s.

Page 14
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 14
La validation des demandes par les responsables, le directeur ou l’administrateur est indispensable car c'est lors de cette ??tape que le solde des cong??s est pr??lev??. Recherche de cong??s La fonctionnalit?? de recherche permet ?? l'utilisateur de retrouver ses cong??s selon certains crit??res. Les responsables de groupe peuvent effectuer des recherches sur les cong??s effectu??s par les membres de leur groupe. L'administrateur et la direction peuvent naviguer dans toute la base de donn??es des cong??s. Figure 6 - Possibilit??s de recherche de cong??s en fonction du statut.
Visualisation du planning des absences
Figure 7 – Capture d’??cran du module « absences» du PhpMyLab existant Le module « planning » regroupe les missions et les cong??s afin afficher les absences des employ??s. Il est possible de choisir l’affichage pour un service, une personne et de r??gler la p??riode voulue afin d'obtenir les absences sous forme de calendrier.

Page 15
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 15
La partie administration
Figure 8 – Capture d’??cran de l’interface administrateur du PhpMyLab existant La page « administration.php » permet de g??rer la partie de la base de donn??es r??serv??e aux administrateurs du logiciel et permet de traiter les informations prioritaires. Seuls les utilisateurs de la cat??gorie des administrateurs peuvent acc??der ?? cette page. Apr??s identification, l'administrateur acc??de ?? l'interface utilisateur classique avec un lien suppl??mentaire pour aller sur la page administration. Cette page permet la gestion des utilisateurs et des groupes (ajout, suppression et modification) et permet de faciliter la gestion des personnels et des demandes.
5 - Diagramme de Gantt
Le diagramme de Gantt est un outil permettant de visualiser dans le temps les diverses tâches li??es composant un projet. Il permet de repr??senter graphiquement l'avancement du projet. Figure 9 – Diagramme de Gantt La majeure partie de l’??laboration du design de PhpMyLab a dur?? les 2 premi??res semaines. Afin de r??pondre aux demandes des utilisateurs, cette tâche s’est ??tal??e jusqu’?? d??but mai. A partir de la 5??me semaine de stage, je me suis document?? sur le fonctionnement de l’authentification par CAS. L’int??gration de ce syst??me a commenc?? la semaine suivante et a dur?? jusqu’?? la semaine 8.

Page 16
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 16
Le d??veloppement de l’installation automatique a d??but?? durant la 3??me semaine. Par la suite, l’installation a subi des modifications pour int??grer les param??tres relatifs ?? la version du logiciel avec CAS. D??s que la modification de l’interface graphique a ??t?? termin??e, j’ai r??guli??rement effectu?? des tests et corrig?? des bugs. Ce n’est que lors de la mise en t??l??chargement de la version stable et de la version « beta » avec CAS que les tests du logiciel ont ??t?? arr??t??s. Mon stage s’est termin?? par la refonte graphique du site web de PhpMyLab pendant les 2 derni??res semaines.
III - Refonte graphique de PhpMyLab
Dans le but de rendre le logiciel plus agr??able ?? utiliser et plus ergonomique, je me suis consacr?? ?? la d??finition d’une charte graphique. Le design pr??c??dent ??tant r??parti ?? plusieurs endroits dans chaque fichier, cette refonte ne consistait pas seulement ?? l’??laboration du design mais ??galement ?? la restructuration des pages afin que le code soit bien structur?? et facilement maintenu. Je vais donc d??tailler la charte graphique que j’ai conçue et qui a ??t?? avalis??e par le responsable du projet PhpMyLab. D’ailleurs nous avons maintenu un dialogue r??gulier pour que mes d??veloppements r??pondent bien aux attentes. Ensuite, je pr??senterai les principales restructurations des pages et je finirai par la mise en place du design final.
1 - D??finition d’une charte graphique
J’ai t??l??charg?? et install?? PhpMyLab avant le d??but de mon stage. Ainsi, j’ai pu apprivoiser rapidement cette application web et en d??duire les am??liorations que je pouvais lui apporter. Les seules contraintes impos??es ??taient le choix des couleurs, notamment pour l’interface d’identification o?? je devais utiliser l’orange et le bleu qui rappellent les couleurs de l’IN2P3 (l’Institut National de Physique Nucl??aire et de Physique des Particules). Il ??tait ??galement pr??f??rable de garder une coh??rence des couleurs pour chaque module en adoptant le bleu pour le module « missions », le vert pour le module « cong??s », le turquoise pour le module « planning » (fusion des couleurs de « missions » et de « cong??s ») et enfin le rouge pour l’interface d’administration du logiciel. J’ai opt?? pour un haut de page noir/gris d??grad?? pour que cela se marie avec toutes les couleurs. En pied de page, j’ai utilis?? un d??grad?? de bleu commun ?? toutes les pages. Dans le but de moderniser l’application et pour diff??rencier un site internet d’une application, j’ai choisi d’arrondir les angles de la page et d’appliquer un l??ger ombrage.

Page 17
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 17
2 - Restructuration du code 2.1 - JavaScript
Avant de mettre en place un fichier CSS, j’ai r??organis?? le code source existant afin d’obtenir une application plus facilement maintenable. En bas de chaque page du logiciel se trouvait plusieurs informations comme par exemple l’heure actuelle, qui ??taient r??p??t??es dans toutes les pages. J’ai donc cr???? un fichier JavaScript inclut dans toutes les pages affichant l’heure courante. J’ai r??p??t?? ce type d’op??ration pour tous les doublons. J’ai ainsi modifi?? le code source afin qu’il s’int??gre mieux ?? l’existant :
//Affiche la date et l'heure courante
function clock() { today = new Date; //R??cup??re la date courante heure = today.getHours(); //Extrait les heures min = today.getMinutes(); //Extrait les minutes sec = today.getSeconds(); //Extrait les secondes if (sec < 10) sec = "0" + sec; //Ajout d’un 0 si les secondes sont inf??rieures ?? 10 if (min < 10) min = "0" + min; //Ajout d’un 0 si les minutes sont inf??rieures ?? 10 txt = heure + ":" + min + ":" + sec; //Concat??nation des valeurs document.getElementById('dateCourante').value = txt; //Affichage de l’heure dans le champ pr??vu ?? cet effet timer = setTimeout("clock()",1000); //Cette fonction est appel??e toutes les secondes }
Figure 10 - Fonction JavaScript d’affichage de l’heure
2.2 - HTML
Pour chaque module, la structure de l’ent??te de la page reste la m??me, seul le texte propre au module change. J’ai r????crit cette partie de code dans le fichier « en_tete.php ». J’ai utilis?? le langage PHP pour g??n??rer le texte HTML qui varie selon le module choisi. Le pied de page restant exactement dans toutes les pages de PhpMyLab, j’ai regroup?? le code source dans le fichier « pied_page.php ».

Page 18
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 18
Figure 11 - Structure des pages du logiciel A l’occasion de cette restructuration des pages, j’ai utilis?? des balises apparues avec l’HTML 5 et retir?? celles qui sont d??sormais obsol??tes.
3 – Mise en place du design
Apr??s avoir retir?? les parties de code concernant le design (comme les balises <center> par exemple), j’ai cr???? un fichier « style.css » qui contient tout le style du logiciel ?? l’exception de l’interface d’administration. En effet, comme peu de personnes ont acc??s ?? cette interface et pour ne pas surcharger le fichier CSS, j’ai d??cid?? de mettre le style de « administration.php » entre les balises <head></head> du fichier. J’ai pris soin de commenter correctement chaque fichier pour faciliter la relecture du code source. J’ai rendu le design compatible avec les navigateurs suivants : - Mozilla Firefox 4.0 + (Mac OS X), Firefox 11.0 + (Windows et Linux), - Apple Safari 5 +, - Google Chrome 18 +, - Internet Explorer 8 +, - Op??ra 11 +. Ces choix ont ??t?? motiv??s par l’utilisation de l’HTML 5 et du CSS 3. En ciblant les navigateurs leader sur le march?? et en incluant les versions r??centes de ces navigateurs, l’utilisateur b??n??ficiera d’un rendu optimis?? et homog??ne quel que soit ses pr??f??rences en terme de navigateur. Tous les d??veloppements ont ??t?? syst??matiquement test??s sous ces navigateurs.

Page 19
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 19
/*En tete de page */
#header{
width: 100%; /* largeur de 100% */ background:-webkit-linear-gradient(top,#E85A20,#f5b89f /* Chrome 10+ et Safari 5+ */ background:-moz-linear-gradient(top,#E85A20,#f5b89f); /* pour Firefox 3.6+ */ background:-ms-linear-gradient(top,#E85A20,#f5b89f); /* pour IE 10+ */ background:-o-linear-gradient(top,#E85A20,#f5b89f); /* pour Opera 11.10+ */ background:linear-gradient(top,#E85A20,#f5b89f);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#E85A20',endColorstr='#f5b89f', GradientType=0); /*
d??grad?? pour IE 9 - */
-moz-border-radius: 13px 13px 0px 0px; -ms-border-radius: 13px 13px 0px 0px; -o-border-radius: 13px 13px 0px 0px; border-radius: 13px 13px 0px 0px; /* bords arrondis */
color: white; /* texte de couleur blanche */ height: 60px; /* hauteur de 60 pixels */ border-bottom: solid 10px #180E55; /* bordure en bas de 10 pixels grise */
box-shadow: 0px 4px 12px grey; /* ombrage du bloc */ }
Figure 12 - Extrait de code de « style.css »
4 – L’ergonomie
L’ergonomie est, par d??finition, « l’ensemble des connaissances scientifiques relatives ?? l’Homme n??cessaires pour concevoir des outils, des machines et des dispositifs qui puissent ??tre utilis??s avec le maximum de confort, de s??curit?? et d’efficacit?? ». C’est en majorit?? grâce aux retours des utilisateurs sur la version mise en production que j’ai pu am??liorer les points suivants : - L’acc??s aux champs par tabulation grâce ?? l’attribut tabindex, - Les calendriers en diff??renciant le jour actuel des autres jours, - Le contenu des emails qui contiennent un r??sum?? des caract??ristiques des missions et des cong??s.
[voir annexe 2],
- L’acc??s aux modules ?? partir de l’interface administrateur, - Le calcul du nombre de jours de cong??s ouvr??s qui se fait instantan??ment. Plus g??n??ralement, le nouveau design implique une am??lioration de l’ergonomie.

Page 20
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 20
IV - Proc??dure d’installation automatique
Au cours de la 3??me semaine de stage, j’ai cr???? la proc??dure d’installation automatis??e de PhpMyLab. Auparavant, la configuration du logiciel se faisait en modifiant directement le code source des fichiers « config.php » et « connectionPHPMYLABDB.php ».
1 - La page de d??but de l’installation
Figure 13 - Capture d'??cran de la page de d??but de l'installation A la premi??re utilisation du logiciel, la page « index.php » situ??e ?? la racine du r??pertoire teste si le fichier de configuration existe ou pas. Si le fichier existe, l’utilisateur est redirig?? vers la page d’identification du logiciel et dans le cas contraire, il est orient?? vers la page de d??but de l’installation automatis??e. L’objectif principal de cette page est de tester si les pr??requis sont respect??s. La configuration minimale requise pour PhpMyLab est : - PHP 4.1, - MySQL 5.0, - Apache 2.0, - L’extension PHP GD doit ??tre activ??e pour le fonctionnement des calendriers, - Le JavaScript doit ??galement ??tre activ??. Le code source ci-dessous permet de tester ces pr??requis. Les versions sont obtenues grâce ?? diverses fonctions PHP telles que phpversion() par exemple qui retourne la version de PHP. Chaque version est ainsi compar??e aux exigences requises par le logiciel et un bool??en permet d’indiquer celles qui sont valides ou pas.

Page 21
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 21
//R??cup??ration des versions d'Apache
$tab_apache = explode(" ",apache_get_version());
foreach($tab_apache as $versionA)
{
if(substr($versionA,0,6) == 'Apache') // Extraction de la version d’apache
$version_apache = substr($versionA,7); }
// Contrôle des versions utilis??es
if(phpversion() >= 4.1) $isPHPOK = 1; else $isPHPOK = 0; //PHP if($version_apache >= 2) $isApacheOK = 1; else $isApacheOK = 0; //Apache if(extension_loaded('gd')) $isGDOK = 1; else $isGDOK = 0; //GD if(@mysql_get_server_info() >= 5.0) $isMysqlOK = 1; else $isMysqlOK = 0; //MySQL if($isMysqlOK == 0) if(mysql_get_client_info() >= 5.0) $isMysqlOK = 1; else $isMysqlOK = 0; //MySQL
Figure 14 - Extrait de code de « index.php » de la proc??dure d’installation Le navigateur client ainsi que la version utilis??e sont indiqu??s ?? l’utilisateur. La conformit?? des pr??requis exig??s est n??cessaire pour pouvoir acc??der ?? la suite de l’installation.
2 - L’??tape 1 : Renseignements sur l’organisme
Figure 15 - Capture d'??cran de la page « etape1.php » Cette premi??re ??tape concerne la collecte des informations relatives ?? l’organisme utilisant le logiciel. Le nom et l’URL de l’organisme seront pr??sents sous forme de lien hypertexte dans chaque pied de page du logiciel. L’email du gestionnaire des d??placements/missions doit ??galement ??tre compl??t??. L’utilisateur doit renseigner le login du directeur de l’organisation car ce dernier poss??de des droits particuliers sur la visibilit?? des cong??s et des missions. Enfin, l’adresse du serveur sur lequel est d??ploy?? le logiciel sera utilis??e pour construire l’URL d’acc??s aux missions et/ou aux cong??s contenu dans les emails envoy??s.

Page 22
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 22
3 - L’??tape 2 : Configuration de la base de donn??es
Figure 16 - Capture d'??cran de la page « etape2.php » Les donn??es fournies lors de cette ??tape permettent ?? l’application de se connecter ?? la base de donn??es MySQL mais ??galement de remplir la base indiqu??e avec un jeu de test. Une fois les informations renseign??es, l’utilisateur doit cliquer sur le bouton « Cr??er la base » afin que le programme d??tecte si les informations fournies sont correctes. Une tentative de connexion ?? la base est effectu??e par la fonction mysql_connect(). En cas d’??chec, l’utilisateur va en ??tre inform?? et va ??tre invit?? ?? modifier ce qu’il a saisi. En cas de succ??s, l’existence de la base de donn??es va ??tre test??e. Selon le r??sultat, soit un jeu de test va ??tre charg?? dans la base, soit les enregistrements de la base existante seront conserv??s.
4 - L’??tape 3 : Choix des modules
Figure 17 - Capture d'??cran de la page « etape3.php »

Page 23
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 23
La modularit?? est un atout majeur de PhpMyLab. C’est au cours de cette ??tape que le responsable du serveur va choisir les modules qu’il souhaite mettre en service. Le module planning ne peut cependant ??tre choisi seul car il est bas?? sur le module « missions » et/ou le module « cong??s ». Au moyen du langage JavaScript, les champs vont s’afficher ou se masquer en fonction des modules choisis. Des champs vont ??galement ??tre ajout??s dynamiquement en manipulant l’arbre DOM (Document Object Model).
var NbLiens=parseInt(document.getElementById('nbDeLiens').value)+1; //Incr??mente le nombre de lien function ajoutLien() { //Cr???? un libell?? et un champ de saisie et l’ajoute dans l’arbre DOM if(NbLiens <= 6) { var TR = document.createElement("tr"); //Cr??ation d’une ligne de tableau var TD = document.createElement ("td"); //Cr??ation d’une cellule de tableau var LABEL = document.createElement ("label"); //Cr??ation d’un libell??
//Cr??ation, d??finition d’attribut for et affectation au libell??
var FOR=document.createAttribute("for");
FOR.value="lien"+NbLiens; LABEL.setAttributeNode(FOR); LABEL.innerHTML="Libelle du lien"; //D??finition du texte du libell??
//Affectation du libell?? dans la cellule
TD.appendChild(LABEL);
var INPUT = document.createElement ("input"); //Cr??ation d’un champ de saisie
//Cr??ation et d??finition des attributs ID, NAME et TYPE
var ID=document.createAttribute("id");
ID.value="lien"+NbLiens; INPUT.setAttributeNode(ID); //Affectation de l’attribut ID au champ
var NAME=document.createAttribute("name");
NAME.value="lien"+NbLiens; INPUT.setAttributeNode(NAME); //Affectation de l’attribut NAME au champ
var TYPE=document.createAttribute("type");
TYPE.value="text"; INPUT.setAttributeNode(TYPE); //Affectation de l’attribut TYPE au champ TR.appendChild(TD); //Ajout de la cellule dans la ligne du tableau document.getElementById ('liensAide').appendChild(TR); //Insertion dans le DOM NbLiens++; //Incr??mentation du nombre de liens d’aide } }
Figure 18 – Fonction JavaScript d’ajout de lien d’aide

Page 24
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 24
5 - L’??tape 4 : Configuration des derniers param??tres
Figure 19 - Capture d'??cran de la page « etape4.php » Cette derni??re ??tape permet de configurer les derni??res variables telles que le nom de domaine des emails de la soci??t??, le choix des ann??es (pour les recherches sur les cong??s, missions et planning) et enfin un param??tre tr??s important : le choix du mode. Il existe 2 modes : le mode test et le mode production. Lorsque le mode test s??lectionn??, tous les emails sont envoy??s vers une adresse mail unique. Cela permet d’effectuer des tests sans envoyer d’emails aux utilisateurs enregistr??s dans la base de donn??es. Le mode « production » doit ??tre choisi lorsque le logiciel est mis en production afin que les emails soient envoy??s aux utilisateurs concern??s.
6 - La fin de l’installation
Figure 20 - Capture d'??cran de la page « finConfig.php »

Page 25
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 25
Au cours des ??tapes 1 ?? 4, toutes les donn??es saisies sont stock??es dans des variables de session pour pouvoir ??tre ??crites dans le fichier de configuration « config.php » lors de la fin de l’installation. Une variable de session permet de stocker les donn??es saisies sur le serveur, ce qui offre un haut niveau de s??curit??. Cette variable est accessible sur toutes les pages o?? la session a ??t?? d??marr??e avec la fonction session_start(). Cependant, une session est temporaire et elle est effac??e lorsque l’utilisateur ferme son navigateur, apr??s un certain temps d’inactivit??, ou lorsque l’on force sa suppression avec la fonction session_destroy(). Toutefois, la proc??dure ne peut se terminer correctement si une des ??tapes du processus de configuration n’a pas ??t?? correctement remplie. Un bool??en indique le bon d??roulement de toutes les ??tapes. L’ouverture des fichiers de configuration se fait par l’interm??diaire de la fonction fopen() et l’??criture se fait grâce ?? la fonction fwrite() comme dans l’exemple de code source ci-dessous :
if(!$fichier = @fopen('../connectionPHPMYLABDB.php', 'w'))
{
echo 'Probl??me lors de l\'??criture du fichier de configuration de la base...'; exit();
} fwrite($fichier,"<?php\n// Parametres generes par ".$_SERVER[ 'PHP_SELF' ]." le ".date("D j F - G:i")."\n\n");
//Ecriture de la variable correspondant au serveur
fwrite($fichier, "//Nom du serveur\n\$mysql_location='".$_SESSION[ 'etape2' ][ 'serveur' ]."';\n");
//Ecriture de la variable correspondant ?? l'utilisateur
fwrite($fichier, "//Utilisateur\n\$mysql_user='".$_SESSION[ 'etape2' ][ 'user' ]."';\n");
//Ecriture de la variable correspondant au mot de passe (si elle est d??finie)
fwrite($fichier, "//Mot de passe\n\$mysql_password='".$_SESSION[ 'etape2' ][ 'pwd' ]."';\n");
//Ecriture de la variable correspondant ?? la base de donn??es
fwrite($fichier, "//Nom de la base de donn??es\n\$mysql_base='".$_SESSION[ 'etape2' ][ 'base' ]."';\n?>");
//Fermeture du fichier
fclose($fichier) ;
Figure 21 – Ecriture du fichier de configuration de la base de donn??es
V - Int??gration d'une authentification par CAS
1 - Documentation sur CAS
Central Authentication Service (CAS) est un syst??me d'authentification unique (Single Sign-On) pour le web d??velopp?? par l'Universit?? Yale. L'int??r??t de ce syst??me d'authentification est que lorsqu'un utilisateur s'authentifie sur un site Web qui utilise un serveur CAS, on est alors authentifi?? sur tous les sites Web qui utilisent le m??me serveur CAS. Finalement, ce syst??me permet de s'authentifier une seule fois et d’acc??der ?? plusieurs applications au moyen d’un syst??me de ticket.

Page 26
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 26
Il est implant?? dans plusieurs universit??s et organismes dans le monde et est particuli??rement utilis?? dans le monde acad??mique. L’Institut de Physique Nucl??aire d'Orsay (IPNO) a montr?? son int??r??t pour le module des cong??s du LPC ?? condition que celui-ci poss??de un syst??me d'authentification par CAS. C’est pourquoi une partie importante de mon travail a consist?? ?? int??grer ce syst??me ?? l'application existante.
2 - Principe de fonctionnement
Le fonctionnement de CAS repose principalement sur une notion de tickets. Ces tickets ne transportent aucune information (on dit que ce sont des « opaque handles »). Il y a 2 tickets n??cessaires au fonctionnement de base : le « Ticket-Granting Cookie (TGC) » et le « Service Ticket (ST) ». Le TGC est un cookie de session qui est transmis par le serveur CAS au navigateur du client lors de la phase de connexion. Ce cookie ne peut ??tre lu / ??crit que par le serveur CAS, sur canal s??curis?? (https). Il est facultatif dans la mise en œuvre d’un CAS. Cependant, si le navigateur web n'accepte pas les cookies, l'utilisateur devra se r??-authentifier ?? chaque appel au serveur CAS. Le ST sert ?? authentifier une personne pour une application web donn??e. Il est transport?? en param??tre d'un GET, en retour du serveur CAS lors de la phase de connexion. Ce ticket ne peut ??tre utilis?? qu'une seule fois. Il y a ensuite dialogue direct entre l'application web et le CAS via un GET http, avec le ST en param??tre. En r??ponse, le serveur CAS retourne l'identifiant de la personne, et donc l'authentifie. Il invalide ??galement le ticket et lib??re les ressources associ??es. Concr??tement, ce ticket concerne une personne, pour un service, et il est utilisable une seule fois. Voici un sch??ma qui illustre les ??tapes de l’authentification par CAS et qui a facilit?? ma compr??hension de son fonctionnement: Figure 22 – Sch??ma de fonctionnement de CAS 1. Requ??te initiale : le client web acc??de ?? une application web qui n??cessite une authentification. Cette application redirige la requ??te vers l'URL de connexion du serveur CAS, en https. En param??tre GET, c’est-??-dire dans l’URL, est pass?? l'ID du service pour revenir sur l’application apr??s une authentification r??ussie.

Page 27
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 27
2. Authentification : le serveur CAS authentifie la personne grâce au m??canisme local d'authentification (LDAP, kerberos, certificat, ...). Il redirige la requ??te vers l'application initiale. Si le client web accepte les cookies, le TGC est positionn??. 3. Retour ?? l'application web avec le ST, pass?? en param??tre du GET. 4. Validation : L'application web acc??de directement au serveur CAS en https et passe en param??tres l'ID de service (l'URL) et le ST. Le serveur CAS s'assure de la validit?? du ticket puis il retourne l'identifiant de la personne. Le ticket ne peut plus ??tre rejou??. A ce moment, l’utilisateur est authentifi?? et l'application connait l’identifiant de connexion unique de cet utilisateur.
3 - Mise en œuvre 3.1 - Mise en place
L'int??gration de CAS repose principalement sur 3 fonctions : phpCAS::client() qui permet de se connecter au serveur CAS, phpCAS::forceAuthentication() qui va rediriger l'utilisateur vers le serveur CAS s'il n'est pas authentifi?? ou qui va le laisser passer dans le cas contraire et phpCAS::logout() qui va d??connecter l'utilisateur du serveur CAS. L'utilisation de CAS n??cessite un package sp??cifique accessible en t??l??chargement gratuit sur internet (https://wiki.jasig.org/display/CASC/phpCAS). J'ai cr???? un fichier de param??tres pour le serveur CAS qui contient l'URL du serveur, le port utilis??, le contexte (chemin vers le CAS ?? partir de la racine du serveur) ainsi que l'URL de retour apr??s d??connexion du serveur CAS. Afin de pouvoir tester l'int??gration de CAS, j’ai utilis?? le serveur CAS de l'UdA (ENT Clermont 1) car je dispose d’un compte.
<?php
//Configuration du serveur CAS de l'UDA – ENT Clermont 1
$cas_host = 'cas.u-clermont1.fr'; //Nom du serveur $cas_port = 443; //Port utilis?? $cas_context = '/cas'; //Contexte $url_reception = 'http://localhost:8888/phpmylab_beta/reception.php'; // URL de retour apr??s logout
?>
Figure 23 - Configuration du fichier « config_cas.php »
3.2 - Adaptation du code existant
A partir de la page d'identification, l'utilisateur a la possibilit?? de s'identifier soit de mani??re standard en saisissant son login et mot de passe d'acc??s au logiciel, soit par CAS.

Page 28
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 28
Algorithme d'identification par CAS SI l'utilisateur veut s'identifier par CAS ALORS SI il est authentifi?? sur le serveur ALORS v??rification des droits d’acc??s ?? PhpMyLab SI l'acc??s est autoris?? ALORS initialisation des variables de session connexion au logiciel SINON redirection vers la page de demande d'identifiants FINSI FINSI SINON redirection vers le serveur pour authentification FINSI Figure 24 – Algorithme de l’identification par CAS au logiciel Algorithme de d??connexion SI l'utilisateur veut se d??connecter du logiciel ALORS suppression des variables de session SI l'utilisateur est authentifi?? par CAS ALORS d??connexion du serveur CAS FINSI redirection vers la page d'identification ?? PhpMyLab FINSI Figure 25 – Algorithme de la d??connexion du logiciel
3.3 - Page de demande d'identifiants
Figure 26 - L’interface de demande d’identifiants

Page 29
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 29
Si l'utilisateur n'a pas d'identifiants pour acc??der ?? PhpMyLab, il peut cliquer sur le lien « s'inscrire » sur la page d'identification. Il y acc??de ??galement lorsqu'il s'authentifie par CAS et qu’il n’a pas encore de compte dans l’application. J'ai int??gr?? un captcha pour limiter le spam (envoi d’emails non sollicit??) sur cette interface. Un captcha est le plus souvent une image contenant un texte permettant de diff??rencier de mani??re automatis??e un utilisateur humain d'un ordinateur. Lorsque les champs sont remplis et le captcha valide, un email est envoy?? ?? l’administrateur du logiciel afin qu'il puisse rentrer le demandeur comme utilisateur dans la base de donn??es. Si le demandeur a tent?? de s'authentifier par CAS auparavant, son login CAS sera transmis aux administrateurs afin que ce type d'authentification lui permette d'acc??der au logiciel par la suite.
VI - Site de PhpMyLab
Le site web de PhpMyLab est la vitrine du logiciel. J’ai enti??rement modernis?? ce site et ajout?? la possibilit?? aux visiteurs de tester directement le logiciel au moyen d’une version de d??monstration avec des fonctionnalit??s limit??es. Il contient ??galement une documentation utilisateur, une documentation pour les webmestres mais aussi une documentation pour les d??veloppeurs voulant contribuer ?? l’avanc??e du logiciel. Initialement h??berg?? sur le serveur clrweb2 du LPC, le site est maintenant h??berg?? au centre de calcul de l’IN2P3 ?? Villeurbanne.
1 - Charte graphique
Figure 27 - Maquette du site web de PhpMyLab

Page 30
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 30
L’ancienne version du site a ??t?? conçue avec un design simple en privil??giant le fond plus que la forme. J’ai esquiss?? une charte graphique possible pour le site fin mai. Cette initiative a ??t?? appr??ci??e par mon maître de stage qui a approuv?? la r??alisation de cette refonte. La police « Tahoma » a ??t?? choisie car elle est sans empâtement donc plus agr??able ?? lire. Tous les titres principaux (h1) poss??dent le m??me style. De m??me pour tous les sous-titres, les liens hypertexte, les paragraphes …
#content h1 //Style appliqu?? ?? tous les titres principaux {
color: #000A39; //Couleur bleu fonc?? margin-bottom: 50px; //Marge ext??rieure en bas de 50 pixels margin-top: 40px; //Marge ext??rieure en haut de 40 pixels text-align: center; //Alignement centr?? text-shadow: 2px 2px 2px lightgrey; //L??ger ombrage gris clair
} #content h2 //Style appliqu?? ?? tous les sous-titres {
color: #F15E40; //Couleur orange font-size: 14px; //Taille de police de 14 pixels text-shadow: 2px 2px 2px lightgrey; //L??ger ombrage gris clair
} a //Style appliqu?? ?? tous les liens hypertext {
color: #FA8C55; //Couleur orange clair text-decoration: none; //Pas de soulignement
}
Figure 28 - Extrait du style CSS du site de PhpMyLab Voici le rendu final de la refonte du site vitrine : Figure 29 - Page d’accueil du site de PhpMyLab

Page 31
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 31
Un slider JQuery (d??filement d’images) a ??t?? int??gr?? pour pr??senter des captures d’??cran du logiciel agr??ment?? de liens hypertextes vers la documentation correspondante. Le menu dynamique est d??roulant sur 2 niveaux. Une version de d??monstration du logiciel est accessible aux visiteurs.
2 - Restructuration des pages
Une fois la charte graphique ??tablie, j’ai structur?? chaque page de façon identique:
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8" /> <meta name="Description" content="" > <meta name="Keywords" content="" > <link rel="shortcut icon" href="images/img/phpmylab.ico" type="image/x-icon" > <link rel="stylesheet" href="style.css" > <title>Structure du site de PhpMyLab</title> </head> <body> <div id="banniere"><!—Banni??re du site --></div> <div id="menu"> <div id="barre_menu"><!—Menu d??roulant --></</div> </div> <div id="corps"> <div id="content"><!—Contenu du site --></</div> </div> <div id="footer"><!—Pied de page --></</div> </body> </html>
Figure 30 - Structure des pages du site de PhpMyLab L’arborescence des r??pertoires du r??pertoire racine a ??galement ??t?? totalement modifi??e afin que les fichiers et les images soient s??par??s. Ainsi, les mises ?? jour et la maintenance future du site sont facilit??es. De plus, j’ai centralis?? le CSS dans un fichier unique. Comme pour le logiciel, le design du site web mis en place doit ??tre compatible avec un grand nombre de navigateurs et de versions de navigateurs possible afin d’attirer un maximum de visiteurs.
3 - R??f??rencement
R??f??rencer un site c’est le faire connaître aux moteurs de recherche. Dans le but d’am??liorer sa visibilit?? et son positionnement dans les r??sultats des moteurs, j’ai ??tabli une strat??gie de r??f??rencement. Dans l’id??al, le r??f??rencement doit donc ??tre pens?? avant m??me de concevoir le site web. Ce fut donc l’occasion d’y pr??ter davantage attention pour accroître la visibilit?? du site sur internet.

Page 32
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 32
J’ai donc sp??cifi?? les balises <meta> relatives ?? la description du site ainsi que les mots cl??s le d??crivant pour insister sur des termes correspondant au produit tel que : PhpMylab, Logiciel cong??s, gestion cong??s, gestion missions… De plus, j’ai dispos?? d’un h??bergement sur un serveur du Centre de Calcul de Lyon mettant ?? notre disposition le nom de domaine : http://phpmylab.in2p3.fr . Google ainsi que les autres moteurs de recherche accordent un int??r??t non n??gligeable pour les mots tap??s pr??sents dans l’URL vis??e. La balise <title> et les noms de fichiers dans l’URL avaient d??j?? ??t?? bien identifi??s comme ??l??ments pond??rateurs d’un bon r??f??rencement. J’ai ensuite propos?? le site http://phpmylab.in2p3.fr ?? « Dmoz ». Dmoz est un annuaire de sites, qui regroupe les sites internet propos??s et valid??s par cat??gories. L’objectif est, non seulement de faire apparaître le site de PhpMyLab dans cet annuaire dans une rubrique sp??cialis??e telle que « logiciel libre », mais ??galement de produire un certain nombre de « BackLink » qui sont des liens pointant vers le site. Le nombre de BackLink est un indicateur de la r??putation d’un site. Tout cela permettra au site web de gagner des positions suppl??mentaires dans les moteurs de recherche. Lorsque l’on veut augmenter l’audience d’un site, il faut mettre en place un outil de suivi des visites afin de savoir si les efforts accord??s au r??f??rencement sont payants. Plusieurs outils existent, le leader est Google Analytics mais son concurrent dans le domaine du libre Piwik est ??galement tr??s complet. En plus d’indiquer le nombre de visiteurs, Piwik offre tout un panel d’informations telles que les mots cl??s tap??s par les visiteurs dans les moteurs de recherche, les navigateurs utilis??s, leurs localisations g??ographiques… J’ai ainsi install?? Piwik car il ne n??cessite pas de compte Google et l’utilisateur dispose des statistiques localement.

Page 33
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 33
VII - Bilan technique
Les objectifs fix??s par mon maître de stage ont ??t?? remplis. En effet, mon intervention durant ces 10 semaines sur le logiciel PhpMyLab a conduit ?? la mise en t??l??chargement de 2 versions du logiciel : une version stable et une version beta (avec l’authentification CAS). Concernant la refonte graphique, plusieurs utilisateurs m’ont soulign?? que les modifications apport??es permettent une meilleure utilisation du logiciel. Les retours des utilisateurs ont tous ??t?? pris en consid??ration. J’ai discut?? avec les utilisateurs pour mieux cerner les ??ventuels bugs ou certaines fois pour expliquer les fonctionnalit??s qui n’??taient pas ??vidente ?? prendre en main. Le r??sultat s’est concr??tis?? avec la mise en production de la version stable 1.2.1. Une ??tude de l’am??lioration du calendrier du module planning n’a pu ??tre mise en œuvre par manque de temps. L’authentification par CAS est fonctionnelle et a ??t?? test??e sur plusieurs serveurs CAS. Avec cette fonctionnalit?? suppl??mentaire appr??ci??e par les laboratoires de recherche, davantage d’organismes publics pourront s’int??resser ?? PhpMyLab. D’un autre côt??, l’installation automatis??e est op??rationnelle. Cet ajout ne peut qu’encourager les utilisateurs ?? choisir ce logiciel modulaire. Aussi, il n’est plus n??cessaire de modifier le code source directement, la proc??dure d’installation d??velopp??e s’occupe de tout. Enfin la refonte graphique du site du logiciel est plus attractive et offre la possibilit?? d’essayer une d??monstration du logiciel, de quoi convaincre les personnes h??sitantes ?? le t??l??charger ! Un email automatique a ??t?? envoy?? ?? toutes les personnes (45) ayant t??l??charg??es le logiciel afin de les informer des nouveaut??s et les inviter ?? aller sur le site de PhpMyLab [voir annexe 1].

Page 34
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 34
VIII - Prospectives
De nombreuses am??liorations sont envisag??es. L’adaptation de l’application en multi-langues permettrait d’ouvrir la diffusion du logiciel vers l’??tranger. Pour se faire, un fichier XML devrait contenir la traduction de la langue. Un fichier XML correspondrait ?? une traduction et le choix de la langue se ferait lors de l’installation. Ce type d’am??lioration n??cessiterait beaucoup de travail car il faudrait restructurer tout le code existant afin de le faire correspondre au fichier XML. Apr??s de nombreuses demandes de la part des utilisateurs, un changement de l’affichage des plannings devrait ??tre envisag??. Ces derniers sont actuellement g??n??r??s sous forme d’image PNG grâce ?? la biblioth??que GD de PHP. L’utilisation de l’HTML combin?? ?? du JavaScript (ou m??me JQuery) permettrait de s??lectionner une p??riode directement sur le planning plutôt qu’en saisissant des dates. La balise <canevas> apparue avec HTML 5 qui permet d’afficher des composants graphiques pourrait ??galement ??tre envisag??e. Une fiche PLUME pourra ??tre r??dig??e lorsque le logiciel sera en production dans 3 organismes. PLUME est un projet qui vise ?? Promouvoir les Logiciels Utiles Maîtris??s et Economiques dans l’Enseignement Sup??rieur et la Recherche. Le r??f??rencement de PhpMyLab dans les archives de PLUME permettrait d’accroître consid??rablement la notori??t?? et la visibilit?? du logiciel dans les moteurs de recherche. Une version stable avec CAS sera d??velopp??e. L’authentification par certificat serait aussi un plus. Cela n??cessiterait d’extraire les informations contenues dans un certificat et de les comparer avec les donn??es de la base de donn??es. La suppression compl??te des variables de session devrait ??tre g??r??e ($_SESSION = array() ; session_destroy() ; ). Un r??capitulatif des cong??s ou missions ?? valider pourrait ??tre affich?? sous forme de pop-up aux responsables d’??quipes et de services lors de leur connexion ?? PhpMyLab. Une gestion de l’export de plannings permettrait aux utilisateurs de pouvoir les consulter lors de leurs d??placements sur smartphones ou tablettes.

Page 35
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 35
IX - Conclusion
Au cours de ce stage de 10 semaines, j'ai ??t?? amen?? ?? travailler sur un logiciel mis en production au LPC. J'ai pu mettre en application mes connaissances en mati??re de d??veloppement web et ainsi apporter ma contribution ?? l'am??lioration du logiciel. J'ai pu participer aux ??tapes du cycle de vie d'un logiciel. En effet, j'ai particip?? ?? son d??veloppement en effectuant une refonte graphique, j'ai r??alis?? des tests r??guliers pour m'assurer de son bon fonctionnement, j'ai interagi avec les utilisateurs de PhpMyLab, j’ai mis ?? jour la documentation et assur?? la maintenance du logiciel. Enfin, j'ai d??couvert l'authentification par CAS et j'ai r??ussi ?? l'int??grer au logiciel ce qui m’a permis de d??couvrir une technologie qui peut ??tre facilement r??utilisable dans mes d??veloppements futurs. Cette exp??rience professionnelle m’a ouvert ?? la r??alit?? d’entreprise o?? le d??veloppement d’un logiciel est entrecoup?? de phase de tests et de remise en question de son d??veloppement pour qu’il corresponde aux exigences des utilisateurs. La tendance dominante du stage cot?? web design m’a permis d’approfondir et d’affiner ma conception d’une charte graphique tout en respectant des contraintes ??tablies. De plus, j’ai ??t?? amen?? ?? utiliser de nombreux logiciels et ?? travailler sur plusieurs syst??mes d’exploitation qui ne m’??taient pas familiers. Pour conclure, je pense avoir rempli les objectifs de ce stage et j’appr??cie particuli??rement la confiance qui m’est faite pour la prolongation de cette exp??rience professionnelle en CDD. Lors de cette mission, je d??velopperai un nouveau module de gestion des exp??ditions des colis.

Page 36
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 36
X - R??sum?? en anglais
I did a placement from April 2sd to June 8th at the Laboratory of Particle Physics in Clermont-Ferrand (LPC). The objective of this placement was to go over and improve the software application called PhpMyLab, developed by my supervisor Emmanuel Delage. PhpMyLab was designed to manage days off and absences away at conferences and seminars of employees in the laboratory. It includes an administrative interface from which it is possible to control and manage access and rights to the software. The main reason for my placement consisted in improving the visual appearance of the software. So I had established a graphic charter that has been validated by my supervisor. Although some constraints were imposed on me such as the choice of colors, I benefited from a fairly wide margin of freedom. During my supervisor's absence, I developed an automatic installation procedure. My development had been checked by Emmanuel Delage and built-in into the version for download on the site dedicated to PhpMyLab. For 2 weeks, I integrated an authentication system called CAS for “Central Authentication Service”. CAS is a single sign-on protocol for the web. Its purpose is to permit a user to access multiple applications while authenticating only once. I proposed to the project leader to change the showcase site’s design of PhpMyLab. This suggestion was accepted and I was able to develop a graphic with dominance for the colors orange and blue because those are the colors of PhpMyLab. I also set up a demonstration of the software in order that visitors can test it with limited functionalities. After these 10 weeks of my placement, this experience has been very positive. I have broadened my knowledge of and refined my skills in web development which is a domain that particularly interests me. I have acquired a good autonomy and I was led to take initiatives when my supervisor was absent. Setting up the CAS has allowed me to practice my English, because this authentication service was developed by Yale University and the documentation was in English. Finally, this experience in the professional world was rewarding because the LPC recruited me in fixed-term contract for this summer to add a module to manage shipments of packages.

Page 37
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 37
XI - Bibliographie
D??veloppement web
http://php.net/manual/fr/index.php http://www.siteduzero.com http://www.alsacreations.com/
Tutoriel pour faire un menu d??roulant
http://www.siteduzero.com/tutoriel-3-37795-creer-un-menu-horizontal-deroulant-en-css.html
Documentation sur CAS
http://downloads.jasig.org/cas-clients/php/1.1.3/docs/api/group__publicAuth.html http://www.esup-portail.org/consortium/espace/SSO_1B/cas/
Date Picker JQuery
http://jqueryui.com/demos/datepicker/
Slider JQuery
http://slidesjs.com/

Page 38
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 38
XII - Annexes
1 - Email envoy?? aux personnes ayant t??l??charg??es PhpMyLab

Page 39
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 39
2 - Email reçu lors d’une demande de mission
Bonjour Gagnevin Cedric, Votre demande de mission a ??t?? effectu??e, Suivez le lien PhpMyLab pour l'afficher. ================================================================ Mission du 20/08/2012 au 24/08/2012 ================================================================ Nom : Gagnevin Pr??nom : Cedric Equipe/Service : INFORMATIQUE Lieu de d??part : LPC Clermont Lieu de destination : Paris Objet : R??union Frais : Avec Moyen de transport : V??hicule personnel Aller : D??part le 20/08/2012 ?? 9h Arriv??e ?? 13h Retour : D??part le 24/08/2012 ?? 18h Arriv??e ?? 22h Commentaire : MISSION TEST ================================================================

Page 40
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 40
3 - Documentation utilisateur de PhpMyLab
➢ Identification ➢ Missions ➢ Cong??s ➢ Planning ➢ Administration
Auteur : Emmanuel Delage Graphismes : C??dric Gagnevin
Interface d'identification ?? PhpMyLab
La page Identification permet d'acc??der aux fonctionnalit??s du logiciel avec un nom d'utilisateur et un mot de passe. Copie d'??cran de l'identification.
I) G??n??ralit??s
Seuls les utilisateurs disposant d'un compte dans la base de donn??es peuvent s'identifier. Cette page permet ??galement de changer de mot de passe et de r??cup??rer un mot de passe oubli??.
II) Guide utilisateur
L'interface utilisateur est compos??e de :

une page d'accueil pour s'identifier et g??rer son mot de passe,

une page principale pour effectuer des demandes de missions et des recherches sur les missions.

Page 41
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 41
Pour s'identifier, Le nom d'utilisateur ne correspond pas syst??matiquement au nom de famille. Il peut correspondre au "login Linux" ou autre login qui permet de vous envoyer un mail (exemple: votrelogin@clermont.in2p3.fr). En cliquant sur "Changer son mot de passe", un nouvel affichage apparaît (voir l'image de droite). Cet affichage permet de changer son mot de passe actuel. Un indicateur de complexit?? de mot de passe indique la r??sistance du nouveau mot de passe choisi. Cet affichage permet de retrouver son mot de passe ?? partir de son nom d'utilisateur. Un mail est automatiquement envoy?? ?? l'utilisateur dont le login est renseign??.

Page 42
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 42
Le module MISSIONS
Le module MISSIONS du portail PhpMyLab permet d'effectuer des demandes de missions (d??placements...) aupr??s du service administratif depuis un poste connect?? ?? Internet. Copie d'??cran du module MISSIONS.
I) G??n??ralit??s
L'interface est coupl??e ?? une base de donn??es pour adapter les fonctionnalit??s selon le rôle de l'utilisateur. Cela permet ??galement d'effectuer des recherches sur les demandes. Le portail peut ??tre utilis?? par plusieurs utilisateurs simultan??ment (multi-utilisateurs) et g??re plusieurs niveaux d'accr??ditations selon le rôle de l'utilisateur (multi-rôle). Il existe 6 niveaux d'accr??ditation:

1 Chercheur ou maître de conf??rences

2 ITA ou ITARF autre qu’administratif

3 Responsable d'??quipe

4 Responsable de service

5 ITA ou ITARF administratif / Equipe de direction

6 Responsable administratif / Directeur Les responsables (service et ??quipe) peuvent effectuer des recherches sur les missions effectu??es sur le budget de leur groupe ou entit?? d??pensi??re, les responsables de service peuvent ??galement afficher les demandes effectu??es par les personnels appartenant ?? leur service pour le compte d'une ??quipe. Enfin les administratifs peuvent effectuer toutes les recherches. Le sch??ma ci-contre montre les possibilit??s de recherche de mission en fonction du statut. Les fl??ches en pointill??s repr??sentent les cas o?? le personnel technique part en mission pour le compte d'une ??quipe.

Page 43
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 43
Le demandeur reçoit syst??matiquement par mail le lien vers sa demande ainsi que le responsable du demandeur et les administratifs. Dans le cas (1)=>(3), seul le responsable de l'??quipe indiqu?? dans la demande de mission reçoit un mail et pas le responsable de l'??quipe de rattachement principal du chercheur ou du maître de conf??rence. Le sujet du mail contient le service ou l'??quipe ou l'entit?? d??pensi??re (ligne budg??taire de la mission) et contient l'objet de la mission pour rappel. Aussi, L'administratif peut facilement traiter la demande qui le concerne. Ce second sch??ma repr??sente les flux des mails lors d'une demande de mission. Les fl??ches en pointill??s repr??sentent les cas o?? le personnel technique part en mission pour le compte d'une ??quipe. Enfin, les responsables peuvent choisir de valider ou non les demandes de missions de leur groupe ; ce qui implique que les responsables doivent se connecter ?? l'interface et valider pour que l'administration puisse prendre en compte la mission. Si les responsables choisissent de ne pas effectuer de validation, la signature de tous les acteurs est consid??r??e comme implicite.
II) Guide utilisateur
Apr??s identification, le panneau principal affiche soit :

une demande de mission (voir l'image ci-dessous) si l'utilisateur a cliqu?? sur le lien envoy?? par mail.

une demande non renseign??e. Lors d'une demande, le remplissage de tous les champs est n??cessaire pour l'ex??cution de la requ??te, except?? le commentaire. La liste d??roulante "Choisir un v??hicule du labo" renseigne automatiquement le moyen de transport avec un v??hicule enregistr?? au labo. Les boutons situ??s en milieu de page sont des liens vers les pages du syst??me de r??servation mis en place au labo et du site de FRAM pour les d??placements sp??cifiques.

Page 44
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 44
Le lien "<< recherche >>" d??voile la partie de l'interface graphique contenant la fonctionnalit?? de recherche. Chaque utilisateur peut retrouver ses missions selon certains crit??res. Les responsables d'??quipe ou de service peuvent effectuer des recherches sur les missions effectu??es pour le compte de leur ??quipe ou service (penser ?? vider les crit??res de recherche "Nom" et "Pr??nom"). Les administratifs peuvent naviguer dans toute la base de donn??es MISSIONS.

Page 45
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 45
Le r??sultat de la recherche se pr??sente sous forme de liste (voir ci-dessous). Pour acc??der au d??tail d'une demande de mission, il faut cliquer sur le num??ro d'identifiant correspondant.

Page 46
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 46
Le module CONGÉS
Le module CONGES du portail PhpMyLab permet de g??rer les cong??s depuis un poste connect?? ?? Internet. Copie d'??cran du module CONGES.
I) G??n??ralit??s
L'interface est coupl??e ?? une base de donn??es pour adapter les fonctionnalit??s selon le rôle de l'utilisateur. Cela permet ??galement d'effectuer des recherches sur les cong??s. Le portail peut ??tre utilis?? par plusieurs utilisateurs simultan??ment (multi-utilisateurs) et g??re plusieurs niveaux d'accr??ditations selon le rôle de l'utilisateur (multi-rôle). Il existe 6 niveaux d'accr??ditation :

1 Chercheur ou maître de conf??rences

2 ITA ou ITARF autre qu’administratif

3 Responsable d'??quipe

4 Responsable de service

5 ITA ou ITARF administratif / Equipe de direction

6 Responsable administratif / Directeur Les responsables (service et ??quipe) peuvent afficher les cong??s des membres de leur groupe. L'administrateur du logiciel (par exemple la secr??taire de direction) et le directeur peuvent afficher tous les cong??s. Possibilit??s de recherche de cong??s en fonction du statut.

Page 47
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 47
Flux des mails lors d'une demande de cong??s. Le demandeur reçoit syst??matiquement par mail le lien vers sa demande ainsi que le responsable du demandeur et l'administrateur du logiciel. Le sujet du mail contient le service ou l'??quipe. La validation des demandes par les responsables/le directeur/l'admin est indispensable car c'est lors de cette ??tape que le solde des cong??s est pr??lev??.
II) Guide utilisateur
Apr??s identification, le panneau principal affiche soit :

une demande de cong?? (voir l'image ci-dessous) si l'utilisateur a cliqu?? sur le lien envoy?? par mail.

une demande non renseign??e. Lors d'une demande, le remplissage de tous les champs est n??cessaire pour l'ex??cution de la requ??te, except?? le commentaire. L'utilisateur peut "calculer le nombre de jour ouvr??" de son cong??. Il peut informer mail les membres du groupe auquel il appartient. Cette information sera effective lors de la validation.

Page 48
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 48
Le lien "<< recherche >>" d??voile la partie de l'interface graphique contenant la fonctionnalit?? de recherche. Chaque utilisateur peut retrouver ses cong??s selon certains crit??res. Les responsables de groupe peuvent effectuer des recherches sur les cong??s effectu??s par les membres de son groupe (penser ?? vider les crit??res de recherche "Nom" et "Pr??nom"). L'administrateur et la direction peuvent naviguer dans toute la base de donn??es CONGES. Le r??sultat de la recherche se pr??sente sous forme de liste (voir ci-dessous). pour acc??der au d??tail d'un cong??, il faut cliquer sur le num??ro d'identifiant correspondant.

Page 49
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 49

Page 50
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 50
Le module PLANNING
Le module PLANNING du portail PhpMyLab permet de visualiser les cong??s et les missions depuis un poste connect?? ?? Internet. Copie d'??cran du module PLANNING.
I) G??n??ralit??s
Le portail peut ??tre utilis?? par plusieurs utilisateurs simultan??ment (multi-utilisateurs). Tous les utilisateurs, quelque soit leur statut peuvent visualiser le planning des autres utilisateurs. Il n'est cependant pas possible d'afficher le d??tail des missions et cong??s de chaque utilisateur. Il est possible d'afficher une version imprimable des plannings.
II) Guide utilisateur
Apr??s identification, le panneau principal affiche :

une zone pour les crit??res de recherche.

un calendrier correspondant ?? la recherche.

Page 51
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 51
Le bouton "imprimante" ouvre une nouvelle fen??tre sans les crit??res de recherche et r??duit l'image du calendrier pour que celui-ci apparaisse totalement lors de l'impression.

Page 52
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 52
L'interface d'administration
La page Administration permet de g??rer une partie de la base de donn??es et traiter les informations prioritaires. Copie d'??cran de l'administration.
I) G??n??ralit??s
Seuls les utilisateurs de la cat??gorie des administrateurs peuvent acc??der ?? la page administration. Apr??s identification, l'administrateur acc??de ?? l'interface utilisateur classique avec un lien suppl??mentaire (en bas, ?? gauche) pour aller sur la page administration. Cette page permet la gestion des utilisateurs et des groupes (ajout, suppression et modification) et permet de faciliter la gestion des personnels et des demandes.
II) Guide "administrateur"
Lors de son arriv??e sur la premi??re page, l'administrateur peut effectuer certaines op??rations ?? partir de messages d'information :

Affichage de la liste des utilisateurs en fin de contrat,

Si le module CONGES est activ??, affichage des cong??s en attente d'??tre valid??s ou annul??s ; un lien permet d'acc??der directement au cong?? en question. Le bouton "Administrer" en bas de page permet de g??rer (ajouter, supprimer et modifier) les groupes et les utilisateurs.

Page 53
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 53
Par d??faut, la liste ?? g??rer est positionn??e sur la liste des groupes. Pour ajouter un nouveau groupe (bouton en bas ?? droite de la page), l'administrateur doit renseigner 7 ??l??ments d'informations:

Nom du groupe (sans accent)

Nom d'utilisateur du responsable (sans accent). Le nom d'utilisateur (login) correspond au d??but de l'adresse mail (par exemple login@domaine) auquel le logiciel ajoute "@domaine" pour construire un mail valide. Le champ "mel" de la base de donn??es existe mais n'est pas utilis??.

Nom d'utilisateur de l'administrateur principal (sans accent),

Nom d'utilisateur de l'administrateur secondaire (sans accent, FACULTATIF),

Validation des missions (0 ou 1) si le responsable souhaite valider par mail,

Validation des cong??s (0 ou 1), dans ce cas la validation devrait toujours ??tre ?? 1,

Entit?? d??pensi??re (0 ou 1), quand un ??quipe dispose de plusieurs lignes budg??taires. Pour supprimer, cliquez sur le bouton ?? droite de la page, align?? avec le groupe correspondant. Une confirmation vous sera demand??e. Pour ??diter, cliquez sur le bouton ?? droite de la page, align?? avec le groupe correspondant. Les 7 ??l??ments d'informations apparaissent alors (autant que pour l'ajout) sauf que les ??l??ments sont pr??-remplis avec les valeurs pr??c??dentes. Cliquez sur le bouton pour mettre ?? jour le groupe ou cliquez sur le bouton pour annuler. Pour une gestion simplifi??e des utilisateurs, un menu d??roulant permet d'afficher uniquement les utilisateurs d'un groupe.

Page 54
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 54
Pour ajouter un nouvel utilisateur (bouton en bas ?? droite de la page), l'administrateur doit renseigner certains ??l??ments d'informations. :

Nom d'utilisateur (pas d'accent). Le nom d'utilisateur (login) correspond au d??but de l'adresse mail (par exemple login@domaine) auquel le logiciel ajoute "@domaine" pour construire un mail valide. Le champ "mel" de la base de donn??es existe mais n'est pas utilis??.

Nom civil (sans accent)

Pr??nom civil (sans d'accent)

Mot de passe (pas d'accent). Conseil: donnez un mot de passe temporaire assez simple pour inciter l'utilisateur ?? le modifier. Pour informer l'utilisateur de la cr??ation de son compte, utiliser la fonction
"Recevoir son mot de passe" de la page Identification.

SS pour S??curit?? sociale (FACULTATIF)

Mel (FACULTATIF)

Groupe (sans accent). Si le groupe n'existe pas (ou a ??t?? mal ??crit), un message vous en informe.

Statut :
o 1 Chercheur ou maître de conf??rence o 2 ITA ou ITARF autre que administratif o 3 Responsable d'??quipe o 4 Responsable de service o 5 ITA ou ITARF administratif / Equipe de direction o 6 Responsable administratif / Directeur

Admin, mettre la valeur ?? 1 si l'utilisateur est aussi administrateur.

D??but du contrat

Fin du contrat (utile dans le cas de contrat ?? dur??e d??termin??)

Type :
o Chercheur CNRS o Chercheur UNIV. o ITA CNRS o ITA UNIV. o CDD CNRS o CDD UNIV.

Page 55
C??dric GAGNEVIN Laboratoire de Physique Corpusculaire PhpMyLab
Page 55
Cette liste est modifiable dans le fichier "config.php" au moyen de la variable "$type_contrats". Cette variable contient ??galement le nombre de jours de cong??s annuel selon le type de contrat. Dans le cas o?? le module CONGES est charg??, vous devez sp??cifier d'autres informations:

Solde de cong??s annuels

Solde de cong??s annuels restant de l'ann??e pr??c??dente

Solde de jours de r??cup??ration

Solde de jours du compte ??pargne temps

Quota de jours de cong??s r??attribu??s tous les ans. Calcul?? automatiquement en fonction du type de contrat ?? la cr??ation d'un nouvel utilisateur.

Quotit?? (l'image ci-dessus n'est pas ?? jour): pourcentage du temps partiel Enfin, certains boutons permettent d'imprimer les soldes des cong??s des utilisateurs, d'effectuer la r??attribution des cong??s annuels (par exemple en d??but d'ann??e civile) et d'initialiser (mise ?? z??ro) les cong??s annuels restant de l'ann??e pr??c??dente (par exemple au 1er f??vrier).

设为首页 | 加入收藏 | 昂纲搜索

All Rights Reserved Powered by 文档下载网

Copyright © 2011
文档下载网内容来自网络,如有侵犯请和我们联系。tousu#anggang.com
返回顶部