Comment créer une page avec CodeIgniter 4 : Tutoriel complet

Découvrez comment créer une page web avec le framework PHP CodeIgniter 4. Dans ce tutoriel complet, nous allons voir pas à pas comment mettre en place une page avec un contrôleur, une vue et une route.

Ce tutoriel s’adresse aux débutants pour vous permettre de comprendre les bases essentielles pour structurer vos pages avec CodeIgniter 4.

Prérequis

Avant de commencer, assurez-vous que vous avez installé CodeIgniter 4 sur votre serveur ou environnement local. Si ce n’est pas encore fait, vous pouvez suivre le chapitre sur Comment installer CodeIgniter 4.

Consultez également le chapitre sur La structure et la configuration de CodeIgniter 4.

Étape 1 : Comprendre la structure d’un projet CodeIgniter 4
Étape 2 : Créer un contrôleur
Étape 3 : Créer une Vue
Étape 4 : Définir une Route
Étape 5 : Tester votre page
Créer une deuxième page avec CodeIgniter 4
Ajouter une méthode pour la deuxième page dans le contrôleur
Créer la nouvelle vue about_view.php
Ajouter une nouvelle route pour cette page
Améliorer la structure avec une mise en page commune

Étape 1 : Comprendre la structure d’un projet CodeIgniter 4

Dans CodeIgniter 4, chaque page est généralement construite avec :

Un contrôleur : il gère la logique de la page.
Une vue : c’est la partie qui affiche le contenu HTML.
Une route : elle relie une URL à un contrôleur.

Regardons maintenant comment mettre tout cela en place ! En savoir plus sur La structure et la configuration de CodeIgniter 4.

Étape 2 : Créer un contrôleur

Un contrôleur est un fichier PHP qui va traiter les requêtes et charger les bonnes données avant de les envoyer à la vue.

Dans CodeIgniter 4, les contrôleurs sont placés dans le dossier :

/app/Controllers/

👉 Créons un contrôleur nommé PageController.php

Dans votre dossier app/Controllers, créez un fichier nommé PageController.php.
Ouvrez ce fichier et ajoutez le code suivant :

<?php 

namespace App\Controllers;

use CodeIgniter\Controller;

class PageController extends Controller
{
    public function index()
    {
        return view('page_view');
    }
}

Explication du code :

namespace App\Controllers; → Définit le namespace du contrôleur.
use CodeIgniter\Controller; → Importe la classe de base des contrôleurs.
class PageController extends Controller → Déclare le contrôleur.
public function index() → Méthode qui retourne la vue page_view.php.

Jusqu’ici, notre contrôleur est prêt, mais il manque encore la vue et la route. Passons à l’étape suivante !

Étape 3 : Créer une Vue

Les vues sont les fichiers qui contiennent le HTML de votre page. Elles se trouvent dans le dossier :

/app/Views/

👉 Créons une vue nommée page_view.php

Dans le dossier app/Views, créez un fichier appelé page_view.php.
Ajoutez-y ce code HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma première page avec CodeIgniter 4</title>
</head>
<body>
    <h1>Bienvenue sur ma page CodeIgniter 4 !</h1>
    <p>Ceci est une page créée avec un contrôleur, une vue et une route.</p>
</body>
</html>

Explication :

C’est une page HTML simple, affichant un titre et un message.
Ce fichier sera appelé par notre contrôleur pour être affiché dans le navigateur.

Passons maintenant à la dernière étape : la route !

Étape 4 : Définir une Route

Les routes permettent d’associer une URL à un contrôleur spécifique. Elles se trouvent dans le fichier :

/app/Config/Routes.php

👉 Ajoutons une route pour afficher notre page

Ouvrez le fichier app/Config/Routes.php.
Recherchez la section où les routes sont définies.
Ajoutez cette ligne :

$routes->get('page', 'PageController::index');

Explication :

$routes->get('page', 'PageController::index'); → Associe l’URL /page au contrôleur PageController et à sa méthode index().
Cela signifie que si un utilisateur visite http://localhost:8080/page, il verra notre page !

Étape 5 : Tester votre page

