Avendo la necessità di pubblicare dei dati estrapolati dal database sotto forma di grafico ho fatto la conoscenza con questa estensione, ne sono rimasto entusiasta e la voglio condividere con voi. Si possono mostrare i dati con grafici di ogni genere e anche in tabelle. Grafici e tabelle interattivi, con dati presi dal database del vostro sito o da altro database (purchè MySql), che si aggiorneranno automaticamente in tempo reale. Vediamola...Plotalot (plot a lot = disegni a gogò) è una componente che si può scaricare qui nella JED (joomla extension directory). C'è una versione gratuita e una versione a pagamento che comprende anche un plugin per mostrare i grafici dentro un articolo.
Ma la versione gratuita possiede tutte le funzionalità di quella a pagamento, salvo che mostra in alcuni tipi di grafici la scritta Plotalot free. Una limitazione da poco dunque. L'estensione è un pacchetto unico multi-versione ed è perciò installabile in tutte le versioni di joomla a partire dalla 1.5.
Una volta scaricata si installa come al solito dal pannello di amministrazione di Joomla! da Estensioni/Gestione Estensioni/ Installa selezionando con Sfoglia... il file zippato nel nostro computer e cliccando infine su Carica & Installa.
Premessa: questa estensione lavora interrogando il database. L'interrogazione avviene a mezzo di query SQL. Per poterla usare efficacemente bisogna dunque conoscere almeno gli elementi di base di questo linguaggio. Ma gli esempi forniti e questa guida vi consentiranno di usare efficacemente l'estensione sul vostro sito anche se non conoscete questo linguaggio. Le query con le quali lavora Plotalot sono soltando di tipo select, consentono cioè soltanto di interrogare il database e di estrarre i dati. In nessun modo potremo dunque fare danni. Al massimo, se sbagliamo qualcosa in una query, otterremo un errore. Quindi l'uso di questa estensione sarà magari uno stimolo allo studio di SQL.
Adesso andiamo a configurare ed impostare l'estensione da Componenti> Plotalot.
La apriamo e vedremo apparire 5 grafici di esempio. Apriamo il numero 1 che si chiama Sample Pie Chart - Your Most Popular Articles.
Adesso configuriamo il nostro primo grafico:
- nel campo Nome scriviamo il nome con il quale il grafico ci apparirà nell'elenco del pannello di amministrazione. Mettiamoci un nome significativo di quello che mostra il grafico;
- nel campo Tipo scegliamo uno dei valori dal menu a tendina. Faremo delle prove dopo averlo pubblicato. Intanto lasciamolo su Torta 3D con valori;
- nel campo Legenda impostiamo su quale lato mostrare la legenda del grafico;
- nel campo Dimensioni (L x A) inseriremo larghezza ed altezza in pixel del nostro grafico;
- in Titolo scriveremo il titolo che apparirà in frontend sopra il nostro grafico e nel campo Colore potremo scegliere il colore di tale titolo;
- in Sfondo possiamo stabilire un tipo di sfondo per il grafico e nelle caselle di fianco selezionare i colori di sfondo. Possiamo perfino dare dei gradienti od usare delle griglie;
- in Stile Html possiamo mettere degli attributi al tag immagine del grafico. Indispensabile l'alt per passare la validazione W3C;
- nei campi Database, Host, User, e PW vanno inseriti i dati per connettersi a un database diverso da quello del sito dove stiamo operando. Se stiamo estraendo dati dal database del nostro sito dobbiamo lasciare in bianco questi campi;
- lasciamo in bianco il campo Parametri Extra che può essere utilizzato da utenti esperti sulle API di Google che vengono utilizzate da Plotalot per disegnare i grafici;
- In Numero di tracciati lasciamo 1. In grafici complessi il numero dei tracciati potrebbe anche essere maggiore (fino ad un massimo di 20) e ad ognuno corrisponderebbe una query da fare al database;
- in Mostra dati esemplificativi lasciamo spuntato per vedere sotto al grafico una tabella esemplificativa con i dati estratti dal database. Ci mostrerà anche eventuali errori sulle nostre query (solo in backend).
Adesso inseriamo la query da fare al database
Veniamo infine alla query da scrivere nel Tracciato 1
- in Nome possiamo lasciare il campo in bianco dato che per questo tipo di grafico useremo solo una query;
- in Colore potremo selezionare quello che vogliamo e in Stile potremo scegliere la gradazione chiara o scura per quel colore. Lasciamolo su Multi-colore e poi faremo delle prove di visualizzazione.
- Esaminiamo adesso la query che troviamo già scritta di default in questo esempio. Con la parola SELECT si stabilisce il tipo di query. Abbiamo già detto che quello di selezionare e mostrare i dati è la sola query possibile con questa estensione. Quelli che seguono il SELECT, separati da una virgola, sono i campi della tabella che saranno estratti: title , hits (separati da una virgola) che sono il titolo e le visite. FROM (che vuol dire DA) seguito dalla tabella #_content che non è altro che la tabella dove vengono scritti tutti gli articoli di Joomla! Il segno #_ posto davanti a content verrà sostituito da Plotalot con il prefisso delle nostre tabelle (che abbiamo impostato in fase di installazione del sito).
Attenzione: se stiamo prelevando i dati da un altro database, diverso da quello della nostra installazione di Joomla! (abbiamo dunque compilato i campi Database,Host,User,Pw) dovremo scrivere nella query il nome della tabella completo di prefisso.
Quindi abbiamo capito che mostreremo nel grafico titolo e numero di visite dei nostri articoli. Ma come li ordineremo? Ecco che la query prosegue: order by hits desc che significa mostrali da quello che ha il maggior numero di visite. E quanti articoli mostreremo nel grafico? Ecco la parte finale della query: limit 10. Cambiamo quindi questo numero per mostrarne di più o di meno. E se volessimo limitare il pescaggio degli articoli a una sola categoria? Modificheremo la query aggiungendo una istruzione condizionale WHERE catid = 65 appena dopo la chiamata della categoria in modo che la query completa sia questa:
SELECT title, hits FROM #__content WHERE catid = 65 order by hits desc limit 10
Ecco che gli articoli verranno pescati solo se appartengono alla categoria che ha ID 65 (potete vedere l'ID delle categorie in Contenuti>Gestione categorie).
Adesso salviamo e chiudiamo questo grafico. Lo vedremo in seguito.
Configuriamo una tabella
Clicchiamo su Sample Table. Si aprirà questa pagina che andremo ad impostare.
- in Nome scriviamo, come prima, qualcosa di significativo che poi vedremo nell'elenco dei nostri grafici;
- in Titolo scriviamo il titolo che apparirà nell'intestazione della tabella;
- lasciamo vuoti i campi che riguardano il database, se stiamo estraendo dati da quello del sito, come prima;
- in Stile tabella, Title row style, Heading row style, Stile riga dispari e Stile riga pari lasciamo quello che appare di default. Modificheremo poi nel css le regole, se vogliamo cambiare aspetto alla tabella. Naturalmente possiamo aggiungere delle nostre classi;
- in Max righe possiamo limitare il numero massimo di righe della tabella e in Intestazione colonne lasciamo la spunta se vogliamo che l'intestazione appaia;
Ed eccoci alla query, un poco più complessa di quella che abbiamo visto prima per il grafico. Sempre di tipo SELECT con il comando CONCAT possiamo inserire i link relativi agli articoli che associamo ai titoli degli stessi, quindi ci prendiamo le visite e le date di creazione. Il tutto anche stavolta dalla tabella content, con un controllo sullo stato di pubblicazione (WHERE state = 1), ordinate per data di creazione, gli ultimi creati in alto, e con un limite di dieci (ORDER BY created DESC LIMIT 10).
Salviamo anche questa tabella.
So di aver fatto esempi banali. Le query possono essere ben più complesse di queste.
Ma credo che gli esempi siano sufficienti a capire la filosofia del linguaggio e siano di stimolo per approfondire la conoscenza di SQL.
Mostrare in front-end i dati estratti su grafici e tabelle
Adesso dobbiamo mostrare in front-end le cose che abbiamo fatto.
Andiamo quindi in Menu/tuo_menu/aggiungi voce di menu e scegliamo il tipo di voce Simple List of Charts di tipo Plotalot.
Quindi, nei parametri a destra, potremo inserire:
- in Page Title un titolo che apparirà in alto nella pagina web. Inserimento facoltativo;
- in Text Above un testo introduttico che apparirà sopra il grafico. Inserimento facoltativo;
- in Chart ID(s) dobbiamo invece inserire obbligatoriamente almeno l'ID di un grafico. Se ne vogliamo inserire di più li dovremo separare con una virgola. I grafici appariranno uno sotto l'altro. Se avete usato gli esempi suggeriti in questa guida dovete scrivere 1,5 (l'ID di ciascun grafico o tabella è visibile nell'area di amministrazione di Plotalot);
- in Text Below scrivete un testo che apparirà sotto tutti i grafici pubblicati. Inserimento facoltativo.
Salvate il tutto e andate in front-end a cliccare sulla voce di menu appena creata per vedere il grafico e la tabella che abbiamo creato.
Adesso possiamo tornare nel back-end e provare altre visualizzazioni del grafico e della tabella. Per personalizzazioni degli stili troviamo le regole css nel file components/com_plotalot/assets/plotalot.css
Io sono stato molto soddisfatto di questa estensione che mi consente di visualizzare in un sito Joomla! praticamente qualsiasi dato: penso a quante richieste ci sono nel forum di poter visualizzare elenchi di utenti, di contatti, di prodotti, ecc.
In più possiamo visualizzarli con interessanti grafici che, conoscendo bene SQL, possono anche essere molto complessi.
Sia dati presi dal nostro che da altri siti. Davvero una estensione utile, direi!
Qui potete vedere una demo di questa estensione con gli esempi qui esposti.
Articolo scritto da tonicopi - Joomla Css Zen Garden
