G. Vasarelli, A. Vivaldi IIT B4-08/20112011/08/04 · C Consiglio Nazionale delle Ricerche Il CMS...

C

Consiglio Nazionale delle Ricerche

Il CMS Drupal - Corso avanzato

G. Vasarelli, A. Vivaldi

IIT B4-08/2011

Nota Interna

Novembre 2011

Iit

Istituto di Informatica e Telematica

Il CMS Drupal – Corso avanzatoIstruttori: Giuseppe Vasarelli e Andrea Vivaldi

(Istituto di Informatica e Telematica).

Case study 1 (6H): Costruire un sito per la gestione di eventi

Moduli• moduli opzionale del core;• moduli esterni.Contenuto di base• configurare il modulo “event”;• gestione del Time zone;• data e orario;• configurare il modulo “notification”;• configurare il tipo di contenuto “event”;• inserire immagini;• creare nuove categorie;• validare il form di sottomissione dell’evento;• creare menu tramite il modulo Taxonomy Menu;• Blocchi “calendario” e “prossimi eventi”.

Case study 2 (6H): Costruire un sito per la gestione di progetti e task

Moduli opzionali del core: Profile, PHP filter.Moduli aggiuntivi: CCK, jQuery UI, Date, Views, Rules, Ctools, Panels, Node access user reference, Token.Tema: Twilight.Contenuto di base: • la differenziazione degli utenti rispetto a due

ruoli diversi;• la suddivisione dei contenuti in progetti e task;• la possibilità di elencare progetti e task in ordine

di scadenza;• la possibilità per ciascun utente di visualizzare il

proprio «workspace»;• la gestione automatica e collaborativa del flusso.

Corso Drupal «Costruire un sito di eventi»

Pino Vasarelli, Andrea Vivaldi Iit - Istituto di Informatica e Telematica del CNR

Breaking Events Il sito Breaking Events deve avere le seguenti caratteristiche: • la possibilità per gli utenti registrati di creare eventi,

raggruppati per continente geografico; • un calendario esteso nel corpo della pagina; • un mini calendario nella barra laterale; • una lista degli ultimi eventi inseriti, mostrata come

anteprima sulla home page; • la possibilità per gli utenti di ricevere email per ogni nuovo

evento sul sito; • la possibilità per gli utenti di essere avvisati quando un

evento si avvicina.

IIT/CNR P. Vasarelli - A. Vivaldi 2

Tema utilizzato

• Sarà utilizzato il tema «Sky», che è un tema della comunità Drupal, scaricabile al link http://drupal.org/project/sky;

• creare la cartella «themes» sotto «sites>all»; • scompattare la cartella del tema in

sites>all>themes.


Moduli usati Moduli opzionali del core: • Taxonomy – serve per classificare i contenuti; • Comment – abilita i commenti sui contenuti; • Upload – consente l’upload di file e immagini; • Search – abilita la ricerca sul sito;

Moduli aggiuntivi: • Event – consente la creazione di tipi di contenuto «evento»; • Notify – consente agli utenti di ricevere email periodiche sull’inserimento o aggiornamento di

contenuti e commenti; • Signup – permette agli utenti di ricevere notifiche all’approssimarsi di una data; • Views – permette di creare viste sul contenuto del sito • Taxonomy Menu – trasforma i vocabolari tassonomici in menu; • Wysiwyg – abilita i plugin wysiwyg sulle aree di testo; • IMCE – consente il caricamento delle immagini direttamente nelle aree di testo; • IMCE Wysiwyg bridge – permette di collegare il modulo IMCE al modulo Wysiwyg; • Poormanscron – consente al cron di girare senza essere collegato al cron del server ospitante.


Installare i moduli

• Creare la cartella «modules» sotto «sites>all»; • scompattare tutti i moduli scaricati dentro la

cartella appena creata; • andare nell’interfaccia di amministrazione dei

moduli; • abilitare tutti i nuovi moduli (e relative

dipendenze) elencati nell’esempio che segue.


Installare i moduli – esempio (1)


Installare i moduli – esempio (2)


Costruzione del sito

Per il corretto funzionamento del sito occorrerà: • creare termini tassonomici selezionabili

