Projet Fullstack #3 - Créer un système d'avis et de notation
ERROR
00:00
00:00

Tuto Projet Fullstack #3 - Créer un système d'avis et de notation

Carl Brison
49,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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
Chapitre 2
Partie 1: Mise en page HTML, CSS
Chapitre 3
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
Chapitre 5
Partie 4: Contrôle du formulaire côté frontend
Chapitre 6
Partie 5: Contrôle du formulaire côté backend
Chapitre 7
Partie 6: Mise en place d'animations

Plan détaillé du cours

Chapitre 1 : Présentation du projet fullstack #3
05m24s
 
Leçon 1Présentation du projet fullstack #3
Chapitre 2 : Partie 1: Mise en page HTML, CSS
21m14s
 
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
38m44s
 
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
43m47s
 
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
25m42s
 
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
50m56s
 
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
36m21s
 
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
21m19s
 
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
08m12s
 
Leçon 1Test et Conclusion

Avis des apprenants

Détail des avis
6
Apprenants
5
Commentaires
5/5
Note moyenne
5/5
5
4/5
0
3/5
0
2/5
0
1/5
0
Cédric Leman
Cédric Leman
Publié le 01/12/2022
Excellent tuto, mais faut s'accrocher tout va bien mais à la fin pour la note moyenne ça se complique, il faut se balader de fichier en fichier, retrouver la fonction qui fait quoi avec qui piouuu c'est pas simple faut rester focus autrement c'est mort mdr entre savoir faire une techno une par par une et ensuite moduler le tout y'a encore un GRAND pas mais bon on s'accroche
Carl Brison
Carl Brison
Merci et bravo pour le suivi ;-)
Valérie Arno
Valérie Arno
Publié le 26/09/2022
Le tuto est bien conçu et les explications données sont très bien aussi : c'est le savoir-faire Carl Brison. Comprendre le code est une chose, mais l'écrire soi-même en est une autre. Ce n'est pas (encore) dans mes compétences à ce niveau, mais ça ne fait pas de mal de voir plus grand.
Carl Brison
Carl Brison
Merci Valérie et bravo de sortir de votre zone de confort !
Bernard Chabloz
Bernard Chabloz
Publié le 11/10/2021
Encore un excellent tuto, merci ! Comme je suis allergique aux moyennes "toutes nues", j'ai ajouté l'écart-type (déviation standard). NB: VS Code ne reconnait pas cette fonction std(). Cependant une chose m'a échappé: comment est-il possible de placer (comme vous semblez l'avoir fait) en "absolute" une boite sans la mettre DANS le conteneur avec position "relative"? Si je fais ça, ça me place la boite relativement à ... la fenêtre!
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire. Pour vous répondre, #afficherNote est en absolute et article section est en relative (Regardez le html)

Vos questions sur le cours

Avec quelles versions de logiciels ce tuto est-il compatible ?

Php 7, CSS 3

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Attendez ! 🤗

Accédez à plus de 1373 tutos gratuits

Notre politique de protection des données