Comme la question revient très fréquemment sur le forum et sur le chat. Je vais vous apprendre à créer simplement un affichage page par page à partir du résultat d'une requête SQL.La table SQL.
Cet exo est en quelque sorte une extension de l'exo n°15
<mode type="hors sujet" voix="voix d'hôtesse">
Ding ding dong ding !
Le capitaine vous souhaite un bon voyage sur notre ligne.
Le tuto est bien long... Alors respirez un bon coup, concentrez-vous! On y va!
</mode>
Pour notre exercice, nous allons utiliser une table assez simple.
Requête de création et d'insertion des données
|
|
Comme c'est une question qui revient aussi très souvent, je vais vous expliquer comment faire pour afficher des résultats dans une table HTML.
Normalement, avant d'avoir posé les yeux sur ce tuto, vous êtes censés avoir lu, compris et assimilé les tutos précédents.Si c'est le cas, le script ci-dessous ne devrait pas vous poser trop de problèmes.
Affichage des enregistrements dans une table HTML.
|
|
Le résultat de ce code donnera ceci à l'écran :
Prénom Surnom Margueritte Qui aime les frites Roussette Belle clochette Blanchette La starlette Noireaude Petite Pataude Paquerette Toujours chouette Cowpilot Tête de linotte Kancowroo Qui saute partout Cowchenille La gentille Haricow Le plus bizarre des cows
Explications Juste avant notre boucle, nous affichons une ligne de la table HTML.
Elle est constituée de 2 colonnes dans lesquelles nous mettons le titre de chacune d'elles sous cette forme :
Affichage des titres dans des colonnes d'une table HTML
|
|
Dans la boucle, nous allons afficher chaque enregistrement dans une ligne du tableau.
Le prénom dans une cellule et le surnom dans une autre, sous cette forme :
Affichage des données.
|
|
Bien pratique, cette option nous permet de sélectionner une partie des enregistrements de la table en lui donnant le nombre d'enregistrements à récupérer à partir d'une position donnée.
Voici quelques exemples :
Syntaxe d'un SELECT avec une limite - Exemple 1
|
|
Cette requête retournera 4 enregistrements à partir du premier de la liste (0 + 1).
Dans le cas de notre table :
Prénom Surnom Margueritte Qui aime les frites Roussette Belle clochette Blanchette La starlette Noireaude Petite Pataude
Syntaxe d'un SELECT avec une limite - Exemple 2
|
|
Cette requête retournera 4 enregistrements à partir du premier de la liste dans l'ordre alphabétique.
Donc, la requête trie les enregistrements et ensuite en prend 4 à partir du premier (0 + 1).
Dans le cas de notre table :
Prénom Surnom Blanchette La starlette Cowchenille La gentille Cowpilot Tête de linotte Haricow Le plus bizarre des cows
Syntaxe d'un SELECT avec une limite - Exemple 2
|
|
Cette requête retournera 4 enregistrements à partir du 6ème (on en saute 5 , 5 +1) dans l'ordre alphabétique. Voilà ce que donne le résultat :
Si vous voulez comparer avec ce que donnerait un select sans limit avec un tri alphabétique :
Prénom Surnom Margueritte Qui aime les frites Noireaude Petite Pataude Paquerette Toujours chouette Roussette Belle clochette
Comparaison de l'exemple 2 sans limit
|
|
Voilà le résultat :Notre affichage page par page.
Prénom Surnom Blanchette La starlette Cowchenille La gentille Cowpilot Tête de linotte Haricow Le plus bizarre des cows Kancowroo Qui saute partout Margueritte Qui aime les frites Noireaude Petite Pataude Paquerette Toujours chouette Roussette Belle clochette
Je vais reprendre chaque partie du script de base pour le modifier afin de créer un affichage page par page.Première partie du script.
Ouvrez bien vos yeux, c'est parti !
Première partie du script.
|
|
Explications Cette partie-là ne change pas et ne comporte que des choses que vous êtes censés connaître.De quelles variables avons-nous besoin ?
- $host,$pass,$user et $db contiennent les informations pour se connecter à la base de données.
- Ensuite on se connecte à la base de données.
Pour notre affichage page par page, nous avons besoin de connaître certaines données que l'on va stocker dans des variables.
Nous allons reprendre notre script de base et y ajouter ce dont nous avons besoin pour travailler.
- $nombre : Nombre d'enregistrements que l'on veut afficher par page.
- $total : Le nombre total d'enregistrements de la table .
- $limite : Où en sommes-nous dans notre affichage.
Au début du script nous allons initialiser les variables $nombre et $limite.
Initialisation des variables.
|
|
Explications :
- $nombre est initialisé à 5 (5 enregistrements affichés à la fois)
- Si $limite n'existe pas on l'initialise à 0.
- Les 2 lignes de codes suivantes permettent de récupérer le nom de la page qui sera utilisée dans les liens.
- La variable $total contient le nombre d'enregistrement à afficher au total.
Compte le nombre d'enregistrements total de la table.
|
|
Maintenant, nous avons besoin de faire notre requête de sélection qui va afficher $nombre enregistrements à partir de $limite.
Sélectionne la portion d'enregistrements à afficher.
|
|
Explications On utilise l'opérateur de concaténation pour compléter notre requête de base par le tri et la limite de sélection. Notre requête donnera donc au premier affichage de la page ($limite étant initialisé à 0 la première fois):
Requête de sélection de la première page
|
|
Qui donnera ceci à l'écran :Calcul de la nouvelle limite d'affichage
Prénom Surnom Blanchette La starlette Cowchenille La gentille Cowpilot Tête de linotte Haricow Le plus bizarre des cows Kancowroo Qui saute partout
Imaginons que nous avons affiché la page pour la première fois. Notre $limite est à zéro, et notre script affiche donc 5 enregistrements à partir du début.
C'est pas mal, mais maintenant il faut savoir s'il reste d'autres enregistrements à afficher.Si oui il nous faut mettre un lien ou un bouton permettant de les afficher. Et pour cela, il faut recalculer la limite d'affichage.
Nous voulons afficher les $nombre enregistrements suivants et/ou les $nombre enregistrements précédents:
Il s'agit d'un calcul très simple :
Calcul des limites précédente et suivante
|
|
Voilà à quoi notre requête SQL ressemblera si on est sur la première page et que l'on clique sur le lien suivant.
Requête de sélection de la deuxième page
|
|
Qui donnera ceci à l'écran :Affichage des boutons ou liens page précédente , page suivante
Pour avoir la limite d'affichage de la portion suivante, on ajoute $nombre à $limite
Prénom Surnom Margueritte Qui aime les frites Noireaude Petite Pataude Paquerette Toujours chouette Roussette Belle clochette
Pour avoir la limite d'affichage de la portion précédente, on retire $nombre à $limite
Maintenant, il va nous falloir afficher les liens ou les boutons pour afficher le reste des enregistrements.
Pour cela nous allons devoir réfléchir à 2 choses.
- Sommes nous sur la première page de notre affichage ? C'est à dire est ce que $limite vaut 0 .
- oui : il ne faut donc pas afficher de bouton ou de lien 'page précédente'.
- non : il faut afficher un bouton ou un lien 'page précédente.
Affichage du lien précedent si besoin
|
|
Ou bien affichage d'un bouton formulaire
|
|
- Y a-t-il encore une page à afficher après la page courante? C'est à dire : est-ce que notre limite recalculée ($limitesuivante) est plus petite que notre $total ?
- oui : il faut donc afficher un bouton ou un lien 'page suivante'.
- non : il ne faut pas afficher de bouton ou de lien 'page suivante' car on est arrivé à la fin de notre affichage.
Affichage du lien suivant si besoin
|
|
Ou bien affichage d'un bouton formulaire
|
|
Maintenant, Si vous voulez afficher + de 5 enregistrements par page , il vous suffit de changer la valeur de $nombre.
<mode type="hors sujet" voix="voix d'hôtesse">
Ding ding dong ding !
Nos hôtesses vont passer vous proposer des pizzas et du coca ou des jus de fruits.
C'est le moment de faire une petite pause avant d'aller plus loin.
</mode>
Comment utiliser ce que nous venons d'apprendre de facon intelligente.
Il serait particulièrement malin de créer des fonctions pour notre affichage page/page pour pouvoir les réutiliser dans tous nos scripts.Valider la $limite passée par l'url. Comme pour tous les scripts, il est important de penser à la sécurité, particulièrement quand des variables sont passées par URL ou par un formulaire.
<mode type="hors sujet" voix="voix d'hôtesse">
Ding ding dong ding !
Le capitaine vous prie de bien vouloir attacher vos ceintures, nous passons à la vitesse supérieure !.
</mode>
Nous devons récupérer la variable puis tester si la valeur de $limite :
- est bien numérique.
- se trouve dans une fourchette de valeurs possibles (de 0 à $max)
- est un multiple de $nombre.
Fonction qui vérifie la validité de $limite
|
|
Explication des arguments passés en paramètres à la fonction verifLimite
- $limite : la limite passée en paramètre.
- $total : le nombre total d'enregistrements à afficher.
- $nombre : nombre total d'enregistrements à afficher par page.
Fonction qui affiche les boutons précédent/suivant
|
|
Explication de la fonction displayNextPreviousButtons.
- $limite : la limite d'affichage courante.
- $total : nombre total d'enregistrements retournés par le query
- $nb : nombre d'enregistrements à afficher par page.
- $page : nom de la page php.
Elle se comporte exactement comme les bouts de script expliqués ci-dessus.
On calcule la limite précédente et suivante, et, selon la page sur laquelle on se trouve ainsi que le nombre d'enregistrements total à afficher, on affiche ou pas les boutons next/previous.
Comment afficher les numéros de page.
Vous vous demandez s?rement comment faire pour afficher des liens vers les différents pages à afficher.
Cette petite fonction va vous aider.
Fonction qui affiche les liens vers les pages
|
|
Explication des arguments passés en paramètres à la fonction affichePagesModification de notre script de base afin qu'il utilise nos 2 nouvelles fonctions.
Explication de la fonction affichePages.
- $nb : $nb : nombre d'enregistrements à afficher par page.
- $page : nom de la page php.
- $total : nombre total d'enregistrements retournés par le query
- On calcule le nombre de pages en divisant le nombre total d'enregistrements (retournés par le query) par le nombre d'enregistrements à afficher par page. Si nous avons 20 enregistrements à afficher il nous faudra 20/5 = 4 pages. Si nous avons 21 enregistrements à afficher , comme 21/5 =4,2,cinq pages seront nécessaires. On doit donc arrondir à l'entier supérieur grâce à la fonction ceil();
- On initialise $numeroPages à 1 (première page)
- On fait une boucle qui va faire varier $numeroPages tant qu'il est inférieur ou égal à $nbpages.
- A chaque passage dans la boucle, on incrémente $numeroPages.
- Pour ne pas se retrouver avec trop de numéros de pages sur la même ligne, on met en place un compteur $compteurPages qui va varier dans la boucle lui aussi.
- Une fois que sa valeur arrivera à 10, on ajoute un retour à la ligne et on remet notre compteur à 1.
Si le nombre total d'enregistrements à afficher est plus grand que le nombre d'enregistrements à afficher par page, on appelle la fonction qui affiche les numéros de page ainsi que celle qui affiche les boutons
Modification du script de base pour utiliser nos 2 fonctions
|
|
- Signaler sur quelle page l'utilisateur se trouve.
"vous êtes sur la page n°1","vous êtes sur la page n°2",...- Changer la couleur du numéro de page active.
- Afficher où on en est dans l'affichage des enregistrements :
Affichage des 5 premiers enregistrements sur / 32.
Affichage des 10 premiers enregistrements sur / 32.
etc...
<mode type="hors sujet" voix="voix d'hôtesse">
Ding ding dong ding !
J'espère que vous avez bon voyage en notre compagnie. L'équipe de PHPdébutant espère vous revoir très bientôt sur ses lignes :p..
</mode>