Con questo articolo incominciamo un serie di cinque tutorial, nei quali vedremo come utilizzare Portofino 4 per creare un blog.

Svilupperemo un applicativo che realizzerà le funzioni più comuni di un blog quali l'inserimento di articoli, dei commenti, la gestione degli utenti e dei permessi.  
Alla fine di questo primo articolo raggiungeremo l'obiettivo mostrato nella figura seguente.
 

Gli argomenti della serie saranno:

  1. Utilizzare Portofino 4 per realizzare il modello e le funzionalità di un blog con le funzioni base di Portofino.
  2. Impostare permessi e cambiare il tema grafico.
  3. Personalizzare la pagina dei post
  4. Personalizzare la pagina dei commenti
  5. Creare feed RSS.

E ora incominciamo a realizzare la prima versione del blog.

Passo 1. Avviamo Portofino 4 e creiamo una connessione al DB

Dopo aver scaricato l'ultima versione di Portofino avviamo il framework.
> cd portofino-4.0.8/apache-tomcat-6.0.36/

> bin/startup.sh 
Apriamo browser ed effettuiamo il login con l'utenza di default “admin" e password "admin”.
Per questo tutorial ho creato un database nuovo chiamato “blog” su Postgresql.
 
Creiamo una connessione a questo database. 
  1. Click su "Administration" (in alto a destra) > "Wizard"
  2. Step 1. Connect to your database.  Crea una connessione JDBC Connection come mostrato nella figura seguente, e infine fai click su  "Next >>".
  3. Step 2. Select the database schema(s) to import. Seleziona lo schema (ad esempio public), e fai click su "Next >>".
  4. Step 3. Set up user management, Ignora questo passaggio e fai click su "Next >>". 
  5. Step 4. Generate pages. Seleziona  "don't generate anything" e fai click su "Next >>".
  6. Fai click su "Finish"

Passo 2. Creiamo il modello dei dati

Il nostro blog memorizzerà post e commenti sulla base dati in Postgres. Per creare il modello dei dati possiamo intervenire in due modi:
  1. creare la struttura direttamente sul DB al di fuori di Portofino,
  2. utilizzare Liquibase gestito da Portofino e tenere traccia delle versioni.
In questo tutorial adotteremo la seconda soluzione. Utilizziamo un editor di testo per creare il file di Liquibase. Per convenzione creiamo un file nella directory apps/default/dbs, il nome del file deve essere nomeDatabase-nomeSchema-changelog.xml, nel nostro caso sarà  blog-public-changelog.xml.
 
I file di Liquibase sono di facile lettura e scrittura (vedi codice seguente), il file è suddiviso in changeset, ognuno con un id univoco, che realizzano le operazioni di una particolare versione. 
 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<databaseChangeLog xmlns="http://www.liquibase.org/xml/ns/dbchangelog"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.liquibase.org/xml/ns/dbchangelog 
    http://www.liquibase.org/xml/ns/dbchangelog/dbchangelog-2.0.xsd">

    <changeSet id="blog-1" author="Giampiero Granatella">

        <createTable tableName="post">
            <column name="id" autoIncrement="true" type="int">
                <constraints nullable="false" primaryKey="true"/>
            </column>
            <column name="title" type="varchar(255)">
                <constraints nullable="false"/>
            </column>
            <column name="summary" type="text"></column>
            <column name="body" type="text">
                <constraints nullable="false"/>
            </column>
            <column name="author" type="varchar(100)">
                <constraints nullable="false"/>
            </column>
            <column name="date" type="date">
                <constraints nullable="false"/>
            </column>
        </createTable>
    </changeSet>

    <changeSet id="blog-2" author="Giampiero Granatella">
        <createTable tableName="comment">
            <column name="id" autoIncrement="true" type="int">
                <constraints nullable="false" primaryKey="true"/>
            </column>
            <column name="post" type="int">
                <constraints nullable="false"/>
            </column>
            <column name="comment" type="text">
                <constraints nullable="false"/>
            </column>
            <column name="author" type="varchar(100)">
                <constraints nullable="false"/>
            </column>
            <column name="date" type="date">
                <constraints nullable="false"/>
            </column>
        </createTable>
    </changeSet>

    <changeSet id="blog-3" author="Giampiero Granatella">
        <addForeignKeyConstraint baseTableName="comment" 
         baseColumnNames="post" 
         constraintName="fk_post" referencedTableName="post" 
         referencedColumnNames="id"/>
    </changeSet>

</databaseChangeLog>
Nel file di Liquibase ho creato tre changeSet, i primi due per creare la tabella “post” ("blog-1") e la tabella “comment”("blog-2"), il terzo per creare la chiave straniera che lega il commento al relativo post ("blog-3").  I post hanno i campi id, titolo, summary, testo,  autore e data. I commenti hanno un id, un testo, un autore e una data.
In seguito potete aggiungere nuovi changeSet e lasciare al motore Liquibase il compito di tenere aggiornato il vostro modello sulla base dati.
 
