1er Août 2022
Nathalie Verdavoir
Développeur Web et Web Mobile
LE PROJET :
1
Contexte du projet
Référentiel du titre professionnel et résumé du projet (p.4)
2
Contexte du projet
Référentiel du titre professionnel et résumé du projet (p.4)
Présentation du projet
2
Cahier des charges, spécifications techniques et ressources (p.6 à 9)
Contexte du projet
Référentiel du titre professionnel et résumé du projet (p.4)
Présentation du projet
Détails des étapes de conception (p.10 à 36)
2
Réalisation du projet
Cahier des charges, spécifications techniques et ressources (p.6 à 9)
Contexte du projet
Veille sur les vulnérabilités
Référentiel du titre professionnel et résumé du projet (p.4)
Présentation du projet
Utilisation de la documentation technique (notamment anglophone) (p.36 à 39)
Détails des étapes de conception (p.10 à 36)
2
Réalisation du projet
Cahier des charges, spécifications techniques et ressources (p.6 à 9)
Contexte du projet
Veille sur les vulnérabilités
Fonctionnalité principale : les réservations
Référentiel du titre professionnel et résumé du projet (p.4)
Présentation du projet
Utilisation de la documentation technique (notamment anglophone) (p.36 à 39)
Détails des étapes de conception (p.10 à 36)
Conception, réalisation et tests (p.40 à 45)
2
Réalisation du projet
Cahier des charges, spécifications techniques et ressources (p.6 à 9)
Contexte du projet
Réalisation du projet
Veille sur les vulnérabilités
Fonctionnalité principale : les réservations
Référentiel du titre professionnel et résumé du projet (p.4)
Présentation du projet
Cahier des charges, spécifications techniques et ressources (p.6 à 9)
Utilisation de la documentation technique (notamment anglophone) (p.36 à 39)
Détails des étapes de conception (p.10 à 36)
Conception, réalisation et tests (p.40 à 45)
Conclusion
2
Contexte du projet
Objectif : Couvrir tous les points du référentiel du titre professionnel au niveau technique et sécuritaire
3
Contexte du projet
Objectif : Couvrir tous les points du référentiel du titre professionnel au niveau technique et sécuritaire
Délai : 5 semaines
3
Contexte du projet
Objectif : Couvrir tous les points du référentiel du titre professionnel au niveau technique et sécuritaire
Délai : 5 semaines
Initiateur : Organisme de formation Studi
3
Contexte du projet
Objectif : Couvrir tous les points du référentiel du titre professionnel au niveau technique et sécuritaire
Délai : 5 semaines
Initiateur : Organisme de formation Studi
Projet : Application de réservation de chambre d'hôtel
3
Cahier des charges (p.6)
Gérer les établissements (admin)
4
Cahier des charges (p.6)
Gérer les suites (gérant)
4
Gérer les établissements (admin)
Cahier des charges (p.6)
Découvrir le catalogue (visiteur)
4
Gérer les établissements (admin)
Gérer les suites (gérant)
Cahier des charges (p.6)
Réserver une chambre (client)
4
Gérer les établissements (admin)
Découvrir le catalogue (visiteur)
Gérer les suites (gérant)
Cahier des charges (p.6)
Voir les réservations (client)
4
Gérer les établissements (admin)
Réserver une chambre (client)
Découvrir le catalogue (visiteur)
Gérer les suites (gérant)
Cahier des charges (p.6)
Faire une réservation rapide (client)
4
Gérer les établissements (admin)
Voir les réservations (client)
Réserver une chambre (client)
Découvrir le catalogue (visiteur)
Gérer les suites (gérant)
Cahier des charges (p.6)
Contacter le groupe (tous les utilisateurs)
4
Gérer les établissements (admin)
Faire une réservation rapide (client)
Voir les réservations (client)
Réserver une chambre (client)
Découvrir le catalogue (visiteur)
Gérer les suites (gérant)
Spécifications techniques (p.8)
Serveur de développement
Windows 10, Apache/2.4.52 ,
PHP 8.1.2 , Extension PHP : PDO,
MariaDB (version 10.4.22), XAMPP
5
Spécifications techniques (p.8)
Serveur de développement
Windows 10, Apache/2.4.52 ,
PHP 8.1.2 , Extension PHP : PDO,
MariaDB (version 10.4.22), XAMPP
5
Serveur de déploiement :
Heroku, Apache/2, php, ClearDB MySQL, Extension PHP : PDO, MariaDB,
Cloudinary,
Déploiement en continu basé sur github
Spécifications techniques (p.8)
Serveur de développement
Windows 10, Apache/2.4.52 ,
PHP 8.1.2 , Extension PHP : PDO,
MariaDB (version 10.4.22), XAMPP
Outils de conception et développement :
Adobe XD et VSCode, lignes de commandes
5
Serveur de déploiement :
Heroku, Apache/2, php, ClearDB MySQL, Extension PHP : PDO, MariaDB,
Cloudinary,
Déploiement en continu basé sur github
Spécifications techniques (p.8)
Serveur de développement
Windows 10, Apache/2.4.52 ,
PHP 8.1.2 , Extension PHP : PDO,
MariaDB (version 10.4.22), XAMPP
Serveur de déploiement :
Heroku, Apache/2, php, ClearDB MySQL, Extension PHP : PDO, MariaDB,
Cloudinary,
Déploiement en continu basé sur github
Outils de conception et développement :
Adobe XD et VSCode, lignes de commandes
5
Versioning et planification :
Git, Github et Trello
Spécifications techniques (p.8-9)
Pour le front :
HTML 5/Twig, CSS 3, Bootstrap.css, daterangepicker.css, Bootstrap.bundle.js, JavaScript, jQuery, Moment.js, daterangepicker.js
6
Spécifications techniques (p.8-9)
Pour le front :
HTML 5/Twig, CSS 3, Bootstrap.css, daterangepicker.css, Bootstrap.bundle.js, JavaScript, jQuery, Moment.js, daterangepicker.js
Pour le back :
PHP 8.1.2 sous PDO, Symfony 6, MySQL, mariaDB 10.4.22, API Platform
6
Spécifications techniques (p.8-9)
Gestion de la base de données :
Doctrine ORM
WorkBench d’Oracle
Pour le front :
HTML 5/Twig, CSS 3, Bootstrap.css, daterangepicker.css, Bootstrap.bundle.js, JavaScript, jQuery, Moment.js, daterangepicker.js
Pour le back :
PHP 8.1.2 sous PDO, Symfony 6, MySQL, mariaDB 10.4.22, API Platform
6
Spécifications techniques (p.8-9)
Gestion de la base de données :
Doctrine ORM
WorkBench d’Oracle
Pour le front :
HTML 5/Twig, CSS 3, Bootstrap.css, daterangepicker.css, Bootstrap.bundle.js, JavaScript, jQuery, Moment.js, daterangepicker.js
Pour le back :
PHP 8.1.2 sous PDO, Symfony 6, MySQL, mariaDB 10.4.22, API Platform
Gestion des mails :
google-mailer
6
Ressources (p.9)
La documentation
officielle et non-officielle
7
Schémas et diagrammes
(p.11-12 et annexes)
8
Schémas et diagrammes
(p.11-12 et annexes)
9
Schémas et diagrammes
(p.11-12 et annexes)
10
Diagramme de séquence
Réserver une chambre depuis la page hôtel
Planifications et versionning (p.13)
Trello
Git et github
11
Wireframes et charte graphique (p.14 et annexes)
Page d'accueil
12
responsive
Wireframes et charte graphique (p.14 et annexes)
Page d'accueil
12
responsive
Wireframes et charte graphique (p.14 et annexes)
Page d'accueil
12
responsive
Wireframes et charte graphique (p.14 et annexes)
Page chambre
13
responsive
Wireframes et charte graphique (p.14 et annexes)
Page chambre
13
responsive
Wireframes et charte graphique (p.14 et annexes)
Page chambre
13
responsive
Wireframes et charte graphique (p.14 et annexes)
13
responsive
Wireframes et charte graphique (p.14 et annexes)
Vert = prospérité, dynamisme, richesse
Beige et gris = sobriété et élégance
14
Conception de la base de données (p.14)
5 tables : User, Hôtel, Chambre, Photo, Réservation
15
workbench
Conception de la base de données (p.14)
5 tables : User, Hôtel, Chambre, Photo, Réservation
15
workbench
Conception de la base de données (p.14)
5 tables : User, Hôtel, Chambre, Photo, Réservation
15
workbench
workbench
Conception de la base de données (p.14)
5 tables : User, Hôtel, Chambre, Photo, Réservation
15
workbench
Conception de la base de données (p.14)
5 tables : User, Hôtel, Chambre, Photo, Réservation
15
workbench
Installation du projet en local (p.15)
Initialisation du projet Symfony (cli)
16
Installation du projet en local (p.15)
Initialisation du projet Symfony (cli)
Création de la base de données (cli)
16
Installation du projet en local (p.15)
Initialisation du projet Symfony (cli)
Installation de doctrine
Création de la base de données (cli)
16
Installation du projet en local (p.15)
Initialisation du projet Symfony (cli)
Installation de doctrine
Création de la base de données (cli)
16
Installation du projet en local (p.15)
Initialisation du projet Symfony (cli)
Installation de doctrine
Paramétrage des variables d'environnement (liaison avec la base de données)
Création de la base de données (cli)
16
Installation du projet en local (p.15)
16
Installation de twig et asset (bundles)
Installation du projet en local (p.15)
16
Installation de twig et asset (bundles)
Création des composants header et footer reliés à base.html.twig
Installation du projet en local (p.15)
16
Initialisation du fichier de style global
Création des entités, repositories, crud... (p.16)
Utilisation de security et maker bundles (make:user)
17
Création des entités, repositories, crud... (p.16)
Utilisation de security et maker bundles (make:user)
Création de getters et setters
17
Création des entités, repositories, crud... (p.16)
Utilisation de security et maker bundles (make:user)
Un repository associé à chaque entité
Création de getters et setters
17
Création des entités, repositories, crud... (p.16)
Utilisation de security et maker bundles (make:user)
Un repository associé à chaque entité
CRUD pour chaque entité (make:crud) :
- controller : routes et fonctions (p.17)
- form (p.18)
- templates (p.19)
Création de getters et setters
17
Création des entités, repositories, crud... (p.16)
Utilisation de security et maker bundles (make:user)
Un repository associé à chaque entité
CRUD pour chaque entité (make:crud) :
- controller : routes et fonctions (p.17)
- form (p.18)
- templates (p.19)
Création de getters et setters
17
fichiers
API Platform (p.20)
composer require api
Une simple
commande :
Et quelques annotations...
18
API Platform (p.20)
composer require api
Une simple
commande :
Et quelques annotations...
18
API Platform (p.20)
composer require api
Une simple
commande :
Et quelques annotations...
18
API Platform (p.20)
composer require api
Une simple
commande :
Et quelques annotations...
18
Une autre commande :
composer require symfony/google-mailer
Formulaire de contact (p.21-23)
19
Une autre commande :
composer require symfony/google-mailer
Formulaire de contact (p.21-23)
19
RGPD
Une autre commande :
composer require symfony/google-mailer
Formulaire de contact (p.21-23)
RGPD
Confirmation d'envoi
19
contacts
TODO : Ajouter un test sur l'envoi de mail
Une autre commande :
composer require symfony/google-mailer
Formulaire de contact (p.21-23)
19
Upload des photos et choix des couvertures (p.24-26)
Sécurité : restriction d'accès et de modification selon l'utilisateur connecté.
Les gérants peuvent modifier les photos et les couvertures
20
TODO : Ajouter des voters
Les tests (p.27-30)
Sécurisation du code pour le développement futur
21
Les tests (p.27-30)
Sécurisation du code pour le développement futur
21
phpunit
Les tests (p.27-30)
Sécurisation du code pour le développement futur
Exemple de test unitaire :
création d'un user
Vérification des "asserts"
(NotBlank, Regex, Email)
21
phpunit
Les tests (p.27-30)
Sécurisation du code pour le développement futur
Exemple de test unitaire :
création d'un user
Vérification des "asserts"
(NotBlank, Regex, Email)
Exemple de test fonctionnel:
insertion dans la base de données
Ajout de fixtures et vérification des entrées enregistrées
(testCount())
21
phpunit
Les tests (p.27-30)
Sécurisation du code pour le développement futur
Exemple de test unitaire :
création d'un user
Vérification des "asserts"
(NotBlank, Regex, Email)
Exemple de test fonctionnel:
insertion dans la base de données
Ajout de fixtures et vérification des entrées enregistrées
(testCount())
et plusieurs autres tests...
21
phpunit
tests
Les tests (p.27-30)
21
tests
Un style unique (p.31-33)
22
Bootstrap
CDN
Calendrier
Un style unique (p.31-33)
22
Bootstrap
CDN
Calendrier
Imports des Fonts
Variables de couleurs
Barres de défilement personnalisées
Un style unique (p.31-33)
22
Bootstrap
CDN
Calendrier
Imports des Fonts
Variables de couleurs
Composants boutons
Icones graphiques
Mediaqueries / mobile first
Barres de défilement personnalisées
Les scripts (p.34)
23
Bootstrap.bundle.js
Les librairies
Les scripts (p.34)
23
Bootstrap.bundle.js
jQuery.js
Les librairies
Les scripts (p.34)
23
Bootstrap.bundle.js
jQuery.js
moment.js
Les librairies
Les scripts (p.34)
23
Bootstrap.bundle.js
jQuery.js
moment.js
daterangepicker.js
Les librairies
Les scripts (p.34)
23
Bootstrap.bundle.js
jQuery.js
moment.js
daterangepicker.js
resa.js
Script personnalisé
Les librairies
Le référencement (p.34-35)
24
Balises meta
Description
Keywords
Robots
Le référencement (p.34-35)
24
Balises meta
Description
Keywords
Robots
shema.org
streetAddress
postalCode
telephone
Mentions légales et RGPD (p.36)
25
Mentions OBLIGATOIRES
Mentions légales et RGPD (p.36)
25
Mentions OBLIGATOIRES
dernier en date du 23 mai 2018
Mentions légales et RGPD (p.36)
25
Mentions OBLIGATOIRES
https://www.cnil.fr/fr/reglement-europeen-protection-donnees
dernier en date du 23 mai 2018
Mentions légales et RGPD (p.36)
25
Mentions OBLIGATOIRES
https://www.cnil.fr/fr/reglement-europeen-protection-donnees
dernier en date du 23 mai 2018
CGU-CGV
Mentions légales et RGPD (p.36)
25
Mentions OBLIGATOIRES
https://www.cnil.fr/fr/reglement-europeen-protection-donnees
dernier en date du 23 mai 2018
Informations aux clients
CGU-CGV
Mentions légales et RGPD (p.36)
25
Mentions OBLIGATOIRES
https://www.cnil.fr/fr/reglement-europeen-protection-donnees
dernier en date du 23 mai 2018
Sanctions
Informations aux clients
CGU-CGV
Veille de sécurité (p.36-39)
26
Documentation (en anglais)
Veille de sécurité (p.36-39)
26
Documentation (en anglais)
Besoins spécifiques
Veille de sécurité (p.36-39)
26
Documentation (en anglais)
Besoins spécifiques
Mises à jour très fréquentes
Veille de sécurité (p.36-39)
26
Documentation (en anglais)
Besoins spécifiques
Mises à jour très fréquentes
Grande communauté de devs
Veille de sécurité (p.36-39)
26
Documentation (en anglais)
Besoins spécifiques
Mises à jour très fréquentes
Grande communauté de devs
Choix de sécuriser les routes et les fonctions
Veille de sécurité (p.36-39)
26
Documentation (en anglais)
Besoins spécifiques
Mises à jour très fréquentes
Grande communauté de devs
Choix de sécuriser les routes et les fonctions
Echappement des caractères spéciaux
Veille de sécurité (p.36-39)
26
Documentation (en anglais)
Besoins spécifiques
Mises à jour très fréquentes
Grande communauté de devs
Choix de sécuriser les routes et les fonctions
Echappement des caractères spéciaux
XSS, cross-domain...
Les réservations (p.40-45)
27
Fonctionnalité la plus importante
Triple vérification de l'entrée utilisateur
Les réservations (p.40-45)
28
Requête au choix de la chambre
Formulaire
Les réservations (p.40-45)
28
Requête au choix de la chambre
Construction du calendrier (dates bloquées)
Formulaire
Les réservations (p.40-45)
29
Le script évènementiel
Vérification des entrées utilisateurs en front
Les réservations (p.40-45)
29
Le script évènementiel
Vérification des entrées utilisateurs en front
Alerte en cas de non cohérence
Les réservations (p.40-45)
29
Le script évènementiel
Formulaire caché et rempli par la modification du DOM
Vérification des entrées utilisateurs en front
Alerte en cas de non cohérence
Les réservations (p.40-45)
29
Le script évènementiel
Formulaire caché et rempli par la modification du DOM
Vérification des entrées utilisateurs en front
Alerte en cas de non cohérence
Petit problème à la fermeture du calendrier
Les réservations (p.40-45)
29
Les réservations (p.40-45)
30
La validation du formulaire
Validator
resa
Les réservations (p.40-45)
30
La validation du formulaire
Validator
Contrainte personnalisée
resa
Les réservations (p.40-45)
30
La validation du formulaire
Validator
Contrainte personnalisée
Message à l'utilisateur
resa
Conclusion
31
Projet assez complet pour terminer ma formation
Conclusion
31
Projet assez complet pour terminer ma formation
Pour aller plus loin :
Quelques pistes d'amélioration (p.45)
Conclusion
31
Projet assez complet pour terminer ma formation
Pour aller plus loin :
Quelques pistes d'amélioration (p.45)
Un mode d'emploi de l'application (p.49-50)
Conclusion
31
Projet assez complet pour terminer ma formation
Pour aller plus loin :
Quelques pistes d'amélioration (p.45)
Un mode d'emploi de l'application (p.49-50)
Merci à mes formateurs et à mes camarades
Merci à vous pour votre attention
Présentation
By Hypnos
