DP Alexis Carrere

DOSSIER PROFESSIONNEL (DP)
Nom de naissance ► Carrere

Nom d’usage ► Carrere
Prénom ► Alexis
Adresse ► 175 Traverse de la Marine
13600, La Ciotat
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 du 11/09/2017 Page 29

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 ;
► 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 ;
► une déclaration sur l’honneur à compléter et à signer ;
► des documents illustrant la pratique professionnelle du candidat (facultatif)
► des annexes, si nécessaire.
Pour compléter ce dossier, le candidat dispose d’un site web en accès libre sur le site.
◢ http://travail-emploi.gouv.fr/titres-professionnels
Page 30 DOSSIER PROFESSIONNEL-Version du

11/09/2017
◢
Sommaire
Exemples de pratique professionnelle
Activité-type 1 : Développer la partie front-end d’une application web ou web mobile

en intégrant les recommandations de sécurité. p. 5
► CP 1 Maquetter une application. p. p. 5
► CP 2 Réaliser une interface statique et adaptable. p. p. 8
► CP 3 Développer une interface utilisateur web dynamique. p p. 11
Intitulé de l’activité-type n° 2 p. 14
► CP 5 Créer une base de données. p. p. 14
► CP 6 Développer les composants d’accès aux données. p. p. 17
► CP 7 Développer la partie back-end d’une application web ou web mobile. p p. 22
Titres, diplômes, CQP, attestations de formation (facultatif) p. 27
Déclaration sur l’honneur p. 28
Documents illustrant la pratique professionnelle (facultatif) p. 29

EXEMPLES DE PRATIQUE
PROFESSIONNELLE

11/09/2017
◢
Développer la partie front-end d’une application web ou web mobile en

Activité-type 1 intégrant les recommandations de sécurité.
CP 1 ► Maquetter une application.
1. Décrivez les tâches ou opérations que vous avez effectuées, et dans quelles conditions :
Avant de commencer un projet, il faut savoir à quoi nous voulons faire ressembler notre interface. Pour
ce faire, nous réalisons des sortes de schémas commentés appelés Wireframes.
On « dessine » ainsi un plan grossier de notre future interface en se basant sur le cahier des charges et
les demandes du client.
Lors d’un projet de ma formation, nous devions ainsi maquetter le site d’une boutique en ligne de
chaussures. Je présenterai ici la version mobile et la version desktop.
Version Mobile

Version desktop.
2. Précisez les moyens utilisés :
Je me suis servi du site whimsical.com, un site gratuit qui met à disposition des bibliothèques de format
et des formes, très pratique pour nos wireframes.
3. Avec qui avez-vous travaillé ?
J’ai travaillé seul sur ces wireframes.

11/09/2017
◢
4. Contexte
Nom de l’entreprise, organisme ou association ► O’Clock
Chantier, atelier, service ► Formation
Période d’exercice ► Du :18/11/2019 au : 06/05/2020
5. Informations complémentaires (facultatif)

CP 2 ► Réaliser une interface web statique et adaptable.
Quand on réalise une application web, il faut penser à tous les moyens d’y accéder. Par exemple, un
ordinateur de bureau avec un grand écran ? Une tablette de taille moyenne ? Sur téléphone ? Il est donc
nécessaire d’imaginer plusieurs formes d’affichage tout en ayant les mêmes contenus ?
On parle donc de conception « responsive ».

Ici, par exemple, pour notre projet de site de vente de chaussures :
Ci-dessus notre version desktop. On remarque que le menu est apparent et que chaque image est agencée
pour permettre une lecture confortable.

11/09/2017
◢
Ci-dessus notre version mobile. On peut ici remarquer que le menu est caché ou affiché grâce à
l’utilisation d’un menu burger et au bon vouloir de l’utilisateur. Les catégories sont affichées une par une
en faisant défiler l’écran.

