Projet de fin de formation

ALLAIS Solène
FORMATION DWWM - La Manu, Amiens
Année 2021
SOMMAIRE

Liste des compétences ……………………………………………………………………………….……………………….... p.2

Résumé du projet ……………………………………………………………………………………..……………………….….... p.3

Cahier des charges ……………………………………………………………………………………….……………..……….... p.4

Spécifications techniques du projet ……………..……………………………….…………………………………..... p.5

Réalisations du candidat ……………………….…………………………………………………………...……………….... p.8

Présentation du jeu d’essai …………...….……………………………………………….…….………………………….... p.12

Description de la veille ……………………………………………………………………….………..……………………….... p.14

Description d’une situation de travail ……………………………………………….……………….……………….... p.15

Extrait de site anglophone et traduction ……………………………..……………..…………….……………….... p.16

Conclusion ………..……………………………………..……………………………..……………..…………….……………….... p.18

Annexes …..………..……………………………………..……………………………..……………..…………….……………….... p._

1
Liste des compétences

Développer la partie front-end d’une application web ou web mobile en intégrant les
recommandations de sécurité :

- Maquetter une application

- Réaliser une interface utilisateur web statique et adaptable
- Développer une interface utilisateur web dynamique

Développer la partie back-end d’une application web ou web mobile en intégrant les
recommandations de sécurité :

- Créer une base de données

- Développer les composants d’accès aux données
- Développer la partie back-end d’une application web ou web mobile

2
Résumé de projet

Avant de pouvoir présenter mon projet, nous allons avoir besoin du contexte.
J’écoute de la kpop depuis 2010, c’est donc un sujet que j’affectionne tout
particulièrement. La kpop (pop coréenne) est devenue une catégorie musicale à part
entière. Au fil des années, j’ai vu ce genre se démocratiser et grandir au-delà des
frontières coréennes. Dans cette communauté grandissante, il y a tout type de fan.
Pour ce projet, je vais me concentrer sur les collectionneurs. Plus particulièrement
les collectionneurs de photocards.

Les photocards sont de simples cartes (comme les cartes de collection

Pokémon par exemple) qui se trouvent à l’intérieur des albums.
Admettons qu’un soliste fasse un comeback et que son album sorte en 3
versions différentes. Dans ces 3 versions il y aura 3 photocards. Nous nous trouvons
donc avec 9 photocards à collectionner pour un soliste. Pour vous donner un ordre
d’idée, il y a un groupe qui comporte 23 membres (NCT). Pour les personnes faisant
la collection, garder cette dernière à jour et ordonnée peut devenir un véritable
casse-tête.

Je veux donc créer un site “bibliothèque” sur lequel, en se faisant un compte,

on peut suivre notre collection de photocards, ajouter ou retirer les groupes et les
membres collectionnés. Grâce au site, on pourra ajouter ou retirer ses wishlists
(pratique pour les photocards, les wishlists montrent ce qu’on veut, la priorité, si on a
déjà, celles qui sont en attente, etc).

L’utilisateur arrive donc sur une page de connexion. En se connectant, il arrive

sur son profil duquel il pourra accéder à ses collections et wishlists. N’ayant pas pour
but de créer un réseau social, je ne souhaite pas créer de timeline ni même d’ajouter
l’option de suivre un utilisateur.
Mon projet à donc pour but de créer un site qui faciliterait l’organisation de
beaucoup d’utilisateurs.

3
Cahier des charges

Liste des pages et leurs fonctionnalités associées :

- Page d’accueil : s’inscrire, se connecter ou accéder au formulaire “mot

de passe oublié”.

- Profil : accéder à son profil utilisateur, changer de photo de profil.

- Page photocards : la liste des groupes et des membres collectionnés,

ainsi que le plus important : les photocards concernées par la
collection.

- Page de sélection des photocards : liste des groupes et des membres

associés afin de pouvoir afficher la totalité des photocards du membre
en question.

- Page wishlist : page sur laquelle l'utilisateur pourra charger ses propres
wishlists (et les supprimer), afin d’être plus organisé dans sa collection.
Cette rubrique est facultative pour l’utilisateur, tout le monde n’utilise
pas de wishlists.

Au niveau du visuel de mon site, je voulais quelque chose d’arrondis et des

