RAPPORT DE

STAGE
2022

Poste : Web développeur

Avril – Juin 2022

XDO
Thomas DESCHAMPT

1
Remerciements

Je tiens à remercier toutes les personnes ayant participé de près ou de loin à mon
stage.

Je remercie tout d’abord mon maître de stage, Emmanuel CHEVALIER, pour m’avoir
recruté et accompagné au sein de son entreprise mais aussi pour m’avoir fait confiance
quant à la réalisation des différentes missions qui m’ont été attribuées durant ce stage.

Je remercie aussi Margot CHEVALIER avec qui j’ai travaillé sur la conception du site
internet de l’entreprise. Margot, était quant à elle chargée des designs et des visuels de la
marque.

Merci aussi à tous mes proches et à toutes les personnes qui m’ont apporté leur
soutien durant cette recherche de stage et au cours de cette mission.

2
Sommaire

I. Introduction……………………………………………………………………4
1. Ma démarche…………………………………………………………….4
2. Présentation de l'entreprise…………………………………………….4
3. Mes missions…………………………………………………………….6

II. Présentation des missions………………………………………………..7

1. Contexte professionnel des missions……………………………….…7
2. Problèmes / contraintes et limites….……………………………….….9

III. Démarche suivie pour effectuer les missions……………………...11

1. Processus suivi - méthode……………………………………….……11
2. Organisation des missions……………………………………….……13

IV. Réalisation des missions…………………………………………………15

1. Les outils………………………………………………………………..15
2. Les grandes étapes……………………………………………………17

V. Évaluation des réalisations et compétences mobilisées………..30

1.Adéquation du travail…………………………………………………….30
2.Compétences mises en oeuvre…………………………………………32

VI. Conclusion………………..………………………………………………….33
1.Analyse des conditions de travail………………………………………33
2.Apport des missions pour le stagiaire…………………………………33
3.Prochain stage ?...............................................................................34

VII. Bibliographie et webographie…………….…………………………….35

VIII. Annexes……………………………………….………………………………35

3
Introduction

Ma démarche :

Ma démarche de recherche de stage a débuté en novembre 2021 ; j’ai dans un

premier temps principalement démarché de nombreuses entreprises du secteur informatique
de la région lyonnaise par e-mail ou via des formulaires de candidature libre.

Malheureusement, à cause de la crise du covid encore assez présente et à cause de

mon manque d’expérience, ma prospection s’est avérée plus difficile que prévue. Après
avoir reçu plus d’une vingtaine de refus, j’ai décidé de me tourner vers des entreprises qui
n’étaient pas forcément spécialisées en informatique mais qui pourraient néanmoins avoir
besoin de mes services, par exemple, pour leur créer un site web de manière à promouvoir
leur services et leurs produits.

C’est à ce moment là, que mon oncle, qui est à la tête d’une société de design
appelé XDO m’a fait part d’un projet qu’il comptait mettre en place d’ici l’été 2022 et qu’il
aurait besoin de quelqu’un pour lui créer un site web. Au travers de ce site, il souhaite mettre
en avant ses activités, et faire connaître son projet au plus grand nombre par le biais
d’internet.

C’est ainsi que j’ai trouvé un stage de web développeur d’une durée de 9 semaines
au sein de l’entreprise XDO.

Présentation de l’entreprise :

XDO est une société à responsabilité limitée (SARL) qui a été créée en 1998.
L’entreprise est spécialisée dans la conception et le design d'objets, d'espaces mais aussi le
design alimentaire. L’entreprise est composée de 2 employés mais elle travaille aussi en
collaboration avec de nombreux artisans et artistes indépendants. Ce qui lui a permis de
construire un important réseau et ainsi de participer à de grands événements.

4
● Revisiter nos façons de consommer

● Sirha 2017

● Stand du projet Print Food

● Revisiter nos façons de
consommer

5
 L’entreprise est dirigée par Emmanuel Chevalier (mon maître de stage). Il est
designer et professeur à l’ENSBA Lyon (Ecole Nationale Supérieure des Beaux Arts) et il
était encore récemment directeur artistique du Sirha de Lyon (le Salon International de la
Restauration, de l'Hôtellerie, et de l'Alimentation).

Durant mon stage, j’ai pu travailler dans une nouvelle branche, appelée “Designer
Farmer”. Cette branche est encore en pleine construction et est actuellement à l’état de
projet, elle devrait être lancée à la rentrée prochaine. Elle a pour but de relancer l’activité de
l'entreprise à la suite des deux années de covid ayant fortement réduit les affaires de la
société.

Le but des “Designer Farmer” sera ainsi de proposer les services de différents
artisans et artistes qui seront regroupés sous ce même label. Le label permettra donc de
pouvoir accompagner ses clients sur divers domaines très variés en faisant appel à des
compétences multiples.
A la création du label, le modèle économique de l'entreprise reposera sur une prise
de commission sur les projets acquis par le biais de leurs réseaux. Mais dès que le label
sera plus connu et reconnu, l’adhésion aux Désigner Farmers sera payante et permettra à
l’entreprise d’être rentable.

Mes missions :

Dans le cadre de ce projet, mon maître de stage m'a confié différentes missions dans
le but de promouvoir le nouveau label par le biais d’internet.

Ma première mission a donc été de concevoir et de mettre en place un site vitrine

ainsi que de créer une documentation qui expliquerait aux membres de l’entreprise comment
modifier le site et les informations provenant de la base de données sans avoir besoin d’aide
extérieure.

Ma seconde mission a été de mettre en œuvre une base de données permettant de

regrouper toutes les personnes travaillant pour le label ainsi que les clients et les différents
projets réalisés.

Je suis donc intervenu principalement en tant que développeur web lors de ce stage.

6
I. Présentation des missions

Contexte professionnel des missions

Mission principale : La création du site web

Présentation :

