Genie logiciel igl235
Thème :
Junior
2 vues ·3/6 leçons

10 TD + 10 TP - Programmation Web II

🎓 TRAVAUX DIRIGÉS (TD)

TD 1 : Concepts Fondamentaux du Web

Durée : 2h | Niveau : Débutant

  1. Expliquez la différence entre HTML, CSS et JavaScript. Donnez un exemple concret d’utilisation pour chacun.

  2. Décrivez le processus complet d’une requête HTTP depuis le navigateur jusqu’à l’affichage de la page web.

  3. Qu’est-ce qu’un protocole HTTP ? Énumérez les principaux codes de statut HTTP (200, 404, 500, etc.) et expliquez leur signification.

  4. Comparez les trois types de réseaux : Internet, Intranet et Extranet. Donnez des exemples d’utilisation pour chacun.

  5. Expliquez le rôle d’un serveur web et comment il communique avec un navigateur client.

TD 2 : Installation et Configuration de Serveurs Web

Durée : 2h | Niveau : Débutant

  1. Comparez WampServer, EasyPHP et XAMPP. Quels sont les avantages et inconvénients de chacun ?

  2. Énumérez les étapes nécessaires pour installer XAMPP sur Windows.

  3. Expliquez comment configurer Apache pour servir des fichiers PHP.

  4. Décrivez le processus d’installation et de configuration de PostgreSQL.

  5. Qu’est-ce qu’un fichier .htaccess ? À quoi sert-il dans Apache ?

TD 3 : Bases de Données MySQL

Durée : 2h | Niveau : Intermédiaire

  1. Expliquez les concepts fondamentaux de MySQL : bases de données, tables, lignes et colonnes.

  2. Écrivez les requêtes SQL pour :

    • Créer une table produits avec les colonnes : id, nom, prix, quantité
    • Insérer 3 produits
    • Récupérer tous les produits
    • Mettre à jour le prix d’un produit
    • Supprimer un produit

  3. Qu’est-ce qu’une clé primaire ? Pourquoi est-elle importante ?

  4. Expliquez la différence entre SELECT * et SELECT nom, prix FROM produits.

  5. Qu’est-ce qu’une relation entre tables ? Donnez un exemple avec clients et commandes.

TD 4 : Langage PHP - Bases

Durée : 2h | Niveau : Intermédiaire

  1. Expliquez la syntaxe de base de PHP et la différence entre variables, constantes et tableaux.

  2. Écrivez un script PHP qui :

    • Déclare 3 variables (nom, âge, email)
    • Les affiche à l’écran
    • Utilise des structures de contrôle (if, for)

  3. Qu’est-ce qu’une fonction en PHP ? Écrivez une fonction qui calcule la moyenne de 3 notes.

  4. Expliquez la différence entre $_GET et $_POST en PHP.

  5. Comment gérer les erreurs en PHP ? Expliquez les blocs try/catch.

TD 5 : Connexion à une Base de Données avec PHP

Durée : 2h | Niveau : Intermédiaire

  1. Expliquez la différence entre les préfixes mysql: et pgsql: dans PDO.

  2. Écrivez un script PHP qui se connecte à une base de données MySQL en utilisant PDO.

  3. Qu’est-ce que PDO ? Quels sont ses avantages par rapport à mysql_connect() ?

  4. Écrivez un script PHP qui récupère tous les utilisateurs d’une table utilisateurs et les affiche.

  5. Comment gérer les erreurs de connexion à la base de données ? Donnez un exemple avec PDOException.

TD 6 : Framework .NET et C#

Durée : 2h | Niveau : Avancé

  1. Expliquez l’architecture du Framework .NET : CLR, BCL et langages supportés.

  2. Qu’est-ce que le Common Language Runtime (CLR) ? Quels sont ses rôles ?

  3. Comparez ASP.NET et ASP.NET Core. Quels sont les avantages de ASP.NET Core ?

  4. Expliquez les types d’applications que vous pouvez créer avec .NET (desktop, web, mobile, cloud).

  5. Qu’est-ce que NuGet ? Comment l’utiliser pour ajouter des dépendances à un projet .NET ?

