Pour ce nouveau projet développement FullStack, nous allons réaliser le CRUD au complet. C’est-à-dire le Create, Read, Update et Delete. Comme les autres cours de cette collection, nous apprendrons en réalisant un projet de A à Z. Pour apprendre le CRUD, nous réaliserons ensemble une plateforme de gestion de biens immobiliers. Une liste de biens que nous pourrons créer, mettre à jour et supprimer.
Afin de mener à bien notre projet de développement, nous allons utiliser les langages HTML, CSS, JavaScript et PHP.
Pour le PHP nous développerons en programmation orientée objet. Afin de relier le Front et le Back, nous utiliserons la technologie Ajax.
Les codes ne se mélangeront pas ! Le HTML dans le HTML, le CSS dans le CSS, le Javascript dans le JavaScript, le PHP dans le PHP.
Au programme de ce projet FullStack dédié au CRUD
Ce projet pratique de près 11h de vidéo va couvrir énormément de notions. Il sera divisé en 4 parties (vous aurez accès aux codes de chaque partie).
- La 1ère partie sera dédiée au Create :
Dans cette 1ère partie, nous allons mettre en place un formulaire d'insertion en vue d'insérer les nouveaux biens dans une base de données. Le formulaire d'insertion se trouvera au sein d'une fenêtre modale que nous ferons apparaître et disparaître grâce à la magie du JavaScript. La mise en place de notre formulaire se fera grâce aux langages HTML & CSS.
Un contrôle du formulaire sera effectué au niveau frontend en utilisant le langage JavaScript, ainsi qu'au niveau backend en utilisant le langage PHP. Le résultat du formulaire ira dans une base de données.
Notre formulaire d'insertion enverra le titre du bien, le nom de la plateforme ainsi qu'une image représentant le bien.
- La deuxième partie sera dédiée au Read :
Dans cette 2ème partie, nous allons mettre en place un tableau affichant la liste des bien disponibles. Évidemment, ce tableau sera responsive. La liste des biens devra se rafraîchir automatiquement dès qu'un nouveau bien sera inséré. Nous mettrons en place une règle de réécriture
- La troisième partie sera dédiée à l'Update :
Dans cette 3ème partie, nous allons nous occuper de la possibilité de modifier un bien.
Pour cela nous mettrons en place un formulaire pour modifier le nom du bien, la plateforme utilisée ainsi que l'image (et au passage, supprimer physiquement l'ancienne image du serveur).
- La quatrième partie sera dédiée au Delete :
Dans cette 4ème et dernière partie, nous allons nous occuper de la possibilité de supprimer un bien.
Pour cela, nous mettrons en place un formulaire de suppression qui permettra de supprimer le bien et l'image.
La suppression d'un bien sera conditionnée au fait qu'il ne devra pas posséder de revenus.
Avec ce cours en ligne, je vous propose près de 11 heures de développement web professionnel avec une approche pratique.
N'hésitez pas à vous plonger dans cette aventure passionnante.
Tous les fichiers de travail sont fournis !
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
A tout de suite !
Table des matières de cette formation Php, JavaScript, CSS, HTML (durée : 10h51m)
-
Présentation
- Présentation 00:03:14
-
Partie 1: Mise en place de l'insertion d'un Bien
- Ce que nous allons faire gratuit 00:05:10
- Mise en place de la zone header de la page liste des Biens 00:10:57
- Mise en place de la fenêtre modale d'insertion d'un nouveau Bien 00:08:37
- Mettre en fonctionnement la fenêtre modale d'insertion 00:10:59
- Animer le fonctionnement de la fenêtre modale d'insertion 00:09:55
- Mise en place de la BDD et de l'instance PDO 00:06:17
- Mise en place du formulaire d'insertion 00:05:34
- Mise en forme du champ "Nom du Bien" 00:12:29
- Mise en forme du bouton de validation 00:10:49
- Mise en forme de l'upload 00:10:09
- Dévérouiller le formulaire d'insertion 00:08:25
- Afficher le nom du fichier uploadé 00:10:39
- Instanciation de l'objet XMLHttpRequest 00:08:52
- Créer la classe d'entité Bien 00:04:42
- Créer la classe manager BienManager 00:08:12
- Instancier la méthode CreateBien 00:10:57
- Editer un message de retour 00:11:57
- Mettre en forme le message de retour 00:06:02
- Effacer les données de la modale 00:03:31
- Créer une méthode de vérification de la présence d'un Bien 00:10:03
- Désactiver le bouton du formulaire 00:03:21
- Mettre en place un loader d'attente 00:09:50
- Faire fonctionner le loader 00:02:33
- Créer une classe Upload 00:07:54
- Créer un dossier à la volée 00:05:32
- Transférer le fichier sur le serveur 00:09:30
- Résoudre le problème du transfert du fichier uploadé 00:07:25
- Ajout d'une table plateforme 00:11:05
- Mettre en place un menu déroulant 00:04:35
- Mise en place des classes liées à la table plateforme 00:08:50
- Instanciation de la classe PlateformeManager 00:08:27
- Lecture du menu déroulant 00:13:45
- Insertion du nouveau Bien 00:09:22
- Contrôle du fichier uploadé 00:09:14
-
Partie 2: Affichage des Biens
- Ce que nous allons faire gratuit 00:02:08
- Mettre en place un tableau pour afficher les Biens 00:07:05
- Mettre en forme le tableau 00:11:09
- Créer une méthode de lecture des Biens 00:12:55
- Instanciation de l'objet XMLHttpRequest 00:10:31
- On appelle la méthode readAllBiens 00:12:30
- Affichage des biens présents dans le tableau 00:04:43
- Refresh du tableau d'affichage des biens 00:08:41
- Créer des liens de modification et de suppression 00:08:50
- Modifier le title des liens 00:07:26
- Mettre en place une règle de réécriture 00:06:22
-
Partie 3: Modifier un Bien
- Ce que nous allons faire gratuit 00:03:42
- Mise en place d'un bouton de retour 00:07:32
- Mise en place d'une méthode readBien 00:06:35
- On appelle la méthode readBien 00:09:11
- On ouvre le fichier bien-update.php 00:12:27
- On récupère le paramètre dans l'url 00:08:40
- Affichage de l'image du Bien 00:14:15
- Mise en place des bases du formulaire de modification 00:11:29
- Mise en place du champ lié au nom du Bien 00:02:37
- Mise en place du menu déroulant 00:05:16
- Donner l'attribut selected dans le menu déroulant 00:11:10
- Mise en place de la modification de l'upload 00:06:29
- Mise en place du bouton de validation 00:04:58
- Modifier le positionnement du loader 00:02:55
- Créer la méthode UpdateBien 00:03:30
- Déclarer un événement de clic sur le bouton du formulaire 00:07:41
- On appelle la méthode UpdateBien 00:06:11
- On teste les updates dans la table bien 00:12:25
- Correction du bug lié lié au non envoi d'une nouvelle image 00:04:18
- Retourner un message suite à la modification 00:06:58
- Contrôler l'extension du fichier uploadé 00:09:00
- Factoriser le tableau des extensions autorisées 00:04:27
- Supprimer physiquement l'ancienne image du serveur 00:07:05
- Rafraîchir la liste des Biens 00:05:11
- Contôler qu'une plateforme a été choisie 00:04:25
-
Partie 4: Supprimer un Bien
- Ce que nous allons faire gratuit 00:02:41
- Mise en place des bases du fichier bien-delete.php 00:12:44
- Mise en place du formulaire de suppression 00:04:26
- Mise en place de l'événement click sur le bouton de formulaire 00:06:22
- On appelle la méthode deleteBien 00:02:51
- On envoi un message si le Bien n'existe pas 00:06:21
- Création d'une table transaction 00:06:16
- Insérer des transactions 00:03:53
- Mise en place de la classe d'entité Transaction 00:05:59
- Mise en place de la méthode VerifTransactionBien 00:08:56
- Mise en place des conditions de suppression 00:05:48
- Supprimer des enregistrements orphelins 00:09:32
- Vérifier si l'ID du bien est présent dans la table des transactions 00:06:22
- Bonus: Et si la table Bien est vide ? 00:06:30
-
Conclusion
- Conclusion 00:02:46
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
Un beau Fullstack puisqu'il m'a donné un peu de fil à retordre... Merci, et vivement le prochain!
-
Bon ben bloqué à 22% pour un bug sans queue ni tête, j'arrête là, il est temps pour moi de faire seul maintenant, faire trop de cours et faire que ça n'est pas une solution viable, il faut taper dans le dur et faire de son côté, bonne chance à tous et à toutes ne lâchez rien et merci à Carl pour toutes ces connaissances
-
Excellent tuto, tres bien conçu et expliqué.
-
Avec quelles versions de logiciels ce tuto est-il compatible ?Php 8, Php , CSS 3, CSS
-
Quel est le niveau requis pour suivre ce tuto ?avancé
-
Que contient le fichier source ?Le code source de chaque partie
note moyenne
avis laissés