Tout est prêt ! Maintenant, testons si notre page fonctionne.

🔹 Lancer le serveur local :

Si votre serveur n’est pas encore démarré, ouvrez un terminal à la racine de votre projet et tapez :

php spark serve

Cela démarre le serveur intégré de CodeIgniter 4.

🔹 Accéder à la page :

Dans votre navigateur, allez à cette adresse :

http://localhost:8080/page

🎉 Vous devriez voir « Bienvenue sur ma page CodeIgniter 4 ! ».

Améliorations possibles

Maintenant que vous avez une page fonctionnelle, voici quelques améliorations possibles :

✅ Ajouter du CSS

Ajoutez un fichier CSS dans /public/css/style.css et incluez-le dans votre vue :

Formation web et informatique - Alban Guillier - Formateur

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 ?

<link rel="stylesheet" href="<?= base_url('css/style.css') ?>">

✅ Passer des données à la vue

Dans PageController.php, modifiez index() pour envoyer une variable :

public function index()
{
    $data['title'] = "Ma première page CI4";
    return view('page_view', $data);
}

Et affichez-la dans la vue :

<title><?= esc($title) ?></title>

Pour résumer :

✅ Un contrôleur pour gérer la logique
✅ Une vue pour afficher le contenu
✅ Une route pour relier l’URL à votre page

Avec ces bases, vous pouvez commencer à développer des applications web complètes avec CodeIgniter 4 !

Créer une deuxième page avec CodeIgniter 4

Maintenant que vous avez créé une première page avec CodeIgniter 4, voyons comment ajouter une deuxième page.

Nous allons suivre la même logique :

Créer un contrôleur dédié ou utiliser un contrôleur existant
Créer une vue spécifique pour cette page
Définir une route pour accéder à cette page
Tester dans le navigateur

Décider de la structure

Deux options s’offrent à nous :

Créer un nouveau contrôleur dédié à cette nouvelle page.
Utiliser le contrôleur existant (ex: PageController.php) et ajouter une nouvelle méthode.

👉 Nous allons choisir la deuxième option pour garder une structure simple.

Ajouter une méthode pour la deuxième page dans le contrôleur

Nous allons modifier le contrôleur existant pour gérer une deuxième page.

Ouvrez app/Controllers/PageController.php
Ajoutez une nouvelle méthode about() :

<?php 

namespace App\Controllers;

use CodeIgniter\Controller;

class PageController extends Controller
{
    public function index()
    {
        return view('page_view');
    }

    public function about()
    {
        return view('about_view');
    }
}

Explication du code :

Nous avons ajouté une méthode about() qui retournera une nouvelle vue appelée about_view.php.
Le fichier about_view.php n’existe pas encore, nous allons le créer à l’étape suivante.

Créer la nouvelle vue `about_view.php`

Les vues sont stockées dans app/Views/, nous allons y ajouter notre nouvelle vue.

Dans app/Views/, créez un fichier about_view.php
Ajoutez ce code HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>À propos de nous</title>
</head>
<body>
    <h1>À propos de notre site</h1>
    <p>Bienvenue sur notre deuxième page !</p>
</body>
</html>

Explication du code :

C’est une simple page HTML avec un titre et un texte d’introduction.
Cette page sera affichée lorsque l’utilisateur visitera l’URL associée.

Ajouter une nouvelle route pour cette page

Les routes sont définies dans app/Config/Routes.php.

Ouvrez app/Config/Routes.php
Ajoutez cette ligne pour créer une route vers la deuxième page :

$routes->get('about', 'PageController::about');

Explication :

$routes->get('about', 'PageController::about');
- Lorsque quelqu’un tape http://localhost:8080/about, CodeIgniter 4 appellera la méthode about() du PageController.
- Cette méthode chargera la vue about_view.php.

Tester la deuxième page

Maintenant que tout est en place, testons notre deuxième page !

Accédez à votre deuxième page :

Dans votre navigateur, entrez l’URL suivante :

http://localhost:8080/about

🎉 Votre deuxième page s’affiche !

Ajouter un lien entre les pages

Pour naviguer facilement entre les pages, ajoutons des liens.