Cette mission consiste à créer un site web composé de 5 pages qui permettront
respectivement de présenter le label, son fonctionnement, ses projets, ses membres et enfin
de contacter l’entreprise. Le parti pris de ce site est d’être très synthétique, afin d'aller à
l’essentiel très rapidement et de permettre une navigation simple et intuitive.
La page de contacts consistera en un formulaire à remplir par le demandeur. Une
fois les éléments saisis, il n’y aura plus qu’à valider sa demande. L’entreprise recevra
ensuite ce formulaire sur sa base de données. A partir de là, elle pourra prendre contact
avec les nouveaux prospects, leur répondre par un devis adapté au projet proposé.

Lors de cette mission j’ai travaillé en collaboration avec Margot Chevalier (élève en
3ème année de graphisme aux Beaux Arts à Lyon) qui s'est occupée des visuels du site
(polices, logo, couleurs,...) et avec mon maître de stage pour tout ce qui est la mise en
forme et le fonctionnement du site.
Pour réaliser cette mission, j’ai été amené à utiliser les langages PHP, CSS, HTML,
SQL et Javascript.

Contexte professionnel.

À mon arrivée dans l’entreprise, j’ai pu constater que la société XDO ne disposait
d’aucun site internet et plus largement d’aucun moyen de communication par le biais
d’internet ou des réseaux sociaux. L’essentiel de ses projets est ramené via le réseau
personnel de Mr Chevalier.
Néanmoins, l’équipe avait déjà bien réfléchi à ce projet et son contenu. En effet, ils
avaient fait une veille prospective et ils ont pu me donner plusieurs sites qu’ils trouvaient
intéressants comme base de départ. J’ai donc pû les utiliser comme source d’inspiration
pour réaliser les maquettes lors de leur mise en forme et pour leur contenu graphique et
l'esthétique. J’ai aussi réalisé un veille “concurrentielle” afin de comprendre comment les
sites de designer s'organisent en général.
L’équipe projet m’a aussi mis à disposition différents logo, polices et couleurs à
utiliser pour le design du site, tout cela afin de correspondre au mieux à l’image qu’ils
souhaitent véhiculer pour ce label.

7
Enjeux pour l’entreprise.

La création du site internet a pour principal enjeu de faire connaître le label à un

nouveau public, plus large, tant au niveau régional que national.
Comme je l’ai dit brièvement plus haut, à l’heure actuelle le seul moyen de découvrir
les services proposés par ce nouveau concept est le bouche à oreille. Même si ce genre de
réseau (personnel, professionnel) a fait ses preuves, il reste dans le cas présent trop limité
et n’est pas suffisant pour que l’entreprise puisse se développer et constituer une nouvelle
clientèle.
Il est également envisagé que le site puisse permettre par la suite de regrouper en
un seul et même endroit tous les projets réalisés par le label ainsi que tous les membres
associés. Toutes les informations seront disponibles sur une page galerie qui fera office de
portfolio.

Mission secondaire : La conception de la base de données

Présentation :

L’objectif est de concevoir une base de données qui va regrouper toutes les
informations essentielles au label comme la liste de ses membres, la liste de ses projets et
tous leurs attributs (nom, photo, date, descriptif, …).
En plus d’être utilisée comme moyen de stockage, la base de données sera aussi
utilisée dans la cadre du site internet pour afficher les données de manière dynamique.

Cette base de données se doit d’être la plus claire et compréhensible possible car en
plus d'être utilisée au quotidien, il faut garder à l’esprit qu’elle sera susceptible d’être à
l’avenir modifiée par l’ajout de nouveaux membres ou au contraire la suppression de
membres actuels par les personnes de l’équipe de Designer farmer. Actuellement, ils sont
tous novices en informatique et c’est pourquoi il faut être prudent dans la création de cette
base de données, la simplifier au maximum et s’assurer qu’ils pourront l’utiliser sans
difficulté.

Pour la partie conception de la base de données, j’ai travaillé en binôme avec mon
maître de stage.
Au contraire pour la partie programmation, j’ai été en totale autonomie car aucun des
membres ne s’y connaissait en SQL et en PHP.
Pour le codage, j’ai donc utilisé SQL, le modèle conceptuel des données (MCD) et
PHP.

8
Contexte professionnel.

Au début de cette période en entreprise, la société ne disposait pas de base de

données et toutes leurs informations étaient ainsi stockées sous format papier ce qui n’est
pas très pratique lors de déplacement ou sous forme numérique (fichier excel).
C’est après notre toute première réunion, que j’ai proposé de passer à un stockage
informatique qui serait donc moins contraignant, plus souple, accessible depuis n’importe
quel ordinateur en créant une base de données.
Le premier travail que j’ai mis en œuvre pour cette partie a été d’analyser les
données actuelles. Mon maître de stage a mis à ma disposition quelques exemples
d’informations archivées sur les projets, ainsi que sur les membres.
J’ai pu ainsi me rendre compte de ce qui était important pour lui, et cela m’a permis
d’imaginer au moins comment concevoir cette base de données.

Enjeux pour l’entreprise.

La création de la base de données a pour premier enjeu de faciliter le stockage des

informations de l'entreprise mais aussi de faciliter leurs modifications ou suppression.
Cette base de données permettra aussi de choisir ce que l’on affichera sur le site
internet mis en place dans la précédente mission de manière dynamique.
La base a aussi comme but de pouvoir stocker tous les formulaires de contact et leur
information de manière à leur proposer un devis.

Problèmes / contraintes / limites

Comme l’entreprise XDO est une petite structure ne disposant pas de service
informatique, et personne qui ne possédait de bonnes connaissances en programmation. Il
m'a fallu créer une documentation pour permettre à toute l’équipe de pouvoir s’approprier le
site et la base de données. Cette documentation explique comment utiliser l’outil, mais
également comment apporter des modifications sans avoir recours à de l’aide.

Pour répondre à cette contrainte et répondre aux différentes missions évoquées

précédemment, j’ai ajouté par exemple de nombreux commentaires pour expliciter le code et
j’ai aussi utilisé des noms de variables et des classes assez significatives pour pouvoir se
repérer sans trop de problèmes.

9
 Le travail en autonomie a aussi été une contrainte pour moi au début du stage
puisque personne dans l’entreprise ne pouvait m’apporter d’aide technique en
programmation. Mais au final, j‘ai su transformer cette difficulté en atout. J’ai ainsi pu
apprendre et découvrir de nouveaux savoir-faire en programmation par le biais de différents
sites et forums (voir la sous-partie formation).

