République Tunisienne Département

Ministère de l’enseignement supérieur et Multimédia & Web

recherche scientifique
Année Universitaire 2022-2023
Université de Gabès

Institut Supérieur d’Informatique et de

Multimédia

RAPPORT DE PROJET FIN D’ETUDE

Présenté en vue de l’obtention du
DIPLÔME DE LICENCE EN SCIENCE DE L’INFORMATIQUE
ET MULTIMÉDIA

Intitulé

Plateforme de devis de travaux en ligne

Réalisé par :
Ichrak WEDED
Dalel DAGHSNI

Soutenu le 22 Juin 2023 devant le jury composé de :

Président : Mme. Amna ben abdallah

Rapporteur : M. Hamdi kchaou
Encadrant: M. Riadh Ouali
2
 Dédicaces

A mon père formidable « Fethi Weded »

Tu es mon héros et mon modèle de force et de courage, qui m'inspire toujours avec ta sagesse
et ton amour inconditionnel. Je vous dois ce que je suis aujourd'hui et

ce que je serai demain et je ferai toujours de mon mieux pour rester votre fierté.

Je t'aime de tout mon cœur.

À ma mère extraordinaire « Fouzia Nouma »

Tu es ma source de réconfort et d'amour infini. Tes sacrifices et ta bienveillance sont

inestimables.je te suis éternellement reconnaissante. Je vous dois ce que je suis aujourd'hui et

ce que je serai demain et je ferai toujours de mon mieux pour rester votre fierté.

Je t'aime plus que les mots ne peuvent le dire.

À mes frères, mon soutien dans la vie « Mohamed Amine », « Zied » et « Ahmed Azize »
Je vous souhaite un avenir plein de bonheur, de réussite et de sérénité.

À mes chers amis

À mes chers amis, vous êtes la joie la plus précieuse de ma vie. Votre présence, votre soutien
inconditionnel et votre amour sincère m'ont porté à travers les hauts et les bas de la vie.
Chaque instant que je partage avec vous est un trésor que je chéris profondément. Merci d'être
toujours à mes côtés. Je vous aime tous tellement et je suis fier de vous appeler mon ami.

Ichrak

3
 Dédicace

J’aimerais dédier ce travail :

A mes chers parents « Mohamed Samir » & « Aroussia »

Si je suis la aujourd’hui, c’est grâce à vous. Merci pour votre aide apportée à
moi tout au long de mes études. J’espère que vous êtes heureux et fiers de moi,
ce travail ce n’est que le résultat de vos sacrifices. Que dieu vous bénissant.

A mes chère sœurs « Dorra » & « Roula »

Je vous retrouve toujours à mes côtés m’écoutant, me soutenant et suggère. Que
la vie ne vous donnent que du succès.
Je vous aime !

A mes chères frères « Majdi » & « Saif » & « Mohamed Taher »

Je vous souhaites un avenir rempli de bonheur, de réussite et de sérénité.

A ma chère amie « Maryem »

Qui m’a aidé et support au bout de mes moments difficiles

A chère binôme « Ichrak »

Pour s’entendre, son intelligence et sa confiance tout au long de ce stage.

Dalel

4
 Remerciements

Cher Monsieur [Riadh Ouali],

Avec beaucoup de plaisir, nous tenons, tout d’abord, à exprimer

notre profonde gratitude, notre reconnaissance, notre respect et

notre remerciements les plus sincères.

Merci infiniment à notre encadreur pour son précieux soutien et son expertise tout au long de
notre projet. Nous avons reconnaissante de votre guidance exceptionnelle.

Aux membres du jury : Monsieur [Hamdi Kchaou] et Madame [Amna Beb Abdallah]

Nous tenons à exprimer nos sincères remerciements aux membres du jury pour le projet de fin
de notre étude. Votre expérience, votre temps et vos commentaires constructifs sont
inestimables. Merci d'avoir accepté d'évaluer notre travail

Chère Madame [Maha Ben Amor],

Nous tenons à vous remercier sincèrement et profondément pour votre aimable soutien tout au
long du projet de fin d'études. Votre nature sympathique et votre

soutien continu nous ont été inestimables. Vos conseils avisés, votre disponibilité et votre
gentillesse ont rendu cette expérience enrichissante et nous ont permis d'aller loin.

Nous sommes très reconnaissants d'avoir eu

l'occasion de travailler avec un superviseur compétent et attentionné.

Votre impact positif restera gravé dans nos mémoires et nous vous en sommes infiniment
reconnaissants.

5
 Table des matières
