1er Août 2022

Nathalie Verdavoir

LE PROJET :

1

Référentiel du titre professionnel et résumé du projet (p.4)

2

Référentiel du titre professionnel et résumé du projet (p.4)

2

Cahier des charges, spécifications techniques et ressources (p.6 à 9)

Référentiel du titre professionnel et résumé du projet (p.4)

Détails des étapes de conception (p.10 à 36)

2

Cahier des charges, spécifications techniques et ressources (p.6 à 9)

Référentiel du titre professionnel et résumé du projet (p.4)

Utilisation de la documentation technique (notamment anglophone) (p.36 à 39)

Détails des étapes de conception (p.10 à 36)

2

Cahier des charges, spécifications techniques et ressources (p.6 à 9)

Référentiel du titre professionnel et résumé du projet (p.4)

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

Cahier des charges, spécifications techniques et ressources (p.6 à 9)

Référentiel du titre professionnel et résumé du projet (p.4)

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)

2

Objectif : Couvrir tous les points du référentiel du titre professionnel au niveau technique et sécuritaire

3

Objectif : Couvrir tous les points du référentiel du titre professionnel au niveau technique et sécuritaire

Délai : 3 semaines

3

Objectif : Couvrir tous les points du référentiel du titre professionnel au niveau technique et sécuritaire

Délai : 3 semaines

Initiateur : Organisme de formation Studi

3

Objectif : Couvrir tous les points du référentiel du titre professionnel au niveau technique et sécuritaire

Délai : 3 semaines

Initiateur : Organisme de formation Studi

 Projet : Application de réservation de chambre d'hôtel 

3

Gérer les établissements 

4

Gérer les suites

Gérer les établissements 

4

Gérer les suites

Gérer les établissements 

Découvrir le catalogue

4

Gérer les suites

Réserver une chambre

Gérer les établissements 

Découvrir le catalogue

4

Gérer les suites

Réserver une chambre

Voir les réservations

Gérer les établissements 

Découvrir le catalogue

4

Gérer les suites

Réserver une chambre

Faire une réservation rapide

Voir les réservations

Gérer les établissements 

Découvrir le catalogue

4

Gérer les suites

Réserver une chambre

Faire une réservation rapide

Voir les réservations

Contacter le groupe

Gérer les établissements 

Découvrir le catalogue

4

Serveur de développement

Windows 10, Apache/2.4.52 (Win64) , 

PHP 8.1.2 , Extension PHP : PDO,

MariaDB (version 10.4.22), XAMPP

5

Serveur de développement

Windows 10, Apache/2.4.52 (Win64) , 

PHP 8.1.2 , Extension PHP : PDO,

MariaDB (version 10.4.22), XAMPP

Serveur de déploiement :

Heroku, Apache/2, php, ClearDB MySQL (add-on Heroku), Extension PHP : PDO, MariaDB, Déploiement en continu basé sur github

5

Serveur de développement

Windows 10, Apache/2.4.52 (Win64) , 

PHP 8.1.2 , Extension PHP : PDO,

MariaDB (version 10.4.22), XAMPP

Serveur de déploiement :

Heroku, Apache/2, php, ClearDB MySQL (add-on Heroku), Extension PHP : PDO, MariaDB, Déploiement en continu basé sur github

Outils de conception et développement :

Adobe XD et VSCode, lignes de commandes

5

Serveur de développement

Windows 10, Apache/2.4.52 (Win64) , 

PHP 8.1.2 , Extension PHP : PDO,

MariaDB (version 10.4.22), XAMPP

Serveur de déploiement :

Heroku, Apache/2, php, ClearDB MySQL (add-on Heroku), Extension PHP : PDO, MariaDB, Déploiement en continu basé sur github

Outils de conception et développement :

Adobe XD et VSCode, lignes de commandes

Versioning et planification :

Git, Github et Trello

5

Pour le front :

HTML 5/Twig, CSS 3, Bootstrap.css, daterangepicker.css, Bootstrap.bundle.js, JavaScript, jQuery, Moment.js, daterangepicker.js

6

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

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

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

https://developer.mozilla.org/fr/

https://getbootstrap.com/docs/5.1

https://icons.getbootstrap.com/

https://schema.org/docs/full.html

https://www.w3schools.com/js/

https://github.com/airbnb/javascript 

https://www.php.net/manual/fr

https://symfony.com/doc/current/index.html

https://twig.symfony.com/

https://stackoverflow.com/

https://sql.sh/sgbd/mariadb

https://mariadb.com/

Parmi d'autres...

La documentation

officielle et non-officielle

7

8

9

10

Git et github

11

Page d'accueil

12

responsive

Page d'accueil

12

responsive

Page d'accueil

12

responsive

Page chambre

13

responsive

Page chambre

13

responsive

Page chambre

13

responsive

13

responsive

Vert = prospérité, dynamisme, richesse

Beige et gris = sobriété et élégance

14

5 tables : User, Hôtel, Chambre, Photo, Réservation

15

workbench

5 tables : User, Hôtel, Chambre, Photo, Réservation

15

workbench

5 tables : User, Hôtel, Chambre, Photo, Réservation

15

workbench

workbench

5 tables : User, Hôtel, Chambre, Photo, Réservation

15

workbench

5 tables : User, Hôtel, Chambre, Photo, Réservation