TD 7 : Projet Apache et Outils Open Source

Durée : 2h | Niveau : Intermédiaire

  1. Qu’est-ce que le Projet Apache ? Énumérez 5 projets Apache importants et leurs utilités.

  2. Expliquez les fonctionnalités principales d’Apache HTTP Server.

  3. Qu’est-ce que mod_rewrite ? Donnez un exemple de réécriture d’URL.

  4. Comparez Apache avec Nginx. Quels sont les avantages et inconvénients de chacun ?

  5. Comment configurer un virtual host dans Apache ?

TD 8 : Outils de Développement Web

Durée : 2h | Niveau : Intermédiaire

  1. Comparez Visual Studio Code et Visual Studio 2022. Quel outil choisir pour quel type de projet ?

  2. Qu’est-ce que Git ? Expliquez les commandes principales : git add, git commit, git push, git pull.

  3. À quoi sert Postman ? Donnez un exemple de test d’API avec Postman.

  4. Expliquez le rôle de Chrome DevTools dans le développement web.

  5. Qu’est-ce que Docker ? Pourquoi l’utiliser dans le développement web ?

TD 9 : Frameworks et Bibliothèques Frontend

Durée : 2h | Niveau : Avancé

  1. Comparez React, Angular et Vue.js. Quels sont les avantages et inconvénients de chacun ?

  2. Qu’est-ce que Bootstrap ? Comment l’utiliser pour créer un site responsive ?

  3. Expliquez la différence entre Tailwind CSS et Bootstrap.

  4. Qu’est-ce que Sass ? Quels sont ses avantages par rapport au CSS classique ?

  5. Qu’est-ce que Node.js ? Pourquoi l’utiliser pour le développement web ?

TD 10 : Sécurité et Bonnes Pratiques Web

Durée : 2h | Niveau : Avancé

  1. Qu’est-ce qu’une injection SQL ? Comment la prévenir ?

  2. Expliquez les attaques XSS (Cross-Site Scripting) et comment les prévenir.

  3. Qu’est-ce que le CSRF (Cross-Site Request Forgery) ? Comment protéger une application contre cette attaque ?

  4. Comment sécuriser les mots de passe en PHP ? Expliquez le hachage et le salage.

  5. Qu’est-ce que HTTPS ? Pourquoi est-il important pour la sécurité web ?

💻 TRAVAUX PRATIQUES (TP)

TP 1 : Installation et Configuration de l’Environnement de Développement

Durée : 3h | Niveau : Débutant

Objectif : Installer et configurer XAMPP avec PostgreSQL

Tâches :

  1. Téléchargez et installez XAMPP sur votre machine.

  2. Vérifiez que Apache et MySQL sont correctement installés.

  3. Téléchargez et installez PostgreSQL.

  4. Configurez php.ini pour activer l’extension PostgreSQL (pdo_pgsql).

  5. Créez un fichier test_pgsql.php dans C:\xampp\htdocs\ pour tester la connexion à PostgreSQL.

  6. Testez la connexion en accédant à http://localhost/test_pgsql.php.

  7. Documentez les étapes effectuées dans un fichier INSTALLATION.md.

TP 2 : Création d’une Base de Données MySQL

Durée : 3h | Niveau : Débutant

Objectif : Créer une base de données et des tables pour une application de gestion d’étudiants

Tâches :

  1. Créez une base de données gestion_etudiants.

  2. Créez les tables suivantes :

    • etudiants (id, nom, prenom, email, date_naissance, specialite)
    • specialites (id, nom, description)
    • notes (id, etudiant_id, matiere, note, date_examen)

  3. Insérez 5 étudiants et 3 spécialités.

  4. Écrivez des requêtes SQL pour :

    • Récupérer tous les étudiants
    • Récupérer les étudiants d’une spécialité donnée
    • Calculer la moyenne des notes d’un étudiant
    • Récupérer les étudiants avec une moyenne > 12

  5. Exportez la base de données en fichier .sql.

