1 sur 35

Sommaire

Remerciements 3
I. Introduction 4
II. Résumé du projet 5
III. Cahier des charges 6
a) Analyse des besoins 6
b) Public visé 6
c) Conception graphique 7
d) Spécifications fonctionnelles 8
IV. Liste des compétences du référentiel qui sont couvertes par le
projet 11
Front-end 11
CP1 : Maquetter une application 11
CP2 : Réaliser une interface utilisateur web statique et adaptable 12
CP3 : Développer une interface utilisateur web dynamique 14
Back-end 15
CP5 : Créer une base de données 15
CP6 : Développer les composants d’accès aux données 16
CP7 : Développer la partie back-end d’un site web et web mobile 18
V. Spécification technique 20
a) Front-end 20
b) Back-end 21
c) Sécurité du site 22
VI. Réalisation 25
VII. Jeu d’essai 29
VIII. Recherche anglophone 30
IX. Conclusion 30

2 sur 35
 Remerciements

La réalisation de ce projet a été possible grâce aux plusieurs personnes à qui je

voudrais leur remercier. Je voudrais tout d’abord adresser toute ma reconnaissance à toute
l’équipe de PoleS, pour leur travail et leur encadrement. Je tiens à remercier en particulier a
AHMADZAI NIAMATULLAH, mon encadrent technique, pour les bases qu’il m’a transmises
tout au long de ma formation. Je tiens à remercier a Eric Privat, mon chargé
d'accompagnement socio-professionnel pour son accompagnement au quotidien, qui a été

essentiel au maintien de ma motivation pendant toute la durée de la formation.

J’en profite pour remercier tous ceux qui m’ont soutenu, rassuré et motivé aux
moments où j’avais peur d’avancer.

3 sur 35
 I. Introduction

Du 9 Mais 2022 au 9 mai 2023, j’ai suivi la formation du développeuse Web au sein
de l’association PôleS située Poissy qui a pour objectif l’obtention du “Titre professionnel
Développeur web et web mobile”. Au cours de cette formation j’ai appris plusieurs langages
des codages et j’ai pu m’intéresser au développement d’un site Web en codant ou en
passant par le CMS Wordpress. Plus largement, cette formation a été l’opportunité pour moi
d’appréhender des techniques de développement, de graphisme, de gestion de projet, et de
communication. Au-delà d’enrichir mes connaissances en développement, cette formation
m’a permis d'accroître mon sens du travail en équipe ainsi que les techniques de
communication écrites et orales. Il me semble essentiel de savoir communiquer avec les
équipes pour un bon fonctionnement. De plus, cela m’a appris de développer mon
autonomie. De fait ma capacité à la prise de décision, c’est également accrue.

Cette formation m’a permis de rentrer dans l’univers du Web et d’apprendre la création de
sites web et aussi de confirmer ma passion pour ce domaine.

4 sur 35
 II. Résumé du projet

Dans la cadre de ma formation au sein du PoleS , pour le passage de Titre

Professionnel de Développeuse Web et Web Mobile, j’ai conçu un site E-commerce intitulée
« Le Boutique de Teddy ».

Le Boutique de Teddy est un site de vente en ligne de jeux et jouets qui s’adressent à
tout public.

Le site est réalisé en deux parties.

Première partie :

Front-end : langages utilisés : HTML/CSS, JavaScript, et des bibliothèques Bootstrap

et JQuery. Il s’agit des éléments du site que l’on voit sur écran et avec lesquels on interagir
et que l’on appelle l’interface utilisateur. J’ai rendu le site web responsive, donc accessible
et adaptable à tous les appareils : tablettes, smartphones, etc.

Le principe de responsive design s’effectue grâce à des feuilles de style en cascade

(CSS) BOOTSTRAP et des techniques de programmation (HTML). Le but du responsive et de
s’adapter aux différentes technologies en place.

Deuxième partie :

· Back-end : langages utilisés : PHP et Symfony.

Le terme "back-end" fait référence au côté serveur d'une application Web. Il
comprend le serveur, l'application et la base de données, et est responsable de la
gestion de la logique, du stockage et de la récupération des données, ainsi que
d'autres fonctionnalités qui ne sont pas visibles pour l'utilisateur. Il fonctionne en
coordination avec le "front end", qui est le côté client de l'application Web et
comprend l'interface utilisateur et l'expérience utilisateur.

