Titre professionnel developpeur web et

mobile

Réalisé par : Danciu Delia

1 sur 39
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 39
 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 39
 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 39
 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 39
 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 39
 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 39
Couleurs :

En effet, les couleurs peuvent éveiller des émotions chez les utilisateurs et influencer
leur perception de la marque. Certaines couleurs peuvent évoquer la confiance, la sécurité,
la qualité, tandis que d'autres peuvent être perçues comme étant plus agressives,
imposantes, ou peu professionnelles. Il est donc important de bien réfléchir à la palette de
couleurs à utiliser sur un site web pour créer une image cohérente et transmettre les bons
messages. Les couleurs peuvent également être utilisées pour attirer l'attention sur des
éléments spécifiques du site, renforcer la navigation, et améliorer l'expérience utilisateur
globale.

#ffff #0c0c9d #05276 #000

b

2.Palette de couleurs

8 sur 39
 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 39
 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 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.

10 sur 39
 Front-end

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 un site web

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 39
 Sur cette page la barre de navigation est un élément important de la mise en page
d'un site web. Elle doit être claire, facile à utiliser et accessible depuis n'importe quelle page.
Les éléments qui se trouve dans la barre de navigation incluent le logo de l'entreprise, le
menu de navigation principal inclue les pages “d'accueil”, “boutique”, "À propos" et
"Contact", ainsi que des liens pour l'inscription et la connexion des utilisateurs, et un panier
d'achat.

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 39
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 et les réseaux sociaux. 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 39
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 39
 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 39
 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 39
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.

Ici 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 39
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.

10.Page “Validation de commande”

18 sur 39
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. Stripe est une plateforme de paiement en ligne qui permet
aux entreprises de recevoir des paiements par carte de crédit ou de débit en ligne de
manière sécurisée. L'intégration de Stripe dans le code du site web permet aux utilisateurs
d'effectuer des paiements en ligne en utilisant différents types de cartes bancaires et
d'autres méthodes de paiement telles que Google Pay.

19 sur 39
 12.Page “Payement”

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.

Pour mettre en place le sistem de paiement sur mon projet j’ai suivi les étapes suivantes :

1. Configurer Stripe : je commencée par configurer Stripe en ajoutant ma clé API Stripe
à mon site Symfony.
2. Créer un formulaire de paiement : je dois créer un formulaire pour permettre à
l'utilisateur de saisir les informations de paiement nécessaires.
3. Traiter la transaction Stripe : lorsque le formulaire est soumis, je dois utiliser l'API
Stripe pour traiter la transaction de paiement.
4. Envoyer un email de remerciement : si la transaction est réussie, je dois envoyer un
email à l'utilisateur en utilisant les fonctionnalités d'envoi d'email de Symfony.
5. Afficher un message de réussite : je dois afficher un message à l'utilisateur pour
l'informer de la réussite du paiement en utilisant les fonctionnalités de notification
de Symfony.
6. Enregistrer les informations de commande : enfin, je dois enregistrer les
informations de commande dans ma base de données pour permettre de gérer les
commandes ultérieurement.

20 sur 39
 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 39
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.

Doctrine est un composant ORM (Object Relational Mapping) intégré à Symfony qui permet
de gérer les interactions entre les objets PHP et les bases de données. Il offre des
fonctionnalités pour la création, la mise à jour et la requête de la base de données en
utilisant un modèle d'objet, ce qui facilite le développement et la maintenance de
l'application.

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 39
 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.

Le back-end d'un site Symfony se concentre sur la gestion des données et des logiques
métiers. Il s'occupe de recevoir les requêtes HTTP en provenance du front-end, de traiter les
données et de fournir une réponse sous forme de données structurées.

Les composants clés du back-end d'une application Symfony comprennent :

