Titre professionnel

developpeur web et mobile

Réalisé par : Danciu Delia

2022 - 2023

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 responsive design utilise des feuilles de style en cascade (CSS) et des techniques
de programmation (HTML) pour s'adapter aux différents écrans (ordinateur, tablette,
smartphone) et aux différentes tailles d'écrans. Les frameworks tels que Bootstrap facilitent
la mise en place du responsive design en fournissant des classes CSS prédéfinies pour la
mise en page et la mise en forme. Le responsive design est important pour assurer une
expérience utilisateur optimale sur tous les appareils.

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 et il pourra modifier
la quantité de ses produits.

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

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

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

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

Côté administrateur
Le backoffice regroupe un ensemble de tâches administratives, il permettre aussi une
gestion quotidienne des activités e-commerce (suivi des commandes, mise à jour des
catalogues produits). 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

-Gérer les comptes d’utilisateurs

b) Public visé

6 sur 39
 La publique visé pour mon site de jeux et de jouets est généralement les enfants et
les familles.

c) Conception graphique
Logo :

A refaire

1.Logo

Couleurs :

Je choisie …......

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.

7 sur 39
#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 nos besoins, 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 un site
→ 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.

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

10 sur 39
 Pour faire la maquette de mon site internet j’ai choisi Figma. Il est généralement
utilisé 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”

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 :

11 sur 39
 4.Maquette page “Boutique”

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

Maquette page A propos :

12 sur 39
 5.Maquette page “A propos”

La page “ A propos “ fait référence à des informations sur la création d’entreprise, de mon
site web et les réseaux sociaux. Cette page comprend des informations concernant la
Boutique de Teddy qui est un magasin spécialisé dans la vente de jeux et de jouets pour les
personnes de tous âges. La sélection inclue des jeux de société, des puzzles, des figurines
d'action, des animaux en peluche, etc. Le magasin propose uniquement l'options de vente
en ligne et de livraison à domicile.

Maquette page contact :

13 sur 39
 6.Maquette page “Contact”

La page contact contient un formulaire de contact avec une carte indiquant l'emplacement
de l'entreprise et les icônes de mes réseaux sociaux.

14 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

15 sur 39
CP3 : Développer une interface utilisateur web dynamique
J’ai codé mon site avec PHP/Symfony. Symfony est un framework de développement
web qui est 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 enregistré veuille acheter un produit. Il choisit son produit,
il clique sur le buton “Ajouter au panier ”et ici, il va être redirectionné 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 va être afficher en fonction du prix du produit multipliée par la 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.

16 sur 39
 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é, il ne pourra pas valider son panier et passer ensuite au
payement.

En revanche s’il se connecte, il sera redirigé vers la page de commande ou il choisira

l’adresse de livraison et aussi le choix du transporteur souhaité.

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, il peut vérifier les informations transmises. Si tout est en
règle, il clique sur le buton “Payer”.

17 sur 39
 11.Page “Récapitulatif de commande”

Cette action ouvre la page de la plateforme de payement Stripe, que j’ai intégré 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.

12.Page “Payement”

Si le paiement est réussi, un pop-up apparaitra sur l’écran informent l’utilisateur de la

réussite du paiement. Il va recevoir un email de remerciements pour sa commande.

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

18 sur 39
1. Configurer Stripe : j’ai commencé 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.

19 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

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

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

21 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
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

22 sur 39
de relations. Les bases de données sont gérées à l'aide de langages de requête tels
que SQL.

23 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 :

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

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

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

27 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

28 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 :

Le “SecurityController” :

29 sur 39
23. SecurityController

30 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
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

31 sur 39
 → 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
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

32 sur 39
 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,
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.

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

26.Alertes dans formulaire d’inscription

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.

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

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.

35 sur 39
VIII. Recherche anglophone

36 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 est un

excellent moyen d'apprendre et de se perfectionner avec ce framework. Mon projets
e-commerce impliquent une grande variété de fonctionnalités, telles que la gestion
du panier d'achat, la gestion des paiements en ligne, l'intégration avec les systèmes
de paiement, la gestion des stocks et la gestion des commandes. En travaillant sur ce
projet de ce type, je pu découvrir de nouvelles fonctionnalités de Symfony et me
perfectionner dans l'utilisation de ce framework.

