> Tous les forums > Forum des Webmasters
 Aide pour une pagination (SQL/PHP)
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
frugi
  Posté le 22/08/2012 @ 16:41 
Aller en bas de la page 
Nouvelle astucienne

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 =)

Publicité
Dreamer
 Posté le 22/08/2012 à 17:11 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Salut

Pourquoi ne pas utiliser quelque chose qui existe déjà, dans le style de PiWiGo par exemple....

frugi
 Posté le 22/08/2012 à 17:22 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Nouvelle astucienne

@Dreamer, je vais essayer avec Piwigo!
Merci =)
Je vous tiens au courant

Dreamer
 Posté le 22/08/2012 à 18:34 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

frugi a écrit :

@Dreamer, je vais essayer avec Piwigo!
Merci =)
Je vous tiens au courant

Je penses que cela devrait t'aider avec ce que tu demandes ......Perso, je l'utilise pour mes photos et mes musiques !!

Page : [1] 
Page 1 sur 1

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
72,99 €Kit de 16 Go (2 x 8 Go) de mémoire DDR4 Crucial Ballistix 3200 MHz à 72,99 €
Valable jusqu'au 20 Octobre

Amazon fait une promotion sur le kit de 16 Go (2x8 Go) de mémoire DDR4 Crucial Ballistix 3200 MT/s CL16 qui passe à 72,99 € alors qu'on le trouve ailleurs à partir de 100 €. 


> Voir l'offre
18,37 €Clé USB 3.0 et Micro USB Sandisk Ultra OTG 128 Go à 18,37 € livrée
Valable jusqu'au 20 Octobre

Amazon Espagne fait une promotion la nouvelle version de la clé USB 3.0 SanDisk Dual Drive 128 Go qui passe à 13,87 €. Comptez 4,50 € pour la livraison en France soit un total de 18,37 € livrée. La particularité de cette clé USB réside dans le fait qu'elle dispose à la fois d'un connecteur USB pour la brancher sur votre ordinateur ou votre TV, mais également d'un connecteur micro USB pour la brancher sur votre smartphone ou votre tablette. Compatible USB 3.0 (et 2.0), cette clé USB offre des débits jusqu'à 150 Mo/s. 


> Voir l'offre
87,91 €Carte mère Asus ROG Strix B450-F Gaming II (socket AM4) à 87,91 € livrée
Valable jusqu'au 20 Octobre

Amazon Allemagne fait une promotion sur la carte mère Asus ROG Strix B450-F Gaming II à 80,57 €. Comptez 7,04 € pour la livraison en France soit un total de 87,61 € au lieu de 120 €. La carte mère ASUS STRIX B450-F GAMING II est idéale pour concevoir un PC puissant et à l'aise dans toutes les situations : multimédia, bureautique et jeux vidéo, vous pourrez assembler la configuration de vos rêves avec un AMD Ryzen sur socket AM4.


> Voir l'offre

Sujets relatifs
Aide pour Gimp !!
besoin d'aide pour Kompozer
Aide pour finaliser le transfert d'un hébergeur gratuit vers 1&1, svp
Aide pour modifications dans le code d'un blog
aide pour menu déroulant
Besoin d'aide pour achat portable usage pro
Aide pour du CSS
Aide pour faire un 360 degré images (animation)
Aide pour galerie d'images
Aide pour creation d'un blog pour classe de neige
Plus de sujets relatifs à Aide pour une pagination (SQL/PHP)
 > Tous les forums > Forum Forum des Webmasters