Anda di halaman 1dari 118

Ecole Centrale Polytechnique Prive de Tunis

Dpartement : INFORMATIQUE

Projet de fin dtude Dveloppement dune application intranet de gestion des dossiers de fabrication

Raliser par : Bouazza Ferouk Classe : Informatique et multimdias Encadrer par : Mr OUERGHI Mohamed Entreprise daccueil : TIS Circuits

Anne universitaire : 2012 - 2013

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Table des matires


Liste des figures Liste des tables Ddicaces Remerciement Introduction gnrale Chapitre 1 : Etude de lexistant Prsentation de lorganisme daccueil 1.1 Prsentation de lEntreprise 1.2 Vision (2) Critique de lexistant 1.3 Les procdures de fabrication 1.1 Le dossier de fabrication Les solutions envisages Les solutions technologiques Conclusion Chapitre 2 : Phase dincubation I. Dfinition des acteurs 1. Besoins fonctionnels 2. Besoins non fonctionnels II. Prsentation des cas dutilisation 1. Diagramme de cas dutilisation initial 3. Affectation des priorits 2. Analyse des cas dutilisation prioritaires II. Maquette dinterface utilisateur 1. Interface login 2. Interface de laccueil BOUAZZA Ferouk 5 10 12 13 14 18 18 18 18 19 19 21 25 26 34 35 35 35 36 37 37 39 44 51 52 53 2

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

3. Interface de gestion des utilisateurs 4. Interface de gestion des dossiers 5. Palette de couleurs 6. Typographie Conclusion Chapitre 3 : Phase de llaboration Introduction I. Raffinement des cas dutilisations de deuxime priorit 1. Raffinement de cas dutilisation Grer les dossier de fabrication II. Analyse des cas dutilisation de deuxime priorit 1. Analyse de cas dutilisation : Grer les dossiers de fabrication 1. Conception des cas dutilisation de premire priorit 2. Conception des cas dutilisation de deuxime priorit Conclusion Chapitre 4 : Phase de construction Introduction I. Raffinement des cas dutilisation de troisime priorit 1. Raffinement de cas dutilisation : Afficher dossier II. Analyse des cas dutilisation de troisime priorit 1. Analyse de cas dutilisation : Afficher dossier 2. Analyse de cas dutilisation : Imprimer synoptique III. Conception des cas dutilisation de troisime priorit 1. Conception de cas dutilisation : Afficher dossier 2. Conception de cas dutilisation : Imprimer synoptique IV. Larchitecture de la base de donnes 1. Schma de la base de donnes

54 55 55 59 60 61 61 61 62 66 66 71 81 90 91 91 91 92 93 93 93 94 94 96 98 98

III. Conception des cas dutilisation de premire et deuxime priorit 71

2. Raffinement de cas dutilisation : Imprimer fichier de synoptique 92

BOUAZZA Ferouk

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

2. Description dtaill de schma de base de donnes V. Larborescence de lapplication Conclusion Chapitre 5 : Phase de Transition Introduction I. Modle de dploiement 1. Dtermination des possibilits de dploiement 2. Test de lapplication Conclusion Gnrale Bibliographie

99 103 104 105 105 105 105 106 116 118

BOUAZZA Ferouk

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Liste des figures


Figure 1: Logo TIS CIRCUITS Figure 2: Plan de ligne et dmarche de fabrication Figure 4: Les phases et les tapes de fabrication Figure 5: L'arborescence d'un dossier de fabrication Figure 6: L'arborescence parent du dossier de fabrication Figure 7: Les caractristiques d'un fichier de graphe synoptique Figure 8: Exemple du concept d'un fiche de graphe synoptique Figure 9: Les symboles graphiques et leurs significations Figure 10: Le systme des grilles de Twitter Bootstrap Figure 11: WAMP server ou EASY PHP? Figure 12: Diagramme de cas d'utilisation initial Figure 13: Cas d'utilisation Grer Les utilisateur de lapplication Figure 14: Traabilit MCA-MA Sidentifier Figure 15: Modle classe analyse S'identifier Figure 16: Diagramme de collaboration S'identifier Figure 17: Traabilit entre MCA-MC Grer les utilisateurs Figure 18: Modle de classe d'analyse Ajouter utilisateur Figure 19: Diagramme de collaboration Ajouter utilisateur Figure 20: Modle de classe d'analyse Supprimer utilisateur Figure 21: Diagramme de collaboration Supprimer utilisateur Figure 22: Modle de classe d'analyse Bannir utilisateur Figure 23: Diagramme de collaboration Bannir utilisateur Figure 24: Modle de classe d'analyse Modifier utilisateur Figure 25: Diagramme de collaboration Modifier utilisateur Figure 26: Modle de classe d'analyse Afficher utilisateur Figure 27: Diagramme de collaboration Afficher utilisateur 18 20 20 21 22 23 23 24 27 30 37 40 45 45 46 46 47 47 48 48 48 49 49 49 50 50

BOUAZZA Ferouk

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Figure 28: Modle de classe d'analyse Rechercher utilisateur Figure 29: Diagramme de collaboration Rechercher utilisateur Figure 30: Maquette de l'interface login Figure 31: Maquette de l'interface Accueil Figure 32: Maquette de l'interface gestion utilisateur Figure 33: Maquette de l'interface Gestion des dossiers Figure 34: Schma colorimtrique Figure 35: Palette des couleurs du corps Figure 36: Palette Message d'erreur et bouton bannir Figure 37: Palette Message succs et boutons d'envoi Figure 38: Palette Message de problme de et bouton suppression Figure 39: Palette Message info et bouton dbannir Figure 40: Palette titres, labels, Placeholders Figure 41: Couleur des liens Figure 42: Typographie Figure 43: Cas d'utilisation Grer les dossiers Figure 44: Traabilit entre MCA-MA Grer dossier Figure 45: Modle de classe Ajouter dossier Figure 46: Diagramme de collaboration Ajouter dossier Figure 47: Modle de classe Afficher dossier Figure 48: Diagramme de collaboration Afficher dossier Figure 49: Modle de classe Modifier dossier Figure 50: Diagramme de collaboration Modifier dossier Figure 51: Modle de classe Imprimer dossier Figure 52: Diagramme de collaboration Imprimer dossier Figure 53: Modle de classe Supprimer dossier Figure 54: Diagramme de collaboration Supprimer dossier Figure 55: Modle de classe Rechercher dossier Figure 56: Diagramme de collaboration Rechercher dossier BOUAZZA Ferouk

50 51 52 53 54 55 56 56 57 57 57 58 58 58 59 62 66 67 67 67 68 68 68 69 69 69 70 70 70 6

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Figure 57: Traabilit MC-MA S'identifier Figure 58: Diagramme de classe de conception S'identifier Figure 59: Diagramme de squence S'identifier Figure 60: Traabilit MC-MA Ajouter utilisateur Figure 61: Diagramme de classe de conception Ajouter utilisateur Figure 62: Diagramme de squence Ajouter utilisateur Figure 63: Traabilit MC-MA Modifier utilisateur Figure 64: Diagramme de classe de conception Modifier utilisateur Figure 65: Diagramme de squence Modifier utilisateur Figure 66: Traabilit MC-MA Bannir utilisateur Figure 67: Diagramme de classe de conception Bannir utilisateur Figure 68: Diagramme de squence Bannir utilisateur Figure 69: Traabilit MC-MA Supprimer utilisateur Figure 70: Diagramme de classe de conception Supprimer utilisateur Figure 71: Diagramme de squence Supprimer utilisateur Figure 72: Traabilit MC-MA Afficher utilisateur Figure 73: Diagramme de classe de conception Afficher utilisateur Figure 74: Diagramme de squence Afficher utilisateur Figure 75: Traabilit MC-MA Rechercher utilisateur Figure 77: Diagramme de squence Rechercher utilisateur Figure 78: Traabilit MC-MA Ajouter dossier Figure 79: Traabilit MC-MA Afficher dossier Figure 80: Diagramme de classe de conception Afficher dossier Figure 81: Diagramme de squence Afficher dossier Figure 82: Traabilit MC-MA Modifier dossier Figure 83: Diagramme de classe de conception Modifier dossier Figure 84: Diagramme de squence Modifier dossier Figure 85: Traabilit MC-MA Imprimer dossier BOUAZZA Ferouk

71 71 72 72 73 73 74 74 75 75 76 76 77 77 78 78 79 79 80 81 81 83 83 84 84 85 85 86 7

Figure 76: Diagramme de classe de conception Rechercher utilisateur 80

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Figure 86: Diagramme de classe de conception Imprimer dossier Figure 87: Diagramme de squence Imprimer dossier Figure 88: Traabilit MC-MA Supprimer dossier Figure 89: Diagramme de classe de conception Supprimer dossier Figure 90: Diagramme de squence Supprimer dossier Figure 91: Traabilit MC-MA Rechercher dossier Figure 92: Diagramme de classe de conception Rechercher dossier Figure 93: Diagramme de squence Rechercher dossier Figure 94: Diagramme de cas d'utilisation de troisime priorit Figure 95: Modle de classe d'analyse Afficher dossier Figure 96: Diagramme de collaboration Afficher dossier Figure 97: Modle de classe d'analyse Imprimer synoptique Figure 98: Diagramme de collaboration Imprimer synoptique Figure 99: Traabilit entre MC-MA Afficher dossier Figure 100: Diagramme de classe de conception Afficher dossier Figure 101: Diagramme de squence Afficher dossier Figure 102: Traabilit entre MC-MA: Imprimer synoptique Figure 104: Diagramme de squence Imprimer synoptique Figure 105: Schma de la base de donnes Figure 106: Arborescence de l'application Figure 107: Architecture 3-tiers Figure 108: Interface de connexion Figure 109: Interface de l'accueil (Vue administrateur) Figure 110: Interface d'accueil (Vue Membre) Figure 111: Interface de gestion des utilisateurs Figure 112: fonctionnalit gestion des utilisateurs Figure 113: Interface de gestion des dossiers Figure 114: Gestion des dossiers tape 2 BOUAZZA Ferouk

86 87 87 88 88 89 89 90 91 93 93 93 94 94 95 95 96 97 98 103 106 106 107 108 109 110 111 112 8

Figure 103: Diagramme de classe de conception Imprimer synoptique 96

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Figure 115: Gestion des dossiers tape 3 Figure 116: Gestion des dossiers tape 4 Figure 117: Gestion des dossiers tape 5

113 114 115

BOUAZZA Ferouk

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Liste des tables


Table 1 : Tableau comparatif WAMP/ EASY PHP (2013) Table 2: Affectation des priorits Table 3: Raffinement du sous cas d'utilisation Ajouter un utilisateur Table 4: Raffinement du sous cas d'utilisation Afficher un utilisateur Table 5: Raffinement du sous cas d'utilisation Afficher un utilisateur Table 6: Raffinement du sous cas d'utilisation bannir un utilisateur 32 39 41 42 42 43

Table 7: Raffinement du sous cas d'utilisation modifier un utilisateur 43 Table 8: Raffinement du sous cas d'utilisation rechercher un utilisateur 44 Table 9: Raffinement de sous cas d'utilisation ajouter dossier Table 10: Raffinement de sous cas d'utilisation Afficher dossier Table 11: Raffinement de sous cas d'utilisation Supprimer dossier Table 12: Raffinement de sous cas d'utilisation Imprimer dossier Table 13: Raffinement de sous cas d'utilisation Modifier dossier Table 14: Raffinement de sous cas d'utilisation Rechercher dossier Table 15: Raffinement de cas d'utilisation Afficher dossier Table 16: Raffinement de cas d'utilisation Imprimer fichier de synoptique Table 17: Structure de la table users Table 18: Structure de la table synoptics Table 19: Structure de la table steps Table 20: Structure de la table ref Table 21: Structure de la table phases Table 22: Structure de la table modif Table 23: Structure de la table instructions Table 24: Structure de la table families 92 99 100 100 101 101 101 102 102 63 63 64 64 65 65 92

BOUAZZA Ferouk

10

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Table 25: Structure de la table clients Table 26: Structure de la table categories

102 102

BOUAZZA Ferouk

11

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Ddicaces

A mes trs chers parents je vous dois ce que je suis aujourd'hui grce ALLAH puis votre amour, votre patience et vos innombrables sacrifices. Que ce travail, soit pour vous une petite compensation et reconnaissance envers ce que vous avez fait d'incroyable pour moi. Que Dieu, vous prserve et vous procure sant et longue vie afin que je puisse mon tour vous satisfaire. Bouazza Ferouk

BOUAZZA Ferouk

12

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Remerciement

Je tiens remercier profondment Mr OUERGHI Mohamed, pour son encadrement, ses conseils utiles, son soutien et surtout la confiance qu'il a plac en mon projet. Je voudrais aussi adresser mes sincres remerciements et ma profonde gratitude Monsieur KHILI Badie ingnieur produit de fabrication de m'avoir encadr tout au long de ma priode de stage, ainsi que pour ses prcieux conseils qui m'ont beaucoup clair. Je remercie galement Mr HMIDI Chaouki pour sa prcieuse aide, ses conseils ainsi que pour son soutien moral. Jadresse ainsi mes remerciements tous les enseignants de lcole polytechnique centrale prive de Tunis, dont on leurs adresse nos profondes reconnaissances, pour leurs efforts et aides. Enfin, je remercie, de tout cur, tous ceux qui ont contribu de prs ou de loin la ralisation de ce travail.

BOUAZZA Ferouk

