Argomenti: HTTP, URI
Per eseguire questi esercizi usa Linux oppure un Mac. Non Windows. Se non hai una macchina Linux, puoi usare una macchina virtuale: scarica VirtualBox e installaci sopra Ubuntu.
Scarica da github il codice visto a lezione. Per farlo, assicurati di avere installato il comando "git" (apt-get install git-core) e poi esegui
git clone https://github.com/xpmatteo/applicazioni-web-2012.git
Poi apri Eclipse e importa il progetto: Import -> Existing Projects Into Workspace -> seleziona la directory sample-http-server
Esercizi:
Materiali per approfondimenti facoltativi
Argomenti: HTML, Web Standards, Character Encodings
Approfondimenti facoltativi
<meta charset="UTF-8"/>
nella head
del documento<meta charset="ISO-8859-1"/>
<!DOCTYPE html>
in testa al documento, l'aspetto grafico della pagina cambia leggermente.
Altri esempi di domande d'esame
id
e class
?Argomenti: Cascading Style Sheets (CSS), applicare stili a documenti HTML, creare layout di pagina ibridi e layout fissi.
Studiare questi articoli:
Esempi di domande d'esame
Non è necessario imparare a memoria tutte le proprietà e i loro possibili valori. E' necessario però conoscere per lo meno le proprietà che usiamo negli esempi visti a lezione e nell'esercizio (vedi più avanti).
Approfondimenti facoltativi
Applicare stili CSS a questo file HTML per fare in modo che, aperto in un browser, abbia il seguente aspetto:
Esegui l'esercizio secondo i passi che seguono. Devi modificare solo il file style.css, non il file html. Importante: dopo ogni minima modifica al CSS, ricarica la pagina nel browser per osservare l'effetto.
Copia in una directory il file index.html. Crea un file vuoto “style.css”.
Metti una prima sezione nel file style.css copiando il frammento che segue. Apri index.html nel browser e osserva gli sfondi colorati. Questi serviranno per aiutarci a visualizzare questi due elementi nel corso dello sviluppo. Quando avremo ottenuto il risultato desiderato, la sezione Debug la commenteremo.
/* Debug */ aside { background-color: rgb(85%, 85%, 100%); } article { background-color: rgb(85%, 100%, 85%) }
Apri una nuova sezione nel file CSS, intitolata /* Typography and colors */
Scegli uno stile tipografico. Applica le seguenti proprietà:
Scegli i colori
a
): color: #A1805CApri una nuova sezione nel file CSS, /* Page layout */
Scegli le dimensioni.
Applichiamo una cornice a tutto il div che ha class="content"
Diamo un po' di respiro:
Stilizziamo il menu. Apri una nuova sezione /* Navigation menu */
a
) devono essere in grassetto (font-weight: bold)a:hover
Il menu deve essere orizzontale. Per ottenere questo effetto occorre applicare diverse proprietà
A questo punto, se allarghiamo la finestra, possiamo vedere che il .content si allinea a destra del menu! E' perché sia il menu che il .content sono fluttuati a sinistra. Per evitare questo effetto applichiamo la proprietà clear: left a .content
Argomenti: il linguaggio Ruby
La versione di Ruby che usiamo per queste lezioni è la 1.9.3. Per installarla:
Per verificare che sia installata la versione corretta di Ruby, eseguire ruby -v.
Se non hai ancora scaricato il progetto git con gli esercizi, allora per prima cosa installa git
Se è la prima volta che scarichi il progetto con gli esercizi, esegui
git clone https://github.com/xpmatteo/applicazioni-web-2012.git
altrimenti aggiorna con
git pull
L'esercizio si trova nella cartella Lezione03. Le istruzioni sono nel file README.md
Avviso: la prossima lezione sarà il 7 dicembre.
Argomenti: introduzione a Ruby on Rails. architettura Model-View-Controller, routes, controllers, views.
Aggiorna il repository degli esercizi con
git pull
Nella directory Lezione04/quotes c'è un'applicazione Rails. Nel README ci sono le istruzioni per l'esercitazione.
Argomenti: Rails controllers e views. Le 7 azioni canoniche.
Abbiamo presentato una semplice applicazione che imita Twitter. A lezione ho mostrato come sviluppare la gestione degli utenti:
Queste sono le 7 azioni canoniche di Rails, che servono a Creare, Leggere, Modificare e Cancellare una risorsa, in questo caso gli User. In inglese si dice CRUD (Create, Read, Update, Destroy.)
L'esercizio svolto in laboratorio consisteva nell'implementare il CRUD per la risorsa Tweet (che sarebbe come un blog post, ma limitato a 140 caratteri.)
Normalmente un'applicazione web usa un database per conservare i dati. Nell'esempio didattico presentato oggi, abbiamo simulato il database con un array di oggetti. La logica di salvataggio è implementata nella classe User e nella classe Tweet.
Come sempre, per realizzare gli esercizi consiglio di usare una macchina Linux, per esempio Ubuntu. Se non hai Linux, consiglio di creare una macchina virtuale con VirtualBox e installarci sopra Ubuntu. Dopodiché
In generale, su ubuntu vanno evitati i pacchetti Ruby e Rails di Ubuntu (quelli installati con apt-get). Per Ruby e Rails usiamo rvm.
Per gli esercizi è tassativo usare Ruby versione 1.9.3, e Rails versione 3.2.9. Eseguire
rails -v
sulla riga di comando. Se la shell dice che il comando rails non esiste, i casi sono due: o rvm non è installato, oppure non è stato caricato l'ambiente rvm. Nell'ultimo caso potrebbe servire il comando
source .rvm/environments/default
L'esercizio si trova su github. Le istruzioni sono nel README.
Argomenti: Uso del database in Rails. Validazioni.
Abbiamo riscritto l'applicazione Twitter per usare il database; per default Rails usa sqlite3. Abbiamo visto che la configurazione del database si trova nel file config/database.yml
. La libreria (parte di Rails) che ci permette di usare il database si chiama ActiveRecord. I modelli di AR sono oggetti che rappresentano una riga di database; la classe User corrisponde alla tabella users.
Per creare un nuovo modello la maniera più semplice è usare un comando tipo
rails generate model User username:string email:string
Questo crea il modello in app/models/user.rb, e la migrazione in db/migrations/....create_users.rb. La migrazione è un frammento di schema SQL descritto in Ruby. Le migrazioni permettono di sviluppare lo schema del database in maniera incrementale. Per eseguire le migrazioni si usa il comando
rake db:migrate
Una volta che abbiamo eseguito le migrazioni, possiamo ispezionare lo stato del database con il comando
rails dbconsole
che apre la console di Sqlite3. Possiamo anche manipolare i modelli con il comando
rails console
che apre un prompt di Ruby interattivo con tutta l'applicazione Rails precaricata.
Un breve sommario dell'API di ActiveRecord.
Per creare un modello:
u = User.new
u.username = "pippo"
u.email = "a@b.c"
u.save # restituisce true se ha successo
Oppure si può anche passare una hash di parametri
u = User.new(:username => "pippo", :email => "a@b.c")
u.save
Per interrogare il database:
# restituisce l'utente che ha id=123 oppure lancia RecordNotFound
User.find(123)
# restituisce il primo oggetto che soddisfa il vincolo, oppure nil
User.where("name = 'matteo'").first
# restituisce il primo oggetto che soddisfa il vincolo, oppure lancia
# RecordNotFound
User.where("name = 'matteo'").first!
# Ricerca parametrica rispetto a dati provenienti dall'esterno
u = params[:username]
User.where("name = ?", u).first
# Restituisce *tutti* gli oggetti che soddisfano il vincolo
User.where(...).all
# In ordine di data di creazione
User.where(...).order("created_at").all
Un modello AR può anche contenere validazioni. Ad esempio, per specificare che uno User deve avere uno username e una email non vuoti, possiamo dire
class User < ActiveRecord::Base
validates :username, :presence => true
validates :email, :presence => true
end
A questo punto non è più possibile salvare nel database uno User se non ha i due attributi username e email valorizzati. Quello che succede se ci proviamo è che la chiamata a save
oppure a update_attributes
restituiscono false
e non salvano nulla. Possiamo a questo punto esaminare tutti gli errori con
user.errors.full_messages
Dal punto di vista delle form, è importante notare che se noi diamo ai campi delle form dei nomi tipo user[questo] e user[questaltro], Rails ci presenterà i parametri nel controller raggruppati con una hash: potremo dire
params[:user]
e questo ci restituirà una hash che contiene tutti i parametri dello user.
L'esercizio si trova su github. Le istruzioni sono nel README.
Argomenti: Cookies, sessioni, autenticazione e autorizzazione
Abbiamo visto come funzionano i cookie a livello HTTP; come utilizzarli per salvare informazioni lato client. Come si usano i cookie in Rails.
Le sessioni: che cosa sono e come si implementano con i cookie. Come si usa la sessione in Rails; come funziona il Cookie Store, come funziona ActiveRecord Store, come scegliere l'uno o l'altro.
Abbiamo visto come implementare l'autenticazione per mezzo di password nella nostra applicazione di esempio.
Altro esempio che abbiamo visto: come usare i cookie per implementare un contatore del numero di volte che un utente ha ricaricato una pagina; poi abbiamo visto come fare lo stesso con la sessione.
Esercizio svolto a lezione: è descritto nel README.
Da studiare:
Usare le associazioni in un'applicazione Rails.
Abbiamo visto
Studiare:
Esercizio: è descritto nel README.
Argomento: controllo delle versioni (dei sorgenti.) Abbiamo visto come e perché usare un sistema di Version Control. Abbiamo visto nello specifico come usare Git.
Esercizio svolto (con molta fatica) in laboratorio: vedi il README.
Sicurezza. Sql injection, Cross-site scripting.
Esercizio: creare un'applicazione per gestire le Todo-list. Vedi il README.
Ricapitoliamo. Abbiamo fatto un esempio di esame scritto. Prova a risolverlo, poi confronta la soluzione con la soluzione suggerita.