Pour réaliser ce projet, j’ai utilisé la librairie Bootstrap qui permet de définir directement des Breakpoints
dans notre code grâce à des classes prédéfinies.
Ici un exemple du code utilisé :
Par défaut, nos composants sont affichés les uns en-dessous des autres. L’utilisation combinée des classes
“container-fluid” et “row” (lignes 2 et 3) permet de définir que l’affichage sera responsive. La classe “col-
md-6” (lignes 4 et 14) indique que les éléments ciblés doivent occuper la moitié de l’espace disponible (6
colonnes sur les 12 prédéfinies) à partir d’une largeur de 768px (md signifie medium dans la librairie
Bootstrap). Ainsi, sur les petits écrans, l’affichage est restreint sur une seule colonne, mais si on dispose
d’un écran de taille tablette ou plus, ces composants seront affichés côte-à-côte.
J’ai travaillé seul.
4. Contexte
Période d’exercice ► Du : 18/11/2019 au : 06/05/2020

11/09/2017
◢

CP 3 ► Développer une interface utilisateur web dynamique.
Pendant ma formation, un exercice était de créer une page web affichant un dessin réalisé en pixel-art
dont la taille est modifiable par l’utilisateur.
Au chargement de la page, un dessin est affiché. L’utilisateur peut changer de dessin en cliquant sur le
dessin désiré grâce à des boutons au dessus du dessin.
Les dessins sont générés en html par un script javascript qui lit un fichier contenant nos modèles JS.

L’utilisateur peut également mofidifier la taille du dessin grâce à une scroll bar présente au dessus. Voici
un exemple pour la taille maximale :
Ceci se fait grâce à la fonction ci-dessous, qui crée une valeur pixelsize selon le range choisi qui renvoie
ensuite cette valeur à la fonction updateContainerWidth().

11/09/2017
◢
Ici la fonction updateContainerWidth se sert de la valeur récupérée pour grossir le style du dessin.
Cet exercice a été réalisé en HTML, CSS et JavaScript.
4. Contexte

Développer la partie back-end d’une application web ou web
Activité-type 2 mobile en intégrant les recommandations de sécurité.
CP 5 ► Créer une base de données.
Lors d’un projet réalisé durant le mois de spécialité de ma formation, j’ai eu à réaliser un site de type
imdb.com, détaillant plusieurs films et explicitant leurs acteurs et genres.
Tout d’abord, j’ai défini les entités dans symfony (qui se convertiront en table dans la BDD) :
- Actor (Role, creditOrder)

- Department (name, createdAt, updatedAt, jobs)
- Employment (movie, person, createdAt, updatedAt)
- Genre (name, createdAt, updatedAt, movies)
- Job (name, createdAt, updatedAt, department)
- Movie (title, createdAt, updatedAt, genres, employees)
- Person (name, createdAt, updatedAt, emploments)
- User (email, roles, password)
Il fallait ensuite définir nos associations entre les tables et définir le nombre d’occurrences pouvant être
concernées par chaque relation (cardinalités sur notre MCD). Par exemple :
Un film peut posséder plusieurs genres et un genre peut avoir plusieurs films => ManyToMany.
Une personne peut travailler sur aucun film ou un seul (0,N), mais un contrat est toujours pour une
seule personne et une seule(1,1) => OneToMany
Un Job correspond à un Departement et un Departement peut avoir plusieurs Jobs => ManyToOne.
J’ai ensuite exécuté les commandes intégrées au framework Symfony pour générer la base de données
dans le langage SQL. Ci-dessous, le MPD (Modèle Physique de Données) que l’on peut visualiser dans le
gestionnaire PHPMyAdmin après génération.

11/09/2017
◢
La génération de la BDD a été faite via Doctrine/Symfony.

4. Contexte

11/09/2017
◢

