Rapport de stage « PubLimsi » Pierre BARUSSAUD

NOTES ET DOCUMENTS LIMSI N° : 2012-13
5 Juillet 2012
Rapport de stage « PubLimsi »
Pierre BARUSSAUD

Departement Informatique
Diplome préparé : DUT Informatique
jury n°5
"PubLimsi"
Pierre Barussaud
TP 421
Tuteur enseignant Maître d'apprentissage
Jamal ATIF Elisabeth PIOTELAT
Année universitaire 2011-2012
Periode de stage : 16 avril 2012 au 6 juillet 2012
Soutenance du 18/06/2012
Pierre Barussaud 2 Rapport de stage

Remerciements
Je souhaite faire part de mes remerciements les plus sincères à l'ensemble du personnel du
LIMSI pourleur soutien et leur accueil chaleureux tout au long du stage. Et plus particulièrement :
• E. Piotelat : responsable du stage, encadrement et aide, proposition d'un sujet intéressant et
enrichissant.
• M. Brilhac : utilisatrice avançée et testeuse de la nouvelle aplication .
• J.C. Barbet : decouverte du LIMSI et installation des machine de travail .
• N. Pain : dans ses démarches administratives qui ont permis le déroulement du stage.
• P. Le Quéré : directeur du LIMSI.
• A. Vilnat : directrice adjointe du LIMSI et pour sa proposition de stage.
• J. Atif : parrain de stage .
• P. Gillet : mon binôme pour ce stage.
Pierre Barussaud 3 Rapport de stage

Table des matière
Introduction ...............................................................................1
I.Présentation de l'entreprise et du projet ...............................2
Présentation de l'entreprise ................................................2
Présentation du projet ........................................................4
II.Fonctionnement de l'application ...........................................7
III.Visualisation de la nouvelle application "PubLimsi" ......10
La base de données ...........................................................10
Les utilisateurs ..................................................................12
Nouvelle interface .............................................................13
IV.Developpement de la nouvelle application "PubLimsi" ...16
Le format MVC..................................................................16
Arborescence du code et description .................................18
Javascript/Ajax ..................................................................19
Conclusion ..................................................................................21
Code source ................................................................................22
Lexique ......................................................................................28
Référence ...................................................................................28
Pierre Barussaud 4 Rapport de stage

Introduction
Pour pouvoir valider mon DUT informatique, je dois effectuer un stage
conventionné d'environ 10 semaines en entreprise afin de mettre à profit mes
compétences acquis pendant ces deux années mais aussi acquerir d'autres compétences.
J'ai effectué mon stage au LIMSI (Laboratoire d'Informatique pour la Mécanique et les
Sciences de l'Ingénieur ) qui se situe sur le plateau du Moulon à Orsay (91).
J'ai trouvé ce stage en feuilletant des offres au secrétariat de l'IUT. J'ai ensuite
envoyé une lettre de motivation et un C.V. . Après un entretien favorable j'ai été pris
pour une mission spécifique.
La mission consistait à retravailler une application web appellée PubLimsi. Il
s'agit d'une sorte de bibliothèque en ligne deja utilisée. Les tâches étaient l'analyse et la
refonte de la base de donnée mysql existante, l'amélioration de l'interface de saisie,
réorganiser le code source php/html pour qu'il soit plus lisible et implémenter les
fonctionnalités manquantes.
Au terme de ce stage, l'application developpée devra remplacer la première version. Il
sera également plus facile de developer sur cette nouvelle version. A long terme, cette
application pourrait être utiliser par d'autres laboratoires.
Dans un premier temps je vais présenter l'entreprise ainsi que les missions qui m'ont été
confié, ensuite je vais présenté l'application présente lors de mon arriver, puis je vais
détaillé les chagements que l'on a décidé pour finir avec les explications du code
source.
Pierre Barussaud 5 Rapport de stage

I. Présentation de l'entreprise et du projet
1) Présentation de l'entreprise
Situé à Orsay, sur le Plateau de Moulon, le LIMSI (Laboratoire d'informatique
pour la mécanique et les sciences de l'ingénieur) est une unité propre lié au CNRS. Ce
laboratoire est associé aux Universités Pierre et Marie Curie et Paris-Sud. Il mène des
recherches pluridisciplinaires selon deux grands thèmes : la Mécanique Energétique, et
la Communication Homme-Machine.
L'histoire du LIMSI
Anciennement connu sous le nom de Centre de calcul analogique (CCA), c'est
en 1970 que le CCA, alors rattaché à l'ONERA (Office National d'Etude et de
Recherche en Aéronautique, sis à Châtillon) vint s'installer sur le campus de
l'Université de Paris XI. En 1972, sous la direction du professeur Malavard, le CCA
n'existe plus, l'enseigne LIMSI prend place.
Les recherches étaient initialement centrées sur les analogies électriques des
phénomènes de mécanique des fluides. Un besoin de traitement informatique rapproche
le LIMSI du laboratoire de calcul analogique de l'université d'Orsay ; le laboratoire se
lance dans le calcul numérique dès les années 1970. L'infographie apparaît alors dans
les thèmes de recherches du LIMSI et conduit à l'étude des interactions hommemachine.
C'est à cette époque que des spécialistes en infographie du laboratoire ont
conçu le logiciel Euclide, qui fut racheté plus tard par Matra-Datavision.
En 1979, au départ à la retraite de L. Malavard, G. Renard a été nommé Directeur, puis
J. S. Liénard en 1984 (avec L. Ta Phuoc comme Directeur-Adjoint). J. Mariani et F.
Meunier sont nommés respectivement directeur et directeur adjoint en 1989. L'équipe
de Direction en place du 1er janvier 1997 au 31 décembre 2000 était composée de J.
Mariani, directeur et de P. Le Quéré, directeur adjoint.
Depuis le 1er janvier 2001, P. Le Quéré est directeur . Anne Vilnat a été nommée
directrice adjointe en 2012.
Pierre Barussaud 6 Rapport de stage