couleurs pastels, dans les tons violets et bleus pour donner un aspect doux au site,
avec du noir et blanc pour un côté plus minimaliste. Je ne voulais pas que le visuel
empiète sur celui des photocards, qui est l’objet central de mon site.

4
Spécifications techniques

Afin de me maintenir organisée dans les tâches à faire, je me suis aidée de

Trello et de Mindmeister pour réaliser le mind mapping de mes différentes idées, ainsi
que d’un cahier dans lequel j’ai noté différentes idées lorsque je n’avais pas mon
ordinateur à proximité. J’ai aussi utilisé les notes de mon ipad afin de pouvoir
envoyer mes notes sur mon ordinateur et de les ajouter sur Trello. Ce dernier évolue
sans cesse tout au long du projet. Le mind mapping était très utile dans les
premières étapes du projet.

5
 Pour ce qui est du code, j’ai utilisé le logiciel Visual Studio Code qui m’a
accompagnée tout le long du projet. J’ai utilisé du HTML, CSS, JavaScript et du PHP,
liant ainsi les parties front et back.

L’architecture MVC m’a beaucoup aidée afin de garder mon code organisé et
propre. J’ai pour cela créé plusieurs dossiers, en plus de mon dossier assets (qui
contient le css, js et les éventuelles images), Views (dont un sous dossier templates
pour le header et le footer), les Controllers (qui contrôlent les vues), user (pour les
formulaires), Model (pour les différentes classes) et Utils (les regex, utilisées pour les
formulaires). Une page 404 a également été créée pour pallier tout éventuel problème
de liens.

La sécurisation des formulaires se fait dans les controllers, à l’aide des regex, des
filtres (FILTER_SANITIZE, qui permet de nettoyer les données, FILTER_VALIDATE, qui
permet de valider les données), différentes conditions ainsi que des try and catch.

Afin de ne jamais me retrouver dans la situation délicate de perdre tout mon

travail, je poussais régulièrement sur github. Grâce à github justement, j’ai pu
travailler sur différentes branches afin de ne pas écraser les parties fonctionnelles du
projet. À chaque fois qu’une partie était fonctionnelle, je faisais un merge afin de
pouvoir corriger d'éventuels conflits.
Quant au framework front, j’ai utilisé Bootstrap qui m’a beaucoup aidée à rendre mon
site responsive.

Pour la partie liée à la base de données, j’ai utilisé l’outil Jmerise et

PhpMyadmin, MySQL ainsi que Laragon. Jmerise a été très utile pour créer les tables
de la base de données à l’aide des entités, des liens et des cardinalités.

6
 La partie graphique a été réalisée grâce à Canva pour le logo, coolors pour la
palette de couleurs et AdobeXD pour la maquette graphique.

J’ai d'ailleurs fait le choix de faire le site en anglais. La communauté de fans

étant internationale, la majorité des sites et outils que nous pouvons trouver sont eux
aussi en anglais. Il était donc logique pour moi de procéder ainsi.

7
Réalisations du candidat

Ci-dessous, vous trouverez un exemple de la maquette, réalisée au tout début

du projet, ainsi que le logo. On remarque que les couleurs ont légèrement changé,
tirant plus vers le violet/bleu que le rose. Mon projet ayant beaucoup évolué depuis le
début, l’aspect visuel du site s’est quelque peu éloigné de la maquette. Malgré tout,
les éléments principaux sont toujours présents.

8
 Pour ce qui est des photocards, j’avais le choix entre : en prendre déjà
existantes ou les faire moi-même. J’ai choisi la seconde option. Pour ce faire, j’ai
utilisé pinterest pour trouver les photos ainsi que procreate et mon ipad pour
dessiner. En procédant ainsi, j’ai pu m’assurer d’une homogénéité dans le style, dans
la taille et dans la qualité.

Ici, vous trouverez des captures d’écran de mon architecture MVC et donc de
l’organisation de mes différents dossiers (j’ai dû adapter ce que vous voyez
ci-dessous tout au long du projet, ce que vous voyez n’est peut-être donc pas la
version finale) .

9
 Le fichier regex.php contient les regex suivantes. Couplées aux patterns
