TP5 - Créer un Formulaire | Chillo.tech

Autoplay
Autocomplete

Previous Lesson Complete and Continue

Devenir Développeur Full Stack (04 mois)

Présentation de la formation

Je me présente à vous (6:25)
Contenu du cours (5:48)
Comment tirer le meilleur parti de ce cours (6:01)
Informations

Comment planifier et développer une application

Cycle complet pour développer une application (7:32)
Les acteurs pour développer une application, leurs rôles, leurs tâches et responsabilités (7:27)
Définir les taches de l'application et un tableau Scrum dans Trello (25:28)

Algorithme

Présentation et historique (5:20)
Structure générale d’un algorithme (12:07)
Type de données (15:05)
Travaux Pratiques Instruction et types de données (0:40)
Correction du TP Instructions et types de données (7:53)
Conditions et opérations arithmétiques (16:09)
Gestions des cas (3:00)
Travaux Pratiques Gestion des conditions (1:46)
Correction TP Gestion des conditions
Boucles (pour, tant que, …) (8:21)
Travaux Pratiques : Les boucles (1:27)
Correction TP Les Boucles
Méthodes (16:03)
Travaux Pratiques 1 : Les méthodes (Fonctions) (0:30)
Travaux Pratiques 2 : Les méthodes (Fonctions) (1:11)
Correction TP2 Les Méthodes (Fonctions)
Tableaux : Insertion de données (11:17)
Tableaux : opérations sur chacune des valeurs (3:28)
Travaux Pratiques : Multiplier les valeurs d un tableau par 3 (0:21)
Correction TP Multiplier les valeurs d'un tableau par 3
Tableaux : Tri (12:41)
Travaux Pratiques : Tri (0:39)
Correction TP Tri
Tableaux : Recherche (1:43)
Opérations sur les chaines de caractères (6:02)
Travaux Pratiques : Opérations sur les chaines de caractères (1:20)
Correction TP Opérations sur les chaines de caractères
Master class (302:14)
Conclusion Chapitre 3 (1:24)

HTML/CSS

Présentation (3:24)
Installation des Outils (5:15)
Premières Notions (12:28)
Mis en Forme de la Page (12:22)
Devtools (6:09)
TP1 - Reproduire à l'Identique la page paragraphe.html (0:33)
Structure d'une Page HTML (13:23)
TP2 - Mis en Forme des Boutons (0:27)
Correction TP2 - Mis en Forme des Boutons (4:01)
Titres Paragraphes (12:12)
Architecture Application (10:37)
Syntaxe CSS (11:53)
Couleurs (6:03)
Liens (9:35)
Installer les Extensions (4:40)
Déployer le comme dans un Serveur (4:49)
Listes (8:10)
Boutons (4:28)
Gestion des Effets (le survol, les ombres, la transition) (14:37)
Création des Blocks (19:30)
Définition des Bordures (13:29)
Afficher les Eléments sur une Ligne (5:18)
Flexbox (9:53)
Les marges (6:19)
Polices (4:29)
Dimensions (4:17)
TP3 - Reproduire la Page Liste (1:13)
Tableaux (17:10)
Images (12:11)
TP4 - Reproduire un tableau contenant des images (0:38)
Formulaire (18:27)
TP5 - Créer un Formulaire (0:55)
Position des Eléments (6:19)
TP6 - Position des Eléments (0:33)
Bootstrap (14:05)
TP7 - Bootstrap (1:10)
Gestion des métadonnées (3:47)
Media Queries (16:12)
TP8 : Media Queries (1:30)
Grilles (16:39)
TP9 : Grilles (8:08)
Conclusion (1:29)
Live coding (248:11)
Notes

Commandes de base Linux