2. Amélioration des compétences : La création d'un site e-commerce peut être un

moyen de développer de nouvelles compétences techniques, telles que la gestion de
bases de données pour stocker les produits et les commandes, la mise en œuvre de
fonctionnalités de sécurité pour protéger les données des utilisateurs et des
paiements, la création de formulaires pour la saisie de données et la mise en place
de systèmes de paiement en ligne.

3. Connaissance approfondie du framework : En travaillant sur ce projet de site e-

commerce en utilisant Symfony, je eu l'occasion de découvrir de nouvelles
fonctionnalités et de comprendre de manière plus approfondie comment utiliser ce
framework pour construire des sites complexes. Cela m’a aidé à développer une
compréhension plus approfondie de Symfony et à me familiariser avec les différents
composants et fonctionnalités offerts par ce framework, ce qui peut être bénéfique
pour mes futurs projets.

37 sur 39
4. Flexibilité : Symfony est connu pour sa flexibilité. En utilisant ce framework, je eu la
possibilité de personnaliser le site e-commerce en fonction de mes besoins
spécifiques. Je pu utiliser les différents composants et fonctionnalités de Symfony
pour adapter le site à mes besoins et pour ajouter des fonctionnalités
supplémentaires. Cette flexibilité ma permid de créer un site e-commerce qui
répond parfaitement à mes besoins et aux besoins de mes futures client, ce qui peut
être bénéfique pour la réussite de mon projet.
5. Développement rapide : l'utilisation de composants prêts à l'emploi est l'un des
avantages de Symfony. Le framework inclut une grande variété de composants prêts
à l'emploi pour les tâches courantes telles que la gestion des formulaires, la gestion
des routes, la gestion de la sécurité, etc. Cela m'a permis d'accélérer le
développement du mon site e-commerce et de me concentrer sur l'ajout de
fonctionnalités spécifiques plutôt que sur la mise en place de fonctionnalités de
base. Cette approche m’a aidé à développer rapidement un site e-commerce
fonctionnel.
6. Mise en œuvre de la sécurité : la sécurité est très importante pour les sites e-
commerce. Symfony inclut de nombreuses mesures de sécurité pour protéger les
données sensibles telles que les informations de paiement et les informations
personnelles des utilisateurs. Cela inclue la mise en œuvre de protocoles de cryptage
pour les transactions en ligne, la vérification de la validité des données entrées par
les utilisateurs, la gestion des autorisations pour les utilisateurs, etc. En utilisant ces
mesures de sécurité, je peux être sûr que les données des utilisateurs sur mon site e-
commerce sont protégées et sécurisées, ce qui est important pour la confiance des
utilisateurs dans le site et pour la réussite du mon projet.

38 sur 39
 7. Expérience de travail avec le framework : en travaillant sur ce projet avec Symfony,
je pu développer une meilleure compréhension du framework et de ses différentes
fonctionnalités. En résolvant les défis liés au développement du site et en explorant
les différents composants de Symfony, je pu acquérir une connaissance approfondie
du framework et de sa façon de travailler. Cette expérience m’a aidé à devenir plus
compétente dans l'utilisation de Symfony et vais m’aider à développer des projets
futurs plus rapidement et avec plus de confiance.
8. Satisfaction du projet terminé : terminer ce projet avec succès ma apporte une
grande satisfaction personnelle. Cela est dû à la réalisation du travail acharné, à la
résolution des défis et à la mise en œuvre de nouvelles compétences. De plus, en
ayant un site fonctionnel en direct, je pu voir les résultats tangibles de mon travail et
je suis fière de ce que j’accompli.

En général, le développement de ce site e-commerce ma offert une expérience

enrichissante et valorisante. Cela m'a permis de développer de nouvelles compétences,
d'acquérir une meilleure compréhension du framework et d'acquérir une expérience
pratique dans la mise en œuvre de différentes fonctionnalités, telles que la gestion de bases
de données, la mise en œuvre de la sécurité et la personnalisation du site selon les besoins
spécifiques. De plus, terminer avec succès ce projet m’apporter une grande satisfaction
personnelle et va être une source de motivation pour explorer de nouveaux projets à
l'avenir.

39 sur 39