1.

REMERCIEMENTS

Tout d’abord, j'ai à remercier tout particulièrement et à témoigner je

reconnaissance aux personnes suivantes, pour leur dévouement et leur soutient dans la

concrétisation de ce projet ingénieur :

M. younes berrada, responsable projet, pour ses conseils éclairés, sa patience, sa

disponibilité et pour la confiance qu’il nous a accordée dès l’ébauche du projet et tout au

long de cette mois de stage.

M. zouhaire ibn batouta , mon encadreurs et mon professeurs. durant ces deux années d'études.

Et merci a tous les coachs et professeurs.

......................

2.SOMMAIRE

Chapitre 1:

1.INTRODUCTION

1.1.Introduction Générale

1.2.Présentation de la société:

2.Etude préalable

2.1.Introduction

2.2Analyse des besoins

2.3.Fonctionnement du site

2.4.Objectifs de notre site

3.Conclusion

Chapitre 2:

1.Modélisation Conceptuelle

1.1:Introduction

2.Choix de la méthodologie de conception et justification:

3.Diagramme de cas d’utilisation

3.1.Schéma

3.2.Diagramme de classes

4.conclusion
Chapitre 3 :

1.Environnement de travail

2.Choix des langages de développement

2.1.Langages de développement

2.2.Le Serveur

2.3.Logiciel de Base de données

2.4.Les Logiciels de développement

2.4.Les Logiciels de développement

3.Description des interfaces de la site web

4.Conclusion Générale

..........................

Chapitre 1:

1.INTRODUCTION

Abstract:

Le stage est une démarche ayant pour objectif la projection de certain

éclairage sur les difficultés et les obstacles que nous pourrons rencontrer demain

comme futurs employés au sein d’un organisme.

Le stage est donc, une période active destinée à se familiariser avec le milieu

professionnel. C’est une période occasionnelle, offerte aux stagiaires afin

d’améliorer et mettre en pratique notre connaissances théoriques acquises durant

cette formation.

C’est un aperçu de la vie professionnelle et de tout ce qui l’accompagne (relations

entre collègue, rapports hiérarchiques, communication interne, compétence

ambiance de travail ...) par conséquent, ce présent rapport est le fruit d’un stage

qui été effectué au sein de la société One WEB AGENCY MAROC.

Je tiens à préciser que la période de stage allant du 15/05/2023 jusqu’au

15/06/2023 était tellement riche et bénéfique au niveau d’observation,

consultation et expérimentation qui vont me servir dans ma vie professionnelle et

quotidienne.
✓ La première partie de ce rapport sera donc consacrée à une description de One

Fancy ses activités ainsi que le fonctionnement de certaines méthodes de travail

principale de la société.

✓ La deuxième partie de ce rapport sera un descriptif de différentes étapes que j’ai

suivis durant toute la période de stage.

.............................

1.1.Introduction Générale:

La croissance constante de développement informatique permet d’optimiser l’utilisation

des infrastructures existantes et d’assurer aux usagers une information efficace et fiable.

Dans ce cadre, s'inscrit mon projet de stage d'été, intitulé « WEB AGAENCY MAROC », dont

l'objectif est de concevoir une interface web pour une entreprise multiservices , amenagement-
maison,demenagement-cle-main,emballage-et-deballage,ect.............

Ce rapport est organisé en cinq chapitres :

Le premier chapitre est consacré à la mise en relief du cadre de développement de

notre site.

 Le second chapitre se focalise sur la base théorique et les technologies utilisées pour

réaliser le travail requis.

 Dans le troisième chapitre, baptisé « Analyse et spécification des besoins », nous

identifions les besoins fonctionnels et non fonctionnels qui permettent de rependre ou objectifs

de notre site, en les modélisant à travers le diagramme des cas d'utilisation.

 Quant au cinquième chapitre, il porte une démonstration de la conception adoptée pour

répondre aux besoins précédemment cités.

 Enfin, nous finissons par faire une illustration des détails de la réalisation de notre

travail.

..............................

1.2.Présentation de la société:

WEB AGENCY MAROC est une agence web et référencement naturel basée à Casablanca au Maroc
qui accompagne les sociétés marocaines et les entreprises étrangères dans leurs recherches pour
améliorer la qualité de leurs travaux.

.................................
2.Etude préalable:

2.1.Introduction:

Dans ce chapitre, nous présentons l'étude préalable qui a précédé la mise en place de

notre site web. Cette partie consiste à dégager les fonctions que le site devrait fournir et ce

en mettant en évidence les besoins à l'origine de son développement.

