Dossier Professionnel TPDWWM Laurent Seraline .pdf

---

À propos / Télécharger Aperçu

---

Ce document au format PDF 1.3 a été généré par Word / macOS Version 10.15.7 (assemblage 19H524) Quartz PDFContext, et a été envoyé sur fichier-pdf.fr le 27/01/2022 à 15:43, depuis l'adresse IP 109.215.x.x. La présente page de téléchargement du fichier a été vue 940 fois.
Taille du document: 8.4 Mo (39 pages).
Confidentialité: fichier public

Aperçu du document

---

DOSSIER PROFESSIONNEL (DP)
y

Nom de naissance
Nom d’usage
Prénom
Adresse

u
u
u
u

Séraline
Séraline
Laurent
205, impasse Printemps, 47000 Agen

Titre professionnel visé
Développeur Web et Web Mobile

MODALITE D’ACCES :
☒
☐

Parcours de formation
Validation des Acquis de l’Expérience (VAE)

DOSSIER PROFESSIONNEL-Version Traitement de texte – Version du 11/09/2017

Page

1

DOSSIER PROFESSIONNEL (DP)

Présentation du dossier
Le dossier professionnel (DP) constitue un élément du système de validation du titre professionnel.
Ce titre est délivré par le Ministère chargé de l’emploi.
Le DP appartient au candidat. Il le conserve, l’actualise durant son parcours et le présente
obligatoirement à chaque session d’examen.
Pour rédiger le DP, le candidat peut être aidé par un formateur ou par un accompagnateur VAE.
Il est consulté par le jury au moment de la session d’examen.

Pour prendre sa décision, le jury dispose :
1.

des résultats de la mise en situation professionnelle complétés, éventuellement, du questionnaire
professionnel ou de l’entretien professionnel ou de l’entretien technique ou du questionnement à partir de
productions.

2.

du Dossier Professionnel (DP) dans lequel le candidat a consigné les preuves de sa pratique professionnelle.

3.

des résultats des évaluations passées en cours de formation lorsque le candidat évalué est issu d’un
parcours de formation

4.

de l’entretien final (dans le cadre de la session titre).
[Arrêté du 22 décembre 2015, relatif aux conditions de délivrance des titres professionnels
du ministère chargé de l’Emploi]

Ce dossier comporte :
pour chaque activité-type du titre visé, un à trois exemples de pratique professionnelle ;

u

un tableau à renseigner si le candidat souhaite porter à la connaissance du jury la détention d’un titre, d’un
diplôme, d’un certificat de qualification professionnelle (CQP) ou des attestations de formation ;

u

u

une déclaration sur l’honneur à compléter et à signer ;

u

des documents illustrant la pratique professionnelle du candidat (facultatif)

u

des annexes, si nécessaire.

Pour compléter ce dossier, le candidat dispose d’un site web en accès libre sur le site.

y
Page

2

http://travail-emploi.gouv.fr/titres-professionnels

DOSSIER PROFESSIONNEL-Version du 11/09/2017

DOSSIER PROFESSIONNEL (DP)
Sommaire
Exemples de pratique professionnelle
Activité-type n° 1 : Développer la partie front-end d’une application web ou web
mobile en intégrant les recommandations de sécurité

p.

5

u

CP1 Maquetter une application ..........................................................................................................
p. p. 5

u

CP2 Réaliser une interface utilisateur web statique et adaptable .....................................................
p. p.10

u

CP3 Développer une interface utilisateur web dynamique .................................................................
p. p15

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

p.

20

u

CP5 Créer une base de données .........................................................................................................
p. p.20

u

CP6 Développer les composants d’accès aux données ......................................................................
p. p.27

u

CP7 Développer la partie back-end d’une application web ou web mobile ........................................
p. p33

Titres, diplômes, CQP, attestations de formation (facultatif)

p.

38

Déclaration sur l’honneur

p.

39

DOSSIER PROFESSIONNEL-Version Traitement de texte – Version du 11/09/2017

Page

3

DOSSIER PROFESSIONNEL (DP)

EXEMPLES DE PRATIQUE
PROFESSIONNELLE

Page

4

DOSSIER PROFESSIONNEL-Version du 11/09/2017

DOSSIER PROFESSIONNEL (DP)
Développer la partie front-end d’une application web ou web mobile
en intégrant les recommandations de sécurité

Activité-type 1
CP1

u

Maquetter une application

1. Décrivez les tâches ou opérations que vous avez effectuées, et dans quelles conditions :

Dans le cadre de ce dossier professionnel, j’ai développé une application qui présente une partie de ma
collection de jeux de société. Ce projet m’a permis de mettre en œuvre ce que nous avons appris dans
le cadre de la formation O’clock concernant la conception d’une application web.
Avant d’attaquer la réalisation des maquettes fonctionnelles (wireframes), j’ai listé les différents
scénarios d’utilisation (users stories) que mon application devra satisfaire.
Le tableau ci-dessous décrit les fonctionnalités attendues groupées par rôle utilisateur.
•

Users stories
En tant que …
Visiteur
Visiteur
Visiteur
Visiteur
Visiteur
Visiteur
Visiteur
Visiteur
Visiteur
Visiteur
Visiteur

Je souhaite …
Voir la collection complète de
jeux
Pouvoir contacter le
propriétaire de la collection
Voir une photo de la boîte de
chaque jeu depuis la page
d’accueil
Voir une photo du contenu de
chaque boîte de jeu
Connaître le nom de chaque jeu
Être renseigné sur le nombre de
joueurs possibles pour chaque
jeu
Savoir la durée moyenne d’une
partie pour chaque jeu
Être informé de l’âge minimum
conseillé pour chaque jeu
Savoir à quelle(s) catégorie(s)
appartient chaque jeu
Connaître le(s) nom(s) de(s)
l’auteur(s) de chaque jeu
Avoir une description rapide de
chaque jeu