Introduction (1:39)
Commande PWD et commande CAT (4:37)
Commande LS (3:01)
Commande CD (3:12)
Commande MKDIR (4:59)
Commande TOUCH (5:28)
Commande CP (2:26)
Retrouver de l'aide (2:16)
Commande MV (5:02)
Commande RM (1:45)
Commande FIND (3:22)
commande GREP (2:55)
Enchainer les commandes (4:50)
Commande HEAD (2:26)
Conclusion (0:56)

Git & Github

Présentation de GitHub (3:08)
Installation prérequis (8:07)
Initialisation du répertoire (5:40)
Premières commandes (13:27)
Commande git commit (11:53)
Créer une branche (14:42)
Commande git pull (4:16)
Commande git rebase (9:11)
Commande git merge (2:23)
Commande reset et commande git diff (5:59)
Commande git clone (1:53)
Travaux pratiques (1:08)
Conclusion (0:59)
Live Coding (249:37)
Notes

Javascript

Introduction (2:32)
Présentation (9:18)
Types de données (16:49)
Commentaires (7:34)
Les opérations (6:46)
Le DOM (23:21)
Les méthodes (17:16)
Travaux Pratiques : Les méthodes (4:47)
Correction Travaux Pratiques : Les méthodes (22:06)
Chaine de caractères (20:25)
Travaux pratiques : Chaine de caractères (3:29)
Les requêtes - Théorie (7:50)
Les requêtes - Lecture de données (12:39)
Traitement de données (4:28)
Travaux pratiques : Lecture de données (0:25)
Affichage des données dans un tableau (15:46)
Travaux pratiques : Tableaux (1:03)
Map (3:17)
Filter (9:18)
Travaux Pratiques : Méthode sort (1:05)
Déstructurer les données (4:41)
Travaux Pratiques : Filtres (0:49)
Travaux Pratiques : Map (0:18)
Conclusion (0:44)
Live Coding (84:27)
Live coding 2 (104:59)
Live coding 3 (70:55)
Livecoding 4 (150:34)
Files
Live coding 5 (143:23)
[Live coding] Méthode fetch (192:18)

React : Les Notions

Présentation (1:11)
Suport de cours
Prerequis (8:19)
Génération du projet (7:27)
Structure du projet (7:53)
Premier Composant (7:17)
Fonctionnement de React (4:13)
Passer des Paramètres dans un composant (4:17)
Type de Données (5:31)
Affichage Conditionnel (5:48)
Fragments (2:59)
Afficher une liste d'utilisateurs (23:11)
Travaux Pratiques - Afficher une liste d'utilisateurs (1:28)
Correction Travaux Pratiques - Afficher une liste d'utilisateurs (18:17)
Tailwind (19:19)
Déstructurer les objets (6:54)
Gestion des évènements (23:12)
Hook Use-state (14:59)
Travaux Pratiques - Gestion des évènements (0:51)
Correction Travaux Pratiques - Gestion des évènements (7:31)
Introduction à la navigation (1:06)
Configuration des routes (19:58)
Navigation entre les pages (31:19)
Travaux Pratiques : Créer le composant demandes et configurer la navigation (0:50)
Le Hook Use Effect (4:35)
Effectuer une requête (7:18)
Effectuer une requête avec Async await (5:02)
Requête en fonction d'un paramètre (13:57)
Travaux Pratiques : Afficher une demande (0:25)
Travaux Pratiques : Afficher une liste de demandes (0:33)
Travaux Pratiques : Ajouter une image (1:21)
Conclusion (0:56)
Livecoding 1 (101:13)
Livecoding 2 (77:08)
Livecoding 3 (121:39)
Live coding 4 (81:07)
[LIVE] DISCUSSION DEV/PROJETS (160:11)
Live coding intro react (174:56)

REACT : Le Projet

