Projet Fullstack #2 - Créer un formulaire de contact moderne complet
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO Projet Fullstack #2 - Créer un formulaire de contact moderne complet

Carl Brison
78,99€
3 paiements de 26,00€ avec Klarna. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Pour ce deuxième projet de développement web Fullstack, je vous propose de réaliser un formulaire de contact très complet !

Pourquoi Fullstack ? Car nous mettrons en oeuvre à la fois des compétences Front-end, que Back-End.
On vous propose dans ce cours en ligne, de mettre en orchestration les langages HTML, CSS, Javascript, PHP/MySQL pour obtenir un projet final concret.
 

Voici le déroulé de cette formation créer un formulaire de contact fullstack

Cette formation en vidéo se déroulera en 6 parties bien distinctes, que vous pourrez suivre à votre propre rythme.

  • La 1ère partie sera consacrée à la mise en place Front End du formulaire.
    Pour cela, nous allons utiliser le langage HTML pour construire notre formulaire, puis le langage CSS pour le mettre en forme. Nous en profiterons pour ajouter un effet sur le placeholder de nos différents champs, afin d'améliorer l'expérience utilisateur. Et pour cela, nous utiliserons le langage JavaScript.
  • La 2ème partie sera consacrée au contrôle du formulaire côté front.
    Nous ferons appel une nouvelle fois au langage JavaScript.
  • La 3ème partie sera une partie intermédiaire entre le côté front et le côté back de notre développement.
    Ici, nous allons effectuer une transition au moment de la validation du formulaire, là aussi afin d'augmenter l'expérience utilisateur.
  • La 4ème partie sera consacrée au côté Back end de notre développement.
    Nous allons utiliser le langage PHP en programmation orientée objet (POO).
    Nous allons créer une classe de validation du formulaire, ainsi qu'une méthode permettant l'envoi de mail si tous les champs du formulaire répondent à nos attentes.
  • La 5ème partie sera consacrée à l'insertion des données issues du formulaire dans une base de données MySQL.
    Une nouvel fois avec la POO. Nous allons créer une classe de Manager qui se chargera de l'insertion, sous couvert que les données issues du formulaire répondent à nos attentes.
  • La 6ème partie sera consacrée à la protection de notre formulaire.
    Nous mettrons en place le système de Recaptcha de Google.
  • La 7ème et dernière partie sera consacrée à la mise en place d'une animation de loading pour faire patienter l'utilisateur.
    Pour cela nous utiliserons le langage CSS qui sera couplé aux langages HTML et JavaScript.

A la fin de cette formation, vous aurez acquis un grand nombre de compétences. Vous aurez développé un code propre et moderne.
Et aurez abordé un certain nombre de problématiques que le développeur fullstack est amené à rencontrer dans son quotidien.

Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.

Tous les fichiers de travail sont fournis !
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.

Si ce type de formation très orientée projet vous intéresse, apprenez à créer un système d'upload complet.

Bonne formation !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Présentation du projet fullstack #2
Chapitre 2
Partie 1: Mise en page HTML, CSS et animation JavaScript
Chapitre 3
Partie 2: Contrôle du formulaire côté front, avec le JavaScript
Chapitre 4
Partie 3: Transition au moment de la validation du formulaire
Chapitre 5
Partie 4: Envoi de mails
Chapitre 6
Partie 5: Insertion du retour formulaire dans une table
Chapitre 7
Partie 6: Mise en place d'un recaptcha

Plan détaillé du cours

Chapitre 1 : Présentation du projet fullstack #2
06m52
 
Leçon 1Présentation du projet fullstack #2
Chapitre 2 : Partie 1: Mise en page HTML, CSS et animation JavaScript
1h27
 
Leçon 1Ce que nous allons faire
Leçon 2Mise en place du côté responsive de notre projet
Leçon 3Mise en place des bases du formulaire
Leçon 4Positionnement des labels
Leçon 5Déplacement des labels
Leçon 6Amélioration du fonctionnement des labels
Leçon 7Mise en place du HTML de la partie info
Leçon 8Mise en forme de la partie info
Leçon 9Derniers réglages
Chapitre 3 : Partie 2: Contrôle du formulaire côté front, avec le JavaScript
1h32
 
Leçon 1Ce que nous allons faire
Leçon 2Manipulation du bouton de formulaire
Leçon 3Programmer l'activation ou la désactivation du bouton de formulaire
Leçon 4Contrôle de la qualité de l'info entrée dans le champ prenom
Leçon 5Mise en place d'une fonction de contrôle
Leçon 6Augmentation du contrôle
Leçon 7On augmente l'expérience utilisateur
Leçon 8Contrôle de l'email
Leçon 9Contrôle de validation de formulaire
Chapitre 4 : Partie 3: Transition au moment de la validation du formulaire
32m51
 