Illustration 1: organigramme
Une volonté interdisciplinaire
Le LIMSI a l'ambition et la volonté d'allier excellence disciplinaire dans
l'ensemble de ses champs scientifiques et développement de projets pluridisciplinaires,
en partenariat avec d'autres organismes de recherche et des industriels, français et
étrangers. Il s'investit tout particulièrement dans la formation par la recherche et la
diffusion de l'information scientifique et technique.
Le laboratoire accueille environ 120 permanents (chercheurs, enseignant-chercheurs et
ITA-IATOS) et une soixantaine de doctorants menant des recherches pluridisciplinaires
en Mécanique et Energétique et en Sciences et Technologies de l'Information et de la
Communication, couvrant un large spectre disciplinaire allant de la thermodynamique
au cognitif. Cette diversité des recherches conduisent à cinq grands axes thématiques :
la mécanique des fluides, la thermique et l'énergétique, l'ingénierie des langues, les
interfaces intelligentes et la réalité virtuelle et augmentée.
AMIC : Administration des moyens informatiques communs
L'équipe AMIC a pour rôle de maintenir le développement de l'équipement
informatique du LIMSI selon trois objectifs principaux : fournir à chaque chercheur
l'outil qui lui sera le mieux adapté et spécifique à ses travaux, faciliter la production des
publications, favoriser les communications avec la communauté scientifique extérieure.
AMIC participe ainsi à la rédaction de documentation pour les outils et les divers
services qu'elle propose. Cet équipe est composé de six personnes.
Pierre Barussaud 7 Rapport de stage

Les missions de l'équipe se déclinent de manière plus précise, notamment dans les
actions suivantes :
• construire et faire progresser une infrastructure Ethernet et Wifi à haut débit,
• mettre en place, faire évoluer et assurer le suivi des moyens nécessaires à une
connectivité IP performante et sécurisée entre le laboratoire et l'extérieur,
• mettre en oeuvre les bases de données DNS, NIS, LDAP, Active Directory,
relationnelles, nécessaires à l'identification et à la caractérisation des ressources
et des utilisateurs,
• fournir un service de messagerie avec double accès en Webmail et en IMAP
sécurisé, mettre à disposition un serveur de listes. Mettre en place des dispositifs
anti spam et antivirus et les faire évoluer pour faire face au renouvellement
incessant des nuisances venant de l'Internet,
• mettre en place et développer le site web du laboratoire, installer les sites
virtuels hébergés, les wiki, et fournir le support technique aux rédacteurs de
pages web,
• offrir un service de sauvegarde en réseau pour les parcs d'ordinateurs sous Linux
et sous Windows,
• développer et maintenir le parc de postes de travail et des serveurs. Cela
comporte le choix des équipements, les démarches d'acquisition, de connexion
et d'enregistrement sur le réseau, l'installation matérielle, l'installation et la
configuration des logiciels systèmes et utilitaires, le dépannage, le support
technique aux utilisateurs,
• gérer les arrivées, départ et changements de statut des utilisateurs dans les
annuaires informatiques du réseau,
• concevoir et développer les outils logiciels spécifiques, simples scripts ou
applications web évoluées dédiés à la gestion des personnes et des ressources.
Deux applications créées par AMIC, actuellement en service, font l'objet de
constantes améliorations:
• une application web écrite en PHP pour la gestion des utilisateurs, la gestion des
arrivées, des changements de statut, des départs, et la gestion des ressources
informatiques attachées à ces utilisateurs sur les différents serveurs du
laboratoire : serveurs de messagerie, serveur web, etc.
• une application web écrite en PERL pour l'inventoriage des machines et de leurs
attributs, pour la gestion de leur connexion au réseau, pour le suivi de des
équipements pendant toute la durée de leur existence.
2) Presentation de du projet
Reorganiser la base de données et le code afin de faciliter le developement
d'une application déjà utilisée , ainsi que continuer le developpement de cette
application.
Il s'agit donc de modifier la base de données et de transformer le code
PHP/html existant pour qu'il soit au format MVC , nécessaire pour pouvoir
programmer à plusieurs.
Pierre Barussaud 8 Rapport de stage

