Rapport de Stage PDF

INRODUCTION GENERALE
Dans le cadre de l'ouverture de l'université sur son environnement extérieur, le Centre

Universitaire Roannais (CUR) a instauré des actions de collaborations avec des entreprises.
Dans ce contexte, j’ai réalisé un stage de fin d'année intitulé « développement d’un site internet
» au sein de la société Rhône Nettoyage.
L'objectif du stage est d'étudier les secteurs d’activités de l’entreprise et de faire développer un
site web tout en assurant une bonne présentation de l’entreprise en présentant ces prestations et
en facilitant la communication entre les clients et l’entreprise.
Le rapport s'affiche comme étant un aperçu de notre travail, structuré en trois chapitres :
• Le premier chapitre sera consacré à la présentation générale de l'entreprise. Nous

présentons ensuite le cahier des charges et la solution adoptée pour répondre à notre
objectif.
• Dans le second chapitre, je présenterai les typologies de site web et les étapes de sa
création ainsi que ses intérêts.
• Le dernier chapitre portera sur les phases de création de site de Rhône Nettoyage en
passant par la réalisation des différentes pages web jusqu’à l’hébergement de site sur le
web, ainsi que quelques testes sur les formulaires de contact et de devis.
• Enfin, ce rapport sera clôturé par une conclusion générale détaillant les étapes effectuées
et traçant quelques perspectives.
Elbechir AMOR Page 1

Chapitre 1 : présentation de la société
1. Introduction :
Dans le premier volet de ce chapitre je vais présenter la société (Rhône Nettoyage).

Dans le second volet je détail les prestations de l’entreprise.
Le dernier volet est consacré à la présentation de notre cahier de charge, en présentant les
missions confiées.
2. Présentation de la société :
Rhône Nettoyage est une auto-entreprise familiale, elle a été fondée en 2014 grâce à M et Mme
AKILI situé à Tassin La Demi-Lune (69160) France, C’est une entreprise en pleine
croissance dans son secteur d’activité surtout dans la ville de Lyon et ses alentours.
Depuis plusieurs années, ses missions consistent principalement en nettoyage et l’entretien des
surfaces, bureaux, locaux, équipements de sites tertiaires, industriels.

En plus cette année ils ont rajouté un autre service c’est la peinture intérieure et la peinture
décoratif.
Figure 1: Logo Rhône Nettoyage

2.1. Les prestations du Rhône nettoyage :
Le principal secteur d’activité pour cette entreprise c’est le nettoyage et l’entretien des locaux
commerciaux, Rhône Nettoyage propose des prestations sur mesure pour l’entretien des
immeubles, résidences ou copropriétés, intégrant le nettoyage des halls d’entrée, escaliers,
paliers, ascenseurs, dans le cadre du ce contrat d’entretien signé avec le client, ils effectuent
aussi le service de répurgation (entrée et sortie des poubelles) et ils assurent le nettoyage des
conteneurs, le changement des ampoules.
En plus que ça ils ont d’autres services de ménage par exemple :
• Nettoyage des vitres (enlèvement des traces de doigt et autre)
• Vidange des sacs poubelle des allées
• Nettoyage des boites au lettre
• Enlèvement des détritus dans les bacs à fleures
• Enlèvement des toiles d’araignée
• Nettoyage du tapis de sol dans les allées
• Balayage des devantures
• Nettoyage des interrupteurs
• Balayage et lavage des sols
• Entretien des parties communes
• Gestion des ordures ménagères et collectes sélectives
• Balayage de parkings aériens ou souterrains
• Désinfection des conteneurs et locaux vide-ordures
• Désinfection et dératisation des immeubles ou appartements
• Mise en état après travaux et avant location ou vente
• Enlèvement d’encombrants
• Changement d’ampoules électriques
En plus que le nettoyage et l’entretien cette année Rhône Nettoyage a rajouté un autre service
c’est tous qui est peinture d’intérieur et décoratif, elle a commencé d’accepter des chantiers du
peinture intérieur tout neuf ou bien de rénovation, elle a accepté aussi d’autres chantiers de
décoration avec les papiers peints.

3. Cahier des charges :
Le cahier des charges concerne le développement d’un site internet pour la société Rhône
nettoyage.
Rhône Nettoyage est une entreprise récemment fondée, elle est en plein croissance et depuis
cette année ils ont rajouté plusieurs services (ameublement, peinture intérieur) en plus ils sont
devenus connus dans la ville de Lyon et ses alentours.
Le marché lyonnais dans ces secteurs d’activités présente plusieurs concurrents, en plus que ça
Rhône Nettoyage elle a pas encore son propre site web, ce qui implique la limitation de son part
de marché lyonnais en plus des difficultés de communication avec ses clients, donc ils ont pensé
de créer leur propre site web qui va offrir à leurs clients une espace de contact et une autre
espace de demande de devis.
Dans mon stage, je suis appelé à créer leur site web avec toutes ses pages.
4. Conclusion :
Dans ce chapitre j’ai présenté la société Rhône Nettoyage, puis j’ai expliqué notre cahier de
charge en montrant l’importance de ce projet.
La présentation générale d’un site web et les étapes de sa création feront l’objet de chapitre
suivant.

