Formation complète développeur Front-End
Formation complète développeur Front-End
Pour ce 4ème projet fullstack, je vous propose la création d'un système de gestion d'une commande, de A à Z.
Pour cela, nous allons créer la partie Admin qui contiendra :
- Un menu déroulant contenant la référence de chaque commande à traiter. Ce dernier se mettra à jour automatiquement, sans rechargement de la page courante.
- Un panneau de gestion des étapes de commandes. L'opérateur aura à sa disposition un bouton pour lancer le suivi de la commande.
La conséquence de ce switch sera l'envoi d'un email au client afin de l'informer d'une nouvelle étape dans la gestion de sa commande.
Ensuite, nous allons créer la partie suivi client.
Cette partie sera accessible par le client sur simple clic d'un lien se trouvant dans le mail qu'il aura reçu.
Le suivi de commande sera composée d'une timeline qui s'activera au fur et à mesure de l'avancée de la commande.
Comme à notre habitude, nous soignerons la propreté de notre code.
Le code HTML dans les fichiers HTML
Le code CSS dans les fichiers CSS
Le code JavaScript dans les fichiers JavaScript
Le code Php dans les fichiers Php
Afin de faire la liaison entre tous ces langages, nous utiliserons la technologie Ajax au travers de l'objet XMLHttpRequest de JavaScript.
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.
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Chapitre 1
Partie 1: Mise en page HTML et CSS de la Partie Admin
Partie 1: Mise en page HTML et CSS de la Partie Admin
Chapitre 2
Partie 2: Mise en place du JavaScript de la Partie Admin
Partie 2: Mise en place du JavaScript de la Partie Admin
Chapitre 3
Partie 3: Création d'une méthode d'envoi de mail
Partie 3: Création d'une méthode d'envoi de mail
Chapitre 4
Partie 4: Afficher la réf des commandes. Backend
Partie 4: Afficher la réf des commandes. Backend
Chapitre 5
Partie 5: Afficher la référence des commandes.
Partie 5: Afficher la référence des commandes.
Chapitre 6
Partie 6: Affichage et mémorisation de l'état des commandes en temps réel
Partie 6: Affichage et mémorisation de l'état des commandes en temps réel
Chapitre 7
Partie 7: Suivi de la commande par le client
Partie 7: Suivi de la commande par le client
Plan détaillé du cours
Chapitre 1 : Partie 1: Mise en page HTML et CSS de la Partie Admin
46m24
Leçon 1Ce que nous allons faire
Leçon 2Mise en place des bases HTML de la zone Admin
Leçon 3Mise en forme des bases CSS de la zone Admin 1/2
Leçon 4Mise en forme des bases CSS de la zone Admin 2/2
Leçon 5Mise en place d'un premier switch
Leçon 6Mise en place des switchs suivants
Leçon 7Mise en place du fonctionnement des switchs
Leçon 8Mise en place de la section colis
Chapitre 2 : Partie 2: Mise en place du JavaScript de la Partie Admin
23m37
Leçon 1Ce que nous allons faire
Leçon 2On modifie les événements liés au 1er switch
Leçon 3On modifie les événements liés au 2ème switch
Leçon 4On modifie les événements liés au champ de type text
Leçon 5On modifie les événements liés au 3ème switch
Chapitre 3 : Partie 3: Création d'une méthode d'envoi de mail
40m36
Leçon 1Ce que nous allons faire
Leçon 2Création d'une méthode d'envoi de mail
Leçon 3Déclaration des attributs, des setters et des getters
Leçon 4Création du contenu du mail
Leçon 5Déclaration de l'objet XMLHttpRequest
Leçon 6Création du fichier executer.php
Leçon 7Test de notre programme
Chapitre 4 : Partie 4: Afficher la réf des commandes. Backend
1h03
Leçon 1Ce que nous allons faire
Leçon 2Création de la base de données
Leçon 3On instancie la classe PDO
Leçon 4Création de la classe Commande
Leçon 5Mise en place d'un héritage
Leçon 6Création de la classe CommandeManager
Leçon 7On instancie l'objet XMLHttpRequest
Leçon 8Création du fichier readAllRef.php
Leçon 9Test de notre programme
Leçon 10Mise en place d'un autoloader
Chapitre 5 : Partie 5: Afficher la référence des commandes.
59m34
Leçon 1Ce que nous allons faire
Leçon 2Mise en place du HTML
Leçon 3Mise en place du CSS
Leçon 4Créer un déplacement de la zone NAV
Leçon 5Affichage des Réf de commande dans le menu déroulant
Leçon 6Mise en place d'un loader
Chapitre 6 : Partie 6: Affichage et mémorisation de l'état des commandes en temps réel
3h17
Leçon 1Ce que nous allons faire
Leçon 2Création de la méthode ReadCde
Leçon 3Mise en place de la requête AJAX
Leçon 4Mise en relation de ReadCde avec AJAX
Leçon 5Affichage de la date de la commande
Leçon 6Affichage du prénom et du nom du client
Leçon 7On contrôle la présence d'une référence
Leçon 8Mise en place d'un loader
Leçon 9Mise en relation avec la méthode envoiMail
Leçon 10Mémorisation de l'état des switchs
Leçon 11Affichage des switchs dans le bon état
Leçon 12Création de la méthode d'insertion du numéro du colis
Leçon 13Insertion du numéro du colis
Leçon 14Amélioration de la méthode d'insertion du numéro du colis
Leçon 15Afficher le numéro du colis
Leçon 16Etude du cas '0'
Leçon 17Etude du cas '1'
Leçon 18Etude du cas '2'
Leçon 19Etude du cas '3'
Leçon 20Reload du menu déroulant
Leçon 21Si plus de référence disponible
Leçon 22Test du programme
Chapitre 7 : Partie 7: Suivi de la commande par le client
1h28
Leçon 1Ce que nous allons faire
Leçon 2Mise en place des bases HTML
Leçon 3Mise en place des bases CSS
Leçon 4Mise en place de la requête AJAX
Leçon 5Mise en relation de ReadCde avec AJAX
Leçon 6Affichage des infos sur la page web
Leçon 7On allume la timeline
Leçon 8On affiche le numéro du colis
Leçon 9On contrôle la valeur de la référence reçue
Leçon 10Mise en place d'un loader
Leçon 11Test de notre script sur serveur local
Leçon 12Test de notre script sur serveur distant
Leçon 13Correction d'une erreur 500
Leçon 14Correction problème d'insertion
Chapitre 8 : Conclusion
02m20
Leçon 1Conclusion
Aperçus
Avis des apprenants