Crea il tuo Blog Web 2.0 con Drupal

In occasione del Barcamp di Casalecchio di Reno [1] ho tenuto una presentazione su come sia possibile creare una piccola applicazione web 2.0 con Drupal. Lo scopo era quello di fare vedere che, con un piccolo sforzo, ognuno di noi può farsi "in casa" il proprio sito di social networking senza utilizzare siti esterni che offrono questo servizio. Vogliamo realizzare una piattaforma nella quale ogni utente ha il suo blog nel quale racconta le proprie esperienze di viaggio georeferenziandole sulla mappa di Google. Ogni post è soggetto a un meccanismo di voto simile a quello di Amazon ed è categorizzabile secondo il classico sistema di free-tagging. Due voci di menu classificano tutti gli interventi per luogo e per interesse. Ecco una live demo per capire meglio quello che vogliamo realizzare.

http://www.signalkuppe.com/blogdemo/ [2]

Per seguire il tutorial è necassaria una conoscienza base di Drupal ed in generale del funzionamento di un CMS (come si attivano i moduli, come si attivano i temi ecc...). Abbiamo bisogno dei seguenti moduli/temi aggiuntivi. Tra quelli inclusi nel core utilizzeremo solo il modulo "Blog".

• Tagedelic [3]: crea la nuvola di tags
• Fivestar [4]: gestisce la votazione dei post.
• Gmap [5]: permette l'interazione con le mappe di Google
• Location [6]: permette di georeferenziare i contenuti
• Views [7]: crea liste di contenuti personalizzate (... e molto altro)
• Il tema Alek [8]: il tema che utilizzeremo

Ultimo requisito è quello di registrare una API KEY valida per l'utilizzo di Google Maps. Potete farlo in modo gratuito a questo indirizzo [9].

Prima di partire attiviamo tutti i moduli in admin/build/modules e il tema in admin/build/themes. Ricordiamoci di attivare il supporto per i ritratti sia nelle impostazioni del tema sia nelle impostazioni degli utenti (admin/user/settings). Siamo pronti? Partiamo!

1) Creazione del Vocabolario

Dobbiamo prima creare il nostro vocabolario per classificare i post tramite il freetagging. In admin/content/taxonomy/ aggiungiamo un vocabolario, selezioniamo solo "Blog Entry" tra i tipi (vogliamo associarlo solo a questo tipo di contenuto), segniamo "Grearchia singola" e spuntiamo la casella "fretagging" e "richiesto".

2) Configurazione delle mappe di Google

Questo step implica due semplici passaggi. Per prima cosa inserite la chiave ottenuta in precedenza in admin/settings/gmap. Successivamente dobbiamo dire al Blog di usare la georeferenziazione. Andiamo quindi in admin/content/types/blog e nella sezione "Locative Information" settiamo a 1 entrambe le opzioni.

3) Configurazione del sistema di votazione

Sempre nelle impostazioni del Blog admin/content/types/blog troviamo una voce "Five Star ratings". Spuntiamo la casella "Enable Five Star rating", settiamo il valore Widget location (teaser) su "Hidden" e il valore Widget location (full node) su "Below node Body", In pratica queste due opzioni stabiliscono la posizione delle stelline che permettono il voto. Con questi parametri esse saranno nascoste nelle versioni brevi (ad esempio in homepage) e posizionate sotto il testo nella visualizzazione completa.

4) Posta i racconti!

Inseriamo qualche racconto per capire se abbiamo fatto qualceh errore o meno. Per postare un racconto del Blog andiamo su node/add/blog. A questo punto la form di invio dovrebbe presentare un titolo, un campo per l'inserimento dei tags, il testo, e sotto la voce "luogo" la mappa di Google sulla quale "posizioneremo il racconto" facendo semplicemente un click nel luogo desiderato. Postiamo 3/4 racconti per prendere un po' di confidenza e per cominciare a riempire il nostro blog.

5) Gestione utenti e permessi

Abbiamo tra le mani un bel blog personale, mancano tutti gli altri utenti!. Per prima cosa dobbiamo dire al sistema di permettere la registrazione di nuovi utenti tramite approvazione. In admin/user/settings sotto la voce "registrazioni pubbliche" selezioniamo quindi la terza voce "I visitatori possono creare profili ma l'approvazione degli amministratori è richiesta". A questo punto gli utenti possono iscriversi e partecipare al blog. Per testare il tutto provate a creare manualmente qualche utente. Manca però una politica di controllo accessi. Vogliamo avere un controllo su chi può fare cosa. Il controllo accessi (admin/user/access) tramite una semplice interfaccia consente di stabilire cosa possono fare gli utenti registrati rispetto agli utenti anonimi. Un semplice logica potrebbe essere: "Gli utenti registrati possono postare racconti, inviare commenti, modificare i propri interventi, visualizzare il luogo dei contenuti". A questo punto basta spuntare le caselle appropriate nella colonna "authenticated user".

• Gli utenti registrati possono postare racconti e modificarli: modifica il proprio blog
• inviare commenti: accede ai commenti, inserisce commenti
• visualizzare il luogo dei contenuti: show node map, submit latitude/longitude (per poter attribuire un luogo a un post)

6) Costruiamo il Front-end Le funzionalità sono pronte, manca l'interfaccia! Si tratta di attivare tutti quei blocchi che servono per presentare agli utenti tutte le caratteristiche del Blog. Andiamo nella gestione dei blocchi (admin/build/block) e attiviamo nella sidebar left

• Location map
• tags
• Commenti recenti (opzionale)

Nella barra laterale destra inseriamo la maschera di login per permettere l'accesso agli utenti e per promuovere nuove iscrizioni.

6) Inseriamo liste di contenuti personalizzate (opzionale)

Mancano le due tab che permettono di accedere ai contenuti per luogo e per voto. La prima tab è solo un link ad una pagina creata dal modulo location. Basta aggiungere questo links ai Primary links nel sistema dei menu (admin/build/menu). La seconda voce è stata creata con il modulo Views che consente di creare liste di contenuti personalizzate direttamente da FE (una specie di costruttore di query). La nostra pagina non è altro che una vista che filtra i tipi di contenuto "blog" restituendo i campi titolo/autore/voto/avatar in ordine di voto, dal più popolare al meno popolare. Per una documentazione più approfondita di views vi rimando all'altro mio tutorial [10], oppure alla documentazione ufficiale di Drupal.org [11]

7) Estendiamo il Blog

Il tutorial base finisce qui ma Drupal permette di andare ben oltre queste funzionalità. Ad esempio potremmo...

• Usare un editor WYSIWIG per i contenuti (modulo FCK)
• Modificare i campi del Blog (modulo CCK) ad esempio inserendo la dimensione temporale ai post.
• Creare una galleria fotografica georeferenziata (modulo image)
• Georeferenziare gli utenti
• Specificare ruoli diversi per gli utenti con politiche di accesso più raffinate

Come potete vedere il limiti sono solo nella vostra fantasia. A conclusione di questo tutorial allego le presentazione tenuta al Barcamp e l'archivio contenente tutto il blog (struttura dati + database) nel caso non aveste voglia di leggervi tutto il tutorial (ma se siete arrivati fino a qui vuol dire che non vi serve!). Per i coraggiosi c'è anche una foto [12] che mi ritrae durante l'evento. Ringrazio l'amico Nicola [13] per aver avuto il coraggio di immortalarmi.

Scarica la presentazione [14]
Scarica il Blog [15]