5 sur 35
 III. Cahier des charges

a) Analyse des besoins

Côté utilisateur

Accueil - Chaque utilisateur d’un site doit être accueilli avant tout.

Boutique - Il faudra ensuite que l’utilisateur puisse consulter l’ensemble des produits, avec
détails comme prix, nom, photos.

Page du produit - Si l’utilisateur est intéressé par un produit, il peut accéder à l’ensemble
des photographies du produit, ainsi qu’à sa description.

Contact – Ici l’utilisateur peut contacter le responsable, mais cette fois dans le cas où il
aurait des questions sur un produit.

Panier - l’utilisateur peut ajouter le produit qu’il consulte à son panier. Si le produit n’est
pas, l’utilisateur pourra en ajouter plusieurs à son panier.

Commande - L’utilisateur pourra ensuite passer sa commande en validant son panier, et

effectuer le paiement. Pour cela, il devra être authentifié et après l’authentification il peut
passer la commande.

Authentification - L’utilisateur, s’il détient déjà un compte sur le site, peut s’authentifier. Il
peut se connecter à tout moment.

Inscription - Si l’utilisateur ne possède pas de compte, il faudra qu’il s’en créer un.

Côté administrateur (CRUD)- EasyAdmin

Le backoffice regroupe un ensemble de tâches administratives, ce dernier doit
également permettre une gestion quotidienne des activités e-commerce (suivi des
commandes, mise à jour des catalogues produits) sans avoir besoin de l’intervention de
l’agence. Parmi les tâches de gestion backoffice nous pouvons citer : -L’ajout des produits -
La modification des produits -La suppression des produits -La gestion du stock

6 sur 35
 b) Public visé

La publique visé pour un site de jeux et de jouets est généralement les enfants et les
familles. Cependant, il peut également y avoir des sites qui ciblent des groupes d'âge plus
âgés ou des passionnés de jeux de société ou de collection. Il est important de définir
clairement la cible publique pour une entreprise de jeux et de jouets afin de pouvoir cibler
efficacement les campagnes de marketing et de communication.

c) Conception graphique

Logo :

Un logo est un symbole graphique utilisé pour représenter une entreprise, une
organisation ou une marque. Il est souvent utilisé comme point de mémorisation visuel pour
les consommateurs et peut être utilisé sur des produits, des emballages, des publicités, des
sites web, etc. Les logos doivent être conçus de manière à être facilement reconnaissables,
mémorables et pertinents pour l'entreprise ou la marque qu'ils représentent. Il est
important de créer un logo qui se distingue de ceux des concurrents et qui est adapté à
l'image de marque de l'entreprise.

1.Logo

7 sur 35
Couleurs :

Les couleurs d'un site web peuvent avoir un impact significatif sur l'expérience
utilisateur et l'image de marque de l'entreprise. Les couleurs peuvent être utilisées pour
transmettre des émotions, des sentiments et des messages spécifiques. Il est important de
choisir des couleurs qui soient en accord avec l'image de marque et les objectifs de
l'entreprise.

#ffff #0c0c9d #05276 #000

b

2.Palette de couleurs

8 sur 35
 d) Spécifications fonctionnelles

Les spécifications fonctionnelles d'un site e-commerce dépendent de vos besoins

spécifiques, mais généralement, elles incluent :
1. Inscription et connexion des utilisateurs
2. Gestion du panier d'achat
3. Système de paiement en ligne sécurisé
4. Catalogue de produits avec des images, des descriptions et des options de filtrage
5. Système de gestion de commandes et de suivi de livraison
6. Système de gestion des stocks
7. Système de gestion des utilisateurs et des commandes pour les administrateurs
8. Intégration avec les systèmes de suivi des commandes et les services logistiques

9 sur 35
 IV. Liste des compétences du référentiel qui sont couvertes par
le projet

Voici la liste des compétences que j’ai mises en œuvre pendant de mon projet :

• Concevoir et développer des composants d’interface utilisateur en intégrant les

recommandations de sécurité
→ Maquetter une application
→ Développer une interface utilisateur de type desktop
→ Développer des composants d’accès aux données
→ Développer la partie front-end d’une interface utilisateur web
→ Développer la partie back-end d’une interface utilisateur web

