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 !
Table des matières de cette formation Php, JavaScript, CSS (durée : 7h31m)
-
Présentation du projet fullstack #2
- Présentation du projet fullstack #2 gratuit 00:06:52
-
Partie 1: Mise en page HTML, CSS et animation JavaScript
- Ce que nous allons faire gratuit 00:02:50
- Mise en place du côté responsive de notre projet 00:13:00
- Mise en place des bases du formulaire 00:18:31
- Positionnement des labels 00:10:33
- Déplacement des labels 00:10:10
- Amélioration du fonctionnement des labels 00:06:09
- Mise en place du HTML de la partie info 00:09:18
- Mise en forme de la partie info 00:10:31
- Derniers réglages 00:06:04
-
Partie 2: Contrôle du formulaire côté front, avec le JavaScript
- Ce que nous allons faire gratuit 00:03:06
- Manipulation du bouton de formulaire 00:13:22
- Programmer l'activation ou la désactivation du bouton de formulaire 00:13:51
- Contrôle de la qualité de l'info entrée dans le champ prenom 00:14:18
- Mise en place d'une fonction de contrôle 00:09:41
- Augmentation du contrôle 00:05:58
- On augmente l'expérience utilisateur 00:14:14
- Contrôle de l'email 00:08:58
- Contrôle de validation de formulaire 00:08:59
-
Partie 3: Transition au moment de la validation du formulaire
- Ce que nous allons faire gratuit 00:01:43
- Création de la boîte box-reponse 00:06:06
- Mise en forme de la boîte box-reponse 00:07:50
- Afficher et cacher les boîtes 00:09:31
- Mise en place d'une animation 00:07:41
-
Partie 4: Envoi de mails
- Ce que nous allons faire gratuit 00:06:25
- Problème backend suite au développement frontend ! 00:07:41
- Mise en place de la technologie AJAX 00:12:24
- Création de la classe Valider 00:09:06
- Mettre en place le retour de la classe 00:05:31
- Test de présence du nom 00:06:06
- Augmentation de la puissance de la méthode getNom 00:05:03
- Affichage du retour de la méthode getNom 00:05:36
- La méthode getPrenom 00:10:24
- Formatage du nom et du prénom 00:06:10
- Conditionnement du message de retour de formulaire 00:11:37
- Les méthodes getEmail et getMsg 00:06:56
- Création du premier email à envoyer 00:08:31
- Création de la méthode EnvoiMail 00:11:15
- Test d'envoi de mail 00:07:11
- Evoi mail d'accusé de réception 00:07:43
- On décommente 00:01:46
-
Partie 5: Insertion du retour formulaire dans une table
- Ce que nous allons faire gratuit 00:01:01
- Création de la BDD 00:02:51
- Instanciation de la classe PDO 00:04:39
- Création de la classe ContactManager 00:04:37
- Création de la méthode CreateContact 00:09:34
- Conditionnement de la requête d'insertion 00:12:37
- Test de notre travail 00:02:44
- Résolution du problème des caractères accentués 00:06:06
-
Partie 6: Mise en place d'un recaptcha
- Ce que nous allons faire gratuit 00:00:51
- Installation de reCAPTCHA côté front 00:07:01
- Déclaration de la data gtoken dans le fichier script-formulaire.js 00:05:09
- Déclaration de la data gtoken dans la classe Valider 00:07:38
- Vérification de l'insertion dans la BDD 00:06:21
- On vérifie si le token est vide 00:01:35
- On installe les codes backend fournis par google reCAPTACHA 00:09:18
- Gestion du token 00:05:51
-
Partie 7: Mise en place d'un loader
- Ce que nous allons faire gratuit 00:00:59
- Mise en place d'un loader 00:11:53
-
Conclusion
- Conclusion 00:01:55
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
Trés bon projet bien expliquer et beaucoup plus formateur que des cours théorique
-
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
-
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.
-
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
note moyenne
avis laissés