Creiamo un blog con Portofino

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

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

> cd portofino-4.0.8/apache-tomcat-6.0.36/

> bin/startup.sh 

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

1. creare la struttura direttamente sul DB al di fuori di Portofino,
2. utilizzare Liquibase gestito da Portofino e tenere traccia delle versioni.

<?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.

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.  

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"