Analyse
Tout d'abord, il faut savoir que la première application ne comportait pas de
cahiers des charges, elle a été faite au fur et à mesure des idées et demandes de chacun.
Le but du stage fut donc de rendre l'utilisation de cette application plus facile pour les
utilisateurs mais aussi pour les développeurs. Cela consiste tout d'abord à réorganiser la
base de données, sachant qu'il faut pouvoir garder toutes les données deja saisies. Il
faut aussi rendre le code plus accessible aux developpeurs actuels et futurs, pour cela il
faut coder en suivant le format MVC, car le code actuel a été implementé par une
personne et n'est donc pas optimal pour un travail de groupe. Certaines fonctionnalités
ne sont pas encore implémenter et d'autres fonctionnent mal, il faut donc également
continuer de developer l'application. Bien sûr il faut également rendre cette application
facile à utiliser pour les utilisateurs lambda, en sachant que les utilisateurs sont surtout
des chercheurs et doctorants , qu'ils n'ont pas forcément beaucoup de temps et ne sont
pas tous experts en informatique. Cette application étant déjà utilisée, il ne faut pas trop
toucher à la forme car les utilisateurs se sont habitués à celle ci.
Nous étions deux à travailler sur cette nouvelle version à plein temps, ainsi qu'une
troisième personne aidant de temps en temps.
Subversion
Logiciels utilisés
En premier lieu, nous avons travaillé sous ubuntu qui est une distribution Linux.
Subversion (en abrégé svn) est un logiciel de gestion de versions, distribué sous
licence Apache et BSD. Cela permet de stocker un ensemble de fichier et de conservé la
chronologie des modifiactions. Pour notre projet, le dossier contenant le code de
l'application se situe sur le serveur limsi et ainsi on peut modifier le code et testé sur un
ordinateur du limsi (il faut les droits tout de même), et une fois que cela fonctionne on
utilise la fonction "commit" permettant d'enregistrer pour de bon les modifications. Les
autres utilisateurs utilisent quant a eux la fonction "update" pour recuperer la dernière
version enregistrée. Il faut faire cela en étant coordonnés entre les membres du
developpement car il n'est pas rare d'avoir un conflit.
Netbeans
NetBeans est un environnement de développement intégré (EDI), placé en open
source (libre redistribution, d'accès au code source et aux travaux dérivés ) par Sun en
juin 2000 . Netbeans supporte de nombreux languages tels que php, html, javascript,
java, C, C++, python, XML ou encore css. De plus, Netbeans s'enrichit a l'aide de
plugins officilels ou codés par des personnes exterieurs.
A la création d'un projet php il faut indiquer un dossier de projet, et pour chaque fichier
ou dossier créé sur netbeans, il sera également créé dans le dossier indiqué à la création.
On peut donc créé facilement un site ou une application web sans passer par des
editeurs de texte tel notepad++. On peut également se servir de Subversion avec
netbeans, cela créé en même temps que sur l'ordinateur local un autre dossier vers le
Pierre Barussaud 9 Rapport de stage

serveur saisi dans la configuration. Pour finir, netbeans facilite la programmation car il
est doté de l'autocomplémentation. En fonction de se qui est saisi, netbeans nous affiche
les fonctions que l'on peut utiliser ensuite, avec parfois des explications et exemples.
MySQL Workbench
MySQL Workbench est un système de conception de base de données sous
forme graphique qui intègre tous les niveaux de conception, de modification, de
création et de maintenance sur la structure d'une base de données. On peut donc générer
le fichier .sql du graphique crée, mais aussi importer un graphique ou un fichier .sql
pour retravailler sa base .
PhpMyAdmin
Il s'agit de l'une des plus célèbres interfaces pour gérer une base de données
MySQL sur un serveur PHP. De nombreux hébergeurs, qu'ils soient gratuits ou payants,
le proposent ce qui permet à l'utilisateur de ne pas avoir à l'installer.
Cette interface pratique permet d'exécuter, très facilement et sans grandes
connaissances dans le domaine des bases de données, de nombreuses requêtes comme
les créations de table de données, les insertions, les mises à jour, les suppressions, les
modifications de structure de la base de données. Ce système est très pratique pour
sauvegarder une base de données sous forme de fichier .sql et ainsi transférer
facilement ses données. De plus celui-ci accepte la formulation de requêtes SQL
directement en langage SQL, cela permet de tester ses requêtes par exemple lors de la
création d'un site et ainsi de gagner un temps précieux.
Phase du projet
Au début nous avons évidemment étudié la base de données ainsi que le code de
l'application et son fonctionnement. Tout d'abord la base de données, nous avons eu du
mal à comprendre l'importance de certaines tables et nous avons dû demander à des
personnes du limsi à quoi elles correspondaient. Pour le code, vu qu'il a été implémenté
par une seul personne et ne suivant pas de modèle précis, seule cette personne
connaissait le code, malgré les commentaires laissés, il fut parfois difficile de trouvé le
cheminement pour arriver a un certain niveau sur l'application. Nous avons d'abord
travaillé sur la base de données et décidé de la refaire complètement. Ensuite on a
chacun travaillé sur une partie différente, l'un sur le codage et l'autre sur la base de
données. J'ai pour ma part décidé de refaire l'application en suivant le modèle MVC car
je trouvais le code déjà en place difficile à comprendre et surtout difficile a modifier
pour que cela ressemble au schéma du MVC. N'ayant jamais programmé du code php
en MVC, j'ai regardé des tutoriaux sur internet pour apprendre comment faire.
Pierre Barussaud 10 Rapport de stage

II. Fonctionnement de l'application
Les personnes inscrites au LIMSI peuvent accéder à cette aplication, il suffit de rentrer
son identifiant et son mot de passe limsi. Ensuite il a accès aux fonctionalités telles que
ajouter ou rechercher une publication.
Illustration 2: Mes publications
Pour la recherche, il suffit de remplir un ou plusieurs champs du formulaire
représentant des critères importants .
Illustration 3: formulaire de recherche
Pierre Barussaud 11 Rapport de stage

Cela affiche ensuite les resultats et l'on peut avoir la fiche detaillée des publications.
Les resultats ont une couleur definie selon le type de publication.
Illustration 4: resultat recherche
Ici, on voit trois sortes d'exports, ces exports permettent la génération de code endNote,
bibtex et html des resultats trouvés.
On peut également cliquer sur le titre de chaque publication pour accéder à la fiche
détaillée. Sur cette fiche , un utilisateur a à sa disposition quelques options tel que
l'export bibtex ou le telechargement de pdf si il y en a un.
Illustration 5: fiche d'une publication
Pierre Barussaud 12 Rapport de stage

Pour l'ajout cela se fait en plusieurs étapes : le choix du type d'ajout donc soit par
formulaire soit au format Bibtex (ce dernier n'est pas encore fonctionnel),le choix du
type de publication, puis ensuite on saisit le nom de l'auteur puis une fois la saisie
validée l'application affiche les auteurs trouvés dans la base de données avec un nom
similaire à celui saisi, on coche les cases des auteurs que l'on veut, puis vient ensuite le
formulaire ou l'on saisit les informations de la publication (titre, date...) et en fin un
recapitulatif.
Illustration 6: la deuxième étape d'un ajout de publication : choix du type
Si l'utilisateur est un administrateur dans la base de données des membres du limsi
(LDAP) , il a accès a d'autres options. C'est lui qui valide les publications, et il a
également à disposition des options permettant de gérer la base de données
(suppression de donnée, ajout, modification).
Illustration 7: menu de gestion pour l'administrateur
Pierre Barussaud 13 Rapport de stage

III.Visualisation de la nouvelle application
"PubLimsi"
1) La base de données
Ancienne base de données
La base de données originale était constituée de 40 tables. Cette base ne
comportait aucune liaison entre les tables car le moteur de base de donnée utilisé était
myIsam et ce dernier ne supporte pas les clés étrangères, il n'y a donc pas de contrainte
d'integrité et de ce fait pas de vérification de la base en cas d'ajout par exemple. De plus
on s'est aperçu que certaines tables n'étaient pas ou plus utilisées. En effet, certaines
tables on dû être utilisé à un moment donné mais elle ne sont pas utilisées par la version
actuelle. Au fur et à mesure du développement des tables on dû être ajouté et d'autres
sont devenues obsolètes mais restent dans la base de données, il a fallut les supprimer.
Illustration 8: base de données originale
La nouvelle base de donnée
La nouvelle base de données utilise le moteur innoDB permettant ainsi de lier
des tables entre elles. On a donc ajouté pas mal de contraintes , surtout entre la table
Pierre Barussaud 14 Rapport de stage

publications et toutes les tables de type de publications tel que mémoire, ouvrage... . Il a
également fallu changer quelques champs dans certaines tables (modification du type
generalement ou suppression de champs).
Illustration 9: nouvelle base de données
La table principale est Publications. Elle possèdent de nombreuse tables fille. Ces tables
fille possède un atribut permettant de faire le lien avec la table publications. Cet attribut
contient l'index d'une publications. Publications contient quant à elle des attribut
permettant de faire le lien avec la table langue et aeres. Ces attributs contiennent un
index. Entre publications et personnels se trouve une table auteurs. Les personnes se
trouvant dans la table personnels ne sont pas tous des auteurs. Cette table auteur est
nécessaire car une publication peut avoir plusieurs auteurs, ainsin la table auteur
comporte une double clé primaire. L'une des clés prend l'index d'une publication et
l'autre l'index d'un auteur. De même pour la liaison entre publication et groupes. Pour
finir un groupe est lié a un département.
Si on supprime une table ou une ligne d'une table utilisé dans une autre table, les lignes
de cette autre table seront automatiquement supprimer grâce a la fonction "on delete
cascade". Par exemple si on supprime la langue "Chinois", toutes les publications qui
utilisaient cette langue seront supprimées.
Les changements ont cependant apporté leurs lots de contraintes. En effet les liasons
créer entre deux tables ajoutent un nouveau champ dans une de table en fonction des
cardinalités . Exemple , liaison entre publication et langue, une publication a une langue
Pierre Barussaud 15 Rapport de stage

et une langue peut être utilisée par plusieurs publications, dans ce cas un champ est
ajouté dans la table publication qui fera le liens avec la table langue, ce champ ne peut
pas être vide donc il faut mettre une valeur par défaut et ajouter une ligne dans l'autre
table signifiant qu'elle n'est pas liée (ajouter une ligne avec pour valeur textuelle "vide"
par exemple).
Maintenant que la base de données a été crée il a fallu la remplir avec les données de
l'ancienne base. Les tables étant differentes, il a fallu réaliser des scripts bash et php
pour pouvoir transferer les données. Auparavant il a fallu nettoyer la base originale car
de nombreuses lignes étaitent incomplètes ou étaient présente dans une table et pas
l'autre (ex : un mémoire était parfois dans la table mémoire mais pas dans la table mère
publication).Cette tâche a été réalisée par une autre personne (cf rapport de P.Gillet).
2) Les utilisateurs
Definition de chaque utilisateur
Membre du limsi : Il s'agit de tout visiteur enregistré dans la base de données LDAP
repertoriant les inscrits au limsi. Les utilisateur lambda sont surtout des chercheurs que
ce soit en informtaique, physique .... .
Pour ce faire il doit disposer d'un identifiant et mot de passe propre au LIMSI . On
caractérise alors les utilisateurs par leurs login et mot de passe.
Dévelopeur : C'est le developeur du site. Il dispose également d'un login et d'un mot de
passe, et bien sûr il a accès au code source de l'application web . Il est aussi considéré
comme un utilisateur de l'application.
Gestionnaire : Utilisateur avancé, le gestionnaire obtient des droits particuliers . Son
rôle est d'assister le travail de l'administrateur au cours du dévelopement de
l'application. Une des gestionnaires principale est la bibliothécaire.
Fonctionnalité pour chaque utilisateur
Membre du limsi : Après avoir saisi leur login et mot de passe, ils ont accès à leurs
publications personnelles, ils pourront rechercher d'autres publications pour plus
d'information, en ajouter des nouvelles.
Sur leurs propres publications ils ont la possibilité de la modifier ou de la supprimer. Il
peut également exporter ses publications au format Bibtex ou html pour les mettre sur
son propre site, il peut également télécharger des publications au format pdf.
Developeur : Il détient l'accès total aux données et possède tous les droits. Il a accès
aux fonctions administrateurs tel que la validation d'une publication et de nombreuses
fonctions de gestion de base de données (supprimer, modifier ou ajouter des langues ou
groupes par exemple).
Gestionnaire : Le rôle du gestionnaire s'apparente à celui de l'administrateur, il a accès
aux fonctions administrateur de l'application. Le gestionnaire assiste le travaille du
developeur dans la conception de l'aplication et fait également office de testeur. Il ne
peut cependant pas acceder au code source et a la base de données.
Pierre Barussaud 16 Rapport de stage