dall’utente per descrivere il continente in cui avrà luogo l’evento;

• impostare campi per tag liberi, con i quali l’utente indicherà la propria collocazione geografica;

• configurare i moduli aggiuntivi installati; • categorizzare e ordinare il contenuto in maniera

logica, per poter essere acceduto in modo semplice e immediato.


Il contenuto base

Il sito sarà costruito intorno al modulo «Event», che creerà automaticamente il proprio tipo di contenuto. Gli obiettivi principali sono: • categorizzare il contenuto per renderlo

facilmente accessibile; • creare il sistema di notifica per i nuovi contenuti

inseriti; • creare il sistema di notifica per gli eventi prossimi.


Configurare il modulo Event


Configurare il modulo Event (overview)


Configurare il modulo Event (time zone)


Configurare data e ora


Configurare le notifiche


Configurare il modulo «Signup»


Configurare il tipo di contenuto «Event»


Il modulo «Wysiwyg»

• Un profilo (o plug-in) «Wysiwyg» è associato ad un formato di input e definisce: – quale editore javascript verrà utilizzato; – quali bottoni o temi saranno abilitati per l’editore; – come l’editore verrà visualizzato; – alcune altre funzioni specifiche dell’editore.


Configurare il modulo «Wysiwyg»

• Scegliere il plug-in «TinyMCE» e scaricarlo seguendo il link indicato nell’immagine (1);

• creare la cartella «libraries» sotto «sites>all»; • scompattare la cartella del plug-in nella cartella appena

creata; • associare il profilo «TinyMCE» al formato di input

«FullHTML» come in immagine (2); • abilitare i bottoni dell’editor come in immagine (3); • impostare «FullHTML» come formato di input

predefinito.


Configurare il modulo «Wysiwyg» (1)


Configurare il modulo «IMCE»


Creare nuove categorie

• Gli eventi verranno raggruppati tra di loro in categorie a seconda della loro provenienza geografica;

• per far ciò utilizziamo la tassonomia di Drupal, creando i tre «vocabolari» (con le impostazioni indicate): – continente («richiesto»); – stato («richiesto», «tag»); – località («richiesto», «tag»).


Aggiungere vocabolari


Elenco dei vocabolari


Aggiungere termini

• All’interno del vocabolario «continente» aggiungere i «termini»: – Africa; – Asia; – Australia; – Europa; – Antartide; – America del Nord; – America del Sud.


Aggiungere termini (esempio)


Controllare il form di sottomissione degli eventi


• Creare 4/5 eventi a piacere inserendo tutti i dati necessari utilizzando il form mostrato sopra.

La home page «Breaking Events»


Creazione del menu

• Creiamo un nuovo menu che contenga le voci del vocabolario «continente»;

• utilizziamo a tal scopo il modulo «Taxonomy Menu»: – creando un menu vuoto «Continenti» (1); – configurando nel vocabolario «Continente» le

impostazioni «Taxonomy Menu» (2); – spostando sulla barra di sinistra il blocco del menu

«Continenti» (3).


Creazione del menu (1)


«Breaking Events» con menu


Calendario ed eventi futuri

• Il modulo «Events» crea in automatico due blocchi: – «Calendar to browse events» che gestisce un

calendario; – «List of upcoming events» che mostra una lista

degli eventi futuri in ordine cronologico;

• visualizziamo i due blocchi nella barra laterale destra.


«Breaking Events» con blocchi eventi


Configurare il modulo «Poormanscron»


Gestione dei permessi

• Per la corretta gestione del sito è necessario assegnare i permessi all’utente registrato: – creazione/modifica/cancellazione di eventi

(modulo «node»); – accesso alla configurazione personale delle

notifiche (modulo «notify»); – amministrazione della sottoscrizione agli eventi

(modulo «signup»).


Gestione dei permessi (modulo node)


Gestione dei permessi (modulo notify)


Gestione dei permessi (modulo signup)


Creazione di un nuovo utente


• Per testare le funzionalità del sito, creiamo un utente di prova.

Configurare il tema «Sky»

• Abilitare il tema «Sky» e renderlo predefinito; • accedere alla sua configurazione per:

