ASP

Dveloppement dune application Web
en JavaScript et C#
Projet de Fin dEtudes
Elve Ingnieur :
Aurlia PAILLERET
Gnie lectrique 5me anne
Option Systme
Maitre de stage :
Socit :
Rodolphe NOTTIN
Chef de dpartement
Viveris Systmes
32-36 rue de Bellevue,
92100 Boulogne-Billancourt
Professeur rfrent :
Grard THOUVENIN
Date : du 4 mars 2013 au 30 aot 2013
RESUME
Lobjectif de mon stage tait de participer au dveloppement dune application web. Jai intgr en tant que
dveloppeuse, une quipe dune dizaine de personnes.
La premire partie de mon stage a t consacre au dveloppement dune maquette dynamique de
lapplication dans le but de donner un aperu de linterface homme-machine au client. La deuxime partie tait
consacre au dveloppement de lapplication en elle-mme.
Au cours de ce stage jai appris de nouveaux langages de programmation, le JavaScript et le C# mais galement
des mthodes de programmation telles que l'architecture MVC, la structure d'une application Web base sur la
plateforme ASP.NET.
Mes connaissances en informatique se sont approfondies et consolides tout au long de mon stage. Ce stage
ma galement donne lopportunit dintgrer une quipe dingnieurs sur un projet intressant et imposant.
Aurlia PAILLERET GE5S
Projet de Fin d'tudes
REMERCIEMENTS
Je tiens tout dabord remercier la direction de Vivris Systmes pour mavoir permis de raliser mon Projet de
Fin dtudes dans la socit et pour la confiance qui ma t accorde en choisissant de membaucher.
Je remercie mon matre de stage, Rodolphe Nottin, et ma chef de projet, Florence Pinat, pour mavoir encadre
tout au long de mon stage.
Je remercie Nicolas Delaval pour le partage de connaissance, laide et les conseils quil ma apport sur la
programmation en JavaScript et C#.
Je remercie galement lensemble de lquipe dingnieurs avec laquelle se droule le projet pour son accueil et
sa sympathie.
Table des matires

1.
2.
Prsentation de lentreprise ........................................................................................................................................... 5

1.1.
Vivris ..................................................................................................................................................................... 5
1.2.
Structure ................................................................................................................................................................. 6
1.2.1.
Vivris Systmes : ingnierie des systmes dinformations ........................................................................... 7
1.2.2.
Vivris Intgration : intgration de systmes ................................................................................................. 8
1.2.3.
Vivris ASR : administration systmes et rseau ............................................................................................ 8
1.2.4.
Ingnierie et informatique technique : Vivris Technologie .......................................................................... 8
Prsentation du projet .................................................................................................................................................... 9

2.1.
2.1.1.
Contexte.......................................................................................................................................................... 9
2.1.2.
Prsentation du projet .................................................................................................................................... 9
2.2.
3.
Ma mission ............................................................................................................................................................ 12
Ralisation de la maquette ........................................................................................................................................... 13

3.1.
JavaScript & ExtJS.................................................................................................................................................. 13
3.1.1.
JavaScript ...................................................................................................................................................... 13
3.1.2.
ExtJS .............................................................................................................................................................. 14
3.1.3.
Larchitecture MVC ....................................................................................................................................... 15
3.2.
4.
Contexte et prsentation ........................................................................................................................................ 9
La maquette .......................................................................................................................................................... 16
3.2.1.
Prsentation de lapplication ........................................................................................................................ 16
3.2.2.
Travail ralis ................................................................................................................................................ 18
3.2.3.
Bilan .............................................................................................................................................................. 27
Dveloppement de lapplication................................................................................................................................... 28
4.1.
Framework .Net, ASP.NET MVC et C#................................................................................................................... 28
4.1.1.
Framework .Net ............................................................................................................................................ 28
4.1.2.
ASP. NET MVC ............................................................................................................................................... 30
4.1.3.
C# .................................................................................................................................................................. 30
4.2.
Lapplication.......................................................................................................................................................... 31
4.2.1.
Structure de lapplication ............................................................................................................................. 31
4.2.2.
Les restrictions de lutilisateur ...................................................................................................................... 33
4.3.
Travail effectu ..................................................................................................................................................... 34
4.3.1.
Auto-formation et tapes principales de ralisation dun cran.................................................................. 34
4.3.2.
cran catgorie produit ................................................................................................................................ 35
4.3.3.
cran conditionnement ................................................................................................................................ 38
4.3.4.
cran couverture........................................................................................................................................... 45
4.3.5.
Bilan .............................................................................................................................................................. 50
5. Conclusion..................................................................................................................................................................... 51
4
1. Prsentation de lentreprise
1.1.Vivris
Le groupe Vivris accompagne depuis plus de 20 ans les grandes et moyennes entreprises de lindustrie, du
tertiaire, les administrations et les services publiques dans la conception, la ralisation et lvolution de leurs projets
informatiques.
Le groupe Vivris sest form en plusieurs tapes par le rapprochement de trois socits :
Ingsoft, SA cre en 1986 Boulogne par Bruno Stfani, actuel PDG du groupe Vivris, spcialise en
informatique de gestion
CSO Informatique, SA cre en 1976 Lyon par Henri Brugre-Dupuy, spcialise en informatique de
gestion, possdant quatre autres agences en France
B2I, SA cre en 1988 Rungis par Michel Kreps, spcialise en informatique technique et industrielle.
En 1993, Ingsoft rachte B2I pour constituer un groupe dingnierie informatique. En 2000 CSO est rachet par
Ingsoft. Les socits travaillant sur les mmes domaines dactivit en province et en rgion parisienne fusionnent pour
constituer la structure actuelle du groupe
Avec un chiffre daffaire de 52M en 2011, le groupe compte environ 750 employs en France. Bas Boulogne,
le groupe possde des 9 agences implantes partout en France et une agence Barcelone.
Figure 1 : implantation du groupe Vivris
Figure 2 : chiffre d'affaire et effectif
1.2.Structure
Comme je lai mentionn prcdemment, le groupe Vivris possde plusieurs filiales qui ont chacune un
domaine dactivit diffrent :
Vivris Systmes, ingnierie en systmes dinformation
Vivris Intgration, intgration des systmes (SAP, HP-Access)
Vivris ASR, administration des systmes, rseaux et bases de donnes
Vivris Technologie, ingnierie information technique et lectronique
Figure 3 : structure du groupe Vivris
1.2.1. Vivris Systmes : ingnierie des systmes dinformations

La filiale Vivris Systmes, une des deux plus importantes du groupe. Celle-ci est qualifie dans le domaine du
conseil en systmes et logiciels informatiques.
Son Directeur Gnral est Eric Stefani. Vivris Systmes regroupe prs de 300 ingnieurs rpartis en 6
dpartements (administration, industrie, banque, services, crdit, audio-visuel).
Vivris Systmes est une socit de services en ingnierie informatique (SSII) qui fournit des prestations
informatiques. Le ple ingnierie systmes dinformations fournit des prestations ncessaires au dveloppement et
lexploitation des systmes dinformations dans les domaines de la banque et du crdit, des assurances, mutuelles,
retraites, de laudiovisuel, de lenvironnement, de lindustrie, du tourisme, de limmobilier et de ladministration.
Vivris Systmes
DG : Eric Stefani
Nord
(Lille)
Dir. : Patrice Malliart
20 ing
Est
(Strasbourg Belfort)
50 ing
Rhnes-Alpes
(Lyon Grenoble)
Dir. : Frank Harmant
50 ing
Ile-de-France
Banque Industrie Administration
75 ing
Ile-de-France
Services Crdit Audio-Visuel
Dir. : Guy Pierre
75 ing
Dp. : Crdit Audio-Visuel

(Crdit, audio-visuel, assurances, tlcom,
finances)
Dir. : Camille Lefebvre
Dp. : Services
(Protection sociale, tourisme, transport,
environnement)
Dir. : Rodolphe Nottin
Figure 4 : organigramme de Vivris Systmes
Vivris Systmes intervient diffrents niveaux :

Conseil et conception : tudes pralables, assistance maitrise douvrage, rdaction du cahier des
charges, audits techniques, conception et modlisation des donnes
Dveloppement dapplications : conception et dveloppement de logiciels spcifiques. Cette activit
reprsente plus de 50% du chiffre daffaire de Vivris et comprend ltude dtaille, le dveloppement,
la mise en uvre, les tests et la rdaction de la documentation technique.
Maintenance : bilan des applications, maintien de la capacit oprationnelle, maintenance corrective,
maintenance volutive Cette activit reprsente 25% du chiffre daffaire de Vivris Systmes.
Pour ma part, jai intgr Vivris Systmes dans le dpartement Services dont le directeur, Rodolphe Nottin tait
mon matre de stage. Jai rejoint une quipe de 8 ingnieurs travaillant sur un projet dont ltude a dbut en octobre
2012.
1.2.2. Vivris Intgration : intgration de systmes
Le service intgration de systmes dveloppe des solutions dentreprises (ERP) et de-commerce. Vivris assure
lensemble des prestations de cration et de mise en uvre de sites de vente en ligne sur internet (B2B et B2C) :
Conception et design
Intgration des catalogues de produits
Intgration au systme dinformation et lERP existants
Lancement et hbergement du site
Gestion de la plate-forme
Suivi et analyse de vente

1.2.3. Vivris ASR : administration systmes et rseau
Vivris propose des solutions dadministration systmes rseau et bases de donnes aux PME et galement des
offres de contrat de service dajustement pour rpondre des besoins ponctuels et limit dans le temps.
1.2.4. Ingnierie et informatique technique : Vivris Technologie
Cette activit regroupe les ples Vivris Technologies, Vivris Electronique et OPAL-RT Europe. Les ingnieurs
interviennent sur des projets de R&D dans des secteurs dactivits cibls tels que laronautique, la dfense, le
transport, llectronique, lnergie, le mdical, la tlcommunication. Les activits concernent les domaines des
systmes embarqus, du temps rel, de llectronique, des tlcommunications, de linformatique industrielle, etc.
Vivris investit galement dans sa propre R&D pour dvelopper sa gamme de produit.
2. Prsentation du projet
2.1.Contexte et prsentation
Le projet sur lequel travaille lquipe que jai rejoint consiste dvelopper une nouvelle application Web de
gestion pour la socit CPoR Devises.
2.1.1. Contexte
CPoR Devises est en position dominante sur 2 marchs en France :
Achat/vente dor des fins dinvestissement
Change de billets de banque trangers
Activit devise :
La socit assure la liquidit du march en approvisionnent lensemble des tablissements bancaires en devises
et travellers chques. CPoR Devises a aussi dvelopp une offre de services linternational et se prsente aujourdhui
comme un acteur majeur du march des changes ltranger, notamment en Afrique.
Activit or :
CpoR Devises est le principal intervenant sur le march de lor en France. La socit assure le traitement des
oprations dachat, de vente et de conservation de pices, de lingots et de lingotins pour lensemble de la communaut
bancaire ainsi que pour les autres professionnels du secteur (agents de change), et dans une moindre mesure
directement avec les particuliers. Sa position lui permet de dfinir une cotation quotidienne qui sert de cours de
rfrence pour lensemble des transactions sur le march national.
Sur le territoire franais, CPoR Devises dispose de quatre succursales (Paris, Lyon, Nice et Marseille). Pour les
transactions or, ces succursales peuvent assurer les transactions dachat et de vente. Cependant, les travaux dexpertise
pour les pices sont toujours raliss par la caisse de Paris.
CPoR Devises dispose galement dune succursale en Belgique o le systme de cotation diffre de celui utilis
en France.
Rcemment, lactivit or a connu une augmentation importante en termes de volume. Les changes des mois de
juillet et aot 2011 ont t quivalent ceux des 6 premiers mois de la mme anne. En 2011 les employs de CPOR ont
manipul 1 700 000 pices, 27 000 lingots et 60 000 lingotins achats et ventes cumuls.
2.1.2. Prsentation du projet
Le projet "OR" sinscrit dans le contexte de lamlioration de lefficacit oprationnelle de lactivit "or" de CPoR
Devises et vise mettre en place un nouvel outil mtier.
Ce nouvel outil permet de fluidifier et scuriser le fonctionnement de cette activit en prenant en charge
lensemble du primtre fonctionnel du front-office, du middle-office, de la caisse pices et de la caisse lingots. Il aura
aussi pour but de faciliter les oprations du back-office.
De plus, la mise en place de ce nouvel outil permet dutiliser une technologie plus actuelle, plus fiable et plus
cohrente avec lensemble du systme dinformation de CPoR Devises.
Au travers de ce projet, les objectifs sont de :