Introduction générale................................................................................................................ 11
Chapitre 1 : Etude préliminaire ................................................................................................ 12
1. Introduction : ................................................................................................................. 12
2. Cadre de ce projet : ........................................................................................................ 12
3. L’objectif et présentation du projet : ............................................................................. 12
4. Analyse d’existant : ....................................................................................................... 12
4.1. Darydar.tn : ............................................................................................................ 13
4.2. San3ti.tn : ............................................................................................................... 14
4.3. Artisans.com.tn : .................................................................................................... 15
5. Solution existant : .......................................................................................................... 16
6. Spécification des besoins : ............................................................................................ 16
6.1. Besoins fonctionnelle : ........................................................................................... 16
6.2. Besoins non fonctionnels : ..................................................................................... 17
7. Conclusion :................................................................................................................... 17
Chapitre 2 : Etude conceptuelle ............................................................................................... 18
1. Introduction : ................................................................................................................. 18
2. Langage de modélisation UML : ................................................................................... 18
3. Définition UML : ....................................................................................................... 18
4. Diagramme des cas d’utilisation : ................................................................................. 18
4.1. Identification des acteurs : ..................................................................................... 18
4.2. Classement des cas d’utilisation par acteur : ......................................................... 19
4.3. Diagramme des cas d’utilisation global : ............................................................... 20
4.4. Descriptions textuelles de cas d’utilisation : .......................................................... 22
5. Les modèle MVC : ........................................................................................................ 24
6. Diagramme de classe : ................................................................................................... 25
7. Diagramme de séquence : ............................................................................................. 26
7.1. « Authentification » : ............................................................................................. 26
7.2. « Inscrire » : ........................................................................................................... 27
7.3. « Lancer mission » : ............................................................................................... 28
7.4. « Modifier profil artisan » : .................................................................................... 29
8. Conclusion :................................................................................................................... 29
Chapitre 3 : Réalisation ............................................................................................................ 30
1. Introduction : ................................................................................................................. 30
2. Conception graphique : ................................................................................................. 30

6
 2.1. Proposition de logo : .............................................................................................. 30
2.2. Palette de couleurs : ............................................................................................... 33
2.3. La typographie : ..................................................................................................... 33
2.4. Application monochrome et sur font : ................................................................... 34
2.5. Version positive et négative : ................................................................................. 34
3. Environnement du travail : ............................................................................................ 35
3.1. L’environnement matériel :.................................................................................... 35
3.2. L’environnement et Framework: ........................................................................... 35
4. Description des interfaces : ........................................................................................... 38
4.1. L’interface d’accueil : ............................................................................................ 39
4.2. Login : .................................................................................................................... 40
4.3. Inscrire : ................................................................................................................. 41
4.4. Partie utilisateur : ................................................................................................... 42
4.5. Partie artisan : ........................................................................................................ 46
4.6. Partie administrateur : ............................................................................................ 49
5. Conclusion :................................................................................................................... 52
Conclusion général ................................................................................................................... 53
Bibliographie ............................................................................................................................ 54

7
 Listes des figures