3) Nouvelle interface
Pour pouvoir acceder à l'application il faut un compte limsi, mais cela ne se fait
pas à partir de l'aplication il faut voir ça avec le service informatique du limsi.
Ensuite le début ne change pas, on doit s'identifier à l'aide de son login et mot de passe.
Le principal changement est la fonction ajouter. Auparavant elle se faisait en 6 étapes
minimum et possédait beaucoup de failles. En effet certaines variables était passées
dans la barre url permettant de modifier ces variables et donc faire planter le système.
De plus les utilisateurs ont parfois fait des erreurs lors de certaines étapes et il ne
pouvait pas retourner en arrière. Ils ont donc dû recommencé depuis le debut, or le code
était fait de sorte à ajouter au fur et a mesure des étapes les données saisi, donc si un
utilisateur stoppait sa saisis les données sont tout de même enregistrée dans la base de
données. La base était donc rempli de lignes vides, de doublons et de donnée fausses.
Pendant les étapes de l'ajout, le choix de l'auteur n'était pas optimal, l'utilisateur pouvait
se tromper facilement en saisissant un nom. Dorenavant l'ajout se fait en deux étapes et
plus six. La première il s'agit d'un formulaire à remplir . Pour l'ajout des auteurs il
choisit le nombre d'auteur voulu et des listes deroulantes sont génerées, grâce a cela il
n'y a plus d'erreur de saisie. Le choix d'un type de publication génère également les
champs propres a ce type de publication. Auparavant il fallait choisir le type de
publication a la première étape et le formulaire n'apparaissait qu'a la 5ème étape. De
plus, il y a une verification du formulaire au cas ou certains champs obligatoires sont
vides. Pour la seconde étape il s'agit simplement d'un récapitulatif des données saisis
précedemment. Il peut ensuite envoyer sa publication ou revenir en arrière sur le
formulaire. En cas d'envoi, il doit attendre la validation de la part des gestionnaires. A
noter que l'utilisateur peut choisir de l'enregistrer en tant que brouillon, dans ce cas pas
de verification des champs et il peut le modifier et l'envoyer plus tard. Une publication
est modifiable seulement si elle n'a pas été validé auparavant et évidemment seulement
par les auteurs de cette publication.
Illustration 10: nouveau format pour l'ajout
Pierre Barussaud 17 Rapport de stage