13

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Introduction gnrale
Depuis que lhomme a fait son dcouvert rvolutionnaire de llectricit. Il a commenc de voir le monde dune autre manire. La nuit nest plus sombre, la vie est devenue plus facile. Lhomme commence innover de nouvelle machine qui utilise lnergie lectrique. La production a dvelopp dans tout les secteurs : Agriculture, industrie et divertissement Le dcouvert de llectricit a guid lhomme pour de nouveaux dcouverts. Les tats logiques et le langage binaire sont lorigine des systmes automatis et programmable y compris les systmes informatiques, la tlcommunication, lindustrie et le transport. Qui a fait du monde un petit village. Llectricit et les machines lectriques sont devenues essentielles et irremplaables. Et ce jour, llectricit nous fascine encore. Tous les systmes lectroniques sont bass sur deux lments ncessaires : - Le source dnergie lectrique qui peut tre transform et produit de nimporte quel type dnergie. - Le circuit lectronique qui permet au courant de circuler, des cbles ou intgrs, fabriqus dune matire conductrice, gnralement en cuivre. - Les composants lectroniques qui permettent de raliser des fonctions lectroniques. En Tunisie, L'industrie manufacturire lectronique et lectrique enregistre une croissance continue depuis les annes 1990 et qui suscite l'intrt d'un certain nombre d'investisseurs internationaux, est rapidement en passe de devenir l'une des forces motrices de l'conomie du pays.

BOUAZZA Ferouk

14

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

En 2006, le secteur reprsentait environ 20% de l'ensemble des exportations tunisiennes qui s'levaient hauteur de 11,6 milliards de dollars. Les ventes l'tranger ont enregistr une progression nettement suprieure la croissance du march intrieur de 12,6% en moyenne. Les ingnieurs et les spcialistes de ce domaine comme tous les autres domaines ont besoin des outils informatiques ncessaires afin dautomatiser le travail et doptimiser le produit du cot qualit et quantit. Puis ce que la fabrication nest pas arbitraire, chaque produit besoin dtre bien planifi et valu. Ce qui ncessite un stade pr-production et post-production. Au niveau de la pr-production, le client demande la fabrication dun produit. Il commence par envoyer les documentations ncessaires. Aprs laccord, un staff des ingnieurs commence prparer un dossier associ au produit. Le dossier comprend toutes les informations techniques ncessaires la fabrication tel que ltat initiale de fabrication, les plans, les phases et les tapes de fabrication, les instructions de chaque tape, les matires ncessaires la fabrication, le dosage En Tunisie, les ingnieurs utilisent encore des mthodologies et des outils de travail traditionnel tel que le pack de Microsoft office afin de grer se type de donne. Les ingnieurs hritent lexprience la mthodologie et les outils de travail mais ils nessaient pas de suivre les nouveauts technologiques ce niveau, cause du rythme rapide du travail. Cela provoque laccumulation de travail, la perte des marchs et des difficults dorganisation. De plus, la cration et la gestion des dossiers de prproduction sont deux tches ennuyantes et difficiles en utilisant les outils traditionnels. Heureusement, les ingnieurs ont commenc dernirement

BOUAZZA Ferouk

15

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

rviser la mthodologie et les outils en pensant lautomatisation des processus et les outils ddis en profitant des rseaux intranet. Dans ce cadre vient notre projet qui a comme objectif de dvelopper une application intranet de gestion des dossiers de fabrication, qui sera une application 3-tiers ddie la cration, gestion et archivage des dossiers de fabrication. Lapplication profite des technologies de dveloppement web, fonctionnelles et interactives ce qui rend lutilisation plus facile et amusant, et ceci amliore le rapport cot-efficacit, ce qui est important pour laugmentation de la quantit et loptimiser la qualit du produit. Pour bien grer notre projet on a choisi le processus unifi comme processus de dveloppement. En effet, le processus unifi est une dmarche, qui associe au langage UML, permet d'automatiser un systme d'information de la conception la mise en uvre de lapplication. Cest une mthode gnrique, itrative et incrmentale, pilote par des cas dutilisation et centre sur larchitecture. Larchitecture fonctionnelle de lapplication est 3-tiers, afin davoir une scurit optimale en dcomposant lapplication en 3 couches : La couche prsentation (linterface client), la couche mtier (le script et les fonctions), la couche accs aux donnes (la base de donne et le stockage). En ce qui concerne limplmentation, on a choisit lenvironnement du dveloppement WAMP server qui est un package de technologie de dveloppement web (internet/intranet) et qui rassemble les technologies APACHE server, le systme de gestion des bases de donnes MYSQL, et le BOUAZZA Ferouk 16

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

langage de programmation web compil PHP. En effet, le nom WAMP est une abrviation (Windows Apache MySQL PHP), il est disponible pour tous les systmes dexploitation sous dautre nom tel que MAMP (Pour mac os), LAMP (Pour linux), dont WAMP est la version Windows du package. Notre travail est organis de cette manire : - Chapitre 1: Etude de lexistant - Chapitre 2 : Phase dincubation - Chapitre 3 : Phase dlaboration - Chapitre 4 : Phase de construction - Chapitre 5 : Phase de transition.

BOUAZZA Ferouk

17

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Chapitre 1 : Etude de lexistant


Dans ce chapitre, nous allons prsenter la socit qui nous accueille au cours de notre stage, puis, on prsente les lacunes et les problmes des systmes existants enfin comprendre la solution propose.

Prsentation de lorganisme daccueil


1.1 Prsentation de lEntreprise

Figure 1: Logo TIS CIRCUITS

TIS Circuits Figure1 est n sur le site de la Soukra (Tunisie) au sein du groupe SATELEC. Reprise en 2002 par Sagem, lusine devient rapidement un fleuron de lindustrie locale. En 10 ans dexistence, le site de TIS Circuits sest dvelopp et sest construit un savoir-faire indniable dans le secteur de la domotique et de lnergie grce lappartenance successive des grands groupes industriels (Sagem - Safran - Sagemcom). TIS Circuits se positionne aujourdhui comme un acteur majeur de la sous-traitance lectronique lowcost au Maghreb (1).

1.2 Vision (2)


TIS Circuits recherche avant tout le succs de ses clients. Grce au travail dquipe, lorientation client et la volont de vouloir rpondre toujours au besoin, que TIS Circuits sorganise au quotidien pour BOUAZZA Ferouk 18

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

accompagner de lindustrialisation au produit fini, jusqu la livraison, en faisant preuve de ractivit et de flexibilit pour rpondre toujours mieux aux exigences des ses clients (2).

Critique de lexistant
Pour mieux comprendre notre systme on a pass notre stage dans le bureau de produit de fabrication situ dans latelier et qui surplombe aux lignes de fabrication, afin dobserver tout les tapes de fabrication, les difficults et les problmes

1.3 Les procdures de fabrication


Les procdures de fabrication se diffrent dun produit un autre. Le processus de fabrication est compos de trois phases principale CMS, MAN, INT Figure 2 . La phase CMS est la phase de prparation de la carte lectrique. La phase MAN est la phase du parc manuelle o vient lintervention manuelle directe des personnels pour prparer les composants lectriques et prparer la carte lectrique pour la phase suivante. La phase INT est la phase de lintgration des composants lectriques et cblage pour terminer la fabrication et cette phase finale ce termine par lemballage du produit.

BOUAZZA Ferouk

19

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Figure 2: Plan de ligne et dmarche de fabrication Les phases de fabrication se composent de plusieurs tapes figure 3 . Pour chaque tape, il existe une fiche dinstruction qui cite les instructions suivies pour achever ltape et une fiche de contrle qui contient un suivi de qualit du produit et de ltat des machines pour garantir la continuit du travail sans panne ou dfaut technique. Les tapes de fabrication peuvent se rpter plusieurs fois pour un produit avec des diffrentes instructions tel que la pose et les faces grs.

Figure 3: Les phases et les tapes de fabrication

BOUAZZA Ferouk

20

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

1.1 Le dossier de fabrication


Un dossier de fabrication, cest un dossier qui rassemble tout les fichiers relier un produit. Le dossier de fabrication se compose de 3 dossiers qui portent le nom des phases de fabrication et un fichier de synoptique qui reprsente graphiquement les tapes de production de chaque produit Figure 4 . Dans les trois dossiers (CMS, MAN, INT), on trouve les fiches dinstruction reli au tapes de fabrication de chaque phase.

Figure 4: L'arborescence d'un dossier de fabrication Le dossier de fabrication puisquil est reli chaque produit, il portent la rfrence du produit. Un dossier de fabrication existe dans larborescence reprsente dans Figure 5 .

BOUAZZA Ferouk

21

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Figure 5: L'arborescence parent du dossier de fabrication Sachant quil existe actuellement environ 31 000 dossier de fabrication et le nombre augmente presque chaque semaine. Comme on a cit prcdemment, un dossier de fabrication est constitu de 3 dossiers qui portent le nom des 3 phases de fabrication et un fichier de graphe synoptique. Un fichier synoptique est une reprsentation graphique des procdures de fabrication. Chaque page du synoptique reprsente une phase. Le fichier de synoptique est caractris par : Le client, la catgorie de la carte lectrique, la famille de la carte lectrique, la rfrence de la carte lectrique, lINDICE de modification du synoptique, la date de cration, les dates de modification.

BOUAZZA Ferouk

22

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Figure 6: Les caractristiques d'un fichier de graphe synoptique Les caractristiques Figure 6 client, catgorie, famille et rfrence sont relis au produit. Les autres caractristiques indice, cration et modification sont reli au synoptique. Puis ce que le synoptique change de temps en temps pour optimiser le produit et la fabrication. Selon les changements, un indice alphabtique relier au fichier de synoptique incrmente de A Z. La date de cration est les date de modification du fichier synoptique dfinissent lincrmentation de lindice. Afin de suivre ltat davancement des produits. La modification du synoptique est une tche critique, alors les date de cration et dernire modification doivent tre stocker, avec lutilisateur qui fait les modification.

Figure 7: Exemple du concept d'un fiche de graphe synoptique BOUAZZA Ferouk 23

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Comme on observe dans le Figure 7 un fichier de graphe synoptique se compose de : Le header : Contient le nom et le logo du client, le titre du document, la pagination et le nom du projet. Le body : Dcompos horizontalement selon les tapes de fabrication. Verticalement, le corps est compos de 3 parties : Documentation et outils de travail relis chaque tape, le symbole graphique qui reprsente ltape et le nom de ltape, les moyens de surveillance. Le footer : Contient un tableau des indices dvolution, la date de lvolution et la nature de lvolution. Au dessous, un tableau ddi au visa des services et approbation. Les symboles reprsents dans Figure 8 sont utiliss dans la prparation du graphe synoptique.

Figure 8: Les symboles graphiques et leurs significations A partir de mes observations et mon exprience personnelle, la gestion des dossiers de fabrication manuellement tait une tche difficile. Utiliser un systme bas sur un ensemble des Fichiers Excel lie entre eux par des liens

BOUAZZA Ferouk

24

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

externe qui pointe sur les documentations ce qui reprsente pas mal dobstacles tels que : - Difficult de trouver et atteindre les fichiers demands - Risque de perte - Risque de modification - Mal organis - Processus lent et ennuyant - Une grande espace de stockage (des fichiers semblables se rpte) - Problme de rappelle. Do les besoins de notre application sont de fournir des solutions ses problmes.

Les solutions envisages


Il est trs important de trouver des solutions simples pratiques et fiables qui rpondent nos besoins afin de fixer les problmes relis au processus de gestion des dossiers de fabrication. Notre projet devra gnrer larborescence des dossiers de fabrication dynamiquement, et gnre le fichier du synoptique au format PDF cibl limpression. Do notre application doit : - Facilit le processus de gestion (Cration et manipulation) des dossiers de fabrication en fournissant un systme qui automatise le processus, Interactive et claire. - Automatisation du systme de gnration des fichiers synoptiques et cration des dossiers de fabrication (Rcolte dinformation et gnration automatique). - Fournir un moteur de recherche afin datteindre les fichiers rapidement et prcisment. - Optimisation de lorganisation des dossiers et des fichiers, en vitant la rptition des fichiers et dossiers identiques.

BOUAZZA Ferouk

25

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

- Un systme de gestion des utilisateurs du systme. - Systme dauthentification scuris, multi niveaux et multi privilges Afin de protger laccs et la manipulation des fichiers et des dossiers. - Un systme darchivage des dossiers et des fichiers synoptiques. - Un systme qui dtecte la modification des fichiers synoptiques bas sur la comparaison entre la date de cration et la date de la dernire modification.

Les solutions technologiques


Nos choix pour les solutions technologiques ont t bass sur les besoins fonctionnels et non fonctionnels de notre application. 1.3.1 Twitter Bootstrap Twitter Bootstrap (3) est une collection (Open source) d'outils utile la cration des thmes des sites web et applications web. Twitter Bootstrap un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation et autre lments interactifs, ainsi que des extensions JavaScript en option. projet. future. Twitter Bootstrap propose une solution qui satisfait les besoins visuels du projet. Un outil qui aide au niveau de lorganisation des dossiers du Un Framework pour faciliter la manipulation du projet la projet, bien que lorganisation de linterface graphique. Twitter Bootstrap est Open Source. Twitter Bootstrap propose la solution HTML5/CSS3 et Jquery,

Ce qui va nous aider aprs au niveau de la fonctionnalit et interactivit du

BOUAZZA Ferouk