Figure 1:Interface d'accueil darydar.tn ..................................................................................... 13
Figure 2:Interface d'accueil san3ti.tn ....................................................................................... 14
Figure 3:Interface d'accueil artisans.com.tn ............................................................................. 15
Figure 4: Diagramme des cas d'utilisation global .................................................................... 20
Figure 5:Diagramme des cas d'utilisation administrateur ........................................................ 21
Figure 6:Diagramme des cas d'utilisation artisan ..................................................................... 21
Figure 7:Diagramme cas d'utilisation utilisateur ...................................................................... 22
Figure 8: Modèle MVC ............................................................................................................ 24
Figure 9:Diagramme de classe ................................................................................................. 25
Figure 10:Diagramme de séquence Authentification ............................................................... 26
Figure 11: Diagramme de séquence s'inscrire .......................................................................... 27
Figure 12: Digramme de séquence lancer mission ................................................................... 28
Figure 13:Digramme de séquence modifier profil artisan ....................................................... 29
Figure 14: Première proposition ............................................................................................... 30
Figure 15: Deuxième proposition ............................................................................................. 30
Figure 16: Proposition 3.1 ........................................................................................................ 31
Figure 17: Proposition 3.2 ........................................................................................................ 31
Figure 18: Proposition 3.3 ........................................................................................................ 32
Figure 19: Proposition final...................................................................................................... 32
Figure 20: Composante du logo ............................................................................................... 32
Figure 21: Palette de couleurs .................................................................................................. 33
Figure 22: La typographie ........................................................................................................ 33
Figure 23: Application monochrome et sur font ...................................................................... 34
Figure 24: Version positive et négative .................................................................................... 34
Figure 25: Logo de « Visual studio code » .............................................................................. 35
Figure 26: Logo de « XAMPP » .............................................................................................. 36
Figure 27: Logo de « Draw.io » ............................................................................................... 36
Figure 28:Logo de "Framework Laravel" ................................................................................ 37
Figure 29: Logo de « HTML5 » ............................................................................................... 37
Figure 30:Logo de « CSS3 » .................................................................................................... 38
Figure 31: Logo de « JavaScript » ........................................................................................... 38
Figure 32: page d'accueil .......................................................................................................... 39
Figure 33: Interface connexion ................................................................................................ 40
Figure 34: Interface pour l’inscription ..................................................................................... 41
Figure 35: User lancer une mission .......................................................................................... 42
Figure 36:User consulter les devis ........................................................................................... 43
Figure 37: User noter une mission ........................................................................................... 44
Figure 38: Mission accomplie .................................................................................................. 44
Figure 39: User commenter un catalogue ................................................................................ 45
Figure 40: Artisan poster un devis ........................................................................................... 46
Figure 41: Artisan ajouter un catalogue ................................................................................... 47
Figure 42: Artisan ajouter une image dans un catalogue ......................................................... 47
Figure 43: Artisan consulter mission ....................................................................................... 48
Figure 44: Dashboard ............................................................................................................... 49

8
Figure 45:Admin ajouter un service ......................................................................................... 50
Figure 46: Admin ajouter modèle devis ................................................................................... 51
Figure 47: Modèle devis ........................................................................................................... 51
Figure 48: Admin modérer commentaire ................................................................................. 52

9
 Listes des tables
Tableau 1: Tableau résume ...................................................................................................... 16
Tableau 2:Classement des cas d'utilisation par acteur ............................................................. 19
Tableau 3:Description textuelle des cas d'utilisation s'inscrire ................................................ 22
Tableau 4:Description textuelle des cas d'utilisation lancer mission ....................................... 23
Tableau 5: Description textuelle des cas d'utilisation ajoute devis .......................................... 23
Tableau 6:Description textuelle des cas d'utilisation ajoute service ........................................ 24
Tableau 7: Caractéristique de matériel ..................................................................................... 35

10
 Introduction générale
L’informatique est désormais omniprésente dans notre vie quotidienne et professionnelle,
offrant de nouvelles possibilités pour simplifier même les taches les plus complexes. Dans le
domaine travaux, la recherche d’artisans qualifiés est encore difficile et stressante pour les
clients. Déplus, les artisans sont toujours impatients d’obtenir de nouveaux clients et de
nouvelles évaluations. Comme tout le monde les meilleurs dans leur secteur.

En fait, fournir un devis détaillé et transparent qui reflète les couts réels de projet proposé
semble un objectif pour certains clients. En outre, le client a toujours des soucis à la qualité des
travaux réalisés par l’artisanat sélectionné.

De plus, les artisans veulent un espace pour partager leurs soumissions et avoir une chance
d’apparaitre sur le marché.

C’est dans ce contexte que notre projet de fin d’études vise à développer une plateforme de
devis de travaux en ligne. L’objectif de cette plateforme est de faciliter la recherche d’artisans
qualifié pour les clients en leur permettant de soumettre leurs projets de travaux en ligne et de
recevoir rapidement des devis personnalisés de la part d’artisans compétents. Les ouvriers,
quant à eux, pourront créer leur profil en ligne pour proposer leurs services aux clients
potentiels.

Dans les chapitres suivants, nous allons d’écrire les différentes étapes nécessaires à la
réalisation de ce projet.
 Le premier chapitre est intitulé « étude préliminaire » pour une vue d’ensemble du
projet, ainsi que l’analyse et la spécification des besoins.
 Le deuxième chapitre intitulé « étude conceptuelle » traite des divers aspects
conceptuels de l’application.
 Le troisième chapitre intitulé « réalisation » affiche les détails de mise en œuvre et les
tests des réalisations.

11
 Chapitre 1 : Etude préliminaire

1. Introduction :
L’étude préliminaire est la partie préalable pour l’implémentation de l’application. Tous
d’abord, nous allons présenter l’objectif à atteindre dans notre cadre du projet. Dans la suite
nous passerons à l’analyse de l’existence pour découvrir les points faibles et les points forts.
Finalement, nous définirons les spécifications des besoins.

