Projet Fullstack #1 - Créer un programme d'upload moderne complet
ERROR
00:00
00:00

Tuto Projet Fullstack #1 - Créer un programme d'upload moderne complet

Carl Brison
49,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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
Chapitre 2
Partie 1: Mise en page HTML & CSS
Chapitre 3
Partie 2: Mise en place du glisser déposer
Chapitre 4
Partie 3: Mise en place d'Ajax
Chapitre 5
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
Chapitre 7
Conclusion

Plan détaillé du cours

Chapitre 1 : Présentation du projet fullstack #1
08m04s
 
Leçon 1Présentation du projet fullstack #1
Chapitre 2 : Partie 1: Mise en page HTML & CSS
40m33s
 
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
38m07s
 
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
56m20s
 
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
1h01m
 
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
43m03s
 
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
03m08s
 
Leçon 1Conclusion

Aperçus

Avis des apprenants

Détail des avis
11
Apprenants
7
Commentaires
5/5
Note moyenne
5/5
7
4/5
0
3/5
0
2/5
0
1/5
0
Valérie Arno
Valérie Arno
Publié le 09/01/2023
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.
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil Valérie. Oui Ajax n'est pas évident
Cédric Leman
Cédric Leman
Publié le 16/11/2022
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.
Jean-Claude Warg-Briers
Jean-Claude Warg-Briers
Publié le 16/02/2022
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
Carl Brison
Carl Brison
Merci beaucoup Didier, c'est vraiment très gentil ;-) Le projet Fullstack #2 est d'ors et déjà disponible (Voici son lien d'accès: https://fr.tuto.com/php/projet-fullstack-formulaire-contact-formation,161251.html) A bientôt, Carl.

Vos questions sur le cours

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

Attendez ! 🤗

Accédez à plus de 1450 tutos gratuits

Notre politique de protection des données