Diario per Applicazioni Web, a.a. 2012/13

Matteo Vaccari > Applicazioni Web

Sommario

Lezione 0, 2012-10-05

Argomenti: HTTP, URI

Esercizi

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.

Esercizi svolti in laboratorio

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:

  1. Fai partire l'applicazione con Run As -> Java Application. Visualizza hello, world con nc (nc localhost 8080)
  2. Visualizza hello, world con il browser (http://localhost:8080/)
  3. Modifica il codice Java per restituire text/html, verifica che il testo ora appare con gli stili corretti nel browser.
  4. Metti netcat in ascolto (nc -l -p 8081). Visualizza la richiesta http del tuo browser andando ad aprire l'indirizzo http://localhost:8081/ Vai a vedere lo header "accept-language". Verifica qual'è il codice della lingua preferita.
  5. Modifica HelloServer per restituire "hello world" nella lingua preferita dall'utente:
  6. Modifica HelloServer così che, solo se il path richiesto è /image, restituisca al browser un'immagine. Scegli un file png o gif o jpeg qualsiasi, aprilo con FileInputStream e restituisci lo stream al posto del body.

Altri esempi di domande d'esame

Da studiare

Materiali per approfondimenti facoltativi

Lezione 1, 12/10/2012

Argomenti: HTML, Web Standards, Character Encodings

Da studiare

Approfondimenti facoltativi

Esercizi

  1. Scrivere un documento HTML che aperto nel browser abbia questo aspetto:
    Hello, World!
  2. Verificare che il codice dell'esercizio precedente sia HTML valido per mezzo del servizio http://validator.w3.org/
  3. Realizzare in HTML e validare con validator.w3.org:
    Hello, World!
  4. Nell'esercizio precedente, invece di scrivere “Perché” provate a scriverlo con il carattere “é” che si trova sulla tastiera. Verificate che cosa succede nei vari casi:
  5. Realizzare in HTML e validare con validator.w3.org:
    Rendering di una pagina HTML di esempio
    (La url dell'immagine è http://www.ruby-lang.org/images/logo.gif)
  6. Realizzare in HTML e validare con validator.w3.org:
    Form html
  7. Verificare che mettendo o togliendo la dichiarazione <!DOCTYPE html> in testa al documento, l'aspetto grafico della pagina cambia leggermente.

Altri esempi di domande d'esame

Lezione 2, 2012-10-26

Argomenti: Cascading Style Sheets (CSS), applicare stili a documenti HTML, creare layout di pagina ibridi e layout fissi.

Da studiare

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

Esempi visti a lezione

Esercizio

Applicare stili CSS a questo file HTML per fare in modo che, aperto in un browser, abbia il seguente aspetto:

Il file html con gli stili desiderati

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.

  1. Copia in una directory il file index.html. Crea un file vuoto “style.css”.

  2. 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%)
}

  1. Apri una nuova sezione nel file CSS, intitolata /* Typography and colors */ Scegli uno stile tipografico. Applica le seguenti proprietà:

  2. Scegli i colori

  3. Apri una nuova sezione nel file CSS, /* Page layout */ Scegli le dimensioni.

  4. Applichiamo una cornice a tutto il div che ha class="content"

  5. Diamo un po' di respiro:

  6. Stilizziamo il menu. Apri una nuova sezione /* Navigation menu */

  7. Il menu deve essere orizzontale. Per ottenere questo effetto occorre applicare diverse proprietà

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

Lezione 3, 2012-11-09

Argomenti: il linguaggio Ruby

La versione di Ruby che usiamo per queste lezioni è la 1.9.3. Per installarla:

Ubuntu
Eseguire sudo apt-get install ruby1.9.3
Mac OS X
Non è semplice. Occorre prima installare XCode, che contiene il compilatore C, necessario per compilare Ruby; poi installare rvm con il comando curl -L https://get.rvm.io | bash -s stable --ruby
Windows
Non è supportato per questo corso. Usa VirtualBox e installa Ubuntu su una macchina virtuale.

Per verificare che sia installata la versione corretta di Ruby, eseguire ruby -v.

Da studiare

Esercizio

Se non hai ancora scaricato il progetto git con gli esercizi, allora per prima cosa installa git

Ubuntu
Esegui sudo apt-get install git-core
Mac OS X
  1. Installa XCode
  2. Installa Homebrew con il comando
    ruby -e "$(curl -fsSkL raw.github.com/mxcl/homebrew/go)"
    Homebrew serve a installare programmi vari dalla riga di comando su Mac OS X.
  3. Installa git con il comando brew install git
Windows
No.

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

Lezione 4, 2012-11-16

Avviso: la prossima lezione sarà il 7 dicembre.

Argomenti: introduzione a Ruby on Rails. architettura Model-View-Controller, routes, controllers, views.

Studiare

Esercizio

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.

Lezione 5, 2012-12-07

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:

  1. index è l'azione che mostra un elenco degli User esistenti. Da lì posso passare a new per creare un nuovo User, oppure a edit per modificare uno qualsiasi degli User esistenti.
  2. show serve a mostrare uno User. Per sapere quale User deve mostrare, deve ricevere lo "id" dello User desiderato.
  3. new è un'azione che mostra una form per inserire un nuovo User. Quando premo il bottone di submit, i dati vengono mandati all'azione create.
  4. create cerca di creare un nuovo User. Se ha successo, ridirige con una redirect HTTP sulla pagina show dello User appena creato. Se fallisce, di solito perché i dati inseriti non sono validi, allora ripresenta la form popolata con i dati che avevo inserito e con appropriati messaggi di errore.
  5. edit è un'azione che mostra una form per modificare uno User esistente. Per poter identificare lo User che vogliamo modificare, deve ricevere lo "id" dello User. Quando premo il bottone di submit, viene invocata l'azione update.
  6. update cerca di modificare uno User. Per potere identificare lo User che vogliamo modificare, ha bisogno di ricevere lo "id" di quello User. Se la modifica ha successo, mi ridirige con una redirect HTTP sulla pagina di show per lo User appena modificato; se i dati sono invalidi, mostra di nuovo la pagina di edit con i messaggi di errore e i dati che l'utente ha inserito.
  7. destroy (non vista a lezione) serve a cancellare uno User.

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.

Esercizi

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.

Studiare

Lezione 6, 2012-12-21

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.

Esercizi

L'esercizio si trova su github. Le istruzioni sono nel README.

Studiare

Lezione 7, 2013-01-11

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:

  1. Authentication From Scratch di Ryan Bates. E' uno screencast, ma c'è anche una trascrizione. Noi abbiamo usato SHA256 invece di bcrypt, giusto per comodità ed evitare di dover installare una gemma addizionale. Se volete capire perché è meglio usare bcrypt, leggete How to safely store a password (facoltativo).
  2. Action Controller Overview, i capitoli Session e Cookies

Lezione 8, 2013-01-18

Usare le associazioni in un'applicazione Rails.

Abbiamo visto

Studiare:

  1. A Guide to Active Record Associations, capitoli:
  2. Il problema delle N+1 queries

Esercizio: è descritto nel README.

Lezione 9, 2013-01-22

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.

Studiare:

Lezione 10, 2013-01-24

Sicurezza. Sql injection, Cross-site scripting.

Esercizio: creare un'applicazione per gestire le Todo-list. Vedi il README.

Studiare:

Lezione 11, 2013-01-25

Ricapitoliamo. Abbiamo fatto un esempio di esame scritto. Prova a risolverlo, poi confronta la soluzione con la soluzione suggerita.