– cambiare il logo caricando quello fornito («logo.png»);

– utilizzare la stessa immagine per l’icona; – impostare «custom layout width» a «96%»; – impostare «header navigation alignment» a «left»; – impostare «base font size» a «13px» e «base font»

a «Verdana».


Il sito col tema «Sky»


Riallocare i blocchi

• Trasformare il layout da tre colonne in due colonne «contenuto + barra laterale destra»;

• spostare il blocco «Realizzato con Drupal» nella regione footer;

• modificare l’ordine dei blocchi a piacere.


I blocchi riallocati


Modificare il menu «Continenti»

• L’ultimo passo consiste nel trasformare il menu «Continenti» in un formato orizzontale;

• il tema «Sky» ha la possibilità di visualizzare in orizzontale le voci di menu dei «link primari»;

• sostituiamo perciò la fonte dei link primari con le voci del menu «Continenti»;

• disattivare il blocco «Continenti» ormai ridondante.


Impostazione sorgente link primari


Risultato finale


Corso Drupal «Project management»

Pino Vasarelli, Andrea Vivaldi Iit - Istituto di Informatica e Telematica del CNR

Project management

Il sito Project management deve avere le seguenti caratteristiche: • la differenziazione degli utenti rispetto a due ruoli

diversi; • la suddivisione dei contenuti in progetti e task; • la possibilità di elencare progetti e task in ordine

di scadenza; • la possibilità per ciascun utente di visualizzare il

proprio «workspace»; • la gestione automatica e collaborativa del flusso.


Materiale utilizzato Moduli opzionali del core: • Profile; • PHP filter. Moduli Aggiuntivi: • CCK; • jQuery UI; • Date; • Views; • Rules; • Ctools; • Panels; • Node access user reference; • Token. Tema: • Twilight.


Configurare «Date»

• Tramite interfaccia di configurazione «Data e Ora» impostiamo impostiamo il fuso oraio e i formati;

• tramite interfaccia di configurazione «Date Popup configuration» impostiamo il plugin jQuery per il datepicker.


Configurare «Date» (esempio)


Creare un nuovo ruolo «Referente»

• Tramite interfaccia di gestione degli utenti, creare un nuovo ruolo chiamato «Referente»;

• a questo ruolo saranno associati solo ed esclusivamente gli utenti che sono referenti di un progetto;

• i referenti, come vedremo in seguito, saranno gli unici utenti autorizzati a creare progetti e assegnare task.


Aggiungere un ruolo


Creare il tipo di contenuto «Progetto»

• Creiamo il tipo di contenuto «Progetto», il quale deve contenere le seguenti informazioni: – Titolo; – Descrizione; – Referente; – Data inizio; – Data fine; – Stato.


Creiamo il tipo di contenuto «Task»

• Creiamo il tipo di contenuto «Task», il quale deve contenere le seguenti informazioni: – Titolo; – Descrizione; – Progetto; – Assegnatario; – Deadline; – Stato.


Aggiungere un tipo di contenuto


Tipo di contenuto «Progetto»


Aggiungere il campo «Referente»


Configurare il campo «Referente»


Aggiungere il campo «Data inizio»


Configurare il campo «Data inizio»


Cambiare le impostazioni di visualizzazione

• Per ognuno dei due tipi di contenuto creati cambiamo le impostazioni di visualizzazione in modo da avere le etichette sempre in linea con il campo.


Profilo utente

• Tramite l’interfaccia di gestione dei profili utente, aggiungiamo i seguenti campi da associare all’account: – Nome; – Cognome; – Qualifica.


Aggiungere campi al profilo utente


Impostare il campo «Nome»


Popolare un po’ il sito

• Creiamo 3 utenti di ruolo «Referente» e 3 utenti normali;

• creiamo 3 progetti assegnandoli a ciascuno degli utenti referenti appena inseriti;

• per ogni progetto creiamo 2 task assegnandoli a turno ai 3 utenti normali appena inseriti.


Creare un utente


Creare un contenuto «Progetto»


Creare la lista dei progetti

• Creiamo ora una vista che elenchi tutti progetti in una tabella, raggiungibile tramite la voce di menu «Progetti» all’interno dei link primari;