Enfin j’ai aussi rencontré différents problèmes au niveau programmation lors de la

réalisation des missions.
A titre d’exemples : comment sécuriser les données et éviter les injections sur le site
qui permettrait d’accéder à nos données.
J’expliquerai plus en détail ces problématiques et leurs solutions dans la quatrième partie.

Problèmes de la mission du site web.

L'une des rares contraintes techniques de cette mission a été l’adaptation à de

nouveaux logiciels, en effet, lorsque nous avons réalisé les maquettes du site, tous les
membres de l’équipe avec qui j’ai travaillé utilisaient la suite adobe (photoshop, illustrator) et
j’ai donc dû me servir du même logiciel.

J’ai aussi rencontré quelques difficultés sur certaines fonctionnalités du site internet
comme la mise en place du slider ou d’un bandeau déroulant. Mais j'ai vite trouvé des
solutions pour ces différentes problématiques.

10
II. Démarche suivie pour effectuer les
missions

Processus suivi - méthode

Pour réaliser les différentes missions, la méthode que nous avons choisie au long de
cette période a été de décentraliser au maximum les données pour que toutes les
personnes puissent ainsi travailler en commun sur un même document et aussi que tout le
monde puisse avoir une idée globale de l’avancement.
Par exemple, pour la création des maquettes nous avons utilisé un fichier illustrator
commun où nous avons pu combiner nos idées.

Lors du développement du site, j’ai aussi régulièrement déposé mes fichiers sur
Github (voir lien en bibliographie) pour qu’ils soient accessibles à tous, et surtout pour
garder une version fonctionnelle qui pourra nous servir de backup si jamais une modification
endommagerait le site.

Il y a aussi eu une phase de relecture importante.Celle-ci a consisté à simplifier le

code en donnant des noms et identifiants qui permettent de se retrouver facilement. Cette
relecture a aussi consisté à ajouter de nombreux commentaires pour que le code du site soit
compréhensible par n’importe quel employé :

Nous avons aussi utilisé un “trello” qui nous a permis de mettre à jour régulièrement
l’avancement des tâches de chacun, d’avoir une idée de l’avancement et de connaître les
tâches restantes à tout moment. Dans l’exemple ci-dessous, nous avions rajouté un code
couleur pour savoir à qui correspondait chaque tâche (orange pour Emmanuel, violet pour
Margot et bleu pour moi).

11
Voici ci-dessous un schéma qui résume assez le mode de fonctionnement d’une semaine
type, que nous avons mis en place dès le début et maintenu tout au long de la période de
stage :

Organisation des missions

Organisation

12
 Tous les lundis, l’ensemble de l’équipe se retrouvait sur site, à Lyon, pour faire une
réunion de planification des tâches à faire dans la semaine à venir.
Cette réunion était aussi le moment pour que chacun puisse expliquer ce qu’il allait faire aux
autres, de quelle manière il allait procéder. C’était aussi l’occasion pour que chacun ait une
vision globale du projet et également de revoir certains points qui pouvaient encore être à
définir.

Les journées suivantes étaient en totalité consacrées à la mise en œuvre de nos

différentes tâches en groupe ou de manière individuelle. Les horaires étaient de 8h30 à
12h30 et de 13h30 à 16h30 tous les jours. Le plus souvent en visio-conférence et
quelquefois en présentiel.

Les jeudi ou vendredi, nous nous retrouvions aussi à Lyon, cette fois-ci pour
présenter les avancées de la semaine aux autres.
Ce moment était aussi très important car après avoir mis nos travaux en commun et
avoir eu l’avis des autres on pouvait se rendre compte des difficultés et de ce qui n’allait pas.
C’est à ce moment-là que nous brainstormions pour identifier les modifications et corrections
à apporter pour répondre aux objectifs visés.

En général la répartition du temps de travail était de deux tiers de travail sur nos
missions et un tiers du temps en réunion pour synthétiser, planifier ou bien tout simplement
réfléchir en groupe sur comment réaliser et améliorer les différentes tâches.

Ainsi, pour la réalisation du site, je travaillais sur la partie programmation de mon

côté le mardi, mercredi et vendredi. Le lundi nous réalisions avec l’ensemble de l’équipe les
maquettes que j’avais à programmer les jours suivants et le jeudi je présentais à l’équipe le
site pour avoir des retours sur les points à améliorer.

Pour la réalisation de la base de données, nous avons réalisé l’ensemble de la

mission en binôme avec mon maître de stage pour différentes raisons. Tout d’abord ce
dernier souhaitait pouvoir comprendre au maximum son fonctionnement pour pouvoir
l'utiliser et la modifier lui-même quand je ne serai plus en stage. Mais aussi il était
indispensable qu’il choisisse quelles informations seront stockées dans la base de données.
C’est lui aussi qui a en grande partie fait le tri parmi les informations stockées sur papier
pour savoir lesquelles il fallait reprendre dans la base.

13
Formation

Au début du stage j’ai aussi eu une petite formation de mon maître de stage sur les
bases du logiciel adobe illustrator pour que je puisse maîtriser les outils de base du logiciel.
Cela m’a permis de pouvoir réaliser les maquettes des différentes pages avec le reste de
l’équipe et non pas de rester simplement spectateur.

En termes de documentation, je ne me suis pas servi de celle de l’entreprise car elle

ne répondait pas à mes problématiques en termes de programmation. En effet, cette
dernière concernait principalement des informations et des conseils sur le design /
graphisme.
J’ai donc surtout utilisé des documentations en ligne et des forums tels que
Stackoverflow et developerMozilla, w3school. (Liens en bibliographie)

Nous nous sommes aussi prêté main forte avec d’autres camarades sur les
problèmes que nous avons rencontrés pendant nos missions.
Enfin j’ai aussi contacté certains intervenants que nous avons eu au cours de l’année
afin d’obtenir quelques renseignements.

14
III. Réalisation des missions

Les outils
Dans cette partie, je vais vous présenter les logiciels et outils que j’ai choisis pour
réaliser mes missions. Dans un second temps, je présenterai un comparatif avec les
concurrents et autres alternatives non retenues, et je justifierai la raison de mes choix.

