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.