Rapport de Projet de Fin d’Etude pour

l’obtention du Diplôme de Technicien

Spécialisé en Développement Informatique

Réalisé par : Encadré par:

Abdelouadoud ELHARITE HARIK Mohamed

Année Scolaire 2020/2021

PLAN
REMERCIEMENTS ............................................................................................................................................. 4
Chapitre 1 ............................................................................................................................................................... 5
I. INTRODUCTION GENERALE ................................................................................................................. 7
II. RESUME ..................................................................................................................................................... 7
III. ANALYSE DE L’EXISTANT ................................................................................................................ 7
1. Introduction.................................................................................................................................................. 7
2. Présentation Générale du Projet................................................................................................................... 7
3. Étude d’Existant........................................................................................................................................... 8

Chapitre 2 ...................................................................................................................................................... 10
Cahier de Charge ................................................................................................................................................. 10
I. ARCHITECTURE MODULAIRE ............................................................................................................ 11
Chapitre 3 ............................................................................................................................................................... 9
Analyse et conception ............................................................................................................................................ 9
I. ANALYSE ET CONCEPTION................................................................................................................. 10
1. Introduction................................................................................................................................................ 11
II. METHODOLOGIE ET CONCEPTION ................................................................................................... 11
2. Systèmes d'information ............................................................................................................................. 12
A. UML .......................................................................................................................................................... 12
3. Les diagrammes ......................................................................................................................................... 12
a. Diagramme de Cas d’utilisation ............................................................................................................ 13
b. Diagramme de séquence ........................................................................................................................ 13
c. Diagramme de classe ............................................................................................................................. 13
Chapitre 4............................................................................................................................................... 15
Les technologies utilisées ..................................................................................................................................... 15
1. LES LANGAGE UTILISES .................................................................................................................. 15
a. HTML5 .................................................................................................................................................. 15
b. CSS 3 ..................................................................................................................................................... 16
c. JAVASCRIPT........................................................................................................................................ 16
.............................................................................................................................................................................. 17
d. PHP ........................................................................................................................................................ 17

2
 e. MySQL .................................................................................................................................................. 17
2. LES OUTILS UTILISES:...................................................................................................................... 17
a. Microsoft Visual Studio Code ............................................................................................................... 17
b. Laragon .................................................................................................................................................. 18
c. PhpMyAdmin ........................................................................................................................................ 18
Chapitre 5............................................................................................................................................... 19
Réalisation ............................................................................................................................................................ 19
CONCLUSION GENERALE ............................................................................................................................. 23

3
 REMERCIEMENTS

Je tiens particulièrement à remercier dans un premier temps, mon

encadrant de projet Mohamed HARIK Ingénieurs en informatiques et aussi
formateur à l’Institut des Techniques Supérieures pour sa disponibilité et
ses précieux conseils tant sur la partie conception que sur la partie rédaction
du rapport qui m’a permis de mener à bien ce projet.

Je remercie également toutes les personnes, de par leurs disponibilités à

répondre à toutes les questions liées à la réalisation de certaines
fonctionnalités. Notamment le personnel de l’Institut des Techniques
Supérieures (IT-SUP) et le Directeur Mr Abdelkader qui m’a suivi
pendant 2 ans de formation au sein de leur établissement

4
 Chapitre 1
INTRODUCTION GENERALE

L’informatique fait actuellement partie intégrante de notre vie quotidienne. Ses diverses applications,
en plus du développement d’internet, font que l’informatique est devenue un outil indispensable dans
notre vie privée et professionnelle.

L'informatique permet de faciliter plusieurs aspects de la vie courante. L'informatique et internet

Ont innové la façon dont on échange avec les autres. En effet, il est désormais possible de converser
avec une personne où qu'elle soit sur la planète. Elle est toujours disponible et omniprésente dans
tous les domaines de la vie: l'industrie, l'éducation, le commerce...

I. RESUME

Les logiciels de gestion de stocks gèrent les entrées et les sorties de stocks de façon informatisée.
Leur utilisation assure une bonne maîtrise des stocks de l'entreprise et en facilite le pilotage.

II. ANALYSE DE L’EXISTANT

1. Introduction :
L’étude de l’existant est une étape préalable et préliminaire à la réalisation du cahier des charges
fonctionnelles. Elle consiste à chercher toutes les dernières informations, découvertes, nouveautés et
inventions sur un produit spécifique.