1. Les contrôleurs : sont un composant clé d'une application Symfony. Ils jouent le rôle
de pont entre la requête HTTP entrante d'un utilisateur et les données de la base de
données. Les contrôleurs sont responsables de gérer les entrées de l'utilisateur, de
valider les données et de fournir une réponse appropriée, telle qu'une vue HTML ou
une réponse JSON. Les contrôleurs peuvent également déléguer certaines tâches à
d'autres composants du site, tels que les modèles, les services et les vues.
2. Les modèles : désignent les objets qui représentent les données de mon site. Ils sont
utilisés pour récupérer et stocker des données en base de données et les fournir à
d'autres parties du site web, telles que les vues ou les contrôleurs. Les modèles
peuvent également définir des règles de validation pour les données et définir des
relations entre différents modèles.
3. Les services : sont des composants logiciels qui offrent une fonctionnalité spécifique
à d'autres composants d'un site web. Ils sont utilisés pour centraliser et partager des
fonctionnalités communes, telles que la gestion de la base de données, les requêtes
API ou les envois de courriels. Les services sont utilisés par d'autres composants du
site, comme les contrôleurs ou les modèles, pour exécuter des tâches spécifiques
sans avoir à les réécrire à chaque fois. Cela permet de maintenir un code plus propre
et plus facile à maintenir.
4. Les routes : sont des mappings entre des URL et les actions de contrôleur à effectuer

lorsqu'une URL est requise. Elles permettent d'identifier les pages à afficher ou les
actions à effectuer lorsque l'utilisateur navigue dans l'application. Les routes sont

23 sur 39
 définies dans un fichier de configuration et sont associées à des contrôleurs, des
modèles et des services pour fournir une expérience utilisateur complète et
cohérente.
5. La bases de données : est un système de stockage de données permettant de

stocker, organiser et rechercher des informations. Je l'utilisée pour stocker les

données de mon site web et peut je l'implémentée à l'aide du system MySQL. Les
informations sont stockées dans des tables et peuvent être liées entre elles à l'aide
de relations. Les bases de données sont gérées à l'aide de langages de requête tels
que SQL.

24 sur 39
  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
route dans une méthode de contrôleur nommée index(), qui est celle appelée par
EasyAdmin pour afficher le tableau de bord :

25 sur 39
 17.AdminController

b) Configuration du tableau de bord

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

18. DashboardController personnalisée

La configuration du tableau de bord en Symfony peut être réalisée en suivant les étapes
suivantes :

1. Créer un contrôleur de tableau de bord : Je crée un contrôleur pour gérer les

requêtes entrantes pour le tableau de bord en utilisant la commande console
Symfony.

26 sur 39
2. Configurer les routes : je configurée les routes pour faire correspondre une URL à un
contrôleur spécifique en utilisant le fichier de configuration de routing de
l'application.
3. Créer une vue pour le tableau de bord : je crée une vue pour afficher le contenu du
tableau de bord en utilisant les fonctionnalités de template de Symfony.
4. Configurer les widgets du tableau de bord : je vais pouvoir configurer les widgets du
tableau de bord pour afficher les informations souhaitées à partir de la base de
données.
5. Configurer les autorisations d'accès : je configurée les autorisations d'accès pour
contrôler qui peut accéder au tableau de bord et quelles ressources ils peuvent
consulter en utilisant la sécurité de Symfony.
6. Tester le tableau de bord : une fois la configuration terminée, je vais pouvoir tester
le tableau de bord en utilisant un navigateur web pour vérifier qu'il fonctionne
correctement et qu'il affiche les informations souhaitées.
7. Personnaliser le tableau de bord : enfin, je vais pouvoir personnaliser le tableau de
bord en modifiant la vue, en ajoutant de nouveaux widgets, en changeant la
disposition des widgets, etc.

27 sur 39
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

Le lien entre le menu principal et les différents contrôleurs CRUD dans un tableau de bord
en Symfony est généralement effectué en utilisant les routes. Les routes sont configurées
dans le fichier de configuration de routing du site et permettent de faire correspondre une
URL à un contrôleur spécifique. Lorsque l’admin clique sur un élément du menu principal, il
est redirigé vers la URL correspondante, qui est gérée par le contrôleur associé. Cela permet
de maintenir une structure claire et organisée pour les ressources du tableau de bord et
assure une sécurité accrue en limitant l'accès aux ressources uniquement via le menu
principal.

28 sur 39
  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

29 sur 39
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 :

30 sur 39
Le “SecurityController” :

23. SecurityController

31 sur 39
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). L'authentification est un processus important pour un site web ou une
application car il assure la sécurité des données et des informations sensibles. En
implémentant un système d'authentification avec des rôles, les utilisateurs peuvent être
authentifiés et leur niveau d'autorisation peut être défini pour les différentes actions. Cela
peut aider à gérer les différences d'accès pour les différents utilisateurs tels que les
administrateurs et les visiteurs.

