TP7 Création d’un projet Bootstrap
TP7 Vente de cours et de vidéos
-
Objectifs
- En réalisant ce TP, vous allez apprendre à concevoir et à créer une base de données relationnelle pour stocker les données relatives aux utilisateurs, aux cours, aux vidéos, aux achats et aux notes. Vous allez également apprendre à créer un site web dynamique en utilisant des langages de programmation web tels que PHP, HTML, CSS et JavaScript.
-
Description
- Voici une proposition de TP pour créer un site web de vente de cours et de vidéos basé sur le schéma de base de données EduMarket que vous avez fourni :
- Tout d’abord, vous pouvez créer une page d’accueil pour votre site web. Cette page peut inclure des informations sur les derniers cours et vidéos ajoutés, les offres spéciales, les meilleures ventes, etc.
- Ensuite, vous pouvez créer une page de recherche pour permettre aux utilisateurs de rechercher des cours et des vidéos en fonction de différents critères, tels que le titre, la catégorie, le prix, etc. Vous pouvez utiliser une barre de recherche et des filtres pour aider les utilisateurs à affiner leurs recherches.
- Vous pouvez ensuite créer des pages de détails pour chaque cours et vidéo, où les utilisateurs peuvent voir plus d’informations sur chaque cours et vidéo, telles que le titre, la description, le prix, la durée, etc. Sur ces pages, les utilisateurs peuvent également acheter le cours ou la vidéo.
- Vous pouvez créer une page de profil pour permettre aux utilisateurs de gérer leur compte, telles que les informations personnelles, les achats précédents, les notes et commentaires, etc.
- Vous pouvez également créer une page de panier d’achat pour permettre aux utilisateurs de voir les cours et les vidéos qu’ils ont ajoutés à leur panier et de finaliser leur achat.
- Enfin, vous pouvez ajouter des fonctionnalités de sécurité telles que la protection contre les attaques de script, la validation des entrées utilisateur pour éviter les attaques par injection SQL, ainsi que l’utilisation de protocoles de cryptage tels que HTTPS pour sécuriser les transactions de paiement.
- Pour réaliser ce TP, vous pouvez utiliser des technologies telles que PHP, MySQL, HTML, CSS et JavaScript. Vous pouvez également utiliser des frameworks tels que Laravel ou CodeIgniter pour faciliter la gestion de la base de données et la création du site web.
-
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 TP7 Création de projet projet07 – 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 schémas suivant:
-
Partie 02 : Base de données
- Schéma de base de données : EduMarket
- Table «
Utilisateur« - Description : Cette table stocke les informations relatives aux utilisateurs qui ont un compte sur le site EduMarket, tels que leur nom, prénom, adresse e-mail, mot de passe et autres informations de profil.
- Table «
Cours« - Description : Cette table stocke les informations relatives aux cours proposés sur EduMarket, tels que leur titre, leur description, leur catégorie, leur prix et leur durée.
- Table «
Vidéo« - Description : Cette table stocke les informations relatives aux vidéos proposées sur EduMarket, telles que leur titre, leur description, leur catégorie, leur prix et leur durée.
- Table «
Achat« - Description : Cette table stocke les informations relatives aux achats effectués par les utilisateurs sur EduMarket, tels que le cours ou la vidéo acheté, la date et le montant de l’achat, ainsi que les informations de facturation.
- Table «
Note« - Description : Cette table stocke les évaluations et les commentaires laissés par les utilisateurs sur les cours et les vidéos achetés sur EduMarket.
-
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.
Utilisateur(
id_utilisateur,
nom,
prenom,
email,
mot_de_passe,
adresse,
ville,
code_postal,
pays)
CREATE TABLE Utilisateur (
id_utilisateur INT PRIMARY KEY,
nom VARCHAR(50),
prenom VARCHAR(50),
email VARCHAR(50),
mot_de_passe VARCHAR(50),
adresse VARCHAR(50),
ville VARCHAR(50),
code_postal VARCHAR(10),
pays VARCHAR(50)
);
Cours(
id_cours,
titre,
description,
categorie,
prix,
duree)
CREATE TABLE Cours (
id_cours INT PRIMARY KEY,
titre VARCHAR(100),
description TEXT,
categorie VARCHAR(50),
prix DECIMAL(8,2),
duree INT
);
Vidéo(
id_video,
titre,
description,
categorie,
prix,
duree)
CREATE TABLE Vidéo (
id_video INT PRIMARY KEY,
titre VARCHAR(100),
description TEXT,
categorie VARCHAR(50),
prix DECIMAL(8,2),
duree INT
);
Achat(
id_achat,
id_utilisateur,
id_cours,
id_video,
date_achat,
montant,
mode_paiement,
adresse_livraison,
ville_livraison,
code_postal_livraison,
pays_livraison)
CREATE TABLE Achat (
id_achat INT PRIMARY KEY AUTO_INCREMENT,
id_utilisateur INT NOT NULL,
id_cours INT,
id_video INT,
date_achat DATE NOT NULL,
montant DECIMAL(10,2) NOT NULL,
mode_paiement VARCHAR(50) NOT NULL,
adresse_livraison VARCHAR(255),
ville_livraison VARCHAR(255),
code_postal_livraison VARCHAR(50),
pays_livraison VARCHAR(255),
FOREIGN KEY (id_utilisateur) REFERENCES Utilisateur(id_utilisateur),
FOREIGN KEY (id_cours) REFERENCES Cours(id_cours),
FOREIGN KEY (id_video) REFERENCES Vidéo(id_video)
);
Note(
id_note,
id_utilisateur,
id_cours,
id_video,
note,
commentaire)CREATE TABLE Note (
id_note INT PRIMARY KEY AUTO_INCREMENT,
id_utilisateur INT NOT NULL,
id_cours INT,
id_video INT,
note INT NOT NULL,
commentaire TEXT,
FOREIGN KEY (id_utilisateur) REFERENCES Utilisateur(id_utilisateur),
FOREIGN KEY (id_cours) REFERENCES Cours(id_cours),
FOREIGN KEY (id_video) REFERENCES Vidéo(id_video)
);
