4.8/5 Trustpilot (1392 avis)
Projet Fullstack #1 - Créer un programme d'upload moderne complet
Projet Fullstack #1 - Créer un programme d'upload moderne complet
Dans ce mini-projet fullstack, nous allons créer un formulaire d'upload permettant à un utilisateur de :
- Envoyer une image qui sera stockée physiquement dans un dossier sur le serveur.
- Enregistrer dans une base de données MySQL des informations comme le nom du fichier ou la date d'upload.
Pour réaliser ce projet, nous utiliserons un ensemble de technologies complémentaires : HTML, CSS, JavaScript, PHP et SQL.
La communication entre le Front-end et le Back-end sera assurée par une fonction asynchrone exploitant l'API Fetch de JavaScript.
Dans ce tuto formulaire d'upload
- Créer un formulaire d'upload d'images fonctionnel.
- Gérer la liaison entre le Front et le Back avec des appels API asynchrones.
- Stocker des données dans une base MySQL et gérer les fichiers côté serveur.
- Ajouter une animation d'attente en CSS pour une meilleure expérience utilisateur.
Prérequis
Pour tirer le meilleur parti de ce projet, il est recommandé d’avoir une bonne maîtrise des compétences suivantes :
- Une solide connaissance en JavaScript moderne
- Contacter une API via une fonction asynchrone
- Programmation Orientée Objet en PHP avec MySQL
- Uploader des fichiers sur un serveur
- Créer une animation d'attente en CSS
- Le positionnement en CSS
Le code complet du projet est fourni.
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Chapitre 1
Présentation du Projet
Présentation du Projet
Chapitre 2
Développement Frontend
Développement Frontend
Chapitre 3
Développement Backend
Développement Backend
Chapitre 4
Développement Frontend
Développement Frontend
Chapitre 5
Développement Backend
Développement Backend
Table des matières
Chapitre 1 : Présentation du Projet
06m32
Leçon 1Présentation du Projet
Chapitre 2 : Développement Frontend
37m27
Leçon 1Créer le code HTML
Leçon 2Mettre en forme le formulaire
Leçon 3Ecrire le nom du fichier à uploder
Leçon 4Mettre en forme le nom du fichier
Leçon 5Vérifier si un fichier est choisi
Leçon 6Mettre en forme la réponse
Chapitre 3 : Développement Backend
24m38
Leçon 1Créer la table fichier
Leçon 2Déclarer l'instance PDO
Leçon 3Déclarer la classe d'entité
Leçon 4Déclarer la classe manager
Leçon 5Déclarer le fichier de liaison Php
Chapitre 4 : Développement Frontend
34m23
Leçon 1Contacter le fichier de liaison Php
Leçon 2Récupérer la réponse Json
Leçon 3Cacher la réponse après 3 secondes
Leçon 4Créer une animation d'attente
Leçon 5Gérer l'animation d'attente
Leçon 6Mettre en place une barre de progression
Chapitre 5 : Développement Backend
32m32
Leçon 1Définir les étapes de l'upload
Leçon 2Vérifier si un fichier a été envoyé
Leçon 3Vérifier les erreurs d'upload
Leçon 4Vérifier l'extension du fichier
Leçon 5Vérifier la taille du fichier
Leçon 6Déplacer le fichier
Leçon 7Tester le programme
Avis des apprenants