Aide pour une pagination (SQL/PHP)

Fermé
frugi Messages postés 53 Date d'inscription lundi 22 décembre 2008 Statut Membre Dernière intervention 26 janvier 2016 - 22 août 2012 à 16:37
 opda - 25 août 2012 à 03:09
Bonjour,

J'aimerais créer une galerie photos avec zoombox au clic. Jusqu'à là rien de compliqué.
Seulement le problème est que j'ai plus de 200 photos à mettre dans cette même galerie. J'aimerais donc créer une pagination, pour que seulement 27 photos (9 lignes de 3) soient affichées par page.
Deuxième problème, cette galerie sera en perpétuelle modification: je risque fortement de supprimer des photos au fil du temps, et encore plus fortement d'en rajouter.
Du coup la « pagination » que j'ai mis en place pour le moment (simplement une redirection vers autre page lorsqu'on clique sur « 2 » ou « suivant ») est obsolète, puisque si je veux rajouter des photos où en supprimer, je devrais à chaque fois tout décaler dans chacune des pages T_T
(Exemple: Sur ma page 1, j'ai 27 photos numérotées de 1 à 27, sur ma page 2 j'ai 27 photos numérotées de 28 à 54, etc... Du coup si je supprime ma photo n°10, la 11 devra devenir la 10, la 12 la 11, la 13 la 12, etc... et forcément, la photo n°28 -qui deviendra la 27-, ne sera plus sur la page 2, mais sur la page 1)

Après quelques recherches sur le net, j'ai appris que pour parvenir à mes fins je devrais créer une BDD et utiliser le SQL.
Grande novice que je suis, ces deux mots ne me disaient quasiment rien, j'ai donc décidé d'apprendre à me servir de mySQL grâce -notamment- au Site Du Zero. D'autant plus que ça risque de me servir par la suite, car j'aimerais créer un système d'identification par pseudo et mot de passe sur mon site -mais je laisse ça de côté pour le moment.

Après plus d'une semaine passée sur de cours en tout genre sur mySQL et compagnie.
J'ai réussi -du moins je crois- à comprendre vaguement comment je pourrais utiliser une BDD pour parvenir à cette pagination.
Seulement tout ça reste vague et sans l'aide de quelqu'un, ça risque d'être très dur à réaliser.

Voici une idée précise de ce que j'aimerais faire:

Il faudrait que je regroupe toutes ces photos dans une table SQL (comment insérer des fichiers dans une table sur mySQL? OO -ou du moins y faire référence) qui aurait pour colonnes: ID (primary key, qui s'auto-incrémente et qui permet de donner une identification unique à mes photos) / Nom de la photo / Catégorie (oui, parce-que j'aimerais pouvoir classer toutes mes photos en catégories également) / Date d'entrée (de la photo dans la BDD) / Nombre de clics
Pour la dernière colonne, je m'explique: j'aimerais qu'en plus de pouvoir classer mes photos par date, j'aimerais que par défaut, elles se classent par nombre de clics (des photos les plus « cliquées » aux photos les moins cliquées). Et donc qu'à chaque clic d'un visiteur sur une de mes photos, le nombre de clics dans la colonne « Nombre de clics » de ma table SQL pour cette photo augmente de 1 (ce qui changera l'ordre d'affichage avec un « ORDER BY » j'imagine).

Après j'imagine qu'il faut sûrement une colonne « Emplacement » pour indiquer où se trouve la photo (sur mon ordinateur ou sur le net?)?

Et il faut que j'utilise tout ça grâce à un code PHP j'imagine...
(jusqu'à là le seul PHP que j'ai utilisé a été pour créer une formulaire qui s'envoie par mail au submit).

Donc en gros, il me faudrait ce code php et des précisions sur le SQL...

Encore une question: serait-il plus judicieux de stocker la BDD en local ou sur un serveur?


Bref, je ne comprend pas grand chose à tout ça et j'ai bien besoin d'une explication et d'un peu d'aide *-*

Je ne demande pas à ce qu'on me fasse tout le travail à ma place, ce serait inutile, j'aimerais en profiter pour comprendre si possible x)
Mais qu'on me donne un exemple déjà fait que je puisse modifier ou un début de code...


Voici la partie de mon code actuel pour la galerie photo, page « toutes catégories » qui nous intéresse ici:

<div id="description">
        <span> Catégories de photos : </span>
    <br><br>
	<br><a class="five current" href="logos_tout.html">
    &nbsp; Toutes catégories &nbsp; </a>
    <br>
	<br><a class="five" href="catégorie1.html">
    &nbsp; catégorie 1 &nbsp; </a>
    <br>
	<br><a class="five" href="catégorie2.html">
    &nbsp; catégorie 2 &nbsp; </a>
    <br>
	<br><a class="five" href="catégorie3.html">
    &nbsp; catégorie 3 &nbsp; </a>
    <br>
	<br><a class="five" href="catégorie4.html">
    &nbsp; catégorie 4 &nbsp; </a>
    <br></div>
      
<div id="pagination" style="width:680px">
        <div id="pagination_numbers">
          <div class="pagination_links_category"><span class="disabled prev_page">?</span> <span class="current">1</span> <a href="/photos-page2" rel="next">2</a> <a href="/photos-page3">3</a> <span class="gap" style="color:#F00">&hellip;</span> <a href="/photos-page6">6</a> <a href="/photos-page2" class="next_page" rel="next">?</a></div>
          </div>
        </div>
</div>


<div class="name_category">
        <div class="design_box">
               <div id="designs">
            
            <a id="link_photo1" onmouseout="$j('#photo1').attr('src', '/photo1.png');$j('#link_photo1').css('background-color', '#fff');" onmouseover="$j('#photo1').attr('src', '/photo1_over.png');$j('#photo1').css('background-color', 'rgba(0, 0, 0, 0)');" title="Photo1">
                <img alt="Photo1" class="mini_pic" id="photo1" src="/photo1.png" width="211" style="background-color:#fff" />
            </a>
          </div>
          <div id="info_photo">
            <span id="name"><a href="/photo1.png" title="Photo 1">Photo 1</a></span><br/>
          </div>

            
                   <div class='buybox'>
               <div class='buybutton'>
                              
               <a title="Choisir et demander un devis" href="/formulaire.html" class="zoombox"><img style="border:0px;" src="bouton.png" onmouseover="this.src='bouton_over.png'" onmouseout="this.src='bouton.png'" title="Choisir et demander un devis" /></a>
<script type="text/javascript">
img=new Image();
img.src= "bouton_over.png";
</script>
            </div>
          </div>
        </div>
        
        <div class="design_box">
               <div id="designs">
            
            <a id="link_photo2" onmouseout="$j('#photo2').attr('src', '/photo2.png');$j('#link_photo2').css('background-color', '#fff');" onmouseover="$j('#photo2').attr('src', '/photo2_over.png');$j('#photo2').css('background-color', 'rgba(0, 0, 0, 0)');" title="Photo2">
                <img alt="Photo2" class="mini_pic" id="photo2" src="/photo2.png" width="211" style="background-color:#fff" />
            </a>
          </div>
          <div id="info_photo">
            <span id="name"><a href="/photo2.png" title="Photo 2">Photo 2</a></span><br/>
          </div>

            
                   <div class='buybox'>
               <div class='buybutton'>
                              
               <a title="Choisir et demander un devis" href="/formulaire.html" class="zoombox"><img style="border:0px;" src="bouton.png" onmouseover="this.src='bouton_over.png'" onmouseout="this.src='bouton.png'" title="Choisir et demander un devis" /></a>
<script type="text/javascript">
img=new Image();
img.src= "bouton_over.png";
</script>
            </div>
          </div>
        </div>
        
        <div class="design_box">
               <div id="designs">
            
            <a id="link_photo3" onmouseout="$j('#photo3').attr('src', '/photo1.png');$j('#link_photo3').css('background-color', '#fff');" onmouseover="$j('#photo3').attr('src', '/photo3_over.png');$j('#photo1').css('background-color', 'rgba(0, 0, 0, 0)');" title="Photo3">
                <img alt="Photo3" class="mini_pic" id="photo3" src="/photo3.png" width="211" style="background-color:#fff" />
            </a>
          </div>
          <div id="info_photo">
            <span id="name"><a href="/photo3.png" title="Photo 3">Photo 3</a></span><br/>
          </div>

            
                   <div class='buybox'>
               <div class='buybutton'>
                              
               <a title="Choisir et demander un devis" href="/formulaire.html" class="zoombox"><img style="border:0px;" src="bouton.png" onmouseover="this.src='bouton_over.png'" onmouseout="this.src='bouton.png'" title="Choisir et demander un devis" /></a>
<script type="text/javascript">
img=new Image();
img.src= "bouton_over.png";
</script>
            </div>
          </div>
        </div>
        
ETC 27 photos en tout par page




Bonne fin d'après-midi =)
A voir également:

1 réponse

En effet ce n'est pas du côté du client ou de html que vous pouvez faire ça.

Votre programme marche déjà sans pagination? Ce serait une bonne base.

Donc en gros, il me faudrait ce code php et des précisions sur le SQL...

La pagination comme vous dites ce sont les régions répétées.
Pour faire simple: Vous voulez 10 résultats/page il vous faut plusieurs variables pour pouvoir afficher chaque page:

Le nombre de résultat total, le nombre de résultat par page(10 dans notre cas mais vous avez probablement déjà vu un site avec:"AFFICHER 'n' résultats par page 'n' correspond au nombre de résultats à afficher, ça peut permettre plus de souplesse pour l'utilisateur d'y penser au début).
Le nombre de pages est obtenu par n/total donc ce n'est pas une variable mais il sert lorsque qu'il n'y a plus de page suivante (page des derniers résultats) où qu'il n'y a pas de résultat précédent(1ère page) auquel cas il faut faire un boucle conditionnelle(IF) pour afficher ou non les boutons pages suivante/précédente.

Ces boutons sont des formulaires PHP en GET ou POST(je conseille GET dans un 1er temps).


Pour le SQL, c'est à dire la requête il vous suffit de mettre l'instruction LIMIT en utilisant les valeurs, vous pouvez faire un ORDER BY pour avoir une cohérence dans l'affichage(alphabétique, par date etc...suivant la structure de vos tables).

exemple de requête avec LIMIT:

SELECT * FROM table WHERE <condition> LIMIT 20,30

donneras les résultats 20 à 30 correpsondant à la clause WHERE(les résultats sont classés dans l'ordre d'insertion).

Avec un ORDER BY

SELECT * FROM table WHERE <condition> LIMIT 20,30 ORDER BY date

Même chose mais les résultats sont classés de 1 à l'infini sur le champ date de la table concerné(s'il existe).


Donc pour avoir vos régions répétées il vous faut établir la requête, le critère WHERE(qui est facultatif mais bon selon la structure de vos tables il peut y avoir des tris à faire) et remplacer 20,30 de mon exemple par les variables PHP envoyées par le bouton formulaire et correspondante au résultat de l'affichage précédent et suivant:

Pour le cas de la page suivante:

SELECT * FROM table WHERE <condition>
LIMIT [dernière image de la page précédente]+1,[dernière image de la page précédente]+11

a contrario page précédente

SELECT * FROM table WHERE <condition>
LIMIT [première image de la page précédente]-11,[première image de la page précédente]-1

[image]+1 ou [image]+11 ou [image]-11 etc... sont bien entendus des variables php.


Bref voici pour le principe, en farfouillant le web (google est votre ami) vous aurez certainement un exemple et cours concret là dessus.

edit: région répété porte bien son nom, puisque que c'est l'intervalle de la zone sur laquelle porte votre requête. Sur 100 résultats vous aurez 10 régions répétés si vous voulez un intervalle de 10, l'affichage n'est qu'un détail annexe puisque c'est toujours le même, seul va changer la région répétée qui fournit le résultat à afficher.
Vous devez comprendre à présent toute la puissance des pages web dynamique, tout fonctionne de façon identique en web dynamique:
une seule page HTML/CSS permet d'afficher une infinité de résultat, avec les régions répétées c'est un peu contraignant parce qu'il y a de l'événementiel à la base: l'utilisateur sélectionne la page précédente/suivante/page/numéro sur total des pages , éventuellement le nombre de résultats qu'il affiche par page(remplacez +11 de mon exemple par 'n'+1 ) et ceci pour des années avec un code php et une base adéquate(la conception/structure importante, plus que le langage)
0
Voici la partie de mon code actuel pour la galerie photo, page « toutes catégories » qui nous intéresse ici:

Rien à voir avec ce que vous voulez faire. Il vous faut des formulaires avec champ hidden(un bouton quoi) pour la partie navigation et php qui va construire la requête SQL à envoyer à la base.
Donc oubliez javascript , html et css(l'affichage) et concentrez vous sur les données(obtenir l'intervalle d'une page ce sera toujours le même pour toute les page puisque c'est une variable).
0