faciliter, fluidifier et scuriser le traitement des transactions "or"
offrir un haut niveau de service lensemble des intervenants, clients, et internes CPoR Devises
sappuyer sur des technologies rcentes, vritables standards techniques, matriss par lquipe interne
de la DSI CPoR Devises
mettre en uvre une architecture qui permette daccueillir naturellement le SI mtier "devises" dont la
refonte sera aussi lordre du jour
Le Projet est une uvre de collaboration entre :
CpoR Devises : le sponsor, le directeur de projet, le chef de projet, les experts mtier et support
Viveris : la matrise duvre (et son reprsentant le directeur de projet MOE)
Akeance : la matrise douvrage (et son reprsentant le directeur de projet MOA).
Sponsor
Jean-Pierre Djian
Direction de Projet
Olivier Forgeard
Patricia Caceres
Equipe Projet
MOE (Viveris)
-Rodolphe Nottin
-Florence Pinat
-Sandrine Pinto
MOA (Akeance)
-Olivier Derly
-Sylvain Baccilleri
Experts mtier & support

-Rfrents front office, middle
office, caisse, back office,
comptabilit, contrle, DSI,
Figure 5 : intervenants sur le projet
Lquipe projet qui est dploye pour ce projet comprend trois acteurs :
Vivris (responsable matrise duvre) dont lobjectif est de traduire les besoins utilisateurs en solutions
techniques
Akeance (responsable matrise douvrage) dont lobjectif est de prparer, organiser et animer les
ateliers de travail avec les quipes de CPoR et de suivre lavancement des travaux
Les experts mtier et support dont lobjectif est de sassurer de lexhaustivit du domaine trait et de
valider les solutions retenues
10
Ltude du projet a dbut en octobre 2012 et sest finie fin janvier 2013. Avant de dbuter la phase de
ralisation de lapplication, le client a souhait avoir un aperu dynamique de lapplication finale. Lquipe de Vivris a
donc ralis une maquette dynamique de lapplication. Il sagit de montrer quoi allait ressembler linterface hommemachine de la future application. Les parties les plus utilises de lapplication ont t ralises afin dtre valides par
CPoR. La phase de maquette a dur jusquen avril/mai 2013. Dbut mai, la phase la plus consquente du projet, la phase
de ralisation de lapplication, a pu dmarrer. Selon le planning, encore provisoire, la ralisation devrait tre finie fin
janvier 2014.
Le cahier des charges qui a t rdig en mars 2012 dfinit le fonctionnement gnral de lapplication.
Figure 6 : fonctionnement gnral de lapplication
Chaque aspect du fonctionnement gnral est ensuite repris et dcrit dans le cahier des charges et fait
galement lobjet de spcifications fonctionnelles dtailles ralises par Vivris. Ces documents sont trop imposants
pour que je puisse les insrer, voire les rsumer dans ce rapport.
Les technologies retenues pour dvelopper lapplication y sont galement dcrites. Pour rsumer, le JavaScript
avec la bibliothque ExtJS seront utiliss pour le dveloppement des interfaces homme-machine. Le C# pour le
dveloppement ct serveur de lapplication. ExtDirect sera implment pour faire la liaison entre le ct serveur .Net
et le ct client JavaScript, ExtJS.
11
2.2.Ma mission
Dans le cadre du projet de refonte de loutil de gestion mtier or de CPor Devise, Vivris est en charge du
dveloppement de lapplication web. Une dizaine dingnieurs est mobilise pour ce projet. Ma mission, pour mon
Projet de Fin dtudes, est dintgrer lquipe en charge du projet et de participer au dveloppement de lapplication.
Mon stage peut se sparer en plusieurs phases :
Phase dauto-formation
Phase de ralisation de la maquette de lapplication
Phase de dveloppement de lapplication

Les langages utiliss pour dvelopper lapplication ne font pas partie de ceux que jai tudis lINSA. Je me suis
donc auto-forme au JavaScript et ExtJS pendant deux semaines au dbut de mon stage et au C# deux semaines la miPFE.
Aprs mtre initie au JavaScript, jai intgr lquipe pour participer au dveloppement de la maquette de
lapplication. Cette phase du projet a dur jusqu fin avril.
Dbut mai, la phase de ralisation de lapplication a dbut. Aprs mtre initie au langage orient objet C#, jai
commenc participer au dveloppement de lapplication finale. Cest naturellement la partie la plus importante du
projet et lapplication ne sera pas oprationnelle une fois mon stage termin.
Jai intgr lquipe et travaill sur le projet comme nimporte quel autre ingnieur dveloppeur de lquipe.
12
3. Ralisation de la maquette
La premire tape de mon PFE est de participer au dveloppement de la maquette de lapplication. Lobjectif de
la maquette est de pouvoir donner un aperu dynamique de lapplication finale au client. Un certain nombre dcrans
types ont t choisis pour tre dvelopps et prsents en vue dtre valids par le client. Il sagit de raliser les
interfaces homme-machine avec lesquelles lutilisateur pourra interagir. Les donnes seront stockes en dur dans
lapplication, il ny aura pas daccs une base de donnes. Le dveloppement des interfaces se fait en JavaScript et en
utilisant la bibliothque ExtJS.
La maitrise douvrage, Akeance, ralisait rgulirement des ateliers au cours desquels le client faisait des retours
ou validait les crans raliss par Vivris.
3.1.JavaScript & ExtJS

3.1.1. JavaScript
Le JavaScript est un langage de programmation de script incorpor dans un fichier HTML. Cr en 1995, il sagit
mme du premier langage de script pour le web. Les lignes de codes sont excutables et contenues dans le ficher HTML.
Cest un langage interprt, contrairement au Java ou C#, qui ne ncessite pas de compilateur pour tre excut.
Il permet dapporter des amliorations au fichier HTML en excutant des commandes du ct client, cest--dire
du ct du navigateur. Le JavaScript est trs dpendant du navigateur utilis pour lancer la page web.
Un script est une portion de code qui vient sinsrer dans une page HTML de cette faon :
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html>
<head>
<title>
Exemple de HTML
</title>
<script type="text/javascript">
//Placez ici le code de votre script
</ script >
</head>
<body>
<p>
Ceci est un paragraphe.
</p>
</body>
</html>
13
Les balises script indiquent au navigateur le code JavaScript excuter. Les scripts de code JavaScript
peuvent tre placs diffrents endroits dans la page HTML :
dans la section Head : chargement louverture de la page, excution ultrieure par appel explicite
(fonctions)
dans la section Body : excution louverture de la page (permet de gnrer le contenu de la page)
dans les deux sections : cohabitation des deux cas prcdent (dfinition des fonctions dans Head et
appel depuis Body)
dans un fichier externe : centralisation des scripts dans un seul fichier inclus dans les pages HTML.
Utilisation dune mme fonction dans plusieurs pages sans dupliquer le code. La syntaxe est la suivante :
<script src="JSLabrary.js"></script>
A placer o le script aurait t crit. Le fichier JavaScript *.js ne doit pas contenir les balises <script>
Le JavaScript est un langage orient objet prototype. La notion de classe nexiste pas. Un prototype est un
objet qui est clon pour crer de nouveaux objets. Le JavaScript possde ces propres objets (string, array, date, ) et
permet galement de crer de nouveaux objets ou types de variables. Chaque lment HTML peut possder des
vnements qui peuvent tre dclench par du code JavaScript. Ces vnements sont dcrits par le DOM (Document
Object Model) qui est le standard daccs par script aux lments HTLM (lments HTML, lments de styles,
vnements)
Le JavaScript est un langage sensible la casse, cest--dire que le sens dune chaine de caractres dpend des
lettres en majuscule et minuscule quelle contient. Cela incite adopter une logique de nommage des variables pour
viter les erreurs de casse.
Pour rsumer, le JavaScript permet dinsrer du code de faon dynamique dans le fichier HTML, de rpondre
des vnements interactifs (fin de chargement de la page, action de lutilisateur), de lire et crire des lments HTML
(interaction avec le contenu dune page), de valider les donnes du ct client.
Le JavaScript sutilise ct client.
3.1.2. ExtJS
ExtJS est une bibliothque JavaScript permettant la ralisation dapplications web interactives. Dvelopp par le
groupe Sencha, la bibliothque ExtJS est oriente sur linterface utilisateur. Elle permet donc la cration d'applications
internet dites riches (RIA). Elle apporte un grand nombre de composants visuels tel que les arbres, des tableaux, des
onglets, etc. Il existe une licence commerciale et une licence Open Source.
Cette bibliothque est trs complte :
prise en charge par tous les navigateurs (depuis Internet Explorer 6)
contient un moteur Modle-Vue-Contrleur (MVC) depuis la version 4
modlisation Objet inspire du Java (classe, hritage)
manipulation du DOM
composants (appels widget) prts lemploi.
documentation trs complte disponible sur le site internet de Sencha.
14
3.1.3. Larchitecture MVC

Larchitecture MVC (Modle-Vue-Contrleur) permet aux dveloppeurs de dcrire de faon structure leur
code.
Le modle MVC tablit le diagramme suivant :
Lutilisateur ne voit quune vue, qui fait appel un contrleur (lui pouvant tre utilis par plusieurs vues) qui fait
appel au modle pour raliser des traitements de donnes. Le rsultat de ces traitements sera rcupr par la vue qui
les affiche lutilisateur.
Mise jour
Modle
Stock les donnes
Contrleur
Lance lappel au
serveur,
Rcupre les donnes
Rcupre
Fait un appel
Notifie
Met jour
Vue
Voit
Figure 7 : architecture Modle-Vue-Contrleur (MVC)
Le modle MVC permet de sparer les diffrentes parties qui constituent une application. Cela permet de bien
structurer lapplication afin de faciliter le dveloppement et la maintenance.
Le modle MVC est constitu des lments suivant :
Le modle : il dcrit les donnes utilises. Cest lui qui va interagir avec la base de donnes, permettre
des mises jour, etc.
La vue : cest ce avec quoi lutilisateur va interagir. Le but est de reprsenter les donnes que le modle
a renvoyes et de recevoir les actions de lutilisateur (appui sur un bouton, saisie dun texte, slection
dun lment, etc.). Ces vnements sont envoys au contrleur. La vue ne fait aucun traitement, elle se
contente dafficher les rsultats et dinteragir avec lutilisateur.
Le contrleur : il pilote lapplication. Il prend en charge la gestion des vnements pour mettre jour la
vue ou le modle. Il reoit les interactions de lutilisateur et lance les actions effectuer. Si une action
ncessite un changement des donnes, le contrleur demande la modification des donnes au modle,
et ce dernier notifie la vue que les donnes ont chang pour qu'elles se mettent jour. Certains
vnements de l'utilisateur ne concernent pas les donnes mais la vue. Dans ce cas, le contrleur
demande la vue de se modifier.
15
3.2.La maquette
Ne connaissant pas le JavaScript et pas non plus ExtJS, mes premires semaines de stage ont t ddies mon
auto-formation dans ces langages. Lexpert technique, Nicolas Delaval, travaillant sur le projet ma fourni des
documents intressants me permettant dassimiler les notions de base du JavaScript.
Le suivi des tutoriaux et le dveloppement de mini-projets mont permis de me familiariser avec le JavaScript et
Ext JS.
Aprs deux semaines dauto-formation au sige social de Vivris, jai rejoint lquipe chez CPoR Devises, le
client.
Bien que je me sois forme au pralable, il ma fallu une semaine supplmentaire pour analyser le code qui avait
dj t ralis et madapter au projet et son architecture. Cest en travaillant sur le code que jai compris la logique
qui avait t adopte pour coder.
3.2.1. Prsentation de lapplication
Afin de mieux comprendre le travail que je faisais, dont je parlerai plus tard, je vais commencer par prsenter
laspect visuel de lapplication.
Schmatisation de lapplication :
La configuration de lapplication prsente quatre zones principales :
zone logo : contient le logo de lapplication et permet daccder au tableau de bord de lapplication
zone titre : affiche le titre de lapplication, le domaine choisi et le nom de lutilisateur
zone menu : affiche le menu daccs aux diffrents domaines et fonctionnalits de lapplication
zone page : affiche les diffrents cadres de travail ncessaires
Figure 8 : configuration de l'application
16
Description de la zone page :

