PERET Simon Almerys

Réalisation d'un intranet dédié à faciliter la
communication interne et mise en place d'une nouvelle
charte graphique dans une application de signature en
ligne.

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

1 / 59

J'autorise les responsables de l'IUT à publier mon rapport sur l'intranet de l'établissement.

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

2 / 59

1. REMERCIEMENTS

Je tiens à remercier mon maître de stage Alain MARCOZ pour son accueil au sein d'Almerys
et pour le suivi accordé à mon stage. Je tiens également à remercier Sophie BARDET, chef
de projet de l'application de signature, qui m'a pris en charge durant les trois dernières
semaines de mon stage.
Je remercie également l'ensemble des membres de l'équipes ECDC pour leur accueil
chaleureux ainsi que pour la disponibilité accordée à mes projets.

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

3 / 59

Sommaire
1.REMERCIEMENTS.....................................................................................3
2.INTRODUCTION GÉNÉRALE.......................................................................6
3.COMPTE RENDU D’EXPÉRIENCE PROFESSIONNELLE....................................8
4.PRÉSENTATION DE L'ENTREPRISE............................................................10
5.RÉALISATION D'UN INTRANET POUR L'ÉQUIPE EC-DC................................13
5.1Analyse des besoins de l'équipe ...........................................................................13
5.2Choix de l'outil de conception utilisé pour la réalisation.........................................14
5.3Réalisation de la maquette et des spécifications...................................................16
5.4Architecture fonctionnelle de l'intranet...................................................................17
5.5Architecture technique de l'intranet........................................................................22
5.5.1.Principe de taxonomie.............................................................................................22
5.5.2.Spécialisation de nœud...........................................................................................23
5.5.3.Utilisation de modules complémentaires.................................................................25
5.5.4.Le module « Views » ,création de pages dynamiques............................................25
5.5.5.Le module « calendar », création de calendrier......................................................26
5.5.6.Développement d'un module de redirection d'url....................................................29
5.6Déploiement et évolutions futures..........................................................................31
6.PORTAGE DE L'INTERFACE GRAPHIQUE DE L'APPLICATION EBEESIGN........33
6.1Présentation du projet............................................................................................33
6.2Fonctionnement .....................................................................................................34
6.3Les objectifs............................................................................................................35
6.4Transfert de compétences......................................................................................35
6.5Mise en place du nouveau design..........................................................................36
6.6Portage du javascript..............................................................................................37
6.6.1.Utilisation du module DatePicker pour Jquery........................................................38
Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

4 / 59

6.6.2.Utilisation du module DataTable pour Jquery.........................................................39
6.7Mise en place de nouvelles spécifications métier..................................................41
6.7.1.Algorithme de validation de RIB..............................................................................43
7.CONCLUSION.........................................................................................45
8.RÉSUMÉ EN ANGLAIS..............................................................................47
9.LEXIQUE................................................................................................48
10.BIBLIOGRAPHIE....................................................................................50
10.1Drupal...................................................................................................................50
10.2Javascript et Jquery.............................................................................................50
11.TABLE DES ANNEXES............................................................................51
12.ANNEXES.............................................................................................52
RÉSUMÉ...................................................................................................59

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

5 / 59

2. INTRODUCTION GÉNÉRALE

Durant mon année de licence informatique à l'IUT informatique de Clermont-Ferrand, j'ai
effectué un stage d'une durée de seize semaines au sein d'Almerys. Je commencerai donc
par vous présenter cette entreprise dans laquelle j'ai effectué mon stage. Au cours de ces
seize semaines j'ai été amené à travailler sur deux missions différentes.
La première, au début de mon stage, fut réalisée en autonomie et avait pour but de réaliser
un intranet pour l'équipe dont je faisais partie. En effet, cette équipe grandit rapidement et de
nombreux membres présents depuis très peu de temps ne connaissent pas toujours
l'ensemble des autres membres, ni les procédures à suivre pour chaque situation. L'objectif
était donc de fournir un site web interne à l'entreprise, facilitant la circulation d'informations
importantes et renforçant la connaissance interne des projets et des techniques utilisées au
sein de l'équipe. Le site devait être facile à utiliser, dynamique et évolutif afin de rester à jour
en toutes circonstances. Je devais pour cela réaliser l'ensemble du projet, de la collecte des
besoins auprès des utilisateurs jusqu'au choix des solutions techniques à mettre en place
pour répondre à la problématique en passant par l'architecture interne de l'application.
La deuxième mission s'inscrit dans un projet déjà en cours de développement et comprenant
une équipe d'une petite dizaine de membres. Il s'agit d'une application de signature en ligne
à destination de clients. L'objectif était d'assurer la continuité entre deux développeurs afin
de mettre en place le nouveau design de l'application ainsi que de porter certains codes
javascript d'un framework vers un autre. Ce processus s'inscrit dans un phénomène
d'industrialisation de l’application qui vise à la rendre la plus générique possible tout en
offrant la possibilité de la spécialiser pour chaque client.

Je présenterai d'abord les différentes parties qui ont composé la réalisation de l'intranet. En
partant des besoins qui ont été collectés auprès des membres de l'équipe j'exposerai ensuite
les choix qui ont permis de décider quel outil serait utilisé pour réaliser l'intranet. À partir de
Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

6 / 59

là, je développerai les spécifications fonctionnelles puis techniques de l'application en
précisant les mécanismes mis en place afin de répondre à certaines des problématiques
rencontrées. Enfin, je terminerai par les différentes évolutions possibles envisagées pour
l'avenir de l'application.

La suite du rapport sera consacrée à la mission sur l'application de signature. Je
commencerai donc par présenter le contexte du projet ainsi que l'application de signature en
elle-même. Ensuite seront abordées les différentes transformations au niveau de l'interface
graphique, puis les différentes problématiques rencontrées pour mettre en place le nouveau
framework javascript. Pour finir, nous verrons quels changements ont été apportés
permettant de rajouter un ensemble de nouveaux champs à l'application ainsi que les
changements impactés au contrôleur afin d'intégrer leurs nouvelles règles de validation.

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

7 / 59

3. COMPTE RENDU D’EXPÉRIENCE PROFESSIONNELLE