26

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Twitter Bootstrap est populaire, stable et utiliser dans la plupart Dans notre charte graphique on a besoin dun design claire,

des applications internet/intranet. propre, interactif et fonctionnel et cest ce que propose Twitter Bootstrap. Le Framework Twitter Bootstrap puis ce quil dispose dun ensemble de styles, il sera adapt et utilis pour la cration du thme graphique de notre application. Les pages de notre application seront composs de tableaux et des formulaires.

Figure 9: Le systme des grilles de Twitter Bootstrap Twitter Bootstrap utilise le systme de grille Figure 9 pour la conception graphique ce qui aide organiser les lments de la page facilement avec les class (offset/span). Et ce qui donne une conception responsive adaptable sur toutes les dimensions des moniteurs, et des diffrents appareils : Twitter Bootstrap dcompose linterface de largeurs 940 pixels en 9 colonnes. Pour utiliser lunit de lanatomie de grille de Twitter Bootstrap au niveau du Photoshop, il faut commencer par dcouper linterface de 940 pixels de largeur en 9 parties.

BOUAZZA Ferouk

27

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

1.3.2 JQuery / jQuery UI JQuery est une bibliothque JavaScript libre qui porte sur l'interaction entre JavaScript (comprenant Ajax) et HTML, et a pour but de simplifier des commandes communes de JavaScript. La premire version date de janvier 2006 (4). La bibliothque contient notamment les fonctionnalits suivantes : - Parcours et modification du DOM avec les slecteurs. - vnements. - Effets visuels et animations. - Manipulations des feuilles de style en cascade (ajout/suppression des classes, dattributs). - Ajax pour les requtes (POST, GET, REQUEST). - Plugins et extension. - Utilitaires (version du navigateur). 1.3.3 PHP PHP (5) la technologie de cration des pages web dynamique, est le langage de script le plus rpandu. Dans sa 5me version, PHP dispose les fonctionnalits orient objet, ce qui reprsente un bond en avant dans le domaine de dveloppement web et ce qui a tourn PHP en une plateforme plus quun simple langage de dveloppement web. PHP est un descendant du langage C bas sur lenvironnement client/serveur peut tre li avec une base de donnes et mlang simplement avec HTML/CSS et JAVASCRIPT. - PHP est une solution open source. - PHP est compatible avec nos choix graphiques et interactifs. - PHP est dynamique et compatible avec les bases de donnes. - PHP dispose des fonctions utiles la gestion des dossiers. - PHP5 dispose des fonctions utiles la gnration des PDF. - PHP5 facilite lorganisation des fichiers du projet.

BOUAZZA Ferouk

28

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

- PHP5 est un langage systmatique qui rduit le nombre des lignes du script, de gagner du temps et de faciliter la modification la future. - PHP5 permet de gagner de l'espace et de la mmoire. - PHP5 est modlisable puis ce quelle est bas sur la conception oriente objet. PHP5 est un langage dynamique, et sadapte avec les bases de donnes. Donc PHP5 sera utilis afin de lier notre application une base de donnes. Il propose des fonctions de gestion des dossiers, des fonctions pour la gnration des fichiers PDF. PHP5 donc est utile la gestion des dossiers de fabrication et la gnration des fichiers PDF de synoptique. 1.3.4 MYSQL MySQL (6) est un systme de gestion des bases de donnes. Le langage de requte domine depuis des annes le web. Surtout aprs lapparition des serveurs locaux open source, MySQL se transforme dun simple systme de gestion des bases de donnes une plateforme de gestion de base de donnes qui est la fois facile, disponible et efficace. MySQL, le jumeau de PHP est utilis avec la plupart des sites web (internet/intranet) qui utilise ce langage de script. Il dispose de plusieurs moteur de base de donnes tel que : MyISAM, innoDB... - MySQL est le systme de gestion le plus utilis. - MySQL est un systme stable et compatible avec notre langage de script. - MySQL et PHP sont soumis sous la forme dun package propos par les logicielles des serveurs. - MySQL permet la passation des requtes par le langage script PHP.

BOUAZZA Ferouk

29

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Dans nos objectifs du projet, on veut stocker les informations des utilisateurs du systme, les informations propos de nos fichiers synoptiques. On veut insrer, modifier et supprimer dans et de notre base de donnes. Donc MySQL sera une bonne solution pour notre application. 1.3.5 Environnement du dveloppement WAMP SERVER ou EASY PHP

Figure 10: WAMP server ou EASY PHP? WAMP (7) server ou EASYPHP (8) Figure 10 ? Ctait la question. Les deux environnements de dveloppement sont les leaders dans leur domaine, depuis des annes une forte concurrence se droule entre cest deux gants. Le serveur WAMP appartient une famille des serveurs (XAMPP, LAMP (9), MAMP (10), WAMP). Les environnements de dveloppement proposent la mme solution pour diffrents systmes dexploitations. WAMP, MAMP, LAMP et XAMPP sont la mme plate-forme pour des diffrents systmes dexploitation. EasyPHP tait une rvolution quand il est apparu, mais il n'a pas su s'adapter et voluer au rythme de ses concurrents apparus par la suite. Mais en vrit il est compltement dpass et inapte concurrencer ses rivaux. Il ne doit sa survie qu' son aura historique. WAMP a l'avantage d'tre plus ergonomique et de faciliter certains aspects comme le chargement dynamique de modules, ou encore l'installation de plusieurs Apache, PHP et MySQL avec la possibilit de choisir celui qu'on veut d'un simple click.

BOUAZZA Ferouk

30

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

WAMP aussi a l'avantage d'tre plus adaptatif, et d'avoir une interface qui permet de visualiser davantage de d'aspects du serveur localhost, et permet aussi dans son pack d'avoir le serveur FTP, le serveur Mail et quelques autres. Et il existe en version portable, aussi il est disponible pour plusieurs OS. Personnellement j'ai opt pour WAMP car j'avais besoin d'avoir plusieurs versions de PHP. De plus jutilise un systme dexploitation (Mac os x) diffrent de celui utiliser chez le client (Windows). Je suis habitu utiliser la famille WAMP dans mes projets, et surtout lorsque je vois les avis des utilisateurs qui encourage lutiliser. Cela n'empche pas l'existence des petits bugs de temps en temps qui sont rapidement fixs laide des mises jours proposs par WAMP. Par contre, les avis des utilisateurs de EasyPHP plaigne toujours des Bug et problme surtout aprs le transfre du projet au client, qui peut-tre utilise un autre systme dexploitation que celui utiliser lors du dveloppement. Et dans ce cas on na pas de choix puis ce que EasyPHP existe seulement pour Windows. On a choisis WAMP server comme environnement de dveloppement.

BOUAZZA Ferouk

31

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

ou Tableau comparatif WAMP Apache MySQL PHP PhpMyAdmin XDebug Composant Mise jour Pour Windows Pour Linux Pour Mac os x Version 2.4.2 Version 5.5.24 Version 5.4.6 Version 3.5.10 Version 2.1.2 Oui Oui Oui (WAMP) Oui (LAMP) Oui (MAMP) EASYPHP Version 2.4.2 Version 5.5.2 Version 5.4.6 Version 3.5.5 Version 2.1.2 Oui Oui Oui Non Non

Table 1 : Tableau comparatif WAMP/ EASY PHP (2013) Dans la Table 1 une comparaison entre WAMP server et EASYPHP, les donnes mentionne date de Mai 2013. WAMP server WAMP, abrviation de : Windows, Apache, MySQL, PHP. De son nom est un package qui rassemble tout les technologies suivantes : Windows : Veut dire que WAMP est compatible avec Windows, il existe dautre version de WAMP compatible avec dautre systme dexploitation tel que MAMP pour mac os et LAMP pour linux Apache : Le serveur http permet de rependre au requte envoyer dun client (navigateur web). Apache est le serveur web le plus populaire du World Wide Web. MySQL : Notre choix pour le systme de gestion des bases de donnes. PHP : Notre choix pour le langage des scripts.

BOUAZZA Ferouk

32

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Tout simplement le package WAMP serveur rassemble les technologies de cration de notre environnement de dveloppement. WAMP serveur sera utile la cration de notre environnement de dveloppement de lapplication.

1.3.6 MX Graph MxGraph (11) est une bibliothque de dessin graphique en JavaScript labore par JGraph. MxGraph est un outil open source qui nous donne la possibilit de dessiner des diagrammes laide des nouvelles technologies HTML5 canvas et la bibliothque Jquery. MxGraph reprsente une solution qui est dune part pratique et fonctionnel, et dautre part stable et open source. De plus, mxGraph est compatible avec nos choix graphiques et interactifs (Twitter Bootstrap), puis ce quil utilise les mmes technologies (HTML5, CSS3 et Jquery). Lun des objectifs du projet est de gnrer et manipuler un dessin synoptique. Le dessin synoptique est un diagramme graphique qui reprsente un systme ou des informations. Donc, mxGraph reprsente une solution utile notre systme de gnration des dessins synoptiques. 1.3.7 HTML2PDF API HTML2PDF (12) est un API (interface de programmation) en PHP qui propose une solution pour convertir les Balises pages HTML en PDF. Cette librairie a t conue pour grer principalement les TABLE imbriques afin de gnrer des factures, bons de livraison, et autres documents officiels. - HTML2PDF est open source. - HTML2PDF est utilis la gnration des fichiers PDF partir dun code HTML. - HTML2PDF est rdig en PHP.

BOUAZZA Ferouk

33

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

- HTML2PDF est stable et il gre pratiquement toutes les balises HTML. Lun de nos objectifs est de gnrer un fichier PDF qui contient le dessin synoptique partir dun code HTML, et cest ce que propose exactement HTML2PDF.

Conclusion
Dans ce chapitre on a prcis le cadre de notre projet, la nature de lexistant, les solutions proposes et les rsultats attendre ainsi que les dfis surmonter.

BOUAZZA Ferouk

34

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Chapitre 2 : Phase dincubation


C'est la premire phase du (Processus unifi). Il s'agit de dlimiter la porte du systme, c'est--dire identifier les acteurs, lever les ambiguts sur les besoins et les exigences ncessaires. En outre, une identification des principaux cas dutilisation accompagne dune description gnrale est modlise dans un diagramme de cas dutilisation afin de dfinir le primtre du projet. Il est possible, ce stade, de faire raliser des maquettes sur une partie des cas dutilisation identifis.

I.

Dfinition des acteurs


Les acteurs dun systme sont les entits externes ce systme qui

interagissent (saisie de donnes, rception dinformation, ...) avec lui. Les acteurs sont donc lextrieur du systme et dialoguent avec lui. Donc les acteurs qui interagissent avec notre systme sont : - Le membre : Le membre qui possde dun compte mais quil na pas les privilges de gestion. Il peut uniquement voir le contenu sans pouvoir modifier. Il possde dun accs limit aprs une authentification russite. - Ladministrateur : cest lacteur qui a le pouvoir de grer la totalit de lapplication aprs une authentification russite.

1. Besoins fonctionnels
Les besoins fonctionnels sont les diffrentes fonctionnalits offertes par le systme pour tous les utilisateurs finaux. Le membre : - Voir les dossiers existants. - Imprimer les fiches synoptiques.

BOUAZZA Ferouk

35

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Ladministrateur : - Grer les utilisateurs de lapplication. - Grer les dossiers de fabrication.

2. Besoins non fonctionnels


Les exigences non-fonctionnelles rpondent des besoins transversaux aux besoins mtiers on distingue : Pour la scurit, personne ne peut accder laccueil de lapplication sil ne possde pas de compte dutilisateur. De plus, laccs aux pages de gestion est interdit aux comptes qui ne possdent pas des privilges dadministration. Certain lments du menu et des pages ne saffiche que pour les comptes administrateurs. Enfin, Lapplication doit tre protger contre les failles de scurit reconnus. Pour la performance, lapplication doit charger les pages et affiche les informations ncessaires le plus tt possible et elle doit supporter un grand nombre de connexion simultan. Pour la fiabilit, Lapplication doit afficher des donns fiable au utilisateur. Pour lagronomie, La densit d'lments sur les crans, la disposition et les couleurs, lInterface Utilisateur. Lapplication doit sadapter aux diffrentes dimensions des crans. Pour lextensibilit, Le systme doit tre extensible par dautres fonctionnalits et des modules.

BOUAZZA Ferouk

36

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

II. Prsentation des cas dutilisation


1. Diagramme de cas dutilisation initial
Voir les dossiers de fabrication

Membre
Imprimer les Fichiers de synoptiques
<

inc

Gestion des dossiers de fabrication

< in

Gestion des utilisateurs de lapplication

Administrateur

Figure 11: Diagramme de cas d'utilisation initial Un diagramme de cas d'utilisation est une collection de scnarios dcrivant la faon dont un acteur utilise le systme pour atteindre ces objectifs. Un scnario est une squence d'actions spcifiques et les interactions entre l'acteur et le systme en lui-mme. 1.1 Description dtaill des cas dutilisations - Sidentifier : Ce module permet ladministrateur et les membres daccder Si aux fonctionnalits est un spcifiques membre de lapplication. lutilisateur certain

fonctionnalits et lments de lapplication seront dtenus. - Grer les dossiers de fabrication : Ce module permet ladministrateur de crer les dossiers de fabrication suivants BOUAZZA Ferouk 37

<

in

cl

ud

>

<
c

inc
lud
> lude

lud e >
e >

Sidentier

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