Ouvrez app/Views/page_view.php
Ajoutez un lien vers la page « À propos » :

<p><a href="<?= base_url('about'); ?>">À propos</a></p>

Ouvrez app/Views/about_view.php
Ajoutez un lien de retour vers la page d’accueil :

<p><a href="<?= base_url(); ?>">Retour à l’accueil</a></p>

Explication :

base_url('about') → Génère l’URL correcte vers la page « about ».
base_url() → Génère l’URL de la page d’accueil (http://localhost:8080).

Améliorer la structure avec une mise en page commune

Pour éviter de répéter le même code HTML dans chaque fichier, utilisons un fichier de mise en page principal. Nous allons séparer le Header et le Footer du contenu d’une page.

Créez un fichier layout.php dans app/Views/
Ajoutez-y la structure commune :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= esc($title) ?></title>
</head>
<body>
    <header>
        <nav>
            <a href="<?= base_url(); ?>">Accueil</a> | 
            <a href="<?= base_url('about'); ?>">À propos</a>
        </nav>
    </header>

    <main>
        <?= $content ?>
    </main>
</body>
</html>

Explication :

On définit une variable $title pour le titre de chaque page.
On affiche $content, qui sera remplacé par le contenu de chaque page.

🔹 Modifier `page_view.php` pour utiliser ce layout :

<?php 
    $title = "Accueil";
    ob_start(); 
?>
    <h1>Bienvenue sur ma page CodeIgniter 4 !</h1>
    <p>Ceci est une page créée avec un contrôleur, une vue et une route.</p>
<?php 
    $content = ob_get_clean();
    include 'layout.php';
?>

🔹 Modifier `about_view.php` pour utiliser ce layout :

<?php 
    $title = "À propos de nous";
    ob_start(); 
?>
    <h1>À propos de notre site</h1>
    <p>Bienvenue sur notre deuxième page !</p>
<?php 
    $content = ob_get_clean();
    include 'layout.php';
?>

Avantages :

Moins de répétition de code ✅
Facilité de mise à jour du design ✅
Navigation centralisée ✅

Conclusion

Vous venez d’apprendre comment ajouter deux pages dans CodeIgniter 4 ! 🚀

✅ Ajout d’une méthode dans le contrôleur
✅ Création d’une nouvelle vue
✅ Ajout d’une route
✅ Lien entre les pages
✅ Utilisation d’un layout commun

Avec ces bases, vous pouvez maintenant ajouter autant de pages que vous voulez dans votre application CodeIgniter 4 !

Live on Twitch

🔥 Vendredi 25 Avril 2025 >19h00
HTML & SémantiqueStructure d'une page HTML

Alban

Fondateur de l’agence Créa-troyes.
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr

Comment créer une page avec CodeIgniter 4 : Tutoriel complet

Prérequis

Étape 1 : Comprendre la structure d’un projet CodeIgniter 4

Étape 2 : Créer un contrôleur

Explication du code :

Étape 3 : Créer une Vue

Explication :

Étape 4 : Définir une Route

Explication :

Étape 5 : Tester votre page

🔹 Lancer le serveur local :

🔹 Accéder à la page :

Améliorations possibles

✅ Ajouter du CSS

Des formations informatique pour tous !

✅ Passer des données à la vue

Pour résumer :

Créer une deuxième page avec CodeIgniter 4

Décider de la structure

Ajouter une méthode pour la deuxième page dans le contrôleur

Explication du code :

Créer la nouvelle vue about_view.php

Explication du code :

Ajouter une nouvelle route pour cette page

Explication :

Tester la deuxième page

Accédez à votre deuxième page :

Ajouter un lien entre les pages

Explication :

Améliorer la structure avec une mise en page commune

Explication :

🔹 Modifier page_view.php pour utiliser ce layout :

🔹 Modifier about_view.php pour utiliser ce layout :

Avantages :

Conclusion

Articles relatifs

Créer la nouvelle vue `about_view.php`

🔹 Modifier `page_view.php` pour utiliser ce layout :

🔹 Modifier `about_view.php` pour utiliser ce layout :