...............................

2.2Analyse des besoins :

Notre projet de stage a été réalisé entièrement au sein de l’entreprise WEB AGANCY MAROC, qui a

décidé de nous engager afin de développer un nouveau site web multiservice qui n’existe pas
beaucoup dans le marché de travail .

Afin d'approfondir compréhension du sujet et avoir une idée plus claire sur

projet et ses fonctions attendues, je mené une étude pour dégager les objectifs à

atteindre.

Nous avons principalement un acteurs : admin de entreprise ,clients

et entreprise.

L’admin de l’entreprise :

 Vérifier les informations des sujets déposés (titre, thème, résumé, nom …).

 Décider de refuser ou accepter le sujet déposé.

 L’entreprise :

 Proposer des offres de stages et de PFE.

2.3.Fonctionnement du site:

D’abord, le clients consulte les listes des sujets et des service propose proposés par le site. et des

entreprises pour valider elle est correct (exemple : demander un service,

consulter l’état de sonde service (validé ou refusé)).

Ces informations sont ensuite traitées et analysées pour les valider par le responsable

(Exemple : demander les ervice de emballage-et-deballage,

acceptation ou refus du service , etc...)

......................................

2.4.Objectifs de notre site :

Améliorer la gestion du site des services.

Faciliterdemander les plusieurs service disponible .

La recherche de qalité de travail .

La recherche d’une suppléments .

Mise à jour en temps réel des informations .

..........................................

3.Conclusion:

Dans ce chapitre, l'ai défini le champ d’étude de mon étude et la présentation

de projet. j'ai aussi spécifié mon objectif à atteindre suivis d’une étude de l’existant et

enfin j'ai identifié les solutions envisageables.

Avant de commencer la réalisation, mon présentons dans le deuxième chapitre la démarche de

développements et de conception de mon site web.

........................................

Chapitre 2:

1.Modélisation Conceptuelle:

1.1:Introduction:

Cette section, sera présentée comme suit : premiére mon commençons par le choix de la

méthodologie de conception et justification. Ensuite nous identifions les acteurs et les

diagrammes des cas d’utilisation, puis je présentons le diagramme de classe

........................

2.Choix de la méthodologie de conception et justification:

Dans mon projet, j'ai utilisé le langage UML. Ci-dessous, je présentons ce

langage puis mon justifier mon choix.

Le langage de modélisation unifié, de l’anglais Unified Modeling Language (UML), est un

langage de modélisation graphique à base de diagrammes conçu pour fournir une méthode

normalisée pour visualiser la conception d'un système. Il est couramment utilisé en

développement logiciel et en conception orienté objet.

En plus UML est essentiellement un support de communication, qui facilite la représentation et

la compréhension du sujet.

UML fournit un moyen astucieux permettant de représenter diverses projections d'une même

représentation grâce aux vues:

La vue statique, permettant de représenter le système physiquement :

-Diagrammes de cas d’utilisation : identifient les utilisateurs du site (acteurs)

et leurs interactions avec le site .

-Diagrammes de classes : représentent des collections d'éléments de modélisation

statiques (classes, paquetages...), qui montrent la structure d'un modèle

........................................................

3.Diagramme de cas d’utilisation :

Un cas d’utilisation est une manière spécifique d’utiliser un système. C’est l’image

d’une fonctionnalité du site , déclenchée en réponse à la stimulation d’un acteur externe.

Les cas d’utilisation permettent de :

 Décrire le comportement du système sous forme d’action et de rédaction

du point de vue d’un utilisateur.

 Identifier les acteurs du système.

 Définir les limites du système, les relations entre le système et

l’environnement.

................................

3.1.Schéma :

diagramme de cas d'utulisation:::

...............................

3.2.Diagramme de classes :

Le diagramme de classes est la représentation de la structure statique en termes de

classes et de relations. Ils représentent les classes constituant le site .

C’est le diagramme le plus important de la modélisation orientée objet.

Ce diagramme regroupe les classes du monde réel et les classes nécessaires à

l’implémentation du système et permet de générer la base de données et les classes utilisées

dans la programmation des site.

diagramme de classe ::::::::

.............................

4.conclusion:
L’étape de conception est la phase la plus importante dans la résolution d’un problème

donnée.

La réalisation de cette phasej'ai a permis de commencer l’implémentation sur la

base d’une architecture stable et delà passer à la phase de construction.

Durant le chapitre suivant, je vais décrire l’implémentation de mon site et

je vais décrire l’environnement logiciel et matériel du travail.

.............................................

Chapitre 3 : La réalisation:

......................................

1.Environnement de travail :

Matériels:

Environnement de travail:

L’équipement utilisé pour ce projet est un ordinateur de développement ayant

les caractéristiques suivantes :

 Processeur Intel Inside CoreTM i5

 Mémoire vive 4 Go

 Disque dur 500 Go

 Système exploitation Windows 10.

.............................

2.Choix des langages de développement :

...................................

2.1.Langages de développement :

Les principaux outils qui ont contribué à la qualité du développement du site sont :

html:L’HyperText Markup Language, généralement abrégé HTML, est

le format de données conçu pour représenter les pages web. C’est un

langage permettant d’écrire de l’hypertexte, d’où son nom. HTML permet

également de structurer sémantiquement et de mettre en forme le contenu

des pages, d’inclure des ressources multimédias dont des images, des

formulaires de saisie, et des programmes informatiques. Il permet de créer

des documents interopérables avec des équipements très variés de manière conforme aux
exigences de l’accessibilité du web. Il est souvent utilisé conjointement avec des langages de

programmation (JavaScript) et des formats de présentation (feuilles de style en cascade).

HTML est initialement dérivé du Standard Generalized Markup Language (SGML).

css:CSS (Cascading Style Sheets) est un langage de feuilles de style utilisé pour décrire la présentation
d'un document HTML (ou XML). Il permet de contrôler l'apparence et la mise en forme des éléments
d'une page web, tels que les polices, les couleurs, les marges, les espacements, les bordures et bien
plus encore.

Le CSS fonctionne en associant des règles de style à des éléments HTML spécifiques. Une règle de
style est composée d'un sélecteur qui cible les éléments HTML auxquels la règle doit s'appliquer, et
d'une déclaration qui définit les propriétés de style à appliquer à ces éléments

javascript:JavaScript est un langage de programmation de scripts principalement

employé dans les pages web interactives mais aussi pour les serveurs.

C’est un langage orienté objet à prototype.

bootstrap:Bootstrap est un framework front-end open source largement utilisé pour le

développement de sites web et d'applications web réactives. Il a été créé par Twitter et est maintenu
par une communauté active de développeurs.

Le principal objectif de Bootstrap est de faciliter le processus de développement en fournissant une

collection de composants prêts à l'emploi, de styles CSS et de scripts JavaScript. Il comprend un
ensemble de règles de style pré-définies, une grille flexible et réactive, des composants d'interface
utilisateur (boutons, formulaires, menus déroulants, carrousels, etc.), des utilitaires de mise en page
et bien plus encore.

php:PHP, plus connu sous son sigle PHP, est un via un serveur HTTP,

mais pouvant également fonctionner comme n'importe quel langage

interprété de façon locale. PHP est un langage orienté objet

...........................................

2.2.Le Serveur :

mysql:mysql (My Structured Query Langage-Langage de requêtes structurées)

est un système de gestion de bases de données relationnelles dédiées Open

source. Il est très rapide, fiable et facile à utiliser et gratuit.il a été développé à

l’origine pour gérer des très grandes bases de données beaucoup plus rapidement

que des solutions déjà établies. Il offre un ensemble de fonctionnalités large et

riche. Sa rapidité et sa sécurisation en font un outil idéal pour les applications

internet.
.....................................

2.3.Logiciel de Base de données :

StarUML:

StarUML est un logiciel de modélisation UML, cédé comme open source par

son éditeur, à la fin de son exploitation commerciale, sous une licence modifiée

de GNU GPL. Puisqu’il ne requiert pas de connaissances particulières et fonctionne, de plus,

sur les systèmes d'exploitation les plus répandus.

......................................

2.4.Les Logiciels de développement:

atom:Atom est un éditeur de texte open source développé par GitHub. Il est conçu pour être un
éditeur de texte personnalisable, extensible et adapté au développement de logiciels. Atom est
disponible pour les systèmes d'exploitation Windows, macOS et Linux.

.................................................

3.Description des interfaces de la site web :

......................

4.Conclusion Générale:

«WEB AGENCY MAROC » vise à faciliter la tâche de choisir les multiservic,qui est en soi difficile et en
meme temps distinctive.

vérifier aussi bien les demmande des clients.

 Plusieurs pistes d'améliorations peuvent être apportées à ce projet, notamment donner

la possibilité aux augmenter les services nouveaux et rares,

l’administrateur du site pourrait avoir la possibilité d'affecter des encadrants,

De plus, ce projet peut être implémenté au futur sous des plateformes plus dévloppé et

améliorer de plus l’interaction entre les personnel et les clients.