La fonction recherche a elle aussi été modifiée. Auparavant le choix de l'auteur
se faisait par saisie, donc en cas de faute de frappe on ne trouvait rien, j'ai changé cela
par un menu déroulant comme pour l'ajout. Il y avait également des champs accessible
a tout moment mais qui ne fonctionnent pas si d'autres champs sont remplis. Par
exemple si l'utilisateur a choisi comme type mémoire et a en même temps rempli le
champ conférence le resultat sera nul. J'ai donc fait comme pour l'ajout, en fonction du
type de publication choisi des champs sont généré.
Illustration 11: formulaire de recherche avec comme type chapitre
Illustration 12: formulaire de recherche avec comme type article
Pour le reste cela ne change pas, les administrateurs auront cependant des
options de gestion differentes, certaines étant devenu obsolètes et puis il manquait
quelque fonction d'ajout et de suppression (langue, groupe ...) . Par contre les
utilisateurs auront les mêmes options.
Les fichiers pdf seront copier dans un fichier regroupant tous les fichiers pdf . Il se situe
au même emplacement que pour la version originale de l'application.
Les exports qui ne sont pas encore implémentés dans la nouvelle version feront la
même chose. Ils génèreront le code et il suffira à l'utilisateur de le copier dans son code
personnel.
Pierre Barussaud 18 Rapport de stage

A noter que le style de mise en page est similaire à l'ancienne version. En effet
le code .css est pratiquement le même, quelques modifications et ajouts ont cependant
été fait.
On va également essayer de mettre en place un système permettant de pouvoir
accéder à l'application même si javascript est désactivé. En clair sans javascript, les
verifications ne marche pas et les champs générés n'apparaissent pas. Pour cela, il va
falloir faire des verifications en php et crée d'autres pages qui seront appelées seulement
si javascript est désactivé. Il s'agit surtout de la partie ajout qui, si javascript n'est pas
activé, ressemblera fortement a l'application originale.
Pierre Barussaud 19 Rapport de stage

