TP2 Création de projet Bootstrap
Sommaire
- 1- Objectifs
- 2- Compétences du référentiel concernées
- 3- Objectif & Livrables
- 3.1- Objectif
- 3.2- Livrables
- 3.3- Devra aussi se trouver:
- 4- Présentation du contexte: Gestion d'une boulangerie-pâtisserie
- 4.1- Fonctionnalités Désirées
- 4.1.1- US1. Se connecter
- 4.1.2- US2. Présenter les produits
- 4.1.3- US3. Gérer les commandes
- 4.1.4- US4. Filtrer les produits
- 4.1.5- US5. Permettre la communication
- 4.1.6- US6. Recueillir les retours des clients
- 5- Énoncé:
- 5.1- Partie 01 : Page index
- 5.2- Partie 02 : Base de données
- 5.3- Partie 03 : Pages de connexion
- 5.4- Partie 04 : Système de connexion
- 5.5- Partie 05 : Pages du site
- 5.5.1- Sommaire du cours Bootstrap
TP2 Gestion d’une boulangerie-pâtisserie
-
Objectifs
- Télécharger et personnaliser une Template Bootstrap 5 pour créer un site web.
- Se familiariser avec l’utilisation de Bootstrap 5 pour la création de sites web, ainsi que la personnalisation de templates existantes pour créer des designs uniques.
-
Compétences du référentiel concernées
- Toutes les compétences du titre professionnel Développeur Web seront analysées grâce à ce ce projet.
- Activité – Type 1 : Développer la partie front-end d’une application web en intégrant les recommandations de sécurité
- 1 Maquetter une application
- 2 Réaliser une interface utilisateur web statique et adaptable
- 3 Développer une interface utilisateur web dynamique
- 4 Réaliser une interface utilisateur avec une solution de gestion de contenu
- Activité – Type 2 : Développer la partie back-end d’une application web en intégrant les recommandations de sécurité
- 5 Créer une base de données
- 6 Développer les composants d’accès aux données
- 7 Développer la partie back-end d’une application web
- 8 Élaborer et mettre en œuvre des composants dans une application de gestion de contenu
-
Objectif & Livrables
-
Objectif
- L’objectif principal de cet examen sera de passer au moins une fois par chaque étape clé de conception d’une application web complète: analyse des besoins, maquettage, intégration, développement et déploiement.
- Un dossier supplémentaire sera à rendre en plus de votre code source. Une documentation devra y être présente où vous définirez votre choix des technologies employées, les diagrammes, wireframes ainsi que la charte graphique potentiellement élaborée par vos soins.
- Vous devez garder à l’esprit que le correcteur doit être en mesure de tester facilement toutes les fonctionnalités de vos applications. Il sera donc nécessaire d’écrire un petit manuel décrivant le processus d’installation de vos solutions en local si besoin.
-
Livrables
- Le lien du (ou des) dépôt(s) Github public, où sera présent le code de vos applications
- Le lien de la version en ligne de l’application web
-
Devra aussi se trouver:
- Un fichier readme.md contenant la démarche à suivre pour l’exécution en local
- ○ Ne pas oublier dans ce readme l’explication de la création d’un administrateur pour le back-office de l’application web
- Les fichiers de création et d’alimentation de la base de données de votre application web (migrations, fixtures ou scripts SQL à la main)
- Une documentation technique au format .pdf avec vos réflexions initiales sur le projet (technologies choisies, configuration de l’environnement de travail…)
- Une charte graphique au format .pdf regroupant:
- La palette de couleurs
- La palette des polices d’écriture choisies
- L’export des maquettes attendues
- wireframe et/ou mockup pour la version mobile ET desktop
- Attention! Pour respecter les contraintes de temps et valider toutes les compétences du référentiel, il est vivement conseillé de ne pas passer trop de temps sur le design de vos applications. S’il est minimaliste, mais cohérent, alors c’est suffisant.
-
Présentation du contexte: Gestion d’une boulangerie-pâtisserie
-
Fonctionnalités Désirées
-
US1. Se connecter
- Utilisateurs concernés: Administrateur, Employés
- Description:
- Le compte administrateur sera créé spécialement pour le propriétaire ou le gérant de la boulangerie-pâtisserie.
- Chaque employé de la boulangerie-pâtisserie aura son propre compte sur l’application web.
- Seul l’administrateur pourra créer un compte pour un employé.
- Les utilisateurs se connecteront en utilisant leur adresse e-mail et un mot de passe sécurisé.
-
US2. Présenter les produits
- Utilisateurs concernés: Administrateur, Visiteurs
- Description:
- Les produits disponibles (pains, viennoiseries, pâtisseries, etc.) seront présentés de manière claire et concise sur la page d’accueil du site.
- L’administrateur pourra ajouter, modifier et supprimer des produits depuis son espace d’administration.
-
US3. Gérer les commandes
- Utilisateurs concernés: Administrateur, Employés
- Les clients pourront passer des commandes en ligne pour les produits disponibles.
- L’administrateur et les employés pourront gérer les commandes, les traiter et les préparer pour la livraison ou la collecte en magasin.
-
US4. Filtrer les produits
- Mise en place d’un système de filtres pour faciliter la recherche de produits en fonction du type (pains, viennoiseries, pâtisseries), des ingrédients, des prix, etc.
- Les clients pourront filtrer les produits pour trouver ceux qui correspondent le mieux à leurs besoins.
-
US5. Permettre la communication
- Utilisateurs concernés: Clients, Employés
- Description:
- Les clients pourront contacter la boulangerie-pâtisserie pour poser des questions, demander des conseils sur les produits, etc., via un formulaire de contact en ligne ou par téléphone.
- Les employés pourront répondre aux questions des clients, fournir des informations sur les produits, etc.
-
US6. Recueillir les retours des clients
- Utilisateurs concernés: Clients
- Description:
- Les clients pourront laisser des retours sur les produits qu’ils ont achetés, y compris des commentaires et des évaluations.
- Les retours des clients seront utilisés pour améliorer la qualité des produits et des services de la boulangerie-pâtisserie.
- Ces fonctionnalités devraient fournir une expérience complète pour les utilisateurs de la plateforme de gestion d’une boulangerie-pâtisserie, en leur permettant de commander des produits, de communiquer avec le personnel, et de laisser des retours sur leurs achats.
-
Énoncé:
-
Partie 01 : Page index
- Télécharger la template Bootstrap 5 en suivant le lien https://bootstrapmade.com/demo/Baker/.
- Extraire le fichier ZIP téléchargé et copier/coller les fichiers dans un nouveau dossier sur votre ordinateur.
- Ouvrir le fichier index.html dans un éditeur de texte (par exemple, Visual Studio Code).
- Examiner le code HTML et les fichiers CSS et JS associés pour comprendre la structure et les styles appliqués à la template.
- Personnaliser la template en ajoutant votre propre contenu, en modifiant les couleurs et les styles, et en utilisant vos propres images.
- Enregistrer les modifications et afficher la page HTML dans un navigateur pour voir le résultat final.
- Si vous le souhaitez, vous pouvez également ajouter des fonctionnalités supplémentaires en utilisant des plugins ou en modifiant le code JavaScript.
- Héberger le site web sur un serveur local pour le rendre accessible.
-
Partie 02 : Base de données
- Voici un schéma de base de données MySQL pour une boulangerie qui propose une gamme de produits alimentaires, en se concentrant sur le thème de la fabrication. La base de données comprendra au moins cinq tables.
- Table «
Produits« - La table « Produits » stocke les informations sur les produits proposés par la boulangerie, y compris leur nom, leur type (par exemple, pain, pâtisserie, etc.), leur description et leur prix.
- Table «
Ingrédients« - La table « Ingrédients » stocke les informations sur les ingrédients utilisés dans la fabrication des produits, y compris leur nom et leur unité de mesure.
- Table «
Recettes« - La table « Recettes » stocke les informations sur les recettes utilisées pour fabriquer les produits, y compris leur nom, leur description et leur coût de revient.
- Table «
Produits_Recettes« - La table « Produits_Recettes » établit une relation entre les produits et les recettes, en stockant les quantités d’ingrédients nécessaires pour chaque recette.
- Table «
Commandes« - La table « Commandes » stocke les informations sur les commandes passées par les clients, y compris leur date, leur montant total et leur statut.
-
Partie 03 : Pages de connexion
- Créer les pages PHP qui permettent de se connecter à une base de données (crées précédemment) MySQL avec PDO de manière sécurisée :
- Tout d’abord, assurez-vous que le pilote PDO pour MySQL est installé sur votre serveur web.
- Créez un fichier de configuration pour stocker les informations de connexion à la base de données, en utilisant les constantes PHP. Ce fichier doit être stocké en dehors du répertoire racine de votre site web, pour des raisons de sécurité.
- Dans votre fichier PHP de connexion à la base de données, incluez le fichier de configuration à l’aide de la fonction PHP « require_once ».
- Utilisez la classe PDO de PHP pour établir une connexion à la base de données MySQL en utilisant les informations de connexion stockées dans votre fichier de configuration.
- Utilisez la méthode PDO::setAttribute() pour définir le mode d’erreur PDO sur PDO::ERRMODE_EXCEPTION, afin de gérer les erreurs de manière appropriée.
- Pour protéger votre application contre les attaques par injection SQL, utilisez des requêtes préparées avec des paramètres de liaison.
-
Partie 04 : Système de connexion
- Concevoir et développer un système de connexion sécurisé pour votre site web en utilisant des pages de connexion en PHP, incluant une gestion d’oublie de mot de passe et la récupération par session pour assurer la confidentialité et l’accessibilité des comptes utilisateurs.
- Pour concevoir et développer un système de connexion sécurisé pour un site web en utilisant des pages de connexion en PHP, incluant une gestion d’oubli de mot de passe et la récupération par session, voici les étapes à suivre :
-
Planification et conception du système de connexion :
- Identifier les besoins de votre site web en matière de sécurité de connexion et de gestion des comptes utilisateurs.
- Élaborer un plan détaillé pour le système de connexion, en tenant compte des différentes fonctionnalités requises (inscription, connexion, déconnexion, récupération de mot de passe, etc.) et des exigences de sécurité (chiffrement des données, protection contre les attaques par force brute, etc.).
-
Création des pages de connexion :
- Concevoir les pages de connexion en PHP, en utilisant des éléments de sécurité tels que les tokens CSRF et les mécanismes de validation des entrées utilisateur.
- Mettre en place des mesures de protection contre les attaques par force brute, telles que le verrouillage de compte après un certain nombre de tentatives de connexion infructueuses.
-
Gestion des comptes utilisateurs :
- Développer une base de données pour stocker les informations des utilisateurs, y compris les noms d’utilisateur et les mots de passe.
- Utiliser une méthode de hachage de mot de passe sécurisée pour stocker les mots de passe des utilisateurs.
- Mettre en place un processus de validation d’adresse e-mail pour les nouveaux utilisateurs, afin de s’assurer de l’authenticité de leur compte.
-
Gestion de l’oubli de mot de passe :
- Développer une fonctionnalité de récupération de mot de passe, en utilisant un processus de vérification en deux étapes pour garantir l’authenticité de l’utilisateur.
- Envoyer un e-mail de réinitialisation de mot de passe avec un lien unique et temporaire pour réinitialiser le mot de passe.
-
Gestion des sessions utilisateur :
- Utiliser des sessions pour suivre l’état de connexion de l’utilisateur.
- Développer une fonctionnalité de déconnexion claire pour permettre aux utilisateurs de se déconnecter en toute sécurité.
- En suivant ces étapes, vous pouvez concevoir et développer un système de connexion sécurisé pour votre site web en utilisant des pages de connexion en PHP, incluant une gestion d’oubli de mot de passe et la récupération par session pour assurer la confidentialité et l’accessibilité des comptes utilisateurs.
-
Partie 05 : Pages du site
- Créer un menu standard pour toutes les pages, avec des liens vers les différentes pages principales et un bouton de déconnexion.
- Créer une page principale pour chaque table, avec des fonctions CRUD (create, read, update, delete) pour les données de cette table.
- Ajouter une zone de recherche et une pagination Bootstrap 5 à chaque page principale.
- Organiser les pages PHP CRUD pour chaque table dans des dossiers distincts.
- Voici les étapes à suivre pour concevoir et développer une telle page(page cours comme exemple :
-
Planification et conception de la page :
- Définir les besoins de la page en matière d’affichage et de fonctionnalités.
- Élaborer un plan détaillé pour la page, en tenant compte des différentes fonctionnalités requises (affichage de données, recherche, insertion, modification, suppression, etc.) et de l’interface utilisateur.
-
Création de la page principale :
- Concevoir la page en HTML 5, bootstrap 5 et en CSS, en utilisant des éléments de Bootstrap pour la mise en page et le style.
- Écrire le code PHP pour récupérer les données de la table ‘cours’ à partir de la base de données MySQL et les afficher dans un tableau HTML.
- Ajouter une zone de recherche en haut de la page pour filtrer les données affichées.
- Ajouter un bouton pour insérer un nouveau cours.
-
Création des modaux pour les fonctions CRUD :
- Concevoir des modaux pour les fonctions CRUD (create, read, update, delete) en utilisant des éléments de Bootstrap pour la mise en page et le style.
- Écrire le code PHP pour chaque fonctionnalité CRUD en utilisant les requêtes MySQL appropriées pour interagir avec la base de données.
-
Ajout des boutons détail, modifier et delete :
- Ajouter une colonne à la table pour les boutons détail, modifier et delete pour chaque ligne.
- Écrire le code JavaScript ou JQuery pour déclencher les modaux appropriés lorsqu’un bouton est cliqué.
- En suivant ces étapes, vous pouvez concevoir et développer une page principale pour chaque table MySQL, permettant d’afficher toutes les données de chaque table avec une zone de recherche en haut et un bouton pour insérer un nouveau enregistrement, ainsi qu’une colonne qui contient des boutons détail, modifier et delete. Le développement doit inclure la création de pages PHP et de modaux Bootstrap avec des fonctions CRUD (create, read, update, delete) pour les données de chaque table.
- Créer une page index qui propose des boutons cliquables pour toutes les pages principales.
- Tester l’application pour vérifier le bon fonctionnement de toutes les fonctionnalités CRUD (c’est seulement la page crée précédemment).
- Optimiser le code et la conception de l’interface utilisateur pour améliorer les performances et la convivialité de l’application.
Description:
-
Utilisateurs concernés: Visiteurs, Clients
Description:
id_produit (clé primaire)
nom_produit
type_produit (pain, pâtisserie, viennoiserie, sandwichs, chocolat, confiserie, produits secs...)
description
prix
CREATE TABLE Produits (
id_produit INT NOT NULL AUTO_INCREMENT,
nom_produit VARCHAR(255) NOT NULL,
type_produit VARCHAR(255) NOT NULL,
description TEXT,
prix DECIMAL(10,2) NOT NULL,
PRIMARY KEY (id_produit)
);
id_ingredient (clé primaire)
nom_ingredient
unité de mesure (kg, g, L, ml, etc.)
CREATE TABLE Ingredients (
id_ingredient INT NOT NULL AUTO_INCREMENT,
nom_ingredient VARCHAR(255) NOT NULL,
unite_mesure VARCHAR(50) NOT NULL,
PRIMARY KEY (id_ingredient)
);
id_recette (clé primaire)
nom_recette
description
coût de revient
CREATE TABLE Recettes (
id_recette INT NOT NULL AUTO_INCREMENT,
nom_recette VARCHAR(255) NOT NULL,
description TEXT,
cout_revient DECIMAL(10,2) NOT NULL,
PRIMARY KEY (id_recette)
);id_produit (clé étrangère vers la table "Produits")
id_recette (clé étrangère vers la table "Recettes")
quantité d'ingrédient
CREATE TABLE Produits_Recettes (
id_produit INT NOT NULL,
id_recette INT NOT NULL,
quantite_ingredient DECIMAL(10,2) NOT NULL,
FOREIGN KEY (id_produit) REFERENCES Produits(id_produit),
FOREIGN KEY (id_recette) REFERENCES Recettes(id_recette)
);
id_commande (clé primaire)
date_commande
montant_total
statut (en attente, en cours, terminée, annulée)
CREATE TABLE Commandes (
id_commande INT NOT NULL AUTO_INCREMENT,
date_commande DATE NOT NULL,
montant_total DECIMAL(10,2) NOT NULL,
statut VARCHAR(50) NOT NULL,
PRIMARY KEY (id_commande)
);