• Concevoir et développer la persistance des données en intégrant les

recommandations de sécurité
→ Concevoir une base de données
→ Mettre en place une base de données
→ Développer des composants dans le langage d’une base de données

• Concevoir et développer une application multicouche répartie en intégrant les

recommandations de sécurité
→ Collaborer à la gestion d’un projet informatique et à l’organisation de
l’environnement de développement
→ Concevoir une application
→ Développer des composants métier
→ Construire une application organisée en couches
→ Développer une application mobile
→ Préparer et exécuter les plans de tests d’une application
→ Préparer et exécuter le déploiement d’une application
→ Maquetter une application.

Front-end

10 sur 35
 Le front-end désigne la partie visible d'une application web ou d'un site internet,
c'est-à-dire ce que voit l'utilisateur lorsqu'il accède à une page. Il s'agit de la partie de
développement qui concerne la mise en forme, la mise en page et l'interaction avec
l'utilisateur, et qui utilise des technologies comme HTML, CSS et JavaScript.

CP1 : Maquetter une application

Une maquette de site web est un document visuel qui présente l'apparence
et l'organisation d'un site internet avant sa mise en ligne. Elle permet de visualiser
comment les différentes pages du site seront organisées, comment les éléments
graphiques seront disposés et comment les utilisateurs pourront naviguer. Les
maquettes peuvent être créées à l'aide de différents outils de design mais moi je
choisi Figma. Elle est généralement utilisée pour la phase de conception d'un site
web pour valider les choix graphiques et ergonomiques avant le développement.

Maquette page d’accueil :

3.Maquette page “d’Accueil”

11 sur 35
 Cette page contient la barre de navigation dans laquelle en retrouve le logo, le menu
(page accueil, boutique, a propos et contact) et les pages d’inscription et connexion aussi
que le panier.

Maquette page boutique :

4.Maquette page “Boutique”

La page boutique permet d’afficher les produits que Je désire à vendre en ligne. Sur
cette page, je peux personnaliser l'affichage des produits en les liant à des catégories et en
ajoutant un filtre de recherche.

12 sur 35
Maquette page A propos :

5.Maquette page “A propos”

La page a propos fait référence à des informations sur la création d’entreprise et du site
web. Cette page comprend des informations liées aux types des produits vendu et le public
visé.

Maquette page contact :

6.Maquette page “Contact”

13 sur 35
La page contact contient un formulaire de contact, une carte indiquant l'emplacement de
l'entreprise et des icônes de réseaux sociaux pour augmenter la présence sociale auprès des
clients, j’encourage plus de personnes à me suivre.

14 sur 35
 IV. Liste des compétences du référentiel qui sont couvertes par
le projet

Voici la liste des compétences que j’ai mises en œuvre pendant de mon projet :

Concevoir et développer des composants d’interface utilisateur en intégrant les

recommandations de sécurité
→ Maquetter une application
→ Développer une interface utilisateur de type desktop
→ Développer des composants d’accès aux données
→ Développer la partie front-end d’une interface utilisateur web
→ Développer la partie back-end d’une interface utilisateur web

15 sur 35
 CP2 : Réaliser une interface utilisateur web statique et adaptable
Une interface utilisateur web statique est une interface qui ne change pas en
fonction des actions de l'utilisateur ou des données de l'application. Elle est générée à
l'avance et n'est pas modifiée en temps réel.

Une interface utilisateur web adaptable, également appelée "responsive design", est
conçue pour s'adapter aux différentes tailles d'écran et orientations des dispositifs de
visualisation. Elle utilise des règles de mise en page et de style flexibles pour s'adapter
automatiquement aux différentes tailles d'écran et orientations. Cela permet aux
utilisateurs d'accéder à une expérience utilisateur optimale quel que soit le dispositif qu'ils
utilisent.

7.Site responsive sur IPad

16 sur 35
CP3 : Développer une interface utilisateur web dynamique
Comme vous le savez déjà je codée mon site avec PHP/Symfony. Symfony est un
framework de développement web pour PHP qui peut être utilisé pour créer des sites web
dynamiques. Il fournit un ensemble de composants et d'outils qui permettent aux
développeurs de créer des interfaces utilisateur riches et interactives en utilisant des
technologies telles que HTML, CSS, JavaScript et PHP.

