Share
Un tag-cloud è un ottimo modo per mostrare ai visitatori del tuo blog i principali argomenti di interesse disponibili. Vi sono anche informazioni aggiuntive contenute in una nuvola di tag. A parte i link stessi, che danno alle persone un'idea dei temi trattati dal tuo sito, possono anche mostrare quanto siano popolari le diverse materie. Un'altra cosa grandiosa delle tag-cloud è che possono essere usate per descrivere la frequenza di qualsiasi cosa; puoi collegare articoli, post di blog, immagini, video o qualsiasi altra cosa che hai in abbondanza sul tuo sito.
Le tag cloud sono facili da fare male; sia dal punto di vista del design o dal punto di vista del codice. Grazie a jQuery, è anche facile fare bene. Utilizzeremo la nuova versione 1.3 di jQuery per questo esempio e lavoreremo con PHP e MySql per fornire un feed JSON dei nostri tag. Ottenere i tag in un database in primo luogo va oltre lo scopo di questo tutorial, ma è una questione abbastanza semplice da recuperare e passarli a una pagina in attesa tramite AJAX.
Iniziamo sulla pagina in cui verrà mostrata la nuvola di tag; in un nuovo file nel tuo editor di testo crea la seguente pagina:
jQuery Tag Cloud Tag Cloud
Salva questo come tagcloud.html. In questa fase non abbiamo quasi nulla nella pagina, solo un semplice contenitore per il tag-cloud e un'intestazione di secondo livello all'interno del contenitore. Tutti gli altri elementi di cui abbiamo bisogno possono essere creati come e quando sono richiesti. Ci colleghiamo a un foglio di stile in testa per alcuni stili che aggiungeremo in seguito, e alla fine del corpo ci colleghiamo a jQuery. Facciamo la richiesta per la risposta JSON in un blocco di script personalizzato dopo il riferimento a jQuery.
Usiamo l'alias $ per chiamare il metodo jQuery getJSON, che è un'astrazione di livello superiore del metodo ajax; normalmente i metodi jQuery sono chiamati su oggetti che sono riferimenti ad elementi, ma poiché non stiamo facendo riferimento a nessun elemento, possiamo invece usare l'alias jQuery. Ciò significa anche che l'oggetto jQuery non verrà restituito dal metodo. Invece il xmlHTTPRequest è passato indietro.
Il metodo getJSON accetta due argomenti in questo esempio (anche se più può essere usato se necessario); il primo è l'URL a cui stiamo facendo la richiesta. Dato che riceveremo un oggetto JSON, è logico utilizzare getJSON. Potremmo usare il metodo ajax, ma dovremmo quindi configurare più proprietà della richiesta (come dataType), quindi l'utilizzo di questo ci risparmia un po 'di tempo e codifica. Alla fine dell'URL specifichiamo un callback JSONP -? Callback =? - che abiliterà il browser a manipolare direttamente l'oggetto JSON, anche se proviene da un altro dominio, senza alcuna ulteriore elaborazione lato server.
Il secondo argomento è la funzione di callback che vogliamo eseguire una volta che l'oggetto viene restituito alla pagina. Non abbiamo ancora inserito alcun codice in questa funzione, perché non abbiamo l'oggetto JSON con cui lavorare. Possiamo tornare a questa pagina tra poco dopo aver scritto il PHP. Ho detto un momento fa che non è necessaria alcuna elaborazione lato server quando si lavora con callback JSONP, eppure ora andremo a scrivere qualche PHP. Questo è solo perché nessuno fornisce i dati che vogliamo, quindi dobbiamo creare noi stessi. Se qualcuno forniva un feed JSON di tag popolari, potremmo comunque utilizzare lo stesso codice jQuery per richiederlo ed elaborarlo.
Avrai bisogno di avere accesso a un server web per poter eseguire il file che stiamo per creare, ma questo potrebbe essere il tuo server web locale che usi per lo sviluppo, oppure potrebbe essere il server il tuo sito o blog è ospitato su. In una nuova pagina nel tuo editor di testo aggiungi il seguente codice:
Salva questo come tagcloud.php. Per questo esempio, presumo che MySql sia installato e configurato e che abbia configurato un database chiamato tagcloud. All'interno di questo database presumo anche che ci sia una tabella chiamata tag. Questa tabella avrà righe dei tag e la frequenza delle occorrenze di questi tag. Voglio sottolineare che questo non è un codice a livello di produzione perché la sicurezza non è stata un fattore nella sua progettazione; abbiamo bisogno di un posto per ottenere la nostra risposta AJAX da in questo esempio e questo codice ci darà da qualche parte.
Diamo una breve occhiata a ciò che abbiamo fatto.
// informazioni sulla connessione $ host = "localhost"; $ user = "root"; $ password = "your_password_here"; $ database = "tagcloud";
Per prima cosa impostiamo le informazioni di connessione di cui avremo bisogno per connettersi al database. Assicurati di sostituire your_password_here con la password effettiva che hai impostato per accedere a MySql. Ci colleghiamo quindi al database e impostiamo la query che useremo per accedere ai dati dalla tabella dei tag.
// avvia json object $ json = "(tag: ["; // loop through e restituisce risultati per ($ x = 0; $ x < mysql_num_rows($query); $x++) $row = mysql_fetch_assoc($query); //continue json object $json .= "tag:'" . $row["tag"] . "',freq:'" . $row["frequency"] . "'";
Quindi creiamo la stringa che avvierà l'oggetto JSON, prima di eseguire il ciclo di ciascuna riga della tabella ed eseguire la query. Continuiamo a costruire la stringa JSON all'interno del ciclo for, aggiungendo i dati di entrambi i campi della riga corrente come proprietà e valori.
// aggiungi una virgola se non l'ultima riga, parentesi di chiusura se è se ($ x < mysql_num_rows($query) -1) $json .= ","; else $json .= "])";
Eseguiamo un semplice controllo su ogni iterazione del ciclo usando il parametro for per vedere se stiamo leggendo l'ultima riga nella tabella; se non lo siamo usiamo una virgola per separare ogni oggetto, se siamo noi chiudiamo l'oggetto. Il formato dell'oggetto JSON sarà costituito da singoli oggetti del record all'interno di un singolo array contenitore, all'interno di un oggetto esterno.
// restituisce JSON con GET per callback JSONP $ response = $ _GET ["callback"]. $ JSON; echo $ risposta; // close connection mysql_close ($ server);
Quindi echeggiamo la risposta al client usando una richiesta GET; questo è necessario per utilizzare il callback di jsonp nella nostra pagina principale. Abbiamo bisogno di specificare il nome del parametro URL che segue l'URL del nel JavaScript, che in questo esempio è semplicemente callback. Tuttavia, non possiamo dirgli il nome della funzione che vogliamo passare, perché la funzione è anonima. jQuery gestirà questo per noi e garantirà che i dati vengano passati alla funzione corretta.
Una volta terminato, chiudiamo la connessione. In questa fase, non possiamo ancora vedere nulla sulla pagina, ma se si esegue la corsa da una directory di content-serving del proprio server Web e si utilizza la scheda NET di Firebug, è possibile visualizzare i dati restituiti a la pagina:
Ora che abbiamo qualche JSON con cui lavorare, torniamo alla pagina HTML e facciamo qualcosa con esso. Il nostro primo compito è elaborarlo per estrarre i dati; in tagcloud.html, rimuovi il commento lasciato all'interno del callback e aggiungi il seguente codice:
Accentsconagua
// crea una lista per i collegamenti dei tag $ ("
