Dans le développement d’une application web avec CodeIgniter 4, la gestion et la structuration du layout CodeIgniter est essentielle pour organiser et réutiliser des éléments communs comme l’en-tête (header) et le pied de page (footer).
Une bonne segmentation du layout améliore la maintenabilité du code et optimise les performances.
Dans ce tutoriel, nous allons voir comment structurer un layout CodeIgniter en séparant le header, le footer et le contenu dynamique, tout en respectant les bonnes pratiques de développement.
Comprendre le concept de Layout CodeIgniter
Dans CodeIgniter 4, un layout est un modèle de base qui inclut des parties statiques et dynamiques d’une page web. Il est composé généralement de trois éléments principaux :
- Le header : Contient le logo, le menu de navigation et les métadonnées.
- Le contenu : Partie dynamique qui change selon les pages.
- Le footer : Inclut les mentions légales, les liens sociaux et les scripts JavaScript.
L’objectif est de ne pas répéter le header et le footer dans chaque vue, mais de les charger automatiquement via un layout principal.
Découvrez ou maîtriser la structure d’un projet CodeIgniter 4.
Mise en place d’un Layout dans CodeIgniter 4
Créer une structure de fichiers
Dans votre projet CodeIgniter 4, organisez les fichiers de vue comme suit :
/app
/Views
/layouts
header.php
footer.php
/pages
home.php
about.php- header.php : Contient le haut de la page.
- footer.php : Contient le bas de la page.
- home.php et about.php : Pages dynamiques.
Créer le Header et le Footer
Fichier : /app/Views/layouts/header.php
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= isset($title) ? $title : 'Mon Site CodeIgniter' ?></title>
<link rel="stylesheet" href="<?= base_url('assets/css/style.css') ?>">
</head>
<body>
<header>
<h1>Mon Site CodeIgniter</h1>
<nav>
<ul>
<li><a href="<?= base_url() ?>">Accueil</a></li>
<li><a href="<?= base_url('about') ?>">À propos</a></li>
</ul>
</nav>
</header>
<main>Fichier : /app/Views/layouts/footer.php
</main>
<footer>
<p>© <?= date('Y') ?> Mon Site CodeIgniter</p>
</footer>
</body>
</html>Le header contient le menu de navigation, tandis que le footer ferme les balises <main> et <body>.
Charger dynamiquement le Layout CodeIgniter
Dans chaque page dynamique, nous allons inclure le header et le footer.
Fichier : /app/Views/pages/home.php
<?= $this->include('layouts/header') ?>
<h2>Bienvenue sur notre site</h2>
<p>Ceci est la page d'accueil de notre site basé sur un layout CodeIgniter.</p>
<?= $this->include('layouts/footer') ?>La fonction include() permet de réutiliser le header et le footer sans répéter du code.
Charger dynamiquement un Layout dans un Contrôleur
Pour afficher ces pages, nous allons créer un contrôleur qui gère la vue.
Créer un Contrôleur Pages.php
Dans CodeIgniter 4, les contrôleurs se trouvent dans /app/Controllers/.
Créez un fichier /app/Controllers/Pages.php :
<?php
namespace App\Controllers;
use CodeIgniter\Controller;
class Pages extends Controller
{
public function home()
{
return view('pages/home', ['title' => 'Accueil - Layout CodeIgniter']);
}
public function about()
{
return view('pages/about', ['title' => 'À Propos - Layout CodeIgniter']);
}}Ici, nous passons le titre à chaque page via un tableau associatif.
Des formations informatique pour tous !
Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…
Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.
Découvrez mes formations Qui suis-je ?Configurer les Routes
Modifiez le fichier /app/Config/Routes.php pour définir les URL :
$routes->get('/', 'Pages::home');
$routes->get('about', 'Pages::about');Désormais, les URLs / et /about chargeront respectivement home.php et about.php avec le layout CodeIgniter.
Utiliser un Layout Global
Si toutes les pages utilisent le même layout CodeIgniter, nous pouvons le centraliser.
Créer un fichier /app/Views/layouts/main.php
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= $title ?? 'Mon Site' ?></title>
<link rel="stylesheet" href="<?= base_url('assets/css/style.css') ?>">
</head>
<body>
<?= $this->include('layouts/header') ?>
<main>
<?= $this->renderSection('content') ?>
</main>
<?= $this->include('layouts/footer') ?>
</body>
</html>Puis, dans les vues dynamiques, nous étendons ce layout :
Fichier : /app/Views/pages/home.php
<?= $this->extend('layouts/main') ?>
<?= $this->section('content') ?>
<h2>Bienvenue</h2>
<p>Ce site utilise un layout CodeIgniter optimisé.</p>
<?= $this->endSection() ?>Cette méthode permet d’inclure uniquement le contenu dynamique, tout en utilisant un layout global.
Charger des Styles CSS et JS
Si chaque page a des ressources spécifiques, passez-les via $data :
Dans Pages.php
public function home()
{
return view('pages/home', [
'title' => 'Accueil - Layout CodeIgniter',
'css' => 'home.css'
]);
}Dans main.php
<link rel="stylesheet" href="<?= isset($css) ? base_url('assets/css/' . $css) : '' ?>">Ainsi, chaque page peut charger son CSS personnalisé.
Structurer un layout CodeIgniter en segmentant le header et le footer permet de simplifier la gestion des vues et d’améliorer la maintenabilité. Grâce à la méthode extend() et include(), nous pouvons organiser les fichiers efficacement.
En utilisant ces bonnes pratiques, vous rendrez votre projet plus modulaire, réutilisable et facile à maintenir.
Allez plus loin avec CodeIgniter :
- Connexion à une base de données avec CodeIgniter 4
- Formulaire de connexion et accès sécurisé avec CodeIgniter 4
- 🔥 Vendredi 25 Avril 2025 >19h00
HTML & SémantiqueStructure d'une page HTML
