La pagination est un élément essentiel de tout site web affichant une grande quantité de données. Elle permet d’afficher les informations page par page, plutôt que de tout charger d’un coup, ce qui améliore les performances et l’expérience utilisateur.
Dans ce tutoriel, nous allons apprendre à coder une pagination avec CodeIgniter 4, de manière simple, claire et étape par étape.
Ce tutoriel s’adresse aux développeurs débutants et intermédiaires qui souhaitent mettre en place une pagination efficace dans leur application web basée sur CodeIgniter 4.
- Étape 1 : Créer le modèle
- Étape 2 : Créer le contrôleur
- Étape 3 : Créer la vue
- Étape 4 : Ajouter la configuration du pager
- Étape 5 : Gérer l’URL de pagination
- Étape 6 : Afficher le nombre total de pages et d'éléments
- Bonus : Ajouter une recherche avec pagination
- Quelques conseils SEO pour votre pagination
- Comment traduire la pagination en français
Pourquoi utiliser la pagination ?
Avant de passer au code, comprenons pourquoi la pagination est si importante :
- Performance : Charger 1000 enregistrements d’un coup ralentit le site. Une pagination charge seulement les données nécessaires.
- Lisibilité : Pour l’utilisateur, il est plus facile de consulter 10 ou 20 éléments à la fois que des centaines.
- SEO friendly : Une bonne pagination permet aux moteurs de recherche d’indexer les pages plus facilement.
Prérequis
Avant de commencer, assurez-vous que :
- Vous avez installé CodeIgniter 4.
- Vous avez une base de données configurée.
- Vous avez un modèle (Model) connecté à une table contenant plusieurs lignes.
Étape 1 : Créer le modèle
Commençons par créer un modèle qui interagit avec la base de données. Dans cet exemple, imaginons une table articles.
<?php namespace App\Models;
use CodeIgniter\Model;
class ArticleModel extends Model
{
protected $table = 'articles';
protected $primaryKey = 'id';
protected $allowedFields = ['title', 'content'];
}Ce modèle nous permettra de récupérer les articles pour notre pagination.
Étape 2 : Créer le contrôleur
Créons un contrôleur Article.php dans app/Controllers :
Si vous ne savez pas ce qu’est un controller ou comment en créer un, consulter notre tutoriel : Controller, route et vue.
<?php namespace App\Controllers;
use App\Models\ArticleModel;
class Article extends BaseController
{
public function index()
{
$model = new ArticleModel();
// Nombre d'éléments par page
$perPage = 10;
// Obtenir les articles paginés
$data['articles'] = $model->paginate($perPage);
// Liens de pagination
$data['pager'] = $model->pager;
return view('articles/index', $data);
}
}La méthode paginate() de CodeIgniter 4 s’occupe automatiquement de la pagination. Il suffit de lui indiquer combien d’éléments afficher par page.
Rafraîchissez-vous la mémoire avec ce tutoriel : Méthode et propriété en POO avec PHP.
Étape 3 : Créer la vue
Créons une vue app/Views/articles/index.php pour afficher les articles et la pagination :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Pagination avec CodeIgniter 4</title>
</head>
<body>
<h1>Liste des articles</h1>
<?php foreach ($articles as $article): ?>
<div>
<h3><?= esc($article['title']) ?></h3>
<p><?= esc($article['content']) ?></p>
</div>
<?php endforeach; ?>
<!-- Affichage des liens de pagination -->
<div>
<?= $pager->links() ?>
</div>
</body>
</html>La méthode $pager->links() génère automatiquement les liens HTML de pagination.
Étape 4 : Ajouter la configuration du pager
Par défaut, CodeIgniter 4 utilise un fichier de configuration pour gérer le style de la pagination. Ce fichier se trouve dans app/Config/Pager.php.
Vous pouvez y définir un template personnalisé si vous le souhaitez :
public $templates = [
'default_full' => 'CodeIgniter\Pager\Views\default_full',
'custom_pagination' => 'App\Views\Pagers\custom_pagination',
];Et créer votre propre template dans app/Views/Pagers/custom_pagination.php pour personnaliser l’apparence de la pagination.
Étape 5 : Gérer l’URL de pagination
CodeIgniter 4 détecte automatiquement le segment d’URL contenant le numéro de page. Par exemple :
http://localhost:8080/article?page=3Vous n’avez donc pas besoin de gérer manuellement les paramètres. Cependant, si vous souhaitez personnaliser cela, vous pouvez utiliser :
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 ?$model->paginate($perPage, 'group_name');
$pager->links('group_name');Cela vous permet de gérer plusieurs paginations sur une même page avec des groupes distincts.
Étape 6 : Afficher le nombre total de pages et d’éléments
Pour offrir une meilleure expérience utilisateur, il peut être intéressant d’afficher le nombre total d’articles ou le numéro de page en cours :
<p>Page <?= $pager->getCurrentPage() ?> sur <?= $pager->getPageCount() ?></p>
<p>Total : <?= $pager->getTotal() ?> articles</p>Ces méthodes sont intégrées au système de pagination de CodeIgniter.
Bonus : Ajouter une recherche avec pagination
Et si vous souhaitez ajouter une recherche tout en gardant la pagination fonctionnelle ? Voici comment faire :
Dans le contrôleur :
$search = $this->request->getGet('q');
if ($search) {
$model->like('title', $search);
}
$data['articles'] = $model->paginate($perPage);
$data['pager'] = $model->pager;Dans la vue :
<form method="get" action="">
<input type="text" name="q" value="<?= esc($_GET['q'] ?? '') ?>" placeholder="Rechercher...">
<button type="submit">Chercher</button>
</form>La pagination fonctionnera parfaitement même avec des filtres de recherche.
Quelques conseils SEO pour votre pagination
La pagination joue également un rôle important dans le référencement naturel. Voici quelques recommandations pour une pagination SEO friendly :
- Utiliser des URLs propres : préférez
?page=2à?id=2&show=10. - Balises rel=’prev’ et rel=’next’ : pour aider Google à comprendre les relations entre pages.
- Contenu unique par page : évitez de répéter le même contenu sur plusieurs pages.
- Meta title et description uniques : personnalisez-les si possible par page.
Comment traduire la pagination en français
Pour traduire la pagination en français dans CodeIgniter 4, il faut modifier les fichiers de langue utilisés par le système de pagination.
Voici comment faire pas à pas :
Localiser le fichier de langue
CodeIgniter 4 stocke les textes de la pagination dans le fichier suivant :
/vendor/codeigniter4/framework/system/Language/en/Pager.phpMais il ne faut jamais modifier les fichiers dans vendor/ directement. On va surcharger ce fichier dans ton répertoire app.
Créer le fichier de langue en français
Crée le dossier suivant s’il n’existe pas :
/app/Language/fr/Puis crée un fichier Pager.php à l’intérieur, avec ce contenu :
<?php
return [
'pageNavigation' => 'Navigation par page',
'first' => 'Première',
'previous' => 'Précédente',
'next' => 'Suivante',
'last' => 'Dernière',
'older' => 'Plus anciennes',
'newer' => 'Plus récentes',
];Définir le français comme langue par défaut
Dans ton fichier de configuration /app/Config/App.php, modifie cette ligne :
public string $defaultLocale = 'fr';Cela indiquera à CodeIgniter de charger les fichiers de langue français par défaut, y compris pour la pagination.
Conclusion
La pagination est un élément incontournable dans le développement web, et CodeIgniter 4 offre une solution simple, puissante et flexible pour l’implémenter. En suivant les étapes décrites dans cet article, vous êtes maintenant capable de coder une pagination avec CodeIgniter 4, même si vous débutez dans ce framework.
La pagination permet non seulement de mieux organiser vos données, mais elle améliore aussi la rapidité de chargement de vos pages et l’expérience utilisateur. Grâce à CodeIgniter 4, vous pouvez mettre en place une pagination propre en seulement quelques lignes de code.
- 🔥 Vendredi 25 Avril 2025 >19h00
HTML & SémantiqueStructure d'une page HTML