IV.Developpement de la nouvelle application
"PubLimsi"
1) Le format MVC
Développer une application web en MVC permet de separer le code.
L'organisation globale d'une interface graphique est souvent délicate. L'architecture
MVC ne résout pas tous les problèmes. Elle fournit souvent une première approche qui
peut ensuite être adaptée. Elle offre aussi un cadre pour structurer une application.
Ce patron d'architecture impose la séparation entre les données, la présentation et les
traitements, ce qui donne trois parties fondamentales dans l'application finale : le
modèle, la vue et le contrôleur.
Illustration 13: schéma MVC
Le modèle fait la liaison avec la base de données. Les fichiers modèles
contiennent de nombreuses fonctions qui seront appelées par le contrôleur. Chaque
fonction génère une requête et renvoie le resultat, qui sera utilisé dans le controleur. Les
fonctions peuvent avoir plusieurs paramètres ou aucun, le code commence par la
séléction de la base de données interrogés suivi d'une variable comportant une rêquete.
Certaines fonctions sont plus imposante car la requête diffère selon les informations
saisies par l'utilisateur. Ensuite la requête est envoyé a la base de données courante et
enfin toutes les fonctions retournent le resultat obtenu de cette rêquete. L'encodage
UTF-8 est utilisé pour réglé les problèmes d'accent et autres caractères spéciaux.(voir
code source page 23)
Pierre Barussaud 20 Rapport de stage

Le contrôleur gère les inputs, c'est a dire les données saisies par l'utilisateur ou
recuperées de la base de données. On utilise des variables pour chaque élément html
comme les formulaires ou les tableaux, ces variables sont parfois remplies au fur et a
mesure et suivant les choix de l'utilisateur , par exemple des champs d'un tableau ne
sont pas les mêmes en fonction d'un choix précedent, dans ce cas la variable n'aura pas
les mêmes valeurs. En général, ces variables ne reçoivent que du texte représentant du
code html, il sera parfois necessaire d'appeler le modèle pour afficher des éléments de
la base de données .
Pour cela on aplique à une autre variable une fonction du modèle, elle comportera donc
les resultats de la requête de la fonction qui lui est associé, pour recuperer toutes les
valeurs contenues dans cette variable, on réalise une boucle et tant que cette dernière
peut être lue on traite les données. En general les fonctions retournent plusieurs lignes,
la boucle permet de traiter les lignes une par une. (voir code source page 23)
La vue gère l'affichage des pages. La plupart du temps, elle affichera la valeur
des variables definies dans le controleur, sachant que les variable contiennent du texte
au format html, il suffit de faire echo $nom_de_la_variable pour générer le code html et
ainsi afficher une page web. On peut également ajouter quelque petit affichage en plus
tel qu'un titre ou un message d'alerte.La vue doit comporter le minimum de code php
autre que des echos pour l'affichage des élements de la page.(Pas trop de condition,de
boucle et pas de requête). (voir code source page 25)
En général, les contrôleurs font souvent appellent aux fonctionx du modèle, il est donc
indispensable d'importer en haut le ou les modèles nécessaires. De même, il faut pour
pouvoir afficher les éléments d'une page importer en fin de code du contrôleur le ou les
vues necessaires. En effet il est possible d'avoir plusieurs vues pour un controleur (une
en cas d'erreur et une en cas de succès par exemple). Une autre solution est de crée une
variable dans le controleur et suivant sa valeur la vue affiche des choses differentes.
L'assimilation du modèle MVC a été assez rapide. Les erreurs les plus communes ont
été celle lié à la base de données ou mes requêtes n'étaient pas correctes. Un autre
problème qui aurait été gênant pour les utilisateurs se sont les caractères spéciaux tels
que les accents . L'encodage de la base n'était pas le même que celui utilisé dans le code
php. De ce fait les caractères spéciaux étaient remplacés par un caractère inconnu. Pour
corriger cette erreur, il a fallu forcé le type d'encodage dans chaque fonction des
modèles. Il a fallut s'occuper des apostrophes et guillemets lors d'un ajout prévenir qu'il
s'agit d'un caractère d'une chaine de caractère et non un élément du code. Pour cela on
utilise la fonction "addlashes" permettant d'ajouter automatiquement un "slash" devant
ces caractères permettant ainsi au script de comprendre qu'il s'agit d'un caractère d'une
chaine. Pour l'affichage, on utilise la fonction "striplashes" pour enlever les "slash"
devant les caractère.
Pour terminer, j'ai utilisé des variables de session pour garder en mémoire les données
de l'utilisateur actuel. Ces variables peuvent être utilisé par toutes les pages, et
contrairement aux variables globales elles peuvent changer de valeurs en cas de
changement d'utilisateur. A la déconnexion, les variables de session sont vidées.
Pierre Barussaud 21 Rapport de stage

2) Arborescence du code et description
Illustration 14: arborescence
du code
Le dossier export contient les parsers utilisés pour les exportations. Un parser
permet de convertir un fichier d'un type vers un autre.
Le dossier global: Il contient les fichiers nécessaires au bon fonctionnement de
l'application.
Config.php contient les variables globales, c'est à dire des variables utilisables dans
n'importe quelle page php. Il comporte aussi des racourcis de chemin url.
Init.php permet d'initialiser la page web, on y inclut le ou les fichiers de configuration .
Haut.php comporte l'entête de chaque page web, entièrement en html, indispensable
pour le fonctionnement d'un site web ou d'une application web. C'est dans ce fichier
que l'on inclut le fichier de style ainsi que le ou les fichiers de javascript. Il en est de
même pour bas.php qui contient le bas de chaque page et de menu.php qui contient le
code du menu principal.
Le fichier menu.php est inclu dans le fichier haut.php si l'utilisateur est identifié . Le
menu diffère selon les droits de l'utilisateur.
Le dossier Ajax comporte les fonctions utilisées par le javascript .
Le dossier images comporte toutes les images utilisées par l'application.Pour les
Pierre Barussaud 22 Rapport de stage

