Projet Fullstack #4 - Gestion d'une commande (Partie Admin & Partie Public)
ERROR
00:00
00:00

TUTO Projet Fullstack #4 - Gestion d'une commande (Partie Admin & Partie Public)

Carl Brison
89,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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
Chapitre 2
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
Chapitre 4
Partie 4: Afficher la réf des commandes. Backend
Chapitre 5
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
Chapitre 7
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
46m24s
 
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
23m37s
 
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
40m36s
 
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
1h03m
 
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.
59m34s
 
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
3h17m
 
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
1h28m
 
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
02m20s
 
Leçon 1Conclusion

Aperçus

Avis des apprenants

Détail des avis
8
Apprenants
5
Commentaires
5/5
Note moyenne
5/5
5
4/5
0
3/5
0
2/5
0
1/5
0
Mahamadou Camara
Mahamadou Camara
Publié le 07/03/2022
Un projet très intéressant pour quelqu’un qui veut s’orienter sur le dev full-stack. Le contenu est très enrichissant. Merci Carl.
Carl Brison
Carl Brison
Merci beaucoup, c'est très gentil
Henrique Curado
Henrique Curado
Publié le 14/02/2022
Encore une super formation qui nous a été partagée par Carl 👍
Carl Brison
Carl Brison
Merci beaucoup, C'est super gentil ;-)))
Bernard Chabloz
Bernard Chabloz
Publié le 29/10/2021
Beau fullstack, merci ! Sur mon serveur (apache 2, php 7.3.29) empty est accepté. Petite question dans "suivi": pourquoi index.php plutôt que index.html (qui fait l'affaire chez moi)?
Carl Brison
Carl Brison
Merci pour votre message. Le fichier est en Php car il recevra en paramètre le numéro de la commande.

Vos questions sur le cours

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

CSS

Que contient le fichier source ?

L'ensemble des codes sources du projet.

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Attendez ! 🤗

Accédez à plus de 1330 tutos gratuits

Notre politique de protection des données