2. Cadre de ce projet :
Pendant l’année universitaire 2022-2023, ce projet est une partie pour la préparation d’un projet
de fin d’études afin d’avoir le diplôme de licence en science informatique et multimédia à
l’institut supérieur et multimédia de Gabés.

3. L’objectif et présentation du projet :

Nous avons opté de réaliser une application web qui optimise le processus de lancement des
devis pour les missions déclenchées par les clients.
Le client sélectionne un devis en fonction de ses besoins, de son budget et de la compétence de
l’artisan étant calculé sur la base des notes saisies.
De plus, l’artisan peut enrichir son espace d’un catalogue décrivant les tâches effectuées pour
démontrer ces qualités.

4. Analyse d’existant :
L’étude existant consiste à comprendre le sujet qui a développé une évaluation analytique pour
découvrir les faiblesses et les forces du système actuel et apporter la solution efficace.
Cette étude permet d’identifier les fonctions proposées ainsi que les problématiques qui seront
abordées dans ce projet ceux-ci inclus :

12
 4.1. Darydar.tn :

Figure 1:Interface d'accueil darydar.tn

Darydar c’est une startup tunisienne, située à bardo, qui a un site web pour gérer toutes les
activités existantes.

 Point forts
-Le client peut aisément estimer les dépenses.
 Point faible
-Pas d’espace d’artisan.
-Le prix est fixe.
-Le client ne reconnue pas l’artisan qui fait l’entretien.
-Il n y a pas de contact direct avec l’artisan.

13
 4.2. San3ti.tn :

Figure 2:Interface d'accueil san3ti.tn

San3ti.tn est une plateforme localisée à Tunis, qui possède un site web pour la gestion des
artisans.

 Point forts
-Aucune de restriction sur l’enregistrement des artisans.
 Point faible
-Le client ne peut pas lancer une mission
-Un site dédié seulement pour avoir des renseignements aux artisans.
-Il ne peut pas noter la mission qui a été lancé.

14
 4.3. Artisans.com.tn :

Figure 3:Interface d'accueil artisans.com.tn

Artisans.com.tn est une plateforme en ligne qui vous permet de rester en contact avec votre
professionnel le plus proche.

 Point forts
-L’obtention de devis en ligne gratuit
 Point faible
-Le profil de l’artisan est inconnu.
-Il ne peut pas poster des commentaires pour l’artisan.

15
 5. Solution existant :

Application
Fonctionnalité Darydar.tn San3ti.tn Artisans.com.tn
Noter la satisfaction des
artisans

Gestion de devis

Espace artisan X

Lancer une mission X

Espace utilisateur X X

Rechercher X

consulter des demandes X

citer commentaire X

Tableau 1: Tableau récapitulatif

6. Spécification des besoins :

L’analyse des besoins est la première étape pour faciliter le cycle de développement d’une
plateforme.

6.1. Besoins fonctionnelle :

Les besoins fonctionnels de notre acteur peuvent être répartis comme suit :
 Coté administrateur :
-Gérer les comptes.
-Ajouter spécialité artisan.
-Modérer les commentaires.
-Ajouter modèle d’un devis.
-Accepter artisan.
-Consulter la mission.

16
 -Consulter un devis.
-Consulter suggestion.
 Coté artisan :
-Modifier profil.
-Poster un devis.
-Gérer catalogue.
-Consulter la mission encours.
 Coté utilisateur :
-Modifier profil.
-Poster une mission.
-Saisir un commentaire.
-Evaluer les travaux.
-Chercher un artisan.
-Consulter l’historique de la mission.

6.2. Besoins non fonctionnels :

Les besoins non fonctionnels de notre site sont :
 Sécurité :
Afin de protéger l’accès aux formulaires et pour garantir la sécurité des données, notre
mot de passe est crypté.
 Performance :
Rapidité aux réponses, ressources utilisateurs minimales.
 Responsive :
La manipulation d’application est acquise pour toute la résolution d’écran (Smartphone,
tablette,…).
 Maintenance :
La simplicité pour maintenir le code.

Pour développer un site web simple d’utilisation et compatible avec la majorité des navigateurs,
nous allons utiliser le framework tendance Laravel et langage de programmation PHP.

7. Conclusion :
Pendant ce chapitre, nous avons déterminé la méthodologie de notre étude. Nous avons
également effectué une étude préalable des différentes applications de service en ligne.
A ce stade, nous pouvons passons au chapitre suivant pour présenter l’étude conceptuelle.