CP 6 ► Développer les composants d’accès aux données.
Sur un projet de foire aux questions, après la réalisation de notre base de données il nous a fallu
développer les composants d’accès à ces données, à l’aide du framework Symfony et Doctrine.
En php, pour communiquer avec la BDD, on utilise des classes natives PDO (PHP Data Objects) et
pdoStatement. Ces classes permettent respectivement une connexion à la BDD et une interaction avec
les données.
Avec Doctrine de Symfony, la connexion à la BDD est réalisée par un composant nommé DBAL
(Database Abstract Layer) qui s’appuie sur PDO.
Pour utiliser l’ORM Doctrine, on annote notre entité :

Pour récupérer les données en base, il faut passer par le repository. Ici nous utilisons le query builder
de Doctrine, une autre classe de Doctrine qui permet la génération de requêtes en utilisant un langage
proche de SQL : DQL (Doctrine Query Language).

11/09/2017
◢
Le repository est une classe, on peut donc l’instancier et utiliser ses méthodes à volonté. Dans un
controller, l’utilisation de ces méthodes permet de récupérer des informations précisément selon le
besoin et de renvoyer ces données à la vue.

Le fichier de vue associé utilise ensuite le tableau d’objets mis à disposition par la méthode render() du
controller pour afficher les données dans leur contexte.
Symfony, Doctrine, Twig.

11/09/2017
◢
4. Contexte
Période d’exercice ► Du :18/11/2019 au : 06/05/2020

CP 7 ► Développer la partie back-end d’une application web ou web mobile.
Pour notre projet explicité en CP5, il était demandé de réaliser un Back-Office accessible uniquement
aux utilisateurs disposant du rôle Admin, permettant d’ajouter, de lire, de modifier ou de supprimer un
film ou utilisateur (CRUD).
Pour différencier nos utilisateurs, un rôle leur est donné (entity User). Ainsi, un utilisateur avec le rôle
Admin pourra accéder au Back-Office et interagir avec les données, tandis qu’un simple user ne pourra
que consulter nos différents films. Un rôle User est automatiquement défini dès la création du compte
et ce rôle est modifiable plus tard par un Admin.
Premièrement, pour restreindre l’accès du Back-Office, j’ai configuré le fichier security.yaml pour
n’autoriser que les Admin sur nos routes commençant par /admin :
Ainsi avec nos routes définies dans nos Controllers, certaines ne seront accessibles qu’avec le bon rôle.
Pour illustrer la démonstration du CRUD, concentrons nous sur notre Controller MovieController :

11/09/2017
◢
Ci-dessus, afin de gérer le formulaire présent sur la page, j’instancie un nouvel objet Movie et le
transmet à la méthode createForm(). Cette méthode utilise une classe MovieType qui définit les champs
disponibles dans le formulaire et les lie directement à l’objet Movie créé précédemment en utilisant la
méthode handleRequest(). Si le formulaire est soumis, les données présentes dans l’objet request sont
récupérées, permettant au composant EntityManagerInterface de Doctrine de gérer la persistance des
données avec persist(), puis de faire les enregistrements en base avec flush(). De son côté, la méthode
isValid() aura au préalable vérifié que les valeurs entrées dans le formulaire sont suffisantes et
compatibles avec l’entité Casting. Si tout se passe correctement, un message flash est ajouté à l’objet
session et l’utilisateur est redirigé sur la page browse, qui est une liste de tous les films présents sur la
BDD :

Pour éditer un film, la méthode reste sensiblement identique à la méthode add
:

11/09/2017
◢
Ici, les seuls changements sont que nous n’avons plus besoin de persister notre film, celui ci étant déjà
en BDD, et que la donnée updatedAt est mise à jour.
Enfin, pour la méthode Delete, l’EntityManagerInterface s’occupe de supprimer l’entrée en BDD grâce
aux méthodes Remove et Flush:
Symfony, Doctrine, Twig.
4. Contexte


11/09/2017
◢
Titres, diplômes, CQP, attestations de formation

(facultatif)
Intitulé Autorité ou organisme Date

Cliquez ici pour
Cliquez ici. Cliquez ici pour taper du texte.
sélectionner une date.

