89,00

Tuto Projet Fullstack #4 - Gestion d'une commande (Partie Admin & Partie Public) avec JavaScript, Php, CSS

89,00

  • Une formation vidéo de 8h42m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com
Projet Fullstack #4 - Gestion d'une commande (Partie Admin & Partie Public)

ajouter ce cours aux favoris retirer ce cours des favoris

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.

Table des matières de cette formation JavaScript, Php, CSS (durée : 8h42m)

  • Partie 1: Mise en page HTML et CSS de la Partie Admin
    • Ce que nous allons faire gratuit 00:02:30
    • Mise en place des bases HTML de la zone Admin 00:04:59
    • Mise en forme des bases CSS de la zone Admin 1/2 00:07:00
    • Mise en forme des bases CSS de la zone Admin 2/2 00:08:15
    • Mise en place d'un premier switch 00:07:42
    • Mise en place des switchs suivants 00:06:31
    • Mise en place du fonctionnement des switchs 00:05:38
    • Mise en place de la section colis 00:03:49
  • Partie 2: Mise en place du JavaScript de la Partie Admin
    • Ce que nous allons faire gratuit 00:01:53
    • On modifie les événements liés au 1er switch 00:10:02
    • On modifie les événements liés au 2ème switch 00:03:08
    • On modifie les événements liés au champ de type text 00:05:29
    • On modifie les événements liés au 3ème switch 00:03:05
  • Partie 3: Création d'une méthode d'envoi de mail
    • Ce que nous allons faire gratuit 00:02:37
    • Création d'une méthode d'envoi de mail 00:09:08
    • Déclaration des attributs, des setters et des getters 00:08:49
    • Création du contenu du mail 00:07:51
    • Déclaration de l'objet XMLHttpRequest 00:05:39
    • Création du fichier executer.php 00:03:01
    • Test de notre programme 00:03:31
  • Partie 4: Afficher la réf des commandes. Backend
    • Ce que nous allons faire gratuit 00:02:33
    • Création de la base de données 00:11:22
    • On instancie la classe PDO 00:04:33
    • Création de la classe Commande 00:04:06
    • Mise en place d'un héritage 00:02:26
    • Création de la classe CommandeManager 00:09:35
    • On instancie l'objet XMLHttpRequest 00:08:15
    • Création du fichier readAllRef.php 00:08:23
    • Test de notre programme 00:08:24
    • Mise en place d'un autoloader 00:04:10
  • Partie 5: Afficher la référence des commandes.
    • Ce que nous allons faire gratuit 00:01:31
    • Mise en place du HTML 00:08:37
    • Mise en place du CSS 00:13:24
    • Créer un déplacement de la zone NAV 00:09:17
    • Affichage des Réf de commande dans le menu déroulant 00:11:51
    • Mise en place d'un loader 00:14:54
  • Partie 6: Affichage et mémorisation de l'état des commandes en temps réel
    • Ce que nous allons faire gratuit 00:02:36
    • Création de la méthode ReadCde 00:06:03
    • Mise en place de la requête AJAX 00:10:39
    • Mise en relation de ReadCde avec AJAX 00:05:44
    • Affichage de la date de la commande 00:06:41
    • Affichage du prénom et du nom du client 00:08:11
    • On contrôle la présence d'une référence 00:13:57
    • Mise en place d'un loader 00:14:53
    • Mise en relation avec la méthode envoiMail 00:11:10
    • Mémorisation de l'état des switchs 00:16:10
    • Affichage des switchs dans le bon état 00:14:38
    • Création de la méthode d'insertion du numéro du colis 00:09:33
    • Insertion du numéro du colis 00:08:56
    • Amélioration de la méthode d'insertion du numéro du colis 00:12:26
    • Afficher le numéro du colis 00:13:43
    • Etude du cas '0' 00:09:46
    • Etude du cas '1' 00:05:03
    • Etude du cas '2' 00:05:36
    • Etude du cas '3' 00:03:36
    • Reload du menu déroulant 00:07:27
    • Si plus de référence disponible 00:06:24
    • Test du programme 00:04:18
  • Partie 7: Suivi de la commande par le client
    • Ce que nous allons faire gratuit 00:02:16
    • Mise en place des bases HTML 00:07:42
    • Mise en place des bases CSS 00:13:07
    • Mise en place de la requête AJAX 00:11:27
    • Mise en relation de ReadCde avec AJAX 00:03:47
    • Affichage des infos sur la page web 00:08:26
    • On allume la timeline 00:08:15
    • On affiche le numéro du colis 00:07:39
    • On contrôle la valeur de la référence reçue 00:03:51
    • Mise en place d'un loader 00:03:31
    • Test de notre script sur serveur local 00:04:43
    • Test de notre script sur serveur distant 00:05:48
    • Correction d'une erreur 500 00:06:44
    • Correction problème d'insertion 00:01:30
  • Conclusion
    • Conclusion 00:02:20



Formateur : Carl Brison

Carl Brison a publié 241 tutoriels et obtenu une note moyenne de 4,9/5 sur 15 840 tutoriels vendus. Carl Brison est un formateur certifié tuto.com. Voir les autres formations de Carl Brison

5,0
note moyenne

3
avis laissés
5 étoiles
3
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de zolb laissé 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)?
    "Merci pour votre message. Le fichier est en Php car il recevra en paramètre le numéro de la commande."

  • 5
    avis de bilcoyotte laissé le 23/10/2021
    Encore un chapitre qui permet de lever le brouillard qui est dans ma tete . excellent comme d habitude . continuez comme ça.
    "Merci beaucoup. C'est très gentil ;-)"

  • 5
    avis de niko-dev laissé le 22/10/2021
    Excellent tuto avec un déroulé des opérations étape par étape ! Vos tutos Fullstack m'apportent beaucoup. Merci Carl. Continuez comme çà.
    "Merci beaucoup pour votre commentaire super gentil ;-)"

  • 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
Parcours Developpeur Front End
accédez à plus de 1385 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données