Exercice : Création de Vues avec Menus de Navigation dans CodeIgniter

Objectif : Développer plusieurs vues dans une application CodeIgniter avec un menu de navigation permettant de passer facilement d'une page à l'autre.

Partie 1 : Préparation de l'Environnement

  1. Configurer un Projet CodeIgniter
    • Si ce n'est pas déjà fait, configurez un nouveau projet CodeIgniter.
    • Assurez-vous que l'environnement de développement est prêt (serveur local, base de données, etc.).

Partie 2 : Création des Vues

  1. Créer des Vues de Base

    • Créez au moins trois vues différentes dans le dossier app/Views. Par exemple, home.php, about.php, et contact.php.
    • Ajoutez un contenu de base à chaque vue, comme un titre et un paragraphe descriptif.

  2. Créer un Template de Header

    • Créez un fichier header.php dans app/Views/templates.
    • Ajoutez-y une structure de base HTML (<!DOCTYPE html>, <head>, <body>, etc.).
    • Intégrez un menu de navigation (utilisez <nav> et <ul> pour les liens).

  3. Créer un Template de Footer

    • Créez un fichier footer.php dans app/Views/templates.
    • Ajoutez la fermeture des balises HTML (</body> et </html>).

Partie 3 : Intégration des Templates dans les Vues

  1. Utiliser le Header et le Footer dans les Vues
    • Dans chaque vue (home.php, about.php, contact.php), incluez le header.php et le footer.php en utilisant la fonction include de PHP.
    • Par exemple : <?= include('templates/header.php'); ?> et <?= include('templates/footer.php'); ?>.

Partie 4 : Configuration des Routes

  1. Définir les Routes
    • Dans app/Config/Routes.php, définissez des routes pour chaque page (home, about, contact).
    • Associez chaque route à une méthode correspondante dans un contrôleur (par exemple, PagesController).

Partie 5 : Création d'un Contrôleur

  1. Créer un Contrôleur pour les Pages
    • Créez un fichier PagesController.php dans app/Controllers.
    • Ajoutez des méthodes pour chaque page (home, about, contact) qui retournent les vues correspondantes.

Partie 6 : Test et Validation

  1. Tester la Navigation
    • Lancez votre serveur de développement et accédez à votre application CodeIgniter.
    • Testez la navigation entre les différentes pages en utilisant le menu.
    • Vérifiez que le contenu de chaque page s'affiche correctement.

Bonus : Personnalisation et Style

  1. Ajouter du Style CSS
    • Créez un fichier CSS pour styliser votre menu de navigation et vos vues.
    • Incluez ce fichier CSS dans votre header.php.

Cet exercice permet aux étudiants de se familiariser avec la création de vues et de menus de navigation dans CodeIgniter, de comprendre comment structurer une application web et de pratiquer l'intégration front-end avec des templates et des styles CSS.

Modifié le: mercredi 31 janvier 2024, 09:31