DOSSIER PROFESSIONNEL-Version Traitement de texte – Version du 11/09/2017

Afin de …

Obtenir des informations
supplémentaires sur les jeux

Me faire une idée plus précise
du jeu
Savoir si les jeux correspondent
au nombre de joueurs avec qui
je veux jouer simultanément
Déterminer si les jeux seront
adaptés à mon utilisation
Savoir vers quels jeux je peux
me diriger en fonction des gens
avec qui je vais jouer
Sélectionner les jeux en
fonction de mes préférences
Savoir si le jeu a été réalisé par
un auteur que je connais
Choisir les jeux pour lesquels je
veux en savoir plus
Page

5

DOSSIER PROFESSIONNEL (DP)
En tant que …
Visiteur

Je souhaite …
Pouvoir accéder à une
description détaillée de chaque
jeu
Voir l’avis du propriétaire de la
collection pour chaque jeu
Pouvoir accéder à une
plateforme de jeux en ligne
Pouvoir accéder à une boutique
en ligne

Afin de …
En apprendre davantage sur
certains jeux

Administrateur

Pouvoir me connecter

Administrateur

Accéder aux fonctionnalités
d’administration
Compléter la collection

Pouvoir ajouter un jeu avec
toutes ses informations
(photos, nom, nombre de
joueurs, âge minimum conseillé,
durée moyenne d’une partie,
brève description, description
complète, catégorie(s), nom(s)
de(s) l’auteur(s), avis personnel
Pouvoir modifier les
Corriger une erreur, modifier la
informations d’un jeu
description ou l’avis
personnel,…etc
Pouvoir supprimer un jeu
Mettre à jour la collection

Visiteur
Visiteur
Visiteur

Administrateur
Administrateur

Avoir un avis d’une personne
ayant déjà essayé le jeu
Essayer les jeux que j’ai repérés
Commander les jeux que j’ai
repérés

Une fois l’ensemble des fonctionnalités listées et décrites, j’ai réalisé des maquettes fonctionnelles
(wireframes) en prenant soin d’y inclure tous les éléments nécessaires à la satisfaction des besoins
utilisateurs.
Des maquettes version mobile et desktop ont été réalisées pour toutes les vues de l’application. Des
légendes donnent des précisions sur le contenu et indiquent les comportements des différents
boutons.
Elles ont pour rôle de guider le développement en présentant le squelette visuel du site et sont
focalisées sur l’ergonomie que devra avoir l’application.
Dans le cadre de ce dossier, je présente uniquement les maquettes mobile et desktop de la page
d’accueil.

Page

6

DOSSIER PROFESSIONNEL-Version du 11/09/2017

DOSSIER PROFESSIONNEL (DP)

•

Wireframes

Page d’accueil – Mobile

DOSSIER PROFESSIONNEL-Version Traitement de texte – Version du 11/09/2017

Page

7

DOSSIER PROFESSIONNEL (DP)

Page d’accueil – Desktop

Page

8

DOSSIER PROFESSIONNEL-Version du 11/09/2017

DOSSIER PROFESSIONNEL (DP)
2. Précisez les moyens utilisés :

Réalisation des wireframes à l’aide de l’application Balsamiq Cloud (en ligne).

3. Avec qui avez-vous travaillé ?

J’ai travaillé seul sur ce projet.

4. Contexte
Nom de l’entreprise, organisme ou association
Chantier, atelier, service
Période d’exercice

u

u

Du :

u

École O’clock

Projet personnel réalisé lors de la formation
05/10/2020

au :

23/03/2021

5. Informations complémentaires (facultatif)

DOSSIER PROFESSIONNEL-Version Traitement de texte – Version du 11/09/2017

Page

9

DOSSIER PROFESSIONNEL (DP)

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

Activité-type 1
CP2

u

Réaliser une interface utilisateur web statique et adaptable

1. Décrivez les tâches ou opérations que vous avez effectuées, et dans quelles conditions :

À partir des wireframes réalisés (voir CP1), j’ai développé l’application présentant une partie de ma
collection de jeux de société. L’application étant entièrement responsive (dont le design s’adapte à la
taille d’écran de l’utilisateur), le visiteur peut la parcourir sur mobile ou sur ordinateur.
J’ai profité de ce projet pour découvrir la bibliothèque Bootstrap qui permet de faciliter la création
d’application web responsive via l’utilisation de classes prédéfinies.
Dans le cadre de ce dossier, je vais présenter uniquement la page d’accueil visiteur et me concentrer
sur le code HTML et CSS.
•

Page

Rendu version desktop

10

DOSSIER PROFESSIONNEL-Version du 11/09/2017

DOSSIER PROFESSIONNEL (DP)
La page d’accueil comprend un menu de navigation sur la partie supérieure de l’écran. Il est toujours
apparent et permet de revenir à la page d’accueil, d’accéder à un site de jeu en ligne ou d’être redirigé
vers un site marchand. Le bouton « Se connecter » n’est finalement pas présent car j’ai finalement
décidé de réaliser un back-office séparé pour l’administrateur.
Les différents jeux sont présentés sous forme de cartes par lignes de 3 avec : une photo de la boîte, leur
nom, la durée de jeu moyenne, l’âge minimum conseillé, les catégories auxquelles il appartient et une
brève description. En bas de chaque carte, un bouton « En savoir plus » permet d’accéder à la page
détaillée du jeu. Enfin, un footer (non visible sur la capture) est présent sur l’ensemble des pages du
site.
•

Rendu version mobile

Lors de l’utilisation de l’application sur mobile, les liens de navigation sont masqués et apparaissent à la
demande de l’utilisateur via un clic sur le « menu burger ». Les tuiles présentant les jeux sont désormais
affichées les unes en dessous des autres et la description n’est plus affichée.
D’autres adaptations sont prévues dans le code pour des tailles d’écran intermédiaires.

DOSSIER PROFESSIONNEL-Version Traitement de texte – Version du 11/09/2017

Page

11

DOSSIER PROFESSIONNEL (DP)
•

Gestion barre de navigation responsive

La navigation internet depuis les terminaux mobiles devenant la norme, le développement dit « mobile
first » est désormais une « bonne pratique ». Boostrap s’est adapté et ses dernières versions sont
conçue selon cette approche. Les règles CSS sont donc prévues pour un affichage mobile en premier
lieu puis on indique via un système de « breakpoints » (reposant sur l’utilisation de règles @media ) les
adaptations pour les écrans plus grands.
Pour réaliser un menu de navigation responsive, je me suis appuyé sur le composant navbar de
Bootstrap.
Sur les écrans mobiles, le composant prévoit un affichage vertical du menu. Avec la classe navbarexpand-sm , j’indique que le menu doit « s’étendre » à partir du breakpoint « small » ( sm ), correspondant
à une largeur de fenêtre de 540px. La combinaison de cette classe avec d’autres indiquées pour les
éléments enfants permettra un affichage différent à partir de ce breakpoint (la mise à l’horizontale du
menu par exemple).
Pour la version mobile, j’ai ajouté un bouton avec la représentation classique d’un menu burger via la
classe navbar-toggler-icon . La classe navbar-toggler associée à la classe navbar-expand-sm sont
responsables de la disparition de l’icône pour des largeurs supérieures à 540px ( display : none ).
La classe collapse appliquée au parent de la liste ( <ul> ) entraîne la disparition des liens en dessous
d’une largeur de 540px.
Enfin pour le comportement d’apparition/disparition du menu lors du clic sur l’icône, j’ai ajouté les
propriétés data-toggle=“collapse“ et data-target=“#navbarResponsive“ qui est l’ id que j’ai donné à
la div contenant ma liste.

Page

12

DOSSIER PROFESSIONNEL-Version du 11/09/2017

DOSSIER PROFESSIONNEL (DP)
•

Gestion de la présentation des tuiles « jeux »

Pour rendre l’affichage des tuiles responsive, je me suis appuyé sur le système de grille Bootstrap.
L’idée est de définir un élément row (via la classe du même nom) qui sera constitué de 12 colonnes de
bases. On ajoute ensuite des colonnes (via la classe col ) à l’intérieur de cet élément en indiquant le
nombre de colonnes (parmi les 12 de base) que chaque colonne créée doit occuper en fonction de la
largeur d’écran. Par défaut une colonne créée occupe toute la largeur d’une row , c’est donc le
comportement observé lors de la navigation mobile.
Pour les écrans plus larges, les classes col-md-6 col-lg-4 indiquent qu’à partir de la taille d’écran
« medium » ( md - 720px) chaque colonne créée occupera 6 des 12 colonnes de base et qu’à partir de la
taille d’écran « large » ( lg – 960px) chaque colonne créée occupera 4 des 12 colonnes de base.
Autrement dit, dès que la fenêtre atteindra 720px de large, 2 tuiles s’afficheront côte à côte et à partir
de 960px, 3 tuiles s’afficheront côte à côte.
Enfin, la classe d-none sur le paragraphe affichant la brève description permet d’indiquer un display :
none par défaut et donc de ne pas l’afficher sur mobile. La classe d-sm-block permet d’indiquer un
display : block à partir de la taille small (576px – tablettes) pour qu’elle apparaisse.

DOSSIER PROFESSIONNEL-Version Traitement de texte – Version du 11/09/2017

Page

13

DOSSIER PROFESSIONNEL (DP)
2. Précisez les moyens utilisés :

Éditeur de code : Visual Studio Code
Technologies & Langages : HTML, CSS, JavaScript, Node.js, Express.js, ejs, Bootstrap

3. Avec qui avez-vous travaillé ?

J’ai travaillé seul sur ce projet.

4. Contexte
Nom de l’entreprise, organisme ou association
Chantier, atelier, service
Période d’exercice

u

u

Du :

u

École O’clock

Projet personnel réalisé lors de la formation
05/10/2020

au :

23/03/2021

5. Informations complémentaires (facultatif)

Page

14

DOSSIER PROFESSIONNEL-Version du 11/09/2017

DOSSIER PROFESSIONNEL (DP)

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

Activité-type 1
CP3

u

Développer une interface utilisateur web dynamique

1. Décrivez les tâches ou opérations que vous avez effectuées, et dans quelles conditions :

Au cours de la formation au sein de l’école O’clock, nous avons découvert la manipulation du Document
Object Model (DOM) avec JavaScript via la création d’un jeu de dés : « Dice Roller » que j’ai fait un peu
évoluer durant mon temps libre.
Ce jeu aux règles complexes, qui consiste à obtenir la plus grosse somme de dés, se joue contre le
programme lui-même appelé Jarvis.

La capture d’écran ci-dessus montre l’issue d’une partie. À la connexion, la zone de jeu et le bandeau de
résultat son vides. Le nombre de dés est par défaut fixé à 6. Avant de lancer ou de relancer une partie,
le joueur peut faire varier le nombre de dés en jeu à l’aide du slider. Il lance ensuite la partie en cliquant
sur le bouton « Lancer la partie ». Un nombre de dés égal à la valeur choisie apparaît dans chaque zone
de jeu. Au bout de quelques secondes, les dés « s’immobilisent » et le résultat s’affiche.
Dans le cadre de cette CP3 (« Développer une interface utilisateur web dynamique »), je vais
uniquement m’attarder sur la partie JavaScript de cette application.

DOSSIER PROFESSIONNEL-Version Traitement de texte – Version du 11/09/2017

Page

15

DOSSIER PROFESSIONNEL (DP)
•

Fonction diceRoll()

Avant toutes choses, je crée une fonction permettant de simuler un lancer de dé à 6 faces et de
renvoyer le résultat obtenu.
•

Ajout d’une zone affichant le résultat

Afin de pouvoir afficher le résultat de la partie, je crée un élément html p avec la classe winner que
j’insère dans le DOM à la fin du conteneur body .
•

Fonction createDice()

Cette fonction permet de créer un dé, de l'insérer, de donner un effet de dé qui roule avant de
s’immobiliser et de renvoyer le résultat du lancer. Elle sera utilisée par la fonction play() (présentée
dans la suite de cette section) pour générer les dés en fonction du nombre choisi par le joueur.
Je commence par créer une <div> que je stocke dans une variable dice . Une fois insérée dans le DOM,
elle recevra l’image « sprite » du dé en image de fond. C’est ces div qui permettront donc d’afficher
des dés à l’écran.
Page

16

DOSSIER PROFESSIONNEL-Version du 11/09/2017

DOSSIER PROFESSIONNEL (DP)
Je sélectionne ensuite la zone de jeu dans laquelle l’insérer ( player-board ou jarvis-board ) en
récupérant l’information via la valeur passée en paramètre de la fonction ( board ) puis je l’insère.
J’exécute ensuite la fonction rollDice() précédemment créée pour attribuer une valeur à ce dé. Je
stocke le résultat dans une variable result .
La suite du code permet de donner l’effet d’un dé qui roule avant de s’immobiliser en donnant à
l’image « sprite » une position aléatoire toutes les 100ms jusqu’à l’expiration d’un délai aléatoire
également.
Enfin je renvoie le résultat du lancer pour l’utiliser dans le calcul.
•

Fonction play()

Cette fonction s’exécutera lors du clic de l’utilisateur sur le bouton « Lancer une partie ». Elle permet de
lancer une partie, de créer le nombre de dés choisis par l’utilisateur, de calculer le résultat de la partie
et de l’afficher.
Tout d’abord, je récupère et je stocke dans une variable choice le nombre de dés choisis par
l’utilisateur via le slider. Cette valeur déterminera le nombre de fois que la fonction createDice() doit
être exécutée.
DOSSIER PROFESSIONNEL-Version Traitement de texte – Version du 11/09/2017

Page

17

DOSSIER PROFESSIONNEL (DP)
Avant de créer les nouveaux dés, je vide les zones de jeu et de résultat et j’initialise les variables
permettant de stocker les scores totaux.
Je lance ensuite une boucle pour exécuter ma fonction createDice() autant de fois que la valeur
choisie par l’utilisateur et ce pour chaque camp. Je cumule les valeurs de dés retournées dans les
variables playerScore et jarvisScore .
Enfin, en fonction des résultats obtenus par les 2 camps, j’ajoute le contenu et la couleur de fond
adaptés à la div winner . Le setTimeout() permet d’afficher le résultat une fois les dés immobilisés.
•

Ajout d'un écouteur d'évènements sur le ‘slider’

Afin que le nombre de dés en jeu (affiché dans le header) change à l’écran lorsque l’utilisateur fait
varier le slider, j’ajoute un écouteur d’évènement sur le slider qui déclenche une fonction mettant à
jour le contenu de l’output.
•

Ajout d'un écouteur d'évènement sur le bouton ‘play-button’

Enfin, j’ajoute un dernier écouteur d’évènement sur le bouton « Lancer la partie » pour déclencher ma
fonction play() .

Page

18

DOSSIER PROFESSIONNEL-Version du 11/09/2017

DOSSIER PROFESSIONNEL (DP)
2. Précisez les moyens utilisés :

Éditeur de code : Visual Studio Code
Technologies & Langages : HTML, CSS, JavaScript

3. Avec qui avez-vous travaillé ?

J’ai travaillé seul sur ce projet

4. Contexte
Nom de l’entreprise, organisme ou association
Chantier, atelier, service
Période d’exercice

u

u

Du :

u

École O’clock

Projet réalisé au cours de la formation et amélioré sur mon temps libre
05/10/2020

au :

23/03/2021

5. Informations complémentaires (facultatif)

DOSSIER PROFESSIONNEL-Version Traitement de texte – Version du 11/09/2017

Page

19

DOSSIER PROFESSIONNEL (DP)
Développer la partie back-end d’une application web ou web mobile en
intégrant les recommandations de sécurité

Activité-type 2
CP5

u

Créer une base de données

1. Décrivez les tâches ou opérations que vous avez effectuées, et dans quelles conditions :

Dans le cadre de ce dossier professionnel, j’ai conçu une base de données qui sera utilisée par une
application de réservations de salles d’Escape Game. Elle comprendra plusieurs structures (endroit)
pouvant regrouper plusieurs salles. Les utilisateurs pourront réserver et noter les différentes salles.
Pour réaliser ce travail, je me suis appuyé sur la méthode Merise et son processus de conception en 3
étapes : modèle conceptuel puis modèle logique et enfin modèle physique.
•

Modèle Conceptuel de données (MCD)

Après avoir réalisé un recueil de données pour lister les informations nécessaires au fonctionnement de
l’application, les entités suivantes (et leurs attributs) se sont dégagées :
CLIENT : numéro client, email, prénom, nom, mot de passe
SALLE : code salle, nom, durée, niveau de difficulté, nombre de joueur minimum, nombre de
joueur maximum, prix
STRUCTURE : code structure, nom, adresse, complément, code postal, ville
THÈME : référence interne, libellé
J’ai ensuite déterminé les relations et les cardinalités (quantités minimum et maximum entre deux
entités) entre ces différentes entités, elles sont les suivantes :
Structure <- INCLURE -> Salle
Þ Relation 1:N
§ Une structure peut inclure minimum 1 salle et maximum N salles
§ Une salle peut faire partie de minimum 1 structure et maximum 1 structure
Salle <- APPARTENIR -> Thème
Þ Relation N:N
§ Une salle peut appartenir à minimum 1 thème et maximum N thèmes
§ Un thème peut être attribué à minimum 0 salle et maximum N salles
Client <- RÉSERVER -> Salle
Þ Relation N:N
§ Un client peut réserver minimum 0 salle et maximum N salles
§ Une salle peut être réservée par minimum 0 client et maximum N clients
Page

20

DOSSIER PROFESSIONNEL-Version du 11/09/2017

DOSSIER PROFESSIONNEL (DP)
Client <- NOTER -> Salle
Þ Relation N:N
§ Un client peut noter minimum 0 salle et maximum N salles
§ Une salle peut être notée par minimum 0 client et maximum N clients
Certaines données présentes dans le recueil de données se trouvent décrire non pas une entité mais
une relation. Elles seront visibles dans la modélisation graphique du MCD ci-dessous :

•

Modèle Logique de Données (MLD)

Après la réalisation du MCD, j’ai fait un pas de plus vers la base de données physique finale en réalisant
le MLD. Pour passer de l’un à l’autre, voici les règles à appliquer :
Þ Toutes les entités décrites dans le MCD deviennent des tables du MLD.
Þ Les 3 relations de type N:N seront également matérialisées par des tables à part entière
contenant les 2 clés étrangères des tables à lier et les attributs décrivant ces relations.
Þ La relation de type 1:N sera matérialisée par une clé étrangère dans la table ayant la
cardinalité maximum égale à 1 (Salle) faisant référence à l’identifiant dans la table
associée (Structure).

DOSSIER PROFESSIONNEL-Version Traitement de texte – Version du 11/09/2017

Page

21

DOSSIER PROFESSIONNEL (DP)
Voici la représentation graphique du MLD :

•

Dictionnaire de données

À partir du MLD réalisé, j’ai rédigé un dictionnaire de données qui liste, par table, l’ensemble des
champs avec : le type de donnée, ses spécificités et les relations entre les tables. Il me permettra, une
fois « traduit » en langage SQL, de générer ma base de données physique.
ORGANIZATION
Champ

Type

id

INT

organization_code
name
address
complement

TEXT
TEXT
TEXT
TEXT

zip_code
city
created_at

INT
TEXT
TIMESTAMPTZ

updated_at

TIMESTAMPTZ

Page

22

Spécificités
GENERATED ALWAYS AS
IDENTITY PRIMARY KEY
UNIQUE, NOT NULL
NOT NULL
NOT NULL

NOT NULL
NOT NULL
NOT NULL DEFAULT now()

Description
Clé primaire
Identifiant unique de la structure
Nom de la structure
Numéro et nom de rue
Informations complémentaires sur
l’adresse
Code postal
Ville
Date et heure de création de
l’enregistrement
Date et heure de dernière modification
de l’enregistrement

DOSSIER PROFESSIONNEL-Version du 11/09/2017

DOSSIER PROFESSIONNEL (DP)
ROOM
Champ

Type

id

INT

room_code
name
duration
difficulty_level
min_players
max_players
organization_id

TEXT
TEXT
INT
INT
INT
INT
INT

created_at

TIMESTAMPTZ

updated_at

TIMESTAMPTZ

THEME
Champ

Type

id

INT

theme_code
name
created_at

TEXT
TEXT
TIMESTAMPTZ

updated_at

TIMESTAMPTZ

ROOM_HAS_THEME
Champ

Type

id

INT

room_id

INT

theme_id

INT

created_at

TIMESTAMPTZ

updated_at

TIMESTAMPTZ

Spécificités
GENERATED ALWAYS AS
IDENTITY PRIMARY KEY
UNIQUE, NOT NULL
NOT NULL
NOT NULL
NOT NULL
NOT NULL
NOT NULL
NOT NULL REFERENCES
“organization”(id) ON DELETE
CASCADE
NOT NULL DEFAULT now()

Description
Clé primaire
Identifiant unique de la salle
Nom de la salle
Durée de jeu
Niveau de difficulté entre 1 et 5
Nombre de joueurs minimum
Nombre de joueurs maximum
Clé étrangère faisant référence à l’id
d’une structure
Date et heure de création de
l’enregistrement
Date et heure de dernière modification
de l’enregistrement

Spécificités
GENERATED ALWAYS AS
IDENTITY PRIMARY KEY
UNIQUE, NOT NULL
NOT NULL
NOT NULL DEFAULT now()

Description
Clé primaire
Identifiant unique du thème
Libellé du thème
Date et heure de création de
l’enregistrement
Date et heure de dernière modification
de l’enregistrement

Spécificités
GENERATED ALWAYS AS
IDENTITY PRIMARY KEY
NOT NULL REFERENCES
“room”(id) ON DELETE
CASCADE
NOT NULL REFERENCES
“theme”(id) ON DELETE
CASCADE
NOT NULL DEFAULT now()

DOSSIER PROFESSIONNEL-Version Traitement de texte – Version du 11/09/2017

Description
Clé primaire
Clé étrangère faisant référence à l’id
d’une salle
Clé étrangère faisant référence à l’id
d’un thème
Date et heure de création de
l’enregistrement
Date et heure de dernière modification
de l’enregistrement

Page

23

DOSSIER PROFESSIONNEL (DP)
CUSTOMER
Champ

Type

Spécificités

id

INT

GENERATED ALWAYS AS
IDENTITY PRIMARY KEY
UNIQUE, NOT NULL
UNIQUE, NOT NULL
NOT NULL
NOT NULL
NOT NULL
NOT NULL DEFAULT now()

customer_number
email
firstname
lastname
password
created_at

INT
TEXT
TEXT
TEXT
TEXT
TIMESTAMPTZ

updated_at

TIMESTAMPTZ

BOOKING
Champ

Type

Spécificités

Description
Clé primaire
Identifiant unique d’un client
Adresse email du client
Prénom du client
Nom du client
Mot de passe chiffré
Date et heure de création de
l’enregistrement
Date et heure de dernière modification
de l’enregistrement

Description

id

INT

room_id

INT

customer_id

INT

booking_number
start_time

INT
TIMESTAMPTZ

GENERATED ALWAYS AS
IDENTITY PRIMARY KEY
NOT NULL REFERENCES
“room”(id) ON DELETE
CASCADE ON DELETE
CASCADE
NOT NULL REFERENCES
“customer”(id) ON DELETE
CASCADE
UNIQUE, NOT NULL
NOT NULL

created_at

TIMESTAMPTZ

NOT NULL DEFAULT now()

updated_at

TIMESTAMPTZ

Identifiant unique d’une réservation
Date et heure de début d’une
réservation
Date et heure de création de
l’enregistrement
Date et heure de dernière modification
de l’enregistrement

RATING
Champ

Type

Spécificités

Description

GENERATED ALWAYS AS
IDENTITY PRIMARY KEY
NOT NULL REFERENCES
“customer”(id)
NOT NULL REFERENCES
“room”(id)
NOT NULL, DEFAULT now()
NOT NULL
NOT NULL DEFAULT now()

id

INT

customer_id

INT

room_id

INT

date
rating
created_at

TIMESTAMPTZ
INT
TIMESTAMPTZ

updated_at

TIMESTAMPTZ

Page

24

Clé primaire
Clé étrangère faisant référence à l’id
d’une salle
Clé étrangère faisant référence à l’id
d’un client

Clé primaire
Clé étrangère faisant référence à l’id
d’un client
Clé étrangère faisant référence à l’id
d’une salle
Date de la visite
Note entre 1 et 20
Date et heure de création de
l’enregistrement
Date et heure de dernière modification
de l’enregistrement
DOSSIER PROFESSIONNEL-Version du 11/09/2017

DOSSIER PROFESSIONNEL (DP)
•

Modèle Physique de Données

Cette dernière étape consiste à implanter concrètement une base de données dans un Système de
Gestion de Base de Donnée Relationnelle (SGBDR). D’après le dictionnaire de données réalisé, j’ai écrit
et exécuté le code ci-après en utilisant PostgreSQL comme SGBDR.

DOSSIER PROFESSIONNEL-Version Traitement de texte – Version du 11/09/2017

Page

25

DOSSIER PROFESSIONNEL (DP)

2. Précisez les moyens utilisés :

MCD -> Mocodo (mocodo.xingi.net)
MLD -> Draw.io
Éditeur de code : Visual Studio Code
Langage : SQL

3. Avec qui avez-vous travaillé ?

J’ai travaillé seul sur ce projet.

4. Contexte
Nom de l’entreprise, organisme ou association
Chantier, atelier, service
Période d’exercice

u

u

Du :

u

École O’clock

Projet réalisé à l’issue de la formation
05/10/2020

au :

23/03/2021

5. Informations complémentaires (facultatif)

Page

26

DOSSIER PROFESSIONNEL-Version du 11/09/2017

DOSSIER PROFESSIONNEL (DP)

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

Activité-type 2
CP6

u

Développer les composants d’accès aux données

1. Décrivez les tâches ou opérations que vous avez effectuées, et dans quelles conditions :

Dans le cadre de la formation O’clock, nous avons codé une Application Programming Interface (API) à
destination d’une application de blog que je vais vous présenter ici.
Après avoir conceptualisé puis mis en place la base de données, nous y avons ajouté des données via un
script sur mesure qui récupère les données dans des JSON avant d’exécuter des requêtes SQL
d’insertion.
Dans cette partie, je vais montrer comment j’ai connecté l’API à la base de données puis comment j’ai
développé les composants d’accès aux données.
•

Connection à la base de données

L’API étant développée sous Node.js, j’ai commencé par installer le module npm « pg » qui est un client
PostgreSQL.
Pour la connexion, j’ai utilisé un « pool de connexion ». PostgreSQL ne traitant qu’une seule requête à
la fois par client connecté (first-in first-out) et chaque nouvelle connexion mettant du temps à s’établir,
l’utilisation d’un pool permet d’optimiser les temps de connexion. Le pool permet de conserver les
connexions précédemment ouvertes et de les réutiliser pour des connexions ultérieures. Si toutes les
connexions sont occupées, une nouvelle est créée.

Je définis ma variable DATABASE_URL dans un fichier «.env » et le module dotenv installé se chargera de
la stocker dans mes variables d’environnement auxquelles j’accède via process.env .

DOSSIER PROFESSIONNEL-Version Traitement de texte – Version du 11/09/2017

Page

27

DOSSIER PROFESSIONNEL (DP)
•

Accès aux données

Pour construire l’API, je me suis appuyé sur le Design Pattern MVC (Model-View-Controller) qui met
l’accent sur la séparation des responsabilités.
Dans cette section, je vais présenter les modules en rapport direct avec la donnée (lecture,
enregistrement, etc.) qui, associés à la base de données elle-même, constituent la couche « model ».
Pour ces modules, j’ai créé 2 types de fichiers pour chaque entité de ma base de données : un fichier
qui définit une classe correspondant à l’entité avec ses propriétés et son constructeur et un fichier
« dataMapper » comprenant les méthodes d’accès à la donnée et utilisant les fichiers « classe » pour
renvoyer un objet formaté.
Dans le cadre de ce dossier, je vais vous présenter les fichiers correspondants aux publications (posts).
app>models>post.js

app>models>postMapper.js (découpé en plusieurs captures d’écran ci-dessous)

Page

28

DOSSIER PROFESSIONNEL-Version du 11/09/2017

DOSSIER PROFESSIONNEL (DP)
Après avoir « importé » la classe Post et la connexion avec la base de données, j’ai créé un objet
postMapper qui contiendra les différentes méthodes d’accès à la base de données et que j’exporterai
pour qu’il puisse être utilisé par les Controllers de mon application.
La première méthode, findOne() , permet de récupérer un post précis dans la base de données via son
id .
La mention async indique que cette fonction a un fonctionnement asynchrone. Ainsi l’utilisation de
l’expression await placée devant une fonction à l’intérieur d’une fonction asynchrone permet de
mettre en pause l’exécution de cette dernière jusqu’à ce que la promesse soit résolue et sa valeur
retournée. Dans notre exemple, l’intérêt est d’attendre le retour de l’appel à la base de données (qui
peut prendre un certain temps) avant d’exécuter la suite du code.
Afin de me prémunir des injections SQL, je n’utilise pas le paramètre categoryId directement dans la
requête. Je place ce paramètre dans un tableau en 2ème paramètre de la méthode db.query() et je le
remplace par un « placeholder » dans la requête. Il s’agit là de requêtes préparées.
À l’inverse, si je place le paramètre reçu directement dans la requête, elle sera envoyée telle quelle
avec ce que l’utilisateur, potentiellement malveillant, a saisi. Si c’est du code SQL, il sera exécuté avec
des conséquences parfois graves sur la base de données.
Si le post est bien trouvé en base de données, je retourne une nouvelle instance de la classe Post
construite à partir des données brutes récupérées.

La méthode findAll() permet de récupérer tous les posts présents en base de données.
La propriété rows de la promesse résultante contient un tableau des enregistrements retournés. On
utilise la méthode map() pour boucler sur ce tableau et créer des instances de la classe Post . On
retourne ensuite ce nouveau tableau d’instances.

DOSSIER PROFESSIONNEL-Version Traitement de texte – Version du 11/09/2017

Page

29

DOSSIER PROFESSIONNEL (DP)

La méthode findByCategory() permet de récupérer tous les articles correspondants à une catégorie. Là
aussi la requête est préparée afin d’éviter les injections SQL de la part d’utilisateurs malveillants.
À l’image de la méthode précédente, on instancie la classe Post à partir des données brutes
récupérées.

Page

30

DOSSIER PROFESSIONNEL-Version du 11/09/2017

DOSSIER PROFESSIONNEL (DP)
Cette dernière méthode save() permet de sauvegarder un nouveau post en base de données.
Deux scénarios sont envisagés :
- l’id de la catégorie est fourni
- le nom de la catégorie est fourni.
En fonction du cas, la requête SQL sera différente. On crée donc une variable query qui recevra la
bonne syntaxe en fonction du cas. On prépare également une variable contenant les données
communes aux deux cas qu’on passera en deuxième propriété de la méthode db.query()
ultérieurement.
Dans le cas où l’ id est fourni, on dispose de toutes les données nécessaires à l’insertion dans la table
post . On ajoute donc l’ id à notre tableau de données ( data.push() ) et on passe directement les
valeurs ( VALUES ) dans la requête.
Dans le cas où l’ id n’est pas fourni, il faut aller le récupérer dans la table category avant de procéder à
l’insertion dans la table post . Ainsi, au lieu d’utiliser VALUES pour passer les valeurs à insérer, on va
utiliser le mot clé SELECT pour insérer le retour de cette sous-requête. Après avoir ajouté le nom de la
catégorie dans le tableau de données data , on va ainsi pouvoir utiliser ces variables comme avec
VALUES mais également récupérer l’ id de la catégorie en base de données.
Lors de l’insertion d’un nouvel enregistrement en base de données, un id (clé primaire) est généré
automatiquement. On peut récupérer cet id via le mot clé RETURNING ajouté à la fin des deux requêtes.
Une fois la requête exécutée, on ajoute l’ id récupéré au post reçu en entrée. L’objet d’origine étant
passé par référence, pas besoin de le renvoyer avec l’ id généré : il est déjà modifié !
Enfin, à la fin de ce fichier, on exporte l’objet postMapper contenant les méthodes d’accès aux données
pour pouvoir le récupérer et l’exploiter dans le « controller ».

DOSSIER PROFESSIONNEL-Version Traitement de texte – Version du 11/09/2017

Page

31

DOSSIER PROFESSIONNEL (DP)

2. Précisez les moyens utilisés :

Langages : JavaScript, SQL
Technologies : Node.js, Express.js, PostgreSQL, Joi, Sqitch

3. Avec qui avez-vous travaillé ?

Projet réalisé seul dans un premier temps puis amélioré suite à une correction en cours de formation.

4. Contexte
Nom de l’entreprise, organisme ou association
Chantier, atelier, service
Période d’exercice

u

u

Du :

u

École O’clock

Projet réalisé en cours de formation
05/10/2020

au :

23/03/2021

5. Informations complémentaires (facultatif)

Page

32

DOSSIER PROFESSIONNEL-Version du 11/09/2017

DOSSIER PROFESSIONNEL (DP)
Développer la partie front-end d’une application web ou web mobile
en intégrant les recommandations de sécurité

Activité-type 2
CP7

u

Développer la partie back-end d’une application web ou web mobile

1. Décrivez les tâches ou opérations que vous avez effectuées, et dans quelles conditions :

Après avoir vu la couche Model de l’API, nous allons maintenant jeter un œil à la couche Controller en
charge de gérer les demandes des utilisateurs.
Dans un premier temps, regardons le fichier postController.js de mon application qui regroupe les
méthodes liées aux posts et qui interagit avec le postMapper vue précédemment.
•

Controller
App>controllers>postController.js (découpé en plusieurs captures d’écran ci-dessous)

Après avoir importé le fichier contenant la classe Post et le fichier postMapper.js contenant les
méthodes d’accès à la base de données, je crée un objet postController qui contiendra les méthodes
et sera exporté.
La première méthode allPosts() permet de récupérer un tableau d’instances de la classe Post via la
méthode findAll() du postMapper et de renvoyer ce résultat sous forme de JSON à l’utilisateur
consommateur de l’API. Comme vu dans le dataMapper, la méthode est là aussi asynchrone pour
pouvoir indiquer qu’il faut attendre la fin de l’exécution de la méthode du dataMapper avant de
poursuivre et d’envoyer la réponse.

DOSSIER PROFESSIONNEL-Version Traitement de texte – Version du 11/09/2017

Page

33

DOSSIER PROFESSIONNEL (DP)

Cette seconde méthode onePost() permet de récupérer un post spécifique via la méthode findOne()
du postMapper qui requiert un paramètre id correspondant à l’ id du post en question.
Pour récupérer cet id , j’utilise la déstructuration pour récupérer la valeur de la propriété id de l’objet
request.params dans une variable id que je passe ensuite à la méthode postMapper.findOne() . Nous
verrons plus tard dans le router que l’ id est une variable dans l’url concerné.
Si aucun post ne correspond à cet id , le catch récupère l’ Error instanciée dans le mapper et dont la
propriété message correspond à la chaîne de caractère passée en argument du constructeur.

Cette méthode postsByCategory() permettant de récupérer tous les posts liés à une catégorie est très
similaire à celle décrite juste au-dessus à la différence que l’ id récupéré dans la request et passé en
argument de la méthode du mapper concerne une catégorie.
On récupère alors un tableau d’instances qu’on renvoie sous forme de JSON en cas de succès.

Page

34

DOSSIER PROFESSIONNEL-Version du 11/09/2017

DOSSIER PROFESSIONNEL (DP)

Cette dernière méthode du controller, newpost() , permet d’ajouter un post en base de données.
À la différence des méthodes précédentes, la méthode postMapper.save() attend un objet en
paramètre. Plus précisément une instance de la classe Post qu’on instancie à partir de l’objet
request.body contenant des couples clé-valeur issus d’un formulaire.
On notera qu’il est inutile de récupérer le retour de la méthode du mapper afin de l’utiliser pour la
réponse. En effet, l’objet étant passé par référence, l’ajout du paramètre id via le postMapper agit
directement sur l’objet thePost . Il suffit donc de renvoyer cet objet.
Enfin, à la fin du fichier, on exporte l’objet postController pour pouvoir le récupérer et l’exploiter
depuis le router.
•

Router
app>Router.js

DOSSIER PROFESSIONNEL-Version Traitement de texte – Version du 11/09/2017

Page

35

DOSSIER PROFESSIONNEL (DP)
Pour construire ce router j’ai utilisé la classe Router d’Express.
J’utilise ensuite les méthodes get() et post() founies pour répondre aux requêtes HTTP GET et POST.
En premier argument, je précise l’url attendue pour exécuter la méthode et en second argument la
méthode de controller à utiliser.
Dans certaines url, les mots précédés de « : » sont des variables. Ici les variables sont nommées id . Ce
nom sera utile pour récupérer les valeurs dans le controller. L’expression régulière (regex) entre
parenthèses indique qu’on attend ici une combinaison de chiffres entre 0 et 9.
On prévoit également une 404 pour l’API si la requête ne satisfait à aucune des routes précédentes.
•

Point d’entrée de l’API
index.js

Page

36

DOSSIER PROFESSIONNEL-Version du 11/09/2017

DOSSIER PROFESSIONNEL (DP)
2. Précisez les moyens utilisés :

Langages : JavaScript, SQL
Technologies : Node.js, Express.js, PostgreSQL, Sqitch

3. Avec qui avez-vous travaillé ?

Projet réalisé seul dans un premier temps puis amélioré suite à une correction en cours de formation.

4. Contexte
Nom de l’entreprise, organisme ou association
Chantier, atelier, service
Période d’exercice

u

u

Du :

u

École O’clock

Projet réalisé en cours de formation
05/10/2020

au :

23/03/2021

5. Informations complémentaires (facultatif)

DOSSIER PROFESSIONNEL-Version Traitement de texte – Version du 11/09/2017

Page

37

DOSSIER PROFESSIONNEL (DP)

Titres, diplômes, CQP, attestations de formation
(facultatif)

Intitulé

Autorité ou organisme

Date

Formation Développeur
web Fullstack JS

École O’clock

2021

Master Programme
Grande École

Toulouse Business School

2016

Programme Bachelor en
Management

ESC Toulouse

2013

Baccalauréat Scientifique

Lycée Bernard Palissy (Agen)

2008

Page

38

DOSSIER PROFESSIONNEL-Version du 11/09/2017

DOSSIER PROFESSIONNEL (DP)

Déclaration sur l’honneur

Je soussigné Laurent Séraline, déclare sur l’honneur que les renseignements fournis dans ce
dossier sont exacts et que je suis l’auteur des réalisations jointes.

Fait à Agen le 27/08/2021 pour faire valoir ce que de droit.

Signature :

DOSSIER PROFESSIONNEL-Version Traitement de texte – Version du 11/09/2017

Page

39



Sur le même sujet..

---