larborescence mentionn dans Figures 5 et Figure 4 puis gnrer les fichiers de graphe synoptique reprsent dans le Figure 7 avec les symboles de Figure 8 au format PDF compos de 3 pages dont chaque page reprsente une phase de fabrication. Lors de cration du fiches synoptiques et dans les cases ddi au (Moyen de surveillance) et (Documentation/outils de travail) de chaque phase Figure 7 on fournit des champs de chargement des fichiers multiple afin de charger les fichiers dinstruction et les moyens de surveillance dans les dossiers de phase suivant larborescence Figure 4 et imprimant les noms des fichiers dans les cases mentionnes. - Grer les utilisateurs de lapplication : Ce module permet ladministrateur dajouter, modifier, bannir ou supprimer un utilisateur de lapplication. Les administrateurs uniquement peuvent ajouter des utilisateurs, il ny a pas de module pour inscription puisque lapplication est destine lutilisation interne dans le rseau intranet de lentreprise. Donc les demandes de lutilisation de lapplication peuvent tre gr directement pour des raisons de scurit. Les administrateurs peuvent donnes le rle dadministration aux autres membres, ajouter des comptes membres ou administrateurs, bannir des comptes membres ou des administrateurs, modifier les informations lier des comptes membres ou des administrateurs, supprimer des comptes membres ou des administrateurs. Exceptionnellement, un seul compte administrateur ne peut tre gr que par lui mme pour des raisons de scurit. Afin de faciliter la tche de gestion, on va fournir un moteur de recherche qui facilite de trouver les utilisateurs existants.

BOUAZZA Ferouk

38

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

- Voir les dossiers de fabrication : Ce module permet ladministrateur et les membres de contrler ltat des dossiers existants (termin ou Non-termin) de voir les caractristiques de chaque dossiers Figure 6 et de voir le contenu de chaque dossier de fabrication. - Imprimer les fichiers de synoptique : Permet ladministrateur et aux membres et au utilisateurs dimprimer les synoptiques existants.

3. Affectation des priorits


Lobjectif de cette activit est lattribution dordre de ralisation des cas dutilisation selon la priorit. Table 2 prsente les cas dutilisation de notre application et la priorit de chaque cas.
Numro 1 2 3 4 5 Cas dutilisation Sidentifier Acteur Membre, Administrateur 3 3 1 2 Voir les dossiers de fabrication Grer les utilisateurs de lapplication Grer les dossiers de fabrication Administrateur Membre Administrateur Priorit 1

Imprimer les fichiers de synoptique Membre

Table 2: Affectation des priorits 1.1 Le raffinement du cas dutilisation : Grer les utilisateurs de lapplication Grer les utilisateurs de lapplication contient les sous cas dutilisation suivants : - Ajouter un utilisateur BOUAZZA Ferouk 39

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

- Supprimer un utilisateur - Afficher un utilisateur - Bannir un utilisateur - Modifier un utilisateur - Rechercher un utilisateur
Ajouter un utilisateur

Afcher un utilisateur
< extend >
< extend >

Supprimer un utilisateur
Administrateur

< extend >

< extend >

Bannir un utilisateur

Modier un utilisateur

Rechercher un utilisateur

Figure 12: Cas d'utilisation Grer Les utilisateur de lapplication

Le diagramme de Figure 13 illustre toutes les fonctionnalits offertes par le systme pour ladministrateur afin de grer les utilisateurs.

BOUAZZA Ferouk

40

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

1.1.1 Le raffinement du sous cas dutilisation : Ajouter un utilisateur Cas dutilisation : Acteur : Pr-condition : Post-condition : Description : Ajouter un utilisateur Administrateur Ladministrateur authentifi et l'interface gestion des utilisateurs active Utilisateur ajout
Ladministrateur saisie les informations ncessaires de lutilisateur. Ladministrateur click sur ajouter Le system vrifie les informations et affiche linterface appropri

Exception :

En cas derreur le systme affiche le message appropri

Table 3: Raffinement du sous cas d'utilisation Ajouter un utilisateur

BOUAZZA Ferouk

41

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

1.1.2 Le raffinement du sous cas dutilisation : Afficher un utilisateur Cas dutilisation : Acteur : Pr-condition : Post-condition : Description : Afficher un utilisateur Administrateur Ladministrateur authentifi et l'interface gestion des utilisateurs active Utilisateur Afficher
Ladministrateur choisit lutilisateur Afficher. Ladministrateur click sur le nom de lutilisateur. Le system Afficher les informations de lutilisateur.

Exception :

En cas derreur le systme affiche le message appropri

Table 4: Raffinement du sous cas d'utilisation Afficher un utilisateur 1.1.3 Le raffinement du sous cas dutilisation : Supprimer un utilisateur Cas dutilisation : Acteur : Pr-condition : Post-condition : Description : Supprimer un utilisateur Administrateur Ladministrateur authentifi et l'interface gestion des utilisateurs active Utilisateur supprim
Ladministrateur choisit lutilisateur Afficher. Ladministrateur click sur le nom de lutilisateur. Le system Afficher les informations de lutilisateur.

Exception :

En cas derreur le systme affiche le message appropri

Table 5: Raffinement du sous cas d'utilisation Afficher un utilisateur

BOUAZZA Ferouk

42

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

1.1.4 Le raffinement du sous cas dutilisation : Bannir un utilisateur Cas dutilisation : Acteur : Pr-condition : Post-condition : Description : Bannir un utilisateur Administrateur Ladministrateur authentifi et l'interface gestion des utilisateurs active Utilisateur banni
Ladministrateur choisit lutilisateur Afficher. Ladministrateur click sur le nom de lutilisateur. Le system Afficher les informations de lutilisateur.

Exception :

En cas derreur le systme affiche le message appropri

Table 6: Raffinement du sous cas d'utilisation bannir un utilisateur

1.1.5 Le raffinement du sous cas dutilisation : Modifier un utilisateur Cas dutilisation : Acteur : Pr-condition : Post-condition : Description : Modifier un utilisateur Administrateur Ladministrateur authentifi et l'interface gestion des utilisateurs active Utilisateur modifi
Ladministrateur choisit lutilisateur Afficher. Ladministrateur click sur modifier devant le nom de lutilisateur appropri. Le system Afficher les informations de lutilisateur.

Exception :

En cas derreur le systme affiche le message appropri

Table 7: Raffinement du sous cas d'utilisation modifier un utilisateur

BOUAZZA Ferouk

43

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

1.1.6 Le raffinement du sous cas dutilisation : Rechercher un utilisateur Cas dutilisation : Acteur : Pr-condition : Post-condition : Description : Rechercher un utilisateur Administrateur Ladministrateur authentifi et l'interface gestion des utilisateurs active Utilisateur(s) trouv(s)
Ladministrateur saisie les mots cl ou choisit Rcemment ajouts ou Banni . Ladministrateur appuyer sur rechercher. Le systme recherche et affiche les rsultats.

Exception :

En cas derreur le systme affiche le message appropri

Table 8: Raffinement du sous cas d'utilisation rechercher un utilisateur

2. Analyse des cas dutilisation prioritaires


2.1 Dfinition de lanalyse L'objectif de l'analyse est de mieux comprendre les besoins et les exigences du client. Il sagit de livrer des spcifications pour permettre de choisir la conception de la solution. Un modle d'analyse livre une spcification complte des besoins issus des cas dutilisation et les structures sous une forme qui facilite la comprhension (scnarios), la prparation (dfinition de l'architecture), la modification et la maintenance du futur systme. Il s'crit dans le langage des dveloppeurs et peut tre considr comme une premire bauche du modle de conception.

BOUAZZA Ferouk

44

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

2.2 Modle danalyse des cas dutilisations prioritaires 2.2.1 Lanalyse du cas dutilisation: Sidentifier a. Traabilit entre MA et MCA : Sidentifier

S'identier (from use case view)

Sidentier

< participate > < participate > < participate >

UI identier

Gestion didentication

user

Figure 13: Traabilit MCA-MA Sidentifier b. Modle de classe danalyse : Sidentifier

Utilisateur

UI identier

Gestion didentication

user

Figure 14: Modle classe analyse S'identifier

BOUAZZA Ferouk

45

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

c. Diagramme de Collaboration : Sidentifier


1: Saisir login et password 2: Select Rappeler moi 3: btn_login_click 4: PEC_verication(login,password)

Utilisateur

6: Afcher (Utilisateur identier) UI login Gestion login 5: Select

user

Figure 15: Diagramme de collaboration S'identifier 2.2.2 Lanalyse du cas dutilisation : Grer les utilisateurs a. Traabilit entre MCA-MA : Grer les utilisateurs

Administrateur

Grer Les utilisateurs (from use case)

<Participate> <Participate> <Participate> <Participate> <Participate> <Participate> <Participate>

<Participate>

UI gestion des utilisateurs

Gestion Ajouter

Gestion Modier

Gestion supprimer

Gestion Bannir

Gestion Afcher

Gestion Rechercher

User

Figure 16: Traabilit entre MCA-MC Grer les utilisateurs

BOUAZZA Ferouk

46

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Ce modle reprsente la traabilit entre le modle de cas dutilisation et le modle danalyse du cas dutilisation grer les utilisateurs. b. Lanalyse de sous cas dutilisation : Ajouter utilisateur b.1 Modle de classe danalyse : Ajouter utilisateur

Administrateur

UI Ajouter utilisateur

Gestion utilisateur

user

Figure 17: Modle de classe d'analyse Ajouter utilisateur b.2 Diagramme de Collaboration : Ajouter utilisateur
1: Saisir information user 2: btn_ajout_click 3: PEC_Ajout

Administrateur

5: Afcher (Utilisateur ajout) UI Ajout utilisateur Gestion Ajout utilisateur

4: insert(ID,user...)

user

Figure 18: Diagramme de collaboration Ajouter utilisateur

BOUAZZA Ferouk

47

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

c. Lanalyse de sous cas dutilisation : Supprimer utilisateur c.1 Modle de classe danalyse : Supprimer utilisateur

Administrateur

UI Supprimer utilisateur

Gestion utilisateur

user

Figure 19: Modle de classe d'analyse Supprimer utilisateur

c.2 Diagramme de collaboration : Supprimer utilisateur


1: Selectionner user 2: btn_supprimer_click 3: PEC_suppression

Administrateur

5: Afcher (Utilisateur supprim) UI supprimer utilisateur Gestion supprimer utilisateur

4: delete(ID)

user

Figure 20: Diagramme de collaboration Supprimer utilisateur d. Lanalyse de sous cas dutilisation : Bannir utilisateur d.1 Modle de classe danalyse : Bannir utilisateur

Administrateur

UI Bannir utilisateur

Gestion utilisateur

user

Figure 21: Modle de classe d'analyse Bannir utilisateur

BOUAZZA Ferouk

48

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

d.2 Diagramme de collaboration : Bannir utilisateur


1: Selectionner user 2: btn_bannir_click 3: PEC_ban

Administrateur

5: Afcher (Utilisateur banni) UI Bannir utilisateur Gestion Bannir utilisateur

4: update(banned)

user

Figure 22: Diagramme de collaboration Bannir utilisateur e. Lanalyse de sous cas dutilisation : Modifier utilisateur e.1 Modle de classe danalyse : Modifier utilisateur

Administrateur

UI Modier utilisateur

Gestion utilisateur

user

Figure 23: Modle de classe d'analyse Modifier utilisateur e.2 Diagramme de collaboration : Modifier utilisateur
1: Selectionner user 2: Saisir informations 3: btn_modier_click 3: PEC_modier

Administrateur

5: Afcher (Utilisateur modi) UI modier utilisateur Gestion modier 4: update(User, pwd...) utilisateur

user

Figure 24: Diagramme de collaboration Modifier utilisateur

BOUAZZA Ferouk

49

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

f. Lanalyse de sous cas dutilisation : Afficher utilisateur f.1 Modle de classe danalyse : Afficher utilisateur

Administrateur

UI Afcher utilisateur

Gestion utilisateur

user

Figure 25: Modle de classe d'analyse Afficher utilisateur f.2 Diagramme de collaboration : Afficher utilisateur
1: Selectionner user 2: btn_click 3: PEC_selection

Administrateur

5: Afcher (information) UI Afcher utilisateur Gestion Afcher utilisateur 4: select(ID)

user

Figure 26: Diagramme de collaboration Afficher utilisateur

g. Lanalyse de sous cas dutilisation : Rechercher utilisateur g.1 Modle de classe danalyse : Rechercher utilisateur

Administrateur

UI Rechercher utilisateur

Gestion utilisateur

user

Figure 27: Modle de classe d'analyse Rechercher utilisateur

BOUAZZA Ferouk

50

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

g.2 Diagramme de collaboration : Rechercher utilisateur


1: Saisir mot cls 2: btn_rechercher_click 3: PEC_Rechercher

Administrateur

5: Afcher (information) UI Rechercher utilisateur Gestion Rechercher utilisateur 4: select(name)

user

Figure 28: Diagramme de collaboration Rechercher utilisateur

II. Maquette dinterface utilisateur


Une Maquette (Wireframe), galement connu comme un modle schmatique, est un guide visuel qui reprsente le cadre du squelette dun site web ou dune application. Le Wireframe reprsente la mise en page ou de larrangement du contenu de lapplication, y compris les lments de linterface et les systmes de navigation.

BOUAZZA Ferouk

51

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

1. Interface login

Figure 29: Maquette de l'interface login