TP 3 : Développement d’une Page HTML/CSS Responsive

Durée : 3h | Niveau : Débutant

Objectif : Créer une page web responsive avec HTML5 et CSS3

Tâches :

  1. Créez une page HTML5 avec la structure suivante :

    • En-tête (header) avec logo et navigation
    • Section principale (main) avec contenu
    • Barre latérale (sidebar) avec informations
    • Pied de page (footer)

  2. Appliquez du CSS pour :

    • Styliser la navigation (menu horizontal)
    • Créer une mise en page responsive (mobile, tablette, desktop)
    • Utiliser Flexbox ou CSS Grid

  3. Intégrez Bootstrap pour accélérer le développement.

  4. Testez la responsivité sur différentes résolutions d’écran.

  5. Validez le code HTML avec le validateur W3C.

TP 4 : Interactivité avec JavaScript

Durée : 3h | Niveau : Intermédiaire

Objectif : Ajouter de l’interactivité à une page web avec JavaScript

Tâches :

  1. Créez une page HTML avec un formulaire contenant :

    • Champ nom
    • Champ email
    • Champ mot de passe
    • Bouton soumettre

  2. Écrivez du JavaScript pour :

    • Valider le formulaire avant soumission
    • Afficher des messages d’erreur personnalisés
    • Afficher une confirmation de soumission

  3. Ajoutez des événements interactifs :

    • Au clic sur un bouton, changez la couleur de fond
    • Au survol d’un élément, appliquez un effet visuel
    • Créez un menu déroulant

  4. Testez tous les cas d’utilisation.

TP 5 : Connexion à une Base de Données avec PHP

Durée : 3h | Niveau : Intermédiaire

Objectif : Créer un script PHP pour se connecter et interroger une base de données

Tâches :

  1. Créez un fichier config.php contenant les paramètres de connexion à la base de données.

  2. Écrivez un script PHP qui :

    • Se connecte à la base de données MySQL
    • Récupère tous les étudiants
    • Les affiche dans un tableau HTML

  3. Créez un formulaire pour ajouter un nouvel étudiant :

    • Récupérez les données du formulaire avec $_POST
    • Insérez les données dans la base de données
    • Affichez un message de confirmation

  4. Créez une page pour modifier un étudiant :

    • Récupérez l’ID de l’étudiant avec $_GET
    • Affichez les informations actuelles
    • Permettez la modification et la mise à jour

  5. Créez une page pour supprimer un étudiant avec confirmation.

TP 6 : Création d’une API REST avec PHP

Durée : 3h | Niveau : Avancé

Objectif : Développer une API REST pour gérer les étudiants

Tâches :

  1. Créez un fichier api.php qui gère les requêtes HTTP :

    • GET /api/etudiants : Récupérer tous les étudiants
    • GET /api/etudiants/{id} : Récupérer un étudiant spécifique
    • POST /api/etudiants : Créer un nouvel étudiant
    • PUT /api/etudiants/{id} : Mettre à jour un étudiant
    • DELETE /api/etudiants/{id} : Supprimer un étudiant

  2. Utilisez les méthodes HTTP appropriées ($_SERVER['REQUEST_METHOD']).

  3. Retournez les réponses en JSON.

  4. Testez l’API avec Postman.

  5. Documentez l’API dans un fichier API_DOCUMENTATION.md.

TP 7 : Développement d’une Application Web Complète

Durée : 6h | Niveau : Avancé

Objectif : Créer une application web de gestion d’étudiants complète

Tâches :

  1. Créez la structure du projet :

    app/
├── config/
│   └── database.php
├── controllers/
│   └── EtudiantController.php
├── models/
│   └── Etudiant.php
├── views/
│   ├── layout.php
│   ├── etudiants/
│   │   ├── index.php
│   │   ├── create.php
│   │   ├── edit.php
│   └── dashboard.php
├── public/
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── script.js
│   └── index.php

  2. Implémentez un système d’authentification :

    • Page de connexion
    • Vérification des identifiants
    • Session utilisateur

  3. Créez les fonctionnalités CRUD pour les étudiants.

  4. Ajoutez une page de tableau de bord avec statistiques.

  5. Testez l’application complète.