afficher il suffit de mettre l'url de ces image (images/nom_image.extension). Si jamais
elle n'existe elle est remplacée par un texte defini en cas d'absence.
Le dossier modeles comporte les fichiers des modèles. Il y en a deux , un comportant le
modèle pour les membres, il comporte des fonctions nécessaire pour des controleurs de
page utilisables par des membres et des administrateurs.. Le deuxième modèle
comporte quand à lui des fonctions nécessaire pour des controleurs de page utilisable
uniquement par les administrateurs.
Le dossier modules comporte tous les controleurs et vues. Il est divisé en deux sous
dossiers admin et membre comportant respectivement les controleurs et vues des pages
admin et controleurs et vues des pages membres. Les vues sont situées dans les dossiers
vues des dossiers membres et admins. Les nom de chaque fichier doit pouvoir identifier
l'action. Par exemple pour le formulaire de recherche le controleur s'appelle
formRecherche.php et la vue s'appelle vueRecherche.php .
Le dossier style contient les fichier .css de l'application. Il s'agit du fichier qui gère la
mise en page de l'application. On y definit les placement des composants, les couleurs,
les polices de caractère et la taille d'écriture entre autres.
Le fichier index.php est le fichier le plus important car appelé en permanence. Sur
l'application, toute les pages ont un url du type index?
module=nom_module&action=nom_action. Ici, nom_module a pour valeur soit
membre soit admin permettant de chercher dans les dossiers modules adequat,
nom_action représente le nom d'un fichier php présent dans le dossier modules. Donc si
le fichier action existe dans le module donné, index.php va inclure le code contenu dans
le fichier action entre le code du fichier haut.php et bas.php. Quelques verifications sont
a faire. Il faut vérifier que l'utilisateur se soit identifié, il faut empecher l'accès aux
pages si celui ci n'est pas identifié, de même on doit verifier que l'utilisateur lambda
n'ait pas accès au pages admins, et pour finir le prevenir si une page est inexistante,
c'est a dire si le module n'existe pas ou que l'action n'est pas présente dans le module.
(voir code source page 22)
3) Javascript/ajax
JavaScript est un langage de programmation de scripts principalement utilisé
dans les pages web interactives mais aussi côté serveur.
Pour notre application, du javascript est utilisé pour générer des champs en
fonction d'un choix, cela se fait dynamiquement et il n'est pas necessaire de rafraichir la
page. L'ajout de code html se fait à l'aide de innerhtml. En premier lieu il faut recuperer
l'identifiant d'un champ qui, selon sa valeur, modifira l'interface. En fonction de sa
valeur, un autre élement de la page actuelle sera modifié. Cet élément est de base vide
et possède aussi un identifiant, ainsi son contenu pourra être modifié (voir code source
page 25) .
Pour la vérification du formulaire d'ajout, du jQuery a été utilisé. jQuery est une
bibliothèque JavaScript gratuite et très pratique, ayant une syntaxe courte et logique.
Pour pouvoir l'utiliser il suffit de telecharger le code sur le site officiel, de le copier
Pierre Barussaud 23 Rapport de stage

dans le repertoire de projet et ne pas oublier de l'intégrer au code . Une autre méthode,
celle que l'on a utilisée, et d'intégrer directement les fichiers jquery hébergé par Google,
cela permet d'alléger la bande passante de l'application et d'avoir toujours la versions dit
actuelle de jQuery. En effet jQuery est constamment en devellopement, et les fonctions
utilisées ont été testées sur tous les navigateurs, donc , contrairement au javascript ou le
code était different pour chaque navigateur , avec jQuery le code est reconnu par tous
les navigateur. Le code Jquery doit cependant se trouvé en dessous des éléments
auxquels il touche sinon il ne connait pas les identifiants de ces élements.(voir code
source page 26)
Les scripts de verification sont appelés au moment du clic sur un bouton. Le
script est alors parcouru, à la fin et après plusieurs verifications de champs, soit l'on
passe à la page suivante soit on previent l'utilisateur des erreurs ou oublis
Enfin, l'utilisation de code Ajax fut nécessaire pour remplir certains champs.
L'ajax permet la récupération de données dans la base de données en javascript. La
forme des fonctions est la même que celle située dans les modèles. Ajax a été utilisé
dans certaine page web pour remplir un menu deroulant créé à l'aide de javascript. Le
code de l'ajax a été écrit en jquery.(voir code source page 27)
Pierre Barussaud 24 Rapport de stage

