DOSSIER PROFESSIONNEL (DP)

Nom de naissance  CIOBANU

Nom d’usage  Ciobanu
Prénom  Vladislav
Adresse  15 rue du Général Faidherbe, 94130 Nogent sur Marne


Titre professionnel visé

Développeur web et web mobile

MODALITE D’ACCES :

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

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 ;
 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

2
 DOSSIER PROFESSIONNEL (DP)


Sommaire
Exemples de pratique professionnelle

Intitulé de l’activité-type n° 1 Développer la partie front-end d’une application

web en intégrant les recommandations de sécurité (Projet n°1 – Projet fait en p. 6
formation)

 Présentation du projet .......................................................................................................................

p. 6 p.

 Gestion du projet ................................................................................................................................

p. 6 p.

 La rédaction d’un cahier des charges ..................................................................................................

p. 7 p

 L’arborescence du site et le wireframe................................................................................................

p. 9 p.

 Maquetter une application ..................................................................................................................

p. 9 p.

 Réaliser une interface utilisateur web statique et adaptable ............................................................

p. 11 p.

 Développer une interface utilisateur web dynamique ......................................................................

p. 12 p.

 La phase de tests ..................................................................................................................................

p. 13 p.

Intitulé de l’activité-type n° 2 Développer la partie back-end d’une application

web en intégrant les recommandations de sécurité (Projet n°1 – Projet fait en p. 15
formation)

 Etablir les besoins.................................................................................................................................

p. 15 p.

 Conception et création d’une base de données ................................................................................

p. 15 p.

 L’architecture MVC et la Programmation Orientée Objet ....................................................................

p. 16 p

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

p. 17 p

 Développer la partie back-end d’une application web .........................................................................

p. 18 p

 La cybersécurité ....................................................................................................................................
p. 23 p

 La cybersécurité ....................................................................................................................................
p. 23 p

3
 DOSSIER PROFESSIONNEL (DP)


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

p.
Déclaration sur l’honneur 27
p.
Documents illustrant la pratique professionnelle (facultatif)
p.
Annexes (Si le RC le prévoit) 29
p.

4
 DOSSIER PROFESSIONNEL (DP)


EXEMPLES DE PRATIQUE
PROFESSIONNELLE

5
 DOSSIER PROFESSIONNEL (DP)


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

Activité-type 1 intégrant les recommandations de sécurité
Exemple n°1  Projet n°1 – Projet fait en formation

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

Présentation du projet (vue globale)

C’est dans le cadre de ma formation à l’AFPA Créteil et durant la période de stage, j’ai préparé le projet
d’un site web pour un blog des articles de textes et images. Dans le but de mieux maitriser les langages de
programmation (PHP, JavaScript,) on a décidé avec mon formateur Mr Harouna KANE de faire un projet
web. Le projet se décompose en plusieurs étapes :
 La mise en place d’un cahier de charges
 La visualisation du projet avec le zoning et les maquettes
 La rédaction des spécifications techniques et fonctionnelles
 Le développement web
 La phase de test
 Les évolutions potentielles.
Il s’agit d’un blog pour présenter l’activité d’une association sportive.
 Société : Chess Team Nogent sur Marne.
 Projet : Diffuser les articles des membres de l’association.
 Sujet : Création d’un site web dynamique en HTML, CSS, PHP, JavaScript.
 Contexte : Une association des joueurs d’échecs.
 Raison Sociale : Chess Team.
 Adresse : 15 rue Général Faidherbe, 94130 Nogent sur Marne, France.
 Mission : L’association rassemble les joueurs d’échecs de tout âge.
 Objectifs : Créer un site web moderne et fonctionnel.

Gestion du projet
Dans le cadre de la gestion du projet, j’ai participé aux réunions d’avancement hebdomadaires
avec mon formateur. J’ai présenté mon travail et récupéré toutes les remarques et demandes
d’évolutions qui m’ont été faites à chaque étape du projet :
o Consultation et cadrage
o Conception graphique et fonctionnelle
o Intégration HTML/CSS
o Développement et interactivité
o Contenu éditorial

6
 DOSSIER PROFESSIONNEL (DP)


La rédaction d’un cahier des charges fonctionnel

J’ai été en charge de la réalisation d’un cahier des charges fonctionnel et technique.
 Les contraintes d’accessibilité :
Le site web doit être conforme aux exigences et aux recommandations de WCAG, niveau A
et fournir un contenu : perceptible, utilisable, compréhensible et robuste.
 Les attentes en termes de référencement naturel :
 La sélection des mots-clés, d’un champ lexical différent et une sémantique de mots
différente.
 L’optimisation pour les mobiles, le responsive web design.
 Améliorer l’expérience utilisateur avec la conception « mobile first » en élaborant
une interface ergonomique.
 L’utilisation des balises méta pour montrer les détails du site : la langue française,
