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.
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.
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
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.
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.
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.
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??.
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.
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.
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.)
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
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.
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.
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.
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.
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 ».
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.
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.
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.
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.
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 »
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
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 »
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.
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.
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.
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
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
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
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.
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.
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].
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.
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.
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.
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/
C??dric GAGNEVIN
Laboratoire de Physique Corpusculaire
PhpMyLab
Page 38
XII - Annexes
1 - Email envoy?? aux personnes ayant t??l??charg??es PhpMyLab
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
================================================================
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.
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??.
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.
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.
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.
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.
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.
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.
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.
C??dric GAGNEVIN
Laboratoire de Physique Corpusculaire
PhpMyLab
Page 49
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.
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.
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.
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.
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.
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).