Scribd
Importer
5 vues2 pages

TP Développement Web Full Stack

Le document décrit un projet intégratif de développement web full stack, comprenant la création d'une application de gestion de tâches avec un front-end en HTML, CSS et JavaScript, et un back-end en Flask. Les étapes incluent la préparation des dossiers, la structuration de la page, la gestion des tâches avec des requêtes API, et le déploiement sur un serveur web. Des exercices bonus sont proposés pour améliorer l'expérience utilisateur, la sécurité et l'optimisation de l'application.

Transféré par

dianganamoniciat
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
5 vues2 pages

TP Développement Web Full Stack

Le document décrit un projet intégratif de développement web full stack, comprenant la création d'une application de gestion de tâches avec un front-end en HTML, CSS et JavaScript, et un back-end en Flask. Les étapes incluent la préparation des dossiers, la structuration de la page, la gestion des tâches avec des requêtes API, et le déploiement sur un serveur web. Des exercices bonus sont proposés pour améliorer l'expérience utilisateur, la sécurité et l'optimisation de l'application.

Transféré par

dianganamoniciat
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

TP Intégratif - Développement Web Full Stack

Étape 1 : Préparation (15 min)


1. Créez un dossier `frontend/` contenant :
- `[Link]` : page HTML de base.
- `[Link]` : fichier de style pour la mise en page.
- `[Link]` : fichier JavaScript pour l'interactivité.

2. Créez un dossier `backend/`, initialisez un environnement virtuel et installez Flask :


- Créez un environnement virtuel avec `python -m venv venv`.
- Activez-le et installez Flask et Flask-SQLAlchemy.

Étape 2 : Front-end (45 min)


1. Dans `[Link]`, structurez une page contenant :
- Un titre et un formulaire pour ajouter des tâches.
- Une liste non ordonnée (`ul`) pour afficher les tâches.

2. Dans `[Link]`, appliquez une mise en forme propre et lisible :


- Centrage de la page.
- Styles pour les formulaires, champs de saisie et boutons.

3. Dans `[Link]` :
- Interceptez la soumission du formulaire pour ajouter une tâche dans le DOM.
- Créez dynamiquement un élément de liste (`li`) avec un bouton de suppression.
- Préparez l'envoi des données vers le back-end via `fetch('/add-task')`.
- Gérer la suppression locale d'une tâche avec `.remove()`.

Étape 3 : Back-end avec Flask (45 min)


1. Créez `[Link]` :
- Configurez Flask avec SQLite.
- Créez un modèle `Task` avec SQLAlchemy.
- Implémentez `/add-task` pour recevoir une tâche en POST et l'enregistrer.
- Implémentez `/get-tasks` pour retourner toutes les tâches en JSON.

2. Connectez le front-end :
- Lors du chargement de la page, utilisez `fetch('/get-tasks')` pour afficher les tâches existantes.
- À la suppression d'une tâche, préparez une requête `DELETE` vers `/delete-task/<id>` (à implémenter).

Étape 4 : Déploiement sur Serveur Web (30 min)


Option 1 : IIS
- Activez IIS sous Windows et placez `frontend/` dans `C:\inetpub\wwwroot\todo`.
- Configurez une règle de réécriture pour rediriger les appels API vers Flask.

Option 2 : Apache
- Installez Apache et configurez un Virtual Host pointant vers `frontend/`.
- Activez `mod_proxy` pour rediriger `/api` vers le serveur Flask en local.

Exercices Bonus
TP Intégratif - Développement Web Full Stack

1. UX :
- Ajoutez un bouton pour marquer une tâche comme "terminée" (avec une classe CSS).
- Stockez les tâches localement avec `localStorage`.

2. Sécurité :
- Ajoutez une authentification basique (avec `Flask-HTTPAuth`).
- Validez les entrées pour éviter le XSS.

3. Optimisation :
- Minifiez vos fichiers CSS et JS.
- Activez la compression GZIP sur le serveur.

Rendu attendu
1. Dossier complet avec code front-end et back-end.
2. Capture d'écran de l'application fonctionnelle.
3. Une page de documentation expliquant :
- Le lancement de l'application.
- Les choix techniques.

Vous aimerez peut-être aussi