République Tunisienne
Ministère de l’Enseignement Supérieur et de la
Recherche Scientifique
Université de Tunis El Manar
Faculté des Sciences de Tunis
Rapport de stage d’initiation
Conception et réalisation d’une application web de gestion des
devis en ligne
Réalisé par :
Hammami Maha
Filière :
1ére année ingénieur en génie logiciel (IGL3)
Effectué au sein du :
Centre National de l’Informatique (CNI)
Encadré par :
Mr Zaier Imed
Période du stage : 04/07/2022 – 14/08/2022
Remerciement
Le travail présenté dans ce stage d’initiation a été effectué au sein du
Centre National de L’informatique. Où je tiens à exprimer mes vifs
remerciements à tous ceux qui m’ont aidé à réaliser ce travail. Mes plus
sincères remercîments vont spécialement à Mr. Zaier Imed, mon
encadrant du CN, pour la qualité exceptionnelle de son encadrement,
son assistance, et sa présence à tout moment tout le long de
l’élaboration de ce sujet. Au terme de ce stage, j’aimerais exprimer ma
reconnaissance à tous ceux qui, d’une manière ou d’une autre, m’ont
aidé à bien mener ce projet.
Table des matières
Introduction Générale ....................................................................................................................... 1
1. Présentation de l’organisme d’accueil ...................................................................................... 2
1.1. Présentation générale du Centre National de l’Informatique ............................................ 2
1.2. Historique de l’entreprise .................................................................................................. 2
2. Présentation du sujet de stage................................................................................................... 3
2.1. Description du sujet ........................................................................................................... 3
2.2. Objectifs du sujet ............................................................................................................... 3
2.3. Évaluation de l’existant ..................................................................................................... 3
2.4. Solution proposée .............................................................................................................. 3
3. Conception ............................................................................................................................... 5
3.1. Diagramme de cas d’utilisation ......................................................................................... 5
3.1.1. Diagramme de cas d’un internaute ............................................................................. 6
3.1.2. Diagramme de cas d’un client .................................................................................... 7
3.1.3. Diagramme de cas d’un administrateur ...................................................................... 8
3.1.4. Diagramme de cas d’un agent commercial ................................................................ 9
3.2. Diagramme de classes ..................................................................................................... 10
3.3. Modèle relationnel ........................................................................................................... 11
4. Réalisation .............................................................................................................................. 12
4.1. Environnement de développement .................................................................................. 12
4.1.1. Environnement Matériel ........................................................................................... 12
4.1.2. Environnement logiciel ............................................................................................ 12
4.2. Présentation de l’application web .................................................................................... 12
4.2.1. L’entête du site ......................................................................................................... 13
4.2.2. Page d’authentification ............................................................................................. 14
4.2.3. Page de catalogue ..................................................................................................... 15
4.2.4. Page de confirmation de panier ................................................................................ 16
4.2.5. Page de devis ............................................................................................................ 17
4.2.6. Pied de page ............................................................................................................. 18
4.3. Présentation de l’espace administrateur .......................................................................... 18
4.3.1. Page d’authentification administrateur..................................................................... 18
4.3.2. Page d’ajout d’un utilisateur .................................................................................... 19
4.4. Présentation de l’espace agent commercial ..................................................................... 19
4.4.1. Page d’accueil agent commercial ............................................................................. 20
4.4.2. Page d’ajout d’un service ......................................................................................... 21
4.4.3. Page de gestion des devis ......................................................................................... 21
Conclusion Générale ...................................................................................................................... 22
Références Bibliographiques.......................................................................................................... 23
.
Table des figures
Figure 1 : Diagramme de cas d’utilisation globale........................................................................... 6
Figure 2 : Diagramme de cas d'utilisation d'un internaute ............................................................... 6
Figure 3 : Diagramme de cas d'utilisation d'un client ...................................................................... 7
Figure 4 : Diagramme de cas d'utilisation d'un administrateur ........................................................ 8
Figure 5 : Diagramme de cas d'un agent commercial ...................................................................... 9
Figure 6 : Diagramme de classes .................................................................................................... 11
Figure 7 : L'entête de site (pour un visiteur) .................................................................................. 13
Figure 8 : L'entête du site (pour un client) ..................................................................................... 13
Figure 9 : Page d'authentification ................................................................................................... 14
Figure 10 : Page de catalogue......................................................................................................... 15
Figure 11 : Page de confirmation de panier ................................................................................... 16
Figure 12 : Page de devis ............................................................................................................... 17
Figure 13 : Pied de page ................................................................................................................. 18
Figure 14 : Page d'authentification administrateur ......................................................................... 19
Figure 15 : Page d'ajout d'un utilisateur ......................................................................................... 19
Figure 16 : Page d'accueil administrateur ...................................................................................... 20
Figure 17 : Page d'ajout d'un service .............................................................................................. 21
Figure 18 : Page de gestion des devis ............................................................................................ 21
Introduction Générale
Dans le cadre de ma formation d’ingénieur à la Faculté des Sciences de Tunis, j’ai réalisé un
stage d’initiation chez le Centre National de l’Informatique (CNI).
Le stage est un moyen qui permet à l’étudiant de s’intégrer dans la vie professionnelle en vue
d’avoir une idée générale sur le fonctionnement de l’entreprise. La mission du stage était la
conception et réalisation d’un système de gestion de devis en ligne.
Le rapport se divise en quatre chapitres, le premier chapitre est consacré à une présentation de la
société d’accueil. Le deuxième chapitre est une présentation du sujet de stage ou on a élaboré les
objectifs du stage ainsi que les raisons pour lesquelles ce sujet a été mis en place et des solutions
pour atteindre un système d’informations performant et efficace. Le troisième chapitre traite la
conception et modélisation du système à travers des diagrammes de cas d’utilisation, le
diagramme de classe et un modèle relationnel de la base de données. Enfin, le quatrième chapitre
montre les outils utilisés pour la réalisation ainsi que la présentation de quelques exemples des
interfaces de l’application web.
1
1. Présentation de l’organisme d’accueil
1.1. Présentation générale du Centre National de l’Informatique
Institué le 30 Décembre 1975, le Centre National de l’Informatique est un établissement public à
caractère non administratif doté de la personnalité civile et de l’autonomie financière.
Le CNI est un organisme placé sous la tutelle du Ministre des Technologies de la
Communication, et opérant dans les domaines du secteur de l’informatique et des technologies de
la communication et certifié ISO 9001 version 2015.
Les missions principales de Centre National de l’Informatique sont :
▪ Maîtrise d’ouvrage déléguée et Pilotage de projet.
▪ Audit de système d’information.
▪ Etude réseaux et sécurité.
▪ Développement et Maintenance des systèmes d’Information.
▪ Hébergement des plateformes de ses clients (services dédiés).
▪ Déploiement des applications développées pour le compte de l’administration en vue de
leur exploitation.
1.2. Historique de l’entreprise
Le CNI a été créé en tant qu’Établissement Public à caractère Industriel et Commercial. En 1997,
il a été reclassé Établissement Public à caractère Non Administratif. En 1992, un cycle de
formation a été institué au CNI pour l’initiation au travail dans les administrations publiques.
Le CNI a joué un rôle important dans :
• La planification et l'organisation du secteur de l'informatique en Tunisie et la préparation
et le suivi des travaux des Plans Nationaux Informatiques (PNI).
• La rationalisation de l’acquisition de matériels, de produits et de services informatiques
par l’Administration et les entreprises publiques. (Circulaires du Premier Ministre du : 19
octobre 1977, 18 juin 1981, 24 septembre 1985).
• L’exécution de la procédure d’agrément préalable à la réalisation des projets
informatiques, à leur planification et à leur suivi. (Circulaires du Premier Ministre du : 18
juin 1981, 24 septembre 1985, 16 août 1988, 15 janvier 1998).
2
2. Présentation du sujet de stage
2.1. Description du sujet
La conception et réalisation d’un système informatique permettant, d'une part, au client d'avoir
toutes les informations sur l'entreprise (services) et créer son devis en ligne et, d'autre part, à
l'entreprise d'effectuer l'administration des devis.
2.2. Objectifs du sujet
Le but du projet consiste à concevoir un site web acquiesçant à l'entreprise CNI deux choses :
• D’avoir un portail commercial présentant aux clients toutes les informations sur
l'entreprise et la possibilité pour eux de faire un devis en ligne. Ce devis est enregistré
dans une base de données avant d'être téléchargé ou envoyé au client par mail.
• D’effectuer l'administration et la gestion des clients, des devis et des produits depuis une
zone admin et une zone agent commercial nécessitant un login.
2.3. Évaluation de l’existant
Les procédures optées actuellement pour l’établissement des devis présentent un certain nombre
de problèmes et manques, qu’on va résumer dans ce qui suit :
▪ Lenteur dans la création des documents.
▪ La centralisation de l’information (dans la machine qui contient les documents).
▪ Le client doit se présenter à l’entreprise pour faire les procédures de création de devis.
2.4. Solution proposée
En tenant compte des critiques et des besoins d'informatiser la création des devis des services
rendus par l’entreprise, la solution est de concevoir et développer une application web permettant
de satisfaire au maximum possible le gestionnaire.
Cette application est destinée au CNI pour pouvoir rendre la gestion de devis plus facile pour eux
et ses clients en ligne sans devoir se déplacer sur place, elle devrait être en mesure de satisfaire
les besoins suivants :
3
Point de vue administrateur :
• Gérer les clients et les utilisateurs.
Point de vue agent commercial :
• Valider les devis demandés par les clients.
• Gérer les services offerts par l’entreprise.
• Gérer les devis et d’autres informations.
Point de vue client :
• Créer un compte ou se connecter à travers un email et un mot de passe
• Choisir un ou plusieurs des services présentés par l’entreprise
• Création automatique d’un devis.
• Possibilité d’imprimer le devis et/ou l’envoyer par mail.
Exigences techniques :
• Permettre à l’administrateur de gérer les utilisateurs,
• Permettre à l’agent commercial de gérer les produits et les devis (ajouter, modifier
supprimer).
• Permettre à chaque utilisateur de changer son mot de passe à tout moment.
• Permettre à chaque utilisateur de supprimer son compte définitivement à tout moment.
4
3. Conception
3.1. Diagramme de cas d’utilisation
Le diagramme de cas d'utilisation est un diagramme UML utilisé pour donner une vision globale
du comportement fonctionnel d'un système logiciel. Un cas d'utilisation représente une unité
discrète d'interaction entre un utilisateur et un système.
Dans un diagramme de cas d'utilisation, il existe des acteurs qui interagissent avec des cas
d'utilisation.
Les cas d’utilisation permettent de structurer les besoins des utilisateurs et les objectifs du
système.
Le diagramme de cas de cette application se compose de quatre acteurs principaux :
− L’internaute : C’est un visiteur du site qui ne s’est pas encore identifier.
− Le client : Cet acteur est un internaute ayant déjà créer un compte sur le site, il peut donc
après s’identifier suivre le processus de sélection des services et ensuite la génération d’un
devis approprié.
− L’administrateur : Il géré les comptes administrateur et les comptes client.
− L’agent commercial : Il s’agit de la personne chargée d’administrer l'application dont les
fonctionnalités consistent à la gestion des services fournis, la page Contact, la page A
Propos de Nous, ainsi que les devis.
5
Figure 1 : Diagramme de cas d’utilisation globale
3.1.1. Diagramme de cas d’un internaute
Figure 2 : Diagramme de cas d'utilisation d'un internaute
La première étape pour l’internaute consiste à créer un compte, il deviendra ensuite, en se
connectant, un client.
6
3.1.2. Diagramme de cas d’un client
Figure 3 : Diagramme de cas d'utilisation d'un client
Après l’inscription, l’internaute devient client. Il est donc apte de continuer toute une procédure
de la génération d’un devis sur le site.
Le client a la possibilité de consulter les services disponibles, de gérer son compte ou il peut
modifier son mot de passe ou bien supprimer son compte, gérer son panier en ajoutant ou
supprimant un service et puis générer un devis et l’imprimer ou l’envoyer par mail.
7
3.1.3. Diagramme de cas d’un administrateur
Figure 4 : Diagramme de cas d'utilisation d'un administrateur
L’administrateur est la personne responsable à gestion des utilisateurs.
Il doit en premier lieu s’identifier, afin de pouvoir accéder à la page de la gestion du site.
L’administrateur peut ainsi supprimer un client, valider un compte client. Aussi, il gère les
administrateurs, il ajouter, supprime ou modifie les administrateurs et agents commerciaux.
8
3.1.4. Diagramme de cas d’un agent commercial
Figure 5 : Diagramme de cas d'un agent commercial
L’agent commercial est la personne responsable à la mise à jour et maintien de l’application.
Il doit en premier lieu s’identifier, afin de pouvoir accéder à la page de la gestion du site. L’agent
commercial peut ainsi gérer les services : il peut ajouter un nouveau service, modifier ou
supprimer un service existant. Il peut aussi gérer les devis en validant, supprimant ou imprimant
un devis. Et il a aussi accès à la gestion des pages : A Propos de Nous et Contact.
9
3.2. Diagramme de classes
En général un diagramme de classe peut contenir les éléments suivants :
Les classes : une classe représente la description formelle d’un ensemble d’objets ayant une
sémantique et des caractéristiques communes. Elle est représentée en utilisant un rectangle divisé
en trois sections.
La section supérieure est le nom de la classe, la section centrale définit les propriétés de la classe
alors que la section du bas énumère les méthodes de la classe.
Les associations : une association est une relation entre des classes qui décrit les connexions
structurelles entre leurs instances. Une association indique donc que des liens peuvent exister
entre des instances des classes associées.
Les attributs : les attributs représentent les données encapsulées dans les objets des classes.
Chacune de ces informations est définie par un nom, un type de données, une visibilité et peut
être initialisé. Le nom de l’attribut doit être unique dans la classe. [1]
La réalisation du diagramme de classe se base sur les règles de gestion qui permet de définir liens
qui relient ces classes. En se basant sur cella on est arrivé dans le diagramme de classe du notre
futur système aux règles de gestion suivantes :
− Un panier n’existe que s’il y a un client.
− Un client peut avoir un seul panier.
− Un panier n’est possédé que par un seul client.
− Un panier peut contenir plusieurs produits.
− Un produit ne peut être que dans un seul panier à la fois.
− Un client a plusieurs devis.
− Un devis n’est possédé que par un seul client.
10
Figure 6 : Diagramme de classes
3.3. Modèle relationnel
Après avoir construit le diagramme de classe nous allons mettre en place la base de données qui
lui correspond en effectuent le passage du diagramme de classe au modèle relationnel.
− Devis (invoice_id, invoice_date, total_cost, status, #customer_id)
− Client (customer_id, customer_name, customer_email, customer_pass, customer_city,
customer_contact, customer_ip, customer_confirm_code)
− Panier (card_id, #customer_id, #product_id)
− Produit (product_id, date, product_title, product_price, product_desc)
− Contact (contact_id, contact_email, contact_heading, contact_desc)
− Apropos (about_id, about_heading, about_short_desc, about_desc)
− Administrateur (admin_id, admin_name, admin_email, admin_pass, admin_contact,
admin_job)
− AgentCom(agent_id, agent_name, agent_email, agent_pass, agent_contact, agent_job)
11
4. Réalisation
4.1. Environnement de développement
4.1.1. Environnement Matériel
Un PC Portable ASUS ayant la configuration suivante :
• Processeur Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
• Mémoire RAM : 16 GO
• Disque : 1 To
• OS : Windows 10
4.1.2. Environnement logiciel
− Langage : HTML 5, CSS 3, PHP, Javascript
− Framework : Bootstrap, jQuery
− Base de données :
• SGBD : phpMyAdmin
• SQL : MySQL
4.2. Présentation de l’application web
Notre application s’agit site commercial. Le site réalisé se présente sous une fenêtre principale
qui permet à l’utilisateur de s’authentifier pour qu’il puisse accéder aux fonctionnalités que
comporte notre application.
À travers quelques interfaces du site présentées ci-dessous, c’est visé à donner une vue générale
du site web conçue.
12
4.2.1. L’entête du site
Le premier menu contient les liens concernant les réseaux sociaux et le contact de la société.
Ensuite, le deuxième menu représente le logo de la société CNI responsable de la vente des
services représentés dans le site. Les cases du menu permettent d’accéder à travers des liens au
divers options présenté. En tant que visiteur, on a le choix de se connecter ou bien de créer un
compte. En tant que client, on peut se déconnecter ou le menu Mon Compte déroulera une liste
ou on peut soit changer le mot de passe, soit supprimer le compte.
Figure 7 : L'entête de site (pour un visiteur)
Figure 8 : L'entête du site (pour un client)
13
4.2.2. Page d’authentification
Après l’inscription, le visiteur devient un client. Ce dernier doit taper son email et son mot de
passe pour pouvoir accéder à la suite de l’application si les cordonnées qu’il a saisies sont justes,
sinon un message d’erreur s’affichera.
Figure 9 : Page d'authentification
14
4.2.3. Page de catalogue
Après authentification, le client est invité à consulter la liste des services offert et à cocher les
cases pour choisir, en cliquant sur les services, le client sera redirigé vers une page contenant plus
d’information. Enfin il confirme son choix et continue le processus de génération de son devis.
Figure 10 : Page de catalogue
15
4.2.4. Page de confirmation de panier
Dans cette page, le client consulte le cout total des services qu’il a choisi. Il peut supprimer un
article, ou continuer pour générer son devis.
Figure 11 : Page de confirmation de panier
16
4.2.5. Page de devis
Le client voit ici son devis, il a la possibilité de l’imprimer ou de l’envoyer par mail.
Figure 12 : Page de devis
17
4.2.6. Pied de page
Le pied de page contient en premier lieu les informations concernant la société tel que
l’adresse, le numéro de téléphone et l’adresse mail. Ensuite, la certification iso en arabe et
français est représenté. En cliquant sur les images, elles seront affichées sur toutes la page. Et
la dernière section contient deux liens de connexion et d’inscription. Et finalement en bas de
page, il y a le nom de la société ainsi que le développeur du site.
Figure 13 : Pied de page
4.3. Présentation de l’espace administrateur
Cette partie concerne la gestion des utilisateurs. Afin de se connecter autant qu’administrateur il
faut entrer un lien spécifique pour que la page d’authentification peut s’afficher, pour des raisons
de sécurité.
À travers quelques interfaces du présentées ci-dessous, on va présenter le panneau de
l’administrateur, ou il peut gérer les comptes clients et les différents utilisateurs et ses accès.
4.3.1. Page d’authentification administrateur
C’est la première fenêtre affichée, permettant l’authentification de l’administrateur pour qu’il
accède au panneau d’administration. L’admin est invité à saisir son email et son mot de passe
pour se connecter, si ses coordonnées sont erronées, un message d’erreur sera affiché.
18
Figure 14 : Page d'authentification administrateur
4.3.2. Page d’ajout d’un utilisateur
Cette fenêtre permet d’ajouter un nouvel utilisateur au site, l’administrateur doit saisir le nom,
l’email mot de passe poste et le contact et puis cliquer sur le bouton. Ainsi l’utilisateur sera ajouté
à la base de données. Et un fenêtre popup affichera un message de succès.
Figure 15 : Page d'ajout d'un utilisateur
4.4. Présentation de l’espace agent commercial
Cette partie concerne la gestion du site. Afin de se connecter en tant qu’agent commercial le
processus est identique à celui de l’administrateur
À travers quelques interfaces présentées ci-dessous, on va présenter le panneau de l’agent
commercial, ou il peut facilement gérer le site (ajout, modification, suppression).
19
4.4.1. Page d’accueil agent commercial
Après l’authentification, l’espace agent commercial s’affiche contenant un résumé des nombres
de services, de client et de devis existant. En base est représenté une liste des nouveaux devis
crées ce jour-là. En gauche, la barre latérale montre une liste ou on peut accéder à la gestion des
services, la gestion de la page contact et la page A Propos de Nous.
Figure 16 : Page d'accueil administrateur
20
4.4.2. Page d’ajout d’un service
Cette fenêtre permet d’ajouter un nouveau service au site, l’administrateur doit saisir le nom, le
prix et les détails supplémentaire du service et puis cliquer sur le bouton. Ainsi le service sera
ajouté à la base de données et au catalogue du site. Et un fenêtre popup affichera un message de
succès.
Figure 17 : Page d'ajout d'un service
4.4.3. Page de gestion des devis
On voit ici un exemple des fenêtres de de gestion : la fenêtre de gestion des devis.
Toutes les informations concernant les devis sont affichées, ainsi que l’option de consulter un
devis ou de le supprimer ou de l’envoyer par mail à la société.
Figure 18 : Page de gestion des devis
21
Conclusion Générale
Toute entreprise, quelle que soit sa vocation et son caractère, doit se mettre à jour de la
progression technologique et faire face par l’automatisation de ses structures afin d’améliorer son
rendement et son service. En effet, ce projet a eu lieu pour combler les lacunes de la procédure
manuelle de la gestion des devis. Comme solution nous avons pensé à digitaliser cette procédure.
C’était le but de ce projet : La mise en place d’un site commercial à travers lequel, le client peut
créer des devis et communiquer avec l’entreprise en ligne.
Ce stage a été une bonne opportunité pour apprendre des nouvelles connaissances pas seulement
techniques, mais aussi comportementale, de mieux comprendre une société de service
informatique ainsi que son fonctionnement en interne.
22
Références Bibliographiques
[1] Adel RAISSI (2013) : Conception et développement d’un site web de
ecommerce pour le compte de LSAT_Nokia, Mémoire de Mastère, Université
Virtuelle de Tunis.
23