Chapitre 2 : typologie des sites web
1. Introduction :
Dans ce chapitre je vais présenter dans une première partie la page web et le site web, ensuite
les intérêts de sites web, et vers la fin je vais faire une description générale de les étapes de
création d’un site web.
2. La page web et le sites web :
2.1. Page web :
La page web est le document qui apparaît sur un écran d’ordinateur et qui se présente sous
forme de texte, de son, d’images etc. chaque page web est écrite dans un langage particulier
appelé le HTML, ce langage est basé sur des balises, qui contiennent des instructions, lesquelles
sont interprétées par les différents navigateurs et apparaissent sur l’écran. Il s'agit donc d'un
langage de mise en forme du texte. Le code HTML d'une page est appelé le "code source". Les
codes sources de chaque page web sont normalement en libre accès, on peut les voir en cliquant
sur : "Affichage > source" pour Internet Explorer "Afficher > Source" de la page pour Netscape.
Le HTML est le langage de base des pages web, cependant il existe de nombreux autres
langages qui interviennent dans la programmation d’une page web (PHP, ASP etc.). Je
reviendrais sur ces langages dans les prochains chapitres.
2.2. Site web :
Le site web est constitué de l’ensemble des pages créées par une structure ou un individu relié
entre elles par des liens hypertextes, stockées sur un serveur et accessibles via l'Internet.
Chaque site web possède un identificateur appelé adresse URL1, permettant de la retrouver sur
le Web et d’identifier le type de protocole d’accès qui lui est associé. Le protocole étant
l’ensemble des règles (codes) à respecter pour établir un échange d’informations entre
ordinateurs. Jusqu’en 1996, la plupart des sites hors des Etats-Unis utilisaient un nom de
domaine géographique à deux lettres, par exemple : .sn pour le Sénégal ; .fr pour la France etc.
Depuis quelques années plusieurs organisations préfèrent dissocier leur image de celle de leur
pays, elles choisissent pour cela des noms de domaine liés à leur activité par exemple .com
(commercial) ; .org (organisation) ; .net (Internet). Les noms de domaine sont gérés
actuellement par la société américaine Network Solution Inc. (NSI). Les adresses IP qui
identifient les ordinateurs sont attribuées par des registres américains ARIN et européens RIPE.
On peut aussi distinguer deux types de sites web, y’en a des sites statiques et des sites
dynamiques [1].
2.2.1. Le site statique :
Le site statique est constitué de pages HTML prédéfinies, crées une fois pour toute à l’aide d’un
éditeur HTML. Le concepteur du site réalise avec un éditeur HTML des pages web stockées
sur le serveur web. Celui-ci renvoie ces pages à la demande au visiteur. Par la suite ces pages
ne pourront être modifiées que via un éditeur HTML, par le concepteur. Le contenu de ces
pages est fixe comme un fichier Word, et n'est pas modifié par le serveur. Le site est donc dit
"statique" car son contenu ne change que par une intervention humaine et non pas par des
fonctions automatiques opérées par le serveur [1].
Figure 2 schéma de principe du fonctionnement de site statique

Le site statique ne présente pas souvent de séparation entre le fond et la forme de présentation
du contenu mais sa mise en place nécessite un minimum de compétence en conception web
(programmation et webdesign). Le coup de réalisation d’un site web statique est beaucoup
moins élevé que celui d’un site dynamique et son hébergement ne pose pas de contraintes
particulières.
2.2.2. Le site dynamique :
Le site dynamique est un site Web dont les pages HTML se construisent lors de sa consultation
par un internaute en sollicitant des bases de données filtrées par des outils logiciels de mise en
forme. La plupart des portails documentaires sont des sites dynamiques. La mise à jour des sites
dynamiques tant sur le fond que sur la forme est facilitée. Le site dynamique permet de plus
d'intégrer des fonctions de personnalisation. Cette architecture peut en revanche se révéler
coûteuse à mettre en place, délicate à piloter notamment au niveau de l'hébergement et peu
performante au niveau du référencement [1].
Figure 3 schéma de principe du fonctionnement de site dynamique

