Introduction
Pagination est un concept important dans la création d'applications basées sur les données. Lors de la récupération des enregistrements de la base de données, un grand nombre d'enregistrements peut être extrait. Par exemple, lors de l'exécution de la requête pour les utilisateurs actifs ou les utilisateurs appartenant à un emplacement spécifique, un grand nombre d'utilisateurs, par centaines ou même par milliers, peut être renvoyé. Afficher ce nombre énorme d'enregistrements sur une seule page web n'est pas une solution conviviale car cela peut submerger l'utilisateur et gâcher la fluidité de l'expérience utilisateur.
Par conséquent, une option préférable consiste à restreindre le nombre d'enregistrements. C'est le concept de pagination. En d'autres termes, nous divisons le nombre d'enregistrements en pages, puis nous affichons la page. Une seule page peut contenir dix, voire quinze ou toute autre quantité d'enregistrements réalisables pouvant être affichés sur le front-end.
Bien que la pagination puisse améliorer l'expérience utilisateur globale de l'application, elle peut également rendre l'application plus rapide puisque nous pouvons récupérer un nombre réduit d'enregistrements. Par conséquent, moins de données sont transférées sur le réseau entre le client et le serveur, ce qui réduit le temps de latence.
Dans ce tutoriel, nous allons construire un code PHP qui se connecte à la base de données et implémenter la pagination en utilisant la base de données MySQL et sa LIMIT clause.
Prérequis
Pour suivre ce tutoriel, vous aurez besoin de :
-
La dernière version d'Ubuntu, opérationnelle. Suivez le tutoriel Comment configurer votre serveur Ubuntu si vous avez besoin d'aide.
-
Vous devrez également avoir installé PHP et MySQL. Pour configurer PHP et MySQL, nous avons un tutoriel : Configuration de la pile LAMP – Linux Apache MySQL PHP.
Étape 1 — Configurer un utilisateur de base de données et une base de données de test
Dans ce tutoriel, nous allons établir la connexion à la base de données MySQL et récupérer les enregistrements. Ces enregistrements seront affichés sur une page HTML avec l'élément table. Pour établir la connexion et afficher les enregistrements, nous utiliserons un script PHP. Une fois que nous serons prêts avec la connexion à la base de données, nous testerons notre application avec et sans pagination. Tester de cette manière nous permettra de comprendre comment fonctionne la pagination de manière pratique.
Pour vous connecter à la base de données MySQL, vous aurez besoin d'une base de données MySQL d'exemple et des informations d'authentification de l'utilisateur pour vous connecter à la base de données MySQL. Dans cette étape, vous allez créer un utilisateur non-root pour votre base de données MySQL, une base de données d'exemple et une table pour tester le script PHP.
Tout d'abord, connectez-vous à votre serveur. Ensuite, connectez-vous au serveur MySQL en utilisant la commande ci-dessous :
|
1 |
mysql> sudo mysql -u root -p |
Le mot de passe de l'utilisateur root vous sera demandé. Saisissez le mot de passe et appuyez sur Entrée pour continuer. Ensuite, créez une base de données d'exemple, appelée test_db, que nous utiliserons dans notre tutoriel. Pour créer une nouvelle base de données, exécutez la commande ci-dessous :
|
1 |
mysql> Create database test_db; |
Vous verrez dans la sortie du serveur MySQL qu'une ligne a été affectée. Ensuite, nous devrons créer un nouvel utilisateur pour cette base de données. Nous allons lui accorder tous les privilèges. Cependant, lorsque vous travaillez avec des applications réelles, veillez à limiter les privilèges. Nous appellerons notre utilisateur test_user. Dans la commande ci-dessous, remplacez PASSWORD par un mot de passe fort :
|
1 |
mysql> GRANT ALL PRIVILEGES ON test_db.* TO 'test_user'@'localhost' IDENTIFIED BY 'PASSWORD'; |
Une fois l'utilisateur créé, actualisez les privilèges :
|
1 |
mysql> FLUSH PRIVILEGES; |
Maintenant que test_user et test_db sont prêts, utilisez test_db pour créer des tables. Pour basculer vers test_db, exécutez la commande ci-dessous :
|
1 |
mysql> Use test_db; |
Une fois que nous voyons que la base de données a été modifiée dans la sortie, nous sommes prêts à créer notre table. Nous allons créer une nouvelle table appelée Products pour contenir les produits. Pour nos besoins, nous n'aurons besoin que de deux colonnes dans cette table : product_id et product_name. Nous allons définir product_id sur AUTO_INCREMENT, de sorte qu'il soit incrémenté à chaque fois que nous ajoutons un nouveau produit. L'autre colonne appelée product_name sera utilisée pour stocker le nom du produit. La product_name colonne sera utilisée pour différencier chaque produit par son nom :
|
1 |
mysql> Create table products (product_id BIGINT PRIMARY KEY AUTO_INCREMENT, product_name VARCHAR(50) NOT NULL ) Engine = InnoDB; |
Now we will add some produits à cette table nouvellement créée. Pour cela, exécutez les commandes ci-dessous :
|
1 2 3 4 5 6 7 8 9 10 |
mysql> Insert into products(product_name) values ('WIRELESS MOUSE'); mysql> Insert into products(product_name) values ('BLUETOOTH SPEAKER'); mysql> Insert into products(product_name) values ('GAMING KEYBOARD'); mysql> Insert into products(product_name) values ('320GB FAST SSD'); mysql> Insert into products(product_name) values ('17 INCHES TFT'); mysql> Insert into products(product_name) values ('SPECIAL HEADPHONES'); mysql> Insert into products(product_name) values ('HD GRAPHIC CARD'); mysql> Insert into products(product_name) values ('80MM THERMAL PRINTER'); mysql> Insert into products(product_name) values ('HDMI TO VGA CONVERTER'); mysql> Insert into products(product_name) values ('FINGERPRINT SCANNER'); |
Pour vérifier si ces produits ont été saisis dans la table, exécutez la commande ci-dessous :
|
1 |
mysql> select * from products; |
Si vous voyez les produits que vous avez saisis ci-dessus, vous êtes prêt à continuer. Quittez la base de données MySQL en utilisant la commande ci-dessous :
|
1 |
mysql> quit; |
Maintenant que nous avons configuré la base de données MySQL et que nous avons saisi des données de test, nous sommes prêts à coder le script PHP pour nous connecter à cette base de données et récupérer les enregistrements.
Étape 2 – Récupération et affichage des enregistrements sans pagination
Comme nous l'avons vu plus haut, nous allons d'abord afficher les enregistrements sans pagination. Nous allons créer un script PHP qui se connecte à la base de données MySQL et récupère les enregistrements. Nous nous connecterons à la test_db que nous avons créée ci-dessus en utilisant le test_user et récupérerons les enregistrements.
Notre table products ne contient actuellement que dix enregistrements. Il se peut que la nécessité d'une pagination ne soit pas évidente pour de nombreux utilisateurs. Cependant, tester l'application sans la pagination permettra de mieux comprendre comment elle contribue à l'expérience globale de l'application. Nous comprendrons également comment la division des données permet de créer une meilleure expérience utilisateur et de réduire la charge sur le serveur.
Sur votre serveur PHP, à la racine des documents du dossier du site Web, exécutez la commande ci-dessous :
sudo nano /var/www/html/pagination_test.php
Maintenant, dans ce fichier, ajoutez le contenu ci-dessous. Assurez-vous de remplacer le PASSWORD par la valeur du mot de passe de votre test_user:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php try { $pdo = new PDO("mysql:host=localhost;dbname=test_db", "test_user", "PASSWORD"); $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES,false); $sql = "select * from products"; $stmt = $pdo->prepare($sql); $stmt -> execute(); echo "<table border='1' align='center'>"; while (($row = $stmt -> fetch(PDO::FETCH_ASSOC)) !== false) { echo "<tr>"; echo "<td>".$row['product_id']."</td>"; echo "<td>".$row['product_name']."</td>"; echo "</tr>"; } echo "</table>"; } catch(PDOException $e) { echo $e->getMessage(); } ?> |
Enregistrez le fichier. Avant de continuer, nous allons résumer ce que nous avons fait ci-dessus :
-
Tout d'abord, nous nous sommes connectés à la base de données MySQL, et pour cela nous avons utilisé la PHP Data Object (PDO) bibliothèque. Nous avons utilisé les identifiants de l'utilisateur MySQL que nous avions utilisés ci-dessus pour nous connecter à la base de données MySQL. PDO est une bibliothèque extrêmement utile qui sert à se connecter à la base de données. Elle rend la couche d'accès aux données facile à coder et permet de se connecter à diverses bases de données sans avoir à restructurer l'application en profondeur. PDO utilise des requêtes préparées, ce qui garantit que la sécurité n'est pas compromise. Par conséquent, les requêtes sont exécutées de manière sécurisée.
-
Ensuite, nous avons utilisé l' PDO API pour exécuter l'instruction select * from products . Le $pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES,false) garantit que les types de données dans PHP sont les mêmes que dans la base de données. Par conséquent, product_id et product_name apparaissent respectivement sous forme d'entier et de chaîne de caractères.
-
Le $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); indique à PDO de lever une exception en cas d'erreur. Ce faisant, nous pouvons facilement intercepter l'exception dans le bloc try … catch et le gérer selon les besoins.
Maintenant que notre script est prêt, nous devons l'exécuter. Pour cela, ouvrez votre navigateur et visitez l'URL : /var/www/html/pagination_test.php. Assurez-vous d'ajouter l'IP de votre serveur à l'URL. Si vous l'exécutez localement, votre URL deviendra http://localhost/var/www/html/pagination_test.php.
Vous verrez le résultat ci-dessous :
Ici, nos produits sont retournés et affichés sur la page. Maintenant, imaginez si nous avions des centaines de produits. Cela se traduirait par une longue boucle pour récupérer les données et les afficher sur la page. Cela augmenterait le temps de chargement de la page.
Dans la section suivante, nous allons modifier le script PHP et inclure la clause MySQL LIMIT. Cela résoudra le problème de l'affichage d'un grand nombre d'enregistrements. Nous ajouterons les liens de pagination afin que l'utilisateur puisse naviguer à travers les pages.
Étape 3 – Configuration de la pagination à l'aide de PHP
Dans cette étape, nous allons configurer la pagination à l'aide de PHP pour afficher les données en utilisant plusieurs tableaux. Pour s'adapter à la pagination, nous allons modifier le script que nous avions codé à l'étape précédente.
Nous utiliserons la clause LIMIT de la base de données MySQL. Avant d'ajouter cela au script, voyons un exemple de la syntaxe MySQL LIMIT :
|
1 |
mysql> Select [column1, column2, column n...] from [table name] LIMIT offset, records; |
Dans l'instruction ci-dessus, nous pouvons voir que la clause LIMIT possède les arguments offset et records. offset indique combien d'enregistrements sauter et records indique le nombre maximum d'enregistrements à afficher par page ou à récupérer dans la base de données.
Maintenant que nous savons comment fonctionne la pagination, voyons comment nous allons l'implémenter. Nous afficherons trois enregistrements par page. Ainsi, si nous avons dix enregistrements dans notre base de données, nous aurons quatre pages en divisant le nombre total d'enregistrements par le nombre d'enregistrements par page. Comme le résultat peut ne pas être un nombre entier, nous utiliserons la fonction PHP Ceil pour arrondir à l'entier supérieur le plus proche afin d'obtenir un résultat entier. Ci-dessous se trouve un extrait de code simple pour illustrer la fonction Ceil :
|
1 |
$total_pages=ceil($total_records/$per_page); |
Maintenant, nous allons ajouter le code pour la pagination. Pour activer la pagination et ajouter les liens de navigation, ouvrez le fichier /var/www/html/pagination_test.php à l'aide de la commande ci-dessous :
|
1 |
$ sudo nano /var/www/html/pagination_test.php |
Ensuite, remplacez le contenu de ce fichier par le code ci-dessous :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<?php try { $pdo = new PDO("mysql:host=localhost;dbname=test_db", "test_user", "PASSWORD"); $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES,false); /* Début des infos de pagination */ $page = 1; if (isset($_GET['page'])) { $page = filter_var($_GET['page'], FILTER_SANITIZE_NUMBER_INT); } $per_page = 3; $sqlcount = "select count(*) as total_records from products"; $stmt = $pdo->prepare($sqlcount); $stmt->execute(); $row = $stmt->fetch(); $total_records = $row['total_records']; $total_pages = ceil($total_records / $per_page); $offset = ($page-1) * $per_page; /* Fin des infos de pagination */ $sql = "select * from products limit :offset, :per_page"; $stmt = $pdo->prepare($sql); $stmt->execute(['offset'=>$offset, 'per_page'=>$per_page]); echo "<table border='1' align='center'>"; while ( ($row = $stmt->fetch(PDO::FETCH_ASSOC) ) !== false) { echo "<tr>"; echo "<td>".$row['product_id']."</td>"; echo "<td>".$row['product_name']."</td>"; echo "</tr>"; } echo "</table>"; /* Début de la navigation */ echo "<table border='1' align='center'>"; echo "<tr>"; if ($page-1 >= 1) { echo "<td><a href=".$_SERVER['PHP_SELF']."?page=".($page - 1).">Précédent</a></td>"; } if ($page+1 <= $total_pages) { echo "<td><a href=".$_SERVER['PHP_SELF']."?page=".($page + 1).">Suivant</a></td>"; } echo "</tr>"; echo "</table>"; /* Fin de la navigation */ } catch(PDOException $e) { echo $e->getMessage(); } ?> |
Voici un résumé de ce code :
-
Nous devons conserver les informations sur la page sur laquelle nous nous trouvons actuellement. Pour cela, nous utilisons la $page variable. La $page variable est utilisée pour extraire la page sur laquelle nous nous trouvons actuellement à l'aide de la $_GET[‘page’] variable.
-
Ensuite, nous devons spécifier combien de pages nous affichons sur une page. Pour cela, nous utilisons la $per_page variable. Ici, nous n'affichons que trois produits par page.
-
Comme nous l'avons vu plus haut, nous devons disposer du nombre total d'enregistrements existant dans la base de données. Cela est nécessaire pour pouvoir identifier le nombre total de pages. La variable $total_records contient cette information.
-
Enfin, nous devons savoir combien d'enregistrements ignorer. Par exemple, si nous sommes sur la deuxième page, nous devons ignorer les trois premiers enregistrements de la base de données. Nous utilisons la variable $offset pour stocker cette information. Nous avons calculé cette information à chaque chargement de page en utilisant la formule $offset=($page-1)*$per_page. Si vous devez afficher un autre nombre d'éléments, vous pouvez spécifier la valeur dans la variable $per_page.
-
Pour afficher les boutons de navigation, nous utilisons le code ci-dessous :
|
1 2 3 4 5 6 7 8 9 10 |
. . . if( $page-1>=1) { echo "<td><a href=".$_SERVER['PHP_SELF']."?page=".($page-1).">Précédent</a></td>"; } if( $page+1<=$total_pages) { echo "<td><a href=".$_SERVER['PHP_SELF']."?page=".($page+1).">Suivant</a></td>"; } . . . |
La logique est que la variable $page est utilisée pour stocker la page actuelle. Si nous voulons afficher l'option précédente sur la page, le script soustraira un de la valeur de la variable $page. Si le résultat est supérieur ou égal à un, l'option précédente est affichée sur la page.
De même, pour afficher l'option suivante, nous ajoutons un à la variable $page. Ici, nous nous assurons que le résultat de l'addition ne dépasse pas le nombre total de pages dans la variable $total_pages.
Après cela, il est temps de vérifier la page. Ouvrez le navigateur et accédez à la page en utilisant l'URL que vous avez utilisée précédemment :
|
1 |
http://your_server_ip/pagination_test.php |
Vous verrez le résultat ci-dessous :
Ici, vous avez enfin implémenté la pagination en utilisant la clause LIMIT de MySQL dans le script PHP. En implémentant la pagination dans votre application, vous disposerez d'un meilleur moyen de naviguer à travers plusieurs enregistrements.
Conclusion
Dans ce tutoriel, nous avons vu comment implémenter la pagination en utilisant PHP et MySQL sur Ubuntu. En suivant ces étapes, vous pouvez créer des applications capables d'afficher correctement un grand nombre d'enregistrements, répartis sur les pages pour une manipulation efficace.
De plus, nous avons d'autres tutoriels utiles sur PHP et MySQL utilisant Ubuntu :
- Installation et sécurisation de phpMyAdmin sur Ubuntu 18.04
- Comment réinitialiser le mot de passe root de MariaDB ou MySQL
- Tutoriel CloudSigma : Comment configurer MySQL sur un serveur et bases de MySQL
Bonne programmation !
Commentaires
Aucun commentaire pour l'instant. Soyez le premier.