15

workbench

Initialisation du projet Symfony (cli)

16

16

Création de la base de données (cli) :

16

Installation de doctrine

Création de la base de données (cli) :

Installation de doctrine

Paramétrage des variables d'environnement (liaison avec la base de données)

16

Création de la base de données (cli) :

Installation de doctrine

Paramétrage des variables d'environnement (liaison avec la base de données)

16

Création de la base de données (cli) :

Installation de doctrine

Paramétrage des variables d'environnement (liaison avec la base de données)

16

Création de la base de données (cli) :

Installation de twig et asset (bundles)

16

Installation de twig et asset (bundles)

16

Création des composants header et footer reliés à base.html.twig

Initialisation du fichier de style global

16

Utilisation de security et maker bundles (make:user)

17

Utilisation de security et maker bundles (make:user)

Création de getters et setters

17

Utilisation de security et maker bundles (make:user)

Un repository associé à chaque entité

Création de getters et setters

17

Utilisation de security et maker bundles (make:user / make:entity)

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

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

composer require api

Et quelques annotations...

18

composer require api

Et quelques annotations...

18

composer require api

Et quelques annotations...

18

composer require api

Et quelques annotations...

18

Une autre commande :

composer require symfony/google-mailer

19

Une autre commande :

composer require symfony/google-mailer

RGPD

19

Une autre commande :

composer require symfony/google-mailer

RGPD

Confirmation d'envoi

19

contacts

Une autre commande :

composer require symfony/google-mailer

RGPD

Confirmation d'envoi

19

contacts

TODO : Ajouter un test sur l'envoi de mail

Sécurité : restriction d'accès et de modification selon l'utilisateur connecté.

Les gérants peuvent modifier les photos et les couvertures

20

Sécurisation du code pour le développement futur

21

Sécurisation du code pour le développement futur

21

phpunit

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

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)

Ajout de fixtures et vérification des entrées enregistrées

(testCount())

21

phpunit

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)

Ajout de fixtures et vérification des entrées enregistrées

(testCount())

et plusieurs autres tests...

21

phpunit

tests

21

tests

22

Bootstrap

CDN

Calendrier

22

Bootstrap

CDN

Calendrier

Imports des Fonts

Variables de couleurs

Barres de défilement personnalisées

22

Bootstrap

CDN

Calendrier

Imports des Fonts

Variables de couleurs

Composants boutons

Icones graphiques

Mediaqueries / mobile first

Barres de défilement personnalisées

23

Bootstrap.bundle.js

Les librairies

23

Bootstrap.bundle.js

jQuery.js

Les librairies

23

Bootstrap.bundle.js

jQuery.js

moment.js

Les librairies

23

Bootstrap.bundle.js

jQuery.js

moment.js

daterangepicker.js

Les librairies

23

Bootstrap.bundle.js

jQuery.js

moment.js

daterangepicker.js

resa.js 

Script personnalisé

Les librairies

24

Balises meta

Description

Keywords

Robots

24

Balises meta

Description

Keywords

Robots

shema.org

streetAddress

postalCode

telephone

25

Mentions OBLIGATOIRES

25

Mentions OBLIGATOIRES

dernier en date du 23 mai 2018

25

Mentions OBLIGATOIRES

https://www.cnil.fr/fr/reglement-europeen-protection-donnees

dernier en date du 23 mai 2018

25

Mentions OBLIGATOIRES

https://www.cnil.fr/fr/reglement-europeen-protection-donnees

dernier en date du 23 mai 2018

CGU-CGV

25

Mentions OBLIGATOIRES

https://www.cnil.fr/fr/reglement-europeen-protection-donnees

dernier en date du 23 mai 2018

Informations aux clients

CGU-CGV

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

26

Documentation (en anglais)

26

Documentation (en anglais)

Besoins spécifiques

26

Documentation (en anglais)

Besoins spécifiques

Mises à jour très fréquentes 

26

Documentation (en anglais)

Besoins spécifiques

Mises à jour très fréquentes 

Grande communauté de devs

26

Documentation (en anglais)

Besoins spécifiques

Mises à jour très fréquentes 

Grande communauté de devs

26

Documentation (en anglais)

Besoins spécifiques

Mises à jour très fréquentes 

Grande communauté de devs

Echappement des caractères spéciaux

26

Documentation (en anglais)

Besoins spécifiques

Mises à jour très fréquentes 

Grande communauté de devs

Echappement des caractères spéciaux

XSS, cross-domain...

27

Fonctionnalité la plus importante

Triple vérification de l'entrée utilisateur

28

Requête au choix de la chambre

Formulaire

28

Requête au choix de la chambre

Construction du calendrier (dates bloquées)

Formulaire

29

Le script évènementiel 

Vérification des entrées utilisateurs en front

29

Le script évènementiel 

Vérification des entrées utilisateurs en front

Alerte en cas de non cohérence

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

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

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

30

La validation du formulaire

Validator

resa

30

La validation du formulaire

Validator

Contrainte personnalisée 

resa

30

La validation du formulaire

Validator

Contrainte personnalisée 

Message à l'utilisateur

resa

31

Projet assez complet pour terminer ma formation

31

Projet assez complet pour terminer ma formation

Pour aller plus loin :

Quelques pistes d'amélioration (p.45)

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)

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 pour votre attention