Cette zone peut fonctionner de deux faons diffrentes. En fonctionnement simple, la zone nest remplie que
par un seul cadre. En fonctionnement complexe, la zone se compose de deux trois onglets et de trois cadres
(recherche, rsultats, dtail). Un seul cadre saffiche la fois. Sur le premier onglet saffiche soit le cadre recherche soit
le cadre rsultat. On peut passer de lun lautre en cliquant sur un bouton et le cadre masqu conserve les
informations pralablement rentres. En gnral, chaque domaine ou fonctionnalit de lapplication est compos de ces
trois cadres : recherche, rsultats, dtail.
Il existe trois modes daccs aux cadres. Le cadre recherche est accessible en saisie, le cadre rsultat
uniquement en consultation et le cadre dtail peut tre en mode cration, consultation ou modification.
Voici laspect que doivent avoir les diffrents cadres :
Figure 9 : cadre recherche
Figure 10 : cadre rsultats
17
Figure 11 : cadre dtail
Fonctionnement gnral :
Lorsquun utilisateur se connecte lapplication, le navigateur souvre sur lcran principal : le tableau de bord.
A travers ce tableau de bord, lutilisateur a accs des liens vers diffrentes actions en fonction de son profil. Lcran
prsente galement une barre de menu avec plusieurs boutons qui correspondent des domaines et fonctionnalits de
lapplication (ordre, inventaire, demande, facturation, etc.). Un clic sur un de ces boutons affiche les sous menu
disponible dans ce domaine. La slection dun de ses sous-menus affiche le contenu correspondant dans la zone page.
Lutilisateur peut alors interagir avec cette page et effectuer diverses actions qui sont, en gnral, la recherche, la
cration ou la consultation dun lment du sous-menu choisi.
3.2.2. Travail ralis
Pour commencer, la chef de projet ma assigne la ralisation de la maquette dun cran assez simple. Au fur
et mesure de mon stage, jai ralis des crans de plus en plus complexes. Javais comme base pour chaque cran une
maquette non dynamique de lcran avec la description des champs ainsi que les spcifications dtailles qui dcrivent
le fonctionnement de linterface.
Etapes principales pour la cration dun nouvel cran :
En me basant sur les crans dj raliss, jai pu me crer une logique dans les tapes de ralisation dun cran
que jutiliserai systmatiquement par la suite pour le dveloppement de la maquette.
Cration du contrleur : fichier JavaScript qui va grer les interactions entre lapplication et lutilisateur.
Les vue utilises y sont rpertories ainsi que les fonctions qui seront appeles par lutilisateur
(vnements, clic sur des boutons, etc.)
Cration des vues : fichiers JavaScript o est dfini llment afficher dans la page (tableau, formulaire,
arbre, etc.) avec lequel lutilisateur va pouvoir interagir. Il faut un fichier par vue. En gnral on crer 3
fichiers (cran de recherche, de rsultats et de dtail).
Cration du modle : fichier JavaScript qui permet de dfinir les lments quon utilise dans la vue (type,
nom, valeur par dfaut). Par exemple : un produit est dfini par un identifiant de type entier et un nom
de type chaine de caractres, etc. Les modles peuvent servir de schma de liaison entre le JavaScript et
le ct serveur.
Cration des stores : ils permettent de rcuprer les donnes, de les stocker et de les filtrer, via le
modle (notamment utilis pour les donnes dun tableau, dune combo box, ). Cest une liste dobjets
dfinis par le modle.
Chaque fichier JavaScript se construit autour dune base commune en fonction de sil sagit dun contrleur,
dune vue, dun modle et dun store. Une fois les fichiers de base crs, il ne reste qu les complter afin de raliser
linterface souhaite.
18
cran groupe produit et produit :

Pour commencer, la chef de projet ma assign des crans relativement simples, groupe produit et produit.
A lheure actuelle, il existe chez CPoR Devises deux catgories de produits : les lingots et les pices. Parmi ces
deux catgories, il existe moult produits tels que les lingots dor, les lingots dargent, les lingotins dor 500g, les pices
de type Napolon de 10 francs, Napolon de 20 francs, Louis, etc. Il y a environ 425 produits diffrents.
Un produit possde plusieurs caractristiques telles que le mtal, la qualit, le poids dor fin, dont certaines
sont spcifiques la catgorie (taille, pays et effigie pour les pices notamment).
La notion de groupe produit permet de regrouper certains produits ensemble. Un groupe produit est caractris
par une catgorie, une sous-catgorie (lingot, lingotin, pice ou mdaille), un mtal et un produit rfrent. Chaque
produit appartient un groupe produit. Les deux notions sont donc trs lies.
En me basant sur les documents me servant de base ainsi que sur le code des crans dj raliss, jai mis au
point les interfaces pour les deux crans. Suite diverses runions entre Vivris, Akeance et CPoR, jai eu pas mal de
retours de la part du client. Les crans ont subi de nombreuses modifications par rapport au modle que javais au
dpart. Jai donc travaill dessus pendant une semaine au dbut de mon stage pour finalement les laisser en suspens.
Ces modifications taient dues au fait que la notion de groupe produit nexistait pas dans lancien outil de gestion. De
plus les notions de produit et de groupe produit tant trs lies, il convenait de bien dfinir chaque lment et ses
proprits, ce qui a pris plus de temps de prvu. Jai d passer la ralisation dautres crans avant de revenir sur ces
deux-l un mois plus tard une fois que chaque chose ait t bien dfinie et fixe. Laspect final des crans a t valid fin
avril par le client.
Voici un aperu de linterface groupe produit. Linterface des produits est visible en figure 14.
Figure 12 : base pour l'interface groupe produit
19
Figure 13 : aspect final de l'interface groupe produit
Figure 14 : aspect final de l'interface de dtail d'un produit
20
crans fiche lingot et ordre de couverture :

Lcran de dtail dune fiche lingot est une interface basique qui ne contient pas de champs particuliers et dont
le fonctionnement est plutt simple. Il sagit en fait dun formulaire qui sert crer une carte didentit pour un lingot.
On y mentionne, entre autres, le numro, le produit, le poids, etc. La ralisation de cet cran ma pris trs peu de temps,
une journe seulement. Bien quil ny ait eu que trs peu de retour de la part du client sur cet cran, il na t valid
qu la fin du mois davril.
Lcran de dtail dun ordre de couverture est lui aussi une interface assez simple. Je ne vais pas expliquer ce
quest un ordre de couverture, a napporte rien au rapport et cest une notion pas vidente dcrire. La particularit
de cet cran par rapport ceux que javais cods avant est quil peut avoir deux aspects diffrents en fonction des
caractristiques de lordre. Ce choix de caractristiques seffectue via le remplissage dune pop-up qui apparait lors de la
cration dun nouvel ordre de couverture avant daccder lcran de dtail. En fonction des choix faits par lutilisateur,
certain champs seront insrs ou non. Les choix effectus dans la pop-up sont affichs sur lcran de dtail.
Linteraction entre la pop-up et lcran de dtail, qui sont cods dans deux fichiers diffrents, est gre par le
contrleur qui va servir de relai pour faire passer les informations de lun lautre lors de la validation de la pop-up.
Ce fonctionnement de choix via une pop-up est prsent plusieurs endroits dans lapplication.
Figure 15 : pop-up de cration d'un ordre de couverture
Figure 16 : cran de dtail d'un ordre de couverture
Lcran de cration dun ordre de couverture a t un des premiers crans tre valid par le client. Jai travaill
dessus pendant 3 / 4 jours fin mars et il a t valid ds mi-avril.
21
crans bordereau lingot et bordereau pices :