Symfony inclut des outils pour gérer les routes, les contrôleurs, les modèles et les vues, qui
sont tous importants pour créer une interface web dynamique. Il prend en charge les
composants tels que Twig pour les modèles, Doctrine pour la gestion de la base de données,
et Form pour créer des formulaires.

Symfony est également connu pour sa flexibilité et sa facilité de personnalisation qui permet
de créer des sites web dynamiques à la fois simples et complexes.

Pour mon site je vais détailler le dynamisme de mon site par rapport à la page panier.

Imaginons qu'un utilisateur, non enregistre veuille acheter un produit. Il choisit son produit,
il clique sur le buton “Ajouter au panier ”et ici, il va être redirectionnée vers la page du
panier.

8.Page “Panier”

Une fois sur cette page, l’utilisateur va pouvoir augmenter ou diminuer la quantité du
produit. Le prix total ça va être afficher en fonction du prix du produit multipliée par la

17 sur 35
quantité choisis. Apres qu’il a choisis ses produits, il va cliquer sur le buton “Valider mon
panier” d’où il va être rediriger vers la page de connexion.

9.Page “Connexion”

S'il détient un compte il se connecte sinon il a la possibilité de s’inscrire via le lien “Créez un
compte ici”. Sans être authentifiée il ne va pas pouvoir valider son panier et passer ensuite
au payement.

En revanche s’il se connecte, il sera redirigé vers la page de commande ou il choisit l’adresse
de livraison et aussi le type de livraison souhaitée.

18 sur 35
 10.Page “Validation de commande”

Une fois le choix effectué, il clique sur le buton “Passer au paiement” qui affiche la page
récapitulative de la commande ou il peut bien vérifier les informations transmises et si tout
est en règle il clique sur le buton “Payer”.

11.Page “Racapitulatif de commande”

Cette action ouvre la page de la plateforme de payement Strippe, que je intégrer dans mon
code pour la partie paiement. Cette plateforme propose plusieurs choix des payements par
carte bancaire ( visa,mastercard, etc ), GooglePay, checkout link etc.

12.Page “Payement”

19 sur 35
Si le paiement est réussi, l’utilisateur il y aura un text qui lui informe de la réussite de
paiement et aussi il va recevoir un email avec de remerciement pour sa commande.

20 sur 35
 Back-end

CP5 : Créer une base de données

Pour ce site je décider d’utiliser l’outil de gestion de base de données PhpMyAdmin ou je

créer ma base de données “site1” via l’URL d’accès avec une collation “utf8mb4_general_ci”
pour une large gamme de caractères.

Dans cette base de données je créer plusieurs tables, correspondent aux entités prévues
avec le type en fonction de notre besoin de stockage.

PhpMyAdmin est une application web open-source utilisée pour gérer les bases de
données MySQL. Il permet aux utilisateurs de créer, modifier et supprimer des bases de
données, des tables et des enregistrements à l'aide d'une interface graphique conviviale,
plutôt que d'utiliser des commandes MySQL. Il permet également de gérer les utilisateurs et
les privilèges, d'exécuter des requêtes SQL, de sauvegarder et de restaurer des bases de
données, et plus encore. phpMyAdmin est souvent utilisé par les développeurs web et les
administrateurs de bases de données pour gérer les bases de données MySQL sur des
serveurs web.

13.Base de données

21 sur 35
Pour créer et mettre à jour ma base de données je utiliser le composant “Doctrine” qui est
capable de créer et mettre à jour une base de données à partir des informations tirées du
mapping des entités.

La première étape va être de configurer Doctrine ORM dans l'application Symfony. Pour
cela, il faudra compléter le fichier .env :

14.Fichier .env

Il faudra seulement définir le DATABASE_URL qui peut être de la forme suivante et qui
dépend de la configuration et du type de base de données utilisé :

15.L’URL de liaison avec la base de données

22 sur 35
 CP7 : Développer la partie back-end d’un site web et web mobile

La partie back-end d'un site web ou d'une application mobile gère les données et les
fonctionnalités qui se trouvent derrière la scène. Il s'agit de la logique de l'application qui est
exécutée sur le serveur, contrairement à la partie front-end qui est visible par l'utilisateur.

 Intégration du tableau de bord de l’administrateur :

