Module 2 · 70 min
Mini-projet : Coffre à idées
Chaque technologie a un rôle simple : structure, style, interaction, logique, mémoire ou données.Atelier de construction
Une vraie WebApp relie une interface, une logique serveur et une mémoire organisée.
Ce module transforme les notions du Module 1 en application concrète. Il ne s’agit pas de mémoriser du code, mais de comprendre les pièces, de guider Codex et de tester chaque résultat.
TaskFlow permettra d’ajouter, classer, filtrer et conserver des tâches dans MySQL.
Notre fil rouge
TaskFlow est une WebApp fictive de gestion de tâches. Pendant ce module, elle nous aidera à comprendre comment créer, afficher et enregistrer une tâche, utiliser une base de données, manipuler des formulaires, découvrir les API et les controllers, puis guider Codex avec précision.
Vous n’avez pas besoin de mémoriser le code. Vous devez comprendre comment les pièces communiquent entre elles.
Objectif du module
Lire une architecture, une réponse Codex et un échange API.
Créer un formulaire, une base MySQL et des fichiers organisés.
Vérifier les données, comprendre les erreurs et itérer avec Codex.
Animation contrôlée
Interface
L’utilisatrice écrit le titre avant de l’envoyer.
Préparer le coursLaboratoire HTML/CSS
Vous n’avez pas besoin de devenir développeuse. Reconnaître un input, une table, un bouton ou un formulaire permet de mieux guider Codex, repérer un bug et demander une correction précise.
Organisez votre journée.
| Tâche | Priorité |
|---|---|
| Préparer le cours | Haute |
Un conteneur qui regroupe plusieurs éléments.
Exemple Codex : “Place le formulaire dans une div.”
Composants en action
Voici les informations importantes de votre journée.
Un dashboard résume les informations importantes au même endroit.
Cette zone peut contenir une description, une date limite ou des commentaires.
| Tâche | Priorité | État |
|---|---|---|
| Préparer le cours | Haute | En cours |
| Corriger le site | Moyenne | À faire |
| Envoyer le planning | Basse | Terminé |
Terme sélectionné
Un bloc qui regroupe une information ou une action.
Démonstration HTTP
Les données apparaissent dans l’URL. GET convient aux recherches, aux filtres et aux pages avec paramètres.
Les données voyagent dans le corps de la requête. POST convient aux formulaires, connexions, créations et modifications.
GET demande. POST envoie.
task.php?title=Acheter%20du%20caf%C3%A9vide$_GET['title'] = 'Acheter du café';
GET sert surtout à demander, filtrer ou lire. POST sert à envoyer, créer ou modifier.
Mini phpMyAdmin pédagogique
Table active
SELECT id, title, status, priority FROM tasks ORDER BY id;Dans phpMyAdmin, l’onglet SQL est l’endroit où vous pouvez coller une requête préparée par Codex.
Relations sans mathématiques
La colonne project_id permet à chaque tâche de retrouver son projet.
tasks.project_id → projects.idÉditeur vivant
JSON signifie JavaScript Object Notation. C’est un format texte léger, lisible par les humains et facile à analyser par les machines.
Malgré son nom, JSON ne dépend pas de JavaScript : PHP, Python, Java, C# et beaucoup d’autres langages peuvent l’utiliser. Dans une WebApp, il sert surtout aux échanges avec une API et aux fichiers de configuration.
{ }Un objet contient des paires clé / valeur.
{
"name": "Julie"
}[ ]Un tableau contient une liste de valeurs ou d’objets.
[
{ "title": "Tâche 1" },
{ "title": "Tâche 2" }
]Une virgule oubliée ou mal placée peut rendre tout le JSON invalide.
Modifiez une valeur pour voir le résultat.
Statut : à faire
Chef de circulation
Un controller reçoit une demande, vérifie ce qu’il faut faire, puis oriente l’action vers le bon traitement. Il ne sert pas à afficher joliment la page : il organise la logique côté serveur.
Voilà pourquoi Codex crée souvent un fichier comme task_controller.php : il centralise les décisions au lieu de mélanger la validation, MySQL et l’affichage.
Choisissez Ajouter, Supprimer, Modifier ou Filtrer.
// task_controller.php organise le traficLe controller ne stocke rien. Il valide, choisit et organise le trafic.
Guichet pédagogique
API signifie Application Programming Interface. Elle permet à une application de demander une information ou une action sans connaître tout le fonctionnement interne du système appelé.
Dans TaskFlow, JavaScript peut appeler POST /api/save_task.php, puis recevoir une réponse JSON claire.
/api/save_task.php
{
"title": "Préparer le cours",
"priority": "haute"
}{
"success": true,
"task_id": 12,
"message": "Tâche créée."
}{
"success": false,
"error": "Le titre de la tâche est obligatoire.",
"field": "title"
}Envoyez la requête avec ou sans titre.
{ "waiting": true }201 confirme la création. 422 signale une donnée invalide. Une API peut refuser proprement une demande et indiquer exactement quel champ doit être corrigé.
Code déjà prêt
Une librairie externe est un morceau de code déjà prêt. Elle peut faire gagner du temps pour un besoin précis, sans remplacer la réflexion sur l’architecture et la confidentialité.
Comparaison simulée
Transforme des chiffres bruts en graphique lisible.
Si elle vient du site officiel, de npm ou d’un CDN fiable, avec une version précise.
Le risque dépend surtout de sa source, de sa maintenance, de sa licence, de sa version, du CDN utilisé, des données manipulées et de sa nécessité réelle.
Codex peut proposer une librairie. L’humain doit valider si elle est utile, fiable et autorisée.
Mini atelier
index.phpapi/save_task.phpassets/js/taskflow.jsALTER TABLE tasks
ADD due_date DATE NULL;Ajouter une tâche, vérifier la réponse JSON puis rafraîchir la page.
Choisissez une réponse.
Choisissez une réponse.
Choisissez une réponse.
Une réponse Codex devient simple quand on sépare : fichiers, SQL, upload et tests.
Recréer Lyria dans un projet ChatGPT
Avant de parler à Codex, ChatGPT peut aider à transformer une demande floue en prompt propre, structuré et exécutable. Ce copilote ne construit pas l’application à votre place : il vous aide à mieux préparer la demande.
Instructions du projet ChatGPT
Tu es mon copilote WebApp, stratégique, pédagogique et technique.
Ton rôle :
M’aider à transformer mes idées en prompts Codex clairs, structurés et efficaces.
Contexte :
Je crée des WebApps avec Codex.
Je travaille principalement avec :
- PHP 8+
- MySQL / MariaDB
- phpMyAdmin
- HTML
- CSS
- JavaScript vanilla
- JSON
- API PHP
- controllers
- MAMP en local
- FileZilla / FTP pour la mise en ligne
- hébergement Infomaniak
Ton comportement :
- Tu m’aides à clarifier mon besoin.
- Tu me dis si mon idée est floue, trop large ou mal cadrée.
- Tu proposes une architecture simple.
- Tu distingues ce qui relève du HTML, du CSS, du JavaScript, du PHP, de MySQL, des API ou des controllers.
- Tu m’aides à formuler un prompt Codex complet.
- Tu indiques toujours le niveau Codex recommandé : Moyen, Élevé ou Très approfondi.
Règles importantes :
- Si une base de données est concernée, demande à Codex de fournir le SQL à exécuter dans phpMyAdmin.
- Si des fichiers doivent être envoyés sur le serveur, demande à Codex de lister clairement les fichiers à uploader.
- Si une fonctionnalité touche la sécurité, les données sensibles, les accès ou les mots de passe, signale les risques.
- Ne me laisse pas coller de données sensibles dans une IA.
- Préfère les solutions simples, maintenables et compréhensibles.
- Ne propose pas de framework lourd sauf demande explicite.
- Pour les débutants, explique les concepts simplement.
Quand je te donne une idée, réponds toujours avec :
1. Ce que j’ai compris
2. Ce qui est flou
3. Les questions utiles si nécessaire
4. Le niveau Codex recommandé
5. Le prompt Codex prêt à copier
6. Les points à tester après exécution
Style :
Sois clair, direct, bienveillant, précis et orienté action.Ne copiez jamais de données sensibles, de mots de passe, de dossiers patients ou d’informations internes dans une IA sans autorisation.
De l’idée à la maintenance
Un projet WebApp avec Codex avance par itérations. On teste, on corrige si besoin, on publie et on améliore.
Étape sélectionnée
Tout projet commence par un besoin concret à transformer en solution.
Phrase utile à dire à Codex“Je veux créer une WebApp qui répond à ce besoin : …”
Mission pratique
Crée une WebApp PHP appelée TaskFlow.
Stack :
PHP 8+, HTML, CSS, JavaScript vanilla.
Compatible MAMP.
Architecture souhaitée :
- index.php
- assets/css/app.css
- assets/js/app.js
- includes/config.php
- includes/db.php
- api/
- controllers/
- sql/
Pour l’instant, pas de base de données connectée.
Crée une page d’accueil moderne avec le titre TaskFlow et un formulaire visuel de tâche.
Donne-moi l’arborescence, le contenu des fichiers et les étapes pour tester dans MAMP.Test après cette étapeOuvrir http://localhost:8888/taskflow/
Ajoute la base de données MySQL pour TaskFlow.
Crée un fichier sql/install.sql avec :
- table categories
- table tasks
- relation category_id
- champs : id, title, description, status, priority, due_date, created_at, updated_at
Donne-moi le SQL complet à coller dans phpMyAdmin.
Explique aussi dans quel ordre tester.Test après cette étapeColler le SQL dans phpMyAdmin et vérifier que les tables existent.
Connecte TaskFlow à MySQL avec PDO.
Utilise includes/config.php pour les constantes DB_HOST, DB_NAME, DB_USER, DB_PASS.
Utilise includes/db.php pour créer une connexion PDO sécurisée.
Ne modifie pas l’interface.
Ajoute un petit test temporaire de connexion puis indique comment le retirer.Test après cette étapeVérifier que la page ne plante pas.
Ajoute la fonctionnalité d’ajout de tâche.
Le formulaire doit envoyer title, description, priority, category_id et due_date.
Crée api/save_task.php.
Utilise POST.
Valide les données :
- title obligatoire
- priority parmi low, medium, high
- due_date optionnelle
Utilise une requête préparée PDO.
Retourne du JSON : success true ou success false.
Ne recharge pas toute la page si possible.
Explique les fichiers modifiés et les tests à faire.Test après cette étapeAjouter une tâche et vérifier dans phpMyAdmin.
Ajoute l’affichage des tâches depuis MySQL.
Crée api/get_tasks.php si nécessaire.
Affiche les tâches dans des cartes TaskFlow.
Chaque carte doit montrer :
- titre
- description
- priorité
- catégorie
- date limite
- statut
Utilise JSON côté API.
Explique les fichiers modifiés.Test après cette étapeRafraîchir la page et vérifier que les tâches restent affichées.
Ajoute la modification du statut d’une tâche.
Crée ou modifie une API update_task_status.php.
Le statut doit accepter uniquement : todo, progress, done.
La carte doit se mettre à jour visuellement.
Utilise POST et des requêtes préparées.
Explique les fichiers modifiés et les tests.Test après cette étapeChanger le statut et vérifier en base.
Ajoute des catégories visuelles dans TaskFlow.
Les catégories doivent venir de MySQL.
Affiche les tâches par catégorie ou avec des badges visibles.
Ajoute un filtre par catégorie.
Ne casse pas l’ajout de tâche.
Explique les fichiers modifiés.Test après cette étapeCréer plusieurs tâches dans différentes catégories et filtrer.
Ajoute le drag and drop des cartes TaskFlow.
Objectif :
Pouvoir déplacer une tâche d’une colonne à une autre.
Quand une carte est déplacée, la base MySQL doit être mise à jour via une API.
Contraintes :
- JavaScript vanilla si possible
- pas de librairie externe sauf si tu expliques clairement pourquoi elle est nécessaire
- conserver l’interface existante
- ne pas casser les filtres
- retour visuel en cas de succès ou d’erreur
Donne :
1. les fichiers modifiés
2. le code complet
3. le SQL si nécessaire
4. les tests à faireTest après cette étapeDéplacer une carte et rafraîchir pour vérifier que la position ou le statut est conservé.
Crée volontairement un petit bug pédagogique dans TaskFlow, puis explique comment le trouver avec la console navigateur ou l’onglet Network.
Le bug doit être simple et réversible :
- mauvais chemin JS
ou
- endpoint API incorrect
ou
- champ JSON mal nommé
Explique :
1. le symptôme
2. où regarder
3. comment corrigerTest après cette étapeLire la console et corriger le problème.
Analyse l’état actuel de TaskFlow.
Donne-moi :
1. les fonctionnalités présentes
2. les fichiers importants
3. les risques
4. les bugs possibles
5. les prochaines améliorations recommandées
6. les fichiers à sauvegarder
7. les fichiers à uploader si je devais publierTest après cette étapeComparer le bilan avec le projet réel.
TaskFlow relie maintenant une interface, PHP, une API et MySQL.
Après chaque étape, on teste avant de continuer. Si on empile 5 demandes sans tester, on fabrique une lasagne de bugs.
Continuer sans repartir de zéro
Afficher les catégories avec une identité visuelle claire.
Déplacer une carte d’une catégorie à une autre.
Modifier une tâche sans quitter la page.
Réduire la liste aux tâches recherchées.
Afficher le nombre de tâches par catégorie.
Rendre les priorités critiques immédiatement visibles.
Demander confirmation avant toute suppression.
Améliorer la hiérarchie et la lisibilité.
Demander la liste des fichiers modifiés après chaque itération.
Travaillez une amélioration à la fois : prompt précis, fichiers modifiés, test local, puis itération suivante. Vous réutiliserez ainsi HTML, CSS, JavaScript, PHP, MySQL, controllers, API et vocabulaire UI.