Projet Fullstack #5 - Lire, insérer, modifier & supprimer des biens immobiliers
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO Projet Fullstack #5 - Lire, insérer, modifier & supprimer des biens immobiliers

Carl Brison
99,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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 !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Présentation
Chapitre 2
Partie 1: Mise en place de l'insertion d'un Bien
Chapitre 3
Partie 2: Affichage des Biens
Chapitre 4
Partie 3: Modifier un Bien
Chapitre 5
Partie 4: Supprimer un Bien
Chapitre 6
Conclusion

Plan détaillé du cours

Chapitre 1 : Présentation
03m14s
 
Leçon 1Présentation
Chapitre 2 : Partie 1: Mise en place de l'insertion d'un Bien
4h45m
 
Leçon 1Ce que nous allons faire
Leçon 2Mise en place de la zone header de la page liste des Biens
Leçon 3Mise en place de la fenêtre modale d'insertion d'un nouveau Bien
Leçon 4Mettre en fonctionnement la fenêtre modale d'insertion
Leçon 5Animer le fonctionnement de la fenêtre modale d'insertion
Leçon 6Mise en place de la BDD et de l'instance PDO
Leçon 7Mise en place du formulaire d'insertion
Leçon 8Mise en forme du champ "Nom du Bien"
Leçon 9Mise en forme du bouton de validation
Leçon 10Mise en forme de l'upload
Leçon 11Dévérouiller le formulaire d'insertion
Leçon 12Afficher le nom du fichier uploadé
Leçon 13Instanciation de l'objet XMLHttpRequest
Leçon 14Créer la classe d'entité Bien
Leçon 15Créer la classe manager BienManager
Leçon 16Instancier la méthode CreateBien
Leçon 17Editer un message de retour
Leçon 18Mettre en forme le message de retour
Leçon 19Effacer les données de la modale
Leçon 20Créer une méthode de vérification de la présence d'un Bien
Leçon 21Désactiver le bouton du formulaire
Leçon 22Mettre en place un loader d'attente
Leçon 23Faire fonctionner le loader
Leçon 24Créer une classe Upload
Leçon 25Créer un dossier à la volée
Leçon 26Transférer le fichier sur le serveur
Leçon 27Résoudre le problème du transfert du fichier uploadé
Leçon 28Ajout d'une table plateforme
Leçon 29Mettre en place un menu déroulant
Leçon 30Mise en place des classes liées à la table plateforme
Leçon 31Instanciation de la classe PlateformeManager
Leçon 32Lecture du menu déroulant
Leçon 33Insertion du nouveau Bien
Leçon 34Contrôle du fichier uploadé
Chapitre 3 : Partie 2: Affichage des Biens
1h32m
 
Leçon 1Ce que nous allons faire
Leçon 2Mettre en place un tableau pour afficher les Biens
Leçon 3Mettre en forme le tableau
Leçon 4Créer une méthode de lecture des Biens
Leçon 5Instanciation de l'objet XMLHttpRequest
Leçon 6On appelle la méthode readAllBiens
Leçon 7Affichage des biens présents dans le tableau
Leçon 8Refresh du tableau d'affichage des biens
Leçon 9Créer des liens de modification et de suppression
Leçon 10Modifier le title des liens
Leçon 11Mettre en place une règle de réécriture
Chapitre 4 : Partie 3: Modifier un Bien
2h58m
 
Leçon 1Ce que nous allons faire
Leçon 2Mise en place d'un bouton de retour
Leçon 3Mise en place d'une méthode readBien
Leçon 4On appelle la méthode readBien
Leçon 5On ouvre le fichier bien-update.php
Leçon 6On récupère le paramètre dans l'url
Leçon 7Affichage de l'image du Bien
Leçon 8Mise en place des bases du formulaire de modification
Leçon 9Mise en place du champ lié au nom du Bien
Leçon 10Mise en place du menu déroulant
Leçon 11Donner l'attribut selected dans le menu déroulant
Leçon 12Mise en place de la modification de l'upload
Leçon 13Mise en place du bouton de validation
Leçon 14Modifier le positionnement du loader
Leçon 15Créer la méthode UpdateBien
Leçon 16Déclarer un événement de clic sur le bouton du formulaire
Leçon 17On appelle la méthode UpdateBien
Leçon 18On teste les updates dans la table bien
Leçon 19Correction du bug lié lié au non envoi d'une nouvelle image
Leçon 20Retourner un message suite à la modification
Leçon 21Contrôler l'extension du fichier uploadé
Leçon 22Factoriser le tableau des extensions autorisées
Leçon 23Supprimer physiquement l'ancienne image du serveur
Leçon 24Rafraîchir la liste des Biens
Leçon 25Contôler qu'une plateforme a été choisie
Chapitre 5 : Partie 4: Supprimer un Bien
1h28m
 
Leçon 1Ce que nous allons faire
Leçon 2Mise en place des bases du fichier bien-delete.php
Leçon 3Mise en place du formulaire de suppression
Leçon 4Mise en place de l'événement click sur le bouton de formulaire
Leçon 5On appelle la méthode deleteBien
Leçon 6On envoi un message si le Bien n'existe pas
Leçon 7Création d'une table transaction
Leçon 8Insérer des transactions
Leçon 9Mise en place de la classe d'entité Transaction
Leçon 10Mise en place de la méthode VerifTransactionBien
Leçon 11Mise en place des conditions de suppression
Leçon 12Supprimer des enregistrements orphelins
Leçon 13Vérifier si l'ID du bien est présent dans la table des transactions
Leçon 14Bonus: Et si la table Bien est vide ?
Chapitre 6 : Conclusion
02m46s
 
Leçon 1Conclusion

Avis des apprenants

Détail des avis
7
Apprenants
3
Commentaires
5/5
Note moyenne
5/5
3
4/5
0
3/5
0
2/5
0
1/5
0
Bernard Chabloz
Bernard Chabloz
Publié le 22/03/2023
Un beau Fullstack puisqu'il m'a donné un peu de fil à retordre... Merci, et vivement le prochain!
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire ;-)
Cédric Leman
Cédric Leman
Publié le 17/01/2023
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
Carl Brison
Carl Brison
Bonne chance à vous Cédric ! Merci
Jmch73
Jmch73
Publié le 23/08/2022
Excellent tuto, tres bien conçu et expliqué.
Carl Brison
Carl Brison
Merci beaucoup ;-)

Vos questions sur le cours

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

Attendez ! 🤗

Accédez à plus de 1334 tutos gratuits

Notre politique de protection des données