Les crans bordereaux lingot et pice sont les deux crans qui mont le plus occupe pour la phase de ralisation
de la maquette. En effet il sagit dcrans assez complexes et qui ont fait lobjet de nombreuses modifications suite aux
retours du client.
Pour expliquer de faon simple ce que sont les bordeaux je ne vais pas rentrer dans les dtails. Un bordereau est
un formulaire qui est rempli suite la rception dun pli. Un pli peut contenir des lingots ou des pices. Chaque fois que
CPoR reoit un pli, un bordereau est rempli pour le pli en question.
Lcran bordereau lingot est le moins compliqu des deux car le remplissage dun bordereau lingot se fait en
une seule tape contrairement au bordereau pice qui passe par plusieurs personnes avant dtre finalis. Cela est d
au fait que les pices reues doivent tre expertises.
Visuellement, lcran tait compos de plusieurs ensembles. Afin de simplifier et clarifier le code, jai spar
mon code comme linterface du bordereau lingot en plusieurs blocs, appels "fieldset". Ces fieldset permettent de
regrouper plusieurs champs en catgories logiques. Il y a par exemple un ensemble qui contient les informations
concernant le pli qui est trait, un ensemble concernant lexpditeur du pli, un ensemble pour indiquer les produits
prsents dans le pli et des ensembles qui concernent la faon dont tre trait le bordereau.
Ces ensembles sont cods sur des fichiers JavaScript indpendants pour viter de surcharger le code et de se
retrouver avec des fichiers trop gros et illisibles. Le fichier principal correspondant la vue va faire appel ces fichiers
pour gnrer linterface finale.
Linterface bordereau lingot est lie plusieurs autres crans, notamment la fiche lingot que jai ralise avant
de travailler sur les bordereaux. Elle est galement lie au pli entrant dont les informations non modifiables sont
affiches en haut du bordereau dans les ensembles caractristiques et expditeur. Les liens entre diffrents cran se fait
toujours via le contrleur.
A la diffrence des crans que javais cods auparavant, celui des bordereaux lingot a beaucoup plus
dvnements grer, des champs accessibles seulement si certaines conditions sont choisies, dautres champs sont
gnrs seulement si lutilisateur coche une case, un nouvel onglet contenant le formulaire de cration de la fiche lingot
est ouvert si lutilisateur clique sur un certain bouton, La logique de fonctionnement est plus complexe.
Pour rester dans la logique MVC, les interactions qui modifient la vue sur laquelle travaille lutilisateur sont
gres directement dans le fichier de la vue, quant aux interactions qui font appel dautres vues, elles sont gres par
le contrleur.
22
Voici un aperu de lcran bordereau lingot :
Figure 17 : interface des bordereaux lingot
La structure de linterface pour les bordereaux pices est similaire celle des bordereaux lingot, constitue
densemble que lon peut sparer dans le code. La diffrence majeure est quil y a plusieurs tapes pour remplir un
bordereau pice. A chaque tape, de nouveaux champs apparaissent les anciens sont toujours prsents mais les
donnes ne sont plus modifiables.
Autre particularit, chaque pli entrant peut contenir plusieurs types de pices, voire des pices qui navaient pas
t renseignes par le client. Chaque lot de pices est ensuite expertis et tri. Les pices sont alors classes par pices
en bon tat, abimes, frappes trangres ou sans valeur. Il a fallu mettre en place un composant assez complexe qui
permettait dajouter ou supprimer un lment qui lui-mme pouvait possder plusieurs sous-lments, rpartis dans
quatre catgories avec la possibilit dajouter et supprimer des sous-lments. Il fallait galement grer lapparition de
ces champs en fonction de ltape dans laquelle tait le bordereau.
23
Voici un aperu du composant dajout de produits aux diffrentes tapes :
Figure 18 : rception du pli (tape 1)
Figure 19 : expertise des pices (tape 2)
Figure 20 : finalisation du bordereau (tape 3)
Jai galement d intgrer des donnes fictives au fur et mesure des tapes pour simuler le comportement
rel de lcran et permettre au consultant dAkeance de faire des dmonstrations ralistes au client. Il ne ma pas du
tout t vident de mettre en place le mcanisme de changement dtape pour la dmonstration. En effet, dans le cas
de la maquette le changement se faisait directement suite un clic sur un bouton, ce qui gnrait un changement de
linterface avec le remplissage de certains champs. Dans le cas de lapplication relle, les tapes ne seront pas ralises
par la mme personne et donc il y aura un enregistrement des donnes dans la base entre chaque tape. Il sera alors
plus simple de connaitre ltape dans laquelle est le bordereau en fonction de son statut et les donnes seront
rcupres depuis la base de donnes et affiches dans lcran dont laspect sera lui aussi conditionn par le statut. Un
aperu de linterface est disponible en figure 21.
Jai presque mis un mois coder ces deux crans. Jai eu quelques changements effectuer suite aux
dmonstrations faites par le consultant. Ces sont des crans complets qui regroupent une multitude de composants
diffrents dont le fonctionnement nest pas toujours basique. Le fait de les avoir raliss ma permis dlargir mes
connaissances et damliorer ma maitrise dExtJS.
Ces deux crans de bordereaux ont t valids par le client fin avril.
24
Figure 21 : interface de dtail d'un bordereau pice
Divers crans :
Les crans que jai dcrits prcdemment faisaient partie des crans que nous devions raliser et livrer au client
en vue dune validation de la maquette. Une fois tous les crans faisant lobjet dune validation raliss, ma chef de
projet ma donn une liste de petits crans coder afin davancer un peu le travail de ralisation de lapplication. Il
sagissait principalement des interfaces de recherche et de rsultats des crans que javais raliss ou qui taient lis
ce sur quoi javais travaill.
Les interfaces de recherche sont de simples formulaires, dont les champs ne sont pas obligatoires, que
lutilisateur remplit pour ensuite conditionner les rsultats quil souhaite obtenir.
Les rsultats sont affichs sous forme de grille dont les colonnes peuvent tre tries.
Jai ainsi ralis une quinzaine dcrans durant les deux premires semaines du mois de mai. Il sagissait
principalement dinterfaces de recherche et de rsultats pour les crans dont javais ralis le dtail.
Figure 22 : interface de recherche de bordereaux
Figure 23 : interface de rsultats des plis entrant
Aprs avoir ralis les crans des bordereaux, coder ces petites interfaces ma sembl beaucoup plus simple et
ctait beaucoup plus rapide, dautant plus quil sagissait, pour la plupart, dcrans compltement standardiss dont la
base du code est identique pour tous les crans du mme type.
3.2.3. Bilan
Jai pass deux mois et demi travailler sur la maquette de lapplication. Le fait davoir commenc mon stage
par la ralisation de la maquette plutt que de commencer directement par la ralisation de lapplication ma permis de
bien assimiler le JavaScript et lutilisation dEXTJS sans avoir moccuper pour le moment du ct serveur, de la
programmation .Net et de la gestion de la base de donnes.
Comme je lai dit plusieurs reprises, je me suis beaucoup base, si ctait possible, sur le code que mes
collgues avaient crit. Dans le cas o ce que je codais tait nouveau, ce sont mes collgues qui se basaient sur mon
travail par la suite. La documentation dExtJS ma t trs utile quand je cherchais des proprits ou mthodes
spcifiques un composant. La documentation comprend normment dexemples, dont le code est open-source, ainsi
que dun forum assez actif o se trouvait la rponse la plupart de mes problmes.
Toujours dans lobjectif dtre efficace et de simplifier la maintenance de la future application, il est
indispensable que tous les dveloppeurs aient la mme logique, la mme base de programmation. Nous avons souvent
discut ensemble -les dveloppeurs, lexpert technique et la chef de projet - de la faon dont ralises certaines parties
de lapplication qui taient utilises plusieurs endroits et dveloppes par diffrents ingnieurs.
Le dveloppement de la maquette permet galement davancer sur la ralisation de lapplication vu que les
crans qui ont t dvelopps vont tre rutiliss dans lapplication finale.
27
4. Dveloppement de lapplication
La deuxime tape de mon PFE tait de participer au dveloppement de lapplication finale. Les technologies
retenues pour le dveloppement de lapplication sont le Framework .Net et le langage C# (prononcer DotNet et C
Sharp). Lenvironnement de dveloppement choisi est Visual Studio 2010, SQL Server est utilis pour la gestion de la
base de donnes. Cette phase de ralisation a dbut en mai et devrait durer jusquen janvier 2014 minimum.
4.1.Framework .Net, ASP.NET MVC et C#

4.1.1. Framework .Net
Framework .Net est une plateforme de dveloppement et dexcution cre par Microsoft destine au
dveloppement de tout type dapplications :
applications Windows : application client/serveur (Win Form/WPF), service windows
applications Web (ASP.NET), services web
applications mobiles
Le Framework est indpendant du langage utilis pourvu que celui-ci rponde la CLS (Common Language
Specification). La CLS dcrit les rgles suivre pour que le langage soit compatible avec le Framework .Net.
La plateforme est principalement constitue :
dune bibliothque de classe (Base Class Library) qui comprend un grand nombre de fonctions
communes telles que la lecture et lcriture, linterface utilisateur, laccs aux donnes, la connexion
une base de donnes, etc. La bibliothque est exploitable par tous les langages compatibles
dune dfinition commune des types de bases (CTS : Common Type System, CLS : Common Language
Specification)
dune machine virtuelle (CLR : Common Language Runtime).
Lenvironnement de dveloppement utilis pour la ralisation du projet est Microsoft Visual Studio 2010.
VB.NET
C++
C#
Common Language Specification (CLS)

Windows Forms
Data and XML
Visual Studio .NET
ASP.NET
Web Forms Web Services
Mobile Internet Toolkit
Base Class Library

Common Language Runtime (CLR)
Figure 24 : architecture du Framework .Net
28
La plateforme .Net est base sur la spcification Common Langage Infrastructure (CLI). La spcification CLI
dfinit un environnement dexcution des codes de programmes. Limplmentation de la CLI par Microsoft est appele
Common Language Runtime (CLR), la machine virtuelle. La CLR est au .Net ce que la Java Virtuel Machine est au Java,
la seule diffrence que le Framework .Net a t conu pour linteroprabilit entre diffrents langages. Sans la machine
virtuelle, le code .Net ne peut pas tre excut.
Quel que soit le langage utilis pour crire une application .Net, le code source doit tre compil en un langage
intermdiaire, Common Intermediate Langage (CIL). Ce code ne contient aucune information sur le matriel utilis,
cest--dire sur le hardware. Le CLR est ncessaire pour excuter le code intermdiaire. Il est compos du CTS
(spcification du type commun) qui dcrit la faon dont sont dclars et utiliss les types dans la machine virtuelle. Cela
permet linteroprabilit des langages, la scurit du typage et une excution du code efficace. Une fois dans le CLR, le
code peut tre compil en temps rel en langage machine.
Le CLR permet aux dveloppeurs de ne pas se proccuper de certaines choses, surtout en ce qui concerne la
mmoire. Un ramasse-miette (garbage collector) va soccuper doptimiser lutilisation de la mmoire.
C#
VB.NET
Compilateur
Compilateur
Autres
langages
Compilateur
Code source transform en

code CIL appel bytecode
Langage
Intermdiaire
(CIL)
Common Language
Infrastructure
Machine
Virtuelle
(CLR)
0011010010101
1011010011011
Bycteode compil par le CLR

pour gnrer un code
directement utilisable par le
processeur
Figure 25 : fonctionnement de la Common Language Infrastructure
29
4.1.2. ASP. NET MVC