ajoutées aux inputs de la partie front et aux conditions des controllers, les regex
renforcent la sécurité des formulaires envoyés afin de réduire au maximum les
risques de malveillances. J’aurais pu utiliser une regex pour le mot de passe, mais
par soucis de sécurité, j’ai préféré laisser le choix à l’utilisateur de sa longueur ne
voulant pas donner des informations sur le contenu du mot de passe à d'éventuels
hackers (le mot de passe étant haché grâce à la fonction password_hash(), sa
longueur réelle importe peu).

Vous pouvez voir un exemple des filtres utilisés. Pour le mail, j’utilise trim afin
de m’assurer qu’il n’y a pas d’espace au début comme à la fin de l’adresse mail (si
cette dernière a été copiée collée par exemple). Le filter_input me sert à filtrer ce qu’il
y a dans mon input. L’ INPUT_POST permet de préciser la méthode de récupération
des données (POST ou GET), ‘email’ fait référence au nom précisé dans l’input, et le
FILTER_SANITIZE_EMAIL permet de nettoyer une adresse mail. Ce filtre permet de se
passer d’une regex.

10
 Les différentes erreurs sont envoyées dans un tableau “error” afin d’afficher le
bon message à l’utilisateur en fonction des erreurs commises et ainsi améliorer
l’expérience utilisateur. Le fait que ce tableau soit rempli ou non nous aide d’ailleurs à
savoir si nous pouvons créer le compte ou non : si le tableau d’erreurs est vide, nous
pouvons passer à la suite. Sinon, il faut les corriger pour pouvoir créer son compte.

J’ai aussi utilisé de nombreuses constantes, que ce soit pour me connecter à

la base de données, définir l’adresse mail utilisée pour l’envoie du mail de validation
ou encore pour le chargement de la photo de profil de l’utilisateur. Définir des
constantes plutôt que des variables pour les données qui ne changent pas, pour les
données constantes justement, permet d’optimiser le code.

11
Jeu d’essai

Pour cette partie, je vais vous présenter l’ajout des photocards.

J’ai commencé par l’ajout des images dans mon dossier “photocards”, sous dossier
de “uploads” via le formulaire d’ajout (formulaire uniquement accessible pour
l’administratrice du site). Je me suis assurée que le poids du fichier ne soit pas
excédé, puis que le format soit celui attendu (ici en png). Les photocards ayant
toutes la même dimension, je n’ai pas eu besoin de les redimensionner.

Une fois que les images s’ajoutaient sans problème, j’ai pu me concentrer sur
la partie ajax de mon formulaire. Je voulais que, lorsque je sélectionne un groupe
grâce au select, les membres s’affichent dans le select suivant, rendant ainsi
l’affichage plus dynamique et améliorant l’expérience utilisateur.

12
 Pour ce qui est de la méthode de création, j’ai créé une class Photocard. J’ai
ensuite vérifié si le tableau d’erreurs était vide afin de passer à l’appel de la méthode
create ce qui permet de passer à l’enregistrement des photocards dans la table
concernée.

Dans l’annexe, vous pouvez voir l’enregistrement des deux photocards qui
correspondent à Jennie du groupe BLACKPINK dans la base de données. Le nom du
fichier est récupéré, ainsi que l’id du nom du membre concerné. Grâce au nom de la
photocard dans pc_name, il est plus facile d’afficher les photocard : comme vous
pouvez le voir sur la capture d’écran, tout se passe dans la source de la balise image
(aussi disponible dans l’annexe).

13
Description de la veille

Créer un site internet c’est aussi s’exposer à d’éventuels dangers et utilisateurs

malveillants. On peut se retrouver avec un site bourré de liens qui renvoient sur
d’autres si la section commentaires est mal protégée, des injections de sql qui
peuvent tronquer ou modifier notre base de données. Les informations personnelles
des utilisateurs du site peuvent aussi être touchées et possiblement fuiter.
C’est pour cela que la sécurité est un point très important, que ce soit pour le
client , les utilisateurs du site ou la base de données.

Afin de sécuriser un maximum mon site, j’ai effectué des recherches sur les
bonnes pratiques à mettre en place. Même si la sécurité back est extrêmement
importante pour palier à différentes injections dans notre code via les formulaires, la
sécurité front l’est tout autant.

La sécurité front.

Les patterns, required, les regex, htmlspecialchars() dans l’action du

formulaire afin de convertir les éventuels caractères spéciaux en entités HTML ou
encore préciser le type de fichiers admis dans un input type file (image, pdf, etc).
Malheureusement, ces différentes barrières peuvent être un frein mineur contre les
malveillances.

