Comment faire parler du texte grâce au JavaScript
Comment faire parler du texte grâce au JavaScript
Créer un système de création de compte avec validation par e-mail — tuto Fullstack complet
Vous souhaitez développer un système d’inscription sécurisé et professionnel, comme ceux utilisés sur les véritables applications web ?
Dans ce tuto fullstack, je vous guide pas à pas dans la création d’une fonctionnalité essentielle : l’enregistrement d’un utilisateur avec envoi et vérification d’un code de validation par e-mail.
Vous y apprendrez à :
- Concevoir une interface utilisateur moderne en HTML/CSS
- Générer un code de validation unique et temporaire
- Envoyer ce code par e-mail de manière sécurisée
- Vérifier le code saisi côté serveur
- Mettre en place les bonnes pratiques en matière de sécurité et d’expérience utilisateur
Ce tutoriel s’adresse aux développeurs qui souhaitent :
- Approfondir leurs compétences en développement fullstack
- Comprendre les mécanismes d’authentification et de validation
- Travailler sur un cas concret, directement applicable à des projets professionnels
Chaque étape est expliquée avec clarté et rigueur, pour vous permettre de bien comprendre le fonctionnement complet du système, du frontend au backend.
Si vous cherchez un projet stimulant et formateur, ce tutoriel est fait pour vous. 🚀
Autres Projets FullStack :
- Projet Fullstack #5 - Lire, insérer, modifier & supprimer des biens immobiliers (10h51min)
- Projet Fullstack #4 - Gestion d'une commande -Partie Admin & Partie (8h42min)
- Projet Fullstack #3 - Créer un système d'avis et de notation (4h11min)
- Projet Fullstack #2 - Créer un formulaire de contact moderne complet (7h31min)
- Projet Fullstack #1 - Créer un programme d'upload moderne complet (4h02min)
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Chapitre 1
Partie 1: Créer les formulaires Login & Create
Partie 1: Créer les formulaires Login & Create
Chapitre 2
Partie 2: Vérifier les formulaires côté Frontend
Partie 2: Vérifier les formulaires côté Frontend
Chapitre 3
Partie 3: Envoyer un Code aléatoire par mail
Partie 3: Envoyer un Code aléatoire par mail
Chapitre 4
Partie 4: Gérer le Code de Validation
Partie 4: Gérer le Code de Validation
Chapitre 5
Partie 5: Accéder au Compte
Partie 5: Accéder au Compte
Table des matières
Chapitre 1 : Partie 1: Créer les formulaires Login & Create
1h31
Leçon 1Présentation de la Partie 1
Leçon 2Ecrire le code HTML du formulaire de Login
Leçon 3Donner une ambiance à notre page web
Leçon 4Superposer une image de fond au Body
Leçon 5Mettre en forme le Header de la Section
Leçon 6Superpositionner le label
Leçon 7Superpositionner l'icone
Leçon 8Décaler le label sous le focus
Leçon 9Terminer la mise en forme du formulaire
Leçon 10Ecrire le code HTML du formulaire de Create
Leçon 11Superpositionner les formulaires
Leçon 12Activer les formulaire via le JavaScript
Leçon 13Manipuler la hauteur de la Section
Leçon 14Manipuler les H2
Leçon 15Manipuler les opacités
Chapitre 2 : Partie 2: Vérifier les formulaires côté Frontend
1h22
Leçon 1Présentation de la Partie 2
Leçon 2Ecrire le code HTML de la fenêtre Modale
Leçon 3Mettre en forme la fenêtre Modale
Leçon 4Faire fonctionner la fenêtre Modale
Leçon 5Rendre fluide la fenêtre Modale
Leçon 6Vérifier l'email entré
Leçon 7Créer un motif d'email
Leçon 8Vérifier l'email entré
Leçon 9Déclarer les variables du formulaire de Login
Leçon 10Vérifier le formulaire de Login
Leçon 11Modifier la hauteur de la section
Leçon 12Déclarer les variables du formulaire de Create
Leçon 13Vérifier le formulaire de Create
Leçon 14On vérifie le bon fonctionnement de notre programme
Chapitre 3 : Partie 3: Envoyer un Code aléatoire par mail
2h09
Leçon 1Présentation de la Partie 3
Leçon 2Créer la base de données
Leçon 3Instancier PDO
Leçon 4Créer une classe d'entité User
Leçon 5Créer une classe UserManager
Leçon 6Créer la méthode CreateUser
Leçon 7Créer la méthode VerifUser
Leçon 8Créer le fichier user-insert.php
Leçon 9Tester les champs du formulaire
Leçon 10Instancier les classes
Leçon 11Définir les variables Pass, Code et Fin
Leçon 12Ecrire les bases d'une fonction Ajax pour réaliser l'insertion
Leçon 13Faire un Fetch
Leçon 14Tester le formulaire d'insertion
Leçon 15Correction du bug
Leçon 16On manipule la Section
Leçon 17Améliorer l'expérience utilisateur
Leçon 18Créer un loader d'attente
Leçon 19Faire fonctionner le loader
Leçon 20On teste les conditions Php
Leçon 21Tester les variables en Php
Leçon 22Ecrire une méthode d'envoi d'email de vérification
Leçon 23Créer le contenu du mail
Leçon 24Teste du programme sur un serveur distant
Chapitre 4 : Partie 4: Gérer le Code de Validation
1h37
Leçon 1Présentation de la Partie 4
Leçon 2Déclarer l'url dans le mail envoyé
Leçon 3Mettre en place une règle de réécriture
Leçon 4Créer le formulaire HTML de validation du code
Leçon 5Mettre en forme le formulaire HTML de validation du code
Leçon 6Récupérer l'identifiant depuis l'URL
Leçon 7On donne le focus au champ suivant
Leçon 8On écoute la soumission du formulaire
Leçon 9Créer une fonction Ajax
Leçon 10Récupérer les datas
Leçon 11Créer la méthode VerifCode
Leçon 12Faire la liaison entre le FRONT et le BACK
Leçon 13Tester le programme
Leçon 14Correction du problème
Leçon 15Créer la méthode UpdateCode
Leçon 16Invoquer la méthode UpdateCode
Leçon 17Tester le programme
Chapitre 5 : Partie 5: Accéder au Compte
1h56
Leçon 1Présentation de la Partie 5
Leçon 2Créer une fonction asynchrone pour vérifier l'email entré
Leçon 3Créer le fichier qui relie le Front et le Back
Leçon 4Ecrire la méthode VerifEmailForgot
Leçon 5Retour au fichier de liaison
Leçon 6Ecrire la méthode EmailForgot
Leçon 7Tester le programme
Leçon 8Mettre en place une règle de réécriture
Leçon 9Ecrire le formulaire de génération de Password
Leçon 10Récupérer les paramètres depuis l'URL
Leçon 11Ecrire une fonction Ajax
Leçon 12Ecrire la méthode UpdatePass
Leçon 13Invoquer UpdatePass
Leçon 14Tester le code
Leçon 15Correction 1
Leçon 16Correction 2
Leçon 17Crypter la réédition du Pass
Leçon 18Ecouter le formulaire de Login
Leçon 19Ecrire la fonction JS AjaxUserAcces
Leçon 20Ecrire le fichier Php de liaison
Leçon 21Définir la redirection
Leçon 22Ecrire la méthode AccesUser
Leçon 23Tester le programme
Leçon 24Nettoyer la table user
Aperçus