Pour les maquettes :

Pour concevoir les maquettes, j’ai utilisé le logiciel Adobe

Illustrator; il nous a permis de tester différentes polices et
différents modes de disposition pour le site internet.

Les avantages de ce logiciel est qu’il est très complet

et permet énormément de modifications. Néanmoins, ce dernier
est payant et peut-être difficile à prendre en main.

Les alternatives à Illustrator sont nombreuses, avec par exemple

Canvas, Figma, Drawio. J’avais au début prévu d’utiliser Figma (comme j’en ai l’habitude)
mais mon maître de stage m’a demandé d’utiliser le même logiciel que l’équipe pour
travailler en groupe plus facilement.

Pour concevoir la base de données :

Pour réaliser le Modèle Conceptuel des

Données, j’ai utilisé le logiciel Looping. C’est un
logiciel que nous avions déjà utilisé en cours.
Un des avantages de ce logiciel est tout
d'abord qu’il est gratuit d’utilisation et aussi très
facile à prendre en main. Un autre point très
pratique du logiciel est qu’il propose de convertir le MCD en un script SQL qu’il nous suffit
ensuite d’importer pour créer notre base de données.

J’aurai aussi pû utiliser Jmerise ou bien draw.io mais ces derniers ne sont gratuits qu'
en accès limité et je n’ai quasiment aucune expérience sur ces logiciels car je ne les ai que
très peu utilisés auparavant.

15
Pour programmer :

Pour développer le site web, j’ai utilisé en grande majorité

Visual Studio Code. Les avantages de cet éditeur de texte sont
tout d’abord son grand nombre d’extensions et de fonctionnalités
permettant par exemple de déboguer son code, de mettre en
évidence les différentes syntaxes et aussi de compléter le code
intelligemment.

L’IDE facilite aussi beaucoup l’utilisation de Github

avec différentes extensions qui permettent ainsi de sauvegarder les fichiers sur un dépôt Git
en quelques clics. J’ai en plus été accepté pour participer à la phase de test du Copilote
Github et donc pouvoir l’utiliser gratuitement au cours du stage.

Les alternatives à VScode sont principalement Sublime Text et Notepad++.

Néanmoins, Notepad++ propose beaucoup moins de fonctionnalités et d’extensions que
Vscode. Pour ce qui est de Sublime Text, l’IDE est quant à lui très complet, au même titre
que Visual Studio Code mais j’ai préféré ne pas l’utiliser pour rester sur un logiciel que je
maîtrise.

Pour le serveur local :

Pour pouvoir tester le site en direct et surtout pour pouvoir

interagir avec la base de données, j’ai utilisé Xampp et plus
précisément les modules Apache et MySQL. L’intérêt du logiciel est de
simuler un hébergement du site web de manière locale pour pouvoir
tester le site avant de le mettre en ligne. Il permet aussi de mettre en
place des bases de données avec Phpmyadmin ce qui a été très utile
pour remplir la base de données après l’avoir conçue sur Looping.

Dans un premier temps j’avais pensé à utiliser un outil “web app” tel Vite Js pour
tester le site internet. Néanmoins, je n’en ai pas trouvé qui proposait l’utilisation de base de
données.
J’ai donc décidé de me tourner vers Xampp qui est le seul logiciel mettant en place
un serveur local sur lequel j’ai déjà travaillé (hors webpack).

Pour l’hébergement :

Pour mettre notre site et notre base de données

en ligne, nous avons choisi d'utiliser l'hébergeur Hostinger.
Les principales raisons qui nous ont fait pencher pour cet
hébergement sont : son rapport fonctionnalité-prix, en effet

16
c’est l’un des hébergeur avec les tarifs les plus avantageux tout en proposant de nombreux
avantages (certificat SSL, …).
Il propose aussi un accès à phpmyadmin ce qui facilitera la modification des
informations de la base de données par les membres de l’équipe.

Il existe aussi beaucoup d'alternative à cette offre (OVH, Infomaniak,...) et je

détaillerai notre choix plus précisément dans la partie de la mise en place de l’hébergement
maus

Les grandes étapes

Cette partie du rapport est subdivisée de deux sous-ensembles principaux

correspondant aux 2 missions et de plusieurs sous parties qui correspondront à chacune
des étapes clé afin de retranscrire au mieux le déroulement du stage, ainsi que la résolution
des problèmes rencontrés.

Le site internet :

Pour la mission du site internet les sous parties seront :

- la réalisation des maquettes
- la conception du site statique et le responsive
- l’ajout des fonctionnalités dynamiques et la sécurisation
- l'hébergement du site
- la documentation

La réalisation des maquettes.

La première étape que nous avons réalisée pour concevoir le site à été de faire des
ébauches des différentes pages du site grâce à Adobe Illustrator.

17
 Nous avons cherché à retranscrire le plus fidèlement possible l’image du label, tout
en gardant un style assez moderne et clair pour les visiteurs.
Avant d’arriver à la maquette finale, ci-dessus, nous avons réalisé de nombreuses itérations.
Cette tâche a été réalisée en un peu moins d’une semaine et est très fidèle au rendu final du
site. Il nous est quand même arrivé de les reprendre à de nombreuses reprises pour
peaufiner tel ou tel aspect avant de les développer.

La conception du site statique et responsive.

Le but de cette tâche est de reproduire les maquettes en les codant en HTML, CSS
et Javascript. Pour cette tâche, j’ai uniquement utilisé VisualStudio Code.
Cette tâche s'est déroulée sans accroc sauf lors de la mise en place d’un bandeau
déroulant en haut de la page (car je n’en avais jamais fait) et pour certaines parties du
responsive et fonctionnalités permises par les différents appareils (téléphone, tablette,
ordinateurs, écran tactils ou non).

Pour le bandeau, j’ai vu qu’il existait une balise permettant justement d’en réaliser, la
balise <marquee>. Néanmoins, cette balise est souvent signalée comme non-standard et
obsolète ce qui pourrait faire qu’elle ne soit pas reconnue par tous les navigateurs.
J’ai finalement trouvé comme solution l’utilisation des animations CSS.

