Chapitre 1 : Présentation de stage

Dédicace

J’offre ce modeste travail A mes chers parents, Mais aucune dédicace ne serait témoin
de mon profond amour, m`immense gratitude et mon plus grand respect, car je ne
pourrai jamais oublier la tendresse et l’amour dévoué par lesquels ils m’ont toujours
entouré depuis mon enfance. J’adresse aussi ce modeste travail : A toute ma famille,
pour leur soutien moral. A tous mes amis(e), et à tous ceux que m’aiment et à toutes les
personnes qui m’ont prodigué des encouragements et se sont données la peine de
nous soutenir durant ces années de formation. A mes chers formateurs, sans aucune
exception. Aussi à tous les personnels d’INFORMATIQUE, qui m’ont bien aidé à
Atteindre mon objectif.
 Chapitre 1 : Présentation de stage

Remerciement

Ce n'est pas parce que la tradition l'exige ou par habitude que cette page est présente
aujourd'hui dans ce rapport, mais parce que les personnes auxquelles s'adressent mes
remerciements les méritent vraiment Je tiens à remercier toutes les personnes qui ont
contribué au succès de mon stage et qui m'ont aidé lors de la rédaction de ce rapport.
Je tiens à remercier vivement mon encadrant de stage Mr OUNACHAD ANOUAR
ingénieur d’état en service SPP au sein de l’ORMVA/TF, pour son accueil, le
temps passé ensemble et le partage de son expertise au quotidien. Grâce aussi à sa
confiance j'ai pu m'accomplir totalement dans mes missions. Il fut d'une aide précieuse
dans les moments les plus délicats.
Je remercie également toute l'équipe ORMVA/TF pour leur accueil, leur esprit d'équipe
et en particulier Mr SODANI Mohamed responsable de service Ressources humaines
au sein de l’ORMVA/TF.
Enfin, je tiens à remercier toutes les personnes qui m'ont conseillé et relu lors de la
rédaction de ce rapport de stage.

Sommaire
 Chapitre 1 : Présentation de stage

Dédicace : .................................................................................................... 01
Remerciement : .......................................................................................... 02
Sommaire : ……....................................................................................... 03-04
Introduction : …………………............................................................................. 05
Chapitre 2 : Notions Théoriques : ......................................................................... 11
1) Projet et objectifs : ................................................................................... 12
2) Définitions : ............................................................................................... 13
3) Fonctionnalité principale d’n Sys application : ……........…..………….….13
4) Pourquoi choisir une application en ligne ?...................................13-14
Chapitre 3 : Taches effectuées : .......................................................................... 15
1) Etape de développement : .................................................................... 16
1.1. MCD ....................................................................................... 16
1.2. Génération de la base de données : ................................ 16
1.3. Création de l’interface graphique : ................................. 16
1.4. Développement back-end : ............................................. 17
2) Outils de développement : .................................................................... 17
2.1. HTML : ......................................................................... 17-18-19
2.2. CSS : .................................................................................19-20
2.3. JAVASCRIPT : ........................................................................ 21
2.4. MYSQL : ............................................................................ 21-22
2.5. SQL : ................................................................................. 22-23
2.6. PHP : .................................................................................23-24
Chapitre 4 : Réalisation : ...................................................................................... 25
1) Images de Projet : .............................................................................. 26
1.1. Page d’accueil : .................................................................... 26
1.2. Page nos services : .............................................................. 26
1.3. Page notre équipe : .............................................................. 27
1.4. Page Nos chambre : .......... .................................................. 27
1.5. Page de réservation : .......................................................... 28
1.6. Page de Contactez-nous : ................................................. 28
Conclusion : .................................................................................................. 29
 Chapitre 1 : Présentation de stage

Introduction

Le stage est une occasion qui nous permet d’être en contact direct avec
l’environnement professionnel dans lequel nous entamerons notre future carrière.
 Chapitre 1 : Présentation de stage

 Dans le cursus de la première année développement informatique J’ai

choisi d’effectuer un stage au sein de département informatique à l’Office
Régional de Mise en Valeur Agricole à Er-Rachidia.
 Ce stage était pour nous un contact qui nous a permis une connaissance du
milieu professionnel qui sera celui de futurs diplômés, il nous a permis de
découvrir des organisations de travail, ainsi un apprentissage des relations
de travail.
 Ce travail présentant le rapport du stage comportera deux parties : la
première s’articulera sur la présentation de l’établissement d’accueil. Quant
à la deuxième, elle montera le déroulement du stage, à savoir : tâches
effectuées, compétences acquises.
Chapitre 1 :

Notions Théoriques
 Chapitre 1 : Notions Théoriques

1) Projet et objectif :

Pendant la 1ère semaine de stage et pour bien savoir notre niveau en informatique et
programmation, notre encadrant nous a demandé d'étudier les quatre n de programmation web
HTML, CSS, JAVASCRIPT, PHP, ensuite il nous a proposer plusieurs sujets des projets pour
les réaliser pendant le reste de stage parmi ces sujets j’ai choisi la réalisation d’un web App de
gestion de stagiaire.
 Chapitre 1 : Notions Théoriques

2) Definition:
Un système de gestion hôtelière (SGH), aussi connu sous le nom de PMS
(Property Management System), est un logiciel conçu pour aider les hôteliers à
gérer leurs opérations quotidiennes. Il s'agit d'un outil essentiel pour tout hôtel,
quelle que soit sa taille ou son emplacement.

3) Fonctionnalités principales d'un système de gestion hôtelière :

Gestion des réservations : Le SGH permet aux hôteliers de gérer toutes leurs
réservations en un seul endroit, y compris les réservations directes, les réservations
provenant des agences de voyage et les réservations en ligne.
Enregistrement et départ : Le SGH automatise le processus d'enregistrement et
de départ, ce qui permet aux hôteliers de gagner du temps et d'améliorer l'efficacité
opérationnelle.
Gestion des chambres : Le SGH permet aux hôteliers de suivre la disponibilité
des chambres, d'attribuer les chambres aux clients et de gérer l'entretien des
chambres.
Gestion de la clientèle : Le SGH permet aux hôteliers de stocker les informations
des clients, telles que leurs coordonnées, leurs préférences et leur historique de
séjour.
Point de vente (PDV) : Le SGH peut être intégré à un système de PDV, ce qui
permet aux hôteliers de traiter les paiements des clients pour les chambres, les
repas et d'autres services.
Reporting : Le SGH peut générer des rapports sur les réservations, les revenus,
les dépenses et d'autres données clés.

4) Pourquoi choisir une application en ligne ?

 Une diminution des coûts :

Si vous faites le choix d’un outil de travail en ligne, vous n’aurez pas de lourds
investissements de base. En effet, vous payez par abonnement mensuel ou annuel.
 La disponibilité de votre outil :
Toute votre équipe pourra utiliser un service en ligne, et même vos clients et
prestataires. Que certains soient sur PC ou d’autres sur Mac, qu’importe ! Il suffira
qu’ils se connectent au dispositif via leur navigateur web. Votre outil sera ainsi
disponible 24 h/24 et de partout dans le monde.
 La centralisation de vos données :
 Chapitre 1 : Notions Théoriques

Toutes les informations se trouveront au même endroit et sont facilement

partageables. Un outil en ligne est idéal pour un travail collaboratif performant.
 Sécurité :
Avec un logiciel installé sur vos ordinateurs, votre activité dépend du bon
fonctionnement de votre matériel. Tandis qu’avec une application web, vous ne
risquez plus de tout perdre si ceux-ci plantent ; des sauvegardes automatiques sont
faites et hébergées dans le cloud.
 Une solution intuitive et innovante :
Un outil de travail en ligne est évolutif. Il peut se transformer, adopter de nouvelles
fonctionnalités selon vos besoins. Et pour cela, vous n’aurez pas à faire de mises à
jour sur chaque ordinateur. Tout est externalisé. Toute votre équipe en profitera
instantanément sans devoir solliciter une quelconque aide informatique.
Chapitre 2 :

Taches Effectuées
 Chapitre 2 : Taches Effectuées

1) Etapes de développement :

1.1. MCD :

1.2. Génération de la base de données :

Une base de données est un ensemble d'informations qui est organisé de manière à
être facilement accessible, géré et mis à jour. Elle est utilisée par les organisations
comme méthode de stockage, de gestion et de récupération de l’informations.
Les données sont organisées en lignes, colonnes et tableaux et sont indexées pour
faciliter la recherche d'informations. Les données sont mises à jour, complétées ou
encore supprimées au fur et à mesure que de nouvelles informations sont ajoutées.
Elles contiennent généralement des agrégations d'enregistrements ou de fichiers de
données, tels que les transactions de vente, les catalogues et inventaires de produits et
les profils de clients.

1.3. Création de l’interface graphique :

En informatique, une interface graphique (en anglais GUI pour graphical user interface)
ou un environnement graphique est un dispositif de dialogue homme- machine, dans
xsorte que l'usager peut utiliser en imitant la manipulation physique de ces objets avec
un dispositif de pointage, le plus souvent une souris.
 Chapitre 2 : Taches Effectuées

1.4. Développement back end :

Le Back end, c’est la partie du code qui est exécutée par le serveur, il s’agît du travail
qu’il réalise sur les pages Web des sites dynamiques avant de les envoyer au client.

2) Outils de développements :

2.1. HTML :

Le HTML (HyperText Markup Language) est le langage de balisage qui se trouve au cœur de la
construction des pages web. On pourrait le voir comme un ensemble d'instructions qui indiquent
à un navigateur web comment afficher le contenu et la structure d'une page.

Concrètement, le HTML s'occupe de :

Structurer le contenu : Il détermine les différents éléments qui composent une page
web, tels que les titres, les paragraphes, les images, les listes, les formulaires, etc. Il
définit également la hiérarchie entre ces éléments.

Définir la sémantique : Il indique au navigateur le sens et le rôle de chaque élément

de la page. Cela permet aux moteurs de recherche de mieux comprendre le contenu et
d'indexer correctement la page.

Créer des liens hypertextes : Il permet de lier des pages web entre elles et de créer
des liens vers des ressources externes, comme des images ou des vidéos.

Intégrer des contenus multimédias : Il permet d'inclure des images, des vidéos, des
sons et d'autres types de contenus multimédias dans les pages web.
 Chapitre 2 : Taches Effectuées

Formulaires de saisie : Il permet de créer des formulaires que les utilisateurs peuvent
remplir pour saisir des données, comme un nom, une adresse e-mail ou un message.
Accessibilité : Il permet de créer des pages web accessibles aux personnes
handicapées en utilisant des balises spécifiques et en respectant certaines directives.

Concrètement, le HTML s'occupe de :

HTML 1 : c'est la toute première version créée par Tim Berner-Lee en 1991.
HTML 2 : la deuxième version du HTML apparaît en 1994 et prend fin en 1996 avec
l'apparition du HTML 3.0. C'est cette version qui posera en fait les bases des versions suivantes
du HTML. Les règles et le fonctionnement de cette version sont donnés par le W3C (tandis que
la première version a été créée par un seul homme).
HTML 3 : apparue en 1996, cette nouvelle version du HTML rajoute de nombreuses possibilités
au langage comme les tableaux, les applets, les scripts, le positionnement du texte autour des
images, etc.
HTML 4 : il s'agit de la version la plus répandue du HTML (plus précisément, il s'agit de
HTML 4.01). Elle apparaît pour la première fois en 1998 et propose l'utilisation de frames (qui
découpent une page web en plusieurs parties), des tableaux plus complexes, des améliorations
sur les formulaires, etc. Mais surtout, cette version permet pour la première fois d'exploiter des
feuilles de style, notre fameux CSS !
HTML5 : c'est LA dernière version. Encore assez peu répandue, elle fait beaucoup parler d'elle
car elle apporte de nombreuses améliorations comme la possibilité d'inclure facilement des
vidéos, un meilleur agencement du contenu, de nouvelles fonctionnalités pour les formulaires,
etc. C'est cette version que nous allons découvrir ensemble.

Structure de base d’une page HTML 5 :

Ce code correspond à la base d'une page web en HTML 5 :
 Chapitre 2 : Taches Effectuées

2.2. CSS :
CSS signifie Cascading Style Sheets (feuilles de style en cascade). C'est un
langage informatique utilisé pour styliser et mettre en forme les pages web créées
avec des langages à balises comme le HTML.

On pourrait dire que le CSS est l'équivalent du maquillage pour une page web. Il permet
de définir l'apparence visuelle des éléments HTML, tels que :

 La couleur du texte et du fond

 La taille et la famille de polices
 Chapitre 2 : Taches Effectuées

 Les marges et le padding

 La disposition des éléments sur la page
 Les bordures et les ombres

Quelques avantages de l'utilisation du CSS :

Séparation des préoccupations : Le CSS sépare le contenu (défini en HTML) de la
présentation visuelle (définie en CSS). Cela rend le code plus maintenable et plus facile
à modifier.
Réutilisabilité : Les styles CSS peuvent être réutilisés sur plusieurs pages web, ce qui
permet de gagner du temps et de garantir une certaine uniformité visuelle à votre site
web.
Contrôle précis: Le CSS offre un contrôle précis sur l'apparence de chaque élément
d'une page web.
Responsive design : Le CSS permet de créer des sites web responsive qui s'adaptent
automatiquement à différents appareils, tels que les ordinateurs de bureau, les tablettes
et les smartphones.

Les versions de CSS :

CSS 1 (1996) : La première version officielle de CSS. Elle offrait des styles de base
pour la mise en forme du texte, des couleurs, des liens et des marges.
CSS 2 (1998) : Ajoutait des fonctionnalités importantes comme le positionnement des
éléments, les sons, les pseudo-classes et les médias.
CSS 2.1 (2011) : Corrigeait des points mineurs et supprimait certaines sections
obsolètes de CSS2.
CSS 3 (2011-présent) : Une série de modules introduisant de nouvelles fonctionnalités
majeures comme les animations, les transitions, les transformations 3D, les médias
requêtes et bien plus encore. CSS3 est toujours en développement et de nouveaux
modules sont régulièrement ajoutés.

Ce code correspond à une partie de code Css :

 Chapitre 2 : Taches Effectuées

2.3. JAVASCRIPT :
JavaScript (JS) est un langage de programmation de script couramment utilisé pour
ajouter des fonctionnalités interactives et du contenu dynamique aux pages web.
En collaboration avec HTML et CSS, il forme le trio de base pour la construction de
sites web modernes.

Ce code correspond à une partie de code JavaScript :

2.4. MYSQL :
MySQL est un système de gestion de bases de données relationnelles (SGBDR)
open-source très populaire. On peut le voir comme un outil permettant de stocker,
organiser et manipuler des données de manière efficace. Imaginez une pile de
documents et de classeurs ; MySQL est comme un logiciel de classement
 Chapitre 2 : Taches Effectuées

électronique qui vous permet de stocker ces informations de manière structurée et

de les retrouver facilement.

Voici quelques points clés à propos de MySQL :

Open-source : MySQL est un logiciel open-source, ce qui signifie qu'il est gratuit à
utiliser et à modifier. Cela en fait une option attrayante pour les particuliers et les
entreprises ayant un budget limité.
Relationnel : Dans un système de gestion de base de données relationnelle, les
données sont stockées dans des tables liées entre elles. Cela permet d'organiser
les données de manière logique et d'extraire facilement des informations croisées.
Orienté web : MySQL est particulièrement adapté aux applications web. Il est
rapide, fiable et évolutif, pouvant gérer des bases de données volumineuses pour
des sites web à fort trafic.
Langage SQL : MySQL utilise le langage SQL (Structured Query Language) pour
interagir avec les bases de données. SQL est un langage normalisé permettant
d'ajouter, modifier, supprimer et extraire des données des tables.

2.5. SQL :
SQL signifie (Structured Query Language). Il s'agit d'un langage standardisé
spécialement conçu pour interagir avec des bases de données relationnelles.
Considérez les bases de données relationnelles comme des classeurs numériques
qui stockent les informations de manière structurée, avec des tableaux, des lignes
et des colonnes. SQL agit comme la clé pour déverrouiller et manipuler cette
donnée
 Chapitre 2 : Taches Effectuées

SQL vous permet de faire :

Interagissez avec les bases de données : SQL fournit des instructions pour accéder,
manipuler et récupérer les données stockées dans des bases de données
relationnelles.
Créer des bases de données : vous pouvez utiliser SQL pour créer de nouvelles
bases de données, en définissant la structure et l'organisation des données.
Gérer les données : les instructions SQL vous permettent d'insérer, de mettre à jour et
de supprimer des données dans la base de données.
Données de requête : il s’agit d’une fonction essentielle de SQL. Vous pouvez écrire
des requêtes pour récupérer des données spécifiques de la base de données en
fonction de certains critères. Imaginez que c'est comme si vous posiez une question à
la base de données et obteniez une réponse filtrée.
Gérer les objets de base de données : vous pouvez utiliser SQL pour gérer d'autres
objets de base de données tels que des tables, des vues et des index.

2.6. PHP :
PHP signifie PHP : (Hypertext Preprocessor) (préprocesseur hypertexte), mais c'est
aussi devenu un acronyme récursif. C'est un langage de programmation open-
source principalement utilisé pour créer des pages web dynamiques.
 Chapitre 2 : Taches Effectuées

Voici quelques utilisations courantes de PHP :

Générer du contenu dynamique : PHP peut être utilisé pour extraire des données
d'une base de données et les intégrer dans une page web. Cela permet d'afficher
des informations différentes en fonction de l'utilisateur ou de la situation.
Créer des applications web interactives : PHP peut être utilisé pour traiter des
formulaires, gérer des sessions utilisateur, et créer des applications web
interactives complexes.
Développer des sites web e-commerce : PHP est un langage populaire pour le
développement de sites web e-commerce car il permet de gérer les paniers
d'achat, traiter les paiements et afficher des produits dynamiquement.

Ce code correspond à une partie de code PHP :

Chapitre 3 :

Réalisation
 Chapitre 3 : Réalisation

Images de Projet :

1.1. Page d’accueil :

1.2. Page nos services :

 Chapitre 3 : Réalisation

1.3. Page notre équipe :

 Chapitre 3 : Réalisation

1.4. Page nos chambres :

 Chapitre 3 : Réalisation

1.5. Page de réservation formulaire :

1.6. Page de Contactez-nous :

 Conclusion

Ce stage a été pour nous un don précieux, qui nous a permis de compléter notre
formation en tant qu’informaticiennes. Il nous a permis aussi de découvrir la vie professionnelle,
de bien s’adapter et surtout d’acquérir une expérience afin de maîtriser les différents travaux
de l’informatique dont on sera appelé à effectuer lors de l’insertion dans la vie active. En plus, il
nous a permis de mettre toutes nos compétences au seine l’établissement, et c’était une belle
occasion de s’instruire et de sentir l’importance du travail en groupe et le sens de la
responsabilité. Ce stage m’aura permis d’avoir une expérience très appliquée du monde
professionnel, notamment en ce qui concerne la gestion de projet, étant donné que j’ai mené mon
projet de la feuille blanche au rendu final. C’est une opportunité qui me permettra d’aborder mon
année d’alternance sous les meilleurs auspices.