Realizzare una galleria di immagini in PHP (Parte III)

Con questa terza, ed ultima, parte del tutorial andiamo a chiudere la serie dedicata alla realizzazione di una galleria di immagini in PHP, nel primo appuntamento abbiamo visto come impostare i database e le tabelle e il file di configurazione, nel secondo capitolo abbiamo affrontato il file upload.php che permette agli utenti di caricare le proprie immagini per creare la galleria e ,infine, In questo ultimo appuntamento andremo a vedere come creare il file gallery.php per la visualizzione della galleria di immagini e il file visual.php.

Per rendere l’output del file gallery.php più elegante e facile da navigare incolonno le immagini per 3 foto.
Su ogni immagine ci sarà un link che rimanderà alla pagina che mostrerà l’immagine cliccata e che permetterà, tramite appositi link, di visualizzare le altre immagini (visual.php) La parte che si occupa di questo compito è rappresentata dalle seguenti linee di codice:

<?php
@include 'config_ph.php';
@require 'function.php';
 
// apro la tabella che ci servirà per l'impaginazione
echo "
";
 
// recupero i dati dal DB
$query = "SELECT * FROM images WHERE id_utente='$_SESSION[user_id]' ORDER By Id DESC";
$res = mysql_query($query) or die (mysql_error());
 
// numero delle immagini presenti nel DB
$n_img = mysql_num_rows($res);
 
// verifico che il DB ospiti almeno un'immagine
if($n_img >= 1 ){
  // stabilisco il numero di riche e colonne della nostra tabella per l'impagninazione
  $colonne = 3;
  $righe=0;
 
  // ciclo tutti i record recuperati attraverso la nostra query
  while ($f=@mysql_fetch_array($res)){
    $righe++;
    $id = $f['Id'];
    $titolo = stripslashes($f['Titolo']);
    $nome = stripslashes($f['Nome']);
 
    // stampo la cella contenente l'immagine
    echo "
 
n";
 
    // quando il numero di righe equivale al valore impostato nella variabile $righe
    // procedo a chiudere la linea e ad azzerare il valore di $righe
    if ($righe == $colonne){
      echo "
n";
      $righe = 0;
    }
  }
}else{
  // stampo un messaggio se il DB è vuoto
  echo "Nessuna immagine inserita.";
}
@mysql_close($cn);
echo "
<table>
<tbody>
<tr>
<td width="33%">n";
    echo $titolo . "
";
    echo "<a href="visual.php?id=">";
    echo "<img border="0" alt="" /></a>";
    echo "
" . $descrizione;
    echo "</td>
</tr>
</tbody>
</table>
";
?>

Oltre all’inclusione del solito file di config, creo una tabella per impaginare le miniature delle foto.

Recupero dalla tabella delle immagini del database le informazioni relative alle immagini archiviate quali, ‘Nome’ e ‘Titolo’.

Conto il numero delle immagini in modo tale da mostrare un messaggio nel caso in cui non ci siano immagini, mentre se ci sono immagini procedo mostrando le foto.

Dalla query recupero le informazioni delle foto e, ciclando su ogni record, procedo con l’incastonare ogni foto in una casella della tabella in cui ogni riga è composta da 3 colonne avendo, dunque, 3 foto per ogni riga della tabella.

Su ogni immagine, come dicevo, ho posto un link che mi rimanda alla pagina visual.php dove verrà visualizzata la singola foto.

Nel link oltre a essere richiamato il file, viene, anche passato l’id della foto quale record della tabella delle immagini.

L’ultimo file mostra ciascuna foto nelle dimensioni in cui è stata salvata permettendo di scorrere anche le altre immagini della galleria, il codice di questa pagina che chiamerò visual.php è il seguente:

<?php
if(isset($_GET['id'])){
  @include 'config.php';
 
  // apro la tabella
  echo "
<table>
<tbody>
<tr>
<td>
";
 
  // recupero dalla querystring l'ID dell'immagine da visualizzare
  $id_vis = $_GET['id'];
 
  // verifico la presenza dell'immagine sul DB
  $query = "SELECT * FROM images WHERE Id = '$id_vis'";
  $res = @mysql_query($query) or die (mysql_error());
  $n_img = @mysql_num_rows($res);
 
  // se l'id specificato esiste procedo con la visualizzazione
  if($n_img == 1 )
  {
    // recupero i dati dell'immagine selezionata
    $f = @mysql_fetch_array($res) or die (mysql_error());
    $titolo = stripslashes($f['Titolo']);
    $nome = stripslashes($f['Nome']);
    $descrizione = stripslashes($f['Descrizione']);
 
    // stampo a video l'imagine e le relative informazioni
    echo $titolo . "
";
    echo "<img border="0" alt="" />";
    echo "
" . $descrizione . "
 
";
 
    // estraggo dal DB il primo e l'ultimo ID
    $sql_count = @mysql_query("SELECT MIN(Id) AS min, MAX(Id) AS max FROM images") or die (mysql_error());
    $id_max = @mysql_fetch_array($sql_count) or die (mysql_error());
    $min = $id_max['min'];
    $max = $id_max['max'];
 
    // calcolo e stampo il link per l'immagine precedente
    if($_GET['id'] != $min){
      $query_prev = @mysql_query("SELECT Id FROM images WHERE Id < '$id_vis' ORDER BY Id DESC LIMIT 1") or die (mysql_error());
      $f_prev = @mysql_fetch_array($query_prev)or die (mysql_error());
      $id_prev = $f_prev['Id'];
      echo "<a href="visual.php?id=$id_prev"><< Precedente</a>";
    }
 
    // calcolo e stampo il link per l'immagine successiva
    if($_GET['id']  '$id_vis' ORDER BY Id ASC LIMIT 1") or die (mysql_error());
      $f_next = @mysql_fetch_array($query_next)or die (mysql_error());
      $id_next = $f_next['Id'];
      echo "<a href="visual.php?id=$id_next">Successiva >></a>";
    }
  }else{
    // stampo un errore se l'immagine non esiste
    echo "Nessuna immagine inserita.";
  }
  // chiudo la tabella
  echo "</td>
</tr>
</tbody>
</table>
";
}
?>

Anche qui, oltre all’inclusione del file di config, creo una tabella per inscatolare l’immagine.

Tramite l’id passato via URL vado a verificare (come ulteriore controllo) se l’immagine è effettivamente presente nel database; se il controllo dà esito positivo procedo con la visualizzazione dell’immagine e delle informazioni aggiuntive memorizzate quali il titolo, il nome del file.

Ora devo creare il sistema per visualizzare l’immagine successiva e precedente a quella visualizzata e per questo uso le informazioni della tabella delle immagini prelevando dalla tabella l’id più piccolo e l’id più grande dei record delle foto archiviate nella tabella.

Creo ancora il link all’immagine precedente, e, in maniera analoga, procedo per l’immagine successiva, con il codice:

// calcolo e stampo il link per l'immagine precedente
    if($_GET['id'] != $min){
      $query_prev = @mysql_query("SELECT Id FROM images WHERE Id < '$id_vis' ORDER BY Id DESC LIMIT 1") or die (mysql_error());
      $f_prev = @mysql_fetch_array($query_prev)or die (mysql_error());
      $id_prev = $f_prev['Id'];
      echo "<a href="visual.php?id=$id_prev">&lt;&lt; Precedente</a>";
    }

Per inserire il link all’immagine precedente confronto se l’id della immagine richiamata dalla pagina gallery.php coincide con l’id più piccolo.

In caso di esito negativo creo il link all’immagine precedente prelevando l’id della foto immediatamente precedente a quello della foto visualizzata; nel caso in cui, dal confronto, si abbia un esito positivo, ciò significa che quella è la prima immagine che, quindi, non ha foto che la precedono. Con un meccanismo simile creo il link alla immagine successiva.

Conclusioni

In questi 3 articoli vi ho spiegato come costruire una galleria di immagini che includa la creazione di miniature, salvataggio delle foto, visualizzazione delle immagini singole facendo riferimento alla visualizzazione della immagine successiva e a quella dell’immagine precedente.

Si tratta di un sistema un pò complicato ma abbastanza efficace e che può essere facilmente integrato nella sezione immagini/gallery del proprio sito permettendo agli utenti di pubblicare/condividere le proprie foto.

Per la visualizzazione delle foto ho usato la visualizzazione della foto in una pagina HTML, si può anche usare un sistema più raffinato (ma che trascende dallo scopo di questi articoli) ossia usare script Jquery/Ajax tipo light box.

Condividi questo articolo:

• Tweet

Info sull' autore:

Laureato in matematica con la passione per internet. Ho fatto una esperienza abbastanza interessante in questo ruolo con un assegno di ricerca. Ho avuto modo di approfondire e utilizzare al meglio le potenzialità del linguaggio PHP e dei database MYSQL mirati alla gestione e pubblicazioni di dati ambientali.
Leggi gli altri articoli di PeppePegasus