Mattepuffo.com

Questo articolo è la continuzaione "naturale" di quest'altro.

In quell'articolo avevao messo su il db, fatto l'upload delle immagini e le abbiamo visualizzate.

Qui useremo jQuery, jQuery UI e AJAX per cambiare l'ordine delle immagini semplicemente trascinandole.

Cominciamo proprio dalla visualizzazione:

<form action="" method="post" enctype="multipart/form-data" name="modulo">
 <ul id="gallery">
 <?php
 $dirname = "../gallery/";
 foreach (showImg() as $file) {
 echo '<li id="foto_' . $file['id'] . '"><img src="' . $dirname . $file['nome'] . '" width="100"  heigth="100" alt="" /></li>';
 }
 ?>
 </ul>
</form>

showImg() è la funzione che esegue la query.

Come vedete le foto le vediamo in una lista (<li>).

Come id gli impostiamo un suffisso (foto) più l'id dell'immagine preso dal campo del db.

Come vedremo tra poco questo è fondamentale.

A questo punto scaricate jQuery e jQuery UI e includete tutto nella pagina:

<link rel="stylesheet" href="/site/jquery-ui-1.8.14.custom.css" type="text/css" />
<script type="text/javascript" src="/site/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/site/jquery-ui-1.8.14.custom.min.js"></script>

Sempre nell'head della pagina mettiamo anche questo:

<script type="text/javascript">
 $(function() {
 $("#gallery").sortable({ // id di <ul>
 placeholder: 'ui-state-highlight',
 update: function(e, ui) {
 var order = $('#gallery').sortable('serialize'); // serializiamo i vari <li>
 $.post('', order); // chiamata AJAX post
 }
 });
 });
 </script>

Sulla galleria attiviamo sortable per fare in modo che le varie voci della lista siano trascinabili col mouse.

Inoltre la serializiamo.

Dopo di che facciamo una chiamata AJAX post passando la galleria serializzata.

La serializzazione ci serve per mettere in serie i vari <li> che poi doabbiamo passare al db tramite AJAX.

A questo punto ci manca solo una piccola parte, quella relativa al db; in testata di pagina avremo una cosa del genere:

 
if ($_SERVER['REQUEST_METHOD'] == "POST" && isset($_POST['foto'])) {
 foreach ($_POST['foto'] as $order => $id) {
 updateImg($order, $id);
 }
}

In pratica la chiamata AJAX fa il submit del form, e qui controlliamo ogni <li> (che hanno id=foto) e passiamo i valori alla funzione updateImg($order, $id).

Queste funzione (PDO, ne ho parlato già in altri articoli) richiede due parametri: l'id e l'ordine:

function updateImg($ord, $id) {
 global $config;
 try {
 $prepare = $config->getPdo()->prepare("UPDATE gallery SET ordine=? WHERE id=?");
 $prepare->execute(array(
 $ord,
 $id
 ));
 } catch (Exception $e) {
 die($e->getMessage());
 }
}

A questo puntio, se non mi sono perso niente per strada, dovrebbe funzionare tutto.

La modifica avviene in tempo reale; apparentemente non c'è un vero submit del form, ma l'effetto deriva dall'uso di AJAX.

Provate a modificare l'ordine e poi ricaricare la pagina; se l'ordine rimane uguale allora tutto funziona.

Ovviamente ricordate di leggere la prima parte perchè mette le basi per il tutto.

Ciauz!