Leçon 1Ce que nous allons faire
Leçon 2Création de la boîte box-reponse
Leçon 3Mise en forme de la boîte box-reponse
Leçon 4Afficher et cacher les boîtes
Leçon 5Mise en place d'une animation
Chapitre 5 : Partie 4: Envoi de mails
2h09
 
Leçon 1Ce que nous allons faire
Leçon 2Problème backend suite au développement frontend !
Leçon 3Mise en place de la technologie AJAX
Leçon 4Création de la classe Valider
Leçon 5Mettre en place le retour de la classe
Leçon 6Test de présence du nom
Leçon 7Augmentation de la puissance de la méthode getNom
Leçon 8Affichage du retour de la méthode getNom
Leçon 9La méthode getPrenom
Leçon 10Formatage du nom et du prénom
Leçon 11Conditionnement du message de retour de formulaire
Leçon 12Les méthodes getEmail et getMsg
Leçon 13Création du premier email à envoyer
Leçon 14Création de la méthode EnvoiMail
Leçon 15Test d'envoi de mail
Leçon 16Evoi mail d'accusé de réception
Leçon 17On décommente
Chapitre 6 : Partie 5: Insertion du retour formulaire dans une table
44m09
 
Leçon 1Ce que nous allons faire
Leçon 2Création de la BDD
Leçon 3Instanciation de la classe PDO
Leçon 4Création de la classe ContactManager
Leçon 5Création de la méthode CreateContact
Leçon 6Conditionnement de la requête d'insertion
Leçon 7Test de notre travail
Leçon 8Résolution du problème des caractères accentués
Chapitre 7 : Partie 6: Mise en place d'un recaptcha
43m44
 
Leçon 1Ce que nous allons faire
Leçon 2Installation de reCAPTCHA côté front
Leçon 3Déclaration de la data gtoken dans le fichier script-formulaire.js
Leçon 4Déclaration de la data gtoken dans la classe Valider
Leçon 5Vérification de l'insertion dans la BDD
Leçon 6On vérifie si le token est vide
Leçon 7On installe les codes backend fournis par google reCAPTACHA
Leçon 8Gestion du token
Chapitre 8 : Partie 7: Mise en place d'un loader
12m52
 
Leçon 1Ce que nous allons faire
Leçon 2Mise en place d'un loader
Chapitre 9 : Conclusion
01m55
 
Leçon 1Conclusion

Avis des apprenants

Détail des avis
119
Apprenants
6
Commentaires
5/5
Note moyenne
5/5
6
4/5
0
3/5
0
2/5
0
1/5
0
Sebastien Fluchon
Sebastien Fluchon
Publié le 21/12/2022
Trés bon projet bien expliquer et beaucoup plus formateur que des cours théorique
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire ;-)
Cédric Leman
Cédric Leman
Publié le 01/12/2022
Bon tuto mais c'est comment dire dur lol entre les nomOk trucOk biduleOK, j'ai été perdu, c'est assez complexe pour ma part, je finis avec une erreur est survenue mais bon, je referai plus tard complètement mais à ma façon ça va s'arranger :D enfin j'espère
Carl Brison
Carl Brison
Oui c'est costaud ! Merci pour votre commentaire
Valérie Arno
Valérie Arno
Publié le 01/11/2022
J'ai été complètement perdue tout au long des 7 parties du tuto et ça n'est pas dû au manque d'explications ni à la qualité de vos cours car tout y est servi en abondance. C'est simplement pas un truc pour moi. D'ailleurs je termine la partie 7 avec "une erreur est survenue". Super en plus d'un problème de regex dans le script-formulaire.js :-( Merci quand même pour tout ça. Autant pour moi, l'erreur venait de ce que j'avais oublié de remplacer vos clés reCaptcha par les miennes. Ça marche.
Carl Brison
Carl Brison
Oui, ce sont des scripts très complèxes. Bravos à vous d'être allé jusqu'au bout !

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

JavaScript 3

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Que contient le fichier source ?

Les codes complets de ce tutoriel

Payer plus tard ou en 3x

Prix d'achat : 78,00 €
Pour payer plus tard ou en plusieurs versements échelonnés, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez plus tard ou en plusieurs fois

3 paiements de 26,00 €
tous les mois, sans intérêts
Total : 78,00 €
Afficher les conditions : Klarna
Klarna : conditions d'utilisation du paiement différé en 3 échéances.

Attendez ! 🤗

Accédez à plus de 1427 tutos gratuits

Notre politique de protection des données