Déclaration sur l’honneur
Je soussigné Alexis Carrere ,
déclare sur l’honneur que les renseignements fournis dans ce dossier sont exacts et que je
suis l’auteur(e) des réalisations jointes.
Fait à La Ciotat le 05/08/2020
pour faire valoir ce que de droit.
Signature :

11/09/2017
◢
Documents illustrant la pratique professionnelle

(facultatif)
Intitulé
Cliquez ici pour taper du texte.

DP Alexis Carrere

Transféré par

Droits d'auteur :

Formats disponibles

DP Alexis Carrere

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

DP Alexis Carrere

Transféré par

Droits d'auteur :

Formats disponibles

DOSSIER PROFESSIONNEL (DP)

Nom de naissance ► Carrere

Titre professionnel visé

DOSSIER PROFESSIONNEL-Version du 11/09/2017 Page 29

Pour prendre sa décision, le jury dispose :

4. de l’entretien final (dans le cadre de la session titre).

Page 30 DOSSIER PROFESSIONNEL-Version du

Activité-type 1 : Développer la partie front-end d’une application web ou web mobile

► CP 1 Maquetter une application. p. p. 5

► CP 2 Réaliser une interface statique et adaptable. p. p. 8

► CP 3 Développer une interface utilisateur web dynamique. p p. 11

► CP 5 Créer une base de données. p. p. 14

► CP 6 Développer les composants d’accès aux données. p. p. 17

► CP 7 Développer la partie back-end d’une application web ou web mobile. p p. 22

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

Déclaration sur l’honneur p. 28

Documents illustrant la pratique professionnelle (facultatif) p. 29

DOSSIER PROFESSIONNEL-Version du 11/09/2017 Page 29

Page 30 DOSSIER PROFESSIONNEL-Version du

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

CP 1 ► Maquetter une application.

DOSSIER PROFESSIONNEL-Version du 11/09/2017 Page 29

2. Précisez les moyens utilisés :

3. Avec qui avez-vous travaillé ?

J’ai travaillé seul sur ces wireframes.

Page 30 DOSSIER PROFESSIONNEL-Version du

Chantier, atelier, service ► Formation

Période d’exercice ► Du :18/11/2019 au : 06/05/2020

5. Informations complémentaires (facultatif)

DOSSIER PROFESSIONNEL-Version du 11/09/2017 Page 29

CP 2 ► Réaliser une interface web statique et adaptable.

On parle donc de conception « responsive ».

Page 30 DOSSIER PROFESSIONNEL-Version du

DOSSIER PROFESSIONNEL-Version du 11/09/2017 Page 29

Ici un exemple du code utilisé :

3. Avec qui avez-vous travaillé ?

J’ai travaillé seul.

Chantier, atelier, service ► Formation

Période d’exercice ► Du : 18/11/2019 au : 06/05/2020

5. Informations complémentaires (facultatif)

Page 30 DOSSIER PROFESSIONNEL-Version du

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

CP 3 ► Développer une interface utilisateur web dynamique.

DOSSIER PROFESSIONNEL-Version du 11/09/2017 Page 29

Page 30 DOSSIER PROFESSIONNEL-Version du

2. Précisez les moyens utilisés :

Cet exercice a été réalisé en HTML, CSS et JavaScript.

3. Avec qui avez-vous travaillé ?

J’ai travaillé seul.

Chantier, atelier, service ► Formation

Période d’exercice ► Du : 18/11/2019 au : 06/05/2020

5. Informations complémentaires (facultatif)

DOSSIER PROFESSIONNEL-Version du 11/09/2017 Page 29

- Actor (Role, creditOrder)

Page 30 DOSSIER PROFESSIONNEL-Version du

2. Précisez les moyens utilisés :

La génération de la BDD a été faite via Doctrine/Symfony.

3. Avec qui avez-vous travaillé ?

J’ai travaillé seul.

DOSSIER PROFESSIONNEL-Version du 11/09/2017 Page 29