I.
HTML et CSS : Création d'un Blog de Voyage
Objectif : Créer une page web pour un blog de voyage en utilisant
HTML et CSS.
Partie 1 : Structure HTML
1. Entête et Titre :
- Créez un fichier HTML nommé `index.html`.
- Ajoutez un en-tête avec le titre "Blog de Voyage".
2. Sections :
- Créez une section principale pour les articles de blog.
- Chaque article doit avoir un titre, une date de publication, et du
contenu.
3. Navigation :
- Ajoutez une barre de navigation avec des liens vers différentes
destinations ou catégories de voyages.
Partie 2 : Mise en page avec CSS
1. Styles de base :
- Créez un fichier CSS nommé `styles.css`.
- Appliquez un style global à la page avec une couleur de fond, une
police de caractères et une couleur de texte.
2. Styles d'en-tête :
1
- Personnalisez l'apparence de l'en-tête avec une image de fond,
une couleur de texte, et une ombre légère.
3. Styles de navigation :
- Stylisez la barre de navigation pour la rendre horizontale avec des
couleurs et une mise en forme attrayantes.
4. Styles d'article :
- Ajoutez des styles pour les articles, y compris une bordure, une
ombre, et une mise en page agréable.
5. Styles interactifs :
- Ajoutez un effet de survol aux liens de navigation pour les mettre
en évidence.
- Ajoutez une animation subtile lorsqu'un utilisateur clique sur un
article.
Partie 3 : Éléments interactifs
1. Galerie d'images :
- Ajoutez une galerie d'images avec des photos de différents
endroits visités.
- Lorsqu'on clique sur une image, elle doit s'agrandir ou afficher une
légende.
2. Carte interactive :
- Intégrez une carte interactive avec des marqueurs pour montrer
les lieux visités.
- Ajoutez des infobulles pour fournir des informations
supplémentaires lorsqu'on clique sur les marqueurs.
2
Partie 4 : Responsivité
Media Queries :
- Utilisez des media queries pour rendre votre page réactive.
- Assurez-vous que la mise en page est optimale sur des écrans de
différentes tailles, en ajustant les tailles de police, les marges, etc.
II. PHP : Projet de Gestionnaire de Tâches en PHP
Étape 1: Configuration
1. Configurez un serveur web local et un système de gestion de base
de données (MySQL, SQLite, etc.).
2. Créez une base de données pour votre gestionnaire de tâches.
Étape 2: Création de la base de données
1. Créez une table `taches` avec les colonnes suivantes : `id` (clé
primaire), `titre`, `description`, `date_creation`, `date_echeance`,
`statut`.
2. Assurez-vous que `statut` peut prendre les valeurs "À faire", "En
cours" ou "Terminé".
Étape 3: Affichage des tâches
1. Créez une page d'accueil qui affiche toutes les tâches de la base de
données.
2. Affichez le titre, la description, la date de création, la date
d'échéance et le statut de chaque tâche.
Étape 4: Ajout de tâches
3
1. Créez un formulaire permettant d'ajouter de nouvelles tâches.
2. Utilisez PHP pour traiter le formulaire et ajouter les tâches à la base
de données.
Étape 5: Mise à jour et suppression de tâches
1. Ajoutez des fonctionnalités pour mettre à jour et supprimer des
tâches.
2. Sur la page d'accueil, créez des boutons ou des liens permettant de
marquer une tâche comme "En cours" ou "Terminé" et de supprimer
une tâche.
Étape 6: Filtrage des tâches
1. Ajoutez des options de filtrage pour voir uniquement les tâches "À
faire", "En cours" ou "Terminé".
2. Implémentez une fonctionnalité pour afficher toutes les tâches
expirées.
III. PHP et JavaScript : Projet de Système de Réservation de
Salles de Réunion
Étape 1: Création de la base de données
1. Créez une table `salles` avec les colonnes suivantes : `id` (clé
primaire), `nom`, `description`.
2. Créez une table `reservations` avec les colonnes suivantes : `id`
(clé primaire), `salle_id` (clé étrangère), `utilisateur`, `date_debut`,
`date_fin`.
Étape 2: Affichage des salles et réservations
1. Créez une page d'accueil qui affiche toutes les salles disponibles.
4
2. Affichez le nom, la description et l'état de disponibilité de chaque
salle.
3. Affichez également les réservations prévues pour chaque salle.
Étape 3: Réservation d'une salle
1. Sur la page d'accueil, ajoutez un formulaire permettant de réserver
une salle.
2. Utilisez PHP pour traiter le formulaire et enregistrer la réservation
dans la base de données.
3. Assurez-vous de mettre à jour l'état de disponibilité de la salle
après une réservation.
Étape 4: JavaScript - Actualisation en temps réel
1. Utilisez JavaScript pour actualiser en temps réel l'état de
disponibilité des salles sans recharger la page.
2. Ajoutez une fonctionnalité pour actualiser dynamiquement la liste
des réservations en fonction des modifications.
3. Ajoutez une fonctionnalité pour annuler une réservation existante.
4. Mettez à jour la base de données et actualisez l'affichage en temps
réel à l'aide de JavaScript.
