Guida Ruby on Rails: page layout
Commenti disabilitati su Guida Ruby on Rails: page layout
Nello scorso articolo abbiamo accantonato momentaneamente lo sviluppo della nostra applicazione cbookcase per dare spazio alla fase della convalida e del testing. Riprendiamo quindi a scrivere codice per il nostro catalogo online di libri!
Fino ad ora ci siamo concentrati sulla parte amministrativa dell’applicazione, curando le view dedicate alla gestione dei libri. Ma come vogliamo mostrarla all’utente che visiterà il nostro sito? Quale sarà il layout dello store e come lo costruiremo? Scopriamolo subito!
Creiamo lo store
La prima cosa da fare è creare un controller denominato store con lo stesso procedimento già utilizzato in precedenza. Apriamo, quindi, il terminale e digitiamo:
rails generate controller Store index
A procedura ultimata possiamo, come è consuetudine, visualizzare il frutto dell’operazione all’indirizzo localhost:3000/store/index. Ma non ci basta: vogliamo che questa pagina compaia come index, dal momento che contiene tutto ciò che l’utente si aspetta di vedere a primo impatto visitando il nostro sito. Apriamo il file config/routes.rb e aggiungiamo al codice:
root 'store#index', as: 'store'
Il risultato dei nostri sforzi sarà che, aprendo l’index all’indirizzo localhost:3000, vedremo comparire:
Ovviamente in questa pagina attualmente vuota dobbiamo visualizzare tutti i prodotti attualmente disponibili, gli stessi che gestiamo dalla pagina di amministrazione. Come prima cosa occupiamoci di far comunicare il controller con il model per richiedere la lista dei prodotti disponibili ordinati per titolo. Apriamo controllers/store_controller.rb e aggiungiamo:
def index @books = Book.order(:title) end
Scriviamo, quindi, la relativa view aprendo il file views/store/index.html.erb e digitiamo:
<% if notice %> <p class="notice"><%= notice %></p> <% end %> <h1>Catalog</h1> <% @books.each do |book| %> <div class="entry"> <%= image_tag(book.image)%> <h3><%= book.title %></h3> <%= sanitize(book.description)%> <div class="price_line"> <span class="price"><%= number_to_currency(book.price) %></span> </div> </div> <% end %>
Fermiamoci un attimo ad analizzare il codice per capire esattamente cosa avviene.
Con il codice <% @books.each do |book| %> creiamo il ciclo che andrà a formare un div per ogni libro e che conterrà, per ognuno: il tag img generato dal metodo image_tag, la descrizione passata tramite sanitize e il prezzo formattato grazie a number_to_currency. A questa struttura dobbiamo ovviamente affiancare un foglio di stile; apriamo assets/stylesheet/store.css.scss e scriviamo:
.store {
h1 {
margin: 0;
padding-bottom: 0.5em;
font: 150% sans-serif;
color: #69D2E7;
border-bottom: 3px dotted #69D2E7;
}
.entry {
overflow: auto;
margin-top: 1em;
border-bottom: 1px dotted #69D2E7;
height: 172px;
img {
width: 100px;
height: 162px;
margin: 0 5px 5px 0;
position: absolute;
}
h3 {
font-size: 120%;
font-family: sans-serif;
margin-left: 120px;
margin-top: 0;
margin-bottom: 2px;
color: #F38630;
}
p, div.price_line {
margin-left: 120px;
margin-top: 0.5em;
margin-bottom: 0.8em;
}
.price {
color: #69D2E7;
font-weight: bold;
margin-right: 3em;
}
}
}
Il risultato dovrebbe ora somigliare a:
Aggiungiamo un layout
Non ci basta certo che la index restituisca i libri a catalogo; un’intestazione e una barra di navigazione sono elementi essenziali per completare una, seppur minimale, interfaccia grafica. Per far ciò, dobbiamo operare su quello che in gergo viene denominato layout e che, nelle applicazioni Ruby on Rails, è contenuto nella cartella views/layouts; nel nostro caso il file si chiamerà application.html.erb. Il nuovo contenuto sarà:
<!DOCTYPE html> <html> <head> <title>Cbookcase</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> </head> <body class="<%= controller.controller_name %>"> <header> <%= @page_title || "cbookcase"%> </header> <aside> <nav> <ul> <li><a href="#">home</a></li> <li><a href="#">promo</a></li> <li><a href="#">faq</a></li> <li><a href="#">contact</a></li> </ul> </nav> </aside> <section> <%= yield %> </section> </body> </html>
Anche questa volta analizziamo più da vicino il codice che abbiamo appena utilizzato, tralasciando l’ovvio codice html. Nella sezione head sono presenti importanti elementi:
- stylesheet_link_tag e javascript_include_tag — generano i collegamenti ai relativi fogli di stile e script e abilitano l’opzione data-turbolink-track;
- csrf_meta_tags — previene gli attacchi di tipo cross-site scripting. Avremo modo di approfondire questo argomento nel corso delle prossime lezioni.
Nel body — in particolare all’interno del tag <section> — è invece presente <%= yield %>, il quale ha il magico compito di riempire la pagina con la view invocata, nel nostro caso: store/index.html.erb.
Non ci resta che creare, nel file assets/stylesheets/application.css.scss, il relativo foglio di stile:
body {
margin: 0px;
padding: 0px;
}
header {
background: #A7DBD8;
padding: 10px;
height: 80px;
line-height: 80px;
border-bottom: 2px solid;
font-size: 40px;
color: #F38630;
text-align: center;
}
#notice {
color: #000 !important;
border: 2px solid red;
padding: 1em;
margin-bottom: 2em;
background-color: #F0F0F0;
font: bold smaller sans-serif;
}
aside {
float: left;
padding: 1em 2em;
width: 13em;
min-height: 600px;
background: #E0E4CC;
}
ul {
padding: 0;
}
li {
list-style: none;
}
a {
color: #F38630;
font-size: small;
text-decoration: none;
}
a:hover {
background: #E0E4CC;
color: #000;
}
section {
margin-left: 17em;
padding: 1em;
background: white;
}
per ottenere questo risultato finale:
Conclusione
Adesso che abbiamo creato la pagina del nostro store ti sarai senz’altro reso conto dell’assenza di una parte fondamentale: la possibilità di aggiungere un prodotto al carrello! Nel corso del prossimo articolo ci dedicheremo proprio alla creazione di un carrello basilare che, nelle successive lezioni, renderemo sempre più dinamico ed efficiente grazie all’utilizzo di tecnologie AJAX.
Nel frattempo, come al termine di ogni lezione, puoi scaricare il codice integrale da questo link.
GUIDA RUBY ON RAILS: INDICE LEZIONI
1) Introduzione
2) L’ambiente di lavoro e la nostra prima app
3) Un assaggio di dinamicità
4) Architettura di un’applicazione
5) Il linguaggio Ruby – Parte 1
6) Il linguaggio Ruby – Parte 2
7) Creiamo c-Bookcase
8) Convalida e test
9) Guida Ruby on Rails: page layout
10) Guida Ruby on Rails: creiamo il carrello
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