Présentation (1:28)
Définir les tâches (5:21)
Generation du projet (7:51)
Configuration Tailwind CSS (3:24)
Configurer la navigation (13:03)
Navigation (10:23)
Présentation du Layout (9:33)
Design du menu (29:26)
Entête de la page (3:14)
Liste des déclarations Partie 1 (17:12)
Liste des déclarations Partie 2 (19:43)
Affichage conditionnel mis en forme des status (8:45)
Affichage-conditionnel mis en forme de la date (8:57)
Travaux Pratiques afficher la liste des demandes (1:18)
Présentation JSON Server (1:37)
Installation JSON Server (10:38)
Lecture des declarations (9:32)
Types de données (8:47)
Configuration des alias (5:29)
Créer un Hook pour lire les déclarations (8:01)
Présentation du CRUD (11:45)
Méthode pour toutes les recherches (8:15)
Afficher la liste avec plusieurs composants (24:24)
Type de données (4:32)
La propriété Children (3:28)
Travaux Pratiques : Afficher les demandes (1:42)
Formulaire : Tri par statut (24:31)
Travaux Pratiques : Trier les déclarations par statuts (0:17)
Formulaire : Tri par date (8:18)
Travaux Pratiques : Trier les déclarations par date (0:30)
Formulaire : Rechercher les déclarations (8:02)
Hook useref : filtrer les demandes (18:10)
Travaux Pratiques : Rechercher les demandes (0:25)
Présentation des Formulaires (1:13)
Premier champ (11:26)
Installer et Configurer tailwind forms (8:50)
Ajout des champs et mis en forme (7:33)
React Hook UseForm : Gérer et valider le formulaire (9:01)
YUP gérer et valider le formulaire (22:31)
Compléter le formulaire (20:05)
Enregistrer les données du formulaire (10:29)
Gérer Le résultat d'une requête (6:26)
Gestion des actions Mis à jour du statut d'une declaration (21:17)
Gestion des actions Mis à jour d'une declaration (7:18)
Echange des données : Présentation de React Context (7:19)
Echange des données : Création de React Context (8:29)
Affichage des déclarations du contexte (6:25)
Affichage des déclarations du contexte (11:41)
Le hook useReducer : Presentation (2:05)
Le hook useReducer : Liste des declarations (11:06)
Le hook use Reducer : Modifier une déclaration (17:56)
End (0:39)
Live coding 1 (111:09)
Live coding 2 (65:54)
Live coding 3 (341:28)

Merise

Présentation (9:12)
Présentation des Modèles (4:28)
Présentation MCD (3:50)
Premier MCD (9:40)
Association Reflexive (2:26)
Association Plusieurs à Plusieurs (3:53)
Association Un à Plusieurs (4:29)
Association Ternaire (1:31)
MCD vers MLD (0:52)
Gestion des Identifiants (2:48)
Gestion des Cardinalités Différentes (5:16)
Gestion des Cardinalités Similaires (1:47)
Association Ternaire (2:01)
Gestion des Associations Reflexives (1:35)
Normalisation des Données (1:00)
Première Forme Normale (1:44)
Deuxième Forme Normale (1:44)
Troisième Forme Normale (0:40)
TP Concevoir le Système d'Informations (0:34)
End (1:32)

Base de données

