49,00

Tuto Projet Fullstack #1 - Créer un programme d'upload moderne complet avec Php, JavaScript, CSS, HTML

49,00

  • Une formation vidéo de 4h02m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com
Projet Fullstack #1 - Créer un programme d'upload moderne complet

ajouter ce cours aux favoris retirer ce cours des favoris

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 : 4h02m)

  • 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



Formateur : Carl Brison

Carl Brison a publié 206 tutoriels et obtenu une note moyenne de 4,9/5 sur 14 233 tutoriels vendus. Carl Brison est un formateur certifié tuto.com. Voir les autres formations de Carl Brison

5,0
note moyenne

2
avis laissés
5 étoiles
2
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de arthelys laissé le 22/03/2021
    Excellent tuto, ce nouveau format est génial ! Malgré mes lacunes en js et mon absence de connaissances en Ajax je suis arrivée au bout sans difficulté, car vous expliquez vraiment bien les choses et tout fini par s'éclaircir très vite ! Bravo et merci !!!
    "Super génial !!! Merci beaucoup ;-)))"

  • 5
    avis de jmch73 laissé le 20/03/2021
    Excellent tuto toujours tres bien expliqué +++++
    "Merci beaucoup. C'est super gentil ;-)"

  • 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
Parcours Developpeur PHP
accédez à plus de 1302 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données