În continuare trebuie să creăm un fișier model în blog/app/models…
article.rb
<<< MAI 2019 UPDATE DE LA AUTOR >>>>
În loc să folosiți editorul vizual de text, puteți crea fișierul și prin intermediul terminalului:
cd app/models
touch article.rb
<<< END UPDATE >>>>
Acum, din nou în editorul vizual de text și în interiorul articolului.rb model…
class Article < ActiveRecord::Baseend
Pasul 7: În interiorul consolei Rails
Acum, putem sări în interiorul consolei Rails și să testăm conexiunea la tabel…
$ rails c
Apoi apelați toate articolele…
$ Article.all
Ar trebui să vedeți o interogare SQL care arată ca…
(Dacă ați navigat în interiorul liniei de comandă prin directorul blogului, este posibil să apară o eroare aici. Asigurați-vă că vă întoarceți în directorul app sau comanda Article.all de mai jos vă va returna o eroare.)
Tipând doar ‘Article’ vă va oferi toate atributele tabelului…
Mai multe comenzi…
article = Article.new
Va crea un nou articol stocat în interiorul variabilei ‘article’ cu atributele:
Acum, putem adăuga manual un titlu și o descriere prin intermediul consolei rails…
Acum trebuie să salvăm aceste date..
article.save
Această comandă va genera o interogare SQL pentru a insera aceste noi valori în tabelul articole…
Potem crea un alt articol dintr-o dată folosind „mass assignment”…
article = Article.new(title: "This is my second article", description: "This is my second description")
Din nou, trebuie să salvăm articolul…
article.save
Walah…
Potem face acest lucru într-un al treilea mod folosind metoda de creare…
Article.create(title: "This is my third title", description: "This is my third description")
Și va salva automat articolul…
Acum să ne imaginăm că vrem să modificăm unul dintre aceste articole… Mai întâi trebuie să luăm articolul…
article = Article.find(2)
Apoi putem edita articolul și salva articolul…
article.title = "This is an edited second article"
Și apoi să salvăm…
article.save
Se va genera interogarea SQL necesară…
article.save
Se va genera interogarea SQL necesară…
Acum vom șterge un articol… Mai întâi luăm articolul…
article = Article.find(3)
Apoi ștergeți…
article.destroy
Walah…
Pașa 8: Adăugați validări pentru a impune constrângeri asupra articolelor
În articol.rb model…
class Article < ActiveRecord::Base
validates :title, presence: trueend
Aceasta va impune ca toate articolele noi să conțină un titlu. Putem testa acest lucru în consola rails (nu uitați să reporniți consola rails după ce ați actualizat modelul! Mulțumim Mike Boyd și Andrew Linck pentru atenționări)…
article = Article.new
apoi încercați să salvați fără a actualiza titlul…
article.save
boom…
Potem face același lucru pentru descriere…
class Article < ActiveRecord::Base
validates :title, presence: true
validates :description, presence: trueend
Și vă va împiedica să creați un articol fără o descriere, chiar dacă are un titlu… (din nou, asigurați-vă că reporniți consola rails după ce actualizați modelul.)
Puteți verifica erorile cu aceste comenzi…
article.errors.any?
article.errors.full_messages
În continuare, vom adăuga validări de lungime…
Fierbinte.
În continuare, vrem ca utilizatorii să poată efectua aceleași acțiuni în browser, așa că va trebui să configurăm rute, controlori și vizualizări pentru crearea și salvarea articolelor!
Pasul 9: Adăugarea posibilității de a crea articole din browser
Ciclul de viață al unui articol nou…
Revizuiește cursul Udemy primele 2 minute din Secțiunea 4, Lecția 63 pentru o prezentare completă…
În primul rând, să abordăm rutele noastre…
În rute.rb, adăugați această linie …
resources :articles
Aceasta ne oferă tot felul de trasee pentru a actualiza, șterge, crea, arăta, etc.
Verificați noile căi cu… DAR AȘTEPTAȚI, înainte de a verifica căile asigurați-vă că ați ieșit din nou din consola rails introducând:
exit
atunci,
$ rake routes
Cool.
Acum, avem nevoie de un nou controler… Creați acest fișier în app/controllers.
touch articles_controller.rb#or just create the file using the visual text editor
Și apoi în interiorul noului fișier controler…
class ArticlesController < ApplicationControllerend
Acum, trebuie să creăm un nou folder sub views pentru a salva fișierele de vizualizare a articolelor noastre… Folderul ar trebui să se numească ‘articles’
<<<ACTUALIZARE DE LA AUTOR >>>
Încercați să folosiți linia de comandă în loc de editorul vizual de text:
cd views
mkdir articles
cd articles
<<< END UPDATE >>>>
Acum, vom crea un nou fișier sub ‘articles’ numit…
touch new.html.erb# or create using the visual text editor
Și apoi trebuie să actualizăm articles_controller.rb:
class ArticlesController < ApplicationController
def new
end
end
Salvare.
În interiorul acestei pagini new.html.erb, vom stoca formularul nostru pentru a captura titlul și descrierea.
Dar mai întâi, să ne asigurăm că pagina funcționează… Add:
<h1>Create an article</h1>
Și apoi să încărcăm serverul…
Ne dă…
Genial. Funcționează.
Acum, haideți să creăm formularul susținut de model. Rails oferă aici metode de ajutor pentru formulare.
În fișierul new.html.erb…
<h1>Create an Article</h1><%= form_for @article do |f| %><% end %>
Și am inițiat o variabilă de instanță, așa că acum trebuie să creăm variabila în controlerul nostru…
class ArticlesController < ApplicationControllerdef new
@article = Article.new
endend
Genial. Totul funcționează bine…
Acum, să colectăm niște date…
<h1>Create an Article</h1><%= form_for @article do |f| %>
<p>
<%= f.label :title %>
<%= f.text_field :title %>
</p><% end %>
Și să încărcăm pagina pentru a vedea ce am făcut…
Genial. Funcționează…
Acum, să terminăm formularul…
Genial. Tot ce avem nevoie…
Acum, trebuie să creăm o acțiune ‘create’ în controler…
class ArticlesController < ApplicationControllerdef new
@article = Article.new
enddef create
render plain: params.inspect
endend
Când completați formularul și apoi îl trimiteți, veți vedea aceste date:
Dar vrem ca aceste date să fie salvate în baza de date…
Dar asta nu e de ajuns… Vrem, de asemenea, să arătăm articolul…
Vom folosi o cale pe care am creat-o deja și vom trece în variabila de instanță pentru noul articol…
redirect_to articles_show(@article)
Toate codurile…
Dar asta nu este suficient, nu-i așa? Vrem să refactorizăm acest cod pentru a da o notificare dacă articolul a fost creat cu succes:
Și acum ne vom asigura că mesajele noastre flash pot fi văzute în toate paginile…
În corpul fișierului application.html.erb…
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
Și acum vrem să ne asigurăm că sunt afișate și erorile…
În fișierul new.html.erb…
Genial. Acum ne va afișa erorile în URL-ul articles/new:
Acum asigurați-vă că acțiunea show a fost creată…
def show
@article = Article.find(params)
end
Acum trebuie să creăm o pagină pe care să arătăm informațiile…
Vom apela acel fișier…
show.html.erb
În interiorul acelei pagini…
<h1>Showing selected article</h1><p>
Title: <%= @article.title %>
</p><p>
Description: <%= @article.description %>
</p>
Și asta va reda…
(Primiți o eroare? Iată soluția la o eroare frecventă: crearea fișierului show.html.erb în locul greșit)
Hurrah. În continuare vom lucra la editarea articolelor…
Pasul 10: Editarea articolelor
Trebuie să creăm acțiunea de editare în controler… Care controler? Controlerul de articole, bineînțeles!
def edit
end
Și trebuie să creăm șablonul de editare în vizualizări… În ce folder? Dosarul de vizualizări articole, bineînțeles!
edit.html.erb
Acum trebuie să construim un formular de editare…
De fapt putem face copy/paste din formularul new.html.erb. Vom folosi același formular pentru a actualiza un articol curent pe care l-am folosit pentru a crea un articol nou.
Acum, să completăm acțiunea noastră de editare în controler…
def edit
@article = Article.find(params)
end
Acum, trebuie să adăugăm o acțiune de actualizare…
Pasul 11: Adăugați listarea indexată a articolelor și adăugați linkuri de editare/afișare
Adați acțiunea index în articles_controller.rb…
def index
@articles = Article.all
end
Apoi trebuie să creăm șablonul… În ce director de vizualizări vom plasa acest fișier?
index.html.erb
Și în interiorul acelui fișier…
Aceasta ne dă…
Fierbinte. Acum să adăugăm linkurile de editare și de afișare pentru fiecare articol…
<td><%= link_to 'Edit', edit_article_path(article) %></td>
<td><%= link_to 'Show', article_path(article) %></td>
Codul arată ca…
Ceea ce ne dă…
Acum să adăugăm niște linkuri ‘Back’ la editare, afișare și pagina nouă… Mergeți înainte și săriți în paginile respective și adăugați noile linkuri astfel:
<%= link_to 'Back', articles_path %>
Am adăugat-o pe a mea chiar în partea de jos a fiecărui fișier.
Și haideți să adăugăm un link de editare pe pagina de afișare…
<%= link_to "Edit", edit_article_path(@article) %>
Pasul 12: Refaceți formularele într-un singur parțial
Creați un nou fișier în vizualizări/articole direct.
_form.html.erb
Copiați/lipiți datele formularului în acest fișier…
Apoi redați formularul în pagina nouă și editați…
<%= render 'form' %>
Ar trebui să fi eliminat toate informațiile vechi ale formularului și să fi adăugat fragmentul de cod despre la pagina nouă și editați astfel încât fiecare să arate cam așa:
<h1>Edit Article</h1><%= render 'form' %><%= link_to 'Back', articles_path %>
Acum, vom adăuga acțiunea de distrugere…
Pasul 13: Adăugați acțiunea de distrugere
În controler…
Care controler? Știți deja.
Acum, trebuie să adăugăm linkurile către paginile de unde vrem să putem șterge. Folosind link-ul de mai jos…
<%= link_to 'Delete', article_path(article), method: :delete, data: {confirm: "Are you sure?"} %>
…adăugați la paginile de unde doriți ca utilizatorul să poată șterge.
Dacă adaug la pagina noastră de index, va arăta ca…
Dacă adăugăm la pagina noastră de prezentare, va trebui să modificăm ușor link-ul de distrugere pentru a imita structura linkului de editare. Înțelegeți ce vreau să spun?
Aceasta:
<%= link_to 'Delete', article_path(@article), method: :delete, data: {confirm: "Are you sure?"} %>
În loc de asta:
<%= link_to 'Delete', article_path(article), method: :delete, data: {confirm: "Are you sure?"} %>
Pasul 14: Refaceți articolele Controller
Unul dintre principiile de dezvoltare este DRY.
Poate știți deja ce înseamnă acest lucru: „DON’T REPEAT YOURSELF”
Ne repetăm destul de mult, așa că haideți să facem o mică refactorizare.
Această linie de cod apare în toate acțiunile noastre…
@article = Article.find(params)
Așa că, vom crea o metodă privată și vom stoca această linie acolo…
def set_article
@article = Article.find(params)
end
Apoi, ștergem linia de cod din acțiuni…
Este inclus în destroy, show, update, edit…
Drept sub prima linie a controlerului…
before_action :set_article, only:
Filmul actualizat al controlerului va arăta astfel:
Pasul 15: Instalați Bootstrap
Adaugați fișierul gemfile de pe pagina github…
gem 'bootstrap-sass', '~> 3.4.1'
gem 'sassc-rails', '>= 2.1.0'
Apoi în linia de comandă, asigurându-vă că vă aflați în directorul app și nu în unul dintre subdirectoare, instalați…
$ bundle install
De asemenea, va trebui să creați un nou fișier CSS… Numele fișierului ar putea arăta ca acesta de mai jos și îl veți crea în app/assets/stylesheets
custom.css.scss
Și adăugați…
Apoi, în aplicație.js în fișierul app/assets/javascripts…
//= require jquery
//= require bootstrap-sprockets
Și, dacă folosiți Rails 5, instalați gemul jQuery…
gem 'jquery-rails'
Nu sunteți sigur ce versiune folosiți? Rulați următoarele în terminal:
$ rails -v
Acum știți. Dacă aveți nevoie să instalați jquery, adăugați gemul de mai sus la gemfile și instalați bundle.
$ bundle install
Pasul 16: Instalarea barei de navigare
Crearea parțială în folderul layouts…
_navigation.html.erb
Acum, mergeți la pagina de start a bootstrap…
Căutați codul implicit al barei de navigare… Este primul exemplu și arată cam așa:
Și lipește în partea ta de _navigation… Salvează.
Acum redați parțialul în interiorul <head> </head> din application.html.erb…
<%= render 'layouts/navigation' %>
Întregul fișier arată acum ceva de genul acesta:
Reporniți serverul (pe un mac: control + c) deoarece ați adăugat recent câteva pietre prețioase noi, apoi porniți-l din nou:
$ rails s
Și apoi, când reîmprospătați serverul local, veți vedea:
Niiiiiiice…. Arată bine, nu?
Acum, să începem să stilizăm! Sau, mai bine zis, să eliminăm foarte repede stilizarea, astfel încât să ne putem concentra pe construirea aplicației, mai degrabă decât pe stilizarea aplicației 🙂
În fișierul custom.css.scss copiați/past și apoi salvați:
Etapa 17: Adăugați linkuri la bara de navigare
Acum, să abordăm bara de navigare și să ne asigurăm că linkurile din bara de navigare indică spre locurile spre care vrem să indice!
Aceasta…
<a class="navbar-brand" href="#">Alpha Blog</a>
devine acest lucru:
<%= link_to "Alpha Blog", root_path, class: "navbar-brand", id: "logo" %>
Refresh your page and see:
Și acum, pe orice pagină, puteți naviga la root_path (pagina de index) făcând clic pe ALPHA BLOG.
În continuare, să adăugăm un link către pagina Indexul articolelor:
În locul primului „Link” din Navbar:
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
Adaugă:
<li><%= link_to "Articles", articles_path %></li>
Și în locul celui de-al doilea „Link” din Navbar:
<li><a href="#">Link</a></li>
Adaugă:
<li><%= link_to "Create Article", new_article_path %></li>
Acum putem elimina celălalt link către „Create Article” din index.din fișierul html.erb. Trebuie doar să o găsim și să o ștergem.
Voi șterge și bara de căutare. Nu o vom folosi.
Scoateți tot ce este mai jos:
Nu avem nevoie nici de primul meniu derulant, așa că îl eliminăm. Găsiți doar acest lucru și ștergeți-l:
Salvați fișierul. Reîmprospătați serverul localhost și veți vedea:
Pasul 18: Stilizați șablonul de formular
Puteți găsi codul pe bootstrap aici.
Vom amesteca ruby încorporat cu bootstrap pentru a obține rezultatul pe care îl dorim.
În interiorul fișierului _form.html.erb partial, schimbați asta…
În asta…
Rețineți o modificare importantă pe care am făcut-o la începutul declarației do din formular…
<%= form_for(@article, :html => {class: "form-horizontal", role: "form"}) do |f| %>
Și observați sintaxa din interiorul elementelor formularului…
<%= f.text_field :title, class: "form-control", placeholder: "Title of article", autofocus: true %>
Pasul 19: Stilizați mesajele & Refaceți în partiale
Acum să actualizăm și stilul pentru mesajele de eroare. Actualizați stilul de la…
la:
Aceasta schimbă mesajele de eroare în:
Acum vom extrage către un parțial..
Creăm un nou folder sub vizualizări numit ‘shared’…
Creăm un nou fișier numit _errors.html.erb…
Copiați/lipiți mesajul de eroare în acel fișier… Salvați.
Îndepărtați acum mesajul de eroare din _form.html.erb și înlocuiți codul cu:
<%= render 'shared/errors' %>
Să creăm de asemenea un fișier _messages.html.erb și să îl stocăm sub folderul partajat. În interiorul acelui fișier, adăugați codul mesajelor flash:
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
Salvați fișierul respectiv. Asigurați-vă că înlocuiți codul din fișierul layouts/application.html.erb cu:
<%= render 'shared/errors' %>
Întregul fișier arată în prezent astfel:
În continuare, vom stiliza mesajele flash…
În fișierul _messages.html.erb parțial, schimbați acest…
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
în acest lucru:
De asemenea, va trebui să schimbăm toate flash-urile din fișierul articles_controller.rb în flash pentru a finaliza acest pas.
Pasul 20: Actualizați variabilele instanței articolului pentru a funcționa pentru utilizatori
Acest lucru este puțin prematur, deoarece nici măcar nu am creat încă utilizatori sau acțiuni ale utilizatorilor pentru blogul nostru, dar vom crea utilizatori și vom dori ca mesajele noastre de eroare să funcționeze pentru utilizatori la fel cum funcționează pentru articole. Înțelegeți ce vreau să spun?
Avem toate aceste funcții care funcționează pentru articole: crearea de articole noi, editarea articolelor vechi și mesajele de eroare flash care ne anunță ce nu a mers bine… Vrem ca aceste mesaje de eroare flash să ne comunice atunci când încercăm să creăm un utilizator nou sau să edităm un utilizator actual.
Vom realiza acest lucru prin actualizarea variabilei de instanță @article într-una care va funcționa pentru articole sau utilizatori…
În fișierul shared/_errors.html.erb, actualizați variabila de instanță @article într-o variabilă de instanță @obj…
Acum, trebuie să actualizăm declarația de redare parțială… Cea din articles/_form.html.erb
Era…
<%= render 'shared/errors' %>
și acum trebuie să se citească…
<%= render 'shared/errors', obj: @article %>
În continuare, vom lucra la vizualizarea „show”…
Etapa 21: Stilizarea paginii Show Article
Actualizați views/articles/show.html.erb page to…
Aceasta va reda:
În continuare, vom adăuga niște ‘simple_format’…
Modificați acest…
<%= @article.description %>
În asta…
<%= simple_format(@article.description) %>
Apoi, încă puțin stil pentru butoane…
<%= link_to "Edit", edit_article_path(@article), class: "btn btn-xs btn-primary" %> |
<%= link_to 'Back', articles_path, class: "btn btn-xs btn-success" %>
Ne va da niște butoane mici și frumoase…
Apoi, adăugați un buton de ștergere…
Un buton de ștergere frumos colorat…
Întregul bloc de cod arată așa acum:
Pasul 22: Stilizarea paginii de index a listei de articole
Vom actualiza această pagină care arată îngrozitor de ciudat…
Indexul.html.erb trebuie înlocuită cu următorul cod:
Styling pentru corpul articolului:
.article-body {
border-top: 1px solid #eaeaea;
padding-top: 15px;
padding-bottom: 15px;
}
Styling pentru titlul articolului:
.article-title {
font-weight: bold;
font-size: 1.5em;
}
Pagina dvs. va arăta acum astfel:
Încântător.
Etapa 23: Crearea utilizatorilor + Crearea unei ramuri de caracteristici în Github
În continuare, vom crea utilizatori! Cool. Modelul nostru pentru utilizatori se va numi „User”. Mai jos este o diagramă utilă care explică cum va fi formatat tabelul de utilizatori și care vor fi diferitele structuri de denumire pentru fișiere:
Am creat deja articole. Putem crea, citi, edita și șterge articole.
Dar în acest moment oricine care accesează blogul poate citi, edita și șterge orice alt articol.
Vrem ca doar utilizatorii care s-au înregistrat să poată face aceste funcții și vrem ca ei să poată edita și șterge doar articolele pe care le-au creat.
Acum avem nevoie de utilizatori, desigur, și avem nevoie și de o modalitate de a urmări utilizatorii care creează articole. Acest lucru se poate face având ID-ul de utilizator pentru utilizatorul care creează articolul stocat în tabelul de articole, în rândul articolului. Aceasta este o asociere cu cheie externă:
Adăugarea coloanei user_id în tabela de articole ne va da posibilitatea de a face „v-lookup” la restul informațiilor despre utilizatori.
Un articol la care lucrează mai multe persoane ar fi o asociere mulți-la-mulți…
Un articol la care lucrează o singură persoană, în cazul în care o persoană poate crea mai multe articole, este o asociere de la unul la mai mulți…
Categoriile de articole, în cazul în care le vom crea, ar fi o asociere de la mulți la mai mulți.
Bine, destul cu glumele, haideți să creăm tabelul de utilizatori…
.