Présentation (3:23)
Présentation du SQL (3:26)
Installer MySQL sur MAC (10:42)
Installer MySQL sur Windows (12:06)
Créer une Base de Données (3:50)
Créer une Table (10:05)
Insérer des Commentaires dans le Code (3:34)
Insérer une Donnée dans la Table (4:59)
Lire les Données (3:58)
Choisir les Champs à Afficher dans une Table (3:38)
Insérer Plusieurs Données dans la Table (6:39)
Afficher les Données d'une Table qui Remplissent une Condition (3:55)
TP Créer une Table role et Afficher ses Données (0:51)
Qu'allons-nous Faire Ensuite (1:33)
PRIMARY KEY : Creer une Table avec une Clé Primaire (11:14)
INSERT : Insérer des Données (7:35)
PRIMARY KEY : Définir une Contrainte sans la Nommer (12:15)
UNIQUE : Donner un nom à une contrainte (9:04)
ALTER TABLE : Ajouter une Contrainte sur une Table Existante (4:50)
ALTER TABLE : Supprimer une Contrainte d'une Table (1:17)
ALTER TABLE : Ajouter une Colonne dans une Table (4:13)
DROP TABLE : Supprimer une Table (1:40)
TP Créer les Tables avec leurs Contraintes Partie 1 (1:11)
Correction TP Créer les Tables avec leurs Contraintes (10:25)
Présentation du concept de relations (1:31)
Schématiser les relations (5:02)
Création des tables avec des contraintes (10:47)
FOREIGN KEY : Création des tables avec des clés étrangères (7:52)
FOREIGN KEY : Insertion manuelle de données dans les relations (14:01)
FOREIGN KEY : Insertion dynamique de données dans les relations (12:39)
Présentation des jointures (3:08)
SQL JOIN Liste des profils et leurs roles (8:39)
ALIAS SQL JOIN : Liste des profils et leurs roles (4:20)
TP Insérer les données, la table adresse et associer les adresses aux profils (0:41)
Correction TP (11:39)
Correction TP table adresse et associer les adresses aux profils (5:38)
TP Afficher tous les profils leurs roles et leurs adresses (0:42)
Correction TP (5:38)
LEFT JOIN : Afficher tous les utilisateurs et leurs adresses y compris ceux qui n'ont pas d'adresse (4:06)
RIGHT JOIN : Afficher tous les utilisateurs et leurs adresses y compris les adresses non affectées (0:59)
DELETE : Supprimer une donnée (2:48)
UPDATE : Mettre à jour des données (2:26)
End SQL (2:12)
Live coding (167:41)
Live coding (163:30)

Java

Présentation (2:19)
Présentation de Java (3:54)
Installer Java et IntelliJ sous MAC (5:40)
Générer un projet java (2:31)
Ecrire un premier code en Java (5:08)
Compiler et exécuter un code java (6:21)
Créer des packages (2:46)
Créer une classe (4:46)
Utiliser une classe (3:06)
Ajouter une méthode dans une classe (3:27)
Lire les données du clavier (8:12)
IF: Les conditions (4:03)
Debugger le code (6:11)
IF ELSE: Les conditions (1:59)
Bien ranger le code (3:42)
IF ELSE IF: Les conditions (3:27)
FOR: Répéter une opération (8:09)
WHILE: Répéter une opération tant que la condition n'est pas remplie (3:02)
SWITCH CASE: Les conditions (3:00)
Architecture d'un projet (2:36)
Générer le projet (2:28)
Créer le package entities (2:02)
Créer le package services (1:08)
Créer le package dao (1:32)
Créer le package utilities (1:30)
Architecture n-tier (1:01)
Présentation de la POO (1:36)
Première classe pour générer des objets (2:00)
Les accesseurs (3:51)
Les constructeurs (2:19)
Lire les données de saisies par l'utilisateur (8:02)
Lire les informations pour un cercle (12:51)
Afficher les données saisies (5:14)
Présentation des listes (0:59)
Lire les informations dans une liste (6:27)
Transformer une liste (8:27)
Service calculer la surface (10:56)
TP calculer la surface du triangle et du rectangle (1:03)
Correction TP (9:44)
Présentation de la connexion à la base de données (1:51)
Télécharger installer la librairie pour accéder à la base de données (2:41)
SQL insert écrire dans une base de données (10:05)
SQL insert écrire dans une base de données avec le code Java (8:17)
SQL relation entre les tables (4:35)
JAVA SQL Requête sur deux tables (13:23)
Les constantes (1:37)
Les Enums (6:03)
Héritage (4:17)
Protected : portée des méthodes (1:36)
Classe abstraite (1:15)
Définir une Interface (8:11)
Utiliser une interface (9:49)
Tranférer les données avec les record (20:49)
Livecoding 1 (89:35)
Live coding 2 (80:02)

MAVEN