17
 Chapitre 2 : Etude conceptuelle

1. Introduction :
Pendant ce chapitre, l’étude conceptuelle est une étape majeure dans le développement d’une
application. Ensuite, nous avons présenté la structure détaillée pour créer cette application sous
forme de diagramme de séquence pour montre les opérations. Finalement, on conclure avec une
conclusion.

2. Langage de modélisation UML :

Pour faciliter la conception de noter projet, nous allons adopter pour utiliser un langage unifies
de UML comme instrument des modélisations conceptuelle.

3. Définition UML :
Le langage de modélisation UML (Unified Modeling Language) est un langage de modélisation
pour comprendre les besoins et il permet de modéliser les projets en manière claire.

4. Diagramme des cas d’utilisation :

Un diagramme des cas d’utilisation décrit les grandes fonctionnalités produites par le système
observé par les acteurs.

4.1. Identification des acteurs :

Les acteurs qui répondent aux identifies sont :
 Administrateur
 Artisan
 Utilisateur

18
 4.2. Classement des cas d’utilisation par acteur :
Le tableau suivant présente leur fonctionnalité des chaque acteur.

Acteur Cas d’utilisation Cas d’utilisation commun

Consulter artisan
Utilisateur Lancer mission
Saisir commentaire
Noter mission
S’inscrire
Accepter devis Authentification
Modifier profil
Gérer catalogue
Artisan Poster un devis
Supprimer catalogue

S’inscrire
Authentification
Modérer commentaire
Accepter commentaire
Administrateur Refusée commentaire
Ajouter modèle devis
Gérer compte
Ajouter domaine artisan

Tableau 2:Classement des cas d'utilisation par acteur

19
 4.3. Diagramme des cas d’utilisation global :
Le diagramme des cas d’utilisation montre une illustration de toute la fonctionnalité qui a été
répertorie dans le tableau précèdent.

Figure 4: Diagramme des cas d'utilisation global

20
4.3.1. Cas d’utilisation « Administrateur » :

Figure 5:Diagramme des cas d'utilisation administrateur

4.3.2. Cas d’utilisation « Artisan » :

Figure 6:Diagramme des cas d'utilisation artisan

21
 4.3.3. Cas d’utilisation « Utilisateur » :

Figure 7:Diagramme cas d'utilisation utilisateur

4.4. Descriptions textuelles de cas d’utilisation :

4.4.1. « Inscrire » :
Cas d’utilisation : S’inscrire

Objectif : S’inscrire sur l’application

Acteur : Utilisateur

Pré-condition : Utilisateur inscrit

Scénario nominal : 1. Le système affiche le formulaire d’inscription aux utilisateurs

2. L’utilisateur doit remplir le formulaire.
3. Le système sauvegarde les données à la base de données.

Scénario alternatif : lorsque les données qui doivent envoyer sont incorrectes, le système
affiche un message d’erreur.

Tableau 3:Description textuelle des cas d'utilisation s'inscrire

22
 4.4.2. « Lancer mission » :
Cas d’utilisation : Lancer mission

Objectif : Ajouter une mission

Acteur : Utilisateur

Pré-condition : Utilisateur doit être authentifié.

Post-condition : Mission ajoutée

Scénario nominal : 1. Utilisateur clique sur le bouton lancer mission

2. Le formulaire sera affiché
3. Utilisateur remplit le formulaire
4. Le système vérifie les informations saisies par l’utilisateur
5. Le système enregistre les données dans les bases de données
Scénario alternatif : s’il y a des informations invalides ou incomplètes, le système affiche
un message d’erreur.

Tableau 4:Description textuelle des cas d'utilisation lancer mission

4.4.3. « Ajouter devis » :

Cas d’utilisation : Ajouter devis

Objectif : Propose un devis

Acteur : Artisan

Pré-condition : Artisan doit être authentifié.

Post-condition : devis ajoutée

Scénario nominal : 1. L’artisan choisit la fonction ajoute devis

2. Le formulaire sera affiche
3. L’artisan remplit le formulaire
4. Le système vérifie les informations saisies par l’artisan
5. Le système enregistre les données dans la base de données
Scénario alternatif : Lorsqu’il y a des informations incorrectes, le système affiche un
message d’erreur.

Tableau 5: Description textuelle des cas d'utilisation ajoute devis

23
 4.4.4. « Ajouter service » :
Cas d’utilisation : Ajouter service

Objectif : Ajouter service

Acteur : Admin

Pré-condition : L’acteur doit être authentifié.

Post-condition : Ajouter un service