Voici le CSS de la section du bandeau :

Dans le CSS, j’ai donc créé une animation que j’ai

nommée “marquee”, d’une durée de 10 secondes
qui sera appliquée à tous les éléments de la
classe “bandeau”, à l’infini : “animation: marquee
10s linear infinite;”

Ensuite le @keyframes m’a permis de définir les

différentes étapes de cette animation :

Elle commence à la position d’origine de l'élément

( soit 0, 0, 0) et elle va le décaler de 50% vers le
gauche. Puis il va retourner à sa position de
départ et ainsi de suite.

18
 Pour la conception du site pour format téléphone, il a fallu revoir l'agencement de la
majorité des sections présentes sur pc, de manière à faciliter la navigation sur ce type
d’appareil.

→ →

Par exemple, la rubrique actualité de gauche que l’on fait défiler verticalement sur pc
passera en haut de l’écran sur mobile et pourra défiler seulement de façon horizontale.

Pour cela, j’ai créé une section dans le CSS qui

sera appliquée seulement si la largeur de l’écran est
inférieure à 700px.
Grâce à “flex-direction: row;”, les informations qui
se trouvent dans la balise “#actu” seront désormais
disposées en ligne et non en colonne comme sur pc.

La commande “flex-direction: row-reverse;” dans

la partie article sert à inverser l’ordre d’affichage des
éléments car sur pc la description et le titre viennent
avant l’image alors que sur mobile, c’est l’image qui est
affichée en premier.

19
 Les médias query m’ont aussi servi à différencier les écrans qui permettent de
survoler une zone ou non et ainsi pouvoir mettre en place des fonctionnalités adéquates à
chaque type d’appareil.

Par exemple, la page galerie est

composée de plusieurs sliders qui
représentent chacun un projet. Sur les
écrans où le survole est possible, lorsqu'on
les survole l’image, une description du
projet s’affiche ( à droite) alors que sur les
écrans qui ne permettent pas le survole la
description est affichée par défaut (en
dessous)

Les fonctionnalités dynamiques et la sécurisation.

Cette étape consiste à mettre en place l'utilisation des informations de la base de

données sur notre site web.
Concrètement, le site va utiliser la base de données de deux manières :
- La première va être dans le formulaire de contact. Une fois qu’un utilisateur a rempli
et envoyé le formulaire, ces informations vont être transmises et stockées dans la
base de données. Ici on va écrire sur la base.
- La deuxième est d'appeler les informations de la base pour les afficher sur notre site
en fonction de critères précis. Par exemple, sur la page d’accueil on pourra mettre en
avant tous les projets créer en 2021 alors que sur la page galerie tous les projets de
la base seront affichés. Ici on lit la base de données.

Avant de programmer tout cela, j’ai commencé par relier la base de données avec le
site internet (voir page 28 et la partie sur la base de données)

20
Pour le formulaire, j’ai commencé par créer un formulaire classique en HTML, tout en
précisant la méthode du formulaire ici “POST” ainsi que vers quel fichier il va renvoyer ici
“form.php”.

J’ai aussi ajouté quelques conditions pour limiter le risque d'injection SQL au sein
des champs du formulaire. Par exemple en déclarant la longueur maximale du contenu des
labels et aussi en indiquant les seuls caractères autorisés.
Dans le label du nom, les seuls caractères autorisés sont les 26 lettres de l’alphabet
en majuscules et minuscules ainsi que le “-”.

Ensuite, j’ai commencé la partie php avec le fichier form.php qui reçoit justement les
données du formulaire.
Ce fichier à trois rôles :

- Vérifier que les données sont correctes (pour empêcher toutes tentatives de
piratage).
- Ajouter les données à la base si ces dernières sont évaluées comme “correctes”.
- Renvoyer l’utilisateur sur une page d’erreur ou de confirmation en fonction de la
validité des données.

Pour cela, je récupère les données du

formulaire en les associant à une variable et je
vais ensuite les traiter pour empêcher toutes
attaques :
- trim() va supprimer les espaces
inutiles.
- stripslashes() va supprimer les
antislashes (souvent utilisés par les
pirates).
- htmlspecialchars() va quant à lui
supprimer les caractères spéciaux
(comme par exemple les “<, >” qui sont utilisés lors des injections javascript).

21
 Ensuite, on vérifie que les
informations ne sont pas
vides et respectent bien les
conditions que nous avons
fixées en html plus haut
(taille et caractères
autorisés).
Car ces attributs peuvent
être mis en pause par l’utilisateur depuis leur
moteur de recherche.

Une fois toutes ces vérifications faites, nous pouvons désormais nous connecter à la
base et y ajouter les données.

On insère ainsi les données à la table formulaire de notre base en utilisant une
requête préparée pour encore une fois limiter le risque d’attaque. La dernière ligne a pour
rôle de renvoyer l’utilisateur à la page de remerciement une fois les données ajoutées.
Mais dans le cas où les données ne correspondent pas aux critères attendus, on
renvoie l’utilisateur vers une page d’erreur pour qu’il puisse re-remplir le formulaire à
nouveau.

Une fois cette étape réalisée, je suis passé à la deuxième fonctionnalité dynamique,
l’affichage des informations de la base.
Cette fonctionnalité sera utilisée sur les pages accueil, galerie et membres.
Pour afficher les données de la base de manière dynamique en appelant la base de
données, il faut tout d’abord se connecter à la base puis lui envoyer une requête SQL pour
récupérer les informations voulues.
Pour la connexion à la base, j’ai utilisé la même méthode de connexion que pour le
formulaire.
Puis j’ai créé un fichier qui contient toutes les requêtes SQL que nous serons
amenés à utiliser sur les différentes pages du site internet.

22
 Par exemple, la requête ci-dessous va nous servir à récupérer les informations des
membres (telles que leur nom, prénom, photo, …) à partir des tables “membre” et
“domaine”. Ensuite avec le WHERE, on va associer entre elles les données des différentes
tables, c’est-à-dire que l’on va associer les informations de la table “domaine” aux
informations de la table “membre” auxquelles elles correspondent.