l’encodage utf-8, titre, description et l'auteur de l’article du blog, etc.
 La présence sur les réseaux sociaux : Facebook, Twitter, Instagram, Youtube.

 Autres contraintes globales.

 Champs demandés obligatoirement
o Login : minimum 6, maximum 10 lettres (userName)
o E-mail: maximum 20 lettres (email)
o Mot de passe : minimum 6, maximum 10 lettres (password)
o Images catégorie, article, internaute : taille maximum 2 Mo
 Présentation des différents publics.
Le site s’adresse à toutes les personnes passionnées de jeux d’échecs ou ceux qui veulent
apprendre.
L’application permet de gérer 3 profils (Administrateur, Membre, Visiteur). Chaque profil
aura des droits spécifiques. Ces droits sont définis de manière fixe et ne sont pas
configurables. (voir Annexe, Tableau 1)
 L’arborescence des pages du site web.
 Le site doit avoir un dispositif de navigation simple et intuitif.
 Un menu secondaire apparait au survol du menu principal.
 Pied de page, avec un accès aux principales catégories du site et à des pages clés.

1. Les spécifications du projet.

 Les spécifications fonctionnelles.

7
 DOSSIER PROFESSIONNEL (DP)


o Responsive design du site.

o Le menu de navigation sera disposé en hauteur plutôt qu’en largeur, les liens
seront écrits en plus petit et on va retirer la bordure en bas des liens lors du survol,
car elle est moins adaptée à cette disposition. Menu burger.
o La bannière sera supprimée, car elle prend beaucoup de place et n’apporte pas
beaucoup d’informations.
o Afficher verticalement des sections, articles, etc. au lieu de les afficher côte à côte
horizontalement. Ce type de disposition « de haut en bas » est plus adapté aux
petits écrans.
o Le logo de l’Association sera placé en haut à gauche de la page.

o Les pages sont regroupées par familles thématiques. Pour cela on utilise un
« template » ou gabarit pour :
 Les pages d’accueil, lister les catégories, les articles et les commentaires.
 Les formulaires d’inscription, connexion.
 Les pages des questions et mentions légales (on utilise le « framework Bootstrap »).

La liste des catégories s’affiche au survol de la souris, dans la barre de navigation.

Le menu « accordéon » contient l’adresse de l’association, les liens sur les réseaux
sociaux, CGU. Si c’est un membre connecté, on lui affiche le bouton de déconnexion, si non, c’est
un lien vers https://chess.com.
Sur la page d’accueil ( template Accueil) se trouve :
o Un « slider » d’images avec un effet carrousel. Il contient des images, les titres des
articles les plus récentes, ainsi que leurs descriptions.
o Un bloc de page avec le top article.
o Une section avec les actualités et les informations du site.
Pour les membres et les visiteurs, la page Catégorie (template Formulaire ) contient la
liste des catégories des articles, ainsi que deux sections avec les top articles et les actualités du
site. Pour les administrateurs cette page affiche la liste des catégories et le formulaire pour créer
une autre. La page Articles liste tous les articles du blog. Chaque article contient :
 L’auteur de l’article,
 La date de création,
 La catégorie,
 La description,
 Les boutons « voir l’article », « lire la suite », « commentaires ».
La page Membre permet de changer l’image de l’avatar dynamiquement, lorsqu’on vient
de la modiffiée.

8
 DOSSIER PROFESSIONNEL (DP)


L’arborescence du site et le wireframe

 En prenant l’exemple de la connexion j’ai développé le dispositif de navigation sur le site,

lorsqu’il y arrive un visiteur. (voir Annexe, Tableau 4)
 La conception graphique du projet est faite par moi-même. Je me suis inspiré des sites :
https://chess.com ;
https://parisaeorport.fr;
https://html5up.net/minimaxing;
 Pour la hiérarchie du site, dans la navigation j’ai mis les pages Accueil, Articles, Membres,
Connexion, Inscription, Déconnexion, en rapport avec les droits spécifiques des
internautes (Admin, Membre, Visiteur). Il y a également les pages satellites (Conditions
d’utilisation, Mentions légales, Réseaux Sociaux).

 Le « wireframing » est une étape importante dans la création du site web sur mesure, et
consiste à concevoir la maquette fonctionnelle. J’ai utilisé le site gratuit
https://mockflow.com pour concevoir la maquette ergonomique. (voir Annexe, Tableau
5)

Maquetter une application

J’ai manqué d’inspiration et j’ai fallu aller chercher des idées de design. Dès le départ j’ai
construit le squelette de mon site avec une architecture bien précise. Toutes mes pages sont en
PHP, mais ça ne m’empêche pas d’écrire du HTML. Pour mettre en forme j’ai conçu une feuille de
style « style.css » dans un dossier « css » à part.
Je trouve que la meilleure façon de travailler avec les « boites » d’une page c’est le
FlexBox. Je défini un conteneur et à l’intérieur je place plusieurs éléments. Ensuite je peux faire
l’agencement, l’alignement, le centrage, et d’autres techniques de mise en page. Les propriétés
« display » et « position » sont très utiles.