Ainsi, on citera quelques exemples des plateformes de service qui existent déjà dans le web et le
marché afin d’avoir une idée et un aperçu concernant les fonctionnalités existantes pour réaliser et
améliorer notre projet.

2. Présentation Générale du Projet :

L’objectif de mon projet est de réaliser une plateforme web qui permet aux clients de déposer leurs
demandes selon leurs désirent, ensuite elle sera consultable par les clients disponibles et abonnée
dans le site.

Le but est d’informer son public des différentes actualités et de se faire connaître et attirer des clients.
Un site Web e-commerce, autant pour son administration que pour son utilisation, est alors nécessaire
au bon fonctionnement et à la communication interne et externe d’une telle structure.

5
 3. Étude d’Existant :
Le site MYprotein vise à afficher les produits disponibles au magasin en plus des textes de
motivation pour les clients pour les motiver à faire de l'exercice et à utiliser le meilleur produit
(MYprotein) pour accélérer les résultats des exercices et montre également comment pour
communiquer avec le magasin et affiche une carte qui indique à l'adresse du magasin.

a. MYPROTEIN SITE :

Interface de site web

6
b. MYPROTEIN APPLICATION :

Interface de l’application

Page d'administration il permet d'ajouter des produits, clients et des commandes.

7
 Chapitre 2

Cahier de Charge
I. ARCHITECTURE MODULAIRE :

MYPROTEIN

Gestions des Produits Administrations

Commandes
Utilisateurs

Ajout de Ajouter une

Ajouter nouveau commande
des Clients Produits

Modification et
Modification et Suppression des
Suppression des Produits
Clients

Modification
et suppression
des
commandes

8
 Chapitre 3

Analyse et conception
I. ANALYSE ET CONCEPTION :

1. Introduction :
Dans ce chapitre, nous essayerons de définir les solutions répondants au cahier des charges qu’on vient
de détailler.

II. METHODOLOGIE ET CONCEPTION :

La conception d'un système d'information n'est pas évidente car il faut réfléchir à l'ensemble de
l'organisation que l'on doit mettre en place. La phase de conception nécessite des méthodes permettant
de mettre en place un modèle sur lequel on va s'appuyer.

2. Systèmes d'information :
L’analyse consiste à créer une représentation virtuelle d'une réalité de telle façon à faire ressortir les
points auxquels on s'intéresse. Ce type de méthode est appelé analyse.

A. UML :
UML (en anglais Unified Modeling Language ou « langage de modélisation unifié ») est un langage de
modélisation graphique à base de pictogrammes conçu pour fournir une méthode normalisée pour
visualiser la conception d’un système. Il est apparu dans le monde du génie logiciel, dans le cadre de
la « conception orientée objet ». Couramment utilisé en développement logiciel et en conception orientée
objet, il peut être appliqué à toutes sortes de systèmes ne se limitant pas au domaine informatique.

L’UML est le résultat de la fusion de précédents langages de modélisation objet : Booch, OMT, OOSE.
Principalement issu des travaux de Grady Booch, James Rumbaugh et Ivar Jacobson, UML est à présent
un standard adopté par l’Object Management Group(OMG). UML 1.0 a été normalisé en Janvier 1997 ;
UML 2.0 a été adopté par l’OMG en Juillet 2005. La dernière version de la spécification validée par
l’OMG est UML 2.5.1 (2017).

