18 Novembre 2017 à 14:40:30

Auteur Sujet: Aide pour une pagination (SQL/PHP)  (Lu 1024 fois)

frugi

  • Nouveau membre
  • *
  • Messages: 1
  • Points gagnés: 0
    • Voir le profil
Aide pour une pagination (SQL/PHP)
« le: 22 Août 2012 à 16:39:24 »
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&eacute;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 =)