Durant ces seize semaines de stage j'ai pu intégrer pour la première fois une société privée
d'une assez grande importance, travaillant de façon dominante dans le domaine de
l'informatique. En effet, mes stages précédents ayant eu lieu dans un organisme public et
dans une PME, ce stage me permet donc d'enrichir mon expérience professionnelle de façon
diversifiée.
J'ai découvert une société de taille importante ayant de fortes contraintes liées à la sécurité
de par ses activités. Cela m'a permis de comprendre le mécanisme et les rôles des
différentes procédures de sécurité mises en place, l'importance de sécuriser son poste de
travail ainsi que les données qu'il contient.
Mon expérience professionnelle au sein de l'entreprise a été marquée par les deux missions
que j'ai dues réaliser. En effet, lors de la première mission que j'ai eu à effectuer, je devais
concevoir un intranet de façon autonome. Cela m'a laissé une grande liberté sur les
décisions techniques à prendre face aux différentes problématiques. Cela m'a également
servi à mieux comprendre le cycle de vie d'un projet informatique en entreprise.
Malgré mon autonomie sur les aspects techniques du développement, j'ai eu l'opportunité de
travailler avec l'ensemble des membres de l'équipe. Au début cela a demandé un temps
d'adaptation afin de bien intégrer l'organisation de l'entreprise. Mais rapidement, au cours de
mes différents entretiens avec les membres des équipes, développeurs ou chefs de projet,
j'ai pu mieux comprendre les différents projets développés au sein de l'équipe, ainsi que les
besoins auxquels devra répondre l'intranet.
La deuxième partie de mon stage s'est déroulée au sein d'une équipe de développeurs, ce
qui implique une communication différente. En effet, au sein de cette équipe, un mécanisme
de suivi quotidien du travail est mis en place. Il se présente sous la forme d'un debriefing qui
a lieu chaque matin et au cours duquel est exposé l'ensemble des tâches réalisées par
l'équipe la veille. Cela présente différents avantages : il permet de tenir l'équipe du projet au
Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

8 / 59

courant de l'avancée de chacun des membres et également de fixer les objectifs de la
journée de façon quantifiée et donc de prévoir plus facilement l’évolution du projet. Ce mode
de fonctionnement, très différent du travail en autonomie, m'a permis d'apprendre à mieux
quantifier la durée des différentes tâches que j'ai été amené à réaliser. De plus, le travail en
équipe m'a confronté aux expériences variées de l'équipe et m'a donc amené à découvrir de
nouveaux outils ou astuces partagés par les membres de l'équipe. Pour moi ces deux
expériences ont été complémentaires et m'ont donné différentes opportunités toutes très
enrichissantes.

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

9 / 59

4. PRÉSENTATION DE L'ENTREPRISE
Almerys, filiale de France Télécom sous l’appellation « solutions santé d’Orange Business
Services », est positionnée sur le marché de la santé qui est en forte croissance. Créée en
2000, la société se place aujourd’hui en tant que leader des services temps réel et
infrastructures de confiance sur le marché du Tiers Payant et des services santé. Almerys se
positionne en tant que Tiers de Confiance, ce qui permet la gestion d’informations pour le
compte d’un tiers. La société facilite la gestion du Tiers Payant pour le Régime
Complémentaire (RC), opère les remboursements des Professionnels de Santé (PS) pour le
compte de nos clients (mutuelles, assureurs complémentaires et courtiers d’assurance
santé).
Schéma explicatif :

Illustration 1: Principe de tiers de confiance
Almerys dispose d’une infrastructure technique permettant la gestion de la complexité du
Tiers Payant avec le respect des règles de sécurité liées à la gestion d’informations de santé.

Son siège social se situe à Clermont-Ferrand et ses deux filiales sont à Paris et Toulouse.
Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

10 / 59

Employant 230 personnes sur le site de Clermont-Ferrand en janvier 2011, Almerys
développe et opère des services de gestion novateurs qui modifient et améliorent chaque
jour les rapports entre assurés sociaux, professionnels de santé, complémentaires santé,
Sécurité Sociale et banques.

Le dossier médical du patient en ligne, la prévention à grande échelle, les services en temps
réel de devis et prise en charge dans le domaine de la santé font partie de ses axes
stratégiques de développement.
Premier opérateur de tiers payant étendu (toutes professions de santé), Almerys représente
140 000 professionnels de santé conventionnés (toutes spécialités confondues) et plus de 12
millions de bénéficiaires en janvier 2011.
Les services associés au tiers payant tels que les prises en charge en ligne (hospitalière,
optique, dentaire et audioprothèse) et le tiers payant dit de 3e génération (gestion de
l’information en temps réel) sont adaptables et utilisables sur tous les réseaux de tiers
payant.
Fort de son savoir-faire en dématérialisation et en sécurisation de données, Almerys propose
également des solutions de signature électronique, de votes électroniques et de coffres-forts
électroniques dans les conditions de sécurité requises par la loi.
Aujourd’hui et grâce à ses infrastructures, la société a développé des services santé centrés
sur l’individu tels que les carnets de santé électroniques qui permettent le suivi de la
vaccination, optique, pathologies chroniques (diabète, cholestérol) et suivi du sportif de haut
niveau.

Mon stage s'est déroulé au sein de l'équipe ECDC (Échange Certifié et Dématérialisation de
Confiance) en charge de développer les solutions de signature, vote ou bien parapheur en
ligne. Mon maître de stage, Alain Marcoz, étant le responsable de domaine en charge de
l'équipe ECDC j'ai été directement rattaché à l'équipe et non à l'un de ses projets.

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

11 / 59

Illustration 2: Organigramme de l'équipe ECDC.

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

12 / 59

5. RÉALISATION D'UN INTRANET POUR L'ÉQUIPE EC-DC

L'objectif principal de mon stage au sein d'Almerys a été de réaliser un intranet pour l'équipe
EC-DC . En effet, cette équipe regroupe un nombre important de membres (environ 20 – 25)
et nécessitait donc de disposer d'un moyen de communication interne à l'équipe.
Mon maître de stage m'a donc demandé de mener ce projet dans son intégralité. L'objectif
étant de déterminer l'ensemble des besoins exprimés par les différents membres de l’équipe
afin de proposer un outil y répondant au mieux.

5.1ANALYSE DES BESOINS DE L'ÉQUIPE

Dans un premier temps, l'objectif de mon stage a été de collecter l'ensemble des besoins des
utilisateurs, puis de les synthétiser. Pour cela j'ai rencontré les membres de l’équipe de façon
individuelle dans le but de déterminer leurs attentes face à un tel outil. Cette première
confrontation avec le personnel m'a aussi permis de me renseigner sur l'organisation de
l'équipe ainsi que sur les différents projets qu'elle porte.
À ce stade, je disposais d'un ensemble de problématiques formulées par les membres de
l'équipe, à savoir :

–

Besoin de pouvoir accéder à des informations sur les autres projets de l'équipe
afin de pouvoir suivre leur avancement et se tenir au courant de nouveaux projets ;

–

Pouvoir déterminer qui a réalisé telle ou telle partie d'un projet ;

–

Avoir accès facilement à des documentations souvent utilisées ;

–

Présenter des liens d’accès rapide vers les différents outils en ligne utilisés par les
différents projets (qualité du code, gestion de version etc.) ;

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

13 / 59

–

Faciliter l'arrivée de nouveaux arrivants au sein de l'équipe en regroupant les
différents documents de présentation ainsi que les procédures à utiliser (demande
de congés, suivi des activités, réservation de salles etc.) ;

–

Présentation de l'organigramme de l'équipe ;

–

Rendre plus visible les différentes dates butoirs des projets (mise en production,
visite clients etc.) ;

–

Rendre plus visible les congés des membres de l'équipe ;

–