Présentation (5:04)
Installation de Maven (1:45)
Générer un projet (1:50)
Le fichier pom.xml (3:34)
Le répertoire .m2 (2:02)
Générer un livrable (3:22)

Architecture Rest

Architecture des applications (4:16)
Présentation de l'architecture n-tiers (3:23)
Notions sur les API (4:50)
Format d'une requête (13:54)
Format d'une réponse (4:39)
Recapitulatif (2:18)

Spring & Spring Boot

Présentation de spring framework et spring boot (3:28)
Générer le projet (6:11)
Architecture d'une application (3:09)
Les annotations (2:21)
Démarrer l'application (3:57)
Organiser le projet (6:25)
Créer un controleur (9:44)
Tester un endpoint (9:21)
Afficher des logs (6:11)
Définir les profils (6:22)
Créer un service (3:31)
Injecter une dépendance de manière classique (2:09)
Injecter une dépendance avec autowired (3:04)
Injecter une dépendance via le constructeur (2:30)
Présentation de JPA (2:36)
ORM : Correspondance entre les objets et les tables (7:38)
Créer un repository (3:42)
JPA : Insérer les données dans la base (10:42)
Présentation de la suite (1:25)
LOMBOK : Simplifier le code (5:04)
GET : Lire toutes les données (5:43)
PathVariable : Lire une entité en fonction de son identifiant(id) (7:55)
PUT : Mis à jour des données (7:45)
DELETE : Supprimer une entité (3:10)
Définir le bon code pour les réponses (2:39)
Gérer les exceptions 01 (13:16)
Gérer les exceptions 02 (13:35)
ORM : Gérer les enums (4:46)
ORM : One to Many et Many to One relation entre l'utilisateur et son adresse (20:20)
Initialisation de la base de données avec le fichier schemasql (10:53)
Insérer des données dans la base avec le fichier datasql (12:44)
FLYWAY : Historique de la base de données (2:30)
FLYWAY : Insérer des données (8:10)
Présentation des tests unitaires (1:25)
InjectMocks : Ecrire un test unitaire (11:04)
TP écrire un test unitaire pour valider le téléphone (0:13)
Tester l'exception retournée par une méthode (4:22)
Mock : Tester une méthode qui fait appel à une dépendance (6:15)
Mock : Simuler les données retournées par une dépendance (3:32)
Présentation de la base données H2 (3:40)
Tester une méthode existante (6:11)
Ecrire une méthode et la tester (6:13)
Tester un contrôleur (9:12)
Tester la création des utilisateurs (3:20)
Spécifier un libelle pour les tests (1:39)
Tester toujours son code (0:25)
Live coding - Partie 1 (58:32)
Live coding - Partie 2 (146:32)
Présentation de la sécurité (2:25)
Crypter le mot de passe (7:09)
Inscription (11:17)
DTO :Transformer les données transmises par l'utilisateur en celles de l'application (10:29)
DTO : Définir les champs à retourner à l'utilisateur (9:58)
Préfixer les API (2:45)
Créer les rôles dans la base de données (30:25)
Mis a jour de la base de données (4:33)
Mis a jour des entités (6:37)
Mis a jour des entités - 2 (4:39)
Compléter le profil avec les informations requises par Spring Security (6:16)
Associer le role et les permissions des utilisateurs (5:29)
Définir un code d'activation pour un compte (19:43)
Activer le compte utilisateur (20:46)
Présentation de Freemaker pour la création de mails (2:54)
Créer le message à transmettre à l'utilisateur (21:13)
Présentation de la boite de messagerie SMTP4DEV (9:02)
Présentation de la boite de messagerie MAILPIT (4:28)
Envoi de mail (19:18)
Présentation du flow de connexion (2:32)
Présentation du JWT (2:28)
Génération des clés RSA (12:54)
Configurer l'utilisation des clés (10:52)
Configurer le gestionnaire d'authentification (10:32)
Configurer les routes autorisées (10:17)
Authentifier un utilisateur (8:31)
Générer un bearer (8:05)
Live coding inscription (322:36)
Live coding connexion (196:34)
Live coding les bases de spring (0:11)

