Rails on the road

L’applicazione web che mostrerà in questo articolo riguarda la creazione di un semplice TODO list (lista delle cose da fare). So che su diversi siti è possibile trovare esempi di questo tipo, ma non tutti utilizzano AJAX e soprattutto non sono in italiano :-).

Obiettivo Questo tutorial non si concentrerà sulla grafica delle pagine HTML, ma su come utilizzare AJAX per aggiungere e spuntare le cose da fare all’interno di una lista.

Tutorial Allora cominciamo con la costruzione del Database. In questo esempio utilizzerà MySQL.

Per amministrare il database è possibile utilizzare la console di MySQL o applicazioni come CocoaMySQL (applicazione solo per Mac OS x), MySQL Administrator (applicazione multipiattaforma), phpMyAdmin (applicazione web) o qualsiasi altro strumento capace di connettersi a MySQL .

Supponiamo di avere bisogno di due tabelle, la prima per inserire il nome delle liste, mentre la seconda per memorizzare le cose da fare. Lo script MySQL per generare le due tabelle è:

    1 CREATE DATABASE `todo_development`;
    2 CONNECT todo_development;
    3 CREATE TABLE `todos` ( 
    4   `id` INT NOT NULL AUTO_INCREMENT ,
    5   `name` VARCHAR( 100 ) NOT NULL ,
    6   `done` TINYINT DEFAULT '0' NOT NULL ,
    7   PRIMARY KEY ( `id` )
    8 );
    9 CREATE TABLE `todo_items` (
   10   `id` INT NOT NULL AUTO_INCREMENT ,
   11   `name` VARCHAR( 100 ) NOT NULL ,
   12   `done` TINYINT DEFAULT '0' NOT NULL ,
   13   `todo_id` INT NOT NULL,
   14   PRIMARY KEY ( `id` )
   15 );
   16 

A questo punto è necessario creare la struttura della nostra applicazione Rails, che chiameremo Todo. Da console (per gli utenti Windows lanciate il prompt dei comandi cliccando su Start, esegui e scrivendo “cmd”) eseguire il seguente comando:

    1 rails todo

Così facendo l’albero delle cartelle ed i file necessari alla nostra applicazione vengono creati automaticamente dal framework (che spettacolo e il tutto con un solo comando).

Creiamo adesso il nostro primo controller (un controller accetta le richieste web e serve per elaborare e successivamente presentare i dati e le informazioni (nel nostro caso le liste da fare) al navigatore. Per crearlo lanciamo sempre da console la seguente istruzione:

    1 ruby script\generate scaffold Todo Lists

dove con scaffold chiediamo al rails di creare per noi le operazioni elementari da inserire nel controller Lists da eseguire sulla tabella todos creata precedentemente.

A questo punto bisogna dire alla nostra applicazione il nome del database e i vari parametri per effettuare la connessione al database MySQL creato precedentemente. Aprire il file database.yml presente all’interno della cartella config e apportare le modifiche in modo che il file risulti come il seguente:

    1 development:
    2   adapter: mysql
    3   database: todo_development
    4   host: localhost
    5   username: user_db
    6   password: password_db
    7 test:
    8   adapter: mysql
    9   database: todo_test
   10   host: localhost
   11   username: user_db
   12   password: password_db
   13 production:
   14   development

Dove al posto di host mettete il nome dell’host su cui si trova MySQL Server (nella maggior parte dei casi va bene localhost), al posto di userdb il nome dell’utente che utilizzate per accedere al database e al posto di passworddb la password associata all’utente user_db.

Lanciate il server WEBrick da console con il seguente comando:

    1 ruby script\server

Se avevate già lanciato il server stoppatelo e riavviatelo per rendere attive le modifiche effettuate al file database.yml.

Aprite un browser e connettetevi all’indirizzo http://127.0.0.1:3000/lists e dovreste vedere la vostra semplice applicazione in cui sarà già possibile inserire, cancellare e modificare le liste delle cose da fare (anche se per ora non è possibile aggiungere elementi alle liste).

    1 ruby script\generate model TodoItem

La prima cosa da effettuare è quella di correlare i nostri modelli (presenti all’interno della cartella app\models) in modo da semplificare la gestione delle relazioni durante l’aggiunta, la modifica o la cancellazione di dati al db. Il file di modello è infatti una classe che una volta istanziata rappresenterà un record della tabella corrispondente nel db. Nel nostro caso, il file todo.rb rappresenterà le nostre liste all’interno della tabella todos. All’interno del file inserire la seguente riga:

    1 has_many :todo_items

mentre all’interno di todo_item.rb inserire la seguente riga:

    1 belongs_to  :todo

Adesso che abbiamo indicato al rails le nostre relazioni possiamo passare alla parte di programmazione vera e propria. La cosa più logica da fare è quella di permettere la creazione delle cose da fare all’interno di una lista nel momento in cui stiamo visualizzando una di queste, andremo quindi ad inserire il codice in modo da creare cose da fare nella pagina show.rhtml, presente nella cartella app\views\todo. Per rendere più semplice la cosa procederemo implementando le funzioni senza l’utilizzo dell’AJAX e poi aggiusteremo le cose dopo.

Alla fine del file aggiungete le seguenti righe di codice:

    1 <h3>Cose da fare</h3>
    2 <%= render :partial => "todo_item", :collection => @todo.todo_items %>
    3 <%= form_tag :action => 'add_todo_item', :id => @todo %>
    4 <%= text_field 'todo_item', 'name' %>
    5 <%= submit_tag 'Aggiungi cosa da fare' %>
    6 <%= end_form_tag %>

Create il file todoitem.rhtml all’interno della cartella app\views\lists e inserite all’interno il seguente codice:

    1 <%= todo_item.name %>
    2 <% if todo_item.done == 0 %>
    3 <%= link_to 'fatto', :action=>'check_todo_item', :id => todo_item %>
    4 <% else %>
    5 <%= link_to 'da fare', :action=>'uncheck_todo_item', :id => todo_item %>
    6 <% end %>
    7 

All’interno del controller lists il seguente codice:

    1 def add_todo_item
    2   @todo = Todo.find(params[:id])
    3   @todo.todo_items.create(params[:todo_item])
    4   if @todo.done == 1
    5     @todo.done = 0
    6     @todo.save
    7   end      
    8   redirect_to :action => 'show', :id => params[:id]
    9 end
   10 
   11 def check_todo_item
   12   @todo_item = TodoItem.find(params[:id])
   13   @todo_item.done=1
   14   if @todo_item.save
   15     @todo=@todo_item.todo
   16     if @todo.todo_items.count('done = 0') == 0
   17       @todo.done = 1
   18       @todo.save
   19     end 
   20     redirect_to :action => 'show', :id => @todo_item.todo
   21   end
   22 end
   23 
   24 def uncheck_todo_item
   25   @todo_item = TodoItem.find(params[:id])
   26   @todo_item.done=0
   27   if @todo_item.save
   28     if @todo_item.todo.done==1
   29       @todo_item.todo.done=0
   30       @todo_item.todo.save
   31     end
   32     redirect_to :action => 'show', :id => @todo_item.todo
   33   end
   34 end

Fine della prima parte.