Linterface Login permet aux utilisateurs de saisir leur Nom dUtilisateur et leur Mot de Passe afin daccder aux diffrentes fonctionnalits de lapplication. Lutilisateur peut coch la case Rest connect afin davoir une connexion persistance. Laccs lapplication sans avoir connect redirige lutilisateur vers la page de connexion.

BOUAZZA Ferouk

52

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

2. Interface de laccueil

Figure 30: Maquette de l'interface Accueil Linterface de laccueil affiche dans un tableau les dossiers de fabrication existants, avec un nombre maximal de 20 lments par page. Si le nombre des dossiers dpasse 20 lments, un systme de pagination gre le multipage. Le menu daccs aux fonctionnalits de lapplication. Certain lments de gestion dans le menu et la case option de la grille ne saffiche que pour ladministrateur.

BOUAZZA Ferouk

53

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

3. Interface de gestion des utilisateurs

Figure 31: Maquette de l'interface gestion utilisateur Linterface de gestion des utilisateurs, accessible pour les

administrateurs, fournit une barre de recherche pour rechercher dans la liste des utilisateurs existants afin de les grer, ou lutilisation des deux options prdfinis. Et un formulaire de cration des nouveaux utilisateurs.

BOUAZZA Ferouk

54

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

4. Interface de gestion des dossiers

Figure 32: Maquette de l'interface Gestion des dossiers Linterface de gestion des dossiers, accessible uniquement par les administrateurs. Dcompose le processus de cration des dossiers de fabrication en 3 tapes. La premire tape, gnre larborescence des dossiers de fabrication. La deuxime tapes, prparent le fichiers synoptique, dplace les outils et documentation dans les fichiers de phase et la troisime tape gr le graphe de synoptique. La requte GET gre les tapes, et chaque nouvelle tape linterface fournit les formulaires ncessaires.

5. Palette de couleurs
Twitter Bootstrap propose un aspect visuel de couleur la fois compatible avec les interfaces web, et techniquement significatif.

BOUAZZA Ferouk

55

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Le mode colorimtrique pour lapplication est RVB (ROUGE, VERT, BLEU), puis ce que lapplication est destine laffichage sur les crans. Le mode colorimtrique pour le PDF synoptique gnrer est CMJ (CYAN, MAGENTA, JAUNE), puis ce que les fichiers PDF de synoptiques sont destine limpression.

000000

181818

1e1f1a

d4d4d4

f5f5f5

FFFFFF

c09853

fbeed5

fcf8e3

0b0332

652c4f

468847

d6e9c6

dff0d8

0088cc

3a87ad

bce8f1

d9edf7

b94a48

eed3d7

f2dede

Figure 33: Schma colorimtrique 5.1 Couleur du corps

000000

181818

1e1f1a

d4d4d4

f5f5f5

FFFFFF

Figure 34: Palette des couleurs du corps Pour le corps de lapplication, on a choisit le niveau gris. La variation de couleurs de niveau gris et la manipulation de lintensit lumineuse donne la fois la sparation visuel entre les diffrents lments de la page pour une interface visuellement claire et lgante et bien organiser, et fonctionnellement notre interface apparat plus vaste. BOUAZZA Ferouk 56

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

5.2 Couleur des boutons et message : 5.2.1 Messages derreur et bouton de bannir

c09853

fbeed5

fcf8e3

Figure 35: Palette Message d'erreur et bouton bannir Le jaune signifie ltat de prparation et lavertissement donc il est destin aux messages derreur et aux boutons de changement dtat temporaire. 5.2.2 Messages de succs et boutons denvoi

468847

d6e9c6

dff0d8

Figure 36: Palette Message succs et boutons d'envoi Le vert signifie la russite donc il est destin aux messages de succs et aux boutons dinteraction avec le systme. 2.2.3 Messages de problme et bouton de suppression

b94a48

eed3d7

f2dede

Figure 37: Palette Message de problme de et bouton suppression Le rouge est une couleur qui signifie le risque donc il est destin aux messages de problme et aux boutons de tches hostiles.

BOUAZZA Ferouk

57

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

2.2.4 Messages dinformation et bouton de dbannir

3a87ad

bce8f1

d9edf7

Figure 38: Palette Message info et bouton dbannir Le bleu cyan est une couleur qui signifie le calme donc il est destin aux messages informatifs et aux boutons de tches amicaux. 5.3 Couleur de typographie 2.2.5 Couleur des titres, labels et Placeholders

333333

555555

cccccc

ffffff

Figure 39: Palette titres, labels, Placeholders Par dfaut les couleurs de titre et paragraphe sont noir peut claire, ce qui facilite la lecture. Pour les Placeholders des champs dentres le gris claire signifie que les texte sont dsactiv ou changeable. Pour les labels, les couleurs sont de gris fonc ce qui signifie que lutilisateur doit sinteragir avec le systme. Les titres et les paragraphes du header sont blanc sur une arrire plan sombre afin dtre claire et lisible. 2.2.6 Couleur des liens

0088cc

Figure 40: Couleur des liens

BOUAZZA Ferouk

58

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Le couleur bleu est par dfaut utiliser comme couleur significatif pour les liens. La couleur propose par Twitter Bootstrap est un bleu ciel claire aux yeux et significatif.

6. Typographie

Figure 41: Typographie Twitter Bootstrap propose des options typographiques claires et qui suivent les normes. Les types de police utiliss sont suivant la priorit Helvetica neue , Helvetica , Arial, Sans serif. Pour les heading 1 : La taille de police est 38.5 pixels, avec 40 pixels de hauteur de ligne et gras. Pour les heading 2 : La taille de police est 31.5 pixels, avec 40 pixels de hauteur de ligne et gras. Pour les heading 3 : La taille de police est 24.5 pixels, avec 40 pixels de hauteur de ligne et gras.

BOUAZZA Ferouk

59

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Pour les heading 4 : La taille de police est 17.5 pixels, avec 20 pixels de hauteur de ligne et gras. Pour les heading 5 : La taille de police est 14.5 pixels, avec 20 pixels de hauteur de ligne et gras. Pour les heading 6 : La taille de police est 11.9 pixels, avec 20 pixels de hauteur de ligne et gras. Pour les paragraphes : La taille de police est 14 pixels, avec 20 pixels de hauteur de ligne et rgulier.

Conclusion
A La fin de ce chapitre, nous avons russi dgager et identifier les principaux acteurs de notre systme ainsi que ses principales fonctionnalits. On a aussi schmatis certain prototype des futures interfaces afin de faciliter leur mise en place la phase de dveloppement. De plus, on a prcis laspect visuel de notre application : Les caractristiques colorimtriques et typographiques. Dans le chapitre suivant on va entamer lanalyse des cas dutilisations de deuxime priorit ainsi que la conception des cas dutilisations de premire priorit.

BOUAZZA Ferouk

60

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Chapitre 3 : Phase de llaboration


Introduction
La phase dlaboration permet de stabiliser et de raffiner larchitecture. En raffinant larchitecture, les principaux composants sont identifis. Dans ce chapitre on doit faire une spcification de la plupart des cas dutilisation et la conception de larchitecture de base (squelette du systme).

I.

Raffinement des cas dutilisations de deuxime priorit


Dans cette section on va raffiner les cas dutilisation qui ayant une

priorit est gale deux. o Grer les dossiers de fabrication

BOUAZZA Ferouk

61

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

1. Raffinement de cas dutilisation Grer les dossier de fabrication


Ajouter Dossier

Afcher Dossier

Grer Les dossiers


Administrateur

Supprimer Dossier

Imprimer Dossier

Modier Dossier

Rechercher Dossier

Figure 42: Cas d'utilisation Grer les dossiers

BOUAZZA Ferouk

62

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

1.1 Raffinement de sous cas dutilisation Ajouter dossier Cas dutilisation : Acteur : Pr-condition : Post-condition : Description : Ajouter un dossier Administrateur Ladministrateur authentifi et l'interface gestion des dossiers active Dossier ajout
Ladministrateur saisie les informations appropri et suive les tapes. Ladministrateur appuyer sur Ajouter. Le systme ajoute le dossier.

Exception :

En cas derreur le systme affiche le message appropri

Table 9: Raffinement de sous cas d'utilisation ajouter dossier 1.2 Raffinement de sous cas dutilisation Afficher dossier Cas dutilisation : Acteur : Pr-condition : Post-condition : Description : Afficher un dossier Administrateur L'interface gestion des dossiers active Dossier Affich
Ladministrateur slectionne le dossier Afficher et clique sur Afficher. Le systme affiche le dossier.

Exception :

En cas derreur le systme affiche le message appropri

Table 10: Raffinement de sous cas d'utilisation Afficher dossier

BOUAZZA Ferouk

63

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

1.3 Raffinement de sous cas dutilisation Supprimer dossier Cas dutilisation : Acteur : Pr-condition : Post-condition : Description : Supprimer un dossier Administrateur L'interface gestion des dossiers active Dossier supprim
Ladministrateur slectionne le dossier supprimer et appuyer sur Supprimer. Un message de confirmation saffiche. Le systme supprimer le dossier.

Exception :

En cas derreur le systme affiche le message appropri

Table 11: Raffinement de sous cas d'utilisation Supprimer dossier 1.4 Raffinement de sous cas dutilisation Imprimer dossier Cas dutilisation : Acteur : Pr-condition : Post-condition : Description : Imprimer un dossier Administrateur L'interface gestion des dossiers active Dossier imprim
Ladministrateur slectionne le dossier imprimer et appuyer sur Imprimer Le systme prpare une copie du graphe synoptique pour limpression. Le systme imprime le graphe synoptique.

Exception :

En cas derreur le systme affiche le message appropri

Table 12: Raffinement de sous cas d'utilisation Imprimer dossier

BOUAZZA Ferouk

64

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

1.5 Raffinement de sous cas dutilisation Modifier dossier Cas dutilisation : Acteur : Pr-condition : Post-condition : Description : Modifier un dossier Administrateur L'interface gestion des dossiers active Dossier modifi
Ladministrateur slectionne le dossier modifier et appuyer sur modifier Le systme affiche les informations du dossier. Ladministrateur saisie les informations et appuyer sur valider Le systme enregistre les modifications

Exception :

En cas derreur le systme affiche le message appropri

Table 13: Raffinement de sous cas d'utilisation Modifier dossier 1.6 Raffinement du sous cas dutilisation Rechercher dossier Cas dutilisation : Acteur : Pr-condition : Post-condition : Description : Rechercher un dossier Administrateur L'interface gestion des dossiers active Dossier(s) trouv(s)
Ladministrateur tape le mot cl et appuyer sur Rechercher Le systme Recherche le(s) dossier(s) et affiche les informations appropris.

Exception :

En cas derreur le systme affiche le message appropri

Table 14: Raffinement de sous cas d'utilisation Rechercher dossier

BOUAZZA Ferouk

65

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

II. Analyse des cas dutilisation de deuxime priorit


Dans cette section on doit aboutir lanalyse des cas dutilisation de deuxime priorit en prsentant leurs modles de traabilit ainsi que leur diagramme de classe danalyse et le diagramme de collaboration.

1. Analyse de cas dutilisation : Grer les dossiers de fabrication


1.1 Traabilit entre MCA-MA : Grer les dossiers de fabrication

Administrateur

Grer dossier (from use case)


<Trace>

Grer dossier
<Participate> <Participate> <Participate> <Participate> <Participate> <Participate>

<Participate> <Participate>

UI gestion des Dossiers

Gestion Ajouter

Gestion Modier

Gestion supprimer

Gestion Imprimer

Gestion Afcher

Gestion Rechercher

Dossier

Figure 43: Traabilit entre MCA-MA Grer dossier

BOUAZZA Ferouk

66

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

1.2 Lanalyse de sous cas dutilisation : Ajouter dossier 1.2.1 Modle de classe danalyse : Ajouter dossier

Administrateur

UI Ajouter dossier

Gestion dossier

dossier

Figure 44: Modle de classe Ajouter dossier 1.2.2 Diagramme de collaboration : Ajouter dossier
1: Saisir les information 2: Ajouter_click 3: PEC_Ajout

Administrateur

5: Afcher (Opration russi) UI Ajouter dossier Gestion Ajout Dossier 4: insert(ID, Client...)

Dossier

Figure 45: Diagramme de collaboration Ajouter dossier

1.3 Lanalyse de sous cas dutilisation : Afficher dossier 1.3.1 Modle de classe danalyse : Afficher dossier

Administrateur

UI Afcher dossier

Gestion dossier

dossier

Figure 46: Modle de classe Afficher dossier

BOUAZZA Ferouk

67

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

1.3.2 Diagramme de collaboration : Afficher dossier


1: Selectionner dossier 2: Afche_click 3: PEC_Selectionner

Administrateur

5: Afcher (informations) UI Afcher dossier Gestion Afcher Dossier 4: select(ID)

Dossier

Figure 47: Diagramme de collaboration Afficher dossier

1.4 Lanalyse de sous cas dutilisation : Modifier dossier 1.4.1 Modle de classe danalyse : Modifier dossier

Administrateur

UI Modier dossier

Gestion dossier

dossier

Figure 48: Modle de classe Modifier dossier 1.4.2 Diagramme de collaboration : Modifier dossier
1: Saisir information 2: Modier_click 3: PEC_Modier

Administrateur

5: Afcher (Opration russi) UI Modier dossier Gestion Modier Dossier

4: Update(informations)

Dossier

Figure 49: Diagramme de collaboration Modifier dossier BOUAZZA Ferouk 68

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