• le colonne della tabella devono riportare le seguenti informazioni: – Nome del progetto (con link al progetto); – Breve descrizione; – Referente; – Stato; – Data inizio.


Creare la vista «lista_progetti»


Comporre la vista


Risultato


Lista degli utenti

• Accanto alla lista dei progetti vogliamo aggiungere anche la lista di tutti gli utenti (quindi di tipo utente);

• creiamo una tabella utenti con informazioni relative a: – Nome utente; – Nome, Cognome e Qualifica; – Ruolo all’interno del sito.

• anche in questo caso la vista sarà una pagina con voce di menu nei link primari.


Vista utenti


Risultato


Visualizzazione di un progetto

• Così come è ora la visualizzazione del nodo progetto mostra solo i campi inseriti (titolo, descrizione, referente, stato, data inizio e data fine);

• vogliamo che oltre ai dati propri del contenuto, venga mostrata anche una vista di tutti i task collegati al progetto in dettaglio;

• per fare ciò costruiremo una nuova visualizzazione per il tipo di contenuto «Progetto» utilizzando i Panel.


Creazione della vista

• Creaimo una vista di task, in cui visualizzeremo i seguenti campi, in ordine di deadline crescente: – Titolo; – Assegnatario; – Deadline; – Stato.

• la vista non dovrà essere una pagina e dovrà avere un argomento di tipo node reference, in modo da far vedere solo i task associati ad un certo progetto:

• lo stile sarà ancora una volta quello tabellare.


La vista dei task di un progetto


Creazione del panel per il progetto

• Ora che abbiamo creato la vista dei task assegnati ad un determinato progetto vediamo come mettere insieme i pezzi: – abilitiamo il panel che si occupa di gestire la

visualizzazione dei nodi e modifichiamolo secondo le nostre esigenze;

– aggiungiamo una variante per il nodo di tipo progetto.


Struttura del panel

• La variante dovrà essere selezionata solo in caso di nodo di tipo progetto;

• il panel dovrà dividere l’area del contenuto in 2 regioni: – a sinistra verrano visualizzate le informazioni del

nodo; – a destra verrà visualizzata la lista dei task associati.


Abilitare panel node_view


Aggiungere la variante


Impostare la regola di selezione


Layout variante


Aggiungere contenuto alla variante


Profilo utente

• Modifichiamo l’attuale profilo utente attraverso i panel;

• vogliamo costruire un vero e proprio workspace in cui gli utenti possono controllare i loro progetti (solo se sono referenti), i loro task e anche le altre informazioni relative al profilo;

• vogliamo inoltre che l’home page del sito sia il workspace di ciascun utente;

• diamo la possibilità all’utente di aggiungere un’immagine personale.


Abilitare il ritratto per l’utente • Per abilitare l’immagine

personale (ritratto) per ogni utente occorre modificare le impostazioni utente;

• oltre ad abilitare l’opzione configuriamo: – altezza e larghezza massime:

100x100; – dimensione massima: 200 kB.


Modificare le viste create

• Per poter avere le viste «filtrate» sugli utenti (solo i proprio progetti e solo i propri task) occorre modificare la vista dei progetti e aggiungere un’altra vista dei task;

• nella lista dei progetti aggiungeremo un argomento per filtrare in base al referente;

• la nuova lista dei task dovrà essere simile all’altra lista con il campo progetto a cui è riferito (invece del campo assegnatario) e l’argomento dovrà essere di tipo user reference (assegnatario).


Modificare la lista dei progetti


Nuova lista dei task


Abilitare il panel «user_view»


Creare la variante


Configurare il contesto


Scegliere il layout


Popolare il contenuto


Uso degli argomenti nella vista • Per poter far funzionare le

viste modificate è necessario passare gli argomenti dal panel;

• possiamo passare direttamente gli argomenti nella configurazione attraverso i token.


Permessi sul contenuto del panel • Poichè non vogliamo far

comparire la vista progetti a chi non ha ruolo referente modifichiamo le regole di selezione del contenuto del panel.


Configurazione della regola


Impostare la home page


Permessi utente

• Il sito dovrà essere navigabile solo da utenti autenticati;