Scénario nominal : 1.L’admin accède à l’information ajoute un service.

2. Le système affiche un formulaire pour ajoute un service.
3. L’admin remplit le formulaire.
4. Le système valide les informations ajoutées.

Scénario alternatif : Le système affiche un message d’erreur si les renseignements ne sont

pas complets.

Tableau 6:Description textuelle des cas d'utilisation ajoute service

5. Les modèle MVC :

Le modèle MVC est une architecture pour faciliter la vue conceptuelle. Cette architecture
distingue trois parties sont :

 Modèle : il consiste à récupère les attributs et ordonner dans la base de données.

 Contrôleur : il est un ensemble des fonctions pour gérer le projet.
 Vue : cette étape affiche la plateforme de projet.

Figure 8: Modèle MVC

24
 6. Diagramme de classe :
Le diagramme de classe st un modèle permet de montre la structure des données.

Figure 9:Diagramme de classe

25
7. Diagramme de séquence :
7.1. « Authentification » :

Figure 10:Diagramme de séquence Authentification

26
7.2. « Inscrire » :

Figure 11: Diagramme de séquence s'inscrire

27
7.3. « Lancer mission » :

Figure 12: Digramme de séquence lancer mission

28
 7.4. « Modifier profil artisan » :

Figure 13:Digramme de séquence modifier profil artisan

8. Conclusion :
Dans ce chapitre, nous avons présenté l’étude conceptuelle de notre application en utilisant le
langage UML, et aussi quelque diagramme pour cela maintenant nous pouvons passer au
dernier chapitre de réalisation de notre plateforme.

29
 Chapitre 3 : Réalisation

1. Introduction :
Dans le dernier chapitre de ce rapport, nous allons définir les étapes de la phase de mise en
œuvre de notre application. D’abord, nous allons introduire la partie de conception graphique
qui exprime la démarche conceptuelle de notre logo. Ensuite, nous commençons par la
présentation de l’environnement logiciel, matériel et la framework utilisée. Enfin, nous allons
présenté la réalisation du travail à partir des différents interfaces.

2. Conception graphique :
La conception graphique ou design graphique est une étape clé d’une communication visuelle.
Le concept graphique aide à la compréhension de n’importe quel document et renforce la
lisibilité auprès des consommateurs en plus d’être agréable à regarder. [1]

2.1. Proposition de logo :

 Proposition 1 :
Au début, nous l’avons nommé Service.

Figure 14: Première proposition

 Proposition 2 :
Ensuite, nous avons choisi le nom IM-Service où I signifie « Installation » et M signifie
« Maintenance ».

Figure 15: Deuxième proposition

30
 Proposition 3 :
Daim ou le cerf est un animal qui symbolise la force physique et spirituelle. Il est un
animal riche en symbolisme, lié à la fois à la force instinctive du corps et de l’esprit,
puis au calme et à la fertilité. Cette caractéristique est due en particulier à ses cornes,
qui expriment le renouvellement continu de la vie. Elles sont comme un symbole de
renaissance / régénération, d’espoir et d’abondance. En fait, le cerf était également
considéré comme un symbole de vigueur, de force de combat, de chef de meute solitaire
qui, en cas de besoin, savait se battre et diriger.
DAIM Service, chaque lettre indique un mot expressif dans l’application, tel que :
 D : « Devis ».
 A : « Artisan ».
 I : « Installation ».
 M : « Mission » et « Maintenance ».
 S : « Service ».

Figure 16: Proposition 3.1

Figure 17: Proposition 3.2

31
 Figure 18: Proposition 3.3

Figure 19: Proposition final

 Composant du logo :

Figure 20: Composante du logo

32
2.2. Palette de couleurs :

Figure 21: Palette de couleurs

o La couleur bleue est utilisée pour rassurer. C’est une Couleur qui symbolise la
confiance, la clarté, la transparence et la sécurité.

o La couleur orange est une couleur qui symbolise la communication et l’apprentissage.

C’est une couleur stimulante pour les sens et dynamique qui dénote la créativité.

2.3. La typographie :

Figure 22: La typographie

33
2.4. Application monochrome et sur font :

Figure 23: Application monochrome et sur font

2.5. Version positive et négative :

Figure 24: Version positive et négative

34
 3. Environnement du travail :
3.1. L’environnement matériel :
L’implémentation de notre application est développée par un ordinateur portable avec la
caractéristique suivante :

Model Asus Desktop- HVI7DQN

Processeur Intel(R) Core(TM) i7-1065G7 CPU @ 1.30

GHz 1.50 GHz