TP 8 : Utilisation de Git pour le Contrôle de Version

Durée : 2h | Niveau : Intermédiaire

Objectif : Maîtriser Git et GitHub pour gérer le code source

Tâches :

  1. Initialisez un dépôt Git local :

    git init
git config user.name "Votre Nom"
git config user.email "votre.email@example.com"

  2. Créez un fichier .gitignore pour exclure les fichiers inutiles.

  3. Effectuez les opérations Git suivantes :

    • git add : Ajouter des fichiers
    • git commit : Valider les changements
    • git log : Voir l’historique

  4. Créez des branches :

    • git branch feature/authentification
    • git checkout feature/authentification
    • Effectuez des modifications
    • git merge : Fusionner les branches

  5. Créez un compte GitHub et poussez votre code :

    • git remote add origin https://github.com/votre-username/repo.git
    • git push -u origin main

  6. Documentez le processus dans un fichier GIT_WORKFLOW.md.

TP 9 : Test d’API avec Postman

Durée : 2h | Niveau : Intermédiaire

Objectif : Tester une API REST avec Postman

Tâches :

  1. Téléchargez et installez Postman.

  2. Créez une collection pour l’API d’étudiants.

  3. Testez les endpoints suivants :

    • GET /api/etudiants : Récupérer tous les étudiants
    • GET /api/etudiants/1 : Récupérer un étudiant
    • POST /api/etudiants : Créer un étudiant
    • PUT /api/etudiants/1 : Mettre à jour un étudiant
    • DELETE /api/etudiants/1 : Supprimer un étudiant

  4. Pour chaque requête :

    • Vérifiez le code de statut HTTP
    • Vérifiez le contenu de la réponse JSON
    • Testez les cas d’erreur (400, 404, 500)

  5. Exportez la collection Postman en fichier .json.

  6. Créez un rapport de test documentant tous les résultats.

TP 10 : Déploiement d’une Application Web

Durée : 3h | Niveau : Avancé

Objectif : Déployer une application web sur un serveur

Tâches :

  1. Choisissez un hébergeur (Heroku, Vercel, ou un serveur personnel).

  2. Préparez l’application pour le déploiement :

    • Créez un fichier .env pour les variables d’environnement
    • Configurez la base de données de production
    • Optimisez le code

  3. Déployez l’application :

    • Poussez le code sur GitHub
    • Connectez le dépôt à la plateforme de déploiement
    • Configurez les variables d’environnement
    • Lancez le déploiement

  4. Testez l’application en production :

    • Vérifiez que toutes les fonctionnalités fonctionnent
    • Testez les performances
    • Vérifiez les logs

  5. Documentez le processus de déploiement dans un fichier DEPLOYMENT.md.

  6. Partagez l’URL de l’application déployée.

📋 Critères d’Évaluation

Pour les TD :

  • ✅ Compréhension des concepts
  • ✅ Clarté des explications
  • ✅ Exemples pertinents
  • ✅ Réponses complètes

Pour les TP :

  • ✅ Fonctionnalité complète
  • ✅ Code propre et bien structuré
  • ✅ Documentation adéquate
  • ✅ Tests effectués
  • ✅ Respect des délais

🎯 Ressources Supplémentaires

Bon courage pour vos travaux ! 🚀

Leçon précédente

**Programmation Évènementielle et IHM II**

Prochaine leçon

📚 10 TD + 10 TP - Programmation Événementielle et IHM II

Prêt à passer à la suite ?

Vous avez terminé cette leçon sur 10 TD + 10 TP - Programmation Web II. Continuez votre apprentissage avec la prochaine leçon ou explorez d'autres formations.

Continuer avec 📚 10 TD + 10 TP - Programmation Événementielle et IHM II Explorer toutes les formations