J’ai téléchargé depuis le site :

 https://html5up.net/minimaxing, les images, les couleurs du fond d’écran, pour créer mes
templates. (voir Annexe, Tableau 6). Voici un script où j’ai utilisé l’image de fond :

9
 DOSSIER PROFESSIONNEL (DP)


 https://unsplash.com, des images sous licence libre pour le contenu du site.

 https://icomoon.io, des petits icones pour les liens des réseaux sociaux.
 https://www.fontsquirrel.com/, les polices de caractère « AlexBrush », « ClearSans », « rubik »,
« kaushan-script », en plusieurs formats . Voici un exemple dans la feuille « style.css » :

Le principe du « template » est de séparer le code PHP de la mise en page HTML, le code PHP
dans un fichier, la mise en page contenant les balises HTML dans un autre fichier.
Chacun contient 3 blocs : HEADER, BODY, FOOTER. (voir Annexe, Tableau 2).
Dans le HEADER on retrouve le logo, la barre de NAVIGATION, l’image du visiteur et le
message de salut pour les membres connectés. Il sera mis à jour lors des connexions,
déconnexion.
La NAVIGATION sera mise à jour en fonction des droits de l’utilisateur.
Le FOOTER contient un menu déroulant « accordéon » avec les FAQ, CGU et le Copyright.
Le BODY se charge d’accueillir tout le reste du contenu de la page web. Il sera mis à jour en
fonction de la NAVIGATION.
J’ai rajouté deux blocs « ASIDE » dans le template Formulaire pour enrichir l’expérience
utilisateur sur les pages concernées : Connexion, Inscription, Liste de Catégories (voir Annexe ,
Tableau 3)

10
 DOSSIER PROFESSIONNEL (DP)


Réaliser une interface utilisateur web statique et adaptable

Après qu’on a distingué les principales balises structurantes comme « header », « footer »,
« nav », « section », « article » j’ai commencé à découper la maquette en sections. J’ai utilisé CSS
pour avoir un rendu le plus proche possible de la maquette, en ajoutant image de fond, police
personnalisée, couleur de texte. Pour le centrage de la page et d’autre dimensions j’ai utilisé
plutôt les pourcentages « % » et « em » .
J’ai utilisé la propriété « text-transform » avec la « valeur » uppercase , pour que le login
du membre, les noms catégories soient en majuscules.
Le sélécteur « article » est en display flex, donc il est libre à être déplacé dans tous les
sens, mais par défaut il est agencé horizontalement. La propriété :
 Flex-direction avec la valeur column , organise l’agencement en colonne.
 Justify-content : center , aligne le contenu de l’élément « article » au centre
duconteneur, par rapport à l’axe principale(verticale dans notre cas).
 Align-items : center , aligne le contenu au centre par rapport à l’axe
secondaire(horizontale).
 Border : taille de la bordure 10pixels, représenté par une ligne blanche continue.
 Border-radius : on a arrondi chaque courbure de chaque coin en mettant un arc de
cercle de 20px.
 Width : 100% , signifie que l’élément « article » s’étire sur toute la largeur du
conteneur.
 Height : on a définit la hauteur fixe de 700px.
 Max-width : on a définit la largeur maximale 700px.
 User-select : none , signifie qu’on ne pourra pas sélectionner le texte de l'élément
et celui de ses descendants.
Voici l’exemple :

11
 DOSSIER PROFESSIONNEL (DP)


Réaliser une interface utilisateur web dynamique et adaptable

J’ai utilisé le HTML, CSS et JavaScript pour concevoir les pages, en respectant les principes
du web responsive design, c’est-à-dire que le format des pages du site est automatiquement
redimensionné pour s’adapter à la taille de l’écran de l’appareil utilisé.
Pour cela j’ai ajouté des requêtes « Media Queries ». Ces fonctions me permettent de
choisir la fourchette des tailles d’écran (pc, tablettes, smartphone). Voici les feuilles de styles :

J’ai choisi d’appliquer les règles à mes requêtes pour tous les écrans en dessous de 1024 pixels.
Afin de factoriser le code j’ai regroupé les sélecteurs, ce qui contient les mêmes valeurs, en les
séparant par une virgule. Voici un exemple :

12
 DOSSIER PROFESSIONNEL (DP)


Lorsque la taille d’écran atteint cette dimension :

 Apparition d’un « menu hamburger » qui remplace la barre de navigation.
 Diminution de la taille de police, des images.
 Le carrousel disparait.
Justement, si on regarde dans l’image la - dessus, on remarque
que le sélecteur « article » a une seule « propriété » avec la « valeur » none. Cela correspond à la
disparition de l’écran à tous les éléments contenus dans « article », plus précis le carrousel.
Ensuite on voit la suite des changements effectués pour la barre de navigation, image du logo,
photo membre, etc.