Le gestionnaire du site et son visiteur utilise le même outil : le navigateur web. Cependant les
pages avec lesquelles travaille l'administrateur ne sont pas les mêmes que celles que le visiteur
voit : il encode dans des pages web sous la forme de "formulaires", qui alimentent une base
donnée dans laquelle sont stockées des informations. De son côté, le visiteur visualise des pages
qui font appel au contenu de la base de données. C'est le serveur web qui s'occupe de récupérer
le contenu des formulaires que remplit l'administrateur, et de renvoyer cette information dans
les pages vues par le visiteur. Le site web dynamique est fort recommandé pour les portails à
forte volumétrie ou intégrant des flux d’origines diverses ce qui est souvent le cas des portails
documentaires. La mise à jour des sites dynamiques est facilitée grâce aux outils
d’administration et aussi une meilleure séparation entre le fond et la forme. Elle (mise à jour)
ne nécessite pas une compétence technique particulière. Le coût de développement d’un site
portail dynamique peut être élevé mais il est souvent amorti en raison des économies réalisées
sur la mise à jour.
3. Intérêt de site web :
Le site web d’une entreprise est un outil de marketing. Grâce à une présence de qualité sur le
web, ils pourront convaincre des nouveaux clients d’acheter leurs produits et de faire recours à
leurs services. En d’autres termes, le but fondamental de leur site internet est d’augmenter leur
chiffre d’affaire.
Le site web permet d’apporter beaucoup des bénéfices à l’entreprise, parmi ces valeurs ajoutées
je note :
✓ Augmenter sa visibilité : Un site internet est un outil qui permettra aux clients de
trouver les informations importantes de l’entreprise (produits et/ou services, horaires
d'ouvertures, adresse...).
✓ Consultable 24h/24 7j/7 : Avec un site internet, notre entreprise sera consultable sans
interruption (24h/24 et 7j/7) et même accessible partout dans le monde (dans notre ville,
notre département, notre pays et même au-delà).

✓ Modifiable rapidement : Contrairement à la publicité, nous pouvons en effet apporter
des modifications au site internet de notre entreprise très rapidement et
automatiquement.
✓ Offrir un support à vos clients : avec le site internet de notre entreprise nous pouvons
apporter des informations complémentaires sur nos produits et/ou services à nos clients
(avec par exemple une liste de questions/réponses).
C'est également l'occasion d'apporter à nos clients d'autres moyens pour nous contacter
(formulaire de contact, chat, forum...) ainsi que des zones de participations
(commentaires, avis...).
✓ Automatiser certaines tâches : Sur le site internet de notre entreprise, nous pouvons
automatiser certaines tâches qui nous permettront d'économiser du temps et donc de
l'argent, c'est le cas notamment des formulaires de réservation en ligne ou de prise de
rendez-vous, ou encore l'achat en ligne pour un site e-commerce.
4. Création d’un site web :
Pour créer un sites web, on va passer sur trois principales étapes :
✓ La première étape consiste à maquetter le design, pour avoir un objectif du site web à
réaliser, au cours de cette étape on a besoin d’utiliser des logiciels de graphisme par
exemple le Photoshop c’est le logiciel le plus connu pour les graphistes.
✓ La deuxième étape c’est la plus importante, au cours de cette étape, on va commencer
le développement pour cela on va utiliser deux langages informatiques HTML 5 et CSS,
on commence par construire le squelette HTML de notre site ensuite on passe à la mise
en forme avec le CSS comme illustre la figure 4.
✓ La troisième étape consiste à la mise en ligne de notre site web c’est qu’on appelle
l’hébergement d’un site sur le web

Avec HTML
+ CSS
Avec HTML + CSS
Figure 4 mise en forme avec CSS

Le HTML définit le contenu (comme vous pouvez le voir, c'est brut de décoffrage !) et le CSS
permet lui d'arranger le contenu et de définir la présentation : couleurs, image de fond, marges,
taille du texte.

4.1. HTML 5 :
C’est un langage qui a pour rôle de gérer et organiser le contenu d'une page web. C'est un
langage de description de données, et non pas un langage de programmation. On a utilisé le
HTML 5 qui est la dernière version du HTML qui est actuellement toujours en développement.
Cette version 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 [3].
4.2. CSS :
Le rôle du CSS est de gérer l'apparence de la page web (agencement, positionnement,

décoration, couleurs, taille du texte…). Ce langage est le complément du langage HTML pour
obtenir une page web avec du style. Le navigateur parcourt le document HTML. Lorsqu'il
rencontre une balise, il demande à la CSS de quelle manière il doit l'afficher.
4.3. Hébergement d’un site web :
Après qu’on a fini la deuxième étape notre site est prêt mais il est visible que par nous, sur notre
ordinateur, donc il faut l'envoyer sur le Web pour qu'il soit visible par tout le monde c’est qu’on
appelle l’hébergement [4].
Pour cette étape nous avons besoin de deux éléments :
❖ Un nom de domaine : c'est l'adresse de notre site web, on peut réserver une adresse en
.com, .fr, .net… Par exemple : rhone_nettoyage.com, pour réserver un nom domaine il
faut le commander directement sur internet ça coute entre 7 et 12 euro par ans, le prix
peut varier en fonction de l'extension, ainsi, l'extension .info est généralement proposée
à plus bas prix et peut s'avérer être une alternative intéressante. Mais si on veut une
adresse plus « courante », il faudra plutôt viser une extension de type .com ou encore.fr.
❖ Un hébergeur : c'est une entreprise qui se charge de gérer des baies de serveurs. Elle
s'assure du bon fonctionnement des serveurs 24h/24, 7j/7. En effet, si l'un d'eux tombe
en panne, tous les sites présents sur la machine deviennent inaccessibles (et cela fait des
clients mécontents). Ces baies se situent dans des lieux particuliers appelés datacenters
(figure5). Les datacenters sont donc en quelque sorte des « entrepôts à serveurs » et
leur accès est très protégé, l’hébergeur c’est lui qui va stocker notre site web sur une
machine appelée « serveur », c’est un ordinateur généralement très puissant, qui reste
tout le temps allumé. Il contient les pages des sites web, Son rôle sera d'envoyer notre
site à nos visiteurs à toute heure du jour et de la nuit. Pour transmettre les fichiers de
votre site au serveur de notre hébergeur, il faut utiliser un client FTP comme Filezilla.
Pour nous connecter au serveur, nous avons besoin de trois informations : l'adresse IP
du serveur (ou son nom d'hôte), notre login et notre mot de passe. Ceux-ci nous sont
fournis par notre hébergeur.
Figure 5 datacenter avec ses plusieurs baies de serveurs
5. Conclusion :
Dans ce chapitre, j’ai présenté généralement le site web, son rôle, ses intérêts et comment on
peut le créer. Donc, dans le chapitre suivant je vais vous expliquer comment j’ai fait pour créer
le site web de notre entreprise et comment je l’ai hébergé.

Chapitre 3 : Développement de site Rhône Nettoyage
1. Introduction :
Dans le chapitre précédent j’ai expliqué généralement les étapes de création d’un site, c’est pour
cela j’ai consacré ce chapitre pour décrire comment j’ai développé le site web de l’entreprise
Rhône Nettoyage en passant par ces étapes. En fin, je vais mettre l’accent sur les résultats des
essais.
2. Interfaces logicielles :
2.1. L’environnement komodo edit :
Komodo edit est un éditeur de texte qui va me permettre de pouvoir écrire des pages de code
et de les enregistrer au bon format (c’est-à-dire avec la bonne extension). Cet éditeur propose
en général différentes options pour m’aider à coder, comme par exemple des indications lorsque
je fais une faute de syntaxe dans mon code [5].
Figure 6 L'éditeur de texte Komodo Edit

2.2. L’environnement Photoshop :
Photoshop est l'outil le plus utilisé actuellement pour la retouche d'images de qualité
professionnelle. Ses nombreux outils lui permettent d'effectuer quasiment tout ce qui est
possible de faire sur une image.
Ses principales fonctionnalités sont :
• La conception de sélections dans différents modes qui permet de choisir avec une grande
précision les parties de l'image devant subir des modifications.
• Les nombreux outils permettant de détourer tout ou partie d'une image afin d'effectuer
des montages.
• La création de masques divers permettant d'effectuer des montages entre différents

visuels.
• Des nombreux filtres permettant des effets spéciaux.
Personnellement je l’ai utilisé pendant la première étape de design de site pour faire des
retouches et des montages de images de fond de mes pages web ainsi que la création de logo
de l’entreprise.
Figure 7 Interfaces Photoshop CS6

2.3. L’environnement Filezilla :
Filezilla est un logiciel de transfert FTP (File Transfert Protocol). Il permet d'envoyer les pages
web (html, css, php ...) sur un ordinateur distant (je parle de serveur) avec une vitesse très élevé.
Une fois les pages arrivées sur notre serveur, nous pouvons consulter en ligne botre site Internet.
L’interface de ce logiciel se comporte principalement de trois partis comme illustre la figure

suivante [2] :
1. Communication entre Filezilla (commandes) et le serveur FTP (réponses).

2. Cette partie correspond au disque présent sur le micro-ordinateur.
3. Il s’agit de notre espace disponible sur le serveur de notre hébergeur
2 3
Figure 8 Interface de Filezilla

3. La réalisation du design :
Le design du site web est un élément important pour l’utilisateur. Le design du site web doit
représenter virtuellement l’ambiance, l’atmosphère et la qualité de la section locale. Si le site
possède un bon design reflètera notre compétence, notre sérieux et l’importance que nous
accordons à la qualité.
Pour cela, le design du site sera propre, clair et fidèle à la section locale ainsi que ses fidèles
couleurs qui sont inspirés du logo de la société.
Le site web comporte divers éléments : un en-tête, un menu de navigation, une corp centrale
ainsi qu’un pied de page contenant l’ensemble des liens utiles et infos pratiques.
4. Taches effectuées :
Dans ce stage j’été sensée de réaliser deux taches dans un même projet qui est la création d’un
site web.
✓ La première tâche : développement des pages du site.
✓ La deuxième tache : hébergement du site.
4.1. Réalisation de l’ensemble des pages :
4.1.1. Création de la structure d’une page :
Le site doit être souple à l’utilisation et à la navigation, que ce soit dans ses fonctionnalités ou
dans son contenu.
Mon principal but est de faciliter la navigation le plus possible puisque notre site est un site
statique qui va présenter l’entreprise avec ses prestations et ses nouveautés et qui va aussi
permettre aux clients d’avoir un devis en ligne gratuitement pour ces chantiers sans déplacer.
Et pour cela, j’ai décidé que l’ensemble des pages du site vont être structurées de la même
façon, ils ont presque le même design.
La structure de notre site se compose de :
✓ Un en-tête de page avec le logo de "Rhône Nettoyage" qui contient un menu de

navigation complet.

✓ Une zone Nav qui contient le menu déroulant.
✓ Un contenu qui se modifier selon les pages.
✓ Un pied de page qui contient l’ensemble des réseaux sociaux utiles avec un lien de la
page de contact.
En tête (header)
Menu deroulante (nav)
Corps partie centrale (article + aside)
Pied de page (footer)
Figure 9 Structure d'une page web
La partie centrale varie d’une page à une autre, c’est pour cela j’ai commencé par la création
des parties fixes (en-tête, la menu déroulante et le pied de page), cela évite d’implémenter à
nouveau chaque partie du site, ce qui entraine un gain de temps considérable.

A. Les parties fixes du site web :
Comme j’ai vous expliquer précédemment que les parties fixes se sont l’en-tête, la menu
déroulante et le pied de page.
L’en-tête « header » :
L’en-tête d'une page se trouve en haut de celle-ci. Dans notre site l’en-tête comprend le nom de
la société, son logo avec un arrière-plan attractif.
Figure 10 En-tête des pages
Le menu déroulant « Nav » :
La navigation sur un site Web est conçue par un ensemble de liens qui permet d’accéder à aux
principaux contenus de site Internet. Le menu de navigation ou (barre de navigation) est
généralement placé horizontalement dans la partie supérieure en dessous de la section d’en-tête
et disponible sur toutes les pages du site.
Notre menu contient quatre éléments : Accueil, Nos prestations, Contactez-nous et Devis. Un
clic sur l’un de ces éléments va contribuer au passage à une nouvelle page. Lors de notre accès
au site la première page qu’elle va s’exécuter c’est la page d’accueil après avec notre menu on
peut accéder aux autres pages avec un simple clic.
Figure 11 Menu du site

Le pied de page « footer » :
Le pied de page se trouve tout en bas de la page et existe dans la totalité des pages du site. Ils
permettent d'ajouter différentes informations en dehors de nos données.
On trouve ainsi un ensemble des liens d’accès à des réseaux sociaux et professionnels
Avec un lien de la page de contact.
Figure 12 Pied de page
B. Les parties centrales des pages web :
Dès que j’ai fini la création des parties fixes de tous les pages, j’ai passé pour développer le
contenu de chaque page, comme j’ai vous montrer précédemment qu’on a quatre éléments dans
le menu de navigation qui correspond à la page d’accueil, la page des prestations de l’entreprise,
la page de contact et la page de devis.
Page d’accueil :
La page d'accueil doit être à la fois claire, attirante et représentative du contenu du site. Il faut
aussi qu’elle soit la vitrine de l’entreprise.
Cette page d’accueil permet en fait d’ouvrir toutes les autres pages, elle contient un menu à
droite regroupant les fonctionnalités du site et une petite description sur la société au niveau du
contenu avec ses compétences, son professionnalisme et ses satisfactions.
La page d'accueil est la page référence du site, c’est elle qui dirige les internautes perdus. Un
de ses rôles principaux est de donner accès aux fonctions principales du site sans surcharger la
page. Dans le choix des contenus à afficher en priorité sur la page d'accueil, on a pensé à ce que
cherche l’utilisateur en arrivant sur le site.

Figure 13 Page d'accueil
Page de « Nos Prestations » :
Dans cette page j’ai présenté les prestations de l’entreprise dans ces secteurs d’activités avec
un diaporama de photos prises dans des chantiers faite par Rhône nettoyage, j’ai la divisé en
deux sections puisque notre entreprise a principalement deux secteurs d’activité :
✓ Le premier qui est le principal c’est le nettoyage et l’entretien des appartements,

locaux...
Figure 14 Première section de la page "Nos Prestations"

✓ Le deuxième secteur c’est la peinture intérieure et décoratif
Figure 15 Deuxième section de la page "Nos Prestations"

Page de contact :
La page de contact est aussi divisée sur deux sections :
La première section sur laquelle j’ai précisé les coordonnées de l’entreprise le numéro de
téléphone ainsi que l’horaire d’ouverture, en plus j’ai développé un formulaire de contact pour
que les visiteurs puissent contacter l’entreprise, sans avoir de client mail sous la main. Ainsi,
une fois le formulaire rempli, le message part directement dans la boîte mail de l’entreprise sous
forme d’un mail, ce formulaire contient le nom de visiteur, le prénom de visiteur, le mail de
visiteur ainsi que son message qu’il souhaite adresser.

Figure 16 La première section de la page de contact
Sur la deuxième section j’ai mis un plan d’accès pour que les clients puissent venir directement
à l’entreprise. Pour cela j’ai ’intégrée une carte interactive grâce à Google Maps comme illustre
la figure suivante.
Figure 17 La deuxième section de la page de contact

Page de devis :
Cette page est consacrée pour les demandes de devis, c’est pour cela j’ai développé un
formulaire de demande de devis pour que les visiteurs puissent faire une demande de devis en
ligne, sans se déplacer vers l’entreprise. Ainsi, une fois le formulaire rempli, la demande part
directement dans la boîte mail de l’entreprise sous forme d’un mail qui contient le nom de
visiteur, le prénom de visiteur, le mail de visiteur, la surface à travailler, la date de début de
chantier, le type de travaux ainsi que la description du besoin.
Figure 18 Page de devis

4.2. Hébergement de site :
Dès que j’ai fini la première tâche de développement de pages web, notre site est tout beau, tout
propre, tout prêt, mais comme il est sur mon disque dur de mon ordinateur, personne d'autre ne
va pas l’accéder, c’est pour cela je vais héberger notre site en le mettant en ligne sur le web
c’est que va permettre les clients de Rhône nettoyage d’accéder à notre site et d’envoyer leurs
messages et leurs demandes de devis.
4.2.1. Choix d’un hébergeur :
Comme j’ai vous expliqué dans le chapitre précédent pour réaliser cette tache on a besoin d’un
nom de domaine et d’un hébergeur, les hébergeurs sont très nombreux, Il y en a de tous types,
à tous les prix. Il y a un vocabulaire à connaître pour repérer les offres [1] :
✓ Hébergement mutualisé : votre site sera placé sur un serveur gérant plusieurs sites à
la fois (peut-être une centaine, peut-être plus). C'est l'offre la moins chère.
✓ Hébergement dédié virtuel : cette fois, le serveur ne gère que très peu de sites
(généralement moins d'une dizaine). Cette offre est généralement adaptée aux sites qui
d'un côté ne peuvent plus tenir sur un hébergement mutualisé car ils ont trop de trafic
(trop de visiteurs), mais qui par ailleurs ne peuvent pas se payer un hébergement dédié
(voir ci-dessous).
✓ Hébergement dédié (on parle aussi de « serveur dédié ») : c'est le nec plus ultra. Le
serveur gère uniquement votre site et aucun autre, cela coûte assez cher et il vaut mieux
avoir des connaissances en Linux pour administrer le serveur à distance.
Dans notre cas le site de Rhône Nettoyage est un site statique, il n’a pas besoin d’une grande
capacité de mémoire c’est pour ça j’ai choisi l’hébergement mutualisé et après les recherches
que je l’ai fait je trouvé une offre d’hébergement mutualisé gratuit chez l’hébergeur hostinger.
J’ai choisi cet hébergeur pour deux raisons :
✓ C’est totalement gratuit.
✓ Il ne met pas des publicités sur mes pages web.

La seule contrainte que je l’ai trouvé c’est son nom de domaine « 000webhostapp.com », il
n’est pas simple, ni connu, mais après on peut acheter un nom domaine personnalisé et l’intégrer
à notre hébergeur « hostinger ».
Figure 19 Hébergeur HOSTINGER
4.2.2. Transfert les fichiers vers l’hébergeur :
Pour envoyer nos fichiers vers notre hébergeur, il nous faut un client FTP, c’est un logiciel qui
va nous permettre de se connecter à un serveur FTP afin d'y échanger des fichiers, pour mes
transferts j’ai utilisé le logiciel Filezilla (je l’ai présenté au début de ce chapitre) c’est les plus
connu pour les développeurs.
Pour configurer notre client FTP par rapport à notre hébergeur, tout d’abord il faut récupérer
les trois paramètres (Nom d’hôte, Port et le Nom d’utilisateur) de notre hébergeur comme
illustre la figure suivante :
Figure 20 Paramètres FTP

Dès qu’on a les trois paramètres FTP, on passe à la configuration de Filezilla, c’est trop simple
il faut juste insérer ces trois paramètres et connecter à notre serveur [2].
Figure 21 Configuration de Filezilla

Après cette configuration, j’ai devenu connecté au serveur de mon hébergeur de coup j’ai
commencé à transférer les fichiers de mes pages web de mon ordinateur vers le serveur, dès
que le transfert est fini, mon site devient en ligne et visible pour tous les visiteurs.
Sur notre client FTP Filezilla, on a deux espaces :
✓ Site local : c’est le disque dur de mon ordinateur.
✓ Site distant : c’est le serveur.
Le transfert des fichiers de site local au site distant se fait d’une manière très rapide et très
simple, juste on glisse les fichiers d’un espace vers l’autre et comme ça le transfert est fait,
comme il est montré dans la figure 22.

Figure 22 Transfert des fichiers
4.3. Test de formulaires :
Comme j’ai vous dis que le site de Rhône nettoyage est un site statique, donc je ne vais pas
créer une base de données pour récupérer les données saisis par les visiteurs de site, pour cela
j’ai développé un code PHP (voir annexe) qui va récupérer les données de formulaires, les traiter
et en fin les envoyer à un mail personnel.

4.3.1. Test de formulaire de contact :
Dans ce test je vais rentrer les données suivantes :
➢ Nom : Amor
➢ Prénom : Elbechir
➢ Adresse E-mail : bechiramor1@gmail.com
➢ Message : Test de formulaire de contact
Saisir de données
Message affiché après l’envoie
Récupération de données
Figure 23 Test de formulaire de contact

4.3.2. Test de formulaire de demande de devis :
Dans ce test je vais rentrer les données suivantes :
Nom : Amor Type de travaux : Nettoyage Message : Test de formulaire de devis
Prénom : Elbechir Surface : 50 m2
Adresse E-mail : bechiramor1@gmail.com Date du début de chantier :11/06/2018
Figure 24 Formulaire de devis

Message affiché après l’envoie
Récupération de données
Figure 25 Récupération de données de devis
5. Conclusion :
Dans ce dernier chapitre, j’ai présenté les quatre pages de site web de Rhône nettoyage puis j’ai
présenté comment je l’ai hébergé sur le web et en fin j’ai fait des essais sur les deux formulaires
de contact et de devis. Or que tous les résultats de ces essais ont montré la validité et le bon
fonctionnement du site web.

Conclusion générale
Le travail réalisé a été effectué au sein de l’entreprise Rhône Nettoyage, dans le cadre d’un
stage de fin d’année.
Le travail que j’ai effectué dans stage de fin d’année, m’a permis de contacter le monde de
développement durant trois mois. Cette occasion était enrichissante et fructueuse. En effet, la
valeur de cette expérience provient essentiellement de la société (Rhône Nettoyage) qui m’a
acquis, aussi la nature du sujet et de la problématique posée. Dans ce sens, ce travail représente
pour moi une initiation à l’intégration au monde professionnel. Par ailleurs, ce stage m’a permis
d’approfondir nos connaissances théoriques et pratiques dans le domaine de développement
web.
L’intérêt de ce stage réside dans la familiarisation avec les sites web concernant leurs
développements en HTML, leurs mises en forme avec le CSS et leurs hébergements dans le
web, en plus j’ai maîtrisé une autre astuce c’est comment je peux récupérer et traiter les données
envoyées avec un formulaire sans créer une base de données.

Références bibliographiques
Ouvrage ou mémoire :
[1] : Mathieu Nebra, Apprenez à créer votre site web avec HTML5 et CSS3, France, 2013.
[2] : Maisse Sébastien, installation et configuration d'un serveur FTP, France, 1 Mars 2015.
Netographie
[3]: https://www.developpez.com consulté le 10 avril 2018.
[4]: https://openclassrooms.com/courses consulté le 15 avril 2018.
[5]: http://www.pierre-giraud.com/html-css/cours-complet/cours-html-css-presentation.php
consulté le 5 mai 2018

Sommaire
INRODUCTION GENERALE ................................................................................................................1

Chapitre 1 : présentation de la société ......................................................................................................2
1. Introduction : ............................................................................................................................. 2
2. Présentation de la société : ........................................................................................................ 2
2.1. Les prestations du Rhône nettoyage : .............................................................................. 3
3. Cahier des charges : .................................................................................................................. 4
4. Conclusion : ............................................................................................................................... 4
Chapitre 2 : typologie des sites web .........................................................................................................5
1. Introduction : ............................................................................................................................. 5
2. La page web et le sites web : ..................................................................................................... 5
2.1. Page web :........................................................................................................................... 5
2.2. Site web : ............................................................................................................................ 5
2.2.1. Le site statique : ......................................................................................................... 6
2.2.2. Le site dynamique : ................................................................................................... 7
3. Intérêt de site web : ................................................................................................................... 8
4. Création d’un site web : ............................................................................................................ 9
4.1. HTML 5 : ......................................................................................................................... 11
4.2. CSS : ................................................................................................................................. 11
4.3. Hébergement d’un site web : .......................................................................................... 11
5. Conclusion : ............................................................................................................................. 12
Chapitre 3 : Développement de site Rhône ............................................................................................13
Nettoyage ...............................................................................................................................................13
1. Introduction : ........................................................................................................................... 13
2. Interfaces logicielles : .............................................................................................................. 13
2.1. L’environnement komodo edit : ..................................................................................... 13
2.2. L’environnement Photoshop : ........................................................................................ 14
2.3. L’environnement Filezilla : ............................................................................................ 15
3. La réalisation du design : ........................................................................................................ 16
4. Taches effectuées : ................................................................................................................... 16
Elbechir AMOR Page i

4.1. Réalisation de l’ensemble des pages : ............................................................................ 16
4.1.1. Création de la structure d’une page : .................................................................... 16
A. Les parties fixes du site web : ......................................................................................... 18
B. Les parties centrales des pages web : ............................................................................. 19
4.2. Hébergement de site : .......................................................................................................... 24
4.2.1. Choix d’un hébergeur : ................................................................................................... 24
4.2.2. Transfert les fichiers vers l’hébergeur : ........................................................................ 25
4.3. Test de formulaires : ........................................................................................................... 27
4.3.1. Test de formulaire de contact :....................................................................................... 28
4.3.2. Test de formulaire de demande de devis : ..................................................................... 29
5. Conclusion : ............................................................................................................................. 30
Conclusion générale ...............................................................................................................................31
Références bibliographiques ..................................................................................................................32
Netographie ............................................................................................................................................32
Elbechir AMOR Page ii

Liste des figures
Figure 1: Logo Rhône Nettoyage ............................................................................................... 2

Figure 2 schéma de principe du fonctionnement de site statique ............................................... 6
Figure 3 schéma de principe du fonctionnement de site dynamique ......................................... 7
Figure 4 mise en forme avec CSS ............................................................................................ 10
Figure 5 datacenter avec ses plusieurs baies de serveurs ......................................................... 12
Figure 6 L'éditeur de texte Komodo Edit ................................................................................. 13
Figure 7 Interfaces Photoshop CS6 .......................................................................................... 14
Figure 8 Interface de FileZilla .................................................................................................. 15
Figure 9 Structure d'une page web ........................................................................................... 17
Figure 10 En-tête des pages ..................................................................................................... 18
Figure 11 Menu du site............................................................................................................. 18
Figure 12 Pied de page ............................................................................................................. 19
Figure 13 Page d'accueil ........................................................................................................... 20
Figure 14 Première section de la page "Nos Prestations" ........................................................ 20
Figure 15 Deuxième section de la page "Nos Prestations" ...................................................... 21
Figure 16 La première section de la page de contact ............................................................... 22
Figure 17 La deuxième section de la page de contact .............................................................. 22
Figure 18 Page de devis ........................................................................................................... 23
Figure 19 Hébergeur HOSTINGER ......................................................................................... 25
Figure 20 Paramètres FTP ........................................................................................................ 25
Figure 21 Configuration de Filezilla ........................................................................................ 26
Figure 22 Transfert des fichiers ............................................................................................... 27
Figure 23 Test de formulaire de contact................................................................................... 28
Figure 24 Formulaire de devis ................................................................................................. 29
Figure 25 Récupération de données de devis ........................................................................... 30
Elbechir AMOR Page iii

Liste d’abréviations
HTML: Hyper Text Markup Language.
CSS: Cascading Style Sheets.
FTP: File Transfer Protocol.
PHP: Personal Home Page.
Elbechir AMOR Page iv

Rapport de Stage PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Rapport de Stage PDF

Transféré par

Droits d'auteur :

Formats disponibles

INRODUCTION GENERALE

Dans le cadre de l'ouverture de l'université sur son environnement extérieur, le Centre

• Le premier chapitre sera consacré à la présentation générale de l'entreprise. Nous

Elbechir AMOR Page 1

Dans le premier volet de ce chapitre je vais présenter la société (Rhône Nettoyage).

surfaces, bureaux, locaux, équipements de sites tertiaires, industriels.

Figure 1: Logo Rhône Nettoyage

Elbechir AMOR Page 3

Elbechir AMOR Page 4

2. La page web et le sites web :

2.1. Page web :

2.2. Site web :

2.2.1. Le site statique :

Figure 2 schéma de principe du fonctionnement de site statique

Elbechir AMOR Page 6

2.2.2. Le site dynamique :

Figure 3 schéma de principe du fonctionnement de site dynamique

Elbechir AMOR Page 7

3. Intérêt de site web :

Elbechir AMOR Page 8

4. Création d’un site web :

Pour créer un sites web, on va passer sur trois principales étapes :

Elbechir AMOR Page 9

Avec HTML + CSS

Figure 4 mise en forme avec CSS

Elbechir AMOR Page 10

Le rôle du CSS est de gérer l'apparence de la page web (agencement, positionnement,

4.3. Hébergement d’un site web :

Figure 5 datacenter avec ses plusieurs baies de serveurs

Elbechir AMOR Page 12

2.1. L’environnement komodo edit :

Figure 6 L'éditeur de texte Komodo Edit

Elbechir AMOR Page 13

Ses principales fonctionnalités sont :

• La création de masques divers permettant d'effectuer des montages entre différents

• Des nombreux filtres permettant des effets spéciaux.

Figure 7 Interfaces Photoshop CS6

Elbechir AMOR Page 14

L’interface de ce logiciel se comporte principalement de trois partis comme illustre la figure

1. Communication entre Filezilla (commandes) et le serveur FTP (réponses).

Figure 8 Interface de Filezilla

4.1.1. Création de la structure d’une page :

La structure de notre site se compose de :

✓ Un en-tête de page avec le logo de "Rhône Nettoyage" qui contient un menu de

Elbechir AMOR Page 16

✓ Un contenu qui se modifier selon les pages.

Menu deroulante (nav)

Corps partie centrale (article + aside)

Pied de page (footer)

Figure 9 Structure d'une page web

Elbechir AMOR Page 17

Figure 10 En-tête des pages

Le menu déroulant « Nav » :

Figure 11 Menu du site

Elbechir AMOR Page 18

Avec un lien de la page de contact.

Figure 12 Pied de page

B. Les parties centrales des pages web :

Elbechir AMOR Page 19

✓ Le premier qui est le principal c’est le nettoyage et l’entretien des appartements,

Figure 14 Première section de la page "Nos Prestations"

Elbechir AMOR Page 20

Figure 15 Deuxième section de la page "Nos Prestations"