Mémoire RAM 8.00 Go

Disque dur 500 G

Système d’exploitation Windows 10

Tableau 7: Caractéristique de matériel

3.2. L’environnement et Framework:

3.2.1. L’environnement logiciel :
VS Code :

Visual Studio code est un éditeur de code extensible, open source et gratuit développé par
Microsoft pour Windows, Linux et MacOs un éditeur de code qui peut être utilisé avec une
variété de langages de programmation. [2]

Figure 25: Logo de « Visual studio code »

35
XAMPP :
XAMPP est un ensemble de logiciels permettant de mettre en place un serveur web local avant
la mise en œuvre d’un site web. Il s’agit d’une distribution de logiciels libres offrant une bonne
souplesse d’utilisation, réputée pour son installation simple et rapide. [3]

Figure 26: Logo de « XAMPP »

Draw io :
Draw.io est une application qui permet de faire des schémas et du dessin vectoriel. Elle a la
particularité d’être une application web. C’est une alternative libre à des logiciels comme
Microsoft Visio. Elle peut être utilisée indépendamment, intégrée à une application web ou
même temps qu’application desktop. [4]

Figure 27: Logo de « Draw.io »

36
 3.2.2. Framework et langages :
Laravel :
Laravel a été créé par Taylor otwell en juin 2011.
Laravel est un framework web open-source écrit en PHP qui un framework multiplateforme
fournit un ensemble de bibliothèques de code contenant des modules préprogrammés qui
permettent à un utilisateur de construire des applications plus rapidement. Ils offrent aux
développeurs web un certain nombre d’avantages, notamment un développement plus rapide,
un besoin réduit d’écrire du code et une sécurité renforcée. [5]

Figure 28:Logo de "Framework Laravel"

HTML :
Ce langage permet d’écrire de structure sémantiquement une page web, de mettre en forme du
contenu, de créer des formulaires de saisie ou encore d’inclure des ressources multimédias dont
des images, des vidéos, et des programmes informatiques.
Il est souvent utilisé conjointement avec le langage de programmation JavaScript et des feuilles
de style en cascade (CSS). [6]

Figure 29: Logo de « HTML5 »

37
CSS :
CSS est un langage informatique permet de modifier le style d’une page des documents XML
et HTML. [7]

Figure 30:Logo de « CSS3 »

JavaScript :
JavaScript est un langage de programmation de scripts principalement employé dans les pages
web interactives et à ce titre est une partie essentielle des applications web. [8]

Figure 31: Logo de « JavaScript »

4. Description des interfaces :

Dans cette partie, nous avons présenté quelques interfaces de notre application DAIM
SERVICE construite à l’aide d’outil utilisé et spécifié dans le chapitre précédent.

38
 4.1. Interface d’accueil :
Cette figure, présente l’interface principale de notre application « DAIM SERVICE ». Grace à
cette interface, l’utilisateur peut accéder à son espace. Ensuite on peut lancer une mission et
consulter les services et notre profiles d’artisan.

Figure 32: page d'accueil

39
 4.2. Login :
D’après cette figure, lorsqu’un utilisateur souhaite lancer une mission, il doit ouvrir un compte
via cette page d’authentification.

Figure 33: Interface connexion

40
 4.3. Inscrire :
Cette figure montre l’interface d’inscription pour l’utilisateur.

Figure 34: Interface pour l’inscription

41
 4.4. Partie utilisateur :
4.4.1. Lancer mission :
Cette interface permet à l’utilisateur de lancer une tache, qu’il doit compléter le formulaire pour
réaliser une mission.

Figure 35: User lancer une mission

42
 4.4.2. Consulter devis :
Cette figure montre les devis postés par les artisans pour les missions qui ont été lancées.

Figure 36:User consulter les devis

43
 4.4.3. Noter mission:
L’expérience d’un utilisateur est décrite dans une note qui témoigne de sa satisfaction vis-à-vis
de sa mission. Cette note entre en ligne de compte pour la classification des artisans.

Figure 37: User noter une mission

Figure 38: Mission accomplie

44
 4.4.4. Commenter le catalogue :
A chaque catalogue, l’utilisateur on peut consulter leurs images et des commentaires d’autre
personne et aussi on peut mettre un commentaire.

Figure 39: User commenter un catalogue

45
 4.5. Partie artisan :
4.5.1. Poster devis :
Cette interface permet à l’artisan de posté un devis pour une mission.

Figure 40: Artisan poster un devis

46
 4.5.2. Ajouter catalogue :