Proposer un lieu de discussion annexe afin de pouvoir organiser des événements
externes (repas d'arrivée / de départ etc.) ;

–

Faciliter la communication au sein de l'équipe en proposant un trombinoscope de
l'ensemble des membres ;

–

Permettre au responsable du pôle ainsi qu'aux chefs de projets de publier des
billets sur l’avancement des projets ou sur des nouveautés au sein du pôle.

Une fois les grandes problématiques à résoudre déterminées, je devais proposer une
maquette fournissant un aperçu de la solution choisie afin de pouvoir la présenter à l'équipe
et obtenir des retours.

5.2CHOIX DE L'OUTIL DE CONCEPTION UTILISÉ POUR LA RÉALISATION

Parallèlement à la collecte des besoins de l'équipe, ma tâche consistait aussi à déterminer
quel outil serait utilisé pour la réalisation de la solution. Étant seul pour développer l'intranet,
mon maître de stage et moi-même avons décidé de s'orienter vers un CMS*. En effet, ce
type d'outil permet de s'abstenir d'une grande partie du développement en spécialisant un ou
des outils déjà existants.
Mon maître de stage me laissait libre de choisir l'outil qui me semblait le plus approprié pour
cette réalisation. N'ayant pas une grande connaissance des différents CMS proposés sur le
marché, j'ai donc dû commencer par réaliser un comparatif afin de déterminer le plus adapté.

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

14 / 59

Almerys ayant déjà l'habitude de travailler avec Wordpress, ce CMS a donc fait partie de la
liste des outils envisageables. J'ai ensuite continué en dressant une liste des autres CMS
potentiellement utilisables en me basant sur leur réputation, ce qui m'a permis d'obtenir cet
ensemble de CMS fortement plébiscités par la communauté internet :

•

Wordpress

•

Joomla !

•

Drupal

•

SPIP

•

JAHIA

Afin de déterminer quel outil était le plus à même de répondre au mieux aux problématiques
à résoudre, j'ai commencé par essayer de diminuer les CMS possibles à trois outils dans le
but de pouvoir les essayer sans trop consommer de temps. Les trois outils retenus ont alors
été Wordpress, Joomla ! et Drupal. En effet, SPIP, bien que disposant d'une bonne
réputation, est un outil relativement ancien qui utilise des techniques de fonctionnement de
plus en plus désuètes et il est donc peu adapté à une évolution dans le temps. JAHIA est
quant à lui un CMS réalisé en Java et donc plus gourmand en ressources, de plus, après
discussion avec différents développeurs web d'Almerys, il est apparu que JAHIA manquait
fortement de documentations de qualité.
Afin de déterminer l'outil le plus adapté à la réalisation de l'intranet j'ai installé les trois autres
CMS afin de pouvoir appréhender directement leur utilisation. Joomla ! est vite apparu
comme l'outil le moins poussé et plutôt orienté grand public, il a donc été éliminé.
Wordpress étant à la base un moteur de blog ayant subi des ajouts de fonctionnalités variées
au fur et à mesure du temps, ses capacités sont suffisantes pour la réalisation de l'intranet,
mais son architecture force à l'utilisation de techniques détournées pour arriver à certains
résultats.

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

15 / 59

Drupal dispose quant à lui d'une architecture beaucoup plus modulaire qui convient
pratiquement à tous types de projets. De plus, lors du début de mes tests, Drupal venait de
sortir dans une toute nouvelle version apportant une refonte globale de son architecture.
Cette nouvelle version (7) venait répondre à toutes les anciennes critiques faites à l’égard
des versions précédentes.
C'est donc Drupal qui a été retenu comme CMS de base servant à la réalisation de l'intranet.

5.3RÉALISATION DE LA MAQUETTE ET DES SPÉCIFICATIONS

Ayant déterminé quels étaient les besoins prédominants ainsi que l'outil à utiliser pour y
répondre, je devais réaliser une maquette de ce projet à l'aide d'un logiciel de prototypage :
« Just In Mind »*.
Pour cela j'ai essayé de déterminer une architecture simple et efficace afin de répondre aux
différentes problématiques soulevées tout en conservant une simplicité d'utilisation accrue.
J'ai donc décidé de regrouper un grand nombre d'informations autour des projets en euxmêmes telles que les membres de chaque équipe, les projets qui y sont rattachés, etc. À
côté de cet ensemble de projets, certaines parties sont communes à tout le pôle et sont donc
présentées à la racine du site, c'est le cas du trombinoscope, de l'organigramme ou bien des
ressources dédiées aux nouveaux arrivants. La page d'accueil regroupe quant à elle les
informations les plus importantes : les rappels sur les prochains événements ainsi que les
différentes actualités du pôle.
Cette maquette a ensuite été présentée à l'ensemble de l'équipe afin d'obtenir des retours et
a été rapidement validée par les membres de l'équipe ainsi que par mon maître de stage.
Une fois l'architecture ainsi que la présentation de base de l'application mises en place
l'étape suivante a été de réaliser les différentes spécifications. Les spécifications
fonctionnelles regroupent l'ensemble des fonctions et des contrôles que l'outil développé
devra respecter. Les spécifications techniques viennent quant à elles définir la solution
technique utilisée de façon détaillée pour chaque composante de l'intranet. Ces deux
Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

16 / 59

documents permettent de cadrer le projet. De manière plus concrète on retrouve dans les
spécifications fonctionnelles les différents droits des utilisateurs, les possibilités offertes pour
les différents contenus ainsi que les étapes de chaque cas d'usage. Les spécifications
techniques définissent concrètement les modules Drupal qui seront utilisés et la manière de
les agencer afin d’obtenir l'intranet définitif.

5.4ARCHITECTURE FONCTIONNELLE DE L'INTRANET

Afin de pouvoir évoluer dans le temps, l'intranet doit être modifiable directement par les
utilisateurs que ce soit pour maintenir l'existant ou bien créer de nouveaux contenus. Cette
notion implique donc de définir des règles concernant les droits que les utilisateurs
possèdent. En effet tous les contenus ne doivent pas être modifiés par tout le monde. Pour
cela il a fallu définir l'ensemble des différents profils ainsi que leurs droits. Les cinq profils
utilisateurs suivants ont été identifiés :

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

17 / 59

Nom du profil

Droits

Utilisateur anonyme

- Consulter la présentation de l'équipe EC

L'intranet étant accessible seulement en interne, les

DC.

utilisateurs anonymes correspondent à tous les

- Consulter les présentations des projets.

employés ne faisant pas partie de l'équipe EC/DC

Développeur**

- Consultation de tous les contenus.
- Modification des pages communes.
- Commentaires des contenus.
- Maintenir son profil.
- Maintenir ses compétences.
- Création de pages de ressources (liens
utiles, nouvel arrivant ...)

Chef de projet**

- Rédiger les présentations de projets.
- Rédaction d'un bilan hebdomadaire pour
chaque projet (appelé « check-up »).

Responsable de domaine**

- Création des actualités de l'équipe EC DC.
- Création de sondages.
- Créer de nouveaux utilisateurs.
- Attribuer les droits des utilisateurs.

Administrateur**

- Tous les droits sur l'intranet.
- Les droits d’administrer Drupal.

(**) : Les profils héritent des droits des profils précédents. Par exemple le responsable de
domaine possède aussi les droits de chef de projet, développeur ainsi qu'utilisateur
anonyme.

L'intranet comprend des contenus liés soit à l'équipe EC DC dans son ensemble, soit liés
plus précisément à un projet. C'est pour cela que deux types de pages différents sont
nécessaires : un type de page simple présenté directement depuis l'accueil du site, et
Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

18 / 59

également un type de pages liées à un projet. À chaque nouveau projet, toutes les pages de
type liées à un projet devront pouvoir lui être associées.
Les pages communes du site comprennent les 12 types suivants :

Page

Détails

Actualités de l'équipe ECDC

L'ensemble des actualités posté sur l'intranet

Calendrier des événements

Le

calendrier

contenant

les

différents

événements de l'équipe et des projets.
Calendrier des congés

Le calendrier contenant les congés des
membres de l'équipe.

Compétences des membres de l'équipe

L'ensemble des compétences de l'équipe
avec la possibilité de faire des recherches.

Forum
Liens utiles

Ensemble des pages contenant des liens
vers des ressources utiles. Par exemple des
pages de documentation interne.

Nouvel arrivant

Ensemble

des

indications

au

pages
bon

contenant

déroulement

les
d'une

nouvelle embauche.
Recherche

Page de recherche par mot clé et par type.

Sondages

Outil de sondages pour les membres de
l'équipe.

Organigramme

Présentation de l'organigramme de l'équipe
ECDC.

Outils

Ensemble des pages contenant des liens
vers des outils web internes tels que des
outils de qualimétrie, gestion de code etc.

Trombinoscope

Page contenant la photo et une présentation
succincte de chaque membre de l'équipe.

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

19 / 59

Illustration

3:

Menu

de

navigation dans les pages
communes

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

20 / 59

Pour chaque projet viennent se rajouter huit pages supplémentaires :

Page

Détails

Présentation

La présentation du projet

Calendrier

Le

calendrier

ne

contenant

que

les

événements liés au projet.
Check-up

Les différents points hebdomadaires du
projet.

Documentation

Les différentes documentations du projet
sous forme de liens vers des documents
issus du réseau interne.

Équipe

Vue du trombinoscope ne contenant que les
membres de l'équipe et de façon plus
détaillée.

Outils

Les différents outils liés au projet.

Produits

Les produits issus du projet.

Réalisation

Les différentes réalisations faites par les
membres de l'équipe pour le projet.

Ces différentes sections se présentent comme des onglets présents pour chacun des projets
créés par le responsable de domaine.

Illustration 4: Différentes pages accessibles pour chaque projet

Les différentes pages d'administration sont quant à elles créées et gérées directement par
Drupal. Chaque type de données aura une page de création propre directement déduite par
Drupal des types qui la composent.

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

21 / 59

5.5ARCHITECTURE TECHNIQUE DE L'INTRANET
L'intranet est réalisé avec Drupal, il s'agit d'un outil de gestion de contenu. Pour fonctionner,
Drupal définit un ensemble de règles et est basé sur des principes. L'architecture de Drupal
repose sur l'utilisation de modules, le cœur de Drupal comprend lui-même différents modules
pouvant être ou non activés. De plus, de nombreux modules sont téléchargeables librement
afin d’étendre les capacités fournies de base. Drupal utilise également un type de contenu de
base pour tous les types que l'utilisateur souhaite créer, ce type est nommé « node »
(nœud). Drupal permet à l'administrateur du site de créer des nouveaux contenus basés sur
le node en lui ajoutant les différents champs qu'il souhaite comme, par exemple, la possibilité
d'ajouter un champ date à un type.

5.5.1.Principe de taxonomie
Drupal intègre de façon native un outil très intéressant qui se nomme la taxonomie. Il s'agit
d'un module qui permet de créer des vocabulaires distincts. Chaque vocabulaire se compose
d'un ensemble de termes qui peut ou non être hiérarchisé. Grâce à ce mécanisme il devient
extrêmement simple d'associer un choix de termes de vocabulaire à un nouveau type de
données.
Dans le cas de l'intranet quatre vocabulaires sont utilisés :

Vocabulaire
Compétences

Détails
Contient

l'ensemble

des

compétences

utilisées par les utilisateurs, permet de
proposer des compétences déjà renseignées
lors de l'ajout de compétences par les
utilisateurs.
États de check-up

Correspond à une valeur de 0 à 5, sert à
noter un bilan hebdomadaire.

Niveaux de compétences

Contient les niveaux de compétences sur
une échelle de 0/5 à 5/5.

Projets

Contient l'ensemble des projets de l'équipe
ECDC ainsi que leur hiérarchie.

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

22 / 59

Ces différents termes de taxonomie serviront à créer des types plus facilement. En effet, il
sera possible de proposer par exemple des listes à cocher de termes directement lors de la
création d'un nouvel élément de ce type. De plus, les vocabulaires étant regroupés au sein
d'une unique interface de gestion, il est très aisé de modifier les termes de chacun des
vocabulaires.

Illustration 5: Interface de gestion de taxonomie

5.5.2.Spécialisation de nœud
Pour pouvoir réaliser les différents types qu'il est possible de créer dans l'intranet il faut
spécialiser le nœud de base. Cela se fait simplement depuis l'interface d'administration de
Drupal. Un nœud se compose de différents champs de différents types. Chaque nœud peut
exposer l'ensemble de ses champs lors de l’affichage ou n'en présenter qu'une partie. Cela
permet de faciliter la création de types complexes tels que les « réalisations » effectuées par
les utilisateurs. En effet, ce type sert à faire le lien entre un projet et un utilisateur en lui
offrant la possibilité de détailler ses réalisations au sein d'un projet. L'utilisateur qui crée un
nouveau nœud de type « réalisation » est automatiquement sauvegardé par Drupal en tant
que créateur du nœud et sera donc associé à la « réalisation » créée , le champs « Body »
servant de description de la réalisation.

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

23 / 59

Illustration 6: Interface de gestion des champs d'un nœud

Les « réalisations » sont affichées à différents endroits du site : sur les pages projets ou sur
les pages de profil des utilisateurs. En effet, en fonction de la page - projet ou utilisateur seules les « réalisations » concernées seront affichées. Par exemple, sur un profil utilisateur
sera affiché l'ensemble des réalisations effectuées par l'utilisateur. À l'inverse les pages
projets afficheront l'ensemble des utilisateurs ayant réalisé ce projet.

Illustration 7: Vue des réalisations d'un utilisateur

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

24 / 59

5.5.3.Utilisation de modules complémentaires
Drupal propose par défaut un ensemble de fonctionnalités qui ne répondent pas forcément à
toutes les problématiques et il est dans ce cas possible d'utiliser des modules
complémentaires proposés librement ou de les développer. Parmi les besoins de l'intranet,
plusieurs ne pouvaient être réalisés à l'aide du simple cœur de Drupal. En effet, afin de
pouvoir créer différents affichages du site, j'ai eu recours à un module spécifique. De plus,
afin de faciliter la création de nouveaux projets à l'aide de termes de taxonomie j'ai été
amené à développer un module simple.

5.5.4.Le module « Views » ,création de pages dynamiques
Le module « Views » est l'un des plus utilisés lors de la réalisation de projet à l'aide de
Drupal. Il permet de créer différents types de pages ou de parties de pages qui puissent
afficher des informations issues de nœuds. Il est par exemple possible de créer une liste
contenant l'ensemble des utilisateurs du site ou également d'afficher l'ensemble des
compétences sur son profil. Le module « Views » ouvre donc de grandes possibilités en
termes d'affichage du contenu et a été utilisé dans de nombreuses parties de l'intranet telles
que :
–

Le trombinoscope : il affiche l'ensemble des utilisateurs inscrits sur le site avec, pour
chacun d'eux, leur photographie, leur nom et leur équipe. Il est construit
dynamiquement en fonction des utilisateurs inscrits au moment de la consultation de
la page afin d’éviter de devoir mettre à jour le trombinoscope à chaque inscription.

–

Les membres qui participent à un projet : Cette vue découle du trombinoscope en
se contentant de lui appliquer un filtre afin de ne sélectionner que les utilisateurs
appartenant au projet. Les informations affichées sont quasiment identiques à celles
du trombinoscope, seule la présentation change.

De plus « Views » facilite l’accès aux données affichées en proposant la mise en place des
champs de recherche dynamique sur le contenu. Par exemple, il est possible d'afficher la
liste des liens utiles contenant une certaine chaîne de caractères directement depuis la page
affichant tous les liens utiles.
Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

25 / 59

Illustration 8: Exemple de recherche dans la page de liens utiles

5.5.5.Le module « calendar », création de calendrier
Pour réaliser un calendrier sous Drupal deux parties sont nécessaires : un affichage
présentant le calendrier sous forme de mois, semaines ou jours ainsi qu'un type
correspondant à un événement. Un événement se compose de deux dates et heures, le
début et la fin de l’événement, d'un titre, de la possibilité de préciser des détails sur
l’événement et d'un projet d'appartenance facultatif. La création de calendrier étant un usage
relativement courant, il existe un module de Drupal fournissant exactement ces deux
composantes indispensables. Drupal offre la possibilité aux modules d’être dépendants les
uns des autres et le module « Calendar » exploite cette possibilité en exploitant le module
« Views » afin de fournir les vues citées précédemment. Une fois ces deux modules installés,
un nouveau type est fourni : il s'agit du type « date » qui peut être spécialisé. Par défaut ce
type ne comprend que les dates et les titres mais aucune description. Le type
« événements » sera donc créé en lui ajoutant un champ de type texte correspondant à la
description de l'événement ainsi qu'un champ de taxonomie issu du vocabulaire des projets.
Avec le module « Calendar » une vue d'exemple est fournie, elle permet d'afficher l'ensemble
des types « date ». En créant une copie de cette page il devient alors très facile de
spécialiser les différents calendriers de l'intranet. Un premier permet d'afficher l'ensemble
Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

26 / 59

des événements de l'équipe ECDC directement à la racine du site. Tous les événements liés
ou non à un projet y sont présentés. Le deuxième calendrier fonctionne en filtrant les
événements pour un unique projet et est donc accessible depuis l'une des pages projet. Ce
calendrier se présente sous la forme d'une unique vue pour tous les projets. Pour fonctionner
la vue doit pouvoir déduire le projet concerné. Cela se fait en indiquant un paramètre à l'URL
de la page, ce mécanisme est prévu par « Views ».

Illustration 9: Réglage de l'url d'une vue, ici le calendrier des projets

Le symbole « % » indique la présence d'un paramètre qui peut varier dans l'URL*. Si l'URL
demandée par l'utilisateur répond à la définition alors « Views » déterminera la valeur du
paramètre qui pourra être fournie à la page.
Voici un exemple d'URL possible pour accéder au calendrier d'un projet :

Projet concerné

URL du calendrier

eBee Sign

http://intranet-ecdc/drupal/projet/eBeeSign/fullcalendar

eBee Vote

http://intranet-ecdc/drupal/projet/eBeeVote/fullcalendar

Afin de limiter les erreurs, il est possible de limiter les valeurs possibles pour un paramètre.
Par exemple dans le cas du calendrier, le seul paramètre attendu doit forcément appartenir à
un des termes du vocabulaire « projet » issu du module taxonomie. Cette règle peut être
fournie au module « Views » directement depuis l'interface de configuration de la vue.

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

27 / 59

Illustration 10: Interface de configuration du paramètre que le calendrier reçoit depuis
l'URL

On peut clairement voir sur la capture d'écran que l'on souhaite appliquer une règle de
validation sur le fait d'appartenir à des termes de classification (taxonomie), que le
vocabulaire concerné est le vocabulaire « projet ». Les résultats seront filtrés en utilisant
l'identifiant unique de chaque terme. Enfin, nous voyons la gestion d'erreurs : si le terme
demandé dans l'URL n'existe pas alors la page redirige sur l'erreur « page non trouvée ».

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

28 / 59

Illustration 11: Vue du calendrier avec un événement de projet

5.5.6.Développement d'un module de redirection d'url
Afin de bénéficier d'un outil simple à utiliser dans le temps, il était impératif de faciliter la
création de nouveaux contenus et surtout de modifications plus importantes telles que
l'arrivée d'un nouveau projet. Pour faciliter cela les projets ont été répertoriés grâce au
module de taxonomie, le but étant de pouvoir créer l'ensemble des vues nécessaires
seulement en rajoutant le terme. Le choix a donc été d'utiliser le module Views présenté
précédemment et qui fournit l'avantage de gérer les termes de taxonomie comme des
Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

29 / 59

arguments. La problématique a été de trouver un moyen de créer automatiquement les liens
dans le menu à destination des pages associées au nouveau projet. Pour cela un module
existe, il permet de créer un menu possédant l'ensemble des termes d'un vocabulaire et
propose un lien vers le détail du terme. Malheureusement ce module ne permet pas de
modifier l'URL de redirection des termes. Pour palier ce problème j'ai donc créé un module
très simple qui permet d'identifier si l'URL demandée correspond à la description d'un terme
du vocabulaire projet et à rediriger la page à destination de la page projet regroupant les
différentes sections d'un projet. Cela offre l'avantage de bénéficier du nom du projet dans
l'URL et donc d'identifier depuis la page projet le projet concerné. Cette solution présente
également l'avantage de s'adapter de façon dynamique à la création d'un nouveau projet.
Cela évite donc la contrainte de mettre à jour le menu du site à chaque nouveau projet.
La création de nouveaux modules pour Drupal est très simple. En effet, il suffit de créer au
minimum deux fichiers : l'un sert à présenter le module dans la page d'administration des
modules ainsi qu'à préciser les versions de Drupal compatibles, l'autre contient le code PHP*
servant de base au module. Afin de faciliter l'intégration des modules complémentaires avec
le cœur de Drupal, un système d'API* a été mis en place afin de fournir un ensemble de
méthodes capables de faciliter le développement.
Pour ce module j'ai utilisé un mécanisme nommé « hook » et qui permet de surcharger une
méthode appelée par le cœur du système. Cela a été utile afin de détecter avant le
chargement de la page quelle URL a été demandée. Ceci afin de changer la redirection
avant le chargement. La documentation en ligne, pour développeurs, fournit tous les
« hook » existants et la technique permettant de les surcharger. La méthode que j'ai utilisée
pour ce module est la suivante :

Cette méthode est appelée à chaque fois qu'une URL est demandée par un utilisateur. Elle
permet au système de gérer les URL de façon plus intelligible pour les utilisateurs. Afin
d'ajouter une fonctionnalité à cette méthode, il suffit de déclarer une méthode portant le
Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

30 / 59

même nom précédé par le nom du module. Le module créé ici se nomme
« rewrite_taxo_url »,

la

méthode

doit

donc

posséder

le

nom :

«

rewrite_taxo_url_url_outbound_alter ». Cette méthode utilise une expression régulière pour
trouver les pages issues des termes du vocabulaire projet dont l'URL doit être modifiée.

Illustration 12: Méthode appelée dans le but de modifier l'URL des pages projet.

5.6DÉPLOIEMENT ET ÉVOLUTIONS FUTURES
Une fois l'ensemble des pages et des types nécessaires créé, le site devait être mis en
production afin de le soumettre aux utilisateurs. Lors des phases de préparation et de
développement, l'ensemble du travail avait été réalisé sur un serveur virtuel en local sur mon
poste de travail. L'intranet devait donc être déplacé sur le serveur de production sur lequel il
serait hébergé. Grâce à une procédure de sauvegarde et de restauration directement
intégrée à Drupal, il m'a été très simple de migrer le système développé sur le serveur de
production. En effet, Drupal permet de récupérer une archive de toutes les données créées
en base sous forme de script SQL*. Quant aux modules, ils peuvent être directement
sauvegardés dans une archive puis copiés sur le serveur.
Depuis la mise en place, certains retours sont apparus de la part des utilisateurs comme
l'absence de notifications lors de création de contenu. L'intranet étant construit sur une base
modulaire, il est très simple d’implémenter de nouvelles fonctionnalités. Pour répondre à la
Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

31 / 59

problématiques des notifications la première solution mise en place a été de proposer de
s'abonner à différents flux RSS* directement depuis le site, l'avantage étant de ne pas
surcharger les boîtes de réception e-mail en utilisant un autre logiciel de notifications dédié à
la consultation de flux RSS. Mais l'on pourrait imaginer d'autres fonctionnalités de
notifications de nouveaux contenus très variés, telles qu'un bilan journalier de l'activité sur le
site envoyé par e-mail, ou bien une intégration avec le logiciel de messagerie interne afin
d'augmenter la réactivité sur l'intranet.

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

32 / 59

6. PORTAGE DE L'INTERFACE GRAPHIQUE DE L'APPLICATION EBEESIGN

À la fin de mon stage j'ai pris part à un deuxième projet qui vient s'inscrire au sein d'une des
équipes du pôle EC-DC : l’équipe eBeeSign, en charge de développer un système de
signature électronique.

6.1PRÉSENTATION DU PROJET

Ce projet a pour objectif de fournir un outil en ligne de signature électronique de documents
se composant d'un back-office dédié aux employés d'une société, par exemple une banque
ainsi que d'un front-office accessible pour signer les documents par les clients de cette
société. L'objectif étant de faciliter la contractualisation de vente de la part du client en
proposant à ses clients un outil en ligne simple et sécurisé permettant la signature de
documents ayant la même valeur juridique qu'une signature classique.
Ce projet est réalisé grâce aux langages Java* et JSP*, le tout fonctionnant grâce à un
serveur d'application WebSphère*. L'application utilise également le framework Java Spring*.
Ce projet a déjà été développé pour un client d'Almerys et est déjà fonctionnel. Il doit
maintenant être rendu générique afin d'industrialiser sa production pour de nouveaux clients.
L'une des tâches nécessaire à la généricité du projet était de procéder à une refonte
graphique de l'application en intégrant le nouveau design développé par les designers
d'Almerys. Il fallait également porter le framework javascript* utilisé (Yahoo UI*) vers un autre
framework (Jquery*).

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

33 / 59

6.2FONCTIONNEMENT

L'application est répartie entre deux interfaces, la première est accessible seulement par les
salariés de l'entreprise et permet de fournir les informations client ainsi que les documents à
proposer à la signature. La deuxième interface est quant à elle dédiée aux clients qui
souhaitent accéder aux documents et les signer.

Diagramme 1: Cas nominal de signature d'un document

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

34 / 59

6.3LES OBJECTIFS

Ce projet de refonte était porté par l'un des développeurs web d'Almerys qui devait être
appuyé d'un stagiaire dans cette tâche. Malheureusement leurs périodes de congés se
chevauchant, il leur était compliqué de réaliser un suivi de leurs activités. Mon rôle a été de
réaliser le transfert de compétences nécessaires entre ces deux personnes. De plus je
devais prendre part au portage jusqu'à la fin de mon stage (quatre dernières semaines).

6.4TRANSFERT DE COMPÉTENCES

Dans un premier temps j'ai donc eu à découvrir le cadre du portage ainsi que l'existant. Pour
cela ma première semaine fut consacrée à me documenter sur l'application de signature
développée ainsi que sur les différents changements à effectuer. En parallèle de cela je
devais aussi me mettre d'accord sur la procédure à suivre durant la période où le porteur du
projet serait absent. Nous avons donc déterminé ensemble différentes règles de bonne
conduite permettant d'obtenir un outil web plus respectueux des standards. De plus, il était
important de réaliser la solution la plus optimisée possible afin de ne pas alourdir l'existant.
Pour cela, les différentes règles suivantes devaient être mises en place :

–

Chargement des gros fichiers javascript en fin de transfert (commencer par
envoyer au client les données visibles du site (HTML, images) avant l'envoi du
code javascript afin d’accélérer le rendu) ;

–

Utilisation de fonctions javascript anonymes dans toutes les situations où cela est
possible (l'objectif étant de rendre ces méthodes inaccessibles depuis les autres
méthodes) ;

–

Respect des contraintes de validation du W3C tant au niveau du HTML, du CSS
que du javascript ;

–

Rendre l'application identique sous Firefox, Chrome et Internet Explorer 8 et
supérieur.

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

35 / 59

Dans un second temps j'ai dû transmettre ces différents objectifs et règles au stagiaire qui
travaillait avec moi sur le projet. Cette phase s'est déroulée sans problèmes, ce qui nous a
permis de commencer rapidement les différentes tâches à réaliser.

6.5MISE EN PLACE DU NOUVEAU DESIGN
La première étape de ce portage a été de mettre en place le nouveau design de l'application
développé par le designer. Pour cela nous disposions d'une maquette de ce projet réalisée
de façon statique. L'objectif était donc de conserver cette présentation visuelle tout en
garantissant un fonctionnement total de la partie métier sous-jacente.
Le nouveau design se compose d'un fichier CSS* servant à décrire l'ensemble des
informations de rendu du site. Pour que ce fichier CSS puisse s’appliquer au site web il faut
rajouter les différentes classes CSS définies par le designer au niveau du code de
l'application ainsi que respecter l'architecture définie par la charte graphique telle que l'ordre
des sections du site.

Illustration 13: Ancien visuel de suivi des ventes
Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

36 / 59

Illustration 14: Nouveau visuel de suivi des ventes

6.6PORTAGE DU JAVASCRIPT
–

Utilisation de plug-in Jquery : Datatable et datepicker

Pour fonctionner, l'application web comporte un ensemble de codes réalisés en Javascript.
Ces codes ont été réalisés à l'aide du framework Yahoo UI (YUI). L'objectif de la refonte
comprenait également de porter ces codes vers un autre framework Javascript plus
performant : Jquery. En effet, Jquery est un framework plus léger que YUI tout en fournissant
les mêmes possibilités techniques. Au sein de l'application, le javascript est utilisé pour
différents objectifs, à savoir :
Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

37 / 59

–

Fournir une interface dynamique (possibilité de minimiser certains blocs, menu
toujours présent sur le haut de la page, utilisation de modal en cas d'attente etc.) ;

–

Fournir un moyen de sélection de date plus élégant (affichage d'un calendrier de
saisie lors d'un clic dans un champ de type date) ;

–

Permettre à certaines données d’être chargées de façon asynchrone (tableau dont
les données sont chargées en AJAX*).

Jquery se présente comme un unique fichier fournissant l'ensemble des méthodes utilisables
à l'aide du framework. Dans le but d’étendre ses capacités, il est possible de lui adjoindre un
ou des modules afin de répondre à des problématiques plus précises. Dans le cas de
l'application de signature, deux modules supplémentaires ont été utilisés.

6.6.1.Utilisation du module DatePicker pour Jquery
Le module Jquery DatePicker fournit un moyen simple et efficace de remplir un champ de
type date. En effet ce module permet d'afficher un petit calendrier et de récupérer la valeur
que l'utilisateur sélectionne.

Illustration 15: DatePicker
Le module datePicker définit déjà un ensemble de règles permettant la sélection d'une date.
Pour le mettre en place il suffit d'indiquer les champs qui permettront son affichage de la
manière suivante :

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

38 / 59

Illustration 16: Exemple d'utilisation de DatePicker sans option

Dans l’application de signature l'utilisation n'était pas aussi simple puisqu'un certain nombre
d'options doivent être définies en plus telles que des informations de validation, d'initialisation
ou d'internationalisation.

Illustration 17: Définition du DatePicker utilisé au sein de l'application

6.6.2.Utilisation du module DataTable pour Jquery
Au sein de l'application de signature, différents tableaux doivent être capables de se mettre à
jour de façon asynchrone. Pour cela le mécanisme utilisé est l'AJAX. Afin de faciliter
l'utilisation de cet ensemble de technologies, il existe un module Jquery spécifique. Ce
module se nomme DataTable et permet de créer facilement des tableaux asynchrones.
Tout comme le module DatePicker son utilisation peut aller du très basique jusqu'à un niveau
de complexité élevé grâce à la présence d'options facultatives.

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

39 / 59

Le code suivant correspond à la définition du tableau présent dans la page de suivi des
ventes.

Illustration 18: Code du DataTable de suivi des ventes de l'application

Ce code permet d'obtenir le résultat suivant :

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

40 / 59

Illustration 19: Tableau de suivi des ventes
Ce tableau contient l'ensemble des transactions passées ainsi que leurs statuts actuels. Il
fournit l'avantage de pouvoir être rechargé de façon dynamique et donc de faciliter par
exemple le tri d'une colonne par un simple clic sur son entête.

6.7MISE EN PLACE DE NOUVELLES SPÉCIFICATIONS MÉTIER
Afin de répondre aux demandes de nouveaux clients, certains aspects métiers étaient à
revoir. En effet, dans l'existant, certaines informations n'étaient pas traitées telles que le
numéro de sécurité sociale ainsi que la possibilité de saisir un RIB (Relevé d'Identité
Bancaire) pour les clients.
Ces deux informations ont dû être ajoutées à la vue présentée sur le back office lors de la
création, la modification ou la consultation d'une vente.

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

41 / 59

Illustration 20: Zone d'informations client du nouveau visuel

Ces informations (numéro de sécurité sociale et RIB) répondent à des règles strictes de
validité. En effet, le RIB ainsi que le numéro de sécurité social possèdent tous les deux une
clé. Cette clé correspond aux deux derniers chiffres de chaque numéro et sert à vérifier la
validité des précédents. Il devient donc nécessaire de recalculer ces clés à l'aide de
l'algorithme prévu à cet effet et de les comparer à celle renseignée afin d’éviter toute erreur
de recopie ou tentative de fraude. En cas d'erreur, la création de la vente est impossible et
les champs invalides sont indiqués à l'utilisateur.

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

42 / 59

6.7.1.Algorithme de validation de RIB
Afin de pouvoir valider un numéro de RIB voici la procédure à suivre :
Dans un premier temps le numéro de RIB doit être converti en chiffres au cas où des lettres
seraient présentes grâce au tableau suivant :

Illustration

21:

Correspondance

des

lettres en chiffres pour le calcul de la clé
RIB
Une fois toutes les lettres remplacées, il devient possible d’appliquer le calcul mathématique
permettant l'obtention de la clé. Un numéro de RIB se présente de la manière suivante :

Illustration 22: Répartition des différents champs d'un RIB

•

R correspond au numéro de RIB

•

B correspond au code Banque

•

G correspond au code Guichet

•

C correspond au numéro de Compte client

•

K correspond à la clé

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

43 / 59

Le calcule s'effectue de la manière suivante :

Illustration 23: Valeur de la clé RIB en fonction du numéro
L’opérateur mathématique « mod » correspond au reste de la division entière et se nomme
modulo.
Une fois la clé calculée à partir des informations saisies par l'utilisateur, il devient très simple
de comparer la clé calculée à celle fournie par l’utilisateur. En cas de différence l'utilisateur
est alors averti de l'erreur de saisie.
Par contre cette méthode ne garantit en rien que le numéro saisi existe : en effet, il est
possible de calculer une clé valide pour un numéro n’appartenant à personne. On voit donc
ici la limite de cette technique qui ne sert principalement qu'à éviter toute erreur de saisie.

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

44 / 59

7. CONCLUSION
Ces seize semaines passées en entreprise ont été riches d'expérience et d'apprentissage.
J'ai pu découvrir une entreprise privée travaillant dans le domaine de l'informatique. Cela m'a
permis de prendre conscience des attentes fortes en termes d'analyse de projet et de la
rigueur nécessaire au développement d'applications fortement orientées sécurité.
J'ai eu la chance d'aborder ce stage à travers deux missions fondamentalement différentes.
Cela m'a permis de découvrir des méthodes de travail variées.
Durant la réalisation de l'intranet j'ai eu à mener l'ensemble du projet depuis l'analyse
jusqu'au développement de l'application en autonomie. J'ai donc eu la chance de pouvoir
mettre en œuvre les différentes parties que compte un cycle de développement logiciel dans
son ensemble. Pour cela, il m'a été nécessaire de rencontrer un grand nombre
d'interlocuteurs techniques et de m'adapter à leurs besoins. Responsable des choix
techniques de réalisation, j'ai eu l'opportunité de mettre en avant mes capacités de décision.
Ce projet a été pour moi un défi important car il s’agissait de ma première application web
réalisée dans un cadre professionnel. En effet, mes seules expériences dans ce domaine se
limitaient jusqu'à présent à la réalisation de petits projets lors de ma formation. Cette
expérience très enrichissante m'a ouvert aux problématiques de la communication interne en
entreprise et aux moyens que l'on peut mettre en place pour y répondre. L'intranet étant un
projet à vocation évolutive, le projet ne peut pas être déclaré terminé. Effectivement, durant
les dernières semaines de mon stage, de nouvelles fonctionnalités ont été demandées par
différents chefs de projet. Ayant mis en œuvre un outil modulaire, ces différents ajouts sont
simples à réaliser et pourront être mis en place dans l'avenir de façon simple.

J'ai également eu la chance de pouvoir intégrer un projet dont le cycle de vie était déjà
entamé. En effet, il est très courant qu'un développeur ait à rejoindre une équipe déjà
existante dans le but de participer à un projet en cours de développement. Cette expérience
nouvelle pour moi m'a permis de mettre en avant mes capacités d'adaptation. En effet, afin
Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

45 / 59

de prendre part au projet dans les meilleures conditions possibles j'ai eu à comprendre les
tenants et aboutissants de la mission qui m’était confiée au sein de ce projet. Il m'a
également été nécessaire d’effectuer un travail de formation sur les technologies nouvelles
pour moi, tout en gardant à l'esprit le cadre de leur utilisation. Durant ce projet, j'ai également
découvert les méthodes de travail en équipe nécessaires au bon déroulement d'un projet
d'une aussi grande ampleur. Cela m'a permis de prendre conscience de l'importance de
l'organisation nécessaire au développement d'applications en entreprise. À la fin de mon
stage, le portage n’était pas totalement terminé et certaines tâches restaient encore à
réaliser par les autres membres de l'équipe.
Ce stage a donc été pour moi riche en découvertes et en expériences nouvelles en m'offrant
la chance de découvrir les différentes problématiques auxquelles un développeur est soumis
au quotidien dans une entreprise privée.

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

46 / 59

8. RÉSUMÉ EN ANGLAIS
During this year of license at l'IUT informatique de Clermont Ferrand, I have completed an
internship in the company called Almerys. This was my first practical experience into a
private company with a high number of employees.
I had the chance to approach this course through two fundamentally different missions. This
allowed me to explore various ways of working.
The fist part of my course was to create an intranet tool for my team in order to increase the
way that the team communicate internally. This project was developed in a total autonomy
and I had to decide of all aspects of the application. I choose to use the Drupal CMS in order
to build this tool. This was for me a new experience because it was my first web application
built alone. This project made me work on all the aspects of an application life cycle and was
really rewarding.
The second part of my course was to integrate an already begin project that is created by a
team. In order to participate in the project in the best conditions I had to understand the ins
and outs of the mission entrusted to me in this project. He also was required to perform work
training on new technologies for me, bearing in mind the context of their use. During this
project I have also discovered methods of teamwork needed to conduct a project of such
great magnitude. This project was about porting an old application graphical interface to a
new interface. It also needs to port the javascript framework to a new one.
This internal ship has given me new experiences by offering me the chance to discover the
various issues that a developer is subjected on a daily basis in a private company.

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

47 / 59

9. LEXIQUE

AJAX : (Asynchronous Javascript and XML) : Permet de fournir des interfaces web ne
nécessitant pas de rechargement de la page pour modifier le contenu du site web.
API : Application Programming Interface : Interface fournie par un programme et qui permet
de s'interfacer avec celui-ci. Se présente généralement comme un ensemble d'objets et de
méthodes permettant d'utiliser l'application depuis un module ou une application externe.
CMS : Content Management System (Système de gestion de contenu) : Logiciel web
fournissant une base pour la réalisation de site web avec en général une partie
d'administration.
CSS : Cascading style sheet (feuilles de styles en cascade) : Permet de définir l'ensemble du
design d'un site web au sein d'un ou plusieurs fichier(s). Fournit l'avantage de séparer le
contenu du rendu visuel à lui appliquer.
Flux RSS : Rich Site Summary (Résumé de site riche) : Fichier XML contenant les nouveaux
contenus publiés sur le site de façon globale ou thématique. Permet d'utiliser un logiciel pour
surveiller l’apparition de nouveaux contenus sur le site.
Java : Langage de programmation orienté objet fonctionnant grâce à une machine virtuelle.
JavaScript : Langage de script utilisé pour les applications web. Permet l'exécution de code
directement sur la machine du visiteur. Notamment utilisé pour réaliser des interfaces
dynamiques, des contrôles ainsi que des transferts de données asynchrones par exemple
dans le cas de l'AJAX.

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

48 / 59

Jquery : Framework javascript. Fournit un ensemble de méthodes et d'objets permettant de
développer en javascript plus facilement. Ce framework est développé par John Resig depuis
2006.
JSP : Le JavaServer Pages ou JSP est une technique basée sur Java qui permet aux
développeurs de générer dynamiquement du code HTML, XML ou tout autre type de page
web.
« Just In Mind » : Logiciel de prototypage. Permet de facilement créer des interfaces de
présentation ayant l'avantage de pouvoir répondre à des comportements tels que des clics,
des conditions (page seulement accessible connectée etc.). Cela dans le but de fournir une
prévisualisation de l'outil et des différents cheminements possibles à l’intérieur de celui-ci.
PHP : Langage de script utilisé très massivement pour développer des sites internet. Il s'agit
d'un langage peu typé et orienté objet.
Script SQL : Fichier contenant un ensemble de commandes SQL servant à effectuer des
actions sur une base de données. Peut être utilisé pour sauvegarder puis restaurer une base
de données.
Spring : Framework libre pour construire et définir l'infrastructure d'une application java.
URL : Uniform Resource Locator (localisateur uniforme de ressources) correspond à
l'adresse d'une ressource réseau soit sur internet soit sur un réseau interne. Par exemple :
www.google.com est une URL.
WebSphère : Serveur d'application web Java développé par IBM.
Yahoo UI : Framework javascript. Fournit un ensemble de méthodes et d'objets permettant
de développer en javascript plus facilement. Ce Framework est réalisé par la société Yahoo
depuis 2005.
Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

49 / 59

10.

BIBLIOGRAPHIE

10.1 DRUPAL
•

http://drupal.org/ Documentation officielle de Drupal.

•

http://drupalfr.org/ Communauté française de Drupal.

•

http://drupal.org/project/views La documentation du projet Views.

•

http://drupal.org/developing/modules Le guide de développement de module
Drupal.

10.2 JAVASCRIPT ET JQUERY
•

http://jquery.com/ : Documentation officielle de Jquery.

•

http://www.eyecon.ro/datepicker/ : Documentation du module Jquery Date picker.

•

http://www.datatables.net/ : Documentation du module Jquery Datatable.

Simon PERET
Licence Professionnelle Programmation Mobile 2010/2011 – IUT de Clermont-Ferrand.

50 / 59