Forum d'entraide PHPFrance

Hello tout le monde,
Est-ce que quelqu'un connaitrait un bon tuto de comment faire une pagination en scroll infini avec php ?
Je trouve beaucoup de documentation en anglais avec de l'ajax etc. mais je ne suis pas familiariser avec ca encore.

Merci pour vos précieux conseils !

PS: @Ryle, si tu vois ce message tu sauras pourquoi c'est :p

Ça dépend comment sont stockés tes données, si c'est une base SQL, le plus simple c'est de faire un SELECT avec la clause LIMIT et OFFSET :
https://sql.sh/cours/limit
Ça permet de faire une pagination simple en PHP/SQL.

Ensuite pour faire du scroll infini, il faut impérativement utiliser de l'ajax, le principe c'est que lorsque tu scrolles ça va charger les résultats suivants, et ainsi de suite.
https://dev.to/sakun/a-super-simple-imp ... lling-3pnd

Super, merci Arthur.

Ok ca fait l'effet que la page se rallonge au fur et à mesure du scroll.
Même si c'est pas très instantané.

Est-ce qu'en terme de performance c'est mieux de faire en ajax ou faire LIMIT . OFFSET ?

Je vais essayer de compresser la taille des images (d'ailleurs c'est le sujet d'un prochain topic :p).
Mais comme ça je vais essayer.

PS: j'ai essayé de faire le truc en ajax mais j'ai pas compris si le code du gars il fallait le mettre dans une balise php ou pas ?
Merci de ton aide.

En javascript/ajax, tu fais un appel depuis ta page pour demander les données suivantes au serveur.
Le LIMIT ... OFFSET, c'est pour ta requête SQL côté serveur justement, donc tu as besoin des 2.

Salut @rthur,

Alors j'ai fais ce que tu as dis :
1. J'ai fais ma LIMIT OFFSET pour Mysql:
//Je veux afficher max. les 633 lieux existants et afficher par 8//.

Code : Tout sélectionner

$reponse = $bdd->query('SELECT l.comte_nom, l.lieu_nom, l.pays_nom, p.flag_nom, l.lieu_url
FROM lieux l LEFT JOIN pays p ON l.pays_nom = p.pays_nom ORDER BY l.lieu_nom LIMIT 633 OFFSET 8');

2. Puis j'ai intégré le code du lien que tu as envoyé tout en bas de ma page:

Code : Tout sélectionner

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
//Infinite Scroll
$(window).on("scroll", function() {
 //page height
 var scrollHeight = $(document).height();
 //scroll position
 var scrollPos = $(window).height() + $(window).scrollTop();
 // fire if the scroll position is 300 pixels above the bottom of the page
 if(((scrollHeight - 300) >= scrollPos) / scrollHeight == 0){
   $('.load-more-button').click();
  }
});</script>

Par contre j'ai pas vraiment l'impression que ca change quelque chose au niveau chargement.

Si je descends, il charge les prochaines vignettes MAIS si je remonte, il recharge à nouveau els vignettes déjà chargées.
Pas très efficace en terme d'expérience.

Comment je fais pour vérifier que ce script fonctionne ?

3. Pas sur de savoir ou je dois mettre la class pour le bouton load (je voudrais mettre un gif animé que je vais charger dans le dossier comme image). C'est lié à ceci je suppose '.load-more-button'

Merci !

le code mentionné est incomplet, donc il vaut mieux partir sur un exemple complet comme :
https://www.myprogrammingtutorials.com/ ... -ajax.html

Ok super Or1,
J'ai modifié le code par celui que tu as envoyé en modifiant:
- l'image du loader.
- j'ai mis le script ajax et le plugin dans le /head.
- J'ai retiré la classe de la div car ca faisait bug toute ma page (c'etait surement une class pour son exemple à lui).

Mais ca fonctionne bizarrement.
Je n'ai pas compris l'histoire de la page "pagionation.php".
Je dois mettre quoi là dedans ?
Surement pour ca que ca bug comme ça ?

Merci de ton aide !

Code:

Code : Tout sélectionner

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="styleR.css" />
    <title>Visit Earth</title>
    <!-- JQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- Inview Js (jquery.inview.js) -->
    <script src="jquery.inview.js"></script>

</head>

<body>
    <div id="bloc_page">

<header>

    <p><img src="img/logo.jpg" alt="logo" id="logo"></p>
    <h1>Découvrez les meilleures choses à voir et à faire dans le Monde. </h1><br />

</header>

<?php

try
{
    // On se connecte à MySQL
    $bdd = new PDO('mysql:host=localhost;dbname=visitearth;charset=utf8', 'root', 'root');
}
catch(Exception $e)
{
    // En cas d'erreur, on affiche un message et on arrête tout
        die('Erreur : '.$e->getMessage());
}

$reponse = $bdd->query('SELECT l.comte_nom, l.lieu_nom, l.pays_nom, p.flag_nom, l.lieu_url
FROM lieux l LEFT JOIN pays p ON l.pays_nom = p.pays_nom ORDER BY l.lieu_nom LIMIT 633 OFFSET 8');

?>

<div id="filters">      
            <div class="labeltheme"> 
                <div>Thèmes</div>
                <select name="lieux">
                <option value="lieux" selected>Lieux à découvrir</option>
                </select></div>
        
            <div class="labelpays">
                <div>Pays</div>
                <select class= "selectpays" name="pays">
                <?php
                        $requete = 'SELECT pays_nom FROM pays';
                        $liste_pays = $bdd->query($requete);
                        while ($donnees = $liste_pays->fetch()) {
                        echo '<option value="' . $donnees['pays_nom'] . '">' . $donnees['pays_nom'] . '</option>';
                        }
                    ?>
                </select></div> 

            <div class="labeltype">
                <div>Types</div>
                <select name="type">

                </select></div>         
</div>
<br>
<br />

<div class="textelieu">
<?php 
    $requete = 'SELECT lieu_nom FROM lieux';
    $nombre_de_lieux = $bdd->query($requete);
    $result = $nombre_de_lieux->fetchAll();
    echo count($result);
    $nombre_de_lieux->closeCursor();
    ?> ENDROITS À DÉCOUVRIR</div>
    

<br>

<?php while ($donnees = $reponse->fetch()) { ?>

    <div class="vignette">  
        <img src="<?php echo $donnees['lieu_url']; ?>" alt="Lieu" class="imglieu"/>                    
        <div class="overlay"></div>
        <div class="lieu"><?php echo $donnees['lieu_nom']; ?></div>
        <div class="pays"><?php echo $donnees['pays_nom']; ?>, <?php echo $donnees['comte_nom']; ?></div>
        <img src="<?php echo $donnees['flag_nom']; ?>" alt="drapeau" class="flag"/>
    </div>

<input type="hidden" id="pageno" value="1">
     <img id="loader" src="img/loader.gif">
     <script>
         $(document).ready(function(){
             $('#loader').on('inview', function(event, isInView) {
                 if (isInView) {
                     var nextPage = parseInt($('#pageno').val())+1;
                     $.ajax({
                         type: 'POST',
                         url: 'pagination.php',
                         data: { pageno: nextPage },
                         success: function(data){
                             if(data != ''){							 
                                 $('#response').append(data);
                                 $('#pageno').val(nextPage);
                             } else {								 
                                 $("#loader").hide();
                             }
                         }
                     });
                 }
             });
         });
     </script>

<?php } 

$dirOrigine = "img_lieux/";
$diruploads = "uploads/";
$fichier = $donnees['lieu_url'];

// Dimensions de la vignette en pixels
$thumbWidth = 270;
$thumbHeight = 302;

// Lecture de l'image en supposant que ton image de base soit toujours un JPG
// Nota : si tu veux pouvoir utiliser des PNG ou autre, il faut tester le type de l'image et utiliser la fonction adaptée
$img = imageCreateFromJpeg($dirOrigine . $fichier); 

// Détermine les dimensions de l'image d'origine
$imgWidth = imagesx($img);
$imgHeight = imagesy($img);

// Crée la future vignette avec TrueColor si GD2 est disponible, sinon tu peux utiliser ImageCreate()
$imgThumb = imageCreateTrueColor($thumbWidth, $thumbHeight);

// Redimensionne l'image d'origine, 
imageCopyResized($imgThumb, $img, 0, 0, 0, 0, $thumbWidth, $thumbHeight, $imgWidth, $imgHeight);

// Sauvegarde de l'image dans le dossier uploads
imageJpeg($imgThumb, $diruploads . $fichier);

// Libération de la mémoire
imageDestroy($imgThumb);

?>

</body>
</html>

Ok super Or1,
J'ai modifié le code par celui que tu as envoyé en modifiant:
- l'image du loader.
- j'ai mis le script ajax et le plugin dans le /head.
- J'ai retiré la classe de la div car ca faisait bug toute ma page (c'etait surement une class pour son exemple à lui).

Mais ca fonctionne bizarrement.
Je n'ai pas compris l'histoire de la page "pagination.php".
Je dois mettre quoi là dedans ?
Surement pour ca que ca bug comme ça ?

Merci de ton aide !

Code:

Code : Tout sélectionner

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="styleR.css" />
    <title>Visit Earth</title>
    <!-- JQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- Inview Js (jquery.inview.js) -->
    <script src="jquery.inview.js"></script>

</head>

<body>
    <div id="bloc_page">

<header>

    <p><img src="img/logo.jpg" alt="logo" id="logo"></p>
    <h1>Découvrez les meilleures choses à voir et à faire dans le Monde. </h1><br />

</header>

<?php

try
{
    // On se connecte à MySQL
    $bdd = new PDO('mysql:host=localhost;dbname=visitearth;charset=utf8', 'root', 'root');
}
catch(Exception $e)
{
    // En cas d'erreur, on affiche un message et on arrête tout
        die('Erreur : '.$e->getMessage());
}

$reponse = $bdd->query('SELECT l.comte_nom, l.lieu_nom, l.pays_nom, p.flag_nom, l.lieu_url
FROM lieux l LEFT JOIN pays p ON l.pays_nom = p.pays_nom ORDER BY l.lieu_nom LIMIT 633 OFFSET 8');

?>

<div id="filters">      
            <div class="labeltheme"> 
                <div>Thèmes</div>
                <select name="lieux">
                <option value="lieux" selected>Lieux à découvrir</option>
                </select></div>
        
            <div class="labelpays">
                <div>Pays</div>
                <select class= "selectpays" name="pays">
                <?php
                        $requete = 'SELECT pays_nom FROM pays';
                        $liste_pays = $bdd->query($requete);
                        while ($donnees = $liste_pays->fetch()) {
                        echo '<option value="' . $donnees['pays_nom'] . '">' . $donnees['pays_nom'] . '</option>';
                        }
                    ?>
                </select></div> 

            <div class="labeltype">
                <div>Types</div>
                <select name="type">

                </select></div>         
</div>
<br>
<br />

<div class="textelieu">
<?php 
    $requete = 'SELECT lieu_nom FROM lieux';
    $nombre_de_lieux = $bdd->query($requete);
    $result = $nombre_de_lieux->fetchAll();
    echo count($result);
    $nombre_de_lieux->closeCursor();
    ?> ENDROITS À DÉCOUVRIR</div>
    

<br>

<?php while ($donnees = $reponse->fetch()) { ?>

    <div class="vignette">  
        <img src="<?php echo $donnees['lieu_url']; ?>" alt="Lieu" class="imglieu"/>                    
        <div class="overlay"></div>
        <div class="lieu"><?php echo $donnees['lieu_nom']; ?></div>
        <div class="pays"><?php echo $donnees['pays_nom']; ?>, <?php echo $donnees['comte_nom']; ?></div>
        <img src="<?php echo $donnees['flag_nom']; ?>" alt="drapeau" class="flag"/>
    </div>

<input type="hidden" id="pageno" value="1">
     <img id="loader" src="img/loader.gif">
     <script>
         $(document).ready(function(){
             $('#loader').on('inview', function(event, isInView) {
                 if (isInView) {
                     var nextPage = parseInt($('#pageno').val())+1;
                     $.ajax({
                         type: 'POST',
                         url: 'pagination.php',
                         data: { pageno: nextPage },
                         success: function(data){
                             if(data != ''){							 
                                 $('#response').append(data);
                                 $('#pageno').val(nextPage);
                             } else {								 
                                 $("#loader").hide();
                             }
                         }
                     });
                 }
             });
         });
     </script>

<?php } 

$dirOrigine = "img_lieux/";
$diruploads = "uploads/";
$fichier = $donnees['lieu_url'];

// Dimensions de la vignette en pixels
$thumbWidth = 270;
$thumbHeight = 302;

// Lecture de l'image en supposant que ton image de base soit toujours un JPG
// Nota : si tu veux pouvoir utiliser des PNG ou autre, il faut tester le type de l'image et utiliser la fonction adaptée
$img = imageCreateFromJpeg($dirOrigine . $fichier); 

// Détermine les dimensions de l'image d'origine
$imgWidth = imagesx($img);
$imgHeight = imagesy($img);

// Crée la future vignette avec TrueColor si GD2 est disponible, sinon tu peux utiliser ImageCreate()
$imgThumb = imageCreateTrueColor($thumbWidth, $thumbHeight);

// Redimensionne l'image d'origine, 
imageCopyResized($imgThumb, $img, 0, 0, 0, 0, $thumbWidth, $thumbHeight, $imgWidth, $imgHeight);

// Sauvegarde de l'image dans le dossier uploads
imageJpeg($imgThumb, $diruploads . $fichier);

// Libération de la mémoire
imageDestroy($imgThumb);

?>

</body>
</html>

Forum d'entraide PHPFrance

Pagination PHP

Pagination PHP

Re: Pagination PHP

Re: Pagination PHP

Re: Pagination PHP

Re: Pagination PHP

Re: Pagination PHP

Re: Pagination PHP

Re: Pagination PHP