1.5 Lanalyse de sous cas dutilisation : Imprimer dossier 1.5.1 Modle de classe danalyse : Imprimer dossier

Administrateur

UI Imprimer dossier

Gestion dossier

dossier

Figure 50: Modle de classe Imprimer dossier 1.5.2 Diagramme de collaboration : Imprimer dossier
1: Selectionner dossier 2: Imprimer_click 3: PEC_Imprimer

Administrateur

5: Afcher (Opration russi) UI Imprimer dossier Gestion Imprimer Dossier

4: Select(Synoptic)

Dossier

Figure 51: Diagramme de collaboration Imprimer dossier

1.6 Lanalyse de sous cas dutilisation : Supprimer dossier 1.6.1 Modle de classe danalyse : Supprimer dossier

Administrateur

UI Supprimer dossier

Gestion dossier

dossier

Figure 52: Modle de classe Supprimer dossier

BOUAZZA Ferouk

69

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

1.6.2 Diagramme de collaboration : Supprimer dossier


1: Selectionner dossier 2: Supprimer_click 3: PEC_Supprimer

Administrateur

5: Afcher (Opration russi) UI Gestion dossier Gestion Supprimer Dossier

4: Delete

Dossier

Figure 53: Diagramme de collaboration Supprimer dossier

1.7 Lanalyse de sous cas dutilisation : Rechercher dossier 1.7.1 Modle de classe danalyse : Rechercher dossier

Administrateur

UI Rechercher dossier

Gestion dossier

dossier

Figure 54: Modle de classe Rechercher dossier 1.7.2 Modle de classe danalyse : Rechercher dossier
1: Saisir mot cl 2: rechercher_click 3: PEC_Recherche

Administrateur

5: Afcher (ID, Nom...) UI Rechercher dossier Gestion Rechercher Dossier

4: Select

Dossier

Figure 55: Diagramme de collaboration Rechercher dossier BOUAZZA Ferouk 70

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

III. Conception des cas dutilisation de premire et deuxime priorit


1. Conception des cas dutilisation de premire priorit
1.1 Modle de conception de cas : Sidentifier 1.1.1 Traabilit MC-MA : Sidentifier

UI sidentier

Gestion sidentier

User

<Trace>

<Trace>

<Trace>

<boundary> UI Sidentier

<Control> Gestion Sidentier

<entity> User

Figure 56: Traabilit MC-MA S'identifier 1.1.2 Diagramme de classe de conception : Sidentifier
<boundary> UI Sidentier
- login: String - password: String - Remind: Boolean + saisie (): Void + connexion (): Void

<Control> Gestion Sidentier

<entity> User
user id: password: login_statut: + select () + insert () + delete () + update ()

+ verication (): void

Figure 57: Diagramme de classe de conception S'identifier

BOUAZZA Ferouk

71

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

1.1.3 Diagramme de squence : Sidentifier


UI sidentier
Utilisateur Saisir(login,pass,Remind)

Gestion Sidentier

Rle

Utilisteurs

Verier(login,pass)

Selectioner utilisateur(user_id) Un utilisateur

Se connecter Click() Login Statut Get_Roles(user_id) Rles

Figure 58: Diagramme de squence S'identifier

1.2 Modle de conception de cas : Ajouter utilisateur 1.2.1 Traabilit MC-MA : Ajouter utilisateur

UI Ajouter utilisateur

Gestion Ajouter user

User

<Trace>

<Trace>

<Trace>

<boundary> UI Ajouter utilisateur

<Control> Gestion Ajouter user

<entity> User

Figure 59: Traabilit MC-MA Ajouter utilisateur

BOUAZZA Ferouk

72

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

1.2.2 Diagramme de classe de conception : Ajouter utilisateur


<boundary> UI gestion user
- username: String - email: String - password: String - level: Boolean + ajout(): Void

<Control> Gestion Ajout user

+Ajouter_user (): void

<entity> User - ID: int - username: String - email: String - password: String - level: Boolean
+ select () + insert () + delete () + update ()

Figure 60: Diagramme de classe de conception Ajouter utilisateur 1.2.3 Diagramme de squence : Ajouter utilisateur
UI Gestion user
Administrateur Saisir Information

Gestion Ajout user

Utilisteurs

informations d'Ajout

Vrier information

Ajout_Click() OK Ajouter utilisateur OK

Figure 61: Diagramme de squence Ajouter utilisateur

BOUAZZA Ferouk

73

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

1.3 Modle de conception de cas : Modifier utilisateur 1.3.1 Traabilit MC-MA : Modifier utilisateur

UI modier utilisateur

Gestion modier user

User

<Trace>

<Trace>

<Trace>

<boundary> UI modier utilisateur

<Control> Gestion modier user

<entity> User

Figure 62: Traabilit MC-MA Modifier utilisateur 1.3.2 Diagramme de classe de conception : Modifier utilisateur
<boundary> UI Modier user
- username: String - email: String - password: String - level: Boolean + Modier(): Void

<Control> Gestion Modier user

+Modier_user (): void

<entity> User - ID: int - username: String - email: String - password: String - level: Boolean
+ select () + insert () + delete () + update ()

Figure 63: Diagramme de classe de conception Modifier utilisateur

BOUAZZA Ferouk

74

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

1.3.3 Diagramme de squence : Modifier utilisateur


UI modier user
Administrateur Selectionner user Saisir information Modier_Click() Afcher Utilisateur Modi

Gestion Modier user

Utilisteurs

Modier ID
Update() OK

Figure 64: Diagramme de squence Modifier utilisateur 1.4 Modle de conception de cas : Bannir utilisateur 1.4.1 Traabilit MC-MA : Bannir utilisateur

UI gestion utilisateur

Gestion Bannir user

User

<Trace>

<Trace>

<Trace>

<boundary> UI Bannir utilisateur

<Control> Gestion Bannir user

<entity> User

Figure 65: Traabilit MC-MA Bannir utilisateur

BOUAZZA Ferouk

75

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

1.4.2 Diagramme de classe de conception : Bannir utilisateur


<boundary> UI gestion user <Control> Gestion Bannir user <entity> User

- user: checkbox +Bannir_user (): void

+ Bannir(): Void

- ID: int - username: String - email: String - password: String - level: Boolean - Banned: Boolean + select () + insert () + delete () + update ()

Figure 66: Diagramme de classe de conception Bannir utilisateur 1.4.3 Diagramme de squence : Bannir utilisateur
UI Bannir user
Administrateur Selectionner user

Gestion Bannir user

Utilisteurs

Bannir ID
Update(Banned) OK

Bannir_Click() Afcher Utilisateur banni

Figure 67: Diagramme de squence Bannir utilisateur

BOUAZZA Ferouk

76

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

1.5 Modle de conception de cas : Supprimer utilisateur 1.5.1 Traabilit MC-MA : Supprimer utilisateur

UI gestion utilisateur

Gestion supprimer user

User

<Trace>

<Trace>

<Trace>

<boundary> UI supprimer utilisateur

<Control> Gestion Supprimer user

<entity> User

Figure 68: Traabilit MC-MA Supprimer utilisateur 1.5.2 Diagramme de classe de conception : Supprimer utilisateur
<boundary> UI Supprimer user <Control> Gestion suppression user <entity> User - ID: int - username: String - email: String - password: String - level: Boolean
+ select () + insert () + delete () + update ()

user: checkbox +Supprimer_user (): void

+ Supprimer(): Void

Figure 69: Diagramme de classe de conception Supprimer utilisateur

BOUAZZA Ferouk

77

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

1.5.3 Diagramme de squence : Supprimer utilisateur


UI supprimer user
Administrateur Selectionner user

Gestion supprimer user

Utilisteurs

Supprimer ID

Supprimer_Click() Afcher Supprission Termin

Delete() OK

Figure 70: Diagramme de squence Supprimer utilisateur 1.6 Modle de conception de cas : Afficher utilisateur 1.6.1 Traabilit MC-MA : Afficher utilisateur

UI Afcher utilisateur

Gestion Afcher user

User

<Trace>

<Trace>

<Trace>

<boundary> UI Afcher utilisateur

<Control> Gestion Afcher user

<entity> User

Figure 71: Traabilit MC-MA Afficher utilisateur

BOUAZZA Ferouk

78

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

1.6.2 Diagramme de classe de conception : Afficher utilisateur


<boundary> UI gestion user <Control> Gestion Afcher user <entity> User

- detaille_user: String - users: Listbox +Afcher_user (): void

- ID: int - username: String - email: String - password: String - level: Boolean - Banned: Boolean + select () + insert () + delete () + update ()

Figure 72: Diagramme de classe de conception Afficher utilisateur 1.6.3 Diagramme de squence : Afficher utilisateur
UI Afcher user
Administrateur Selectionner user Afcher_Click() Afcher(user)

Gestion Afcher user

Utilisteurs

PEC_Afcher
select() OK

Figure 73: Diagramme de squence Afficher utilisateur

BOUAZZA Ferouk

79

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

1.7 Modle de conception de cas : Rechercher utilisateur 1.7.1 Traabilit MC-MA : Rechercher utilisateur

UI gestion utilisateur

Gestion Rechercher user

User

<Trace>

<Trace>

<Trace>

<boundary> UI Rechercher utilisateur

<Control> Gestion Rechercher user

<entity> User

Figure 74: Traabilit MC-MA Rechercher utilisateur 1.7.2 Diagramme de classe de conception : Rechercher utilisateur
<boundary> UI Rechercher user
- ID: INT - username: String - level: Boolean + Rechercher(): Void +Rechercher_user (): void

<Control> Gestion Rechercher user

<entity> User - ID: int - username: String - email: String - password: String - Banned: Boolean - level: Boolean
+ select () + insert () + delete () + update ()

Figure 75: Diagramme de classe de conception Rechercher utilisateur

BOUAZZA Ferouk

80

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

1.7.3 Diagramme de squence : Rechercher utilisateur


UI Rechercher user
Administrateur Saisir mots cls Rechercher_Click() Afcher resultat

Gestion Rechercher user

Utilisteurs

Rechercher (user)
select() OK

Figure 76: Diagramme de squence Rechercher utilisateur

2. Conception des cas dutilisation de deuxime priorit


2.1 Modle de conception de sous cas : Ajouter dossier 2.1.1 Traabilit MC-MA : Ajouter dossier

UI Ajouter dossier

Gestion Ajouter dossier

Dossier

<Trace>

<Trace>

<Trace>

<boundary> UI Ajouter dossier

<Control> Gestion Ajouter dossier

<entity> dossier

Figure 77: Traabilit MC-MA Ajouter dossier

BOUAZZA Ferouk

81

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

2.1.2 Diagramme de classe de conception : Ajouter dossier


<boundary> UI Ajouter dossier <Control> <entity> Dossier

Gestion Ajouter Dossier

- Saisie: String - List_dossier: Listbox


btn_Ajout_dossier() +Ajouter_Dossier (): void

- ID: int - name: String - reference: String - catgorie: String - famille: string - Client: string + select () + insert () + delete () + update ()

2.1.3 Diagramme de squence : Ajouter dossier


UI Gestion dossier
Administrateur Saisir Information

Gestion Ajout dossier

Dossiers

informations d'Ajout

Vrier information

Ajout_Click() OK Ajouter Dossier OK

BOUAZZA Ferouk

82

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

2.2 Modle de conception de sous cas : Afficher dossier 2.2.1 Traabilit MC-MA : Afficher dossier

UI Afcher dossier

Gestion Afcher dossier

Dossier

<Trace>

<Trace>

<Trace>

<boundary> UI Afcher dossier

<Control> Gestion Afcher dossier

<entity> dossier

Figure 78: Traabilit MC-MA Afficher dossier 2.2.2 Diagramme de classe de conception : Afficher dossier
<boundary> UI Afcher dossier <Control> Gestion Afcher Dossier <entity> Dossier

- details_Dossier: String - Dossiers: Listbox +Afcher_Dossier (): void

- ID: int - name: String - reference: String - catgorie: String - famille: string - Client: string + select () + insert () + delete () + update ()

Figure 79: Diagramme de classe de conception Afficher dossier

BOUAZZA Ferouk

83

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

2.2.3 Diagramme de squence : Afficher dossier


UI Afcher Dossier
Administrateur Selectionner Dossier Afcher_Click() Afcher(dossier)

Gestion Afcher Dossier

Dossiers

PEC_Afcher
select() OK

Figure 80: Diagramme de squence Afficher dossier 2.3 Modle de conception de sous cas : Modifier dossier 2.3.1 Traabilit MC-MA : Modifier dossier

UI gestion dossier

Gestion Modier dossier

Dossier

<Trace>

<Trace>

<Trace>

<boundary> UI Modier dossier

<Control> Gestion Modier dossier

<entity> dossier

Figure 81: Traabilit MC-MA Modifier dossier

BOUAZZA Ferouk

84

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

2.3.2 Diagramme de classe de conception : Modifier dossier


<boundary> UI Modier dossier <Control> <entity> Dossier

Gestion Modier Dossier

- List_dossier: Listbox
+Modier_Dossier (): void

- ID: int - name: String - reference: String - catgorie: String - famille: string - Client: string + select () + insert () + delete () + update ()

Figure 82: Diagramme de classe de conception Modifier dossier 2.3.3 Diagramme de squence : Modifier dossier
UI Afcher Dossier
Administrateur Selectionner Dossier Modier_Click() Afcher(Opration russi)

Gestion Afcher Dossier

Dossiers