La phase de test
Pour obtenir un bon résultat en ce qui concerne le web responsive design, j’ai travaillé avec des
navigateurs différents et avec des tailles d’écrans différents. J’ai téléchargé le fichier
« normalize.css » et je l’ai ajouté dans le dossier CSS pour avoir moins de soucis. J’ai réussi à
agencer le contenu de la page jusqu’à la taille d’écran du Iphone 5/SE (1136x640 px à 326 ppi).
Ensuite j’ai vérifié le code :
 HTML - dans le validateur du W3C (https://validator.w3.org/).
 CSS – dans le validateur (https://jigsaw.w3.org/css-validator/).
J’ai vérifié que :
- Tous mes textes soient dans les balises <p></p>
- La balise <br> soit à l’intérieur du <p></p>
- Les images comportent l’attribut alt
- Remplacement des liens & avec &amp ; pour éviter toute confusion au navigateur.

13
 DOSSIER PROFESSIONNEL (DP)


2. Précisez les moyens utilisés :

Pour ce projet j’ai utilisé les ressources suivantes :

- Visual Studio Code (éditeur de texte),
- PhpStorm (IDE),
- NetBeans(IDE),
- Microsoft Office (Excel, PowerPoint, Word, Paint),
- HTML5; CSS3; Bootstrap4; JavaScript; jQuery
- WampServer
- GoogleChrome, Mozilla Firefox, Firefox Developer Edition, Microsoft Edge
- https://openclassrooms.com/fr/ ; https://developer.mozilla.org/;
- https://cssreference.io/; https://htmlreference.io/

3. Avec qui avez-vous travaillé ?

M. Harouna Kane, Développeur d'Applications Informatiques - SQL - JAVA – PHP, formateur à

AFPA de Créteil

4. Contexte

Nom de l’entreprise, organisme ou association  AFPA

Chantier, atelier, service  Centre Créteil – Formation Développeur Web et Web Mobile

Période d’exercice  Du 29/04/2019 au 13/12/2019

14
 DOSSIER PROFESSIONNEL (DP)


Développer la partie back-end d’une application web en intégrant

Activité-type 2 les recommandations de sécurité
Exemple n°1  Projet n°1 – Projet fait en formation

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

Etablir les besoins

Lors du développement du projet de création d’un blog pour une association des joueurs
d’échecs, j’ai été amené à concevoir les fonctionnalités pour l’administration du site. Il s’agit de la
partie non visible pour le visiteur, où j’ai passé la plupart du temps pour faire en sorte que le site
fonctionne.
Le BackOffice doit être accessible uniquement si l’internaute est administrateur. Dans la base de
données il a un statut différent des autres membres. C’est celui qui va gérer les informations
sensibles des membres, actualiser, modifier, supprimer des catégories, des articles et / ou des
commentaires. (voir Annexe, Tableau 1)
Une fois la mission FRONT-END accomplie, on passe aux choses plus sérieuses. On a vue dans la
partie précédente que notre site est conçu en PHP. C’est un langage très puissant qui permet de
monter des gros projets. C’est pour ça que j’ai décidé d’adopter dès le début l’architecture MVC
et POO.
Conception et création d’une base de données
Avant de commencer à coder, il faut absolument concevoir l’endroit où on va stocker les
données et ensuite pouvoir les récupérer à l’aide du langage SQL. (Voir Annexe , Tableau 7)

J’ai décidé de créer 4 tables (Users, Articles, Category, Comments) :

 Cat_author de Category fait référence à id_user de Users.
 Art_author de Articles fait référence à id_user de Users.
 Category_id de Articles fait référence à id de Category.
 Article_id de Comments fait référence à id de Articles.
Chaque table contienne un identifiant qui s’incrémente à chaque nouvelle entrée des données.
J’ai choisi le moteur de stockage InnoDB qui permet des transactions ACID(atomiques, cohérence,
isolées, durables), ainsi que la gestion des clés étrangères(avec la vérification de cohérence).
J’ai établie le nombre de caractères admises dans la BDD pour email = 30, password = 255 (on
hache le mot de passse avec la fonction password_hash()) ;
user_image/art_image/category/image = 40 (on rajoute un code unique à l’image avec la
fonction uniqid()).

15
 DOSSIER PROFESSIONNEL (DP)


L’architecture MVC et la Programmation Orientée Objet

Les avantages de la programmation orientée objet sont multiples :
1. Organisation du code (les classes).
2. Sécurité du code (l’encapsulation).
3. Réutilisation du code (l’héritage).
4. Contrôle : classes abstraites et interfaces.
5. Abstraction et polymorphisme.
Une architecture ("models", "views", "controllers") a été défini. Voici l’arborescence des fichiers
en MVC et capture d’écran du fichier index.php.

J’ai créé un routeur qui permet la transformation d'une url en route interne, et ainsi permet
d'identifier le controller à utiliser ensuite.
Le modèle définit les données utilisées par l’application. En effet, c’est ici que le lien se fera entre
notre application et la base de données.

16
 DOSSIER PROFESSIONNEL (DP)


La vue définit la façon dont les informations seront affichées à l’écran. Il s’agit de l’interface
utilisateur. C’est ici qu’on utilisera les données récupérées par le modèle afin de les présenter à
l'utilisateur.
Dans le contrôleur, nous retrouvons toute la logique du métier. En effet, lorsque l’utilisateur
interagit avec la vue, la requête est traitée par le contrôleur. Il fonctionne comme un "listener",
c'est-à-dire qu'il attend que l'utilisateur interagisse avec la vue pour en récupérer la requête.
Ainsi, c’est le contrôleur qui définira la logique d’affichage, et affichera la vue suivante à l’écran.
Notre fichier index.php se trouve à la racine du site. On déclare tout en haut l’ouverture d’une
session. Ensuite j’ai mis en œuvre un chargeur de classes anonymes. Il va chercher le require que
si j'instancie la classe, ou une classe mère par héritage.

Ensuite on appelle les contrôleurs el les models. Puis notre code passe dans une instruction try /
cath qui regroupe des instructions à exécuter et définit une réponse si l'une de ces instructions
provoque une exception. C’est indispensable dans la POO d’avoir cet instrument pour récupérer
toutes les erreurs du site dans un seul endroit et d’éviter le pire.

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

J’ai effectué le développement des composants à partir d’un environnement de

développement intégré supportant un langage objet en liaison avec une base de données
relationnelle. Pour accéder aux données j’ai utilisé un logiciel d’interface (middleware). J’ai
travaillé en local, sur le WampServeur, avec le serveur Apache2, le phpMyAdmin4, MySQL5 et
PHP7.
Pour que le membre puisse modifier ses données, il doit se rendre sur la page « Mon
Compte ». D’abord il consulte ses informations disponibles : login, email, photo. Le mot de passe
est haché, et en plus caché dans un input type password readonly.
Ensuite il peut modifier se données personnelles dans le formulaire respectif, à condition
de mettre une image et un mot de passe.
Une fois appuyé sur le bouton modifier, la variable superglobale crée $_POST passe dans
le controllerFRONTEND. On fait les traitements, la validation des données, le hachage, du mot de
passe, l’enregistrement de la photo. Au niveau de la requête préparée tous nos données sont en
sécurité. Ensuite j’ai mis une condition pour l’administrateur lorsqu’il procède à modifier son
profil ou le profil des autres. Voici l’exemple ci – dessous :

17
 DOSSIER PROFESSIONNEL (DP)


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

Fonctionnalité : La vue

Template Accueil
Sur toute mes vues j’aurai besoin d’un header et d’un footer au lieu de l’appeler sur toutes
les vues j’ai créé un template qui contient le header et le footer et aussi une variable ‘template’
qui correspond au contenu de la vue qui inclut le template.
Template Formulaires
J’ai mis en place un template pour les formulaires d’inscription et connexion. Il est composé
de la variable ‘template_form’ qui contient les vues, mais également il contient deux blocs ‘aside’
pour afficher du contenu texte et images.
Ensuite sur toutes les vues j’ai utilisé la fonction ‘ob_start()’ qui permet démarrer la
temporisation de et ‘ob_get_clean()’ qui permet d’effacer le contenu du premier tampon de
sortie et désactive la temporisation de sortie que j’attribue à ma variable
$template/$temlate_form.

18
 DOSSIER PROFESSIONNEL (DP)


Le model : La Database

Ensuite dans mon dossier model j’ai créé une classe Database.php qui me permet de me
connecter à la base de données en mode PDO dans laquelle j’ai rajouté des attributs pour gérer

19
 DOSSIER PROFESSIONNEL (DP)


les erreurs. Il s’agit de ATTR_ERRMODE qui émet une exception ERRMODE_EXCEPTION. Dans ce
cas on a entouré notre script avec un try /catch pour attraper l’erreur de la classe Exception,
qu’on puisse l’afficher dans la page qui gère les erreurs.

L’atribut ATTR_DEFAULT_FETCH_MODE est un gestionnaire de base de données, qui

permet dans notre cas de retourner un tableau associatif

MemberManager, CategoryManager,ArticleManager, CommentsManager

Ces 4 classes qui sont des classes filles et héritent de la classe Database sont chargées des
interactions avec la base de données.

20
 DOSSIER PROFESSIONNEL (DP)


A chaque fois que je veux créer, modifier, supprimer ou lire les données, je fais appel à
une fonction spécifique présente dans ces classes.
Voici un exemple de la classe MemberManager :

21
 DOSSIER PROFESSIONNEL (DP)


Les classes
J’ai créé une classe abstraite Generique contenant un constructeur prenant en paramètre
un tableau par défaut « null » et la méthode d’hydratation des données.
Les classes Users, Category, Article, Comment héritent de cette classe et contiennent les
accésseurs et les mutateurs (getter, setter). (voir Annexe, Tableau )

La cybersécurité
Comme j’ai travaillé en local, j’ai mis en oevre un fichier htaccess à la racine du dosier www, et
lorsque j’essaie d’inclure une page qui n’existe pas on affiche une PHP.
Ensuite j’ai écrit un fonction validate() pour la partie contrôle données des utilisateurs.

Tous les formulaires utilisent la méthode POST pour envoyer les données.
Je surveille de près les mis à jour des versions du PHP.
Si j’utilise le $_GET , d’abord je vérifie s’il existe if(isset($_GET)).

Utilisation de la langue anglaise

Durant ma formation, j’ai eu à plusieurs reprises affaire à des sites utilisant l’anglais et nécessitant
une traduction.
A titre d’illustration, lors de la gestion de version du mon code avec Git, j’ai dû rechercher des
informations pour savoir comment le configurer et enregistrer ma version sur mon compte
GitHub. J’ai utilisé le moteur de recherche Google sous Chrome et j’ai lancé une recherche avec
les mots-clés : « documentation git push». J’ai trouvé le lien sur le site « https://git-
scm.com/docs/git » :

22
 DOSSIER PROFESSIONNEL (DP)


NAME
git-push - Update remote refs along with associated objects

DESCRIPTION
Updates remote refs using local refs, while sending objects necessary to complete the given refs.

You can make interesting things happen to a repository every time you push into it, by setting
up hooks there. See documentation for git-receive-pack[1].

When the command line does not specify where to push with
the <repository> argument, branch.*.remote configuration for the current branch is consulted
to determine where to push. If the configuration is missing, it defaults to origin.
When the command line does not specify what to push with <refspec>... arguments or --all, --
mirror, --tags options, the command finds the default <refspec> by
consulting remote.*.push configuration, and if it is not found,
honors push.default configuration to decide what to push (See git-config[1] for the meaning
of push.default).
When neither the command-line nor the configuration specify what to push, the default behavior is
used, which corresponds to the simple value for push.default: the current branch is pushed to the
corresponding upstream branch, but as a safety measure, the push is aborted if the upstream branch
does not have the same name as the local one.

Traduction :
LE NOM
Git-push - Mettre à jour les dépôts distants avec les objets associés
LA DESCRIPTION
Met à jour des dépôts distants à l'aide des références locales, tout en envoyant les objets
nécessaires pour compléter les références données.
Vous pouvez faire en sorte que des choses intéressantes arrivent à un dépôt chaque fois que vous
y accédez, en y installant des hooks. Voir la documentation pour git-receive-pack[1].

23
 DOSSIER PROFESSIONNEL (DP)


Lorsque la ligne de commande ne spécifie pas où faire le « push » avec l'argument <repository>,
la configuration « branch. *.remote » de la branche actuelle est consultée pour déterminer où
faire le « push ». Si la configuration est manquante, elle revient par défaut à l'origine.
Lorsque la ligne de commande ne spécifie pas l’argument « <refspec>… » ou les options « --all, --
mirror, --tag » la commande trouve l’argument <refspec> par défaut en consultant la
configuration de « remote.* push » et s'il n'est pas trouvé, la configuration de « push.default » va
décider quoi faire (Voir git-config [1] pour la signification de « push.default »).
Lorsque ni la ligne de commande ni la configuration ne spécifient quoi pousser, le comportement
par défaut est utilisé, ce qui correspond à la valeur simple de « push.default » : la branche
courante est poussée vers la branche amont correspondante, mais par mesure de sécurité, la
poussée est abandonné si la branche amont n'a pas le même nom que la branche locale.

2. Précisez les moyens utilisés :

Pour ce projet j’ai utilisé les ressources suivantes :

- Visual Studio Code (éditeur de texte),
- PhpStorm (IDE),
- NetBeans(IDE),
- Microsoft Office (Excel, PowerPoint, Word, Paint),
- HTML5; CSS3; Bootstrap4; JavaScript; jQuery
- PHP7, APACHE2, phpMyAdmin4, MySQL5
- WampServer3
- GoogleChrome, Mozilla Firefox, Firefox Developer Edition, Microsoft Edge
- https://openclassrooms.com/fr/ ; https://developer.mozilla.org/;
- MySQL WorkBench; VisualParadigmEnterprise;
- https://sql.sh/; https://www.php.net/;

24
 DOSSIER PROFESSIONNEL (DP)


3. Avec qui avez-vous travaillé ?

M. Harouna Kane, Développeur d'Applications Informatiques - SQL - JAVA – PHP, formateur à

AFPA de Créteil

4. Contexte

Nom de l’entreprise, organisme ou association  Cliquez ici pour taper du texte.

Chantier, atelier, service  Centre Créteil – Formation Développeur Web et Web Mobile

Période d’exercice  Du 29/04/2019 au 13/12/2019

5. Informations complémentaires (facultatif)

Cliquez ici pour taper du texte.

25
 DOSSIER PROFESSIONNEL (DP)


Titres, diplômes, CQP, attestations de formation

(facultatif)

Pas de titre, diplôme, attestations de formation en rapport avec le titre visé

26
 DOSSIER PROFESSIONNEL (DP)


Déclaration sur l’honneur

Je soussigné ...............................................................................................................................
CIOBANU Vladislav ,

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 à .............................................................................
Nogent sur Marne le .........................................................
14/12/2019

pour faire valoir ce que de droit.

Signature :

27
 DOSSIER PROFESSIONNEL (DP)


Documents illustrant la pratique professionnelle

(facultatif)

Intitulé
Cliquez ici pour taper du texte.

28
 DOSSIER PROFESSIONNEL (DP)


ANNEXES
(Si le RC le prévoit)
Glossaire technique
AJAX
- AJAX est l’acronyme d'Asynchronous Javascript and XML. Il permet de construire des
applications Web et des sites web dynamiques interactifs sur les postes clients en se
servant de différentes technologies : JavaScript, CSS, JSON, XML, DOM. La combinaison
de ces technologies permet d'améliorer la maniabilité et le confort d'utilisation des
applications internet riches (abréviation RIA : Rich Interface Application).

Application web
- Une application web (aussi appelée web app de l’anglais) est une application manipulable grâce à
un navigateur web.

Composant (Source Wikipédia du 17/05/2016)

- Un composant logiciel est un élément de base d'un système informatique plus complexe dans
lequel les éléments sont organisés entre eux, rendent un service prédéfini et sont capables de
communiquer entre eux ainsi qu’avec d'autres composants extérieurs. La programmation orientée
composant a pris de l'ampleur avec le développement objet.

CRUD (Source Wikipédia du 21/12/2017)

- L'acronyme informatique anglais CRUD (pour create, read, update, delete) désigne les quatre
opérations de base pour la persistance des données, en particulier le stockage d'informations en
base de données. Plus généralement, il désigne les opérations permettant la gestion d'une
collection d'éléments.

CSRF (Source Wikipédia du 07/09/2017)

- En sécurité informatique, le Cross-Site Request Forgery est un type de vulnérabilité des services
d'authentification web. L’objet de cette attaque est de transmettre à un utilisateur authentifié une
requête HTTP falsifiée qui pointe sur une action interne au site, afin qu'il l'exécute sans en avoir
conscience et en utilisant ses propres droits.
-
DOM
- Document Object Model. Interface de programmation normalisée par le W3C permettant à des
scripts d'examiner et de modifier le contenu du navigateur web. Les objets DOM peuvent
représenter une fenêtre, un document, une phrase, un style…

ECMAScript
- ECMAScript est un ensemble de spécifications mises en oeuvre dans différents langages de script.
Ces spécifications sont standardisées par l’organisation ECMA International.

FAQ
- Frequently Asked Questions. Liste des questions les plus posées par les utilisateurs avec les
réponses associées. Évite l’engorgement des sites d’appel.

Feuille de style (Source Wikipédia du 31/12/2017)

- Les feuilles de style en cascade, généralement appelées CSS de l'anglais Cascading Style Sheets,
forment un langage informatique qui décrit la présentation des documents HTML et XML. Les

29
 DOSSIER PROFESSIONNEL (DP)


standards définissant CSS sont publiés par le World Wide Web Consortium (W3C).

Gabarit de mise en page

- Un gabarit de mise en page est un modèle de mise en page où l'on peut placer des images, du
texte, et tout autre contenu multimédia. Il permet de distinguer le fond, c’est à dire l’information, de
la forme, c’est-à-dire la présentation. Il agit comme un modèle dans lequel seuls certains éléments
sont modifiables.

HTTP (Source Wikipédia du 19/12/2017)

- HyperText Transfer Protocol, littéralement « protocole de transfert hypertexte » est un protocole de
communication client-serveur. Les clients HTTP les plus connus sont les navigateurs Web
permettant à un utilisateur d'accéder à un serveur contenant les données.

Interface utilisateur web (ou page web) dynamique ou statique (Source Wikipédia 31/01/2017)
- Une page web dynamique est une page web générée à la demande, par opposition à une page
web statique. Le contenu d'une page web dynamique peut donc varier en fonction d'informations
(heure, nom de l'utilisateur, formulaire rempli par l'utilisateur, etc.) qui ne sont connues qu'au
moment de sa consultation. À l'inverse, le contenu d'une page web statique est, à priori, identique à
chaque consultation.

JSON (Source Wikipédia du 02/01/2018)

- JavaScript Object Notation. Format de données textuelles dérivé de la notation des objets du
langage JavaScript. Il permet de représenter de l’information structurée comme le permet XML par
exemple. Un document JSON a pour fonction de représenter de l'information accompagnée
d'étiquettes permettant d'en interpréter les divers éléments, sans aucune restriction sur le nombre
de celles-ci.

Langage de balise
- Les langages à base de balises servent surtout à structurer ou formater des documents. HTML est
un exemple de langage de balise, il permet de formater les pages web, par exemple en soulignant
certains mots.

Langage de script client et langage de script serveur

- Un langage de script client fait en général référence à des programmes dans un contexte web qui
s'exécutent sur le navigateur web côté client, par opposition au langage de script serveur
s'exécutant sur un serveur Web. Javascript est un exemple de langage de script client. PHP est un
exemple de langage de script serveur.

Middleware
- En architecture informatique, un middleware est un logiciel tiers qui crée un réseau d'échange
d'informations entre différentes applications informatiques.

Objet
- Le développement objet est basé sur l’identification, la modélisation, puis la programmation de
composants (classes). Considérés comme des boîtes noires, on ne peut utiliser ces composants
qu’à travers leur interface publique. Cette interface est constituée de propriétés (caractéristique
visible de l’objet), de méthodes (ce que l’on peut demander de faire à un objet) et de messages
émis par l’objet (auxquels on peut réagir par l’exécution d’une procédure). Les concepts objet sont
présents à tous les niveaux des architectures des applications informatiques.

OWASP (Source Wikipédia du 25/09/2017)

- Open Web Application Security Project est une communauté en ligne travaillant sur la sécurité des
applications Web. Sa philosophie est d'être à la fois libre et ouverte à tous. Elle a pour vocation de
publier des recommandations de sécurisation Web et de proposer aux internautes, administrateurs
et entreprises des méthodes et outils de référence permettant de contrôler le niveau de sécurisation

30
 DOSSIER PROFESSIONNEL (DP)


de ses applications Web.

Référencement naturel
- Le référencement est l'action de référencer, c'est-à-dire mentionner quelque chose ou y faire
référence. Sur Internet, le travail de référencement consiste à améliorer le positionnement et la
visibilité de sites dans des pages de résultats de moteurs de recherche ou d'annuaires. Le
référencement naturel consiste à travailler les éléments internes et externes des sites pour
permettre de donner plus facilement les informations à la fois aux internautes mais également aux
moteurs de recherche.

Service Web (Source Wikipédia du 03/04/2017)

- Un service web est un protocole d'interface informatique de la famille des technologies web
permettant la communication et l'échange de données entre applications et systèmes hétérogènes
dans des environnements distribués.

SGBD (Source Wikipédia du 11/11/2017)

- Un Système de Gestion de Base de Données est un logiciel système destiné à stocker et à
partager des informations dans une base de données, en garantissant la qualité, la pérennité et la
confidentialité des informations, tout en cachant la complexité des informations.

SQL
- Structured Query Language. Langage de requêtes, basé sur l’algèbre relationnelle, utilisé pour
manipuler les données dans une base de données relationnelles.

Style défensif
- Programmer dans un style défensif consiste à écrire le code de manière à anticiper les risques
d'erreur et les comportements inattendus, par exemple en contrôlant que les entrées utilisateurs
sont correctes. L'absence de cette anticipation peut mener à des failles de sécurité telles que les
débordements de tampon.

Transaction SQL
- Une transaction SQL correspond à un mécanisme permettant de s’assurer que l’ensemble des
différentes opérations composant la transaction sont toutes menées à leur terme. Si l’une des
opérations de la transaction se passe mal, la base de données reviendra à son état antérieur.

UML
- Unified Modeling Language. Formalisme basé sur les concepts de développement objet, qui permet
de modéliser graphiquement une application informatique à toutes les étapes de son
développement.

W3C
- World Wide Web Consortium. Le W3C est une organisation internationale dont les membres, des
éditeurs de logiciels, des constructeurs, des développeurs et des utilisateurs, s’entendent pour faire
la promotion de technologies destinées à tirer le meilleur du Web. Les avis et recommandations du
W3C tiennent souvent lieu de normes.

WCAG
- Web Content Accessibility Guidelines. Recueil de préconisations pour rendre le Web accessible
aux handicapés, aveugles, mal voyants, sourds, déficients cognitifs ou moteurs.

XSS (Source Wikipédia du 06/10/2017)

- Le cross-site scripting est un type de faille de sécurité des sites web permettant d'injecter du
contenu dans une page, permettant ainsi de provoquer des actions sur les navigateurs web visitant
la page.

31
DOSSIER PROFESSIONNEL (DP)


Tableau 1. Diagramme UML.

32
DOSSIER PROFESSIONNEL (DP)


Tableau 2. Template Accueil

Tableau 3. Template Formulaire

Tableau 4. Algorithme de connexion

33
DOSSIER PROFESSIONNEL (DP)


Tableau 5. Wireframe

34
 DOSSIER PROFESSIONNEL (DP)


Tableau 6. Maquette page d’accueil

Tableau 7. Modélisation conceptuelle de la base des données

35
 DOSSIER PROFESSIONNEL (DP)


Tableau 8. Diagramme de la classe Generique

36