On va ensuite exécuter ces requêtes de manières préparées par le biais du PDO,

puis rentrer toutes les données récupérées dans un tableau que nous allons ensuite utiliser
pour afficher les informations sur le site.

Enfin, nous pouvons utiliser les informations récupérées grâce à la requête qui suit
pour les afficher de manière dynamique :

Pour ce faire, j’ai écrit le code suivant sur la page “membres”.

On va utiliser un foreach de manière à répéter cette portion de code pour chaque

élément du tableau récupéré par la fonction ‘membre’. Puis, on va associer l’élément actuel
à une clé ( ici $m) de manière à appeler cet élément plus facilement.

23
 On va ensuite écrire notre code comme en HTML classique sauf qu’au lieu d’inscrire
les informations de manière manuscrite, on appelle l'élément souhaité du foreach.

La ligne “<h4><?= $m['nom'] ." ". $m['prenom']?></h4>” va afficher au sein de la balise h4 le

nom de l’élément actuel du foreach, suivi d’un espace puis enfin son prénom.

L’hébergement.

L’étape finale pour la mise en œuvre de notre site internet est de l’héberger sur le
web. Pour cela, je connaissais déjà différents hébergeurs gratuits que j’avais utilisés pour
mon portfolio (Netlify, Vercel).
Néanmoins, je n’ai pas trouvé d’hébergement gratuit proposant aussi d’utiliser une base de
données sur le serveur.

Je me suis donc tourné vers des hébergements plus standards et connus comme
OVH, Ionos, O2switch, etc… qui proposent d’ajouter des bases de données à notre site.

Mais avant cela, nous avons commencé par acheter le nom de domaine
“designerfarmer.fr” et ce dès le début du stage pour éviter que quelqu’un ne l’achète avant
nous pour nous le revendre plus cher.

Pour trouver l’hébergement le plus adapté, j’ai étudié de nombreux comparatifs, puis
j’ai proposé une sélection de 4 abonnements à mon maître de stage, pour qu’il décide de
celui qu’il préfère en fonction des tarifs et de ses attentes.
La seule contrainte que j’avais en plus de trouver un tarif correct était de ne pas
opter pour OVH car mon maître de stage avait déjà testé leur service et n’avait pas été
satisfait de leur service.

Il a ainsi choisi Hostinger parmi Infomaniak, Hostinger, PlanetHoster et O2Switch.

Mais avant de passer à la partie technique de l'hébergement, nous avons réfléchi au

référencement du site par le biais du SEO (référencement naturel et donc gratuit).
Pour cela nous avons réutilisé au maximum des mots clé et leur synonyme sur le site
de manière à ce que ce dernier soit référencé au mieux sur ces termes.
On a aussi utilisé des balises meta pour définir les informations du site, avec par
exemple la meta description qui sera affichée sur les moteurs de recherche (voir exemple
ci-dessous) ou encore mettre en place des balises alt sur nos images qui sont très
importantes en SEO.

24
Une fois avoir acheté une offre d'hébergement, le site m’a proposé de commencer la
configuration basique de notre site internet, en
renseignant par exemple le nom de domaine, le
type de site, ou encore la localisation.

Après cela, il nous a fallu relier notre nom de domaine à l’hébergement, pour cela nous
avons dû modifier les serveurs DNS du nom de domaine pour qu’il redirige automatiquement
vers ceux correspondant à l’hébergement et affiche ainsi les informations souhaitées.

Après cela, j’ai importé le dossier de mon site internet local sur l’hébergement tout en
modifiant les informations de connexion à la base de données.
Après cette étape, le site est désormais accessible sur internet comme n’importe quel autre,
mais il est toujours possible de lui apporter des modifications.

La dernière étape que j’ai réalisée à été de configurer le certificat SSL pour que le site
fonctionne désormais avec le protocole HTTPS et non simplement HTTP.

La documentation.

La toute dernière tâche que j’ai effectuée durant ce stage a été la réalisation d’une
documentation de quelques pages pour permettre aux membres de l’équipe de comprendre
le fonctionnement du site et de la base de données et de savoir comment les modifier.

Dans cette documentation, j’ai donc expliqué :

- les rôles des différents fichiers que comporte le site
- comment accéder au code que l’on veut modifier
- la structure de la base de données
- comment ajouter de nouvelles informations à la base
- comment se repérer sur l’hébergement.

25
La base de données :

Pour la mission de la base de données les sous parties seront :

- la réalisation du modèle conceptuel des données et la mise en place de la
BDD
- la connexion entre le site et la base de données
- l'hébergement de la base de données

Le modèle conceptuel des données et la mise en place.

Pour mettre en place la base de données, nous avons commencé par réaliser un
modèle conceptuel de données sur Looping. Le but de cette étape était de simuler la base
de données pour la concevoir de manière à ce qu’elle réponde le plus fidèlement possible
aux attentes de l’entreprise.

Ensuite, le logiciel nous a permis de convertir ce modèle en un script SQL que nous
avons importé sur PHPMyAdmin pour mettre en place la base de données.

26
 Après l’avoir importée, on retrouve bien notre base de données sur notre serveur
local Xampp. L’étape suivante a simplement été de remplir la base avec les informations
préalablement triées.

Relier le site et la base de données.

Après avoir complété la base, nous devons la relier au site internet pour que celui-ci
puisse afficher les informations contenues de manière dynamique. C’est à dire que si l’on
ajoute une information dans la base ou au contraire que l’on en supprime une, cela se
répercute directement sur le site sans avoir besoin de modifier une partie du code.

Pour réaliser cette étape, la contrainte principale a été de bien sécuriser la connexion
pour éviter qu’un utilisateur puisse récupérer les informations de connexion à la base et ainsi
pouvoir la modifier voir même la supprimer.
Néanmoins, je n’avais quasiment aucune connaissance en sécurisation et en
protection de données.
C’est pour cela que je me suis rapproché de Bruno Bonnefoy qui nous avait déjà fait
des cours de cybersécurité et de base de données ; pour qu’il me donne quelques conseils
ou tutoriel pour réaliser cette tâche.

Pour se connecter à la base, j’ai utilisé le langage PHP et plus particulièrement la