Eseguiamo un refresh del modello per lanciare lo script Liquibase appena creato: clicchiamo su "Administration" > "Reload Model". Successivamente sincronizziamo il database, "Administration" > "Connection providers" > "blog" e poi cliccare su “Synchronize”, per aggiornare il modello applicativo con gli oggetti nel database. 
 

Passo 3. Creiamo la pagina per i post

Creiamo ora la pagina per gestire i post, che sarà di tipo CRUD. Le operazioni CRUD sono la base di tutte le applicazioni orientate ai database. Per creare questo tipo di pagina clicchiamo sul simbolo “+”, l' “Add Page” in alto a destra e compiliamo i campi come nella seguente figura.
 
 

 

Notiamo che nel campo “Where” abbiamo selezionato “at the top level” per fare apparire la pagina al primo livello della navigazione.

Dopo aver cliccato su “Create New” possiamo configurare il CRUD del post come in figura.
 
 
 
Nel campo Query inseriamo la query HQL (Hibernate Query Language) “from post order by date desc, id desc”. La query restituisce tutte le righe della tabella “post” ordinate per data e id. 
Impostiamo anche “post” come nome della variabile; la utilizzeremo in seguito nella definizione dei commenti.
Salviamo e torniamo alla configurazione per completarla. 
 
Selezioniamo ora i campi da utilizzare nella CRUD e per definire quali saranno inseribili, quali modificabili, quali appariranno nel summary (la tabella con la lista degli oggetti) e nelle ricerche.

 

Come si nota dalla seguente figura il campo “id” e il campo “date” non sono né inseribili, né modificabili. Il campo id è gestito con un contatore dal database (vedi la definizione nel file Liquibase), mentre la data verrà generata automaticamente dal sistema alla creazione del post.  

 
Andiamo alla sezione Script Groovy in fondo alla pagina per inserire la data in automatico.
Ogni classe Groovy ha degli agganci (hook) predefiniti dove poter aggiungere la proprialogica applicativa. Per creare il campo data impostato ad oggi inseriamo la riga seguente nel metodo createSetup (eseguito prima di entrare nella pagina di creazione)
protected void createSetup(Object object) {
        object.date = new java.util.Date();
}
Notiamo l'utilizzo di object, che è l'elemento su cui stiamo lavorando reso persistente da Hibernate. Per accedere alle proprietà basta scrivere object.nomeProprietà. Nel nostro esempio salviamo la data odierna nel campo “date” di object.
Infine clicchiamo su “Update Configuration”.
 
Possiamo ora provare il nostro modello creando un post di esempio clicchiamo su “Create new”.
Notiamo che il campo Date è impostato alla data odierna come volevamo. Clicchiamo su “Save” e salviamo il nostro primo post.
La pagina di search sarà come nella figura seguente. 

Passo 4. Creiamo la pagina per i commenti

Affrontiamo ora la gestione dei commenti. La pagina con i commenti sarà figlia del post a cui fa riferimento. 
Per creare questo legame andiamo nella pagina col dettaglio del post  e da qui creiamo una nuova pagina.
 
 
Notare che il valore “as a child of Post” nel campo "Where" posiziona la pagina dei commenti come figlia di quella dei post.
Premiamo Create new e proseguiamo a inserire i dettagli.

In questo caso la query HQL filtra tutti i commenti con una clausola where che lega il commento al suo post.
%{#post.id} è un espressione OGNL che prende il campo id dalla variabile “post” salvata nel passo precedente.

Anche nei commenti inseriamo la data in automatico. Sempre nella creazione, gestiamo l'appartenenza di un commento al post . Come abbiamo già visto, realizziamo queste operazione nel metodo createSetup nello script Groovy.

protected void createSetup(Object object) {
        object.date = new java.util.Date();
        //Prendiamo l'id dalla variabile post
        object.post = ognlContext.post.id; 
}
Clicchiamo su “Update Configuration”.
 
Ora possiamo inserire un commento al nostro primo post. 
 
Vediamo ora come mettere la lista dei commenti nella stessa pagina del post. Portofino permette di mostrare una pagina figlia all'interno della pagina padre, torniamo al dettaglio del post e clicchiamo su “Page children” (in alto a destra, l'icona con la cartella). Impostaimo il flag "Embed in parent?" per i commenti.
 
 
 

E con questo abbiamo raggiunto il risultato finale del nostro primo tutorial.Nel prossimo tutorial inizieremo a vedere il funzionamento dei permessi e come cambiare la veste grafica. 

Leggi "Creiamo un blog con Portofino - parte 2"

 

 

comments powered by Disqus