Poi dobbiamo creare un file modello sotto blog/app/modelli…
article.rb
<<< MAY 2019 UPDATE FROM THE AUTHOR >>>
Invece di usare il visual text editor, puoi anche creare il file attraverso il terminale:
cd app/models
touch article.rb
<<< END UPDATE >>>
Ora torniamo nell’editor di testo visivo e dentro l’articolo.rb model…
class Article < ActiveRecord::Baseend
Passo 7: Dentro la Console di Rails
Ora, possiamo saltare dentro la console di Rails e testare la connessione alla tabella…
$ rails c
Poi chiama tutti gli articoli…
$ Article.all
Si dovrebbe vedere una query SQL che assomiglia a…
(Se hai navigato nella linea di comando attraverso la directory del blog, potresti avere un errore qui. Assicurati di tornare nella directory dell’app o il tuo comando Article.all qui sotto restituirà un errore.)
Scrivendo solo ‘Article’ ti darà tutti gli attributi della tabella…
Altri comandi…
article = Article.new
Creerà un nuovo articolo salvato nella variabile ‘article’ con gli attributi:
Ora, possiamo aggiungere un titolo e una descrizione manualmente attraverso la console di rails…
Ora dobbiamo salvare questi dati..
article.save
Questo comando genererà una query SQL per inserire questi nuovi valori nella tabella degli articoli…
Possiamo creare un altro articolo tutto in una volta usando “assegnazione di massa”…
article = Article.new(title: "This is my second article", description: "This is my second description")
Anche qui, dobbiamo salvare l’articolo…
article.save
Walah…
Possiamo farlo in un terzo modo usando il metodo create…
Article.create(title: "This is my third title", description: "This is my third description")
E salverà automaticamente l’articolo…
Ora facciamo finta di voler modificare uno di questi articoli… Prima dobbiamo prendere l’articolo…
article = Article.find(2)
Poi possiamo modificare l’articolo e salvare l’articolo…
article.title = "This is an edited second article"
E poi salvare…
article.save
Genererà la query SQL necessaria…
Ora stiamo per eliminare un articolo… Prima prendi l’articolo…
article = Article.find(3)
Poi cancella…
article.destroy
Walah…
Step 8: Aggiungere convalide per imporre vincoli agli articoli
Nell’articolo.rb…
class Article < ActiveRecord::Base
validates :title, presence: trueend
Questo richiederà che tutti i nuovi articoli contengano un titolo. Possiamo testarlo nella console di rails (non dimenticate di riavviare la console di rails dopo aver aggiornato il modello! Grazie Mike Boyd e Andrew Linck per i promemoria)…
article = Article.new
poi prova a salvare senza aggiornare il titolo…
article.save
boom…
Possiamo fare la stessa cosa per la descrizione…
class Article < ActiveRecord::Base
validates :title, presence: true
validates :description, presence: trueend
E vi impedirà di creare un articolo senza descrizione anche se ha un titolo… (di nuovo, assicuratevi di riavviare la console rails dopo aver aggiornato il modello.)
Puoi controllare i tuoi errori con questi comandi…
article.errors.any?
article.errors.full_messages
Prossimo, aggiungeremo le validazioni di lunghezza…
Fico.
Poi vogliamo che gli utenti siano in grado di eseguire queste stesse azioni nel browser, quindi dovremo impostare percorsi, controllori e viste per creare e salvare articoli!
Passo 9: Aggiungere la possibilità di creare articoli dal browser
Il ciclo di vita di un nuovo articolo…
Guarda i primi 2 minuti del Corso Udemy della Sezione 4, Lezione 63 per una panoramica completa…
Prima, affrontiamo le nostre rotte…
Nel file routes.rb, aggiungete questa linea …
resources :articles
Questo ci dà tutti i tipi di percorsi per aggiornare, cancellare, creare, mostrare, ecc.
Controlla i nuovi percorsi con… MA ATTENZIONE, prima di controllare i percorsi assicurati di essere tornato fuori dalla console di rails inserendo:
exit
allora,
$ rake routes
Cool.
Ora, abbiamo bisogno di un nuovo controller… Crea questo file sotto app/controllers.
touch articles_controller.rb#or just create the file using the visual text editor
E poi all’interno del nuovo file controller…
class ArticlesController < ApplicationControllerend
Ora, dobbiamo creare una nuova cartella sotto le viste per salvare i nostri file di visualizzazione degli articoli… La cartella dovrebbe chiamarsi ‘articles’
<<< AGGIORNAMENTO DALL’AUTORE >>>
Prova a usare la riga di comando invece dell’editor di testo visivo:
cd views
mkdir articles
cd articles
<<< END UPDATE >>>
Ora, stiamo per creare un nuovo file sotto ‘articles’ chiamato…
touch new.html.erb# or create using the visual text editor
E poi dobbiamo aggiornare il nostro articles_controller.rb:
class ArticlesController < ApplicationController
def new
end
end
Save.
In questa pagina new.html.erb, memorizzeremo il nostro modulo per catturare titolo e descrizione.
Ma prima, assicuriamoci che la pagina funzioni… Aggiungi:
<h1>Create an article</h1>
E poi carica il server…
Ci dà…
Grande. Funziona.
Ora, creiamo il modulo supportato dal modello. Rails fornisce metodi di aiuto per i form qui.
Nel file new.html.erb…
<h1>Create an Article</h1><%= form_for @article do |f| %><% end %>
E abbiamo iniziato una variabile di istanza, quindi ora dobbiamo creare la variabile nel nostro controller…
class ArticlesController < ApplicationControllerdef new
@article = Article.new
endend
Grande. Tutto funziona bene…
Ora, raccogliamo qualche dato…
<h1>Create an Article</h1><%= form_for @article do |f| %>
<p>
<%= f.label :title %>
<%= f.text_field :title %>
</p><% end %>
E carichiamo la pagina per vedere cosa abbiamo fatto…
Grande. Funziona…
Ora, finiamo il modulo…
Grande. Tutto ciò di cui abbiamo bisogno…
Ora, dobbiamo creare un’azione ‘create’ nel controller…
class ArticlesController < ApplicationControllerdef new
@article = Article.new
enddef create
render plain: params.inspect
endend
Quando compili il modulo e poi invii, vedrai questi dati:
Ma noi vogliamo che questi dati siano salvati nel database…
Ma questo non basta… vogliamo anche mostrare l’articolo…
Utilizziamo un percorso che abbiamo già creato, e passiamo la variabile di istanza del nuovo articolo…
redirect_to articles_show(@article)
Tutto il codice…
Ma non basta, vero? Vogliamo rifattorizzare questo codice per dare un avviso se l’articolo è stato creato con successo:
E ora ci assicureremo che i nostri messaggi flash possano essere visti in tutte le pagine…
Nel corpo del file application.html.erb…
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
E ora vogliamo assicurarci che vengano visualizzati anche gli errori…
Nel file new.html.erb…
Grande. Ora ci mostrerà gli errori nell’URL articoli/nuovo:
Ora assicurati che l’azione show sia stata creata…
def show
@article = Article.find(params)
end
Ora dobbiamo creare una pagina per mostrare le informazioni…
Chiameremo quel file…
show.html.erb
In quella pagina…
<h1>Showing selected article</h1><p>
Title: <%= @article.title %>
</p><p>
Description: <%= @article.description %>
</p>
E questo renderà…
(Hai un errore? Ecco la soluzione ad un errore comune: creare il file show.html.erb nel posto sbagliato)
Hurrah. Ora lavoreremo sulla modifica degli articoli…
Passo 10: Modifica degli articoli
Dobbiamo creare l’azione di modifica nel controller… Quale controller? Il controllore degli articoli, naturalmente!
def edit
end
E dobbiamo creare il modello di modifica nelle viste… In quale cartella? La cartella delle viste articoli, naturalmente!
edit.html.erb
Ora dobbiamo costruire un modulo per modificare…
Possiamo effettivamente fare un copia/incolla dal modulo new.html.erb. Useremo lo stesso form per aggiornare un articolo corrente che abbiamo usato per creare un nuovo articolo.
Ora, completiamo la nostra azione di modifica nel controller…
def edit
@article = Article.find(params)
end
Ora, abbiamo bisogno di aggiungere un’azione di aggiornamento…
Passo 11: Aggiungere l’indice degli articoli, e aggiungere i link di modifica/mostra
Aggiungi azione indice in articles_controller.rb…
def index
@articles = Article.all
end
Poi dobbiamo creare il template… In quale directory views metteremo questo file?
index.html.erb
E dentro questo file…
Questo ci dà…
Fico. Ora aggiungiamo i link modifica e mostra per ogni articolo…
<td><%= link_to 'Edit', edit_article_path(article) %></td>
<td><%= link_to 'Show', article_path(article) %></td>
Il codice sembra…
Ci dà…
Ora aggiungiamo dei link ‘Indietro’ alla modifica, alla visualizzazione e alla nuova pagina… Vai avanti e salta nelle rispettive pagine e aggiungi i nuovi link così:
<%= link_to 'Back', articles_path %>
Io ho aggiunto i miei in fondo ad ogni file.
E aggiungiamo un link di modifica nella pagina di presentazione…
<%= link_to "Edit", edit_article_path(@article) %>
Passo 12: Rifattorizzare i moduli in un unico parziale
Creiamo un nuovo file direttamente nelle viste/articoli.
_form.html.erb
Copia/incolla i dati del modulo in questo file…
Poi renderizza il modulo nella pagina nuova e modifica…
<%= render 'form' %>
Dovresti aver eliminato tutte le vecchie informazioni del modulo e aggiunto lo snippet di codice circa alla pagina nuova e modifica in modo che ognuno assomigli a questo:
<h1>Edit Article</h1><%= render 'form' %><%= link_to 'Back', articles_path %>
Ora, aggiungeremo l’azione di distruzione…
Passo 13: Aggiungere l’azione di distruzione
Nel controller…
Quale controller? Lo sai già.
Ora, dobbiamo aggiungere i link alle pagine da cui vogliamo essere in grado di cancellare. Usando il link qui sotto…
<%= link_to 'Delete', article_path(article), method: :delete, data: {confirm: "Are you sure?"} %>
…aggiungi alle pagine dove vorresti che l’utente possa cancellare.
Se aggiungo alla nostra pagina indice, sarà come…
Se aggiungiamo alla nostra pagina spettacolo, dovremo modificare leggermente il link distruggi per imitare la struttura del link modifica. Vedi cosa intendo?
Questo:
<%= link_to 'Delete', article_path(@article), method: :delete, data: {confirm: "Are you sure?"} %>
Invece di questo:
<%= link_to 'Delete', article_path(article), method: :delete, data: {confirm: "Are you sure?"} %>
Passo 14: Rifattorizzare gli articoli Controller
Uno dei principi dello sviluppo è DRY.
Forse sai già cosa significa: “DON’T REPEAT YOURSELF”
Ci stiamo ripetendo abbastanza, quindi facciamo un po’ di refactoring.
Questa linea di codice appare in tutte le nostre azioni…
@article = Article.find(params)
Perciò, creiamo un metodo privato e memorizziamo lì questa linea…
def set_article
@article = Article.find(params)
end
Poi, cancelliamo la linea di codice dalle azioni…
E’ inclusa in destroy, show, update, edit…
Destra sotto la prima linea del controller…
before_action :set_article, only:
Il file controller aggiornato sarà così:
Passo 15: Installare Bootstrap
Aggiungi il gemfile dalla pagina github…
gem 'bootstrap-sass', '~> 3.4.1'
gem 'sassc-rails', '>= 2.1.0'
Poi nella linea di comando, assicurandoti di essere nella directory dell’app e non in una delle sottodirectory, installa…
$ bundle install
Avrete anche bisogno di creare un nuovo file CSS… Il nome del file potrebbe essere come questo qui sotto e lo creerete sotto app/assets/stylesheets
custom.css.scss
E aggiungete…
Quindi, nell’applicazione.js sotto app/assets/javascripts…
//= require jquery
//= require bootstrap-sprockets
E, se usi Rails 5, installa la gemma jQuery…
gem 'jquery-rails'
Non sei sicuro della versione che stai usando? Esegui il seguente nel terminale:
$ rails -v
Ora lo sai. Se hai bisogno di installare jquery, aggiungi la gemma di cui sopra al gemfile e installa il bundle.
$ bundle install
Passo 16: Installare la barra di navigazione
Creare partial sotto la cartella layouts…
_navigation.html.erb
Ora, vai alla homepage di bootstrap…
Prendi il codice della navbar di default… È il primo esempio e assomiglia a questo:
E incolla nel tuo _navigation partial… Salva.
Ora renderizza il partial dentro il <head> </head> del file application.html.erb…
<%= render 'layouts/navigation' %>
L’intero file ora assomiglia a questo:
Riavvia il server (su un mac: control + c) perché hai aggiunto recentemente alcune nuove gemme, e poi avvialo di nuovo:
$ rails s
E poi quando aggiornerai il tuo server locale, vedrai:
Niiiiiiice…. Sembra buono, no?
Ora, cominciamo lo styling! O meglio, togliamo di mezzo lo stile molto velocemente così possiamo concentrarci sulla costruzione dell’app piuttosto che sullo stile dell’app 🙂
Nel file custom.css.scss copia/incolla e poi salva:
Step 17: Aggiungere i link alla Navbar
Ora, affrontiamo la Nav bar e assicuriamoci che i link della navbar puntino ai posti che vogliamo!
Questo…
<a class="navbar-brand" href="#">Alpha Blog</a>
diventa questo:
<%= link_to "Alpha Blog", root_path, class: "navbar-brand", id: "logo" %>
Rinfresca la pagina e vedi:
E ora in qualsiasi pagina, puoi navigare al root_path (la pagina indice) cliccando su ALPHA BLOG.
Prossimo, aggiungiamo un link alla pagina dell’indice degli articoli:
Al posto del primo “Link” nella Navbar:
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
Aggiungi:
<li><%= link_to "Articles", articles_path %></li>
E al posto del secondo “Link” nella Navbar:
<li><a href="#">Link</a></li>
Aggiungi:
<li><%= link_to "Create Article", new_article_path %></li>
Ora possiamo rimuovere l’altro link a “Create Article” nell’indice.html.erb. Basta rintracciarlo e cancellarlo.
Cancellerò anche la barra di ricerca. Non la useremo.
Elimina tutto quello che c’è sotto:
Non ci serve nemmeno il primo menu a tendina, quindi eliminalo. Basta trovare questo e cancellarlo:
Salva il file. Aggiorna il tuo server localhost e vedrai:
Step 18: Style the Form Template
Puoi trovare il codice su bootstrap qui.
Mescoleremo il rubino incorporato con bootstrap per ottenere il risultato che vogliamo.
Nel _form.html.erb partial, cambia questo…
in questo…
Nota un importante cambiamento che abbiamo fatto all’inizio della dichiarazione do form…
<%= form_for(@article, :html => {class: "form-horizontal", role: "form"}) do |f| %>
E nota la sintassi dentro gli elementi del form…
<%= f.text_field :title, class: "form-control", placeholder: "Title of article", autofocus: true %>
Step 19: Stile dei messaggi & Refactor in partial
Ora aggiorniamo anche lo stile dei messaggi di errore. Aggiorna lo stile da…
a:
Che cambia i messaggi di errore in:
Ora estraiamo in un partial..
Crea una nuova cartella sotto le viste chiamata ‘shared’…
Crea un nuovo file chiamato _errors.html.erb…
Copia/incolla il messaggio di errore in quel file… Salva.
Ora rimuovi il messaggio di errore da _form.html.erb, e sostituisci il codice con:
<%= render 'shared/errors' %>
Creiamo anche un file _messages.html.erb e conservalo sotto la cartella condivisa. All’interno di questo file, aggiungete il codice dei messaggi flash:
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
Salvate il file. Assicurati di sostituire il codice nel file layouts/application.html.erb con:
<%= render 'shared/errors' %>
L’intero file attualmente assomiglia a:
Prossimo, daremo stile ai messaggi flash…
Nel partial _messages.html.erb partial, cambiate questo…
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
in questo:
Abbiamo anche bisogno di cambiare tutto il flash nel file articles_controller.rb in flash per completare questo passo.
Step 20: Aggiornare le variabili dell’istanza dell’articolo per farle funzionare per gli utenti
Questo è un po’ prematuro dato che non abbiamo ancora creato utenti o azioni utente per il nostro blog, ma creeremo degli utenti e vogliamo che i nostri messaggi di errore funzionino per gli utenti proprio come funzionano per gli articoli. Capite cosa intendo?
Abbiamo tutte queste funzioni che funzionano per gli articoli: creare nuovi articoli, modificare vecchi articoli, e i messaggi di errore flash che ci fanno sapere cosa è andato storto… Vogliamo che questi messaggi di errore flash ci comunichino quando stiamo cercando di creare un nuovo utente o di modificare un utente attuale.
Lo faremo aggiornando la variabile di istanza @article in una che funzioni per articoli o utenti…
Nel file shared/_errors.html.erb, aggiornate la variabile di istanza @article in una variabile di istanza @obj…
Ora, dobbiamo aggiornare la dichiarazione di rendering parziale… Quella in articles/_form.html.erb
Era…
<%= render 'shared/errors' %>
e ora deve leggere…
<%= render 'shared/errors', obj: @article %>
Prossimo, lavoreremo sulla vista “show”…
Step 21: Style the Show Article Page
Aggiorna la pagina views/articles/show.html.erb a…
Questo renderà:
Poi, aggiungeremo qualche ‘simple_format’…
Cambia questo…
<%= @article.description %>
a questo…
<%= simple_format(@article.description) %>
Poi, un po’ più di stile per i pulsanti…
<%= link_to "Edit", edit_article_path(@article), class: "btn btn-xs btn-primary" %> |
<%= link_to 'Back', articles_path, class: "btn btn-xs btn-success" %>
Ci darà dei bei pulsanti piccoli…
Poi, aggiungere un pulsante di cancellazione…
Un bel pulsante di cancellazione colorato…
L’intero blocco di codice appare così ora:
Passo 22: Stile della pagina dell’indice degli articoli
Aggiorniamo questa pagina dall’aspetto orribilmente strambo…
La pagina index.html.erb dovrebbe essere sostituito con il seguente codice:
Styling per il corpo dell’articolo:
.article-body {
border-top: 1px solid #eaeaea;
padding-top: 15px;
padding-bottom: 15px;
}
Styling per il titolo dell’articolo:
.article-title {
font-weight: bold;
font-size: 1.5em;
}
La tua pagina sarà ora come questa:
Bene.
Step 23: Creazione di utenti + Creazione di un Feature Branch in Github
Prossimo, creeremo degli utenti! Bene. Il nostro modello per gli utenti sarà chiamato “Utente”. Qui sotto c’è un utile schema che spiega come sarà formattata la tabella degli utenti e quali saranno le diverse strutture di denominazione dei file:
Abbiamo già creato articoli. Possiamo creare, leggere, modificare e cancellare articoli.
Ma in questo momento chiunque acceda al blog può leggere, modificare e cancellare qualsiasi altro articolo.
Vogliamo che solo gli utenti che si sono iscritti possano fare queste funzioni, e vogliamo che possano modificare e cancellare solo gli articoli che hanno creato.
Perciò abbiamo bisogno di utenti, naturalmente, e abbiamo anche bisogno di un modo per tracciare gli utenti che creano articoli. Questo può essere fatto avendo l’id dell’utente che crea l’articolo memorizzato nella tabella degli articoli nella riga dell’articolo. Questa è un’associazione di chiave esterna:
L’aggiunta della colonna user_id alla tabella articoli ci darà la possibilità di “v-lookup” al resto delle informazioni degli utenti.
Un articolo su cui lavorano più persone sarebbe un’associazione molti a molti…
Un articolo su cui lavora una persona, dove una persona può creare molti articoli, è un’associazione uno a molti…
Le categorie di articoli, se le creiamo, sarebbero un’associazione molti a molti.
Ok, basta con le battute, creiamo la tabella degli utenti…