fonction PDO. Cette fonction a plusieurs avantages et supporte notamment les requêtes
préparées, ce qui nous protégera en partie des injections SQL.
Mais avant de passer à la programmation, j’ai commencé par créer un utilisateur qui
aura comme seule permission de lire la base de données et non de la modifier.

27
 Comme ça, on utilisera cet utilisateur lors de la connexion et ainsi si jamais un pirate
accède aux informations de connexion, cela ne lui permettra pas pour autant de modifier la
base.

Les trois premières lignes vont servir à renseigner les informations de connexion à la
base de données de l’utilisateur que nous venons de créer (nom de la base / adresse IP,
nom d’utilisateur et mot de passe).

On va ensuite se connecter avec ces variables, puis définir le mode d’erreur et

empêcher l’émulation des instructions préparées pour que le script utilise bien ces requêtes
de manière préparée et non en les émulant ; de manière à éviter les injections SQL.

Dans le cas où la connexion n'aboutit pas, le script va récupérer le rapport d’erreur et

afficher un message d'erreur pour en informer l’utilisateur.

Enfin, la dernière ligne sert à fermer la connexion pour ne pas qu’elle reste active en
permanence.

28
L’hébergement de la base.

Comme dit précédemment, je n’ai jamais eu l’occasion de mettre en ligne une base
de données auparavant. C’était donc une première pour moi mais cela c’est déroulé plus
facilement que ce à quoi je m’attendais.

J’ai tout d’abord dû créer une nouvelle base de données et un utilisateur qui lui est associé,
puis une fois cela fait, je peux accéder à un onglet phpmyadmin qui est relié à mon site
internet (par le biais de l’hébergement) dans lequel je peux importer la base de données que
j’avais déjà préremplie sur mon ordinateur :

Après ces quelques étapes réalisées, je peux désormais accéder à la base de données
depuis mon site internet en utilisant les informations de connexions que je viens de créer.

Néanmoins après avoir publié le site, je me suis rendu compte qu’il était beaucoup trop lourd
pour l’offre que l’on a prise et j’ai donc compressé et converti en jpeg toutes les photos (le
format jpeg est moins lourd que le png) que nous utilisons sur le site pour qu’elles prennent
moins de place.

29
IV. Évaluation des réalisations et des
compétences mobilisées

Adéquation du travail

Mon maître de stage a été très satisfait par notre collaboration et par le rendu de ce
site vitrine.
L’intérêt pour lui est de gagner en visibilité et de pouvoir se faire connaître auprès de
nouveaux prospects plutôt que par le bouche à oreille.
La création de site est une réelle opportunité qui devrait à terme, nous l’espérons lui ouvrir
plus de marchés.

La création de la base de données n’était pas forcément prévue initialement mais

elle s’est finalement avérée nécessaire pour une utilisation optimale des fonctionnalités
développées sur ce site et surtout pour capitaliser les données clients et prospects.
Par ailleurs, grâce à cette base, toutes les informations concernant les personnes
travaillant pour ce label sont également référencées.
Pour le moment, le nombre de personnes est limité étant donné que le label vient
juste de se créer, mais il devrait s’enrichir très rapidement dans les prochains mois.
La base de données va ainsi pouvoir être consolidée et complétée au fur et à mesure des
projets commercialisés.

La création de la documentation pour aiguiller les membres de l’entreprise est un vrai

plus pour eux. Ils pourront faire eux même des modifications sur le site par exemple
changer leur logo ou des éléments visuels (couleur, police…), les informations de la page “à
propos”. Ils auront aussi la possibilité de modifier les informations affichées par le biais de la
base (par exemple, modifier le profil d’un membre, ajouter ou bien supprimer un projet). Tout
cela sans avoir recours à mon aide ou un support extérieur.

Au terme de ce stage, nous avons déjà réfléchi à de possibles améliorations. Ainsi,

pour enrichir mon site, nous avons formulé différentes propositions qui pourraient apporter
un plus :

- La première serait de compléter la base de données de manière à ce qu’elle puisse

contenir d’autres informations relatives à l’entreprise comme les bénéfices, les
dépenses, etc…
On pourrait ainsi mettre en place de nouvelles requêtes SQL plus développées et qui
permettraient d’accéder à des statistiques plus complexes comme le chiffre d’affaires

30
 annuel de l’entreprise; ou bien les domaines de compétences les moins représentés
par les membres…

- Une autre amélioration possible serait de rendre le site encore plus vivant et
attrayant en ajoutant par exemple des animations et des effets avec le langage
Javascript.

Compétences mises en oeuvre

Pour mener à bien les différentes missions, j’ai mobilisé de nombreuses compétences :
- La conception de maquettes pour réaliser des ébauches du site.
- La programmation HTML , CSS et JavaScript pour concevoir le site internet.
- La programmation PHP pour utiliser la base de données sur le site.
- Le modèle MCD et la programmation SQL pour concevoir la base de données.

Durant ce stage, j’ai aussi appris et développé mes propres compétences.

En php, par exemple, je n’avais aucune idée de comment sécuriser les formulaires pour
empêcher les injections au début de ce stage.
C’est par le biais de tutoriels et de divers contacts que j’ai pu lever cette lacune.
Cette nouvelle compétence me sera très utile à l’avenir car la majorité des sites internet
utilisent un formulaire de contact pour avoir un premier échange avec le client et je serais
donc très certainement amené à en refaire de nouveau.
Pour l’entreprise, la sécurisation du formulaire a aussi une importance capitale car sans elle,
il serait assez facile d’accéder aux données privées de la société.

J’ai aussi appris à mettre en ligne un site internet et sa base de données, ce qui me
sera également très utile car c’est une étape cruciale et indispensable pour chaque
application web.

Pour mettre en place les propositions d’amélioration émises ci-dessus, il va falloir

que je développe de nouvelles compétences comme :

- Javascript car même si à l’heure actuelle j’ai des bases et que je connais les
rudiments de ce langage (car j’ai utilisé des bibliothèques javascript pour réaliser
mon portfolio) je ne pense pas maîtriser complètement ce langage afin de mettre en
oeuvre toutes les animations pour rendre le site vivant en terme d’ergonomie.