• il ruolo utente autenticato potrà: – visualizzare tutti i campi cck; – visualizzare i profili utente.

• Il ruolo referente potrà: – creare, modificare ed eliminare progetti/task; – modificare tutti i campi cck del progetto/task.


Permessi CCK


Flusso di lavoro

• Sarebbe molto più logico che lo stato del progetto dipendesse dallo stato dei task in cui è diviso;

• ad esempio un progetto sarà terminato quando tutti i task sono terminati e allo stesso modo sarà sospeso quando almeno uno dei task è sospeso;

• per rendere il flusso ancora più robusto occorrerebbe che gli assegnatari del task potessero modificare i propri task cambiandone lo stato;

• la data di fine di un progetto a questo punto può essere calcolata nel momento in cui il progetto passa allo stato terminato.


Modifiche sui permessi

• Il ruolo referente non può modificare il campo «Data fine» del progetto;

• Il ruolo referente non può modificare il campo «stato» del progetto;

• Il ruolo utente autenticato può modificare il campo «Stato» del task.


Modulo «Node access user reference»

• Abilitiamo il modulo «Node access user reference» dalla lista dei moduli

• occorrerà seguire il link per ricostruire l’albero dei permessi;

• andiamo sul tipo di contenuto «Task» e modifichiamo le impostazioni relative al campo «assegnatario», specificandone i permessi;

• anche dopo questa operazione sarà necessario ricostruire l’albero dei permessi.


Impostazioni «Node access user reference»


Utilizzare il modulo «Rules»

• Per fare in modo che i campi «stato» e «Data fine» del tipo di contenuto «progetto» siano modificati in automatico utilizzeremo il modulo «Rules»;

• Creeremo una regola in base alla quale: – ogni volta che viene salvato un tipo di contenuto

«task» verrà controllato il valore di «stato» di quel task e di tutti quelli associati al medesimo progetto;

– esaminando il valore restituito, deciderà se cambiare i valori dei campi del progetto e con quali valori.


Aggiungere una regola


Aggiungere condizioni e azioni


Inserire codice PHP nella regola


$stato = [node:field_task_stato-raw]; switch($stato) { case 'Sospeso': db_query("UPDATE content_type_progetto SET field_progetto_stato_value = 'Sospeso' WHERE nid = %d", [progetto:nid]); break; case 'Terminato': $query = db_query("SELECT field_task_stato_value as stato FROM content_type_task WHERE field_task_progetto_nid = %d",

[progetto:nid]); $tasks = array(); while($task = db_fetch_array($query)) { $tasks[] = $task['stato']; } $flag = FALSE; foreach($tasks as $s) { if($s == 'Terminato') { $flag = TRUE; } else { $flag = FALSE; } } if($flag == TRUE) { db_query("UPDATE content_type_progetto SET field_progetto_stato_value = 'Terminato' WHERE nid = %d", [progetto:nid]); db_query("UPDATE content_type_progetto SET field_progetto_fine_value = NOW() WHERE nid = %d", [progetto:nid]); } else { db_query("UPDATE content_type_progetto SET field_progetto_stato_value = 'Attivo' WHERE nid = %d", [progetto:nid]); db_query("UPDATE content_type_progetto SET field_progetto_fine_value = '' WHERE nid = %d", [progetto:nid]); } break; default: db_query("UPDATE content_type_progetto SET field_progetto_stato_value = 'Attivo' WHERE nid = %d", [progetto:nid]); db_query("UPDATE content_type_progetto SET field_progetto_fine_value = '' WHERE nid = %d", [progetto:nid]); break; } drupal_flush_all_caches();

Codice PHP di controllo


Abilitazione del nuovo tema

• Abilitare il tema «Twilight»; • inserire come logo il file logo.png; • inserire come icona il file icona.png; • sistemare i blocchi a piacere.


Risultato finale


G. Vasarelli, A. Vivaldi IIT B4-08/20112011/08/04 · C Consiglio Nazionale delle Ricerche Il CMS...

Documents

Transcript of G. Vasarelli, A. Vivaldi IIT B4-08/20112011/08/04 · C Consiglio Nazionale delle Ricerche Il CMS...