1
Dédicaces
Au Dieu tout puissant mon créateur.
A mes grands-parents.
A ma mère, ma raison d’être, ma raison de vivre, la ...
2
Tables des matières
Dédicaces .............................................................................................
3
I.2 Diagramme de déploiement ..............................................................................................
4
Tables des figures
Figure 1 : Gestion commerciale (Accès administratif) ...................................................
5
Remerciement
Premièrement, je remercie le directeur général Mr. Chokri Ben Salah de la société
NOVA CERAM de m'avoir acc...
6
Introduction générale
Souvent, les entreprises vivent divers changements d’une année à l’autre.
S’adapter à la nouvelle ...
7
Chapitre 1 :
Présentation du cadre du projet
Présentation du cadre du projet ISET Bizerte
8
Introduction
Dans ce chapitre, il s’agit de mettre notre travail dans son c...
Présentation du cadre du projet ISET Bizerte
9
Le siège social est fixé à Avenue Habib Bourguiba, 7070 Ras Jebel, gouverno...
Présentation du cadre du projet ISET Bizerte
10
II. Etudes de l’existant
II.1 Description de l’existant
En 2003, le direct...
Présentation du cadre du projet ISET Bizerte
11
II.2 Critique de l’existant
Cette application ne gère que quelques fonctio...
Présentation du cadre du projet ISET Bizerte
12
III. La méthodologie adoptée
III.1 Le formalisme UML
UML (Unified Modeling...
Présentation du cadre du projet ISET Bizerte
13
Conclusion
Tout au long de ce premier chapitre, nous avons cherché à prése...
13
Chapitre 2 :
Spécification des besoins
Spécification des besoins ISET Bizerte
14
Introduction
Dans tout système, les fonctionnalités doivent être mises en relati...
Spécification des besoins ISET Bizerte
15
I.2.2 Gestion des congés
L’application à développer doit permettre à chaque util...
Spécification des besoins ISET Bizerte
16
I.3 Besoins non fonctionnels
Les besoins non fonctionnels présentent les exigenc...
Spécification des besoins ISET Bizerte
17
II.3 Diagrammes des cas d’utilisation
Les cas d’utilisation recensent les expres...
Spécification des besoins ISET Bizerte
18
II.3.1 Diagramme des cas d’utilisation global
Figure 2 : Diagramme des cas d’uti...
Spécification des besoins ISET Bizerte
19
Ce diagramme met en évidence les principales fonctionnalités de notre système en...
Spécification des besoins ISET Bizerte
20
7. Cas d’utilisation « Passer des commandes » : Cette fonctionnalité permet aux
...
Spécification des besoins ISET Bizerte
21
II.3.2 Diagramme des cas d’utilisation « Gestion des congés »
Figure 4 : Diagram...
Spécification des besoins ISET Bizerte
22
II.3.3 Diagramme des cas d’utilisation « Gestion de stock »
Figure 5 : Diagramme...
Spécification des besoins ISET Bizerte
23
II.3.4 Diagramme des cas d’utilisation « Gestion des commandes »
Figure 6 : Diag...
Spécification des besoins ISET Bizerte
24
II.3.4 Diagramme des cas d’utilisation « Gérer la hiérarchie »
Figure 7 : Diagra...
25
Chapitre 3 : Conception
Conception ISET Bizerte
26
Introduction
La conception est une étape primordiale dans le cycle de vie des logiciels. En eff...
Conception ISET Bizerte
27
La figure suivante présente l’architecture MVC dans les applications Web/PHP. [Lien3]
Figure 8 ...
Conception ISET Bizerte
28
I.2 Diagramme de déploiement
Le diagramme de déploiement décrit la disposition physique des res...
Conception ISET Bizerte
29
II.1 Diagrammes de séquences
Les diagrammes de séquences décrivent les scénarios possibles pour...
Conception ISET Bizerte
30
II.1.2 Diagramme de séquence relatif à la gestion de la hiérarchie
L’administrateur de l’intran...
Conception ISET Bizerte
31
II.1.3 Diagramme de séquences relatif à la gestion des commandes
Le diagramme ci-dessous décrit...
Conception ISET Bizerte
32
II.1.4 Diagramme de séquences relatif à la demande de congé
Le diagramme ci-dessous décrit le c...
Conception ISET Bizerte
33
II.2 Diagramme de classes
Le diagramme de classes constitue un élément très important de la mod...
Conception ISET Bizerte
34
Figure 14 : Diagramme de classe global
Conception ISET Bizerte
35
Ce diagramme illustre les différentes fonctionnalités manipulées par l’utilisateur dans
l’intra...
Conception ISET Bizerte
36
II.3 Modèle relationnel
Le modèle relationnel est une manière de modéliser les informations con...
Conception ISET Bizerte
37
III. Conception graphique
Dans une approche Temps/Qualité, l’interface de l’application ci-dess...
Conception ISET Bizerte
38
Conclusion
A travers ce chapitre, j’ai présenté ma conception de l’application.
J’ai fourni, da...
39
Chapitre 4 : Réalisation
Réalisation ISET Bizerte
40
Introduction
Cette partie constitue le dernier volet de ce rapport. Elle a pour objet d’expose...
Réalisation ISET Bizerte
41
Les CSS (« Cascading Style Sheets ») (feuilles de styles en cascade), servent à
mettre en form...
Réalisation ISET Bizerte
42
AJAX (« Asynchronous Javascript And XML ») désigne un nouveau type de
conception de pages Web ...
Réalisation ISET Bizerte
43
II.1 Environnement matériel
Pour mener à terme la réalisation, nous avons utilisé comme enviro...
Réalisation ISET Bizerte
44
SGBD : MySQL est un Système de Gestion de Bases de Données (SGBD), parmi les
plus utilisés au ...
Réalisation ISET Bizerte
45
La page d’accueil de l’intranet expose, en plus des différents menus de navigations
possibles,...
Réalisation ISET Bizerte
46
L’interface ci-dessous illustre l’interface de la gestion de la hiérarchie qui correspond à
la...
Réalisation ISET Bizerte
47
L’interface ci-dessous illustre une des fonctionnalités de la gestion des ressources
humaines ...
Réalisation ISET Bizerte
48
Lors d’une commande bien saisie, une alerte s’affiche pour indiquer à l’utilisateur le
bon dér...
Réalisation ISET Bizerte
49
Cette interface représente l’état des commandes passées par les responsables des
agences (en c...
Réalisation ISET Bizerte
50
Juste après la confirmation d’une commande, le bon de livraison sera à la disponibilité
de res...
51
Conclusion générale
Ce projet de fin d’études, réalisé pour le compte de la société NOVA CERAM, ayant
pour thème « La r...
52
Table des sigles et des abréviations
Open Source : Ce terme désigne les logiciels dont la licence permet sa libre redis...
53
Bibliographie
http://www.developpez.com/
http://www.commentcamarche.net/
http://www.siteduzero.com/
http://fr.tuto.com/...
54
Néographie
Lien1 : http://www.additeam.com/SSII/uml/
Lien2 : http://notes.mazenod.fr/le-design-pattern-mvc1.html
Lien3 ...
55
Annexes
Annexes ISET Bizerte
56
Quelques aperçus de notre intranet :
L’interface suivante correspond au formulaire que l’administr...
Annexes ISET Bizerte
57
Cette interface représente des statistiques sur les stocks disponibles sous un format qui
respecte...
Annexes ISET Bizerte
58
L’interface présentée ci-dessus, donne une vue de perspective sur la rubrique
« Commandes » avec l...
Annexes ISET Bizerte
59
Cette interface présente un « Bon de commande », l’état d’une commande et la
possibilité d’impress...
Annexes ISET Bizerte
60
Cette interface représente l’opération de suppression pour des enregistrements
sélectionnés.
Figur...
Annexes ISET Bizerte
61
La section des congés représente les différentes options à ajouter lors du passage d’une
demande d...
Rappport PFE 2012 Ghodhbane Hani - OpenSNC
Rappport PFE 2012 Ghodhbane Hani - OpenSNC
Prochain SlideShare
Chargement dans…5
×

Rappport PFE 2012 Ghodhbane Hani - OpenSNC

307 vues

Publié le

OpenSNC - Application de gestion de stock et des ressources humaines

Publié dans : Logiciels
2 commentaires
0 j’aime
Statistiques
Remarques
  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
307
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
24
Commentaires
2
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Rappport PFE 2012 Ghodhbane Hani - OpenSNC

  1. 1. 1 Dédicaces Au Dieu tout puissant mon créateur. A mes grands-parents. A ma mère, ma raison d’être, ma raison de vivre, la lanterne qui éclaire mon chemin et m’illumine de douceur et d’amour. A mon père, en signe d’amour, de reconnaissance et de gratitude pour tous les soutiens et les sacrifices dont il a fait preuve à mon égard. A ma sœur et mon frère. A mes amis, et à tous mes proches A tous ceux que j’aime et qui m’aiment Je dédie ce modeste travail. Ghodhbane Hani
  2. 2. 2 Tables des matières Dédicaces ................................................................................................................................... 1 Tables des matières .................................................................................................................... 2 Tables des figures....................................................................................................................... 4 Remerciement............................................................................................................................. 5 Introduction générale.................................................................................................................. 6 Chapitre 1 : Présentation du cadre du projet .............................................................................. 7 I. Présentation............................................................................................................................. 8 I.1 Contexte général du projet.................................................................................................... 8 I.2 Présentation de la société...................................................................................................... 8 I.2.1 Description de la structure concernée par le stage............................................................. 9 II. Etudes de l’existant.............................................................................................................. 10 II.1 Description de l’existant.................................................................................................... 10 II.2 Critique de l’existant ......................................................................................................... 11 II.3 Solution proposée .............................................................................................................. 11 III. La méthodologie adoptée ................................................................................................... 12 III.1 Le formalisme UML......................................................................................................... 12 III.2 Le processus de développement adopté ........................................................................... 12 III. Planification du projet ........................................................................................................ 12 Chapitre 2 : Spécification des besoins...................................................................................... 13 I. Etude des besoins.................................................................................................................. 14 I.1 Spécification des exigences ................................................................................................ 14 I.2 Besoins fonctionnels ........................................................................................................... 14 I.3 Besoins non fonctionnels .................................................................................................... 16 II. Les diagrammes de cas d’utilisation.................................................................................... 16 II.1 Modélisation des cas d’utilisation ..................................................................................... 16 II.2 Identification des acteurs................................................................................................... 16 II.3 Diagrammes de cas d’utilisation........................................................................................ 17 II.3.1 Diagramme des cas d’utilisation global.......................................................................... 18 II.3.2 Diagramme des cas d’utilisation « Gestion des congés »............................................... 21 II.3.3 Diagramme des cas d’utilisation « Gestion de stock »................................................... 22 II.3.4 Diagramme des cas d’utilisation « Gestion des commandes »..................................... 23 II.3.4 Diagramme des cas d’utilisation « Gérer la hiérarchie »................................................ 24 Chapitre 3 : Conception............................................................................................................ 25 I. Conception architecturale...................................................................................................... 26 I.1 Choix de l’architecture de développement ......................................................................... 26
  3. 3. 3 I.2 Diagramme de déploiement ................................................................................................ 28 II. Conception technique .......................................................................................................... 28 II.1 Diagrammes de séquences................................................................................................. 29 II.1.1 Diagramme de séquence relatif à l’authentification ....................................................... 29 II.1.2 Diagramme de séquence relatif à la gestion de la hiérarchie.......................................... 30 II.1.3 Diagramme de séquences relatif à la gestion des commandes ....................................... 31 II.1.4 Diagramme de séquences relatif à la demande de congé ............................................... 32 II.2 Diagramme de classes ....................................................................................................... 33 II.3 Modèle relationnel............................................................................................................. 36 III. Conception graphique......................................................................................................... 37 Chapitre 4 : Réalisation............................................................................................................ 39 I. Choix technologique ............................................................................................................. 40 II. Environnement de travail..................................................................................................... 42 II.1 Environnement matériel .................................................................................................... 43 II.2 Environnement logiciel...................................................................................................... 43 III. Travail réalisé ..................................................................................................................... 44 III. Implémentation de l’application......................................................................................... 50 Conclusion générale ................................................................................................................. 51 Table des sigles et des abréviations.......................................................................................... 52 Bibliographie............................................................................................................................ 53 Néographie ............................................................................................................................... 54 Annexes.................................................................................................................................... 55
  4. 4. 4 Tables des figures Figure 1 : Gestion commerciale (Accès administratif) ............................................................ 10 Figure 2 : Diagramme des cas d’utilisation global................................................................... 18 Figure 3 : Attribution des droits d’accès à l’intranet................................................................ 19 Figure 4 : Diagramme des cas d’utilisation « Gérer les demandes des congés »..................... 21 Figure 5 : Diagramme des cas d’utilisation « Gestion de stock »............................................ 22 Figure 6 : Diagramme des cas d’utilisation « Gestion des commandes »................................ 23 Figure 7 : Diagramme des cas d’utilisation « Gérer la hiérarchie »......................................... 24 Figure 8 : Architecture MVC ................................................................................................... 27 Figure 9 : Diagramme de déploiement..................................................................................... 28 Figure 10 : Diagramme de séquence relatif à l’authentification ............................................. 29 Figure 11 : Diagramme de séquence relatif à la gestion de la hiérarchie................................. 30 Figure 12 : Diagramme de séquence relatif à la gestion des commandes................................ 31 Figure 13 : Diagramme de séquence relatif à la demande de congé........................................ 32 Figure 14 : Diagramme de classe global .................................................................................. 34 Figure 15 : Maquette du site intranet ....................................................................................... 37 Figure 16 : Interface d’accueil.................................................................................................. 45 Figure 17 : La gestion de la hiérarchie..................................................................................... 46 Figure 18 : Les profils des utilisateurs ..................................................................................... 47 Figure 19 : Validation d’une commande.................................................................................. 48 Figure 20 : États des commandes............................................................................................. 49 Figure 21 : Bon de livraison (Après confirmation).................................................................. 50 Figure 22 : L’interface d’ajout d’articles ................................................................................. 56 Figure 23 : Les statistiques des stocks ..................................................................................... 57 Figure 24 : Liste des commandes............................................................................................. 58 Figure 25 : Bon de commande ................................................................................................. 59 Figure 26 : Suppression des enregistrements ........................................................................... 60 Figure 27 : Demande de congé................................................................................................. 61
  5. 5. 5 Remerciement Premièrement, je remercie le directeur général Mr. Chokri Ben Salah de la société NOVA CERAM de m'avoir accueilli en tant que stagiaire. Puis je remercie MR. Abdelkader Ben Khelifa le directeur commercial de coordination NOVA CERAM de m’accepte comme un Stagiaire de l’ISET du Bizerte. Je renouvelle mes remerciements à Mr. Abdelkader Ben Khelifa qui a consacré son temps précieux à mon aide et m'a facilité l'accès aux informations. Je tiens à remercier finalement tout le cadre enseignement de l’ISET qui m'a offert cette occasion pour effectuer ce stage de projet fin d’études qui ne cesse de m'enseigner les principes de l'amitié de la générosité et l'esprit de la tolérance, ces principes ne peuvent qu’accroître l'efficience du travail en commun et constituent le ferment qui donne son vrai sens à la vie professionnelle.
  6. 6. 6 Introduction générale Souvent, les entreprises vivent divers changements d’une année à l’autre. S’adapter à la nouvelle situation s’avère indispensable afin de suivre le progrès et d’atteindre une importante place dans le marché tenant compte de la concurrence entre les entreprises. La mise en place d’un système d’information est une étape importante pour une entreprise. Ce système doit répondre aux besoins de l’entreprise à moyen et à long terme dans une optique d’évolution des plateformes et des systèmes en application. En effet, ces systèmes d’information ont toujours eu pour souci la gestion de l’information. Par ailleurs, plusieurs innovations technologiques encouragent les entreprises à informatiser leurs services et leurs procédures administratives dont intranet. L’intranet instaure une communication entre l’entreprise et ses salariés. Cette communication est appelée B2E (Business To Employee). Ainsi, notre rapport s’organise de la manière suivante : Dans un premier chapitre nous présenterons le contexte général de notre projet ainsi que la méthodologie de développement adoptée. Le deuxième chapitre détaille les besoins fonctionnels et non fonctionnels. La phase de conception fait l’objet du troisième chapitre. Le dernier chapitre décrit les étapes de réalisation, les technologies utilisées ainsi que les résultats réalisés à travers quelques interfaces homme-machine.
  7. 7. 7 Chapitre 1 : Présentation du cadre du projet
  8. 8. Présentation du cadre du projet ISET Bizerte 8 Introduction Dans ce chapitre, il s’agit de mettre notre travail dans son contexte général. Nous décrivons alors dans la première section le cadre général du projet. Puis dans la deuxième section, nous présentons le travail demandé. Et pour finir, nous introduisons le processus de développement adopté. I. Présentation I.1 Contexte général du projet Dans le cadre de la collaboration entre le milieu professionnel et institutionnel, ce stage a été lancé. Il se présente comme le projet de fin d’études d’une formation de licence au sein de l’Institut Supérieur des Etudes Technologiques de Bizerte. Ce projet s’est déroulé au sein de NOVA CERAM, durant la période allant du 10 février au 10 juin 2012. Commençons par présenter cette société. I.2 Présentation de la société La Société NOVA CERAM (SNC) a été créée le 01/08/1998, elle a pour objectif de vendre en détails et en gros les articles sanitaires, faïences, grés, cabines de douches, robinetteries, baignoires et tuiles etc. C’est une société anonyme à responsabilité limitée (SARL), son capital s’élève à 15 000 DT. CARTE D'IDENTITE DE LA SNC :  Forme Juridique : Société anonyme à responsabilité limitée (SARL)  Chiffre d'affaires (2010) : 500 000 Dinars  Identification Fiscale : 457249J/A/M/001  N° CNSS : 25166-43  Registre de Commerce : 98T4927SARLB1
  9. 9. Présentation du cadre du projet ISET Bizerte 9 Le siège social est fixé à Avenue Habib Bourguiba, 7070 Ras Jebel, gouvernorat de Bizerte. En 2005, les actionnaires de NOVA CERAM décident de lancer une nouvelle agence à El Alia, gouvernorat de Bizerte. En 2009, NOVA CERAM participe au festival européen « Festival de Céramique De Paris 11ème » qui a eu lieu les 27, 28 et 29 mars 2009. En 2010, NOVA CERAM ouvre une nouvelle salle d’exposition située à Raoued gouvernorat de l’Ariana. En 2011, NOVA CERAM ouvre une nouvelle salle d’exposition située à Oued EL Marj gouvernorat de Bizerte. Remarque : Chaque année, lors de l’exposition des entreprises spécialisées dans le domaine de sanitaires, faïences et matériaux de constructions et décoration, le gérant participe pour découvrir les nouveautés de marché. I.2.1 Description de la structure concernée par le stage La direction commerciale est gérée par un directeur qui a comme responsabilité :  La présentation de l’entreprise en absence du gérant.  La gestion des relations clientèles.  La gestion des ventes et d’approvisionnement.  La collaboration avec les agents de vente.  La participation à la stratégie de travail (promotion, formation des ouvriers etc.).  La mise en place de nouvelles méthodes de commercialisation et présentation des articles.  La négociation avec les fournisseurs, clients, responsables bancaires etc.
  10. 10. Présentation du cadre du projet ISET Bizerte 10 II. Etudes de l’existant II.1 Description de l’existant En 2003, le directeur commercial fait appel aux services d’une boite de développement, pour créer une application de gestion de stock car le chiffre d’affaires de la société à évolué d’où la nécessité d’une solution informatisée pour gérer les différentes tâches liées à la bonne gestion du stock, mais aussi l’impression des factures pour les clients. Figure 1 : Gestion commerciale (Accès administratif) Lors du lancement de la société, le responsable n’a pas senti le besoin d’acquérir une application pour gérer les ressources humaines. En effet il n’y avait que 3 salariés, il utilisait la méthode classique basée sur des fiches.
  11. 11. Présentation du cadre du projet ISET Bizerte 11 II.2 Critique de l’existant Cette application ne gère que quelques fonctionnalités depuis son implantation. Cependant, l’évolution qu’a connu NOVA CERAM pendant les dernières années a poussé la direction commerciale à chercher une solution plus développée qui répond aux besoins de la société du côté gestion à distance, et optimisation des couts de consultations de stocks. Les responsables des agences implantées dans des sites différents, rencontrent chaque jour des problèmes de consultation des données car l’application centrale n’est accessible que localement. En effet, chaque responsable de salle d’exposition doit contacter le directeur commercial pour avoir des informations sur la mise à jour des prix et des stocks. Ceci a des inconvénients :  La perte de temps.  Couts élevés des consultations par moyens de télécommunication.  Risque d’incohérence au niveau des informations. II.3 Solution proposée La direction commerciale a proposé, comme sujet de PFE, la création d’une application de gestion de stock et des ressources humaines accessible par toutes les agences. Les avantages des cette solution sont :  Gain de couts lié à la communication  Gain du temps attaché à l’opération (mise à jour de la base des articles)  Garantie d’un accès à distance pour gérer l’application
  12. 12. Présentation du cadre du projet ISET Bizerte 12 III. La méthodologie adoptée III.1 Le formalisme UML UML (Unified Modeling Language) est un langage de modélisation graphique à base de pictogrammes. Il est apparu dans le monde du génie logiciel, dans le cadre de la conception orientée objet. Couramment utilisé dans les projets logiciels, il peut être appliqué à toutes sortes de systèmes ne se limitant pas au domaine informatique. [Lien1] UML possède une approche entièrement objet couvrant les étapes du cycle de développement : l’analyse, la conception et la réalisation. III.2 Le processus de développement adopté Un processus définit une séquence d’étapes, en partie ordonnées, qui concourent à l’obtention d’un système logiciel ou à l’évolution d’un système existant. L’objet d’un processus de développement est de produire des logiciels de qualité qui répondent aux besoins de leurs utilisateurs dans les délais prévus et suivant les coûts fixés. La méthodologie de conception adoptée est : le processus unifié. C’est un processus de développement logiciel construit sur UML. Il est itératif et incrémental, centré sur l’architecture et piloté par les cas d’utilisation. Ses activités de développement sont définies par 5 disciplines fondamentales qui décrivent la capture des besoins, l’analyse et la conception, l’implémentation, le test et le déploiement. III. Planification du projet  Elaboration du cahier des charges  Conception de l’application  Réalisation  Test, Mise en place d’application  Préparation de la soutenance technique  Préparation de la soutenance finale
  13. 13. Présentation du cadre du projet ISET Bizerte 13 Conclusion Tout au long de ce premier chapitre, nous avons cherché à présenter le contexte général de notre projet. Dans la partie suivante nous nous focaliserons sur la spécification des besoins de l’intranet.
  14. 14. 13 Chapitre 2 : Spécification des besoins
  15. 15. Spécification des besoins ISET Bizerte 14 Introduction Dans tout système, les fonctionnalités doivent être mises en relation avec un ensemble de besoins utilisateurs. Ces besoins, qui diffèrent d’un organisme à un autre, définissent les services que les utilisateurs s’attendent à voir fournis par ce système. Nous commencerons, dans ce chapitre, par la définition des besoins fonctionnels et non fonctionnels. Puis, à partir de cette spécification, nous identifierons les acteurs ainsi que les cas d’utilisations de notre application. I. Etude des besoins I.1 Spécification des exigences Au niveau de cette section, nous décrirons l’ensemble de nos besoins fonctionnels et non fonctionnels nécessaires pour la modélisation et la mise en œuvre du système proposé. I.2 Besoins fonctionnels Dans cette sous-section, nous recenserons les principales contraintes fonctionnelles affectant le projet. Ainsi, l’intranet doit permettre la gestion des modules suivants: I.2.1 Gestion de ressources humaines  Gestion des employées « Gérer un annuaire des employés » L’application doit offrir des outils pour la gestion des employés (consultation, ajout, suppression, modification, recherche)  Gestion des clients (Informations sur les clients « carnet d’adresse ») L’application doit apporter la possibilité de gérer la liste des clients de l’entreprise (consultation, ajout, suppression, modification, recherche)  Gestion des fournisseurs (Informations sur les fournisseurs « carnet d’adresse ») L’application doit garantir la bonne gestion des fournisseurs (consultation, ajout, suppression, modification, recherche)
  16. 16. Spécification des besoins ISET Bizerte 15 I.2.2 Gestion des congés L’application à développer doit permettre à chaque utilisateur de profiter de certaines fonctionnalités selon les droits d’accès qui lui sont attribués, y compris :  Demande de congé  Suivi des demandes de congés  Affichage de l'historique des congés, et de l'historique des demandes en cours  Possibilité pour le responsable de refuser les congés d'un utilisateur  Possibilité d’imprimer une demande et l’apercevoir avant l’impression I.2.3 Gestion des avances sur salaires Cette application doit permettre aux employés de la société de profiter de certaines fonctionnalités dont nous citons :  Demande d’avance sur salaire  Affichage de l'historique des congés, et de l'historique des demandes en cours  Possibilité pour le responsable de refuser la demande d’avance sur salaire d'un employé I.2.4 Gestion des recrutements  Possibilité au responsable d’agence de passer une demande de recrutement d’un nouveau salarié  Possibilité au responsable d’agence de renouveler le contrat d’un employé I.2.5 Gestion des formations  Possibilité au directeur commercial de proposer un stage, une conférence ou invitation vers un salon d'exposition  Possibilité pour l’utilisateur de refuser la formation I.2.6 Gestion de stock L’application doit assurer la bonne gestion des articles (l’ajout, suppression, consultation, recherche). I.2.7 Gestion des commandes  Passer une commande  Supprimer une commande  Consultation des commandes traitées ou en cours  Affichage de l'historique des commandes  Possibilité d’imprimer une commande
  17. 17. Spécification des besoins ISET Bizerte 16 I.3 Besoins non fonctionnels Les besoins non fonctionnels présentent les exigences internes du système qui sont cachées pour les utilisateurs. Parmi ces besoins nous citons :  Les couleurs doivent être harmonieuses et expressives.  Le contenu doit être structuré, compréhensible, cohérent et lisible.  L’ergonomie des interfaces homme-machine (IHM) : Il s’agit d’une application Web, elle doit présenter des interfaces utilisateurs conviviales et bien structurées du point de vue contenu informationnel.  La sécurité : Les droits d’accès au système doivent être bien attribués aux différents partenaires, afin d’assurer la sécurité des données. De plus, le système doit disposer d’un mécanisme d’authentification limitant l’accès aux utilisateurs.  La compatibilité : L’application doit être compatible avec la majorité des navigateurs Web en particulier Google Chrome.  Les contraintes techniques : Le système doit être développé en Open Source. En outre, il doit être portable et fonctionnel sur plusieurs systèmes d’exploitation. II. Les diagrammes de cas d’utilisation II.1 Modélisation des cas d’utilisation Les cas d’utilisation présentent une technique de description du système privilégiant le point de vue de l’utilisateur. Ils permettent aussi de délimiter le système et de cibler le projet. II.2 Identification des acteurs Suivant la définition des besoins de l’entreprise et les fonctionnalités avancées en termes d’attribution de droits aux différents utilisateurs, nous distinguons les acteurs suivant :  Administrateur de l’application (le directeur commercial)  Un employé (utilisateur)  Responsable d’agence
  18. 18. Spécification des besoins ISET Bizerte 17 II.3 Diagrammes des cas d’utilisation Les cas d’utilisation recensent les expressions des besoins des classes d’utilisateurs. En partant du principe qu’un système est avant tout construit pour les utilisateurs, le diagramme des cas d’utilisation permet de structurer et d’articuler les besoins et les fonctionnalités et de définir la manière dont les utilisateurs pourraient interagir avec le système d’une manière plus simple et efficace. Ils décrivent et définissent, sous la forme d’action et de réaction, le comportement d’un système avec ses acteurs et son environnement. Nous allons maintenant mettre en évidence les cas d’utilisations et les relations entre eux.
  19. 19. Spécification des besoins ISET Bizerte 18 II.3.1 Diagramme des cas d’utilisation global Figure 2 : Diagramme des cas d’utilisation global <<Include>> Le directeur commercial Intranet Employé Responsable agence Administrateur Demandes de congés S'authentifier Demandes d'avances sur salaire Consulter le stock Passer commandes Demande de recruter un nouvel employé Gérer le stock Traiter les demandes de congés Traiter les demandes d'avances sur salaire Gérer l'annuaire des clients, fournisseurs Traiter commandes Gérer les recrutements Gérer les formations Gérer l’hiérarchie Consulter demandes de congés Consulter demandes d'avances sur salaire Suivre commandes <<Include>> <<Include>> <<Include>> <<Include>> <<Include>> <<Include>> <<Include>> <<Include>> <<Include>> <<Include>> <<Include>> <<Include>> <<Include>> <<Include>> <<Include>> <<Include>>
  20. 20. Spécification des besoins ISET Bizerte 19 Ce diagramme met en évidence les principales fonctionnalités de notre système en spécifiant les rôles des acteurs et leur participation dans l’évolution de l’application. 1. Cas d’utilisation « s’authentifier » : Il est effectué par tous les acteurs du système. Il consiste à entrer un login et un mot de passe que le système va par la suite vérifier, l’attribution des droits d’accès à l’intranet est expliquée par le graphe suivant : Figure 3 : Attribution des droits d’accès à l’intranet 2. Cas d’utilisation « Demander congé » : C’est grâce à cette fonctionnalité que l’employé demande un congé pour être traité par la suite par le responsable (Administrateur). 3. Cas d’utilisation « Demander avance sur salaire » : L’employé demande une avance sur salaire pour être traitée par la suite par le responsable (Administrateur). 4. Cas d’utilisation « Consulter demande de congé » : À partir de cette rubrique l’employé peut afficher l’état de sa demande de congé et cette tâche peut être aussi faite par l’administrateur. 5. Cas d’utilisation « Consulter demande d'avance sur salaire » : Les utilisateurs de l’intranet peuvent consulter leurs demandes d’avance sur salaire (Traitée ou en cours). 6. Cas d’utilisation « Consulter le stock »: Seuls le directeur commercial ou les responsables d'agences qui peuvent visualiser le stock.
  21. 21. Spécification des besoins ISET Bizerte 20 7. Cas d’utilisation « Passer des commandes » : Cette fonctionnalité permet aux responsables d’agences de passer des commandes. 8. Cas d’utilisation « Suivre les commandes » : Les responsables d’agences peuvent suivre l’état des commandes passées. 9. Cas d’utilisation « Demande de recruter un nouvel employé » : Les responsables d’agences peuvent demander au directeur commercial de recruter un nouvel employé. 10. Cas d’utilisation « Gérer les stocks » : À partir de cette rubrique le directeur commercial peut ajouter, supprimer, modifier, rechercher les articles en stock. 11. Cas d’utilisation « Traiter les commandes » : Cette fonctionnalité permet à l’administrateur de traiter les commandes passées par les responsables des agences. 12. Cas d’utilisation « Traiter les demandes de congés » : Seul le directeur commercial (Administrateur) peut traiter les demandes de congés de ses employées après avoir reçu une notification alertant d’une nouvelle demande. 13. Cas d’utilisation « Traiter les demandes d'avances sur salaire » : Seul le directeur commercial peut traiter les demandes d’avances sur salaire de ses employés après avoir reçu une notification alertant d’une nouvelle demande. 14. Cas d’utilisation « Gérer l'annuaire des clients, fournisseurs » : L’administrateur peut ajouter, supprimer, modifier, rechercher les clients et les fournisseurs. 15. Cas d’utilisation « Gérer les recrutements » : À partir de cette rubrique l'administrateur a le droit de traiter les demandes de recrutement passées par les responsables d’agences. 16. Cas d’utilisation « Gérer les formations » : L'administrateur peut diffuser une invitation de formation pour ses employés. 17. Cas d’utilisation « Gérer la hiérarchie » : Cette fonctionnalité permet à l’administrateur d’ajouter, supprimer, modifier un utilisateur, ajouter les droits d’accès aux différentes applications de l’intranet et définir le responsable de chaque agence.
  22. 22. Spécification des besoins ISET Bizerte 21 II.3.2 Diagramme des cas d’utilisation « Gestion des congés » Figure 4 : Diagramme des cas d’utilisation « Gérer les demandes des congés » Chaque utilisateur de l’intranet bénéficie des différentes fonctionnalités de la gestion de demandes des congés, l’employé peut :  Demander un congé d’une durée précise.  Consulter l’état des demandes de congé.  Imprimer la demande de congé une fois confirmée par l’administrateur. L’administrateur peut bénéficier de plus de certaines fonctionnalités y compris :  Traitement des demandes (confirmer/refuser la demande de congé) après une notification d’un nouvelle demande.  Consulter l’historique des congés des employés. Gestion des congés Employé Administrateur S'authentifier Demandes de congés Consulter l'historique des congés Imprimer demandes de congé Traiter les demandes de congés <<Include>> <<Include>> <<Include>> <<Include>> Consulter demandes de congés <<Include>> Le directeur commercial
  23. 23. Spécification des besoins ISET Bizerte 22 II.3.3 Diagramme des cas d’utilisation « Gestion de stock » Figure 5 : Diagramme des cas d’utilisation « Gestion de stock » À partir de cette rubrique, la main est donnée à deux principaux acteurs pour interagir :  L’administrateur qui peut ajouter, supprimer, modifier, rechercher les articles en stock.  Les responsables des agences qui peuvent visualiser la liste des articles en stock. Gestion de stock Administrateur Responsable agence Consulter le stock Gérer le stock S'authentifier Ajouter article Supprimer article Modifier article <<Include>> <<Include>> Le directeur commercial
  24. 24. Spécification des besoins ISET Bizerte 23 II.3.4 Diagramme des cas d’utilisation « Gestion des commandes » Figure 6 : Diagramme des cas d’utilisation « Gestion des commandes » Grâce à cette section la main est donnée à deux principaux acteurs pour interagir. Commençons par le responsable d’agence qui bénéficie de plusieurs fonctionnalités dont nous citons :  Passer des commandes.  Suivre l’état des commandes passées.  Imprimer la commande confirmée par l’administrateur. Enfin l’administrateur qui peut à son tour :  Gérer les commandes par confirmation ou refus.  Consulter l’historique des commandes traitées.  Imprimer les commandes traitées. Administrateur Responsable agence S'authentifier Traiter commandes Suivre commandes Passer commandes Imprimer commande Consulter l’historique des commandes Gestion des commandes <<Include>> <<Include>> <<Include>> <<Include>> <<Include>> Le directeur commercial
  25. 25. Spécification des besoins ISET Bizerte 24 II.3.4 Diagramme des cas d’utilisation « Gérer la hiérarchie » Figure 7 : Diagramme des cas d’utilisation « Gérer la hiérarchie » L’administrateur de l’intranet est privilégié par rapport au reste des utilisateurs de l’intranet par des spécifications d’administration :  L’ajout, la suppression et la modification des utilisateurs.  Ajout d'une nouvelle agence. Conclusion Dans ce chapitre, nous nous sommes intéressés à la spécification des besoins qui procure une vision plus claire du sujet et une compréhension plus profonde des tâches à réaliser par la suite. L’étape suivante comporte la phase de conception et de modélisation des besoins exprimés dans cette section. Gérer l’hiérarchie Administrateur S'authentifier Ajouter nouveau salarié Editer le profil d'un employé Ajouter nouvelle agence Modifier les droits d'acces <<Include>> <<Include>> <<Include>> <<Include>> Le directeur commercial
  26. 26. 25 Chapitre 3 : Conception
  27. 27. Conception ISET Bizerte 26 Introduction La conception est une étape primordiale dans le cycle de vie des logiciels. En effet, elle permet de préparer un modèle pour la réalisation à partir de la spécification et l’analyse. Elle représente le point de convergence des deux aspects : le quoi faire (analyse) et le comment faire (réalisation) ce qui justifie, parfois, le retour vers une étape précédente afin de rectifier un besoin pour pouvoir l’implémenter, ou affiner l’analyse. I. Conception architecturale I.1 Choix de l’architecture de développement Pour réaliser notre application, nous avons opté pour une architecture MVC (Modèle- Vue-Contrôleur). Elle repose sur la séparation du modèle de données de l’interface utilisateur et la logique de contrôle lors du développement d’une application logicielle. Ainsi, le travail se fera sur 3 parties fondamentales dans l'application finale : le modèle (les données), la vue (la présentation) et le contrôleur (les traitements).  Le modèle décrit les données à manipuler et définit les méthodes d’accès.  La vue s’occupe de la présentation des données récupérées à partir du modèle et met en œuvre la manière selon laquelle l’utilisateur peut interagir avec le système. Elle représente l’interface de communication avec les utilisateurs sans qu’elle fasse de traitement sur les données.  Le contrôleur gère les événements et la synchronisation de l’application, récupère les évènements venant de la vue, détermine quel traitements effectuer et appelle les modèles et les vues nécessaires à leurs réalisations en prenant le soin de faire la correspondance entre les données reçues par la vue et ceux définies dans le modèle. [Lien2]
  28. 28. Conception ISET Bizerte 27 La figure suivante présente l’architecture MVC dans les applications Web/PHP. [Lien3] Figure 8 : Architecture MVC Le traitement d'une demande d'un client se déroule selon les étapes suivantes : 1. Le client fait une demande au contrôleur. Ce contrôleur voit passer toutes les demandes des clients. C'est la porte d'entrée de l'application. 2. Le contrôleur traite cette demande. Pour ce faire, il peut avoir besoin de l'aide de la couche métier (regroupe les modules PHP nécessaires à la logique de l'application). 3. Le contrôleur reçoit une réponse de la couche métier. La demande du client a été traitée. 4. Le contrôleur choisit la réponse (vue) à envoyer au client. 5. La vue est envoyée au client. Une telle architecture est souvent appelée "Architecture 3-Tier" ou à 3 niveaux.
  29. 29. Conception ISET Bizerte 28 I.2 Diagramme de déploiement Le diagramme de déploiement décrit la disposition physique des ressources matérielles qui composent le système et montre la répartition des composants sur ces matériels ainsi que les connexions entre eux. La figure suivante illustre le diagramme de déploiement de notre système. Figure 9 : Diagramme de déploiement II. Conception technique Nous poursuivons l’analyse de notre système, et nous nous intéresserons dans une première partie à des scénarios liés à l’administrateur de l’application et aux quelques fonctionnalités offertes aux utilisateurs. Ensuite, nous présenterons le diagramme de classe global suivi par quelques vues détaillées de ce dernier. TCP/IP 1..1 1..* 1..1 1..* Client Navigateur Serveur d'application Apache Application Serveur base de données MySQL TCP-IP / HTTP
  30. 30. Conception ISET Bizerte 29 II.1 Diagrammes de séquences Les diagrammes de séquences décrivent les scénarios possibles pour un cas d’utilisation. C’est la représentation graphique des interactions entre les acteurs et le système selon un ordre chronologique. II.1.1 Diagramme de séquence relatif à l’authentification Pour accéder à certaines applications, chaque utilisateur doit passer par une étape d’authentification à partir de laquelle le système détermine le rôle de cet utilisateur (administrateur, employé ou responsable). Ce scénario correspond au cas d’utilisation « s’authentifier ». Figure 10 : Diagramme de séquence relatif à l’authentification Pour des raisons de simplicités nous représentons dans le reste des diagrammes de séquences l’interaction entre « View », « Model », « Controller » par la ligne de vie « Système ». sd Authentification [utilisateur inexistant] [utilisateur existant] Fin si Si non si alors Si 5 : [champs non vides] vérifier login et mot de passe 9 : afficher message d’erreur 10 : message d’erreur 8 : [OK] redirection à l'espace perso 7 : succès authentification 6 : résultat de vérification 4 : contrôler authentification 3 : [champs vides] message d’erreur 1 : introduire login et mot de passe 2 : valider les champs View Controller Model Utilisateur alors 5 : [champs non vides] vérifier login et mot de passe 9 : afficher message d’erreur 10 : message d’erreur 8 : [OK] redirection à l'espace perso 7 : succès authentification 6 : résultat de vérification 4 : contrôler authentification 3 : [champs vides] message d’erreur 1 : introduire login et mot de passe 2 : valider les champs
  31. 31. Conception ISET Bizerte 30 II.1.2 Diagramme de séquence relatif à la gestion de la hiérarchie L’administrateur de l’intranet possède privilèges pour la réalisation de quelques tâches comme la gestion des utilisateurs et des agences. Le diagramme ci-dessous illustre le cas d’utilisation « Gérer la hiérarchie ». Figure 11 : Diagramme de séquence relatif à la gestion de la hiérarchie sd Gérer de la hiérarchie 9 : message de succès d’ajout nouvelle entité 8 : sauvegarder les données d'une nouvelle entité ajouter utilisateur 5 : message d’erreur vérifier si les données saisies sont valides 4 : vérification 3 : remplir formulaire 2 : formulaire d’ajoute 1 : demande d'ajouter nouvelle entité Administrateur Système Base de données ref sd Authentification() si les données ne sont pas valides sinon les données sont valides alt 9 : message de succès d’ajout nouvelle entité 8 : sauvegarder les données d'une nouvelle entité 5 : message d’erreur 4 : vérification 3 : remplir formulaire 2 : formulaire d’ajoute 1 : demande d'ajouter nouvelle entité
  32. 32. Conception ISET Bizerte 31 II.1.3 Diagramme de séquences relatif à la gestion des commandes Le diagramme ci-dessous décrit le cas d’utilisation « Gestion des commandes ». Il explique comment un responsable d’agence doit procéder pour passer une commande. Figure 12 : Diagramme de séquence relatif à la gestion des commandes sd Gestion des commandes Fin si alors Si non si alors Si 15 : commande est confirmée 14 : changement de l’état de la commande à « conformée » + date livraison 13 : commande confirmer 12 : commande est refusée 11 : changement de l'état de la commande à « refusée » 10 : commande refuser 8 : confirmation d'envoi 9 : notification pour traiter nouvelle commande 7 : enregistrer la commande 6 : message d’erreur 5 : choisir les articles et quantités 4 : Vérification 3 : remplir formulaire de bon commande 2 : vue formulaire de bon commande 1 : demande pour passer une commande Responsable agence Administrateur Système Base de données ref sd Authentification() vérifier si les données saisies sont valides si les données ne sont pas valides si les données sont valides alt passage d'une commande passage d'une commande traiter une commande 15 : commande est confirmée 14 : changement de l’état de la commande à « conformée » + date livraison 13 : commande confirmer 12 : commande est refusée 11 : changement de l'état de la commande à « refusée » 10 : commande refuser 8 : confirmation d'envoi 9 : notification pour traiter nouvelle commande 7 : enregistrer la commande 6 : message d’erreur 5 : choisir les articles et quantités 4 : Vérification 3 : remplir formulaire de bon commande 2 : vue formulaire de bon commande 1 : demande pour passer une commande
  33. 33. Conception ISET Bizerte 32 II.1.4 Diagramme de séquences relatif à la demande de congé Le diagramme ci-dessous décrit le cas d’utilisation « Demander congé ». Il explique comment un utilisateur doit procéder pour effectuer une demande de congé. Figure 13 : Diagramme de séquence relatif à la demande de congé sd Demande congé Fin Si Alors Si non si 12 : Accepter congé Alors Si 10 : changement de l’état de demande de congé à « refusé » 13 : changement de l’état de la demande de congé à « validé » 14 : congé est validé 11 : congé est refusé 9 : refuser congé 8 : notification pour traiter nouvelle demande de congé 6 : enregistrer la demande 7 : confirmation de l'envoi 5 : message d’erreur 4 : vérification 3 : remplir formulaire de congé 1 : demande pour passer un congé 2 : formulaire de congé Base de donnéesSystème Utilisateur ref sd Authentification() vérifier si les données saisies sont valides Administrateur si les données ne sont pas valides si les données sont valides alt passage d'une demande de congé traiter une demande de congé 12 : Accepter congé 10 : changement de l’état de demande de congé à « refusé » 13 : changement de l’état de la demande de congé à « validé » 14 : congé est validé 11 : congé est refusé 9 : refuser congé 8 : notification pour traiter nouvelle demande de congé 6 : enregistrer la demande 7 : confirmation de l'envoi 5 : message d’erreur 4 : vérification 3 : remplir formulaire de congé 1 : demande pour passer un congé 2 : formulaire de congé
  34. 34. Conception ISET Bizerte 33 II.2 Diagramme de classes Le diagramme de classes constitue un élément très important de la modélisation : il permet de définir quelles seront les composantes du système final. Souvent un diagramme de classes proprement réalisé permet de structurer le travail de développement de manière très efficace.
  35. 35. Conception ISET Bizerte 34 Figure 14 : Diagramme de classe global
  36. 36. Conception ISET Bizerte 35 Ce diagramme illustre les différentes fonctionnalités manipulées par l’utilisateur dans l’intranet :  La classe « Employé » regroupe les caractéristiques d’un utilisateur et représente son profil.  La classe « Article » illustre l’ensemble des caractéristiques d’un article.  La classe « Client » regroupe les informations reliées à un client fidèle, un client passager n’est pas enregistré.  La classe « Fournisseur » regroupe les informations d’un fournisseur. Un fournisseur fournit un ou plusieurs articles.  La classe « Agence » regroupe des informations sur une agence.  La classe « Demande_recrutement » représente l’ensemble des demandes de recrutement par agence. Ce sont les demandes envoyées par les responsables des agences.  La classe « Commande » : chaque responsable d’agence a le droit de passer une ou plusieurs commandes, cette classe regroupe les informations sur une commande. Une commande contient un ou plusieurs articles.  La classe « Livraison » : Une commande traitée correspond à une livraison effectuée à une date donnée.  La classe « Demande » est la classe mère des classes suivantes :  La classe « Demande_congé » qui représente l’ensemble des demandes de congés par utilisateur. Ce sont les demandes envoyées par l’employé.  La classe « Demande_avance » qui représente l’ensemble de demandes d’avances par utilisateur. Ce sont les demandes envoyées par l’employé.  La classe « Formation » regroupe des informations sur une formation proposée par l’administrateur, et peut être suivie par un ou plusieurs employés.
  37. 37. Conception ISET Bizerte 36 II.3 Modèle relationnel Le modèle relationnel est une manière de modéliser les informations contenues dans une base de données. En appliquant les règles de passages de l'UML, d'un diagramme de classe vers un modèle relationnel, nous avons construit le schéma relationnel suivant : (Clés primaires : souligné en vert, Clés étrangères : suivie par #) Fournisseur (code_fourni, nom_prenom, type_fourni, activite_fourni, code_tva, adresse, code_postal, pays, ville, tel, fax, email, adresse_web, mode_paiement, forme_juridique) Client (code_client, nom, prenom, adresse, code_postal, type_client, activite_client, code_tva, pays, ville, tel, fax, email, adresse_web) Article (code_article, libelle_article, type_article, qte_stock, unite, prix_achat, prix_vente, stockable, code_fourni#) Employe (code_employe, nom, prenom, cin, sexe, salaire, fonction, adresse, code_postal, email, code_agence# ) Demande_avance (code_demande, commentaire, date_demande, etat_demande, montant, code_employe#) Demande_conge (code_demande, date_debut, date_fin, date_demande, commentaire, etat_demande, code_employe#) Formation (code_format, titre, description, date_debut, date_fin) Agence (code_agence, nom_agence, adresse, tel, fax, code_employe#) Commande (code_commande, commentaire, date_commande, etat_commande, date_livraison, code_agence #, code_client#) Demande_recrutement (code_demande, poste, commentaire, date_demande, date_debut, date_fin, etat_demande, code_agence#) Suivre (code_employe#, code_format#, etat) Ligne_commande (code_commande#, qte_commandee, code_article#)
  38. 38. Conception ISET Bizerte 37 III. Conception graphique Dans une approche Temps/Qualité, l’interface de l’application ci-dessous répond aux différentes attentes des utilisateurs qui se résument dans les points suivants (après un accord avec le responsable) :  Respecter la charte graphique.  Assurer le gain du temps.  Proposer toujours à l'utilisateur des actions réversibles.  Produire une réponse immédiate à toute action qui nécessite un temps important.  La couleur des fonds des boîtes de dialogue et des contrôles statiques doit être homogène pour toute l’application. Il en va de même pour les polices de caractères. Figure 15 : Maquette du site intranet
  39. 39. Conception ISET Bizerte 38 Conclusion A travers ce chapitre, j’ai présenté ma conception de l’application. J’ai fourni, dans un premier temps, une conception globale à travers laquelle j’ai décrit l’organisation du système. Ensuite, j’ai présenté la conception détaillée de l’application à travers les scénarios et le diagramme de classe puis j’ai présenté la conception graphique d’où le choix de la maquette. A présent, je vais entamer la partie réalisation.
  40. 40. 39 Chapitre 4 : Réalisation
  41. 41. Réalisation ISET Bizerte 40 Introduction Cette partie constitue le dernier volet de ce rapport. Elle a pour objet d’exposer le travail achevé. Pour cela nous commençons par présenter les choix technologiques. Puis, nous spécifions l’environnement matériel et logiciel supportant notre application. Nous terminons ensuite par une description du travail effectué en détaillant quelques fonctionnalités réalisées. I. Choix technologique Le HTML (« HyperText Mark-Up Language ») est un langage dit de « marquage » (de « structuration » ou de « balisage ») dont le rôle est de formaliser l'écriture d'un document avec des balises de formatage. Les balises permettent d'indiquer la façon dont doit être présenté le document et les liens qu'il établit avec d'autres documents. Le langage HTML permet notamment la lecture de documents sur Internet à partir de machines différentes, grâce au protocole HTTP, permettant d'accéder via le réseau à des documents repérés par une adresse unique, appelée URL. [Lien4] Utilisation : Avec HTML nous bénéficions d’une approche très facile pour représenter le traitement, ainsi que les formes (formulaires, menu, etc.). Le langage PHP («Hypertext Preprocessor ») est utilisé principalement en tant que langage de script côté serveur, ce qui veut dire que c'est le serveur (la machine qui héberge la page Web en question) qui va interpréter le code PHP et générer du code (constitué généralement d'XHTML ou d'HTML, de CSS, et parfois de JavaScript) qui pourra être interprété par un navigateur. PHP peut également générer d'autres formats en rapport avec le Web (comme le PDF) et aussi en format informatique ouvert représentant des données tabulaires (comme le CSV). [Lien5] Utilisation : Le choix de PHP est dédié principalement à la communication avec la base de données mais aussi au contrôle d’identification pour la connexion des utilisateurs.
  42. 42. Réalisation ISET Bizerte 41 Les CSS (« Cascading Style Sheets ») (feuilles de styles en cascade), servent à mettre en forme des documents web, type page HTML ou XML. Par l'intermédiaire de propriétés d'apparence (couleurs, bordures, polices, etc.) et de placement (largeur, hauteur, côte à côte, dessus-dessous, etc.), le rendu d'une page web peut être intégralement modifié sans aucun code supplémentaire dans la page web. Les feuilles de styles ont d'ailleurs pour objectif principal de dissocier le contenu de la page de son apparence visuelle. [Lien6] Utilisation : CSS m’a servi à développer un style (design), qui sera par la suite facile à manipuler. JavaScript est un langage de programmation complètement lié au langage HTML. Le développeur internet code ses pages HTML en y intégrant des sources JavaScript. Le visiteur, par l'intermédiaire de son navigateur, charge le code des pages. JavaScript est un langage objet et événementiel, interprété par le navigateur. Le développeur peut créer des objets sur la page, avec des propriétés et des méthodes et leur associer des actions en fonction d'événements déclenchés par le visiteur (passage de souris, clic, saisie clavier, etc). [Lien7] Utilisation : JavaScript a servi pour le contrôle de saisie sur les différents formulaires. JQuery est une bibliothèque JavaScript libre (open-source) qui porte sur l'interaction entre JavaScript (comprenant AJAX) et HTML, et a pour but de simplifier des commandes communes de JavaScript. Le Framework contient notamment les fonctionnalités suivantes : Parcours et modification du DOM (Document Object Model) Événements, Effets et animations Manipulations des feuilles de style en cascade (ajout/suppression des classes, d'attributs) Faire des requêtes AJAX [Lien8] Utilisation : JQuery m’a été utile pour appliquer quelques effets sur les fenêtres de dialogue.
  43. 43. Réalisation ISET Bizerte 42 AJAX (« Asynchronous Javascript And XML ») désigne un nouveau type de conception de pages Web Dynamiques. Cette informatique de développement repose sur la combinaison de technologies déjà existantes : HTML/CSS, JavaScript/DOM, XML et les requêtes HTTP. Les principaux avantages sont : Une importante vitesse de réponse aux actions de l'utilisateur Rafraîchissement portant uniquement sur les éléments de la page qui ont besoin de l'être Economie de la bande passante [Lien9] Utilisation : AJAX a permis d’informer en temps réel sue ce qui se passe dans la base (notification)  un outil pour visualiser le changement sans rafraichissement de l’interface (modification instantanée). JSON (« JavaScript Object Notion »), c’est un format de données textuel, générique, dérivé de la notation des objets du langage JavaScript. Il permet de représenter de l'information structurée. JSON est le langage idéal d’échange de données. Les avantages de JSON sont: La vitesse de traitement La simplicité de mise en œuvre [Lien10] Utilisation : JSON a servi à gérer le transfert de données, entre client et serveur. II. Environnement de travail Ce paragraphe décrit l’environnement matériel mis à la disposition du présent projet ainsi que l’environnement logiciel qui a permis à l’aboutissement de notre produit.
  44. 44. Réalisation ISET Bizerte 43 II.1 Environnement matériel Pour mener à terme la réalisation, nous avons utilisé comme environnement matériel un ordinateur ayant les caractéristiques suivantes : Caractéristiques Ordinateur de bureau Disque Dur (Go) 370 Mémoire RAM (Go) 2 Processeur Pentium IV, Dual-Core II.2 Environnement logiciel L’environnement Logiciel est comme suit : DreamWeaver CS 5 est une plateforme de développement pour la création de sites et d'applications Web. Le logiciel propose d'utiliser des outils d'inspection CSS pour la conception et de développer et améliorer des systèmes de gestion de contenus. Il dispose également d'un module de tests de compatibilité avec les navigateurs grâce à l'intégration avec Adobe BrowserLab. WampServer est une plate-forme de développement Web sous Windows pour des applications Web dynamiques à l’aide du serveur Apache2, du langage de scripts PHP et d’une base de données MySQL. Il possède également PHPMyAdmin pour gérer plus facilement les bases de données. Notepad++ est un éditeur de source avec mise en relief de la syntaxe et mise en forme de cette dernière. Ce logiciel vous permet également de colorer les mots définis par l'utilisateur.
  45. 45. Réalisation ISET Bizerte 44 SGBD : MySQL est un Système de Gestion de Bases de Données (SGBD), parmi les plus utilisés au monde. Il fait partie du quatuor LAMP, qui est l'association du système d'exploitation Linux, du serveur HTTP Apache, de MySQL et du langage de scripts PHP. Ce quatuor a pour but de créer un serveur de sites Web à partir de logiciels libres. Le couple PHP/MySQL utilisé conjointement avec Apache est la solution la plus utilisée pour la création de sites Web et est souvent proposée par les hébergeurs, ce qui est le cas de l'hébergeur utilisé par la structure où s'est déroulé mon stage. [Lien11] Une partie de la gestion de la base de données s'est faite via : PhpMyAdmin est une interface graphique développée en PHP et destinée à la gestion d'une base de données MySQL. Elle sera aussi utilisée pour tester les différentes requêtes SQL lors de la construction du site web, ce qui implique un gain de temps important. [Lien12] Serveur : Apache est un logiciel de serveur HTTP développé par l'Apache Software Foundation. C'est actuellement le serveur HTTP le plus populaire du Web. C'est un logiciel libre faisant partie du LAMP, évoqué ci-dessus. [Lien13] Google Chrome est un navigateur associé à une interface très simple à gérer, afin d’exécuter et de tester notre intranet. III. Travail réalisé Dans ce qui suit, nous passerons à la description de quelques aperçus de notre intranet en détaillant certaines fonctionnalités. Commençons par l’interface d’accueil.
  46. 46. Réalisation ISET Bizerte 45 La page d’accueil de l’intranet expose, en plus des différents menus de navigations possibles, des menus horizontaux permettent l’accès direct à n’importe quelle rubrique. Le menu de notification assure une bonne surveillance (immédiate) sur les actions que se déroulent sur l’application (employé – administrateur). Figure 16 : Interface d’accueil
  47. 47. Réalisation ISET Bizerte 46 L’interface ci-dessous illustre l’interface de la gestion de la hiérarchie qui correspond à la gestion des agences. Figure 17 : La gestion de la hiérarchie
  48. 48. Réalisation ISET Bizerte 47 L’interface ci-dessous illustre une des fonctionnalités de la gestion des ressources humaines qui correspond à la gestion des utilisateurs, l’administrateur peut appliquer la recherche, la modification, la suppression ou l’ajout des utilisateurs (Employés). Figure 18 : Les profils des utilisateurs
  49. 49. Réalisation ISET Bizerte 48 Lors d’une commande bien saisie, une alerte s’affiche pour indiquer à l’utilisateur le bon déroulement de l’opération. Figure 19 : Validation d’une commande
  50. 50. Réalisation ISET Bizerte 49 Cette interface représente l’état des commandes passées par les responsables des agences (en cours de traitement, commande refusée, commande acceptée). Figure 20 : États des commandes
  51. 51. Réalisation ISET Bizerte 50 Juste après la confirmation d’une commande, le bon de livraison sera à la disponibilité de responsable d’agence avec la possibilité d’impression. Figure 21 : Bon de livraison (Après confirmation) III. Implémentation de l’application Vu que l’application est acceptée par le responsable et grâce à la meilleure gestion des cotés stocks ou ressources humaine, la direction commerciale a pris la décision d’implémenter l’application pour être à la disposition des différents utilisateurs, et ce par hébergement chez un fournisseur de service web. Conclusion Dans ce chapitre, nous venons de décrire l’environnement du travail. Enfin nous enchaînons par une description de quelques interfaces et la mise en place de l’application.
  52. 52. 51 Conclusion générale Ce projet de fin d’études, réalisé pour le compte de la société NOVA CERAM, ayant pour thème « La réalisation d’une application web Intranet », m’a permis d’approfondir mes connaissances et d’acquérir de nouvelles connaissances. L’étude des besoins fonctionnels a permis de recenser les services à fournir par l’application. Ainsi, j’ai proposé une solution pour résoudre les problèmes qui décrits par le responsable de la société. Ce projet, visant principalement la gestion commerciale, m’a donné l’occasion de maîtriser les outils de développement destinés à ce type d’applications ; Par ailleurs, il m’a aussi permis d’appliquer les connaissances scientifiques et techniques acquises lors de mes études. Cette réalisation n’est qu’une participation modeste de ma part dans le domaine « développement web », je souhaite qu’elle soit reprise pour être améliorée même par d’autres étudiants, vu que ce domaine est toujours en évolution.
  53. 53. 52 Table des sigles et des abréviations Open Source : Ce terme désigne les logiciels dont la licence permet sa libre redistribution, ainsi que l'accès en lecture et en écriture de son code source. B2E : Business to Employee (B to E) est une expression qui caractérise l'ensemble des échanges (services et produits) qu'une entreprise destine à ses propres salariés. L'Intranet est le principal support des applications Business to Employee. Intranet : L'intranet est un réseau informatique utilisé à l'intérieur d'une entreprise ou de toute autre entité organisationnelle utilisant les techniques de communication d'Internet (IP, serveurs HTTP)
  54. 54. 53 Bibliographie http://www.developpez.com/ http://www.commentcamarche.net/ http://www.siteduzero.com/ http://fr.tuto.com/ http://www.simpledev.fr/ http://www.php.net/ http://www.jquery.com/ http://www.uml-sysml.org/ http://uml.free.fr/ http://www.wikipedia.org/ http://www.mysql.fr/ http://www.9lessons.info/
  55. 55. 54 Néographie Lien1 : http://www.additeam.com/SSII/uml/ Lien2 : http://notes.mazenod.fr/le-design-pattern-mvc1.html Lien3 : http://tahe.developpez.com/web/php/mvc/?page=introduction Lien4 : http://fr.wikipedia.org/wiki/Hypertext_Markup_Language Lien5 : http://etudiants.servhome.org/cours/cours.php?cours_id=1 Lien6 : http://fr.wikibooks.org/wiki/Le_langage_CSS Lien7 : http://www.toutjavascript.com/savoir/savoir00.php3 Lien8 : http://www.atlantismultimedia.fr/liste-des-competences/ Lien9 : http://www.futura-sciences.com/fr/definition/t/high-tech-1/d/ajax_3998/ Lien10 : http://www.xul.fr/ajax-format-json.html / http://www.json.org/json-fr.html Lien11 : http://www.mysql.fr/ Lien12 : http://www.phpmyadmin.net/ Lien13 : http://www.apache.org/
  56. 56. 55 Annexes
  57. 57. Annexes ISET Bizerte 56 Quelques aperçus de notre intranet : L’interface suivante correspond au formulaire que l’administrateur doit remplir pour ajouter un nouvel article. Figure 22 : L’interface d’ajout d’articles
  58. 58. Annexes ISET Bizerte 57 Cette interface représente des statistiques sur les stocks disponibles sous un format qui respecte les règles ergonomiques pour ce type d’affichage. Figure 23 : Les statistiques des stocks
  59. 59. Annexes ISET Bizerte 58 L’interface présentée ci-dessus, donne une vue de perspective sur la rubrique « Commandes » avec les différentes propriétés liées aux « Commandes » passées par les responsables d’agences. Figure 24 : Liste des commandes
  60. 60. Annexes ISET Bizerte 59 Cette interface présente un « Bon de commande », l’état d’une commande et la possibilité d’impression du coté administrateur. Figure 25 : Bon de commande
  61. 61. Annexes ISET Bizerte 60 Cette interface représente l’opération de suppression pour des enregistrements sélectionnés. Figure 26 : Suppression des enregistrements
  62. 62. Annexes ISET Bizerte 61 La section des congés représente les différentes options à ajouter lors du passage d’une demande d’un congé par un employé. Figure 27 : Demande de congé

×