TP6 Création d’un projet Bootstrap
TP6 Développement d’un site web de formation en ligne
-
Objectifs
- Être capable d’utiliser les différents éléments du framework Bootstrap 4 pour créer une page Web.
-
Description du TP
- Dans ce TP, vous devrez développer un site web de formation en ligne basé sur la base de données « FormationWeb » que vous allez créér. Le site web devra permettre aux utilisateurs de s’inscrire, de parcourir les cours disponibles, de visionner les vidéos de formation et de suivre leur progression.
- Les fonctionnalités principales que vous devrez implémenter sont les suivantes :
- Inscription et connexion des utilisateurs.
- Affichage de la liste des cours disponibles.
- Affichage des chapitres et des leçons pour chaque cours.
- Visionnage des vidéos de formation.
- Suivi de la progression des utilisateurs dans les cours.
- Possibilité pour les utilisateurs de laisser des commentaires sur les leçons.
- Génération de rapports de visionnage pour les administrateurs.
- Pour la réalisation de ce TP, vous pourrez utiliser les technologies suivantes : PHP, HTML, CSS, JavaScript, MySQL. Vous pourrez également utiliser des Framework et des bibliothèques telles que Bootstrap, jQuery, ou encore des frameworks PHP tels que Laravel ou Symfony.
- Ce TP permettra aux étudiants de mettre en pratique les compétences acquises en développement web, en conception de bases de données et en gestion de projet.
-
Travail à réaliser:
-
Partie 01 : Page index
- Utiliser les classes de Bootstrap 4 pour créer la page Web illustrée dans le vidéo ci-dessous
- Commencer avec le fichier de code de démarrage TP6 Création de projet projet06 – départ en cliquant avec le bouton droit de la souris et en enregistrant le fichier sur votre ordinateur avec l’extension html.
- Télécharger les images depuis l’adresse Suivante.
- Pour faire les petites icônes utiliser la police d’icône Font Awesome.
- Le résultat final est décrit par le vidéo suivant:
-
Partie 02 : Base de données
- Schéma de base de données : FormationWeb
- Table «
Utilisateur
« - Table «
Cours
« - Table «
Chapitre
« - Table «
Leçon
« - Table «
Commentaire
« - Table «
DuréeVisionnage
« -
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.
id_utilisateur (clé primaire)
nom_utilisateur
email_utilisateur
mot_de_passe
CREATE TABLE Utilisateur (
id_utilisateur INT PRIMARY KEY AUTO_INCREMENT,
nom_utilisateur VARCHAR(255) NOT NULL,
email_utilisateur VARCHAR(255) NOT NULL,
mot_de_passe VARCHAR(255) NOT NULL
);
id_cours (clé primaire)
titre_cours
description_cours
date_creation_cours
id_utilisateur (clé étrangère faisant référence à l'utilisateur qui a créé le cours)
CREATE TABLE Cours (
id_cours INT PRIMARY KEY AUTO_INCREMENT,
titre_cours VARCHAR(255) NOT NULL,
description_cours TEXT,
date_creation_cours DATE,
id_utilisateur INT,
FOREIGN KEY (id_utilisateur) REFERENCES Utilisateur(id_utilisateur)
);
id_chapitre (clé primaire)
titre_chapitre
description_chapitre
id_cours (clé étrangère faisant référence au cours auquel appartient le chapitre)
CREATE TABLE Chapitre (
id_chapitre INT PRIMARY KEY AUTO_INCREMENT,
titre_chapitre VARCHAR(255) NOT NULL,
description_chapitre TEXT,
id_cours INT,
FOREIGN KEY (id_cours) REFERENCES Cours(id_cours)
);
id_lecon (clé primaire)
titre_lecon
contenu_lecon
ordre_lecon
id_chapitre (clé étrangère faisant référence au chapitre auquel appartient la leçon)
CREATE TABLE Leçon (
id_lecon INT PRIMARY KEY AUTO_INCREMENT,
titre_lecon VARCHAR(255) NOT NULL,
contenu_lecon TEXT,
ordre_lecon INT,
id_chapitre INT,
FOREIGN KEY (id_chapitre) REFERENCES Chapitre(id_chapitre)
);
id_commentaire (clé primaire)
contenu_commentaire
date_creation_commentaire
id_utilisateur (clé étrangère faisant référence à l'utilisateur qui a créé le commentaire)
id_lecon (clé étrangère faisant référence à la leçon à laquelle le commentaire est lié)
CREATE TABLE Commentaire (
id_commentaire INT PRIMARY KEY AUTO_INCREMENT,
contenu_commentaire TEXT,
date_creation_commentaire DATETIME,
id_utilisateur INT,
id_lecon INT,
FOREIGN KEY (id_utilisateur) REFERENCES Utilisateur(id_utilisateur),
FOREIGN KEY (id_lecon) REFERENCES Leçon(id_lecon)
);
id_duree (clé primaire)
id_utilisateur (clé étrangère faisant référence à l'utilisateur qui a visionné la vidéo)
id_cours (clé étrangère faisant référence au cours qui a été visionné)
id_lecon (clé étrangère faisant référence à la leçon qui a été visionnée)
duree_visionnage (temps de visionnage en minutes)
CREATE TABLE DuréeVisionnage (
id_duree INT PRIMARY KEY AUTO_INCREMENT,
id_utilisateur INT,
id_cours INT,
id_lecon INT,
duree_visionnage INT,
FOREIGN KEY (id_utilisateur) REFERENCES Utilisateur(id_utilisateur),
FOREIGN KEY (id_cours) REFERENCES Cours(id_cours),
FOREIGN KEY (id_lecon) REFERENCES Leçon(id_lecon)
);