ASP.Net est un ensemble de technologies cr par Microsoft que les dveloppeurs peuvent utiliser pour crer
des applications Web, des sites Web dynamiques ou des services Web XML. ASP.Net fait partie de la plateforme .Net.
ASP.Net est bas sur le CLR qui est commun tous les langages de programmation compatibles avec le
Framework .Net. Ainsi les dveloppeurs peuvent crire du code ASP.Net avec nimporte lequel de ces langages,
gnralement C#, VisualBasic.Net, JScript.Net mais galement des langages indpendants de Microsoft tel que Python.
Les pages ASP.Net constituant lapplication sont excut via le Framework .Net et le serveur web IIS.
ASP.Net MVC, comme son nom lindique, implmente en plus larchitecture Modle-Vue-Contrleur. Pour
mettre en uvre le modle MVC, Microsoft a ajout un nouvel espace de noms dans le Framework .Net. Il contient
toutes les classes et interfaces permettant de mettre en uvre larchitecture : classes de base pour les contrleurs,
classes pour les vues, classes dsignant les actions permettant de crer des liaisons de donnes entre la vue et le
modle. Comme du ct client avec ExtJS, le fait dutiliser ASP.Net MVC va permettre de mieux structurer lapplication,
de sparer les tches et simplifier les tests et la maintenance pour les dveloppeurs.
4.1.3. C#
Le C# est un langage de programmation oriente objet cre en 2002 par Microsoft. Il a t cr afin que la plateforme .Net possde un langage permettant dexploiter toutes ces capacits. Au niveau de la syntaxe, le C# se rapproche
beaucoup du Java. En tant que langage orient objet, le C# prend en charge les concepts dhritage, dencapsulation et
de polymorphisme. Les variables et mthodes sont encapsules dans des dfinitions de classes. Une classe peut hriter
dune seule autre classe parente et peut implmenter plusieurs interfaces.
Comme je lai expliqu avant, la compilation dun code en C# ne donne pas un code binaire utilisable par la
machine directement, contrairement au C ou C++. Le code C# est transform en code intermdiaire (CIL). Ce code nest
pas excutable pas la machine vu quelle ne comprend que le binaire. Le code CIL correspondant au programme que lon
veut distribuer. Sous Windows, a prend lapparence dun .exe. Lorsquon excute un programme CIL, il est lu par la
machine virtuelle (CLR) qui compile en le code en un vrai programme machine cod en binaire et excutable par la
machine. La CLR vrifie galement la scurit du code. Le code C# est donc excut sous le contrle de la machine
virtuelle. On parle de code manag.
30
4.2.Lapplication
Maintenant que les technologies utilises ct client et ct serveur pour le dveloppement de lapplication ont
t prsentes, je vais dfinir la structure et le fonctionnement global de lapplication dans son ensemble.
4.2.1. Structure de lapplication
Bien que lobjectif principal dune application soit de rpondre au besoin exprim par le client, il est galement
ncessaire que lapplication remplisse dautres critres tels que :
avoir une interface homme-machine (IHM) intuitive
avoir des temps de rponses satisfaisants
grer la validit des saisies de lutilisateur
prendre en compte les contraintes de confidentialit
grer de faon claire les erreurs ventuelles
Lapplication doit tre dveloppe pour faciliter la maintenance et les potentielles volutions, do le choix
dune architecture MVC et dune structure modulable. La modularit de lapplication est assure par la mise en place de
couches applicatives responsables chacune de fonctionnalits clairement identifies.
Application ExtJS
ASP.NET MVC
AJAX
Contrleurs
IHM
BLL
Vue
Modle
DAL
Figure 26 : structure simplifie de l'application
31
Linterface homme-machine :
Les applications Web doivent permettre une facilit dutilisation que lon retrouve dans des applications de
bureau classiques. On appelle cela des applications Internet riches (RIA).Dans les RIA, une partie des traitements
normalement effectus ct serveur sont faits du ct client. Le langage JavaScript a notamment t conu dans cet
objectif. La bibliothque ExtJS de Sencha, retenue pour lapplication, prsente les caractristiques demandes une
plate-forme JavaScript (systme de mise en page performant pour grer la disposition des composants, systme de
classe permettant dorganiser le code et dtendre les composants, documentation de qualit) et implmente
larchitecture MVC en fournissant des classes de bases pour utiliser les modles, les vues et les contrleurs.
Les composants JavaScript de lIHM communiquent avec le serveur Web via des requtes AJAX en format JSON.
AJAX (Asynchronous JavaScript And XML) est une mthode de dveloppement web base sur l'utilisation d'un script
JavaScript pour effectuer des requtes web l'intrieur d'une page web sans recharger la page. AJAX rend plus
interactifs les sites web et offre une meilleure ergonomie ainsi qu'une ractivit amliore en permettant de modifier
interactivement une partie de l'interface web seulement. JSON (JavaScript Objet Notation) est un format dcriture des
donnes JavaScript. Son avantage est de fournir un support pour une criture simple et lgre au format texte,
relativement comprhensible par les dveloppeurs JavaScript.
La couche IHM effectue des contrles simples (champ obligatoire, saisie incorrecte) afin dviter de faire des
appels au serveur qui entraineraient forcment un chec. Les erreurs sont notifies ct du champ concern ou dans
une pop-up si cest un message plus complexe afficher.
Pour viter les doubles envois de formulaires pouvant entrainer un double traitement par le serveur, lIHM est
bloque jusqu la fin du traitement ct serveur.
Un cache local est mis en place pour stocker les donnes du contexte utilisateur (droit daccs, restrictions) et
pour stocker des couples cl/valeur des tables de rfrence afin de simplifier les requtes.
Les contrleurs :
Les contrleurs mettent disposition des composants de lIHM diffrentes actions : lecture, cration, mise
jour, suppression, ou autre fonctions utiles.
Ils soccupent :
de convertir le message JSON fourni par lIHM en objet mtier et dappeler la mthode de service
demande
de fournir la rponse au format JSON lIHM une fois la mthode excute, en convertissant si besoin
les objets retourns par la couche de service
De manire gnrale, la conversion JSON/Objet C# se fait par les mcanismes de srialisation et dsrialisation.
La couche service (BLL) :
La BLL (Business Logic Layer) est gnralement une sorte de faade fonctionnelle pour lapplication : elle
centralise et porte laccs aux rgles mtiers. Les mthodes de service appellent, au sein d'une transaction, les
diffrentes mthodes de la couche d'accs aux donnes. En cas derreur lensemble des traitements doivent tre
annuls.
En cas de traitements longs et complexes, nous pourrons veiller limiter les allers retours avec la base de
donnes en regroupant des traitements via une procdure stocke.
La couche daccs aux donnes (DAL) :
La DAL (Data Access Layer) nest connue que de la BLL. En aucun cas les autres couches de lapplication ne
doivent possder de rfrence vers la DAL. La couche daccs aux donnes effectue directement les requtes SQL.
Nanmoins en cas de traitement long ou complexe lutilisation de procdures stockes est envisage. Il sera toujours
fait usage de requtes paramtres afin dviter les problmes dinjection SQL.
Un systme de gestion de la concurrence daccs est mis en place dans les cas ou deux personnes peuvent se
trouver en mise jour sur les mmes donnes. Deux procds sont possibles pour la gestion de concurrence daccs :
la gestion pessimiste : la premire personne qui accde en mise jour est sre de pouvoir mettre jour,
pourvu que sa mise jour ait lieu dans une dure dtermine par paramtrage. Tant que cette
personne na pas effectu sa mise jour, dautres personnes ne peuvent accder en mise jour aux
mmes donnes.
la gestion optimiste : plusieurs personnes peuvent accder aux mmes donnes dans une situation
potentielle de mise jour. Le premier qui met jour y arrive, le second non, il doit alors rafraichir son
cran afin de ressaisir ses modifications et refaire la mise jour.
32
Dans le cas de notre application, lutilisation de SQL Serveur permet la mise en place de la gestion optimiste
avec un champ de type Timestamp. Lors dune mise jour, on vrifie alors si ce champ a t modifi depuis la lecture
des donnes. Sil na pas t modifi, la mise jour est effectue, sinon un message est affich lutilisateur.
Les requtes SQL seront crites directement au sein de la couche daccs aux donnes. Lusage des procdures
stockes nest pas souhait. Nanmoins elles pourront tre utilises ponctuellement par soucis de performance par
exemple.
Les Vue-Modles :
Une vue modle, comme son nom lindique, permet de faire le lien entre un modle et une vue. La vue modle
peut convertir et manipuler les donnes du modle afin quelle soit facilement utilises par la vue. La vue modle gre
les interactions entre la vue et le modle et peut galement implmenter la validation des donnes. Cest via la vue
modle que nous faisons passer les informations du ct client (JavaScript) au ct serveur (C#) et inversement.
4.2.2. Les restrictions de lutilisateur
Les utilisateurs se connecteront l'application avec leur identifiant de session Windows. Chaque utilisateur aura
un profil. L'utilisateur est galement dfini par l'entit juridique (France ou Belgique) et le site auquel il est rattach
(Paris, Nice, Lyon, Marseille, Houten, Bruxelles).
Des restrictions sont mises en place dans l'application. Il y a des restrictions au niveau, du site, de l'entit
juridique et de la catgorie des produits. Ces restrictions servent autoriser ou bloquer l'accs certaines
fonctionnalits de l'application comme avoir aux ordres de couverture, pourvoir seulement les consulter ou les modifier.
Les listes de rsultats sont aussi filtres en fonction des restrictions de lutilisateur. En effet il ne faut pas quun
utilisateur puisse voir un lment quil nest pas cens pourvoir consulter ou modifier.
33
4.3.Travail effectu
La phase de ralisation de lapplication a dbut au dbut du mois de mai. Nayant pas appris le langage C#
lINSA, je me suis forme pendant une semaine avant de commencer travailler sur le projet. Une fois familiarise avec
le code, jai pu commencer travailler sur des lments simples du projet. Au fur et mesure, jai eu des choses plus
complexes raliser.
4.3.1. Auto-formation et tapes principales de ralisation dun cran
Le langage C# est trs proche du Java que lon tudie lINSA. Lexpert technique ma donn quelques
documents afin que je me familiarise avec ce langage et que je revoie les notions du langage orient objet telles que les
classes, les interfaces, lencapsulation, lhritage et le polymorphisme. Je me suis galement documente sur la plateforme ASP.NET MVC et son architecture.
La lecture nest pas suffisante pour comprendre le fonctionnement dun projet, il faut surtout coder. Quand jai
commenc travailler sur la ralisation, il y avait dj un peu de travail de fait et jai pu me baser dessus pour rentrer
dans la logique de code adopter. Cest en travaillant sur le premier cran que ma donn ma chef de projet que jai pu
assimiler la structure et me mettre en place une mthode pour la ralisation ct serveur dun cran que je suivrai
systmatiquement lors de la ralisation dun nouvel cran.
Etape 1 : cration du modle :
Fichier dans lequel on cre lobjet sur lequel on va travailler. Il contient le constructeur, les proprits (id, code,
nom, etc.), les critres de tri, des constantes. Pour connatre les proprits que possde un objet, on se base sur la base
de donnes. En effet lobjet que lon cre correspond une table de la base de donnes et ses proprits
correspondent, en majorit, aux colonnes de la table. Le nom de la classe, et donc du fichier, correspond toujours au
nom de lobjet que lon dfinit (ex : CategorieProduit, Couverture, Produit, etc.)
Etape 2 : cration de la DAL :
Fichier qui contient les fonctions qui accdent la base de donnes (SELECT, INSERT, UPDATE, DELETE).
Cest dans ce fichier que seront codes les requtes SQL qui agissent sur la table dont le nom est contenu dans
celui de la classe. Ex : ProduitDb pour la table produit, CategorieProduitDb pour la table catgorie produit.
Etape 3 : cration de la BLL :
Fichier qui contient les fonctions de service qui ouvrent une transaction et fait appel diffrentes fonction de la
couche daccs aux donnes, la DAL. Cest dans ce fichier quest gr laccs la base de donnes. Le nom de la classe
est du type "ObjetBll" (ex : ProduitBll, CategorieProduitBll).
Etape 4 : cration du contrleur :
Fichier qui contient les diffrentes actions lances depuis linterface (cration, mise jour, suppression, etc.).
Chaque fonction fait appel une fonction de la couche de service, la BLL. Le nom de la classe scrit toujours de la forme
"ObjetSvc " (ex : ProduitSvc, CategorieProduitSvc). Le contrleur fait galement appel une vue modle afin de
rcuprer ou de renvoyer un objet avec les proprits souhaites.
Etape 5 : cration des vues-modles :
Fichiers faisant le lien entre le modle et la vue. A chaque vue correspond une vue-modle qui reprend les
proprits dfinies dans le modle qui sont ncessaires la vue. Toutes les proprits dun objet ne sont pas forcment
utilises dans une vue. Le fait dutiliser les vue-modle permet de choisir les champs/proprits utiles et deffectuer des
validations ct serveur. Le nom des classes fait toujours rfrence lobjet et la vue concern ex :
CategorieProduitListVm, ProduitDetailVm.
Afin dtablir la communication entre le ct serveur et le ct client, nous avons mis en place la plate-forme
ExtDirect, propose par Sencha dans le projet. ExtDirect est une plate-forme qui permet daccder, distance du ct
client, aux mthodes ct serveur. ExtDirect tablit une communication homogne entre une application ExtJS et la
plate-forme .Net. Linstallation et la configuration dExtDirect ont t faites par lexpert technique de Vivris prsent sur
le projet.
34
Grce ExtDirect, les appels aux fonctions du contrleur C# peuvent tre faits directement depuis une fonction
JavaScript dans un de fichier de vue ExtJS. Il y a galement un lien entre les proprits JSON dfinies dans les vuesmodles et le nom des composants ExtJS. Afin que les champs soient aliments ou rcuprs par le message JSON et
contiennent les bonnes valeurs, il faut que les noms soient identiques ct client et ct serveur.
Une fois ces mthodes et ces rgles acquises, jai eu beaucoup plus de facilits dvelopper lapplication.
4.3.2. cran catgorie produit
Aprs une semaine de lecture et de pratique sur de petits exemples, jai commenc travailler sur le projet.
Comme pour la maquette, la rpartition du travail se fait par cran. Pour commencer, ma chef de projet ma attribu un
cran assez simple, lcran des catgories produit. Cet cran a pour but dafficher la liste toutes les catgories produits
prsentes dans la base et de pouvoir les modifier.
Le fonctionnement de lcran catgorie produit est simple :
Lcran est constitu dun seul onglet dans lequel on affiche la liste des catgories produit. Lcran est par
dfaut accessible en mode consultation, cest--dire quon ne peut pas modifier les valeurs. Un bouton "modifier"
permet lutilisateur, sil en a les droits, de passer en mode modification. Une des colonnes du tableau contient un
icne qui permet de modifier les donnes de la ligne slectionne. Le clic sur cet icne gnre une pop-up remplie avec
les donnes de la catgorie slectionne dont certains champs sont modifiables. La validation de la pop-up modifie les
valeurs dans le tableau. La validation de lcran enregistre en base de donnes les modifications effectues.
Dans un premier temps, jai ralis laspect graphique (JavaScript) de lcran. Je me suis base sur un composant
de type "Template" (disponible dans ExtJS) que lon a adapt et gnralis pour lutilisation dans notre application lors
de la ralisation de la maquette. Le composant Template que nous avons gnralis permet de crer un tableau partir
dune liste de donnes. Il existe des composants dans la bibliothque ExtJS qui ralisent ce genre de tableaux mais ils
contiennent de nombreuses proprits (notamment de classement) qui ne nous sont pas utiles et qui alourdissent le
composant pour rien. Lutilisation du composant type "Template" permet de crer de faon simple et rapide un tableau.
Les donnes du Template sont fournies via un store, collection dobjet, lui-mme bas sur un modle. Les champs du
modle ExtJS pour une catgorie produit correspondent aux proprits dfinies dans la vue-modle ct serveur. Le
store va ensuite faire appel la fonction du contrleur C# pour rcuprer une liste dobjets.
Coder linterface ne ma pas pris beaucoup de temps, environ une journe de travail.
35
Voici laspect final de lcran catgorie produit :
Figure 27 : interface des catgories produit
Figure 28 : pop-up d'dition d'une catgorie produit
Rcupration de la liste :
Aprs avoir termin linterface, jai abord le ct serveur de lcran. Jai mis un certain temps pour comprendre
larchitecture du projet ct serveur et les diffrents liens entre les fichiers quil faut crer pour avoir un cran
fonctionnel. En analysant ce qui avait dj t fait, jai pu comprendre les dpendances entre les diffrents fichiers et
mettre en place la mthode dcrite prcdemment pour coder.
Dans un premier temps, pour tablir le modle de lobjet Catgorie Produit, jai regard comment tait
construite la table catgorie produit dans la base de donnes. A chaque colonne de la table correspond une proprit
de lobjet CategorieProduit. Une catgorie produit est dfinie par ainsi :
Categorie_produit
colonne
type
Id_categorie_produit
entier
Code_categorie_produit
chaine de caractres
Libelle_categorie_produit
chaine de caractres
Seuil
entier
identifiable
boolen
Uti_crea
chaine de caractres
Uti_modif
chaine de caractres
Date_crea
date
Date_modif
date
Acces
timestamp
Figure 29 : table des catgories produit
La table est simple et indpendantes des autres tables de la base. Chacune des proprits de lobjet sont
accessibles en lecture et criture. En C# il y a une manire simplifie pour dfinir les accesseurs une proprit qui est
la suivante :
/// <summary>
/// Obtient ou dfinit le libell de la Catgorie de produit
/// </summary>
public string LibelleCategorieProduit { get; set; }
Un accesseur get correspond une mthode sans paramtre avec une valeur de retour du type proprit. Un
accesseur set correspond une mthode pourvue d'un seul paramtre de valeur du type proprit et d'un type de
retour void.
36
Aprs avoir dfinit le modle de lobjet CategorieProduit, jai cr la DAL. La premire tape tait dafficher la
liste de toutes les catgories produit de la table, en loccurrence il ny en a que deux : pice et lingot. La premire
fonction que jai crite dans la DAL est la fonction ListCategorieProduit dont le seul paramtre dentre est les
restrictions de lutilisateur et comme valeur de retour une liste dobjet de type CategorieProduit. La requte SQL qui est
lance est de type SELECT, le but tant de rcuprer tous les lments de la table. Au fur et mesure de lexcution, on
cre un objet de type CategorieProduit. Chaque lment rencontr est ajout une liste qui est renvoye une fois la
requte excute.
Ensuite je cr le fichier BLL qui va contenir la fonction List qui a les mmes paramtres et valeur de retour que
la fonction de la DAL. Le seul rle de cette fonction est faire appel celle de la DAL.
Vient aprs le contrleur. La premire fonction que jai crite dans le contrleur est la fonction List, dont le nom
est identique celle de la BLL, qui na aucun argument en entre et qui revoie la liste sous forme de message JSON.
Cette fonction fait appel la fonction List de la BLL. La liste de catgories produit renvoye par la BLL est transforme via
la vue-modle ddie laffichage de la liste pour tre transmise au format JSON au ct client.
Dans la vue-modle ddie la liste des catgories produit, seule les proprits ncessaires la vue dfinies
dans le modle sont reprises. Dans le cas des catgories produits, presque toutes les proprits sont utiles. Seules les
informations concernant lutilisateur et la date ne sont pas affiches.
Voici le message JSON envoy pour rcuprer la liste :
{"action":"CategorieProduitSvc","method":"List","data":null,"type":"rpc",
"tid":4}
On voit quon fait appel la mthode List du contrleur des catgories produit et quil ny a aucun paramtre en
entre.
Et voil quoi ressemble la rponse :
{
"type": "rpc",
"tid": 4,
"action": "CategorieProduitSvc",
"method": "List",
"result": {
"data": [
{
"idCategorieProduit": 1,
"codeCategorieProduit": "PIE",
"libelleCategorieProduit": "Pices",
"seuilGre": 5000,
"identifiable": false,
"acces": 25624
},
{
"idCategorieProduit": 2,
"codeCategorieProduit": "LIN",
"libelleCategorieProduit": "Lingots",
"seuilGre": 5000,
"identifiable": true,
"acces": 23980
}
],
"success": true
}
}
On retrouve bien la liste des catgories produit ayant comme proprits uniquement celles dfinies dans la
vue-modle. Comme je lai dit prcdemment, si le nom des champs dfinis dans le modle JavaScript ne correspondant
pas au nom des proprits du message JSON, les donnes ne pourront pas communiquer entre le ct serveur et le ct
client.
37
Modification dun lment :

Une fois la liste affiche, il faut pouvoir rcuprer les donnes dun lment de la liste. Pour cela, il faut crire
une requte de type SELECT qui va rcuprer un lment de la table en fonction de son identifiant (qui est unique).
Comme pour la fonction prcdente, on cre une fonction GetCategorieById dans la DAL, dans la BLL et dans le
contrleur C# qui va renvoyer un objet CategorieProduit. Une vue-modle est galement crer et elle correspond aux
champs ncessaires la pop-up de modification qui sera alimente par ces donnes.
Enfin lors de la validation de lcran, les donnes qui ont t modifies sont enregistres dans la base de donnes via
une requte de type UPDATE. Cette requte va mettre jour tous les champs dun lment donn. La gestion de
concurrence daccs entre en jeu ce moment. En effet lors de la mise jour dun lment, le numro daccs prsent
dans la base est compar celui de lobjet modifi afin de savoir si les modifications peuvent tre enregistres ou non.
Bien que cet cran ne contienne que des fonctions basiques et ne manipule que des objets simples, jai mis une
semaine le coder. De petites modifications au niveau de linterface ont d tre ralises occasionnellement afin
dharmoniser cet cran avec dautres crans au fonctionnement similaire.
4.3.3. cran conditionnement
Lcran conditionnement est un cran dont le fonctionnement peut tre appel fonctionnement "normal" dans
notre application. En effet, il possde les trois cadres habituels : recherche, rsultats, dtail.
Un conditionnement dfinit la faon dont sont stocks les produits. Un conditionnement peut contenir N
conditionnements physiques qui eux mme peuvent avoir N capacits. Un conditionnement physique est le contenant
dans lequel seront stocks les produits. Une capacit dfinit le nombre de produits pouvant tre stocks dans le
conditionnement physique en fonction de leurs dimensions.
Le fonctionnement de lcran conditionnement est le suivant :
Recherche :
Quand lutilisateur slectionne le sous-menu conditionnement, longlet correspondant souvre et le cadre de
recherche est visible (Cf. Figure 30).
A partir de ce cadre, lutilisateur pour rentrer un certain nombre de critres qui serviront de filtres la
recherche. La validation de la recherche ouvre le cadre rsultats (Cf. Figure 31) affichant un tableau comprenant les
rsultats de la recherche selon les critres. Le cadre rsultats est pagin, cest--dire que les rsultats sont affichs sur
plusieurs pages et quun ensemble de boutons en bas de lcran permet laccs aux diffrentes pages. Les critres ne
sont pas obligatoires. Dans le cas o rien nest prcis le rsultat contiendra la liste complte des conditionnements. Un
bouton "Excel" sur lcran de recherche permet dexporter la liste de rsultats de la recherche sous forme de fichier
Excel.
38
Figure 30 : interface de recherche d'un conditionnement
Figure 31 : interface de rsultats des conditionnements
39
Cration
Depuis lcran de recherche, lutilisateur peut galement crer un nouveau conditionnement en cliquant sur le
bouton "Nouveau". Cette action ouvre un nouvel onglet qui contient le cadre dtail en mode cration.
Lutilisateur peut alors crer un nouveau conditionnement en renseignant les informations ncessaires. Un
conditionnement doit possder au minimum un conditionnement physique pour pouvoir tre enregistr. La liste des
conditionnements physiques saffiche dans un Template (initialement vide). Un icne "+" ct du texte
conditionnement physique permet den crer un nouveau. La cration dun conditionnement physique seffectue via
une pop-up dans laquelle on indique le code, le libell, le poids et les diffrentes capacits. Le composant qui contient
les champs pour les capacits est un peu particulier. Un icne "+" permet dajouter une ligne qui contient les trois
champs pour dfinir une capacit (taille minimum, taille maximum, et quantit). N lignes peuvent tre ajoutes et un
icne "x" permet de supprimer une des lignes. Lors de la validation de la pop-up, la conformit des champs est vrifie
et des notifications apparaissent pour informer lutilisateur en cas derreur. Les donnes renseignes dans la pop-up
sont affiches dans le tableau des conditionnements. Chaque conditionnement peut tre supprim ou modifi. Lors de
la modification, la pop-up souvre pr remplie avec les donnes concernant le conditionnement physique slectionn.
Une fois le conditionnement cr, lutilisateur appuie sur le bouton "valider" pour enregistrer les donnes dans
la table et revenir lcran prcdent.
Figure 32 : pop-up de modification/cration d'un conditionnement physique
40
Consultation / modification :
Depuis la liste de rsultats, lutilisateur peut slectionner un des lments pour le consulter, voire le modifier.
Lcran de dtail souvre alors rempli avec les donnes correspondantes en mode consultation. Lappui sur le bouton
"modifier" passe le cadre en mode modification et permet lutilisateur de changer certaines donnes. Lutilisateur
peut galement supprimer le conditionnement quil est en train de consulter. Une pop-up de confirmation apparait afin
de confirmer son choix et dviter une suppression involontaire.
Figure 33 : interface de dtail en mode modification d'un conditionnement
41
La premire tape est la ralisation de linterface graphique. Cet cran ne faisait pas partie de ceux raliss
pendant la phase de la maquette. Il faut donc partir de zro en se basant sur les maquettes non dynamiques, ralise
par la chef de projet.
La ralisation de linterface se fait toujours selon la mthode dcrite dans la partie consacre la ralisation de
la maquette : cration du contrleur JavaScript, cration des vues (recherche, rsultats, dtail, pop-up de modification),
cration du modle et du store pour la liste de rsultats.
La deuxime tape est la ralisation de lcran ct serveur. Cette fois le fonctionnement est plus complet. Il
faut pouvoir crer, modifier et supprimer et rcuprer une liste dlments ou un seul lment de la table. Dfinir
lobjet Conditionnement tait plus compliqu que lobjet CategorieProduit vu prcdemment. Un conditionnement
contient un ou plusieurs conditionnements physiques qui contiennent une ou plusieurs capacits. Dans la base de
donnes, il y une table pour chacune de ces notions : la table CONDITIONNEMENT, la table
CONDITIONNEMENT_PHYSIQUE et la table CONDITIONNEMENT_PHYSIQUE_CAPACITE. La table des conditionnements
physiques est lie celle des conditionnements via lidentifiant du conditionnement. La table des capacits est lie
celle des conditionnements physiques via lidentifiant des conditionnements physiques.
conditionnement
colonne
Id_conditionnement
Code_conditionnement
Libelle_conditionnement
Vrac
Access
Uti_crea
Uti_modif
Date_crea
Date_modif
type
entier
entier
dcimal
dcimal
entier
chaine
Chaine
Date
date
conditionnement_physique
colonne
Id_cond_physique
Id_conditionnement
Code_conditionnement_physique
Libelle_conditionnement_physique
Poids
Uti_crea
Uti_modif
Date_crea
Date_modif
type
entier
entier
dcimal
dcimal
entier
chaine
Chaine
Date
Date
conditionnement_physique_capacite
colonne
type
id_cond_physique_capacite
entier
id_conditionnement_physique
entier
Taille_inf
dcimal
Taille_sup
dcimal
Capacite
entier
Uti_crea
chaine
Uti_modif
Chaine
Date_crea
Date
Date_modif
date
Figure 34 : structures des tables conditionnement, conditionnement physique et conditionnement physique capacit
Le fait davoir des tables lies les unes aux autres force excuter plusieurs requtes lors de la cration, mise
jour ou suppression. En effet plusieurs lments sont affects en mme temps, un conditionnement interagit avec
plusieurs conditionnements physiques et agissent sur plusieurs conditionnements physiques capacits.
Dans un premier, il faut dfinir les modles des objets sur lesquels on va travailler. Les trois modles C# sont
cods sur la base des tables prsentes figure 30. Il faut galement tenir compte du fait quun conditionnement possde
une liste de conditionnements physiques et quun conditionnement physique dpend dun conditionnement et possde
une liste de capacits. Cela ajoute quelques proprits supplmentaires dans les modles du conditionnement et du
conditionnement physique.
Il y a galement besoin de trois fichiers DAL. En effet un fichier de type DAL ne contient que des fonctions dont
les requtes SQL vont interagir sur la mme table relative lobjet manipul. Vu que lcran agit sur trois tables en
mme temps, il faut trois fichiers diffrents.
Par contre il ny a quun seul fichier de type BLL et quun seul contrleur li lcran conditionnement.
Des vues-modles sont cres pour laffichage de la liste de rsultats et du dtail dun conditionnement. Il y en a
galement une pour dfinir laffichage des conditionnements physiques et pour les capacits. La vue-modle pour un
conditionnement fait appel celle dun conditionnement physique qui fait appel celle des capacits. Les trois notions
sont compltement imbriques les unes dans les autres.
42
Liste de rsultats :
Dans un premier temps jai mis en place les fonctions pour afficher la liste de rsultats dune recherche.
Contrairement au cas classique, le rsultat dune recherche donne une liste de conditionnement physiques et non de
conditionnements, comme on pourrait lattendre vu quon se situe sur lcran des conditionnements. Le principe
daffichage dune liste est toujours le mme. La fonction List du contrleur C# est appele par le store ExtJS qui
contiendra la liste afficher dans le tableau du cadre rsultats. Le contrleur rcupre les critres de tri ainsi que les
paramtres de pagination de la liste et fait appel la fonction List de la BLL. La fonction de la BLL fait ensuite appel la
fonction de la DAL dont la requte SQL de type SELECT va parcourir toute la table des conditionnements physiques et
rcuprer dans une liste les lments qui rpondent aux critres de tri entrs par lutilisateur. Le contrleur revoie la
liste aprs transformation via la vue-modle qui dfinit les proprits des objets de la liste.
Voici un exemple du message JSON envoy lors dune recherche :
{"action":"ConditionnementSvc","method":"List","data":[1,50,"libelleConditionnement","ASC",
[{"property":"poidsInf","value":"6"},{"property":"poidsSup","value":"50"}]],"type":"rpc","tid":16}
Ici les conditionnements sont tris en fonction de leur (poids minium : 6g et le poids maximum 50g).
Rcupration dun conditionnement :
La slection dun lment dans la liste de rsultats lance la fonction du contrleur qui permet de rcuprer un
conditionnement en fonction de son identifiant. Le contrleur appel la BLL qui va lancer une fonction dans la DAL des
conditionnements pour charger les donnes concernant le conditionnement souhait et une fonction de la DAL des
conditionnements physiques pour rcuprer la liste des conditionnements physiques lis au conditionnement. Les deux
requtes sont de type SELECT et rcupre les lments dont lidentifiant du conditionnement correspondant celui
slectionn. La requte charg de rcuprer la liste des conditionnements physiques est un peu particulire. En effet
une jointure faite entre les tables CONDITIONNEMENT_PHYSIQUE et CONDITIONNEMENT_PHYSIQUE_CAPACITE afin de
rcuprer la liste de capacit est telle que si un conditionnement physique possde 3 capacits, il sera renvoy 3 fois. Il
convient donc de vrifier lidentifiant du conditionnement physique avant de lajouter dans la liste qui sera renvoye par
la requte pour viter les doublons.
Une fois les deux requtes excutes, on obtient bien un objet de type conditionnement possdant une liste de
conditionnements physiques et eux mme possdent une liste de capacits. Cet objet est envoy et affich ct
serveur.
Cration dun conditionnement :
La validation du cadre dtail en mode cration entraine la cration dans la base de donnes dun nouveau
conditionnement. Qui dit nouveau conditionnement, dit nouveaux conditionnements physiques et nouvelles capacits.
Le contrleur vrifie la validit des donnes et cre un objet de type conditionnement depuis la vue-modle
correspondante avant de faire appel la BLL. La BLL va faire appel aux trois DAL pour insrer les donnes concernant le
conditionnement dans les trois tables concernes. Afin que les modifications de la base se passent comme prvu, les
appels la base de donnes sont regroups dans ce que lon appelle une transaction. En SQL, une transaction est un
ensemble de requtes que l'on regroupe en une seule unit logique de travail qui pourra ensuite tre, soit valide, soit
annule. Si une des requtes choue, la transaction est annule et aucune table nest modifie. La BLL ouvre la
transaction et lance successivement les fonctions dinsertion des DAL. En premier, on insre (requte de type INSERT)
les donnes dans la table CONDITIONNEMENT et on rcupre lidentifiant, gnr automatiquement. Ensuite, on boucle
sur chacun des conditionnements physiques et on les insre (requte de type INSERT) un par un dans la table en
ajoutant lidentifiant du conditionnement auquel ils font rfrence. Enfin, dans cette mme boucle, on fait linsertion de
la liste de capacit li un conditionnement physique. La requte utilise pour insrer les capacits dans la table
CONDITIONNEMENT_PHYSIQUE_CAPACITE est une requte de type MERGE. En SQL, une requte de type MERGE
effectue des oprations d'insertion, de mise jour ou de suppression sur une table cible selon les rsultats d'une
jointure avec une table source. Dans notre ce cas la liste des capacits ne contient que des lments qui nexistent pas
dans la table et donc ils seront tous insrs.
La mise en place de la requte de type MERGE nous permet de faire une requte qui se charge de toutes les
modifications. Cela vite de devoir coder une fonction dinsertion, de suppression et de mise jour quil aurait fallu
lancer pour chacune des capacits. La fonction de la BLL aurait d boucler sur les capacits lintrieur de la boucle sur
les conditionnements physiques dj mise en place. Cest trop long et pas optimis. Le MERGE est la meilleure solution,
il ny a quun seul appel la base de donnes pour faire les changements sur la totalit de la base.
43
Une notification indique lutilisateur si lenregistrement cest bien pass.

Mise jour dun conditionnement :
Lorsque le cadre dtail est ouvert en mode modification, lutilisateur pour changer certaines donnes relatives
au conditionnement slectionn. Il peut notamment ajouter, modifier et supprimer des conditionnements physiques et
des capacits lies un conditionnement physique.
Ct client, diffrentes listes sont cres afin de savoir quelles ont t les modifications. Il y a la liste des
identifiants des conditionnements physiques supprims, une liste de conditionnements physiques ajouts et une liste
de conditionnements physiques modifis. Ces trois listes, en plus des donnes concernant le conditionnement, sont
envoyes au contrleur C#. Comme dhabitude, il vrifie la validit des champs avant de faire appel la BLL. La fonction
de mise jour de la BLL fait plusieurs appels aux diffrentes DAL. Tous les appels sont regroups au sein dune
transaction pour scuriser la manipulation.
La mise jour demande une certaine organisation dans lexcution des requtes. Dans un premier temps, on
met jours la table CONDITIONNEMENT (requte de type INSERT). Ensuite si la liste des identifiants des
conditionnements physiques supprims nest pas vide, une fonction qui fait deux requtes de type DELETE est lance.
Une requte pour supprimer toutes les capacits et une pour supprimer les conditionnements physiques dont
lidentifiant conditionnement physiques est compris dans la liste. Aprs vient lajout des nouveaux conditionnements
physiques. Une boucle sur la liste des conditionnements physiques permet de faire linsertion et dutiliser la requte
MERGE pour les capacits. Enfin la transaction se termine par la mise jour des conditionnements physiques de la liste
contenants ceux qui ont t modifis. Le principe est le mme, on boucle sur les conditionnements physiques pour
mettre jour la table CONDITIONNEMENT_PHYSIQUE (requte UPDATE) et faire un MERGE des capacits de chacun des
lments (capacits qui ont pu tre ajoutes, supprimes ou modifies).
Une notification indique lutilisateur si lenregistrement cest bien pass ou non.
Suppression dun conditionnement :
Depuis lcran de dtail en mode consultation ou modification, lutilisateur peut supprimer le conditionnement
slectionn. Comme pour les autres procdures, la suppression dun conditionnement agit sur les trois tables.
Cependant le mcanisme est assez simple. Le contrleur appelle la BLL qui ouvre une transaction. Un premier appel la
DAL est fait pour supprimer les capacits des conditionnements physiques et les conditionnements physiques du
conditionnement en question. Un deuxime est fait pour supprimer le conditionnement. Vu que les trois tables sont
lies, il faut absolument commencer par supprimer les capacits, puis les conditionnements physiques et enfin le
conditionnement sinon une erreur sera renvoye. En effet on ne peut pas supprimer un lment dune table sil sert de
rfrence dans une autre table.
Au niveau fonctionnel, lcran des conditionnements est complet, toutes les instructions SQL de manipulation
du contenu de la base de donnes (SELECT, INSERT, UPDATE, DELETE) sont utilises. La ralisation de cet cran a dur
une quinzaine de jours.
44
4.3.4. cran couverture

Le dernier cran dont je me suis occupe pendant mon stage est lcran des ordres de couverture. Javais dj
ralis linterface de cet cran pour la maquette, le travail faire concernait donc plutt le ct serveur. Au cours du
dveloppement, il y a eu quelques modifications au niveau de linterface, notamment sur lcran du panier et
dexcution des ordres dont je parle un peu plus loin. Le fonctionnement est plus complexe celui de lcran des
conditionnements :
Recherche :
Le formulaire de recherche contient un nombre assez important de critres de filtre.
Figure 35 : interface de recherche d'un ordre de couverture
Comme pour tous les crans de recherche de lapplication, le bouton "Valider" affiche le cadre rsultats
contenant la liste des lments renvoys par la recherche, le bouton "Excel" permet dexporter les rsultats de la
recherche sous format Excel et le bouton "nouveau" permet denregistrer un nouvel ordre de couverture.
45
Rsultats :
Le cadre rsultats contient un tableau dans lequel saffichent les lments renvoys par la recherche.
Figure 36 : interface de rsultats des ordres de couverture
Depuis le cadre rsultats, on peut accder au dtail dun ordre de couverture en cliquant sur licne ddition
ou ajouter lordre de couverture au panier en cliquant sur licne "panier".
Les lments mis dans le panier sont affichs sous forme de liste, semblable celle des rsultats, dans le cadre
panier.
46
Excution :
Lutilisateur peut excuter des ordres de couverture condition quils rpondent certains critres. Pour choisir
les ordres quil veut excuter, lutilisateur clique sur licne "panier" de lordre souhait dans la liste de rsultats. Les
ordres slectionns sont ajouts au fur et mesure sous forme de liste dans le cadre panier.
Figure 37 : interface du panier des ordres de couverture
Depuis linterface du panier, lutilisateur peut supprimer un des ordres de couverture, voire mme vider
compltement le panier et il peut lancer lexcution des ordres prsents dans la liste. Si un ordre ne rpond pas aux
critres pour pouvoir tre excut, la ligne du tableau est colore en rouge. Lappui sur le bouton excuter va contrler
les ordres prsents dans la liste et ouvrir un nouvel onglet si tout est correct.
Lcran dexcution souvre avec dedans la liste des ordres de couverture valides, prsents dans le panier.
Figure 38 : interface d'excution des ordres de couverture
47
Lutilisateur doit alors saisir le cours auquel va tre excut chaque ordre pour pouvoir valider lexcution. Si un
cours nest pas saisi, lexcution na pas lieu. La saisie du cours de fait via une pop-up pr-remplie des informations
ncessaires.
Consultation/Modification :
Depuis lcran de rsultats, lutilisateur peut slectionner un ordre de couverture pour consulter le dtail.
Longlet dtail souvre avec tous renseignements sur lordre. Aucun champ nest modifiable. Un bouton "modifier"
permet dentrer en mode modification et de modifier certain champs (Cf. Figure 39). Les champs modifiables sont
surligns de rouge. La validation de lcran fait une mise jour de lordre de couverture dans la table.
Cration :
Depuis lcran de recherche, lutilisateur peut crer un nouvel ordre de couverture. Une pop-up souvre afin
dentrer un certain nombre dinformations qui vont conditionner lcran de dtail qui souvre ensuite. Lcran de dtail
contient alors les informations renseignes dans la pop-up et tous les autres champs sont vides. La validation de lcran
entraine lajout dun nouvel ordre de couverture dans la base de donnes.
Annulation :
Depuis l'cran de dtail, l'ordre de couverture qui est ouvert peut tre annul par l'utilisateur. L'annulation ne
supprime pas l'lment de la table mais modifie certaines caractristiques qui auront un impact sur d'autres tables de la
base.
Figure 39 : interface de dtail d'un ordre de couverture en mode modification
48
Afin de mieux comprendre, voici comment est dfinie la table ORDRE_COUVERTURE dans la base de donnes.
Ordre_couverture
colonne
type
Id_ordre_couverture
entier
Id_devise_ordre
entier
Id_devise_reglement
entier
Id_site
entier
Id_site_demandeur
entier
Id_tiers_correspondant entier
Id_site_correspondant
entier
Id_condition_execution entier
Id_statut_ordre
entier
Num_ordre
chaine de caractres
Sens
chaine de caractres
Date_valeur
date
Prix_propose
dcimal
Cours_stop_loss
dcimal
Cours_take_profit
dcimal
Commentaire
chaine de caractres
Quantite_initiale
entier
Quantite_execution
entier
Inter_pays
boolen
Acces
timestamp
Uti_crea
chaine de caractres
Uti_modif
chaine de caractres
Date_crea
date
Date_modif
date
Figure 40 : structure de la table des ordres de couverture
Initialement, les ordres de couverture taient enregistrs dans la table des ordres avec des caractristiques qui
permettaient de les identifier comme ordres de couverture. Puis on s'est aperu que les ordres de couverture tait trs
distincts des ordres classiques au niveau des proprits. Trs peu de champs taient communs entre un ordre classique
et un ordre de couverture. Il tait plus simple de sparer la table des ordres en deux pour avoir une table spcifique
pour les ordres de couverture.
Toutes les colonnes de la table ordre de couverture ne sont pas obligatoires, ce qui est normal vu que certaines
caractristiques sont lies d'autres. Par exemple, en fonction de la condition d'excution qui est choisie, la valeur du
prix propos est renseigne ou non. De mme avec le cours stop loss et take profit.
L'cran agit galement sur la table HISTO_STATUT_ORDRE_COUVERTURE qui est une table dans laquelle sont
enregistrs tous les statuts par lesquels sont passs les ordres de couverture. Cette table permet de pouvoir afficher
l'historique du statut d'un ordre de couverture depuis l'cran de dtail.
La table ENTITE_JURIDIQUE_COUVERTURE est aussi impacte lors de la cration, excution ou suppression des
ordres de couverture. Cette table permet d'avoir une trace des diffrentes transactions, utile pour la trsorerie.
49
Le fonctionnement pour rcuprer la liste de rsultats, rcuprer un ordre de couverture donn, crer ou
modifier un ordre de couverture est similaire celui utilis pour les conditionnements, je ne vais pas les dtailler. Je vais
juste dcrire les notions que je n'avais pas encore rencontres jusque l.
Procdure stocke :
En SQL, une procdure stocke est un ensemble d'instructions prcompiles et stockes dans la base de
donnes. Comme une fonction dans n'importe quel autre langage de programmation, la procdure stocke peut avoir
des paramtres en entre et retourner plusieurs valeurs. Elle contient des instructions de programmation qui
effectuent des oprations sur la base de donnes. Dans notre application nous faisons appel aux procdures stockes
quand nous avons besoin de rcuprer des informations qui sont stockes dans la base du client. Le client nous fournis
alors les procdures stockes idoines.
Dans le cas des ordres de couverture, j'ai besoin de procdures stockes pour grer un composant particulier, le
composant correspondant. Ce composant est constitu d'un champ pour le code et d'une combo box pour le libell. La
combo box fonctionne avec la frappe intuitive, c'est dire que l'utilisateur commence taper ce qu'il veut dans le
champ et la combo box proposera alors dans sa liste droulante tous les lments qui contiennent ce qui a t entr.
Par exemple, si l'utilisateur entre i, la combo box proposera tous les libells de correspondant contenant un i. Les
champs du code et du libell sont galement lis. Quand l'utilisateur entre un code, le libell correspondant, s'il existe,
s'affiche automatiquement et inversement, quand l'utilisateur choisit un libell, le code correspondant s'affiche
automatiquement. Le composant renvoie uniquement l'identifiant de l'lment entr. Cet identifiant est enregistr lors
de la cration d'un ordre de couverture et c'est lui qui sera utilis par la procdure stocke pour remplir le champ avoir
les bonnes valeurs quand l'utilisateur va aller consulter cet ordre de couverture.
Dclencheur :
J'ai mentionn l'existence d'une table qui stocke l'historique des statuts des ordres de couverture. Cette table
est alimente ds qu'un ordre de couverture est cr ou que son statut est modifi. Ces insertions s'effectuent de
manire automatique grce ce qu'on appelle en SQL un dclencheur (trigger en anglais). Lors de la cration ou mise
jour d'un ordre de couverture, le dclencheur va lancer automatiquement la procdure stocke qui va agir en parallle
sur la table de l'historique des statuts. Ainsi la cohrence et l'intgrit de la base de donnes sont conserves.
En plus de ces deux notions de SQL, l'cran fait galement appel aux instructions classiques SELECT, SELECT, et
UPDATE. A l'avenir, il y aura galement un lien avec l'interface de rglement qui se lancera ds qu'un ordre de
couverture et excut et il y aura aussi une gestion d'envoi de mail.
La ralisation de cet cran durer jusqu la fin de mon stage et encore il me manque certains lments pour
pouvoir le finaliser 100%.
4.3.5. Bilan
J'ai acquis beaucoup de connaissances en C# et SQL au cours des trois mois que j'ai pass sur la ralisation de
l'application.
Comme pour la ralisation de la maquette, quand c'est possible, nous nous basons sur du code qui a dj t
cod toujours dans l'optique d'avoir une application homogne. Rgulirement, des questions au niveau de l'interface
ou du fonctionnement ct serveur taient souleves. Nous nous runissions pour en discuter et se mettre d'accord, les
dveloppeurs, l'expert technique et le chef de projet, sur la solution mettre en place pour rsoudre ces problmes. Les
changements faire sont rarement des grosses modifications et en gnral a ne se voit pas sur l'interface, c'est juste le
fonctionnement internet qui est modifi afin de rendre l'application plus rapide par exemple.
Le dveloppement de l'application va se poursuivre, il y a une premire livraison faire fin septembre.
50
5. Conclusion
Je garderai un souvenir trs positif de ces six mois de stage. Jai pris normment de plaisir travailler chez
Vivris.
Le fait davoir intgr une quipe dingnieurs sur un projet de grande envergure ma permis davoir une vision
concrte sur la gestion et la ralisation dun projet. Grce ce projet, jai pu acqurir de nouvelles connaissances et
comptences en informatique. Les connaissances que jai acquises au cours de ma formation lINSA mont t utiles
pour madapter aux nouveaux langages de programmation utiliss pour le dveloppement de lapplication.
Ce projet ma montr limportance de la communication au sein dune quipe. Le but tant de raliser une
application cohrente, il est indispensable de communiquer et travailler de faon coordonne avec les autres
dveloppeurs. En informatique, il existe plein de faon de coder la mme chose do limportance de faire de points
rgulirement avec toute lquipe sur des aspects rcurrents dans lapplication. Il faut se mettre daccord sur la logique
de ralisation du code. Jai galement constat, encore une fois, limportance des commentaires dans du code
informatique.
Ce stage a confirm mon choix dvoluer dans le domaine de linformatique. Ma chef de projet et le directeur de
dpartement, mon tuteur, mont tmoign leur satisfaction lgard du travail que jai effectu au cours de mon stage.
De plus, la direction a confirm mon embauche en tant quingnieur au sein du groupe. Mon PFE aura servi de priode
dessai au cours de laquelle jai acquis les comptences ncessaires pour continuer. Je poursuivrai donc travailler sur
ce projet jusqu la fin de la ralisation.
51
Liens externes & bibliographie

Documentation relative au JavaScript :
http://enterprisewebbook.com/
http://fr.eloquentjavascript.net/contents.html
Documentation de la bibliothque ExtJS :

http://docs.sencha.com/extjs/4.2.1/
Documentation relative au Framework .Net, ASP.Net MVC, C# :

http://msdn.microsoft.com/fr-fr/
http://www.asp.net/mvc
http://www.siteduzero.com/informatique/tutoriels/apprenez-a-developper-en-c
52

ASP

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

ASP

Cargado por

Copyright:

Formatos disponibles

Dveloppement dune application Web

Date : du 4 mars 2013 au 30 aot 2013

Aurlia PAILLERET GE5S

Projet de Fin d'tudes

Aurlia PAILLERET GE5S

Projet de Fin d'tudes

Table des matires

Prsentation de lentreprise ........................................................................................................................................... 5

Vivris Systmes : ingnierie des systmes dinformations ........................................................................... 7

Vivris Intgration : intgration de systmes ................................................................................................. 8

Vivris ASR : administration systmes et rseau ............................................................................................ 8

Ingnierie et informatique technique : Vivris Technologie .......................................................................... 8

Prsentation du projet .................................................................................................................................................... 9

Prsentation du projet .................................................................................................................................... 9

Ralisation de la maquette ........................................................................................................................................... 13

JavaScript & ExtJS.................................................................................................................................................. 13

Larchitecture MVC ....................................................................................................................................... 15

Contexte et prsentation ........................................................................................................................................ 9

Prsentation de lapplication ........................................................................................................................ 16

Travail ralis ................................................................................................................................................ 18

Framework .Net, ASP.NET MVC et C#................................................................................................................... 28

Framework .Net ............................................................................................................................................ 28

ASP. NET MVC ............................................................................................................................................... 30

Structure de lapplication ............................................................................................................................. 31

Les restrictions de lutilisateur ...................................................................................................................... 33

Travail effectu ..................................................................................................................................................... 34

Auto-formation et tapes principales de ralisation dun cran.................................................................. 34

cran catgorie produit ................................................................................................................................ 35

cran conditionnement ................................................................................................................................ 38

Figure 1 : implantation du groupe Vivris

Aurlia PAILLERET GE5S

Figure 2 : chiffre d'affaire et effectif

Projet de Fin d'tudes

Figure 3 : structure du groupe Vivris

Aurlia PAILLERET GE5S

Projet de Fin d'tudes

1.2.1. Vivris Systmes : ingnierie des systmes dinformations

Dp. : Crdit Audio-Visuel

Figure 4 : organigramme de Vivris Systmes

Aurlia PAILLERET GE5S

Projet de Fin d'tudes

Vivris Systmes intervient diffrents niveaux :

Intgration des catalogues de produits

Intgration au systme dinformation et lERP existants

Lancement et hbergement du site

Suivi et analyse de vente

Aurlia PAILLERET GE5S

Projet de Fin d'tudes

Aurlia PAILLERET GE5S

Projet de Fin d'tudes

Au travers de ce projet, les objectifs sont de :

Experts mtier & support

Figure 5 : intervenants sur le projet

Aurlia PAILLERET GE5S

Projet de Fin d'tudes

Figure 6 : fonctionnement gnral de lapplication

Aurlia PAILLERET GE5S

Projet de Fin d'tudes

Phase de ralisation de la maquette de lapplication

Phase de dveloppement de lapplication

Aurlia PAILLERET GE5S

Projet de Fin d'tudes

3.1.JavaScript & ExtJS

Aurlia PAILLERET GE5S