Liaison Frontend et Backend

Présentation de la section (0:59)
Gérer le statut connecte ou déconnecté de l'utilisateur (8:55)
Créer le formulaire de connexion (31:26)
Connexion utilisateur - partie 1 (6:33)
Présentation du Reverse Proxy (2:53)
Configuration du reverse proxy (3:28)
Connexion utilisateur - partie 2 (7:36)
Installation React Query (11:46)
React Query - Lire les déclarations (10:52)
React Query - Afficher les déclarations (12:16)
Création d'une table pour les statuts (7:37)
Création de la table pour les déclarations (13:08)
Création de l'entité déclaration (9:16)
Lecture des information de l'utilisateur connecté (2:37)
Créer mes classes pour gérer les entreprises et les statuts (10:48)
Créer une déclaration (9:18)
Présentation des liaisons avec les statuts (2:26)
Mis à jour du schéma (5:30)
Mis à jour des entités pour enregistrer les statuts (4:34)
Mis à jour du service pour enregistrer les statuts (5:32)
Créer le contrôleur pour stocker les déclarations (5:08)
Créer une déclaration (15:56)
Afficher les déclarations (8:23)
Mettre les données affichées (15:30)
Sélectionner les données retournées par l'API (25:58)
Informations de l'utilisateur connecté (11:26)
Créer une declaration (14:47)
Créer une declaration avec axios (31:08)
Déconnecter un utilisateur (5:37)
Afficher les actions en fonction du statut (15:48)
Créer un profil administrateur et un profil agent (7:47)
Afficher les données en fonction du profil (6:23)
BACKEND : Modifier le statut d'une déclaration (12:46)
IHM : Modifier le statut d'une déclaration (11:46)
Livecoding liaison front back (365:52)

Déploiement

Présentation (1:27)
Présentation des ressources (3:09)
Interaction entre les acteurs (3:50)
Présentation des serveurs (13:01)
Présentation des accès au serveur (10:20)
Connexion au serveur sans clé ssh (7:59)
Connexion avec une clé ssh (9:17)
Installer MySQL (10:48)
Initialisation des configurations Github Actions (23:34)
Gestion des identifiants (6:46)
Générer le livrable (5:27)
Créer un répertoire sur le serveur (8:20)
Copier le livrable sur le serveur (8:24)
Installer les prérequis pour le microservice (7:29)
Exécution du microservice (14:14)
Configuration pour déployer un Front (7:47)
Live Coding Deploiement (179:27)
Génération du livrable en local (5:29)
Génération du livrable via le pipeline (12:16)
Installation du serveur web Nginx (8:52)
Déployer le Front (11:55)
Acheter et configurer un nom de domaine (8:11)
Génération d'un certificat (4:22)
Configuration d'un reverse proxy (6:34)
Test de l'application (7:49)
FIN DE LA FORMATION (2:47)
Live coding (153:54)

Angular

Présentation (1:43)
Comparer Framework et librairie (2:57)
Les prérequis pour cette formation (2:51)
Présentation d' Angular (1:55)
Présenataion de l'application à développer (1:40)
Générer le projet website-naissances (10:22)
Architecture du projet (7:28)
Description des composants (7:38)
Présentation du binding (2:51)
Binding avec les signaux (1:18)
Liste des outils pour développer (3:48)
Applications à construire (4:04)
Installer et configurer TailwindCSS (2:56)
Les composants - Créer une navigation (14:44)
Transmission de données entre composants (14:53)
Définition du format de données (19:23)
Les services (9:34)
Les boucles (21:55)

Teach online with

TP5 - Créer un Formulaire

Lesson content locked

If you're already enrolled, you'll need to login.

Enroll in Course to Unlock