PEC_Modier
update() OK

Figure 83: Diagramme de squence Modifier dossier

BOUAZZA Ferouk

85

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

2.4 Modle de conception de sous cas : Imprimer dossier 2.4.1 Traabilit MC-MA : Imprimer dossier

UI gestion dossier

Gestion Imprimer dossier

Dossier

<Trace>

<Trace>

<Trace>

<boundary> UI Imprimer dossier

<Control> Gestion Imprimer dossier

<entity> dossier

Figure 84: Traabilit MC-MA Imprimer dossier 2.4.2 Diagramme de classe de conception : Imprimer dossier
<boundary> UI Imprimer dossier <Control> <entity> Dossier

Gestion Imprimer Dossier

- List_dossier: Listbox
+Imprimer_Dossier (): void

- ID: int - name: String - reference: String - catgorie: String - famille: string - Client: string + select () + insert () + delete () + update ()

Figure 85: Diagramme de classe de conception Imprimer dossier

BOUAZZA Ferouk

86

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

2.4.3 Diagramme de squence : Imprimer dossier


UI Imprimer Dossier
Administrateur Selectionner Dossier Imprimer_Click() Afcher(Opration russi)

Gestion Imprimer Dossier

Dossiers

PEC_Imprimer
select(ID) OK

Figure 86: Diagramme de squence Imprimer dossier 2.5 Modle de conception de sous cas : Supprimer dossier 2.5.1 Traabilit MC-MA : Supprimer dossier

UI gestion dossier

Gestion Supprimer dossier

Dossier

<Trace>

<Trace>

<Trace>

<boundary> UI Supprimer dossier

<Control> Gestion Supprimer dossier

<entity> dossier

Figure 87: Traabilit MC-MA Supprimer dossier

BOUAZZA Ferouk

87

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

2.5.2 Diagramme de classe de conception : Supprimer dossier


<boundary> UI Supprimer dossier <Control> <entity> Dossier

Gestion Supprimer Dossier

- List_dossier: Listbox
+Supprimer_Dossier (): void

- ID: int - name: String - reference: String - catgorie: String - famille: string - Client: string + select () + insert () + delete () + update ()

Figure 88: Diagramme de classe de conception Supprimer dossier 2.5.3 Diagramme de squence : Supprimer dossier
UI Supprimer Dossier
Administrateur Selectionner Dossier Supprimer_Click() Afcher(Opration russi)

Gestion Supprimer Dossier

Dossiers

PEC_Supprimer
Delete(ID) OK

Figure 89: Diagramme de squence Supprimer dossier

BOUAZZA Ferouk

88

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

2.6 Modle de conception de sous cas : Rechercher dossier 2.6.1 Traabilit MC-MA : Rechercher dossier

UI gestion dossier

Gestion Rechercher dossier

Dossier

<Trace>

<Trace>

<Trace>

<boundary> UI Rechercher dossier

<Control> Gestion Rechercher dossier

<entity> dossier

Figure 90: Traabilit MC-MA Rechercher dossier 2.6.2 Diagramme de classe de conception : Rechercher dossier
<boundary> UI Rechercher dossier <Control> <entity> Dossier

Gestion Rechercher Dossier

- Mots cls: String


+Rechercher_Dossier (): void

- ID: int - name: String - reference: String - catgorie: String - famille: string - Client: string + select () + insert () + delete () + update ()

Figure 91: Diagramme de classe de conception Rechercher dossier

BOUAZZA Ferouk

89

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

2.6.3 Diagramme de squence : Rechercher dossier


UI Rechercher Dossier
Administrateur Saisir mots cls Rechercher_Click() Afcher(informations)

Gestion Rechercher Dossier

Dossiers

PEC_Rechercher
Select() OK

Figure 92: Diagramme de squence Rechercher dossier

Conclusion
A la fin de ce chapitre on a russi capturer tous les besoins de notre systme ainsi que lanalyse et la conception des cas dutilisations de premire et deuxime priorit.

BOUAZZA Ferouk

90

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Chapitre 4 : Phase de construction


Introduction
Aprs avoir labor lanalyse et la conception des cas dutilisation de premire et deuxime priorit on sintresse dans ce chapitre lanalyse et la conception des cas dutilisation de troisime priorit ainsi que la mise en place du modle relationnel des donnes et du modle des composants. Pour le dveloppement on utilise PHP5/MYSQL, ainsi que HTML2PDF API, JQuery/JQuery UI et la librairie MxGraph pour JavaScript.

I.

Raffinement des cas dutilisation de troisime priorit


A ce stade on va raffiner tous les cas dutilisation de troisime priorit : - Voir les dossiers de fabrication - Imprimer les fichiers de synoptique

Afcher un Dossier

Membre

Imprimer un chier de synoptique


Figure 93: Diagramme de cas d'utilisation de troisime priorit

BOUAZZA Ferouk

91

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

1. Raffinement de cas dutilisation : Afficher dossier


Cas dutilisation : Acteur : Pr-condition : Post-condition : Description : Exception : Ajouter dossier Membre Membre authentifi et l'interface daccueil active Dossier Affich
Le membre slectionne un dossier afficher. Le systme Affiche le dossier.

En cas derreur le systme affiche le message appropri

Table 15: Raffinement de cas d'utilisation Afficher dossier

2. Raffinement de cas dutilisation : Imprimer fichier de synoptique


Cas dutilisation : Acteur : Pr-condition : Post-condition : Description : Imprimer fichier de synoptique Membre Membre authentifi et l'interface daccueil active Synoptique imprim
Le membre slectionne un synoptique imprimer et appuyer Imprimer. Le systme imprime le synoptique.

Exception :

En cas derreur le systme affiche le message appropri

Table 16: Raffinement de cas d'utilisation Imprimer fichier de synoptique

BOUAZZA Ferouk

92

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

II. Analyse des cas dutilisation de troisime priorit


1. Analyse de cas dutilisation : Afficher dossier
1.1 Modle de classe danalyse : Afficher dossier

Membre

UI Afcher dossier

Gestion dAfchage

Dossier

Figure 94: Modle de classe d'analyse Afficher dossier 1.2 Diagramme de collaboration : Afficher dossier
1: Selectionner dossier 2: Afcher_click 3: PEC_Afcher

Membre

5: Afcher (information) UI Afcher dossier Gestion Afcher Dossier

4: Select()

Dossiers

Figure 95: Diagramme de collaboration Afficher dossier

2. Analyse de cas dutilisation : Imprimer synoptique


2.1 Modle de classe danalyse : Imprimer synoptique

Membre

UI imprimer synoptique

Gestion dimpression synoptique

DB

Figure 96: Modle de classe d'analyse Imprimer synoptique

BOUAZZA Ferouk

93

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

2.2 Diagramme de collaboration : Imprimer synoptique


1: Selectionner dossier 2: Imprimer_click 3: PEC_Imprimer

Membre

5: Afcher (Opration russi) UI Imprimer Synoptique Gestion Imprimer Synoptique

4: Select(Synoptic)

DB

Figure 97: Diagramme de collaboration Imprimer synoptique

III. Conception des cas dutilisation de troisime priorit


1. Conception de cas dutilisation : Afficher dossier
1.1 Traabilit entre MC-MA : Afficher dossier

UI Afcher dossier

Gestion Afcher dossier

Dossier

<Trace>

<Trace>

<Trace>

<boundary> UI Afcher dossier

<Control> Gestion Afcher dossier

<entity> dossier

Figure 98: Traabilit entre MC-MA Afficher dossier

BOUAZZA Ferouk

94

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

1.2 Diagramme de classe de conception : Afficher dossier


<boundary> UI Afcher dossier <Control> Gestion Afcher Dossier <entity> Dossier

- details_Dossier: String - Dossiers: Listbox +Afcher_Dossier (): void

- ID: int - name: String - reference: String - catgorie: String - famille: string - Client: string + select () + insert () + delete () + update ()

Figure 99: Diagramme de classe de conception Afficher dossier 1.3 Diagramme de squence : Afficher dossier
UI Afcher Dossier
Membre Selectionner Dossier Afcher_Click() Afcher(dossier)

Gestion Afcher Dossier

Dossiers

PEC_Afcher
select() OK

Figure 100: Diagramme de squence Afficher dossier

BOUAZZA Ferouk

95

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

2. Conception de cas dutilisation : Imprimer synoptique


2.1 Traabilit entre MC-MA : Imprimer synoptique

UI Imprimer synoptique

Gestion imprimer synoptique

DB

<Trace>

<Trace>

<Trace>

<boundary> UI Imprimer Synoptique

<Control> Gestion Imprimer Synoptique

<entity> DB

Figure 101: Traabilit entre MC-MA: Imprimer synoptique 2.2 Diagramme de classe de conception : Imprimer synoptique
<boundary> UI Imprimer synoptique <Control>

Gestion Imprimer Synoptique

- List_synoptique: Listbox

btn_imprimer()

DB

Figure 102: Diagramme de classe de conception Imprimer synoptique

BOUAZZA Ferouk

96

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

2.3 Diagramme de squence : Imprimer synoptique


UI imprimer Synoptique
Membre Selectionner synoptique Imprimer_Click() Afcher(Opration russi)

Imprimer synoptique

Gestion

DB

PEC_Imprimer
Select() OK

Figure 103: Diagramme de squence Imprimer synoptique

BOUAZZA Ferouk

97

Ecole Centrale Polytechnique Prive de Tunis

Synoptics users

1..N

BOUAZZA Ferouk
N..1 N..1

Modif

`id` int(20) <PK> `indice` varchar(4) `comment` varchar(40) `id_synoptic` int(20) <FK>

1. Schma de la base de donnes

`id` int(20) <PK> `name` varchar(40) `id_ref` int(20) <FK1> `id_creator` int(20) <FK2> `id_modier` int(20) <FK3> `prep` varchar(40) `pdf` varchar(40) `IQP` varchar(40) `incomplet` int(1) `hash` varchar(32) `created` date `modied` date `link` text

1..N

`id` bigint(20) <PK> `full_name` tinytext `user_name` `user_email` varchar(220) `user_level` tinyint(4) `pwd` varchar(220) `date` date `banned` int(1) `ckey` varchar(220) `ctime` varchar(220)

Clients

categories

families

ref

IV. Larchitecture de la base de donnes

`id` int(20) <PK> `name` varchar(40)

1..N
`id` int(20) <PK> `name` varchar(40) `id_client` int(20) <FK>

1..N

`id` int(20) <PK> `name` varchar(40) `id_category` int(11) <FK>

1..N

`id` int(20) <PK> `name` varchar(40) `id_family` int(11) <FK>

Figure 104: Schma de la base de donnes


steps instructions

phases

Projet de fin dtude / 2012-2013

`id` int(20) <PK> `name` varchar(10) `num_step` int(20) `id_synoptic` int(20) <FK>

1..N

`id` int(20) <PK> `nom` varchar(40) `symbole` varchar(40) `id_phase` int(20) <FK> `rank` int(11)

1..N

`id` int(20) <PK> `name` int(40) `id_step` int(11) <FK> `link` text

98

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

2. Description dtaill de schma de base de donnes


a. Structure de la table users Nom du champ id Full_name User_name User_email User_level date banned ckey ctime Description Identifiant user Nom complte Nom de lutilisateur Adresse email Rle Date de lajout Banni (1) ou non (0) Cl de cookie Date dexpiration cookie Type int varchar varchar varchar int date int varchar varchar Contraintes Cl primaire

Table 17: Structure de la table users

BOUAZZA Ferouk

99

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

b. Structure de la table synoptics Nom du champ id name Id_ref id_creator id_modifier prep iqp ipdf incomplet hash created modified link Description Identifiant synoptique Nom synoptique Identifiant rfrence Identifiant crateur Identifiant modificateur Nom prparateur Nom ingnieur qualit production Nom ingnieur produit de fabrication Complte ou non Hash md5 du fichier Date de cration Date du dernier modification Lien vers fichier gnr varchar Table 18: Structure de la table synoptics c. Structure de la table steps Nom du champ id nom symbole Id_phase rank Description Identifiant tape Le Symbole Identifiant phase Type int varchar int Cl trangre Contraintes Cl primaire int varchar date date varchar Type int varchar int int int varchar varchar Cl trangre Cl trangre Cl trangre Contraintes Cl primaire

Le nom de ltape varchar

Le rang de ltape int Table 19: Structure de la table steps

BOUAZZA Ferouk

100

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

d. Structure de la table ref Nom du champ id name id_family Description Identifiant rfrence Nom de la rfrence Identifiant famille Type int varchar int Cl trangre Contraintes Cl primaire

Table 20: Structure de la table ref e. Structure de la table phases Nom du champ id name num_step Id_synoptic Description Identifiant phase Nom phase Nombre des tapes de phase Identifiant synoptique int Cl trangre Table 21: Structure de la table phases f. Structure de la table modif Nom du champ id indice comment date Id_synoptic Description Indice de modification Commentaire Date de modification Identifiant synoptique Type varchar text date int Cl trangre Contraintes Cl primaire Type int Contraintes Cl primaire

Identifiant Modification int

Table 22: Structure de la table modif

BOUAZZA Ferouk

101

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

g. Structure de la table instructions Nom du champ id Name Id_step link Description Identifiant document Nom identifiant Identifiant tape Lien vers document Type int varchar int varchar Cl trangre Contraintes Cl primaire