Conclusion
Ces deux mois et demi de stage se résument en une somme d'enrichissement tant sur le
plan technique, que culturel, humain et personnel. Le LIMSI m'a accordé une grande
liberté de choix et d'actions, qui se traduit aussi par des difficultés, car le cahier des
charges n'était pas défini. Néanmoins, ce large tableau d'actions m'a permis de
m'épanouir pleinement au sein du laboratoire.
En effet, du point de vue technique, j'ai eu l'opportunité de développer et de travailler
entièrement avec des logiciels libres, expérience qui a contribué à l'approfondissement
de mes connaissances acquises durant ma formation à l'IUT sur les systèmes
Unix/Linux.
Ma première mission a été d'étudier les outils informatiques déjà existants utilisé pour
la conception . Parmi ceux-ci, on trouve Netbeans et Subversion.
Après avoir mené des entretiens avec diverses personnes du laboratoire, j'ai pris
l'initiative de reprogrammer entièrement l'application PubLimsi en utilisant le modèle
MVC. Cette entrée en matière dans le développement d'une application de grande
envergure ne s'est pas déroulée sans investissement personnel. Ainsi, la phase d'analyse,
qui précède la programmation du projet, prend alors toute son importance . Le mode de
fonctionnement de l'application, l'organisation des fonctionnalités en différents fichiers
sont des éléments de conception à mettre en évidence avant de se lancer dans le
développement. J'ai de ce fait pu constater que l'omission de quelques informations
mineures dans l'analyse, mène souvent à des changements significatifs par la suite.
A vrai dire, mon travail m'a demandé un mois et demi de développement, tandis que
l'analyse environ 2 semaines, la phase d'analyse a tout de même continuer dans la phase
de devellopement. Néanmoins une telle approche a contribué à un bel enrichissement
personnel.
Finalement, le stage ne s'arrête pas une fois le rapport rendu : si la phase principale de
développement est bien avancée, il reste des chose a implémenté pour rendre la
nouvelle application totalement utilisable. Le reste du temps sera consacré à la création
d'une documentation efficace du code produit pour qu'il soit facilement compréhensible,
utilisable et adaptable par d'autres programmeurs qui me succéderont.
Pierre Barussaud 25 Rapport de stage

Il s'agit d'un morceau du fichier membre.php
Modèle MVC
Le modèle

for($i=1970;$i

';
include CHEMIN_VUE.'vueAjout.php';?>
Il s'agit du fichier vueAjout.php
Ajout d'une publication
Il s'agit d'une partie du fichier fonction.js
La vue
Javascript
function ajoutChampAuteur(){
var j;
//on recupère l'identifiant de l'élément qui, en fonction de sa valeur, genère des champs
supplementaire
var i=document.getElementById('nbauteur');
var cpt=0;
//on supprime les champs existant avant d'en recrée
supprChampAuteur();
//on crée un nombre defini de menu déroulant en fonction de la valeur de l'élément defini
auparavant'
for(j=0;j

}
}
element.removeChild(element.firstChild);
Jquery
Ce bout de code se situe dans le fichier vueAjout.php, en dessous de la partie php visible plus
haut. Il n'est pas en entier car assez long.
function verif_ajout(){
var ok=true;
//si un champ obligatoire est vide, affichage d'un message et renvoi faux
if ($("#titre").val().length

Ajax
Ce bout de code se situe dans le fichier vueAjout.php, en dessous de la partie php visible plus
haut.
// activer au moment ou la valeur de nbauteur change
$("#nbauteur").change(function(){
var i;var aut;
})
$.ajax({
type:"GET",
//appelle la fonction suivante
url:"ajax/getAuteur.php",
//Si la fonction est correct
success: function(retour){
//pout tous les menu deroulant generer
for(i=1;i

Lexique
Php : Le langage PHP est un langage de programmation web côté serveur, ce qui veut dire
que c'est le serveur qui va interpréter le code PHP (language de scripts) et générer du code
HTML qui pourra être interprété par votre navigateur .
Html : L’Hypertext Markup Language, généralement abrégé HTML, est le format de données
conçu pour représenter les pages web. C’est un langage de balisage qui permet d’écrire de
l’hypertexte, d’où son nom.
Sql : SQL (sigle de Structured Query Language) est un langage informatique normalisé qui
sert à demander des opérations sur des bases de données. La partie langage de
manipulation de données de SQL permet de rechercher, d'ajouter, de modifier ou de
supprimer des données dans les bases de données.
Ajax : Asynchronous Javascript And Xml (AJAX) : il désigne un nouveau type de
conception de pages Web permettant l'actualisation de certaines données d'une page sans
procéder au rechargement total de cette page.
Pierre Barussaud 32 Rapport de stage

Références
Bibliographie et liens utiles
• Web LIMSI : Site web du LIMSI ~ http://www.limsi.fr
• PHP.net : Site du langage PHP, aides, références, bugs ~ http://www.php.net
• Site du zero : Tutoriaux et aides pour language html, php, jacascript ... ~
http://www.siteduzero.com/
• Toutjavascript : Aide pour le javascript ~
http://www.toutjavascript.com/main/index.php3
• Jquery : Telechargement et aide pour le Jquery ~ http://jquery.com/
Pierre Barussaud 33 Rapport de stage

Notes et Documents LIMSI N° : 2012-13
Auteurs (Authors) : Pierre BARUSSAUD
Titre : Rapport de stage « PubLimsi »
Nombre de pages (Number of pages) : 32
Résumé : L'application PubLimsi permet au membres du limsi de pouvoir stocké leurs publications.Notre a été la
restructuration de cette application ainsi que sa base de données, en sachant que cette application est déjà utilisé. Nous
avons donc créer une nouvelle base de données et le code source de l'application suit dorénavant le format MVC. Des
changement on été apporter par rapport à la version précédente. De nouveaux langage ont été utilisé tel que le jquery ou
ajax.
Mots clés : PubLimsi,rapport de stage,php,javascript/jquery,MVC,sql