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 !
Table des matières de cette formation Php, JavaScript, CSS, MySQL (durée : 4h11m)
-
Présentation du projet fullstack #3
- Présentation du projet fullstack #3 gratuit 00:05:24
-
Partie 1: Mise en page HTML, CSS
- Ce que nous allons faire gratuit 00:01:35
- Mise en place du code HTML 00:06:07
- Mise en forme du code CSS 1/2 00:09:21
- Mise en forme du code CSS 2/2 00:04:11
-
Partie 2: Mise en place d'une base de données
- Ce que nous allons faire gratuit 00:02:31
- Création de la BDD 00:04:57
- Mise en place de la classe PDO 00:06:30
- Mise en place de la classe Avis 00:07:14
- Mise en place de la classe AvisManager 00:07:53
- Insérer les avis dans la table avis 00:09:39
-
Partie 3: Mise en place du formulaire d'avis et des étoiles
- Ce que nous allons faire gratuit 00:01:13
- Mise en forme du formulaire 00:10:47
- On écoute quelle étoile est cliquée 00:06:33
- On déselectionne la ou les étoiles précédentes 00:04:39
- On active les étoiles précédentes 00:07:57
- On modifie l'étoile survolée 00:04:20
- On ajoute une phrase correspondant à l'étoile cliquée 00:08:18
-
Partie 4: Contrôle du formulaire côté frontend
- Ce que nous allons faire gratuit 00:01:06
- Contrôler qu'une note et un commentaire est donné 00:15:17
- Le commentaire ne doit pas dépasser 250 caractères 00:09:19
-
Partie 5: Contrôle du formulaire côté backend
- Ce que nous allons faire gratuit 00:02:38
- Mise en place de la technologie Ajax 00:13:39
- Conditionnement de l'insertion dans la table 00:11:24
- Récupération de la réponse Json 00:07:21
- Mise en place d'une animation 00:15:54
-
Partie 6: Mise en place d'animations
- Ce que nous allons faire gratuit 00:01:37
- Création d'une animation de loading 00:12:24
- Programmation de l'affichage de l'animation de loading 00:07:05
- Mise en apparition du chiffre de la valeur de l'étoile survolée 00:07:53
- Programmation de l'apparition du chiffre 00:07:22
-
Partie 7: Mise en place de la note moyenne de l'article courant
- Ce que nous allons faire 00:00:41
- Mise en place HTML et CSS de la note moyenne 00:04:41
- Ecriture d'une méthode qui retourne la note moyenne 00:06:13
- Mise en place du retour Json 00:09:44
-
Test et Conclusion
- Test et Conclusion 00:08:12
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
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
-
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.
-
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!
-
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
note moyenne
avis laissés