La sécurité back.

C’est pour cela qu’entrent en jeu les différents filtres de validation ou de

nettoyage (comme vous avez pu le voir dans la partie “Réalisations du candidat”), les
preg_match, les conditions afin de bloquer, par exemple, des fichier du mauvais
format (pdf à la place de jpeg par exemple).

14
Situation de travail

Durant la réalisation de ce projet, j’ai dû faire beaucoup de recherches sur

internet afin de résoudre différents problèmes. J’ai beaucoup utilisé W3schools,
Stack Overflow et la documentation de PHP (qui était en anglais selon la langue dans
laquelle je faisais ma recherche), ainsi que celle de SQL.

Pour K-Library, j’ai besoin d’ajouter des photos, de les enregistrer et de les
afficher. Pour ce faire, j’ai dû faire des recherches sur les différentes fonctions de
PHP. J’ai par exemple été amenée à taper dans la barre de recherche “
imagecreatefrompng() php” afin d’en savoir plus sur la fonction.

J’en ai eu besoin pour l’ajout de mes photocards (que j’ai fait moi-même,
prenant soin de leur donner à toutes la même taille pour un souci d’efficacité. Elles
font toutes 286px sur 442px et sont toutes en .png). Cette fonction permet de créer
une image en format png à partir d’un fichier ou d’une url. Pour ensuite envoyer cette
image vers le fichier prévu à cet effet, j’ai dû continuer les recherches avec la fonction
“imagepng()”.

Les recherches que j’ai pu faire portaient plus ou moins leurs fruits, c’est pour
cela qu’il est important de faire des recherches en français mais aussi (et surtout) en
anglais pour accéder à un éventail de réponses plus important.

15
Extrait de site anglophone

Pour cette traduction, j’ai choisi les jointures SQL sur le site w3schools.

https://www.w3schools.com/sql/sql_join.asp

Extrait du site :

A JOIN clause is used to combine rows from two or more tables, based on a related
column between them.
Let's look at a selection from the "Orders" table:
Then, look at a selection from the "Customers" table:

Notice that the "CustomerID" column in the "Orders" table refers to the "CustomerID"
in the "Customers" table. The relationship between the two tables above is the
"CustomerID" column.

Then, we can create the following SQL statement (that contains an INNER JOIN), that
selects records that have matching values in both tables:
and it will produce something like this:
Different Types of SQL JOINs

Here are the different types of the JOINs in SQL:

● (INNER) JOIN: Returns records that have matching values in both tables
● LEFT (OUTER) JOIN: Returns all records from the left table, and the matched
records from the right table
● RIGHT (OUTER) JOIN: Returns all records from the right table, and the
matched records from the left table
● FULL (OUTER) JOIN: Returns all records when there is a match in either left or
right table

16
Traduction :

La clause JOINTURE est utilisée pour combiner les lignes de deux tables ou plus,
basé sur la relation de leurs colonnes.
Regardons la sélection depuis la table “Commandes” :
Maintenant, regardons la sélection depuis la table “Clients” :

Remarquez que la colonne “ClientsID” dans la table “Commandes” fait référence à la

colonne “ClientsID” de la table “Clients”. La relation entre les deux tables ci-dessus
vient de la colonne “ClientsID”.

Maintenant nous pouvons créer la commande SQL suivante (qui contient une
JOINTURE INTERNE) ce qui sélectionne les données ayant une valeur commune dans
les deux tables :
ce qui donne :

Les différents types de JOINTURES SQL

Voici les différents types de JOINTURES SQL :

● JOINTURE (INTERNE): Retourne les données ayant une valeur commune dans
les deux tables.
● JOINTURE (EXTERNE) GAUCHE : Retourne toutes les données de la table de
gauche et les données communes de la table droite.
● JOINTURE (EXTERNE) DROITE : Retourne toutes les données de la table de
droite et les données communes de la table gauche.
● JOINTURE PLEINE (EXTERNE): Retourne toutes les données communes à la
table de gauche comme à la table de droite.

17
Conclusion

18
Annexes

Ici vous trouverez la totalité des 40 photocards que j’ai pu faire pour le projet :

Ici vous trouverez ma base de données et les différentes tables qui la compose :

La table photocard ainsi que le code qui affiche les photocards. (cf le jeu d’essai)

19
20