Dans cette vidéo tutorielle, le développeur explique pas à pas comment mettre en place un système de pagination classique en PHP pour afficher les enregistrements d’une table (exemple : Articles) de façon découpée. Il montre d’abord le problème d’une page qui charge des centaines d’enregistrements, puis il décrit la logique de pagination : définir le nombre d’éléments par page, calculer le nombre total de pages avec la fonction ceil, générer des liens de navigation via un paramètre GET, calculer l’offset SQL (début = (page‑1) × éléments‑par‑page) et appliquer LIMIT dans la requête. Il ajoute ensuite le surlignage de la page courante, la sélection par défaut de la première page, et la validation des numéros de page hors‑intervalle avec redirection vers la page 1. Le tout est illustré avec du code PHP et un affichage dans le navigateur, démontrant le fonctionnement complet du système de pagination.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle astuce de développement web. Aujourd'hui, nous allons voir comment créer un système de pagination en PHP. Imaginez que vous voulez lister les entrées d'une table dans une page web. Si la table contient des centaines ou des milliers d'enregistrements, il en résultera une page web pleine à craquer. Avec un affichage pareil, il sera difficile à l'utilisateur de trouver le contenu qu'il cherche au milieu de toutes ces données-là. Sans parler du temps que mettra la page à se charger vu son volume. La solution face à ce genre de situation est de diviser le contenu de telle sorte qu'à n'en charger qu'une petite partie à la fois. Si le modèle qui consiste à faire défiler la page afin de charger le contenu petit à petit via des technologies comme AJAX est l'un des plus utilisés en ce moment, certains développeurs et utilisateurs ne l'apprécient pas trop, car si les données recherchées se trouvent trop bas, alors il faut continuer à défiler la page jusqu'à ce qu'elles soient atteintes. C'est pour cette raison que le système de pagination classique reste l'une des solutions les plus ergonomiques. Imaginez que le contenu que l'on veut lister provient d'une table qui s'appelle Articles. J'ai pris le soin de mettre quelques données dans celle-ci. Il s'agit tout simplement de lettres de l'alphabet mais qui ont été répétées 4 fois. Le résultat est le suivant. J'ai affiché le nombre d'enregistrements dans la table et puis j'ai listé toutes ces entrées-là dans la même page. Au total j'en ai 26. Le code derrière cette page est le suivant. La première partie du code consiste à récupérer le nombre d'enregistrements dans la table, Et la deuxième partie, c'est elle qui va se charger de récupérer le contenu afin de le lister plus bas avec une boucle. Bien sûr, dans cet exemple je n'ai que 26 enregistrements. Alors dans ce genre de situation, le rôle de la pagination ne sera pas trop perceptible. Mais c'est juste un cas d'exemple. Maintenant nous allons intégrer le code qui va gérer la pagination. La première chose à faire, c'est de déclarer le nombre d'éléments que je veux afficher par page. Parce que là j'ai affiché 26 éléments sur 2 tas. Mais maintenant imaginez que je veux afficher que 5 éléments par page. Donc je vais créer une variable que j'ai appelée nombre d'éléments par page que je vais fixer à 5. Le système de pagination consiste à créer des liens. Quand je clique sur l'un d'eux, ça va me ramener vers la page qui contient les 5 enregistrements que je souhaite. Alors il faut prévoir combien de liens il faut intégrer. Il suffit de faire un petit calcul en se basant sur le nombre total d'enregistrements dans la table et le nombre d'éléments affichés par page. Donc je vais appeler cette variable nombre de pages qui est égal au nombre d'enregistrements. Je vais prendre dans ce cas le tableau que j'ai récupéré, t_count, avec l'index 0 et la clé cpt que je récupère ici, divisé par le nombre d'éléments par page. Cette division n'est pas toujours entière. Par exemple, si j'ai 11 enregistrements, quand je divise 11 par 5, ça va pas me donner un nombre entier. Donc je vais prendre l'arrondi supérieur à l'aide de la fonction ceil. Désormais, je dispose du nombre de pages à mettre. Bon, je peux faire un test pour afficher ça. Donc echo nombre de pages, exécutons. Donc ça m'affiche 6 pages. Maintenant, je vais créer les liens qui vont me permettre de parcourir ces différentes pages. Je vais le faire ici. Le counter i va commencer à 1, il va finir au nombre de pages que Et je vais mettre echo le lien A. Au milieu, je mets la valeur i. Bon, je peux mettre href que je vais laisser vide dans un premier temps. Exécutons pour voir ce que ça va donner sur la page. Donc ça a bien créé les liens. Bon, je peux les espacer un petit peu, soit avec CSS ou bien juste avec le mot-clé nbsp. Maintenant mes liens sont créés. J'en ai 6 qui vont me permettre de parcourir les 6 pages disponibles. Quand je clique sur un lien, il faut indiquer au serveur le nom de la page souhaitée. Alors je vais passer un paramètre GET comme ça, page égale la variable i. Exécutons. Donc maintenant quand je clique sur la page 2, vous constatez bien que le paramètre passé vaut 2, 6, etc. Maintenant il suffit de retoucher le code qui va lister les éléments. Tout d'abord il faut récupérer la variable page à l'aide du GET. On va mettre un@ en guise de précaution pour éviter l'affichage des notifications éventuelles. Ensuite je vais calculer une nouvelle variable qui va me permettre de spécifier la valeur de départ par laquelle je vais commencer la sélection. Par Parce que figurez-vous bien que dans la requête de sélection, je vais mettre ici limite, valeur de départ et le nombre d'éléments à récupérer, qui dans ce cas est égal à 5. Donc la valeur de départ, je vais l'appeler début par exemple, égal. Imaginez que j'ai cliqué sur la page 1, dans ce cas la valeur de début sera 0. Quand je clique sur la page 2, la valeur de début dans ce cas sera 5. Et quand je clique sur la page 3, la valeur de début sera égale à 10. Alors je crois que vous avez trouvé le modèle. C'est la variable page- 1 multipliée par le nombre d'éléments par page. Maintenant, il suffit d'ajouter la limite à la requête, la valeur de début et le nombre d'éléments à récupérer. Comme ça. Exécutons pour voir ce que ça va donner. Donc là j'ai les 5 premiers éléments. Quand je clique sur 2, les 5 prochains éléments, etc. Donc on voit bien que ça marche. Il y a encore un truc à régler, c'est que quand je clique par exemple sur la page 2, on constate qu'elle est toujours cliquable. Normalement il faut l'afficher en surbrillance pour dire que c'est la page courante. Donc je vais ajouter une autre condition ici. Je vais mettre si la page courante est différente de la variable i, alors à ce moment-là je vais afficher le lien. Sinon, c'est-à-dire que la page courante vaut la valeur de la variable i, dans ce cas je mettrai echo a et dedans je mettrai directement la variable i. Bien sûr, j'ai prévu un style CSS qui va faire la distinction entre les deux. Exécutons. Voilà, donc je vais encore ajouter le NBSP. Page 3, page 4, page 5, etc. Il y a encore une chose, c'est que imaginez que j'ai chargé la page pour la première fois, rien n'est affiché. Normalement, par défaut, il faut activer la page 1. Alors je vais la mettre ici. Je vais juste vérifier si la variable lePage est vide. Alors celle-ci vaut 1. Voilà. Donc par défaut c'est 1. Et ça marche très bien. Encore une dernière chose à vérifier. Imaginez que l'utilisateur a spécifié une valeur qui est en dehors de mon intervalle, par exemple le 10. Puisque je n'ai pas de page 10, alors vous avez vu qu'on va se retrouver avec une page vide. Alors il suffit de vérifier cette valeur au cas où elle est saisie manuellement par l'utilisateur. Je vais juste vérifier par exemple la longueur du tableau tab. Si c'est égal à 0, ça veut dire je n'ai aucun enregistrement. Alors je vais rediriger le navigateur vers la page 1. C'est la page courante et par défaut ça ramène vers la page 1. Exécutons. Donc voilà, je vais commencer par exemple de 60 et ça me ramène directement vers la page 1. Sinon, la pagination marche bien. Alors j'espère que vous avez saisi le principe. Merci pour votre attention et à la vidéo prochaine.