→ 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é.

→ Twig est un moteur de template populaire pour Symfony qui inclut une sécurité
intégrée en échappant toutes les variables affichées, ce qui aide à prévenir les attaques de
type XSS (Cross-Site Scripting). De plus, Twig inclut également d'autres fonctionnalités de
sécurité telles que la restriction des fonctionnalités et la validation des entrées pour
minimiser les risques de sécurité.

→ en utilisant des requêtes préparées pour les interactions avec la base de données,
je pu améliorer la sécurité de mon site en évitant les attaques de type injection SQL. Les
requêtes préparées permettent d'échapper les entrées utilisateur et de les convertir en

32 sur 39
valeurs sûres avant de les envoyer à la base de données. Cela aide à minimiser les risques de
faille de sécurité dans mon site en s'assurant que les données transmises à la base de
données sont sûres.

→ l’utilisation d’une gestion des droits d’accès et des autorisations pour les
différentes pages et actions du site (par exemple, n’autoriser l’accès à la modification des
données qu’à l’administrateur). 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. Utiliser SSL (Secure Sockets Layer) sur le site de production permet de
crypter les communications entre le client et le serveur, ce qui garantit la confidentialité et
l'intégrité des données transmises. En contraintant l'utilisation de HTTPS, on s'assure que
toutes les données sensibles telles que les informations de paiement et les mots de passe
sont transmises de manière sécurisée.

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

1. Authentification : Symfony utilise la librairie Symfony\Component\HttpFoundation\

Session pour gérer les sessions utilisateur. Cela permet de stocker et de récupérer
des informations sur la session de l'utilisateur pour maintenir son état de connexion.
2. Formulaires sécurisés : Le composant "form" de Symfony est conçu pour gérer la

création, la validation et la soumission des formulaires de manière sécurisée. Il

fournit des fonctionnalités pour gérer les données d'entrée utilisateur, les types de
champ, la validation des données et les erreurs de formulaire. Il est important
d'utiliser correctement les fonctionnalités de sécurité incluses dans le composant
"form" pour garantir la sécurité de vos formulaires.
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 peut être utilisé pour définir des rôles
pour les utilisateurs, puis pour attribuer des autorisations à ces rôles pour contrôler

33 sur 39
 l'accès aux ressources du site. Cela permet de limiter les actions qui peuvent être
effectuées sur le site, telles que la modification de contenu, la suppression de
données, etc. Le système de rôles et de droits de Symfony est flexible et facile à
utiliser, il m'a permis de contrôler facilement l'accès aux ressources du 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.

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,

34 sur 39
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 :

35 sur 39
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.

36 sur 39
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.

37 sur 39
VIII. Recherche anglophone

38 sur 39
 IX. Conclusion

Après avoir créé cette site e-commerce avec Symfony, les conclusions que je tirée en finir
mon projet sont :

1. Apprentissage continu : développer un site e-commerce avec Symfony peut

permettre de continuer à apprendre et à se perfectionner avec ce framework.
2. Amélioration des compétences : la création d'un site e-commerce complet peut
vous permettre de développer et de mettre en œuvre de nouvelles compétences,
telles que la gestion de bases de données, la mise en œuvre de fonctionnalités de
sécurité, etc.
3. Connaissance approfondie du framework : en travaillant sur ce projet en utilisant
Symfony, j’ai pu découvrir des nouvelles fonctionnalités et comprendre mieux
comment utiliser ce framework pour construire des sites complexes.
4. Flexibilité : J’apprécié la flexibilité offerte par Symfony pour personnaliser le site e-
commerce selon mes besoins spécifiques.
5. Développement rapide : j’aimé l'utilisation de composants prêts à l'emploi de
Symfony pour accélérer le développement du mon site.
6. Mise en œuvre de la sécurité : j’apprécié la mise en œuvre des mesures de sécurité
pour protéger les données sensibles sur le site.
7. Expérience de travail avec le framework : je développé une meilleure
compréhension de Symfony en travaillant sur ce projet.
8. Satisfaction du projet terminé : je pu ressentir une grande satisfaction en ayant
terminé avec succès mon projet de site e-commerce.

En général, la création de ce site e-commerce ma offrir une expérience enrichissante et

valorisante, avec la possibilité de développer de nouvelles compétences et d'acquérir une
meilleure compréhension du framework.

39 sur 39