Développement Web avec Node.js et Express
Développement Web avec Node.js et Express
J'ai le plaisir de vous proposer ici un nouveau format de cours en ligne : Créer un projet web de A à Z. Pour ce premier numéro, je vous propose de réaliser un programme d'upload de fichiers.
Pour cela, nous allons utiliser les langages suivants :
En clair, nous allons réaliser un projet fullsatck de A à Z.
Au programme de ce tuto Projet Fullstack #1 - Créer un programme d'upload moderne complet
Nous partirons d'une page blanche pour arriver à un programme fonctionnel, en passant par l'aspect front-end ainsi que par la back-end de la programmation web.
Nous réaliserons ensemble un programme d'upload de fichiers (l'envoi de fichiers sur un serveur). Les fonctionnalités suivantes de notre uploader seront traitées :
- Gestion du Drap and Drop (glisser / déposer) pour uploader les fichiers,
- Récupération de différentes informations concernant les fichiers déposés,
- Contrôle des extensions de fichiers acceptés,
- Gestion du poids maximum autorisé,
- Affichage d'une barre de progression de l'upload (loader),
- Uploader en Ajax sans rechargement de la page,
- Gestion des différentes erreurs possibles.
La qualité d'écriture du code source sera aussi importante que celle du résultat dans un navigateur.
Les différents langages utilisés ne seront pas mélangés. Le but étant d'avoir un code complet et très largement maintenable.
Ce développement sera construit en 5 parties distinctes qui traitent toutes d'un sujet précis. Pour chacune des parties, vous aurez accès à son code source évolutif ainsi qu'à un fichier explicatif des notions abordées.
Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
Bonne création !
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Chapitre 1
Présentation du projet fullstack #1
Présentation du projet fullstack #1
Chapitre 2
Partie 1: Mise en page HTML & CSS
Partie 1: Mise en page HTML & CSS
Chapitre 3
Partie 2: Mise en place du glisser déposer
Partie 2: Mise en place du glisser déposer
Chapitre 4
Partie 3: Mise en place d'Ajax
Partie 3: Mise en place d'Ajax
Chapitre 5
Partie 4: Création d'une classe Php de gestion des fichiers uploadés
Partie 4: Création d'une classe Php de gestion des fichiers uploadés
Chapitre 6
Partie 5: Mise en place des derniers détails
Partie 5: Mise en place des derniers détails
Chapitre 7
Conclusion
Conclusion
Plan détaillé du cours
Chapitre 1 : Présentation du projet fullstack #1
08m04
Leçon 1Présentation du projet fullstack #1
Chapitre 2 : Partie 1: Mise en page HTML & CSS
40m33
Leçon 1Ce que nous allons faire
Leçon 2Mise en place du code HTML
Leçon 3Mise en forme du BODY et du H1
Leçon 4Mise en forme de la SECTION 1
Leçon 5Mise en forme de la SECTION 2
Chapitre 3 : Partie 2: Mise en place du glisser déposer
38m07
Leçon 1Ce que nous allons faire
Leçon 2Changer l'état de la SECTION 1 au survolle
Leçon 3Réinitialiser l'état de la SECTION 1
Leçon 4Corriger le problème lié aux textes de la SECTION 1
Leçon 5Récupérer les infos du et des fichiers déposés
Leçon 6Mise en place d'une fonction de lecture des infos
Leçon 7Correction d'un petit Bug Frontend
Chapitre 4 : Partie 3: Mise en place d'Ajax
56m20
Leçon 1Ce que nous allons faire
Leçon 2Instanciation de l'objet XMLHttpRequest
Leçon 3Test d'envoi sur upload.php
Leçon 4Affichage d'une modale d'erreur. Codes HTML & CSS
Leçon 5Affichage d'une modale d'erreur. Code JavaScript
Leçon 6Animation de la modale
Chapitre 5 : Partie 4: Création d'une classe Php de gestion des fichiers uploadés
1h01
Leçon 1Ce que nous allons faire
Leçon 2Création en Php d'un dossier de réception
Leçon 3Mise en POO du script Php précédent
Leçon 4Création d'une méthode de transfert de fichiers
Leçon 5Définition des extensions acceptées
Leçon 6On encode les réponses en json
Leçon 7On affiche les images uploadées dans la section 2
Leçon 8On affiche la section 2 si il y a au moins une image uploadée
Chapitre 6 : Partie 5: Mise en place des derniers détails
43m03
Leçon 1Ce que nous allons faire
Leçon 2Traitement du message des fichiers non autorisés
Leçon 3Fixer un poids maxi de fichier autorisé
Leçon 4Ajout d'un nouveau message d'erreur
Leçon 5Ecouter le bouton d'upload
Leçon 6Mise en place de l'emplacement d'un loading
Leçon 7Création du loading
Chapitre 7 : Conclusion
03m08
Leçon 1Conclusion
Aperçus
Avis des apprenants