[UML est avant tout un support de communication performant, qui facilite la représentation et
la compréhension de solutions objet :

9
• Sa notation graphique permet d'exprimer visuellement une solution objet, ce qui facilite la
comparaison et l'évaluation de solutions.

• L'aspect formel de sa notation, limite les ambiguïtés et les incompréhensions.

• Son indépendance par rapport aux langages de programmation, aux domaines d'application et
aux processus, en font un langage universel.

Petit aparté :

La notation graphique d'UML n'est que le support du langage. La véritable force d'UML, c'est qu'il
repose sur un méta modèle.

En d'autres termes : la puissance et l’intérêt d’UML, c’est qu’il normalise sémantique des concepts qu'il
véhicule !

Qu'une association d'héritage entre deux classes soit représentée par une flèche terminée par un triangle
ou un cercle, n'a que peu d'importance par rapport au sens que cela donne à votre modèle. La notation
graphique est essentiellement guidée par des considérations esthétiques, même si elle a été pensée dans
ses moindres détails.

Par contre, utiliser une relation d'héritage, reflète l'intention de donner à votre modèle un sens particulier.
Un "bon" langage de modélisation doit permettre à n'importe qui de déchiffrer cette intention de manière
non équivoque ! Il est donc primordial de s'accorder sur la sémantique des éléments de modélisation,
bien avant de s'intéresser à la manière de les représenter.

Le méta modèle UML apporte une solution à ce problème fondamental.

UML est donc bien plus qu'un simple outil qui permet de "dessiner" des représentations mentales...
Il permet de parler un langage commun, normalisé mais accessible, car visuel. Il représente un juste
milieu entre langage mathématique et naturel, pas trop complexe mais suffisamment rigoureux, car basé
sur un méta modèle.

UML comme cadre d'une analyse objet:

Une autre caractéristique importante d'UML, est qu'il cadre l'analyse. UML permet de représenter
un système selon différentes vues complémentaires : les diagrammes. Un diagramme UML est
une représentation graphique, qui s'intéresse à un aspect précis du modèle ; c'est une perspective
du modèle.

Chaque type de diagramme UML possède une structure (les types des éléments de modélisation
qui le composent sont prédéfinis) et véhicule une sémantique précise (il offre toujours la même vue d'un
système).

Combinés, les différents types de diagrammes UML offrent une vue complète des aspects statiques et
dynamiques d'un système. Les diagrammes permettent donc d'inspecter un modèle selon

10
différentes perspectives et guident l'utilisation des éléments de modélisation (les concepts objet),
car ils possèdent une structure.

Une caractéristique importante des diagrammes UML, est qu'ils supportent l'abstraction.

Cela permet de mieux contrôler la complexité dans l'expression et l'élaboration des solutions objet.

UML opte en effet pour l'élaboration des modèles, plutôt que pour une approche qui impose une barrière
stricte entre analyse et conception. Les modèles d'analyse et de conception ne diffèrent que par leur
niveau de détail, il n'y a pas de différence dans les concepts utilisés.

UML n'introduit pas d'éléments de modélisation propres à une activité (analyse, conception...) ; le
langage reste le même à tous les niveaux d'abstraction.

Cette approche simplificatrice facilite le passage entre les niveaux d'abstraction. L'élaboration encourage
une approche non linéaire, les "retours en arrière" entre niveaux d'abstraction différents sont facilités
et la traçabilité entre modèles de niveaux différents est assurée par l'unicité du langage.

UML favorise donc le prototypage, et c'est là une de ses forces. En effet, modéliser une application
n'est pas une activité linéaire. Il s'agit d'une tâche très complexe, qui nécessite une approche itérative,
car il est plus efficace de construire et valider par étapes, ce qui est difficile à cerner et maîtriser.

UML permet donc non seulement de représenter et de manipuler les concepts objet, il sous-entend une
démarche d'analyse qui permet de concevoir une solution objet de manière itérative, grâce aux
diagrammes, qui supportent l'abstraction.

Comme UML n'impose pas de méthode de travail particulière, il peut être intégré à n'importe quel
processus de développement logiciel de manière transparente. UML est une sorte de boîte à outils,
qui permet d'améliorer progressivement vos méthodes de travail, tout en préservant vos modes
de fonctionnement.

Intégrer UML par étapes dans un processus, de manière pragmatique, est tout à fait possible.

La faculté d'UML de se fondre dans le processus courant, tout en véhiculant une démarche
méthodologique, facilite son intégration et limite de nombreux risques (rejet des utilisateurs, coûts...)

3. Les diagrammes :

a. Diagramme de Cas d’utilisation

Les diagrammes de cas d'utilisation sont des diagrammes UML utilisés pour donner une vision globale
du comportement fonctionnel d'un système logiciel. Ils sont utiles pour des présentations auprès de la
direction ou des acteurs d'un projet, mais pour le développement, les cas d'utilisation sont plus
appropriés.

11
Digramme de cas d’utilisation

12
b. Diagramme de classe :
Le diagramme de classes est un schéma utilisé en génie logiciel pour présenter les classes et les interfaces
des systèmes ainsi que les différentes relations entre celles-ci. Ce diagramme fait partie de la partie
statique d'UML car il fait abstraction des aspects temporels et dynamiques.

Digramme classe

13
c. Base de données :

Une base de données est un ensemble structuré et organisé de données qui représente un système
d'informations sélectionnées de telle sorte qu'elles puissent être consultées par des utilisateurs ou par des
programmes.

Base de données

14
 Chapitre 4

Les technologies utilisées

LES LANGAGE UTILISES :
a. HTML5 :

Le HTML (HyperText Markup Language) est un langage de base pour la création de site internet, il sert
à structurer vote document. HTML5 (HyperText Markup Language 5) est la dernière révision majeure
du HTML (format de données conçu pour représenter les pages web). Cette version a été finalisée le 28
octobre 2014. HTML5 spécifie deux syntaxes d'un modèle abstrait défini en termes de DOM : HTML5
et XHTML5.

HTML 5

b. CSS 3 :
Les feuilles de style en cascade, généralement appelées CSS de l'anglais Cascading Style Sheets, forment
un langage informatique qui décrit la présentation des documents HTML et XML. Ils comprennent du
code qui permet de gérer le design d'une page en HTML. Les standards définissant CSS sont publiés par
le World Wide Web Consortium (W3C). Introduit au milieu des années 1990, CSS devient couramment
utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les

15
 CSS 3

c. JAVASCRIPT :
JavaScript est un langage de programmation de scripts principalement employé dans les pages web
interactives .C’est un langage orienté objet à prototype, c’est-à-dire que les bases du langage et ses
principales interfaces sont fournies par des objets qui ne sont pas des instances de classes, mais qui sont
chacun équipés de constructeurs permettant de créer leurs propriétés.

JAVASCRIPT

d. PHP :
PHP: HyperText Preprocessor, plus connu sous son sigle PHP (sigle auto-référentiel), est
un langage de programmation libre, principalement utilisé pour produire des pages Web

16
dynamiques via un serveur HTTP, mais pouvant également fonctionner comme n'importe quel langage
interprété de façon locale. PHP est un langage impératif orienté objet.
PHP a permis de créer un grand nombre de sites web célèbres, comme Facebook et Wikipédia .Il est
considéré comme une des bases de la création de sites web dits dynamiques mais également des
applications web.

Figure 8 : PHP

e. MySQL :
MySQL est un serveur de bases de données relationnelles Open Source. Un serveur de bases de
données stocke les données dans des tables séparées plutôt que de tout rassembler dans une seule table.

17
 MySQL

2. LES OUTILS UTILISES:

a. Microsoft Visual Studio Code :
Visual Studio Code est un éditeur de code extensible développé
par Microsoft pour Windows, Linux et macOS.
Il présenté lors de la conférence des développeurs Build d'avril 2015 comme un éditeur de code multi-
plateforme, open source et gratuit, supportant une dizaine de langages.

Il est basé sur Electron, une structure utilisée pour déployer des applications Node.js pour le bureau
exécuté sur le moteur Blink. Bien qu'il utilise le Framework Electron, le logiciel n'utilise pas
Atom mais utilise le même composant éditeur (nommé "Monaco") utilisé dans Azure DevOps
(anciennement appelé Visual Studio Online et Visual Studio Team Services).

Le code source est fourni sous la licence libre MIT (plus précisément la licence MIT) sur le site du projet
sur Github. En revanche, l'exécutable est proposé sur le site officiel de Microsoft sous une licence
propriétaire.

Figure 8 : Visual Studio Code

b. Laragon :
Laragon est un environnement de développement universel portable, isolé, rapide et puissant pour
PHP, Node.js, Python, Java, Go, Ruby. Il est rapide, léger, facile à utiliser et facile à étendre.
Laragon est idéal pour créer et gérer des applications Web modernes. Il est axé sur la performance -
conçu autour de la stabilité, de la simplicité, de la flexibilité et de la liberté.

18
 Figure 8 : Laragon

c. PhpMyAdmin :
PhpMyAdmin est une application Web de gestion pour les systèmes de gestion de base de données
MySQL réalisée principalement en PHP et distribuée sous licence GNU GPL.

Figure 8 : PhpMyAdmin

19
 Chapitre 5

Réalisation

Cette page permet d'ajouter des produits, des clients et des commande

20
Page des produits il permet de modifier et supprimer les produits

21
Page des clients il permet de modifier et supprimer les clients.

22
Page des commandes il permet de modifier et supprimer les commandes.

23
 CONCLUSION GENERALE :

Ce projet nous a permis d’approfondir nos connaissances théoriques, acquises

tous le long de notre formation, par la pratique des nouvelles technologies,
ainsi que Notre objectif était de répondre a grande partie des fonctionnalités
requises

24
25