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 !
Table des matières de cette formation Php, JavaScript, CSS, HTML (durée : 4h10m)
-
Présentation du projet fullstack #1
- Présentation du projet fullstack #1 gratuit 00:08:04
-
Partie 1: Mise en page HTML & CSS
- Ce que nous allons faire gratuit 00:02:23
- Mise en place du code HTML 00:11:23
- Mise en forme du BODY et du H1 00:07:36
- Mise en forme de la SECTION 1 00:11:53
- Mise en forme de la SECTION 2 00:07:18
-
Partie 2: Mise en place du glisser déposer
- Ce que nous allons faire gratuit 00:01:46
- Changer l'état de la SECTION 1 au survolle 00:09:04
- Réinitialiser l'état de la SECTION 1 00:03:31
- Corriger le problème lié aux textes de la SECTION 1 00:05:57
- Récupérer les infos du et des fichiers déposés 00:06:46
- Mise en place d'une fonction de lecture des infos 00:07:01
- Correction d'un petit Bug Frontend 00:04:02
-
Partie 3: Mise en place d'Ajax
- Ce que nous allons faire gratuit 00:03:19
- Instanciation de l'objet XMLHttpRequest 00:08:51
- Test d'envoi sur upload.php 00:12:56
- Affichage d'une modale d'erreur. Codes HTML & CSS 00:13:04
- Affichage d'une modale d'erreur. Code JavaScript 00:07:23
- Animation de la modale 00:10:47
-
Partie 4: Création d'une classe Php de gestion des fichiers uploadés
- Ce que nous allons faire gratuit 00:03:36
- Création en Php d'un dossier de réception 00:07:38
- Mise en POO du script Php précédent 00:08:40
- Création d'une méthode de transfert de fichiers 00:12:11
- Définition des extensions acceptées 00:07:49
- On encode les réponses en json 00:05:36
- On affiche les images uploadées dans la section 2 00:10:50
- On affiche la section 2 si il y a au moins une image uploadée 00:05:08
-
Partie 5: Mise en place des derniers détails
- Ce que nous allons faire gratuit 00:01:01
- Traitement du message des fichiers non autorisés 00:12:51
- Fixer un poids maxi de fichier autorisé 00:06:15
- Ajout d'un nouveau message d'erreur 00:01:17
- Ecouter le bouton d'upload 00:05:09
- Mise en place de l'emplacement d'un loading 00:08:40
- Création du loading 00:07:50
-
Conclusion
- Conclusion 00:03:08
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
C'est un bon tuto - Tout le monde y a son compte au niveau du code. Pour l'Ajax je trouve ce code pas attirant du tout et du coup je ne l'assimile pas et tant pis. Certaines parties du tuto me seront sans doute utiles et quand ça sera le cas je pourrais toujours venir me rafraichir la mémoire. Je vois que certains sont opposés aux librairies CSS. Moi ça me va très bien, c'est pratique et ça existe pour être utilisé, même pour peu de choses. Le sujet était de créer un programme d'upload et le but a été atteint :-) C'était difficile (fatiguée aussi) mais j'ai tenu jusqu'au bout. Merci et à bientôt pour de nouvelles aventures.
-
Bon tuto, mais full stack, je ne crois pas c'est du 99% JavaScript, tout tourne autour du JS, c'est que le Projet 1 ok mais pour ma part c'est ce que je ressens. Et ajouter une librairie CSS pour juste utiliser 2 classes c'est limite, si c'est pour un tuto oui c'est cool, mais en dev réelle non autant utilisé le CSS 100%. Mais comme dit c'est une solution et non la solution.
-
Excellent comme toujours , ce type de formation "Fullstack" est super . Pour pouvoir suivre , je me suis procuré les tutos recommandés et c'était vraiment indispensable . Cela va parfois vite et demande une bonne concentration . Grâce à ce tuto je vais pouvoir uploader et afficher des images sur le site que je suis en train de créer . J'attends avec impatience le suivant . Didier
-
Avec quelle version de logiciel ce tuto est-il compatible ?CSS 3
-
Que contient le fichier source ?Le code source complet de toutes les 5 parties de ce tutoriel.
-
Quel est le niveau requis pour suivre ce tuto ?intermédiaire
note moyenne
avis laissés