Table 23: Structure de la table instructions h. Structure de la table families Nom du champ id name id_category Description Identifiant famille Nom de famille Identifiant catgorie Table 24: Structure de la table families i. Structure de la table clients Nom du champ id name Description Identifiant client Nom client Type int Varchar Contraintes Cl primaire Cl trangre Type int Contraintes Cl primaire

Table 25: Structure de la table clients j. Structure de la table categories Nom du champ id Name Id_client Description Identifiant catgorie Nom catgorie Identifiant client varchar int Cl trangre Type int Contraintes Cl primaire

Table 26: Structure de la table categories

BOUAZZA Ferouk

102

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

V.

Larborescence de lapplication

Connexion

Accueil

Gestion des utilisateurs

Gestion des dossiers

Figure 105: Arborescence de l'application Lors de laccs lapplication, lutilisateur sera rediriger vers la page de connexion afin douvrir une session de travail. Lutilisateur doit dispos dun compte afin davoir laccs lapplication. Si la combinassions login (user Name ou email)/Mot de passe sont vrai, Une session souvre et une vrification se droule dans les coulisses afin de savoir si lutilisateur possde des privilges dadministration ou non. Si lutilisateur possde des privilges dadministration, il sera rediriger vers la page daccueil de lapplication avec les fonctionnalits de gestion des dossiers et des comptes dutilisateurs. Si lutilisateur ne possde que des privilges membre, il sera rediriger vers la page daccueil mais cette fois sans les possibilits de gestion des utilisateurs et des dossiers.

BOUAZZA Ferouk

103

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Enfin, aprs que lutilisateur termine ses tches il a la possibilit de dconnect afin de finir la session. Et il sera rediriger vers la page de connexion pour commencer de nouveau une session.

Conclusion
A la fin de ce chapitre on a termin la rsolution de tous les cas dutilisation ainsi que limplmentation de notre systme et la cration de la base de donnes ainsi que larborescence de lapplication. On se concentre dans le chapitre suivant sur le dploiement du systme.

BOUAZZA Ferouk

104

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Chapitre 5 : Phase de Transition


Introduction
La phase de transition est la dernire phase du processus unifi, elle prpare les migrations/dploiements de systme chez lenvironnement des utilisateurs finaux ainsi que la ralisation dun scenario de test pour dtecter les anomalies et corriger les dfauts.

I.

Modle de dploiement

1. Dtermination des possibilits de dploiement


Le modle de dploiement est 3-tiers (14). Notre application est dcompose fonctionnellement en trois couches Figure 106 : - Couche prsentation Cest la partie client visible par lutilisateur dans notre cas elle est prsent sous forme de code HTML/CSS. Elle est gnralement compose des formulaires pour insrer les donnes et des tableaux ou div pour les afficher. - Couche mtier Cest la partie script de notre application, elle ralise toutes les fonctionnalits logiques de notre application. Elle est prsente dans notre systme sous la forme des scripts et classes PHP qui lie notre couche accs aux donnes la couche prsentation. - Couche accs aux donnes c'est la partie qui gre les donnes. La faon dont elle organise, manipule, stocke... Les donnes sont transmissent lapplication ou aux utilisateurs externes, toutes ces oprations tant internes la couche d'accs aux donnes. Cette couche est souvent implante avec un systme de gestion de base de donnes. L'interface propose est souvent SQL, tel que MySQL (PHPmyAdmin) de notre systme.

BOUAZZA Ferouk

105

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Figure 106: Architecture 3-tiers

2. Test de lapplication
2.1 Interface de connexion

Figure 107: Interface de connexion Lors de la connexion, lutilisateur doit disposer dun compte dutilisateurs enregistrer dans la base de donnes de lapplication. Lors de laccs lapplication lutilisateur se retrouve dans la page login.php. Si lutilisateur essai daccder lapplication sans avoir connect, il passe par une vrification qui le redirige vers la page Connexion. La combinassions login/mot de passe sera envoyer du formulaire de connexion vers la page elle-

BOUAZZA Ferouk

106

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

mme Connexion afin dexcut le script de connexion, qui vrifie lexistence de lutilisateur dans la base de donnes et vrifie le mot de passe. Sil trouve un erreur, le script redirige lutilisateur vers la page Connexion et renvoi un message pour une autre tentative de connexion. 2.2 Interface daccueil

Figure 108: Interface de l'accueil (Vue administrateur) Si tout est bien pass, il sera rediriger vers la page Accueil. Avant de charger la page Accueil, un script vrifie lexistence dune session et si le compte de lutilisateur possde des privilges administrateur ou non.

BOUAZZA Ferouk

107

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Figure 109: Interface d'accueil (Vue Membre) Si le compte de lutilisateur ne possde pas des privilges administrateur, un script dsactive tout les options dadministration tel que la gestion des dossiers et la gestion des comptes de lutilisateur. Et il ne permet lutilisateur que de voir les dossiers de fabrication existants et la dconnexion. Si le compte de lutilisateur possde des privilges dadministration, le script active les options dadministration (Gestion des comptes utilisateurs et dossiers de fabrication). En cliquant sur le bouton, la session se termine et lutilisateur se redirige vers la page Connexion.

BOUAZZA Ferouk

108

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

2.3 Interface de gestion des utilisateurs

Figure 110: Interface de gestion des utilisateurs En cas ou lutilisateur est un administrateur, il a la possibilit daccder vers la gestion des comptes dutilisateur en cliquant sur le bouton Gestion des utilisateurs dans la barre de navigation. Ladministrateur sera rediriger vers la page Gestion des utilisateurs. Avant de charger la page, un script vrifie de nouveau si le compte est possde des privilges dadministration, afin de protger la page contre les essais daccs partir du lien dans la barre de lurl du navigateur. Si ne possde pas des privilges dadministration une page daccs refuser saffiche. Si non la page Gestion des utilisateurs saffiche.

BOUAZZA Ferouk

109

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Figure 111: fonctionnalit gestion des utilisateurs Dans la page Gestion des utilisateurs ladministrateur a la possibilit de lister les comptes des utilisateurs laide de la fonction de recherche. Si lutilisateur clique le bouton rechercher en laissant le champ de recherche vide un script renvoi tout les comptes de lutilisateur et les affiche dans un tableau en ordre dcroissant. Si ladministrateur propose un nom dutilisateur pour la recherche, un script affiche uniquement le compte relier au nom dutilisateur proposer. Ladministration peut choisir entre lister les comptes selon un ordre croissant, en cliquant sur le bouton rechercher un script excute une requte qui renvoi les compte de la base de donnes en ordre croissant en slectionnant plus rcent . Ou il peut afficher les comptes bannis en slectionnant bannis et cliquant le bouton rechercher ce qui excute une requte qui importe les comptes banni.

BOUAZZA Ferouk

110

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

2.4 Interface de gestion des dossiers

Figure 112: Interface de gestion des dossiers Linterface de gestion des dossiers de fabrication permet ladministrateur de lapplication de grer les dossiers de fabrication. Le processus de cration des dossiers passe par des tapes : Lors de la premire tape, ladministrateur commence par crer larborescence des dossiers qui caractrise le dossier de fabrication. Ladministrateur doit entrer le nom du client, catgorie, Famille et rfrence du produit Aprs quil clique tape suivante Larborescence des dossiers sera vrifis, auto-gnrs et archivs dans la base de donnes.

BOUAZZA Ferouk

111

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Figure 113: Gestion des dossiers tape 2 Lors de la deuxime tapes, ladministrateur doit entrer le nom du prparateur, ingnieur de produit de fabrication et ingnieur de qualit de produit. Lorsquil clique sur Etape suivante , les informations seront stockes dans la base de donnes.

BOUAZZA Ferouk

112

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Figure 114: Gestion des dossiers tape 3 Lors de la troisime tape, ladministrateur prcise le nombre des tapes de la phase. Lorsque il appuy Etape suivante , les information seront stocker dans la base de donnes et envoyer la page suivante en utilisant la requte denvoi GET.

BOUAZZA Ferouk

113

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Figure 115: Gestion des dossiers tape 4 Suivant le nombre prcisez lors de ltape prcdente, lapplication gnre des champs de nom de ltape et symbole. Ladministrateur doit saisir les informations et lorsquil appuy Etape suivante , lapplication stocke les informations.

BOUAZZA Ferouk

114

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Figure 116: Gestion des dossiers tape 5 La cinquime tape est ltape de gnration de synoptique. Ladministrateur peut ajouter des tapes de fabrication. Un fichier au format PDF sera gnr dans larborescence crer prcdemment. Enfin, Il est noter que la plupart des fonctionnalits ont t ralis et il ne reste que quelques petites parties qui seront ralis et ajouter plus tard.

BOUAZZA Ferouk

115

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Conclusion Gnrale
Aprs trois mois de travail conscutif au sein dun groupe des personnes trs solidaires, nous avons cltur notre projet de fin dtudes qui a comme sujet Dveloppement dune application intranet de gestion des dossiers de fabrication . Ce projet qui a prsent ds le dbut un dfi, on a trouv au fur et mesure des problmes surtout dordre temporelle. Au dbut, passer mon stage dans latelier de fabrication tais trs utile, mais avec le temps des problmes apparaissent. Puis ce que lenvironnement de travail tais destiner la fabrication et pas la dveloppement informatique : Il n y a pas de connexion internet et la protection du rseau interne tait trs stricte. La prsence tait obligatoire et lorsque jai signal le problme la ressource humaine, il ntait pas coopratif malgr quil existe un dpartement informatique. Donc jai essay de profiter des weekends et de temps libre chez moi afin de trouver un environnement informatique. Mr KHILI Badie tait ingnieur de fabrication et il na pas une grande ide dans le domaine de dveloppement web (internet/intranet), il a essay toujours de maider et de trouver des solutions pour les problmes mentionnes prcdemment. Grce au bon encadrement et un effort supplmentaire on a surpass ces problmes. Au dbut, notre recherche a eu pour objectifs la dcouverte et lobservation des solutions existantes. Lanalyse de lexistant nous a permis de clarifier les anomalies viter dans le futur systme. Lutilisation de processus unifie tout au long de notre projet nous a simplifi les tches surtout lors de la phase de conception. Nous avons commenc la phase de dveloppement avec curiosit afin de dcouvrir les nouvelles technologies PHP5, Twitter Bootstrap, Jquery/Jquery UI, CSS3, JavaScript, HTML2PDF API et MxGraph... Jai des

BOUAZZA Ferouk

116

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

expriences professionnelles prcdentes dans le domaine de dveloppement web, mais ctait la premire fois que je dveloppe une application de A Z, puis ce que jai lhabitude dutiliser les CMS et de les manipuler selon mes dsirs. Et ctait la premire fois que je runis toutes ses technologies dans une application. Techniquement, lutilisation de ses technologies tais trs utile et surtout en suivant les documentations et le support de chaque technologie qui a facilit normment lutilisation. La conception, linteractivit taient trs amusantes raliser. Le test du systme a t ralis avec le client qui nous a demand damliorer les fonctionnalits suivantes dans le futur : - La sparation de module de gnration du fichier PDF de la fonctionnalit de gestion des dossiers. La cration du synoptique est une tche principale elle doit tre sparer des autres tches. - Lamlioration de la processus de gnration des dessins graphique lors de cration des graphes synoptiques, ce qui rend la cration du synoptique plus libre et prcise. - Lajout dun module de log qui notifie les administrateurs de toutes les actions fait par dautres utilisateurs, ce qui facilite la tche de contrle pour plus de scurit et la dlimitation des responsabilits. Pour clturer, notre application permet la gestion des dossiers de fabrication, mais, elle est ouverte sur des futures extensions pour la gestion de nimporte quelle systme de fabrication ou tout un rseau fabrication, peut tre une application en ligne collaboration o le client peut participer directement la tche de cration des dossiers de fabrication etc.

BOUAZZA Ferouk

117

Projet de fin dtude / 2012-2013


Ecole Centrale Polytechnique Prive de Tunis

Bibliographie
1) Architecture 3-tiers. (s.d.). Rcupr sur Wikipedia: http://fr.wikipedia.org/wiki/Architecture_trois_tiers 2) Conversion html PDF. (s.d.). Rcupr sur HTML2PDF: http://html2pdf.fr/ 3) EASY PHP. (s.d.). Rcupr sur Easy php: http://www.easyphp.org/ 4) Historique. (s.d.). Rcupr sur TIS circuits: http://www.tiscircuits.com/historique 5) JQuery. (s.d.). Rcupr sur Wikipedia: http://fr.wikipedia.org/wiki/JQuery 6) LAMP. (s.d.). Rcupr sur LAMP server: http://doc.ubuntufr.org/lamp 7) MAMP. (s.d.). Rcupr sur MAMP server: http://mamp.info/en/index.html 8) MSQL. (s.d.). Rcupr sur mysql.com: http://www.mysql.com/ 9) MxGraph. (s.d.). Rcupr sur JGraph: http://www.jgraph.com/mxgraph.html 10) 11) 12) 13) 14) Organigramme. (s.d.). Rcupr sur TIS circuits: http://www.tisPHP. (s.d.). Rcupr sur php.net: http://php.net/ Processus unifi. (s.d.). Rcupr sur developpez: Twitter Bootstrap. (s.d.). Rcupr sur Twitter Bootstrap: WAMP. (s.d.). Rcupr sur WAMP server: circuits.com/organigramme

http://sabricole.developpez.com/uml/tutoriel/unifiedProcess/ http://twitter.github.io/bootstrap/index.html http://www.wampserver.com/

BOUAZZA Ferouk

118