Následuje vytvoření souboru modelu v adresáři blog/app/models…
article.rb
<<< Květen 2019 AKTUALIZACE OD AUTORA >>>
Místo použití vizuálního textového editoru můžete soubor vytvořit také prostřednictvím terminálu:
cd app/models
touch article.rb
<<< KONEC AKTUALIZACE >>>
Nyní zpět ve vizuálním textovém editoru a uvnitř článku.rb model…
class Article < ActiveRecord::Baseend
Krok 7: Uvnitř konzoly Rails
Nyní můžeme skočit dovnitř konzoly Rails a otestovat připojení k tabulce…
$ rails c
Poté zavolejte všechny články…
$ Article.all
Měli byste vidět dotaz SQL, který vypadá takto…
(Pokud jste uvnitř příkazového řádku procházeli adresářem blogu, může se zde objevit chyba. Ujistěte se, že jste se dostali zpět do adresáře aplikace, jinak váš příkaz Article.all níže vrátí chybu.)
Při zadání pouze ‚Article‘ získáte všechny atributy tabulky…
Další příkazy…
article = Article.new
Vytvoří nový článek uložený uvnitř proměnné ‚article‘ s atributy:
Nyní můžeme přidat název a popis ručně prostřednictvím konzoly rails…
Nyní musíme tato data uložit..
article.save
Tento příkaz vygeneruje SQL dotaz, který tyto nové hodnoty vloží do tabulky článků…
Můžeme vytvořit další článek najednou pomocí „hromadného přiřazení“…
article = Article.new(title: "This is my second article", description: "This is my second description")
Znovu musíme článek uložit….
article.save
Vaľe…
Můľeme to udělat i třetím způsobem pomocí metody „create“…
Article.create(title: "This is my third title", description: "This is my third description")
A to se článek automaticky uloží…
Nyní si představme, že chceme jeden z těchto článků upravit… Nejprve musíme článek uchopit…
article = Article.find(2)
Pak můžeme článek upravit a uložit…
article.title = "This is an edited second article"
A pak uložit…
article.save
Vygeneruje se potřebný dotaz SQL…
Nyní budeme článek mazat… Nejprve uchopte článek…
article = Article.find(3)
Poté smažte…
article.destroy
Vymažte…
Krok č. 8: Přidání validací pro vynucení omezení na články
V článku.rb modelu…
class Article < ActiveRecord::Base
validates :title, presence: trueend
To bude vyžadovat, aby všechny nové články obsahovaly název. Můžeme to otestovat v konzoli rails (nezapomeňte po aktualizaci modelu restartovat konzoli rails! Díky Mikeu Boydovi a Andrew Linckovi za připomenutí)…
article = Article.new
poté zkuste uložit bez aktualizace nadpisu…
article.save
bum…
To samé můžeme udělat pro popis…
class Article < ActiveRecord::Base
validates :title, presence: true
validates :description, presence: trueend
A zabrání to vytvoření článku bez popisu, i když má nadpis… (opět nezapomeňte po aktualizaci modelu restartovat konzoli rails.)
Chyby si můžete zkontrolovat pomocí těchto příkazů…
article.errors.any?
article.errors.full_messages
Příště přidáme validace délky…
Cool.
Dále chceme, aby uživatelé mohli provádět stejné akce v prohlížeči, takže budeme muset nastavit trasy, řadiče a pohledy pro vytváření a ukládání článků!
Krok č. 9: Přidání možnosti vytvářet články z prohlížeče
Životní cyklus nového článku…
Přečtěte si první 2 minuty kurzu Udemy v části 4, přednáška 63 pro úplný přehled…
Nejprve se vypořádáme s našimi trasami…
V trasách.rb přidejte tento řádek …
resources :articles
Tím získáme nejrůznější cesty pro aktualizaci, mazání, vytváření, zobrazování atd.
Zkontrolujte nové cesty pomocí… ALE POČKEJTE, před kontrolou cest se ujistěte, že jste se vrátili z konzole rails zadáním:
exit
tedy,
$ rake routes
Cool.
Nyní potřebujeme nový kontrolér… Vytvořte tento soubor v části app/controllers.
touch articles_controller.rb#or just create the file using the visual text editor
A pak uvnitř nového souboru kontroléru…
class ArticlesController < ApplicationControllerend
Nyní musíme vytvořit novou složku pod pohledy, kam budeme ukládat naše soubory s pohledy na články… Složka by se měla jmenovat ‚articles‘
<<< AKTUALIZACE OD AUTORA >>>
Zkuste místo vizuálního textového editoru použít příkazový řádek:
cd views
mkdir articles
cd articles
<<< END UPDATE >>>
Nyní vytvoříme nový soubor pod ‚articles‘ s názvem…
touch new.html.erb# or create using the visual text editor
A pak musíme aktualizovat náš articles_controller.rb:
class ArticlesController < ApplicationController
def new
end
end
Uložit.
Uvnitř této stránky new.html.erb uložíme náš formulář pro zachycení názvu a popisu.
Nejprve se ale ujistíme, že stránka funguje… Add:
<h1>Create an article</h1>
A pak načteme server…
Dává nám to…
Skvělé. Funguje to.
Nyní vytvoříme formulář s podporou modelu. Rails zde poskytuje pomocné metody pro formulář.
V souboru new.html.erb…
<h1>Create an Article</h1><%= form_for @article do |f| %><% end %>
A iniciovali jsme proměnnou instance, takže nyní musíme vytvořit proměnnou v našem kontroléru…
class ArticlesController < ApplicationControllerdef new
@article = Article.new
endend
Skvělé. Vše funguje správně…
Nyní shromáždíme nějaká data…
<h1>Create an Article</h1><%= form_for @article do |f| %>
<p>
<%= f.label :title %>
<%= f.text_field :title %>
</p><% end %>
A načteme stránku, abychom viděli, co jsme udělali…
Skvělé. Funguje to…
Teď dokončíme formulář…
Skvělé. Vše, co potřebujeme…
Nyní musíme v kontroléru vytvořit akci ‚create’…
class ArticlesController < ApplicationControllerdef new
@article = Article.new
enddef create
render plain: params.inspect
endend
Po vyplnění formuláře a následném odeslání se zobrazí tyto údaje:
Ale my chceme, aby se tato data uložila do databáze…
Ale to nestačí… Chceme také zobrazit článek…
Použijeme již vytvořenou cestu a předáme proměnnou instance nového článku…
redirect_to articles_show(@article)
Celý kód…
Ale to nestačí, že? Chceme tento kód přeformulovat tak, aby zobrazoval oznámení, zda byl článek úspěšně vytvořen:
A nyní zajistíme, aby se naše bleskové zprávy zobrazovaly na všech stránkách…
V těle souboru application.html.erb…
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
A nyní chceme zajistit, aby se zobrazovaly také chyby…
V souboru new.html.erb…
Skvělé. Nyní se nám zobrazí chyby v URL adresy articles/new:
Teď se ujistěte, že byla vytvořena akce show…
def show
@article = Article.find(params)
end
Teď musíme vytvořit stránku, na které se informace zobrazí…
Voláme tento soubor…
show.html.erb
Uvnitř této stránky…
<h1>Showing selected article</h1><p>
Title: <%= @article.title %>
</p><p>
Description: <%= @article.description %>
</p>
A ta bude vykreslovat…
(Chybujete? Zde je řešení časté chyby: vytvoření souboru show.html.erb na špatném místě)
Hurá. Příště se budeme věnovat úpravám článků…
Krok 10: Úprava článků
Potřebujeme vytvořit akci editace v kontroléru… Ve kterém kontroléru? Samozřejmě v kontroléru článků!
def edit
end
A v pohledech musíme vytvořit šablonu editace… Ve které složce? Samozřejmě ve složce zobrazení článků!
edit.html.erb
Nyní musíme vytvořit formulář pro editaci…
Můžeme vlastně kopírovat/vkládat z formuláře new.html.erb. Pro aktualizaci stávajícího článku použijeme stejný formulář, který jsme použili pro vytvoření nového článku.
Nyní dokončíme naši editační akci v kontroléru…
def edit
@article = Article.find(params)
end
Nyní musíme přidat aktualizační akci…
Krok 11: Přidání indexového výpisu článků a přidání odkazů na úpravu/zobrazení
Přidejte akci index v kontroléru articles_controller.rb…
def index
@articles = Article.all
end
Poté musíme vytvořit šablonu… Do kterého adresáře views tento soubor umístíme?
index.html.erb
A uvnitř tohoto souboru…
Tím získáme…
Cool. Nyní přidáme odkazy na úpravu a zobrazení jednotlivých článků…
<td><%= link_to 'Edit', edit_article_path(article) %></td>
<td><%= link_to 'Show', article_path(article) %></td>
Kód vypadá takto…
Tím získáme…
Nyní přidáme odkazy „Zpět“ k úpravám, zobrazení a nové stránce… Pokračujte, skočte do příslušných stránek a přidejte nové odkazy takto:
<%= link_to 'Back', articles_path %>
Své jsem přidal úplně na konec každého souboru.
A na stránku zobrazit přidáme odkaz upravit…
<%= link_to "Edit", edit_article_path(@article) %>
Krok 12: Přeformátování formulářů do jedné dílčí části
Vytvořte nový soubor přímo v zobrazeních/článcích.
_form.html.erb
Zkopírujte/vložte data formuláře do tohoto souboru…
Poté vykreslete formulář v nové a editační stránce…
<%= render 'form' %>
Měli byste vyřadit všechny staré informace z formuláře a přidat úryvek kódu o do nové a editační stránky tak, aby každá vypadala nějak takto:
<h1>Edit Article</h1><%= render 'form' %><%= link_to 'Back', articles_path %>
Nyní přidáme akci zničit…
Krok 13: Přidání akce zničit
V kontroléru…
Který kontrolér? To už víte.
Nyní musíme přidat odkazy na stránky, ze kterých chceme mít možnost mazat. Pomocí níže uvedeného odkazu…
<%= link_to 'Delete', article_path(article), method: :delete, data: {confirm: "Are you sure?"} %>
…přidejte na stránky, odkud chcete, aby uživatel mohl mazat.
Pokud přidám na naši indexovou stránku, bude to vypadat…
Pokud přidáme na naši stránku show, budeme muset odkaz destroy jen mírně upravit, aby napodoboval strukturu odkazu edit. Chápete, co mám na mysli?
Takto:
<%= link_to 'Delete', article_path(@article), method: :delete, data: {confirm: "Are you sure?"} %>
Místo toho:
<%= link_to 'Delete', article_path(article), method: :delete, data: {confirm: "Are you sure?"} %>
Krok 14: Refaktorizace článků Controller
Jedním z principů vývoje je DRY.
Možná už víte, co to znamená: „
Dost často se opakujeme, takže se pustíme do refaktorizace.
Tento řádek kódu se objevuje ve všech našich akcích…
@article = Article.find(params)
Vytvoříme tedy soukromou metodu a tento řádek tam uložíme…
def set_article
@article = Article.find(params)
end
Poté řádek kódu z akcí vymažeme…
Je obsažen v akcích destroy, show, update, edit…
Přímo pod prvním řádkem kontroléru…
before_action :set_article, only:
Aktualizovaný soubor kontroléru bude vypadat takto:
Krok 15: Nainstalujte Bootstrap
Přidejte soubor gemfile ze stránky github…
gem 'bootstrap-sass', '~> 3.4.1'
gem 'sassc-rails', '>= 2.1.0'
Poté v příkazovém řádku, ujistěte se, že jste v adresáři aplikace, a ne v některém z podadresářů, nainstalujte…
$ bundle install
Také budete muset vytvořit nový soubor CSS… Název souboru může vypadat takto níže a vytvoříte ho v adresáři app/assets/stylesheets
custom.css.scss
a přidáte…
Poté v aplikaci.js v souboru app/assets/javascripts…
//= require jquery
//= require bootstrap-sprockets
A pokud používáte Rails 5, nainstalujte drahokam jQuery…
gem 'jquery-rails'
Nejste si jisti, jakou verzi používáte? Spusťte v terminálu následující příkaz:
$ rails -v
Teď už to víte. Pokud potřebujete nainstalovat jquery, přidejte výše uvedený gem do souboru gemfile a nainstalujte svazek.
$ bundle install
Krok 16: Instalace navigačního panelu
Vytvořte částečný ve složce layouts…
_navigation.html.erb
Nyní přejděte na domovskou stránku bootstrapu…
Vychytejte výchozí kód navigačního panelu… Je to první příklad a vypadá nějak takto:
A vložte do svého částečného _navigation… Uložte.
Nyní vykreslete dílčí část uvnitř <head> </head> souboru application.html.erb…
<%= render 'layouts/navigation' %>
Celý soubor nyní vypadá nějak takto:
Restartujte server (na macu: control + c), protože jste nedávno přidali nějaké nové drahokamy, a pak jej znovu spusťte:
$ rails s
A když pak obnovíte místní server, uvidíte:
Niiiiiiice…. Vypadá to dobře, ne?“
Teď se pustíme do stylizace! Nebo spíše, pojďme se stylování zbavit opravdu rychle, abychom se mohli soustředit spíše na vytváření aplikace než na stylování aplikace 🙂
V souboru custom.css.scss zkopírujte/vložte a poté uložte:
Krok 17: Přidání odkazů na navigační panel
Nyní se pustíme do navigačního panelu a ujistíme se, že odkazy navigačního panelu směřují na místa, na která chceme, aby směřovaly!
Toto…
<a class="navbar-brand" href="#">Alpha Blog</a>
se změní na toto:
<%= link_to "Alpha Blog", root_path, class: "navbar-brand", id: "logo" %>
Obnovte stránku a uvidíte:
A nyní můžete na kterékoli stránce přejít na kořenovou_cestu (indexovou stránku) kliknutím na ALPHA BLOG.
Dále přidáme odkaz na stránku Index článků:
Na místo prvního „Odkazu“ v panelu navigace:
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
Přidat:
<li><%= link_to "Articles", articles_path %></li>
A místo druhého „Odkazu“ v panelu navigace:
<li><a href="#">Link</a></li>
Přidat:
<li><%= link_to "Create Article", new_article_path %></li>
Nyní můžeme odstranit druhý odkaz na „Vytvořit článek“ v indexu.html.erb. Stačí ho dohledat a odstranit.
Také odstraním vyhledávací panel. Ten nebudeme používat.
Vymažte vše níže uvedené:
První rozbalovací nabídku také nepotřebujeme, takže pryč. Stačí najít tohle a odstranit to:
Uložit soubor. Obnovte server localhost a uvidíte:
Krok 18: Nastylujte šablonu formuláře
Kód na bootstrapu najdete zde.
Smícháme vložený ruby s bootstrapem, abychom dosáhli požadovaného výsledku.
Uvnitř souboru _form.html.erb partial změňte toto…
Na toto…
Všimněte si důležité změny, kterou jsme provedli na začátku příkazu do formuláře…
<%= form_for(@article, :html => {class: "form-horizontal", role: "form"}) do |f| %>
A všimněte si syntaxe uvnitř prvků formuláře…
<%= f.text_field :title, class: "form-control", placeholder: "Title of article", autofocus: true %>
Krok 19: Stylizace zpráv & Refaktor do partialů
Nyní také aktualizujeme stylování chybových zpráv. Aktualizujte styl z…
na:
Tím se změní chybová hlášení na:
Nyní provedeme výpis na dílčí..
Vytvořte novou složku pod pohledy s názvem ‚shared’…
Vytvořte nový soubor s názvem _errors.html.erb…
Zkopírujte/vložte do tohoto souboru chybové hlášení…
Ukládejte.
Nyní odstraňte chybové hlášení z _form.html.erb a nahraďte kód:
<%= render 'shared/errors' %>
Vytvoříme také soubor _messages.html.erb a uložíme jej do sdílené složky. Uvnitř tohoto souboru přidejte kód bleskových zpráv:
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
Uložíme tento soubor. Ujistěte se, že jste nahradili kód v souboru layouts/application.html.erb:
<%= render 'shared/errors' %>
Celý soubor aktuálně vypadá takto:
Dále budeme stylovat zprávy flash…
V souboru _messages.html.erb dílčího souboru změňte toto…
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
na toto:
Pro dokončení tohoto kroku budeme muset také změnit všechny flashové soubory v souboru articles_controller.rb na flashové.
Krok 20: Aktualizace proměnných instancí článků, aby fungovaly pro uživatele
Tento krok je trochu předčasný, protože jsme pro náš blog ještě nevytvořili uživatele ani uživatelské akce, ale uživatele vytvoříme a budeme chtít, aby naše chybová hlášení fungovala pro uživatele stejně jako pro články. Víte, co mám na mysli?“
Máme všechny tyto funkce, které fungují pro články: vytváření nových článků, úpravy starých článků a chybová hlášení flash, která nás informují o tom, co se pokazilo… Chceme, aby nám tato chybová hlášení flash sdělovala, když se snažíme vytvořit nového uživatele nebo upravit stávajícího uživatele.
Dosáhneme toho tak, že aktualizujeme proměnnou instance @article na takovou, která bude fungovat pro články nebo uživatele…
V poli shared/_errors.html.erb aktualizujeme instanční proměnnou @article na instanční proměnnou @obj…
Nyní musíme aktualizovat příkaz pro částečné vykreslení… Ten v articles/_form.html.erb
Byl…
<%= render 'shared/errors' %>
a nyní musí znít…
<%= render 'shared/errors', obj: @article %>
Dále budeme pracovat na zobrazení „zobrazit“…
Krok 21: Styl stránky Zobrazit článek
Aktualizujte views/articles/show.html.erb na…
Tímto se stránka vykreslí:
Dále přidáme ‚simple_format’…
Změňte toto…
<%= @article.description %>
Na toto…
<%= simple_format(@article.description) %>
Poté ještě nějaký styl pro tlačítka…
<%= link_to "Edit", edit_article_path(@article), class: "btn btn-xs btn-primary" %> |
<%= link_to 'Back', articles_path, class: "btn btn-xs btn-success" %>
Dá nám to krásná malá tlačítka…
Pak přidáme tlačítko pro mazání…
Pěkné barevné tlačítko pro mazání…
Celý blok kódu nyní vypadá takto:
Krok 22: Stylizace indexové stránky s výpisem článků
Aktualizujeme tuto strašně blbě vypadající stránku…
Index.html.erb by měl být nahrazen následujícím kódem:
Styl pro tělo článku:
.article-body {
border-top: 1px solid #eaeaea;
padding-top: 15px;
padding-bottom: 15px;
}
Styl pro nadpis článku:
.article-title {
font-weight: bold;
font-size: 1.5em;
}
Vaše stránka bude nyní vypadat takto:
Krásně.
Krok 23: Vytvoření uživatelů + vytvoření feature větve v Githubu
Následuje vytvoření uživatelů! Super. Náš model pro uživatele se bude jmenovat „User“. Níže je užitečná tabulka, která vysvětluje, jak bude tabulka uživatelů formátována a jaké budou různé struktury pojmenování souborů:
Články jsme již vytvořili. Můžeme vytvářet, číst, upravovat a mazat články.
Ale právě teď může kdokoli, kdo má přístup na blog, číst, upravovat a mazat jakýkoli jiný článek.
Chceme, aby tyto funkce mohli provádět pouze uživatelé, kteří se zaregistrovali, a chceme, aby mohli upravovat a mazat pouze články, které vytvořili.
Takže samozřejmě potřebujeme uživatele a také potřebujeme způsob, jak sledovat uživatele, kteří vytvářejí články. To lze provést tak, že id uživatele, který článek vytvořil, bude uloženo v tabulce článků v řádku článku. Jedná se o asociaci cizího klíče:
Přidáním sloupce user_id do tabulky articles získáme možnost „v-lookup“ na ostatní informace o uživatelích.
Jeden článek, na kterém pracuje více lidí, by byl asociací mnoho k mnoha…
Jeden článek, na kterém pracuje jeden člověk, přičemž jeden člověk může vytvořit mnoho článků, je asociací one-to-many…
Kategorie článků, pokud bychom je vytvořili, by byly asociací many-to-many.
Ok, dost žertování, pojďme vytvořit tabulku Uživatel…