- Pour ce qui est d’améliorer la base de données et mettre en place des requêtes plus
poussées comme un calcul du chiffre d'affaires, je ne pense qu’il soit nécessaire que
j’améliore mes compétences en SQL. Mais seulement d’avoir un peu plus de temps
pour les mettre en œuvre.

31
 Pour travailler comme un Concepteur-Intégrateur Devops je pense que je dois
encore travailler sur plusieurs thèmes :

- Tout d’abord la partie Administration et système réseau car je n’ai pas eu l’occasion
d’en faire durant ce stage. Même si je ne compte pas m’orienter vers ce domaine, je
pense qu’il est important d’avoir des connaissances réseaux.

- D’autre part, concernant la partie programmation et développement objet, j’ai eu

durant ces derniers mois, l’occasion de réaliser une application web pour une
entreprise de chimie et d’industrie.
Cette application web consistait à simuler une ou des réactions chimiques entre
différents réactifs sélectionnés par les chimistes et déterminer précisément les
produits formés, les réactifs consommés en tout ou partie ainsi que leurs quantités
de chaque composant après la réaction.
Pour ce faire, j’ai utilisé Python et le framework Flask.
Le rendu du programme est tout à fait satisfaisant pour le demandeur, je vais leur
présenter le résultat et nous envisagerons ensemble, qu’est ce qui pourra être
optimiser. (https://github.com/ThomasDeschampt/flask-reaction-website)
Toutefois, je vais encore me perfectionner dans ce domaine puisque je souhaite
m’orienter à l’avenir vers de la programmation Back-end.

- Enfin la dernière partie, que je dois développer est le Marketing client et la stratégie
relation client car durant ce stage je n’ai été en relation qu’avec un seul client
principal, mon maître de stage, mais je n’ai pas été en contact avec des clients
externes.

32
Conclusion

Analyse des conditions de travail

Ce stage a été une réelle opportunité pour moi car il m’a permis de pouvoir prendre
part à un projet en conditions réelles, avec de nombreuses responsabilités au sein d’une
entreprise.

Néanmoins, de mon point de vue, je n’ai pas trouvé que les conditions de travail
étaient optimales ; en effet j’aurai préféré que le stage se déroule en majeure partie sur site
et moins en distanciel.
Le travail en distanciel a des limites et il a été parfois plus compliqué de s’organiser, de caler
des temps d’échanges et de communiquer en visio-conférence que si nous avions été dans
un même bureau durant l’intégralité du stage.

Le fait de faire ce stage en majorité en télétravail a quand même eu plusieurs

avantages :
- J’ai pû gérer l’organisation de mon travail et du planning. Il est clair que pour
travailler de la sorte il faut être autonome; mais les confinements de 2020 m’ont
permis de me familiariser avec ce mode de travail.
- Ne pas être toujours à proximité de son maître de stage permet de rechercher plus
de solutions par soi-même, de faire plus de propositions…
- Les horaires de 8h30 à 16h30 étaient parfaits puisque je n’avais pas besoin de
prendre les transports en communs tous les jours et donc de faire de long trajets.

Il m’a aussi été très facile de m'intégrer à l’équipe étant donné que je les connaissais
déjà avant le stage; cela a été un vrai plus.

Apport des missions pour le stagiaire.

Ce stage m’a apporté de nombreuses compétences aussi bien en informatique qu’en

soft-skills.
En termes de programmation, j’ai pu confirmer mon projet professionnel. Je souhaite,
à l’avenir, me spécialiser en développement en non en réseau.
Ce stage m’a aussi permis d’approfondir mes compétences dans différents langages
tels que : HTML, CSS, SQL, JavaScript et PHP.
J’ai aussi acquis de nouveaux savoirs comme l'hébergement d’un site web et de sa
base de données sur internet, mais aussi comment le sécuriser lors de sa mise en œuvre.
En termes de savoir-faire personnel, lors de ce stage, j’ai appris à travailler en
autonomie tout en ayant des responsabilités à remplir.

33
 Au cours de ces deux mois de stage, j’ai pu me rendre compte que le monde du
travail était assez différent du monde des études.
J’avais déjà eu un premier aperçu en travaillant lors d’un job d’été l’année dernière
en production industrielle.
Mais aujourd’hui j’ai pris conscience de nouvelles contraintes auxquelles on peut être
confronté. Par exemple, à plusieurs reprises j'aurais voulu avancer à mon rythme, mais je
devais attendre que mon maître de stage soit disponible lui aussi pour valider ensemble
certains choix.
Etant donné qu’il est professeur aux beaux arts, et qu’il a de ce fait deux casquettes, il n'était
pas toujours disponible pour répondre à mes questions.

Prochain stage ?

Pour mon futur stage, l’année prochaine, j’aimerais beaucoup le réaliser dans une
entreprise spécialisée en informatique pour découvrir le fonctionnement et les métiers dans
ce type de société.

Je pense recontacter les sociétés que j’avais approchées cette année. J’espère avoir
plus de retours positifs, grâce aux compétences que j’aurais apprises durant cette première
expérience et celles que j’apprendrai l’année prochaine en cours.

J’aimerais aussi pouvoir réaliser ce stage dans un domaine différent de celui de la

conception d’un site web, comme par exemple, avec la programmation Back-end qui m’attire
plus que le Front-end.

Enfin, j'aimerais intégrer une plus grosse structure, constituée de plusieurs services
et avoir plus de contacts avec les collaborateurs pour travailler en équipe et résoudre
ensemble les difficultés.

34
Bibliographie et webographie
Site des designer farmer :
designerfarmer.fr

Stack Overflow (forum sur la programmation) :

Stack Overflow

Sites expliquant l’utilisation de différents langages de programmation :

MDN Web Docs (mozilla.org)
W3Schools Online Web Tutorials

Github :
ThomasDeschampt (Thomas Deschampt) (github.com)

Mon portfolio (en construction) :

Thomas DESCHAMPT - Portfolio (thomas-deschampt.fr)

Annexes

Tutoriel pour modifier le site designer farmer

Evaluation fin de stage du tuteur

35