Fullstack JS - Développez un site eCommerce - React, Node, Express, MongoDB & Stripe
Fullstack JS - Développez un site eCommerce - React, Node, Express, MongoDB & Stripe
Pour ce nouveau projet fullstack, je vous propose la mise en place d'un système d'avis et de notation complet !
Au programme de ce tuto Fullstack : créer un système d'avis et de notation
Voici comment fonctionnera notre système de notation :
- L'utilisateur pourra ainsi choisir le nombre d'étoiles qu'il souhaitera donner.
- Nous mettrons en place des animations en utilisant le CSS afin d'augmenter l'expérience utilisateur.
- Lorsque l'utilisateur passera le pointeur de sa souris sur une étoile, alors viendra s'afficher sur la page, la valeur de l'étoile survolée.
- L'utilisateur sera également invité à entrer un commentaire dans un textarea de formulaire prévu à cet effet.
- Un contrôle frontend ainsi qu'un contrôle backend sera systématiquement effectué afin de conserver la cohérence des informations qui seront stockées dans une base de données MySQL.
- Lorsque le formulaire de notation sera validé sur clic d'un bouton de formulaire, alors nous mettrons en place une animation qui fera disparaitre de façon harmonieuse, la fenêtre contenant le formulaire pour faire apparaître un message de remerciement ou d'erreur le cas échéant, ainsi que la note moyenne !
Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
Bonne formation !
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Chapitre 1
Présentation du projet fullstack #3
Présentation du projet fullstack #3
Chapitre 2
Partie 1: Mise en page HTML, CSS
Partie 1: Mise en page HTML, CSS
Chapitre 3
Partie 2: Mise en place d'une base de données
Partie 2: Mise en place d'une base de données
Chapitre 4
Partie 3: Mise en place du formulaire d'avis et des étoiles
Partie 3: Mise en place du formulaire d'avis et des étoiles
Chapitre 5
Partie 4: Contrôle du formulaire côté frontend
Partie 4: Contrôle du formulaire côté frontend
Chapitre 6
Partie 5: Contrôle du formulaire côté backend
Partie 5: Contrôle du formulaire côté backend
Chapitre 7
Partie 6: Mise en place d'animations
Partie 6: Mise en place d'animations
Plan détaillé du cours
Chapitre 1 : Présentation du projet fullstack #3
05m24
Leçon 1Présentation du projet fullstack #3
Chapitre 2 : Partie 1: Mise en page HTML, CSS
21m14
Leçon 1Ce que nous allons faire
Leçon 2Mise en place du code HTML
Leçon 3Mise en forme du code CSS 1/2
Leçon 4Mise en forme du code CSS 2/2
Chapitre 3 : Partie 2: Mise en place d'une base de données
38m44
Leçon 1Ce que nous allons faire
Leçon 2Création de la BDD
Leçon 3Mise en place de la classe PDO
Leçon 4Mise en place de la classe Avis
Leçon 5Mise en place de la classe AvisManager
Leçon 6Insérer les avis dans la table avis
Chapitre 4 : Partie 3: Mise en place du formulaire d'avis et des étoiles
43m47
Leçon 1Ce que nous allons faire
Leçon 2Mise en forme du formulaire
Leçon 3On écoute quelle étoile est cliquée
Leçon 4On déselectionne la ou les étoiles précédentes
Leçon 5On active les étoiles précédentes
Leçon 6On modifie l'étoile survolée
Leçon 7On ajoute une phrase correspondant à l'étoile cliquée
Chapitre 5 : Partie 4: Contrôle du formulaire côté frontend
25m42
Leçon 1Ce que nous allons faire
Leçon 2Contrôler qu'une note et un commentaire est donné
Leçon 3Le commentaire ne doit pas dépasser 250 caractères
Chapitre 6 : Partie 5: Contrôle du formulaire côté backend
50m56
Leçon 1Ce que nous allons faire
Leçon 2Mise en place de la technologie Ajax
Leçon 3Conditionnement de l'insertion dans la table
Leçon 4Récupération de la réponse Json
Leçon 5Mise en place d'une animation
Chapitre 7 : Partie 6: Mise en place d'animations
36m21
Leçon 1Ce que nous allons faire
Leçon 2Création d'une animation de loading
Leçon 3Programmation de l'affichage de l'animation de loading
Leçon 4Mise en apparition du chiffre de la valeur de l'étoile survolée
Leçon 5Programmation de l'apparition du chiffre
Chapitre 8 : Partie 7: Mise en place de la note moyenne de l'article courant
21m19
Leçon 1Ce que nous allons faire
Leçon 2Mise en place HTML et CSS de la note moyenne
Leçon 3Ecriture d'une méthode qui retourne la note moyenne
Leçon 4Mise en place du retour Json
Chapitre 9 : Test et Conclusion
08m12
Leçon 1Test et Conclusion
Avis des apprenants