Galleria di immagini in PHP e MySQL

In altri articoli ho già parlato di come fare l'upload di file, di come cancellarli, e di come visualizzarli.

Non ho mai tenuto in considerazione però la possibilità di affiancarci un db per l'ordinamento, eventuali didascalie, ecc.

Vediamo quindi come creare una galleria di immagini che ci permetterà di salvare il nome dei files e l'ordinamento su un db MySQL.

In questa prima parte vedremo la creazione del db e l'upload.

Prima di tutto dobbiamo creare un db e una tabella; la tabella che ci serve l'ho chiamata gallery e ha questa struttura:

• id int auto increment primary key
• nome varchar(100)
• ordine int

Tutti sono not null.

Cominciamo con la parte PHP; considerate che io uso PDO sul quale potete vedere questi articoli:

• connessione
• insert

Comunque potete usare anche le classiche funzioni mysql/mysqli.

Vi posto la mia classe per la connessione, così vi fate un'idea:

<?php

//config.php

class Config {

private $pdo;
private static $instance;

private function __construct() {
try {
$this->pdo = new PDO('mysql:host=host;dbname=db', "user", "pass", array(
PDO::ATTR_PERSISTENT => TRUE
));
} catch (PDOException $e) {
print "Error!: " . $e->getMessage() . "<br/>";
die();
}
}

public static function getInstance() {
if (!isset(self::$instance)) {
$c = __CLASS__;
self::$instance = new $c;
}
return self::$instance;
}

public function __clone() {
trigger_error('Clone is not allowed.', E_USER_ERROR);
}

public function getPdo() {
return $this->pdo;
}

...............

}

Non ve la sto a spiegare; comunque è una classe Singleton che dovete istanziare in questa maniera:

include_once 'config.php';
$config = Config::getInstance();

La funzione di inserimento è questa qua:

function insertImg($nome, $ordine) {
global $config;
try {
$prepare = $config->getPdo()->prepare("INSERT gallery (nome, ordine) VALUES (?,?)");
$prepare->execute(array(
$nome,
$ordine
));
} catch (Exception $e) {
die($e->getMessage());
}
}

Nella pagina avremo poi una cosa del genere:

<?php

if ($_SERVER['REQUEST_METHOD'] == "POST" && isset($_POST['upload_img'])) {
$maxSize = 512000; //byte => 550KB
$acceptType = array(
'jpeg' => 'image/jpeg',
'jpg' => 'image/jpeg',
'png' => 'image/png'
);
$cartella = "../gallery/";

for ($i = 0; $i < count($_FILES['file']['name']); $i++) {
if ($_FILES['file']['name'][$i] != "") {
$nome_upload = uniqid('gallery_') . strrchr($_FILES['file']['name'][$i], '.');
$destinazione = $cartella . $nome_upload;
if ($_FILES['file']['size'][$i] <= $maxSize) {
if (in_array($_FILES['file']['type'][$i], $acceptType)) {
if (move_uploaded_file($_FILES['file']['tmp_name'][$i], $destinazione)) {
$_SESSION['lastimg']++;
insertImg($nome_upload, $_SESSION['lastimg']);
echo "File " . $i . " caricato<br/>";
} else {
echo "Errore nell'upload<br/>";
}
} else {
echo 'Tipo file non valido<br/>';
}
} else {
echo 'File troppo grande<br/>';
}
} elseif ($_POST['upload_img']) {
echo 'Non ci sono file da inserire<br/>';
}
}
}
?>

<form action="" method="post" enctype="multipart/form-data" name="form_upload">
<table>
<tr>
<td>
<input type="file" name="file[]" /> <br />
<input type="file" name="file[]" /> <br />
<input type="file" name="file[]" /> <br />
<input type="file" name="file[]" /> <br />
<input type="file" name="file[]" /> <br />
</td>
</tr>
<tr>
<td>
<input type="submit" value="Upload" name="upload_img" />
</td>
</tr>
</table>
</form>

$cartella è la directory di upload.

$nome_upload è il nome che verrà assegnato a ciascun file; ho usato uniqid con un prefisso.

$destinazione invece è la destinazione finale dei file.

Ci sono tutta una serie di controlli; se tutti vanno a buon fine e i file vengono spostati nella directory accadono due cose:

• la variabile $_SESSION['lastimg'] viene incrementata ad ogni ciclo
• viene richiamata la funzione di inserimento passando il nome del file e l'ordinamento ($_SESSION['lastimg'])

Una nota sulla variabile $_SESSION['lastimg']: quando eseguo il login effettuo una query e mi salvo l'ultimo numero del campo ordine in queta variabile; in questo modo l'ordinamento non viene sovrascritto, ma riparte dall'ultimo numero.

Tutto ciò perchè sennò succederebbe questo: supponiamo un upload di 3 files; l'ordinamento sarebbe 1 2 3.

Se poi faccio di nuovo un upload riapartendo da capo verrebbe di nuovo dato l'ordine 1 2 3.

Ci ritroveremo così con più files con lo stesso ordine.

Così facendo invece la variabile $_SESSION['lastimg'] avrà come valore sempre il numero più grande del campo ordine e non sarà duplicato.

(Spero di essermi spiegato).

A questo punto per visualizzarle avremo una funzione che esegue la query:

function showImg() {
global $config;
try {
$result = $config->getPdo()->query("SELECT * FROM gallery ORDER BY ordine");
return $result;
} catch (Exception $e) {
die($e->getMessage());
}
}

E poi nella pagina:

<a href="javascript:selectAll();">Seleziona tutto</a>
<form action="" method="post" enctype="multipart/form-data" name="modulo" onsubmit="return deleteImages();">
<ul id="gallery">
<?php
$dirname = "../gallery/";
foreach (showImg() as $file) {
echo '<li id="photo_' . $file['id'] . '"><input type="checkbox" name="check[]" value="' . $dirname . $file['nome'] . '" /><img src="' . $dirname . $file['nome'] . '" width="100" heigth="100" alt="" /></li>';
}
?>
</ul>
<input type="submit" value="Elimina" name="elimina_img" />
</form>

Badate che sta tutto in un form perchè poi ci servirà per cambiare l'ordine (parte 2).

Questo invece:

<a href="javascript:selectAll();">Seleziona tutto</a>

richiama una funzione JS per selezionare tutte le checkbox; in giro trovate quanti articoli volete, appena avrò tempo ne scriverò uno anche io.

Alla secona parte, ciauz!