L'intégration d'un tableau de bord d'administrateur dans mon site web consiste à créer une
interface utilisateur qui permet à un utilisateur ayant les droits d'administrateur
[“ROLE_ADMIN”] de visualiser et de gérer les données du site. Il est utilisé aussi pour gérer
les utilisateurs, les données du site, les paramètres et les statistiques.

a) Création Dashboard

Pour mettre le tableau de bord en place j’exécute la commande suivante pour générer
rapidement un contrôleur de tableau de bord.

16.commande pour la création du “Dashboard”

Chaque tableau de bord utilise une seule route Symfony pour servir toutes ses URL. Les
informations nécessaires sont transmises à l'aide de paramètres de chaîne de requête.
Comme j’ai généré le tableau de bord avec la commande “make:admin:dashboard”, la route
est définie à l'aide des annotations de route Symfony. La seule exigence est de définir la

23 sur 35
route dans une méthode de contrôleur nommée index(), qui est celle appelée par
EasyAdmin pour afficher le tableau de bord :

17.AdminController

b) Configuration du tableau de bord

La configuration du tableau de bord est définie dans la configureDashboard()méthode (le
menu principal et le menu utilisateur sont configurés dans leurs propres méthodes :

18. DashboardController personnalisée

24 sur 35
c) Menu principal
Le menu principal est lié à différents contrôleurs CRUD à partir du tableau de bord. C'est le
seul moyen d'associer des tableaux de bord et des ressources. Pour des raisons de sécurité,
un backend ne peut accéder aux ressources associées au tableau de bord que via le menu
principal.

19. Menu DashboardController personnalisée

25 sur 35
  Intégration d’un formulaire d’inscription :

La création d'un formulaire d'inscription est assez simple - cela signifie simplement créer un
formulaire qui mettra à jour un Userobjet modèle (une entité Doctrine dans cet exemple) puis
l'enregistrera.

Tout d'abord, je m’assure que toutes les dépendances dont j’ai besoin sont installées :

20. Commande pour les dépendances

a) Créer et gestionnée un formulaire pour l’entité

Pour créer cela j’utilisée la commande suivante :

21. RegisterController gestionnée

26 sur 35
Ensuite, je crée le modèle du formulaire :

22. Twig Formulaire d’inscription

 Authentification avec le SecurityBundle de Symfony

Ici je présente comment faire une authentification en utilisant le SecurityBundle de
Symfony. Il permet la connexion et la navigation de manière sécurisée.

Tout d’abord j’installe SecurityBundle en utilisant la commande:

a) Création de l’entité utilisateur

La création de l’entité est possible via la commande :

Je peux maintenant générer des formulaires spécialement prévus pour de l’authentification

avec la commande :

27 sur 35
Le “SecurityController” :

23. SecurityController

28 sur 35
c) Sécurité du site

Tout au long de ce projet, j’ai essayé de mettre en œuvre les bonnes pratiques de
sécurité, et d’effectuer une veille sur les éventuelles vulnérabilités de sécurité de mon
projet. Voici une liste des principaux points que j’ai mis en place grâce à cette veille :

→ en premier lieu, on peut bien sûr citer la mise en place d’un système
d’authentification avec rôles (notamment pour différentier l’administrateur des autres
utilisateurs)

→ il est important de s'assurer que le mot de passe est sécurisé, cela inclue des règles
comme l'utilisation de caractères spéciaux, de majuscules et de chiffres, et une longueur
minimale. Il est également important de ne pas stocker les mots de passe en clair dans la
base de données, mais plutôt de les hasher pour protéger les données en cas d'accès non
autorisé.

→ le moteur de templates utilisé ,Twig, met en place de la sécurité en échappant

toutes les variables affichées (utile notamment contre les attaques de type XSS)

→ l’utilisation de requêtes préparées pour les interactions avec la base de données :

elle est automatique avec Doctrine ; cela permet entre autres d’éviter les attaques de type
injection SQL

→ la validation de tous les éléments de formulaire côté serveur, grâce à la librairie

Symfony\Component\Validator\Constraints

→ l’utilisation de l’extension déduite par Symfony plutôt que l’extension définie par
l’utilisateur, lors de l’upload d’images (pour repérer immédiatement des images qui
cacheraient un fichier exécutable par exemple)

