jQuery Mobile: La gestione avanzata delle liste
Continuiamo la serie di tutorial dedicati a jQuery Mobile con questo articolo nel quale svilupperemo una piccola applicazione con tanto di database e chiamate asincrone. Lo scenario sarà l’ottimizzazione per dispositivi mobili della pagina degli autori di YIW. Il risultato finale é visualizzabile su questa pagina di esempio (per semplificazione ho considerato solo tre autori).
Ora mettiamoci al lavoro.
Creazione del database
Iniziamo con il creare un nuovo database che chiameremo mobile ed al suo interno la tabella autori che comprenderà i seguenti campi:
- id
- nome
- descrizione
- immagine
- sito
- ruolo
CREATE TABLE IF NOT EXISTS `autori` ( `id` int(2) unsigned NOT NULL AUTO_INCREMENT, `nome` varchar(50) NOT NULL, `descrizione` text NOT NULL, `immagine` varchar(50) NOT NULL, `sito` varchar(50) NOT NULL, `ruolo` varchar(60) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ;
Popoliamo la tabella autori con i seguenti dati:
INSERT INTO `autori` (`id`, `nome`, `descrizione`, `immagine`, `sito`, `ruolo`) VALUES (1, 'Maurizio Tarchini', 'Maurizio è sposato con la triade PHP - MySql - Apache e, non pago, ha un''amante chiamata jQuery. Ha un blog dove cerca di descrivere nei minimi particolari sia la moglie che l''amante. La sua vera specialità è la realizzazione di gestionali complessi anche se non rifiuta mai un sito web. ', 'maurizio.jpg', 'http://www.mtxweb.ch/php_learn', 'Web Developer'), (2, 'Sara Presenti', 'Web designer, lavora nel campo della grafica e dello sviluppo web da sei anni e al momento oltre a collaborare con una web agency gestisce con successo la sua attività di freelance sotto il nome di mascara design. Come molti freelance si è abituata a gestire più ruoli, spaziando dalla grafica cartacea allo sviluppo del codice xhtml e css; nonostante questo la sua passione rimane, sempre e comunque, la grafica per il web.', 'sara.jpg', 'www.mascaradesign.it', 'Web Designer'), (3, 'Nando Pappalardo', 'Nando è amministratore di Edi Group, società di Comunicazione e Formazione fondata nel 2005. È inoltre Trainer Microsoft e docente di Webdesign con anni di esperienza, anche in qualità di progettista, in corsi di Formazione Professionale regionali e privati. ', 'nando.jpg', 'https://www.yourinspirationweb.com', 'Imprenditore e Trainer');
Creare il file di connessione
Creiamo ora il file db_config.php che conterrà i parametri di connessione al nostro database:
define("HOST", "localhost");
define("DB", "mobile");
define("DB_USER", "root");
define("DB_PASSWORD", “**********”);
La classe per la gestione dell’applicazione
Creiamo un nuovo file denominato authorList.class.php. La classe che svilupperemo in questo file dovrà fornire i metodi per estrarre la lista degli autori dal database e mostrare i dettagli di ogni singolo autore.
Iniziamo ad includere il file con i parametri di connessione al database e a dichiarare la classe authorList:
include_once 'db_config.php';
class authorList
{
private $conn;
public $detalis;
Come vedi abbiamo anche dichiarato due proprietà; una privata (conn) che conterrà la risorsa di connessione ed una pubblica (details) che conterrà l’oggetto con i dettagli dell’autore.
Ora dichiareremo il metodo per la connessione al database che invocheremo nel costruttore di classe, in questo modo:
public function __construct()
{
$this->dbConnect();
}
private function dbConnect()
{
$this->conn = mysql_connect(HOST,DB_USER,DB_PASSWORD) OR die("Impossibile connettersi al database");
mysql_select_db(DB,$this->conn);
}
A questo punto lasciamo in sospeso questo file ed iniziamo a sviluppare la pagina principale.
Sviluppare la pagina principale
Creiamo un nuovo file e chiamiamolo autori.php. Iniziamo adesso con l’includere le librerie necessarie:
<!DOCTYPE html>
<html>
<head>
<title>jQueryMoblie</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
</body>
</html>
Nel body inseriamo l’header della pagina:
<div data-role="page" id="lista">
<div data-role="header">
<h1>Lista Autori</h1>
</div>
Ora dovremo inserire il contenuto che nella fattispecie é la lista degli autori. Andremo ovviamente a leggere i dati che ci servono dal database, ma prima vediamo quali sono le convenzioni del markup per ottenere una lista come quella che vogliamo (ovvero con l’immagine dell’autore).
Abbiamo visto nell’articolo precedente che le liste devono avere l’attributo data-role=”listview”.
Anche nel nostro caso dovremo procedere in questo modo; per quello che riguarda l’immagine basterà inserirla nell’elemento di lista. jQuery Mobile provvederà a ridimensionarla e a posizionarla correttamente.
Vediamo un esempio di come va dichiarata la nostra lista (lo vediamo in modo statico, poi svilupperemo il metodo che la produrrà in modo dinamico).
<div data-role="content">
<ul data-role="listview" data-theme="d">
<li><a href="#" id="1"><img src="maurizio.jpg" /><h3>Maurizio Tarchini</h3><p>Web Developer</p></a></li>
</ul>
</div>
Otterremo questo risultato:
Chiaramente a noi serve che la lista sia costruita in base alle informazioni contenute nel database. E’ giunto il momento di tornare sul file authorList.class.php.
Sviluppare il metodo per la visualizzazione della lista autori
Il metodo showList() dovrà semplicemente leggere le informazioni di tutti gli autori e creare dinamicamente la lista con il formato che abbiamo visto precedentemente.
public function showList()
{
$sql = "SELECT id,nome,immagine,ruolo FROM autori ORDER BY nome";
$res = mysql_query($sql,$this->conn);
while($row = mysql_fetch_object($res))
{
echo '<li><a href="#" id="' . $row->id . '" class="item"><img src="' . $row->immagine . '" /><h3>' . $row->nome . '</h3><p>' . $row->ruolo . '</p></a></li>';
}
}
Nota una cosa importante: ad ogni link assegniamo un id che praticamente corrisponde all’id dell’autore. Questo servirà in seguito per avere un riferimento univoco da inviare al server nella chiamata ajax.
Già che siamo su questo file, sviluppiamo anche l’altro metodo, quello che fornirà i dettagli dell’autore scelto.
public function showAuthor()
{
$id = (int)$_GET['id'];
$sql = "SELECT * FROM autori WHERE id=$id";
$res = mysql_query($sql,$this->conn);
$this->detalis = mysql_fetch_object($res);
}
Come vedi selezioniamo tutti i dati dell’autore il cui id é uguale all’id passato nella variabile GET. In seguito inseriamo l’oggetto risultante nella proprietà details.
Alla fine del documento istanziamo la classe, in questo modo:
$author = new authorList();
Ed ecco la classe completa
include_once 'db_config.php';
class authorList
{
private $conn;
public $detalis;
public function __construct()
{
$this->dbConnect();
}
private function dbConnect()
{
$this->conn = mysql_connect(HOST,DB_USER,DB_PASSWORD) OR die("Impossibile connettersi al database");
mysql_select_db(DB,$this->conn);
}
public function showList()
{
$sql = "SELECT id,nome,immagine,ruolo FROM autori ORDER BY nome";
$res = mysql_query($sql,$this->conn);
while($row = mysql_fetch_object($res))
{
echo '<li><a href="#" id="' . $row->id . '" class="item"><img src="' . $row->immagine . '" /><h3>' . $row->nome . '</h3><p>' . $row->ruolo . '</p></a></li>';
}
}
public function showAuthor()
{
$id = (int)$_GET['id'];
$sql = "SELECT * FROM autori WHERE id=$id";
$res = mysql_query($sql,$this->conn);
$this->detalis = mysql_fetch_object($res);
}
}
$author = new authorList();
Ora andiamo ad inserire la lista dinamica nella pagina principale (autori.php) in questo modo:
<div data-role="content">
<ul data-role="listview" data-theme="d">
<?php
include_once 'authorList.class.php';
$author->showList();
?>
</ul>
</div>
A questo punto la pagina principale dovrebbe essere funzionante.
Sviluppare la pagina di supporto
Sviluppiamo ora la pagina di supporto (result.php), quella alla quale sarà indirizzata la richiesta ajax e che restituirà i dettagli dell’autore scelto.
Iniziamo con l’includere la classe authorList ed invocare il metodo showAuthor().
<?php include_once 'authorList.class.php'; $author->showAuthor(); ?>
In seguito l’header della pagina
<div data-role="page" id="dettaglio">
<div data-role="header">
<h1>AUTORE</h1>
</div>
E infine il contenuto della pagina che creeremo dinamicamente grazie all’oggetto details che contiene tutte le informazioni necessarie.
<div data-role="content">
<h1><?php echo $author->detalis->nome; ?></h1>
<p><img src="<?php echo $author->detalis->immagine; ?>" /></p>
<p><?php echo $author->detalis->descrizione; ?></p>
<p>Sito web di <a href="<?php echo $author->detalis->sito; ?>"><?php echo $author->detalis->nome; ?></a></p>
</div>
Ecco la pagina result.php
<?php
include_once 'authorList.class.php';
$author->showAuthor();
?>
<div data-role="page" id="dettaglio">
<div data-role="header">
<h1>AUTORE</h1>
</div>
<div data-role="content">
<h1><?php echo $author->detalis->nome; ?></h1>
<p><img src="<?php echo $author->detalis->immagine; ?>" /></p>
<p><?php echo $author->detalis->descrizione; ?></p>
<p>Sito web di <a href="<?php echo $author->detalis->sito; ?>"><?php echo $author->detalis->nome; ?></a></p>
</div>
</div>
Implementare la chiamata ajax
Ora non ci resta che far arrivare alla pagina di dettaglio result.php l’id dell’autore che é stato scelto (all’evento click); iniziamo a rilevarlo.
$(document).ready(function(){
$('a.item').click(function(){
var id = $(this).attr('id');
});
});
Ora che abbiamo l’id dell’autore che é stato scelto possiamo eseguire la chiamata ajax. Lo faremo tramite un metodo specifico di jQuery Mobile ovvero changePage().
Grazie a questo metodo possiamo caricare il contenuto richiesto. jQuery Mobile provvederà ad inserirlo nella pagina utilizzando lo stesso modello che abbiamo visto nel primo tutorial.
Vediamo come implementare questo metodo:
$(document).ready(function(){
$('a.item').click(function(){
var id = $(this).attr('id');
$.mobile.changePage({
url: "result.php",
type: "get",
data: "id="+id
},"slide");
return false;
});
});
Come vedi é piuttosto semplice:
- il primo paramentro é rappresentato da una serie di valori (url, type e data come in una classica chiamata ajax);
- il secondo parametro indica il tipo di transizione; in questo caso é inutile dal momento che slide é la transizione di default.
Ancora un ultimo accorgimento: Traduciamo il bottone di ritorno (back) in italiano.
$.mobile.page.prototype.options.backBtnText = "indietro";
Ed ecco la pagina autori.php completa:
<!DOCTYPE html>
<html>
<head>
<title>jQueryMoblie</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.mobile.page.prototype.options.backBtnText = "indietro";
$('a.item').click(function(){
var id = $(this).attr('id');
$.mobile.changePage({
url: "result.php",
type: "get",
data: "id="+id
},"slide");
return false;
});
});
</script>
</head>
<body>
<div data-role="page" id="lista">
<div data-role="header">
<h1>Lista Autori</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-theme="d">
<?php
include_once 'authorList.class.php';
$author->showList();
?>
</ul>
</div>
</div>
</body>
</html>
jQuery Mobile: Conclusione
In questo tutorial abbiamo visto un’applicazione concreta di jQuery Mobile. Il risultato é certamente interessante é può naturalmente essere personalizzato senza alcun limite estendendo o modificando il foglio di stile.
Un ultimo appunto importante. Avremmo potuto anche fare diversamente. Ad esempio, utilizzando il modello che abbiamo visto nel primo tutorial, avremmo potuto caricare la lista ed i dettagli nello stesso documento e collegarli con un sistema di link interni. Sebbene funzionerebbe benissimo, questo sarebbe un errore. Ottimizzare per i dispositivi mobili significa anche prestare attenzione alla quantità di dati trasferiti, che ovviamente devono essere il meno possibile. La soluzione che abbiamo visto, in questo senso, é la più razionale. I dettagli vengono caricati solo quando é richiesto.
Il prossimo tutorial sarà più semplice ma non meno interessante. Vedremo infatti l’eccellente supporto fornito da jQuery Mobile allo sviluppo di form.
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
32 commenti
Trackback e pingback
Non ci sono trackback e pingback disponibili per questo articolo
Ottimo tutorial, salvato nei preferiti! Grazie!
Grazie a te Alessandro
Ottimo come sempre, una garanzia per gli amanti di PHP, Mysql e Jquery..!!
Grazie grazie, troppo buoni
Jquery Mobile mi piace sempre più e in fondo i soldi spesi per comprare l’aifon 2 anni fa si stanno rivelando ben spesi per fare i test :)
Solo per quello ? :-(
No, anche per tante altre cose, pensa che lo uso per lavoro grazie al supporto al protocollo cisco ipsec e alle applicazioni per telnet e rdp.
Ci ho installato anche l’app per wordpress, il manuale di php, il navigatore e tante apps utili (dropbox,evernote ecc).
Poi ultimamente ho trovato un ipad vecchio modello a poco prezzo e mi sto divertendo con le apps per creare mockup, scrivere codice ecc….
Saranno anche “diavolerie tecnologiche”, ma a volte risultano utili :)
bravo davvero!!! grazie a questo filone “mobile” YIW fa parte dei miei preferiti da un mesetto!!!
Evvvvvai
Ciao Maurizio,
per evitare il notice all’interno di showAuthor io farei:
$id = isset($_GET['id']) ? intval($_GET['id']) : 0;
inoltre suggerirei di prevedere dei default se il mysql_num_rows($res)==0
altrimenti $this->detalis risulta vuoto… con tutto ciò che ne consegue.
PS: sò che tutto ciò centra poco jquery mobile ma era giusto per completezza.
Ciao Oly,
l’unica possibilità per far si che venga sollevato un notice, é quella di accedere direttamente a result.php (che é un opzione non prevista, si tratta di una pagina di supporto che non verrà in alcun modo linkata)
Anche nel secondo caso, se l’autore esiste, se puoi cliccarlo, esistono anche i dettagli.
:-)
ah, comunque non é sbagliato mettere questi controlli
Ciao, davvero interessante il tutorial !
l’ho seguito alla lettera ma al momento di lanciarlo in locale su safari visualizzo la schermata con la barra autori e basta…
Non riesco a capire dov’è il problema e come tentare di farmi aiutare…
Ciao Alessandro.
La pagina di esempio di questo articolo ti funziona?
Ciao Maurizio,
grazie per rispondere così celermente. L’esempio dell’articolo mi funziona correttamente su safari. Ma il mio mini-progetto con il tuo tutorial è in locale su wampserver. L’ho ricontrollato bene e credo che non manchi nulla…
Ci deve essere per forza un errore. Non cambia nulla tra locale e remoto in questo caso.
1. Abilita la visualizzazione degli errori (se non é già abilitata)
2. Controlla il log degli errori di apache
3. Esegui l’applicazione con firebug aperto e vedi se ti dice qualcosa
Grazie al tuo aiuto e al log di apache ho risolto !
Adesso funziona alla meraviglia. C’erano due errori:
1) avevo nominato male un il file authorList.class
2) il mio data base in locale non ha la password, in pratica ho dovuto commentare la riga 7 del file db_config e modificare la authorList.class in mysql_connect(HOST,DB_USER)
naturalmente in remoto reimposterò il tutto con la password.
Grazie e complimenti per il blog, io vi seguo da un anno!
Bene. Ricordati sempre di provare queste tre cose
Qui puoi vedere il risultato online http://tinyurl.com/6axxdsl, mentre qui http://tinyurl.com/63fz23v ho tentato di far caricare la pagina autori.php come link dalla pagina principale di jquery mobile, la pagina autori viene caricata poi però c’è un problema nel caricamento delle singole pagine autore… ho cercato di capire perchè ma effettivamente i miei limiti di programmazione di impediscono tale arduo compito !!
Grazie e complimenti per questo blog…! ho usato questo articolo come spunto per implementare una carta dei vini su IPAD… funziona tutto in modo corretto ma dopo aver visualizzato una lista formata da nome vino ed etichetta, richiamando per la seconda volta la pagina le immagini delle etichette scomapiono, devo uscire e riavviare l’applicazione…qualke soluzione? ho inserito nella pagina l’attributo “data-cache=’false'” ma non funziona…
Grazie
Non so Alessandro, dovrei vedere tutto e comunque può dipendere anche da un bug. hai controllato nel forum di jqm se si tratta di un bug segnalato?
Ciao Maurizio per caso è possibile con jQuery settare il trascina per caricare nuovi elementi in una listview?
Quello classico a fine lista!
Ciao Alex
non ho capito cosa intendi :-(
Ciao
c’è un piccolo problema: quando si torna indietro, rimane selezionata la voce scelta in precedenza, e si accodano tutte le altre che vengono selezionate. Come ovviare al problema?
Salve Maurizio.
Complimenti per l’esempio.
Volendo conoscere piu’ da vicino jquery mobile, mi sono imbattuto in questo esempio. Non sono un programmatore … provetto e non so ….costruire un sito (per ora). Volevo riprodurre questo esempio sul mio pc . Ho installato xampp su mio pc e cercato di riprodurre l’esempio ….. ma nonostante i miei sforzi ancora non riesco a farlo girare in locale.
Dove sbaglio? forse perche’ non so la differenza tra una pagina php e una html?
Se hai un minuto di tempo mi puoi instradare sul percorso ….. da studiare?
Ti ringrazio in anticipo della …. pazienza. Ciao Mario
Ciao Maurizio, la guida è sicuramente bella e semplice. Ho provato a riprodurre il tuo esempio su pc con successo in un primo momento. Dico in un primo momento, perché linkando le versioni di jquery e jquery mobile che hai piazzato tu è tutto ok. Ma linkando versioni recenti, non sembra più funzionare lo script per andare sulla pagina dell’autore singolo. In pratica, non mi sembra che esegua la chiamata Ajax ovvero il metodo S.mobile.changePage(). Come mai?
Ciao Matt.
La guida l’ho scritta quando jQuery Mobile era ancora in alpha. E’ chiaro che alcune cose sono cambiate, quindi bisogna aggiornarsi.
Ciao Maurizio,
ho riprodotto il tutorial integralmente creando delle pagine php sotto eclipse dove gira il mio progetto con jquery mobile, ma non mi funziona potresti aiutarmi?
Al posto di uscirmi i tre autori del tutorial mi esce nel body della pagina:
showList(); ?>
cosa ho sbagliato? devo importare delle librerie in eclipse?
Uso il tomcat di eclipse, c’è qualche incompatibilità?
Grazie anticipatamente
Salve, volevo sapere come si fa a pubblicare una web app su AppStore oppure su Marketplace Android.
Grazie
Molto carino questo tutorial….secondo te è possibile convertirlo utilizzando come db sqlite e al posto del php html5?
Ciao Maurizio,
usando jquery-1.9.1.min.js e jquery.mobile-1.3.2.min.js non compaiono i dettagli dell’autore, cosa c’è che che va in conflitto?
Confermo che questa soluzione non funziona con le recenti versioni di jQuery mobile, sarebbe opportuno mettere una nota in cima al post…