La figure suivante montre l’ajout d’un catalogue pour l’enrichissement de son compte personnel
à travers quelques photos des missions qu’il a réalisé.

Figure 41: Artisan ajouter un catalogue

Figure 42: Artisan ajouter une image dans un catalogue

47
 4.5.3. Artisan consulter mission :
A travers cette interface, l’artisan peut à consulter la mission lancer.

Figure 43: Artisan consulter mission

48
 4.6. Partie administrateur :
4.6.1. Dashboard :
Dans l’interface suivante, nous avons présenté le tableau de bord pour l’administrateur qui lui
permet d’afficher les sections et les deux courbes pour présenter les clients et les missions
lancées par mois. Ainsi, nous avons retrouvé également le « sidebar » pour les différents outils
suivants : Gérer compte, Ajouter service, Modelé de devis, Modérer les commentaires,…

Figure 44: Dashboard

49
 4.6.2. Ajouter service :
A cette interface l’administrateur peut ajouter les domaines d’artisans.

Figure 45:Admin ajouter un service

50
 4.6.3. Ajouter modelé devis :
Depuis cette interface, l’administrateur peut ajouter les modèles de devis.

Figure 46: Admin ajouter modèle devis

Figure 47: Modèle devis

51
 4.6.4. Modérer commentaire :
Cette figure représente une liste des commentaires ou l’administrateur peut les accepter ou les
supprimer.

Figure 48: Admin modérer commentaire

5. Conclusion :
Au cours de ce chapitre, nous avons discuté de l’environnement de travail dans notre projet.
Ensuite, nous irons pour clarifier la structure utilisée pour mettre en œuvre notre projet, les
descriptions d’interface ont également été utilisées pour prouver notre plateforme.

52
 Conclusion général

Tout au long de ce projet, nous avons pu faire une démonstration complète de notre travail qui
s’inscrit dans le cadre de projet de notre fin d’études. Notre mission est de développer une
plateforme de devis des travaux en ligne pour le but de recevoir plusieurs devis pour une
mission lancée et pour l’utilisateur à évaluer sa satisfaction.

Nous avons d’abord, décrit le cadre général de notre projet. Puis, nous avons consacré nos
réflexions à l’analyse de l’existant, afin d’identifier les fonctions qui pourraient être mises à la
disposition des utilisateurs.

Après cela, nous avons fait fonctionner la conception en utilisant le langage UML et
l’implémentation pour les bases de données, puis finalement, nous avons réalisé notre
application à travers le framework Laravel.

53
 Bibliographie

[1] Conception graphique : https://www.appvizer.fr/magazine/communication/editique-

dematerialisation/conception-graphique.
[2] Vs code : https://fr.wikipedia.org/wiki/Visual_Studio_Code.
[3] XAMPP : https://fr.wikipedia.org/wiki/XAMPP.
[4] Draw.io : https://sebsauvage.net/wiki/doku.php?id=draw.io.
[5]Laravel :https://kinsta.com/fr/base-de-connaissances/qu-est-ce-que-
laravel/#:~:text=Laravel%20permet%20%C3%A0%20un%20d%C3%A9veloppeur,la%20qua
ntit%C3%A9%20de%20code%20n%C3%A9cessaire.
[6] HTML5 : https://fr.wikipedia.org/wiki/Hypertext_Markup_Language.
[7] CSS3 : https://fr.wikipedia.org/wiki/CSS.
[8]JavaScript :
https://fr.wikipedia.org/wiki/JavaScript#:~:text=JavaScript%20est%20un%20langage%20de,u
tilis%C3%A9s%20par%20les%20d%C3%A9veloppeurs%20web.

54
 Plateforme de devis de travaux en ligne

‫ يندرج هذا العمل ضمن مشروع التخرج للحصول على اإلجازة األساسية في‬:‫الخالصة‬
.‫علوم اإلعالمية والملتيميديا‬

‫يهدف هذا العمل على تطبيق الويب لغاية تطوير منصة تقدير العمل عبر اإلنترنت‬

Laravel ,‫ مهمة‬, ‫تقدير‬,‫الحرفي‬ : ‫المفاتيح‬

Résumé : Ce travail se situe dans le cadre du projet de fin d’études réalisé à

l’Institut Supérieur d’Informatique et Multimédia de Gabès, pour l’obtention du
Diplôme de Licence en Science d’Informatique et Multimédia (LSIM).

Il a pour objectif de réaliser un site web de développement d'une plateforme de

devis des travaux en ligne.

Mots clés : Laravel, Mission, Devis.

55