→ la mise en place de SSL sur le site de production et la contrainte d’utiliser le

protocole HTTPS.

29 sur 35
Symfony, offre plusieurs fonctionnalités de sécurité pour protéger les utilisateurs :

1. Authentification : Symfony gère les sessions utilisateur pour maintenir l'état de

connexion.
2. Formulaires sécurisés : Symfony gère les formulaires sécurisés en utilisant des
composants tels que le composant "form".
3. Autorisation : Symfony utilise un système de rôles et de droits pour contrôler l'accès
aux pages et aux fonctionnalités du site web. Il gère aussi les utilisateurs et les rôles
d'accès pour limiter les actions qui peuvent être effectuées sur le site.

24. Fonctionnalités accessible pour Admin

24. Fonctionnalités accessible pour USer

4. Validation : Symfony utilise des validateurs pour vérifier la validité des données
utilisateurs envoyés au serveur. Il gère aussi les erreurs de validation et de les
afficher de manière appropriée pour l'utilisateur.

30 sur 35
 VII. Jeu d’essai

Avec Symfony, la validation de formulaire est gérée par le composant de validation intégré.
Ce composant permet de définir des règles de validation pour les champs d'un formulaire,
telles que les types de données attendus, les longueurs minimales et maximales, les
expressions régulières, etc. Ces règles de validation sont appliquées aux données soumises
par l'utilisateur avant de les traiter, ce qui permet de détecter et de rejeter les données
malveillantes.

Je défini des contraintes de validation personnalisées pour valider des données spécifiques
au site. Cela permet de vérifier la validité des données soumises par l'utilisateur de manière
plus fine, par exemple en vérifiant que le nom d'utilisateur est unique, ou que l'adresse e-
mail est valide.

La validation de formulaire ne garantit pas à elle seule la sécurité du site, donc je combiner
cela avec d'autres mesures de sécurité telles que l'échappement des données avant de les
insérer dans une requête SQL.

La gestion des utilisateurs, des rôles et des autorisations est gérée par le composant
Security. Ce composant permet de gérer l'authentification et l'autorisation des utilisateurs
de l'application.

· L'authentification est le processus de vérification de l'identité d'un utilisateur.

· L'autorisation est le processus de vérification des droits d'accès d'un utilisateur.

Les rôles sont une méthode courante pour gérer les autorisations dans Symfony. Les rôles
sont des étiquettes qui dénoncent les autorisations d'un utilisateur, par exemple
"ROLE_ADMIN" pour un utilisateur administrateur, "ROLE_USER" pour un utilisateur
standard. Les utilisateurs peuvent avoir plusieurs rôles, et les rôles peuvent être hiérarchisés
pour définir des autorisations plus fines.

Ici je vous présente un jeu d’essai avec le formulaire d’inscription :

31 sur 35
Ici en peut constater trois alertes :

1. Les premières deux erreurs indiquent que le chaîne de caractères soumis dans les
champs Prénom et Nom ne respecte pas la longueur minimale définie pour ce
champ. Ces erreurs sont dû à une règle de validation définie pour ces champs dans
une contrainte de validation personnalisée.
2. Lorsqu'un utilisateur tente de s'inscrire en utilisant un e-mail qui a déjà été
enregistré dans la base de données, le site affiche un message d'erreur indiquant
que l'e-mail est déjà pris. Cela signifie que l'adresse e-mail en question est déjà
associée à un compte existant et ne peut pas être utilisée pour créer un nouveau
compte.
3. Lorsque les utilisateurs créent un compte ou modifient leur mot de passe, il est
courant que les sites web demandent de saisir le mot de passe deux fois pour vérifier
qu'il a été saisi correctement. Cela permet de s'assurer que l'utilisateur a saisi le mot
de passe qu'il souhaitait utiliser, sans erreur de frappe ou de saisie.

32 sur 35
Les mots de passe doivent être identiques pour être valides, cela permet de s'assurer
qu'il n'y a pas eu d'erreur de saisie. Si les deux mots de passe saisis sont
différents, site afficher un message d'erreur indiquant qu'ils doivent être identiques.

33 sur 35
VIII. Recherche anglophone

34 sur 35
35 sur 35