A következő lépésként létre kell hoznunk egy modellfájlt a blog/app/models alatt…
article.rb
<<< MAY 2019 UPDATE FROM THE AUTHOR >>>>>
A vizuális szövegszerkesztő használata helyett a terminálon keresztül is létrehozhatjuk a fájlt:
cd app/models
touch article.rb
<<< END UPDATE >>>>
Most vissza a vizuális szövegszerkesztőbe és a cikken belül.rb modell…
class Article < ActiveRecord::Baseend
7. lépés:
$ rails c
Az összes cikket meghívjuk…
$ Article.all
Egy SQL lekérdezést kell látnod, ami így néz ki…
$ Article.all
Az összes cikket meg kell hívnod…
(Ha a parancssoron belül a blog könyvtáron keresztül navigáltál, akkor itt hibát kaphatsz. Győződj meg róla, hogy visszakerültél az alkalmazás könyvtárba, különben az alábbi Article.all parancs hibát fog visszaadni.)
A csak ‘Article’ beírásával megkapod az összes táblázat attribútumát…
Más parancsok…
article = Article.new
Elkészít egy új, az ‘article’ változóban tárolt cikket az attribútumokkal:
Most, a rails konzolon keresztül kézzel adhatunk hozzá címet és leírást…
Most el kell mentenünk ezeket az adatokat..
article.save
Ez a parancs egy SQL lekérdezést generál, hogy ezeket az új értékeket beillessze a cikkek táblába…
A “tömeges hozzárendelés” segítségével egyszerre létrehozhatunk egy újabb cikket…
article = Article.new(title: "This is my second article", description: "This is my second description")
Még egyszer el kell mentenünk a cikket…
article.save
Walah…
Megtehetjük ezt egy harmadik módon is a létrehozás módszerével…
Article.create(title: "This is my third title", description: "This is my third description")
És automatikusan elmenti a cikket…
Most tegyük fel, hogy szerkeszteni akarjuk az egyik ilyen cikket… Először is meg kell ragadnunk a cikket…
article = Article.find(2)
Aztán szerkeszthetjük a cikket és menthetjük a cikket…
article.title = "This is an edited second article"
Aztán menthetjük…
article.save
Meggenerálja a szükséges SQL-lekérdezést…
Most törölni fogunk egy cikket… Először fogjuk meg a cikket…
article = Article.find(3)
Majd töröljük…
article.destroy
Walah…
8. lépés: Érvényesítések hozzáadása a cikkekre vonatkozó korlátozások érvényesítéséhez
A cikkben.rb modellben…
class Article < ActiveRecord::Base
validates :title, presence: trueend
Ez megköveteli, hogy minden új cikknek legyen címe. Ezt a rails konzolban tesztelhetjük (ne felejtsük el újraindítani a rails konzolt a modell frissítése után! Köszönjük Mike Boydnak és Andrew Lincknek az emlékeztetőket)…
article = Article.new
majd próbáljuk meg a mentést a cím frissítése nélkül…
article.save
bumm…
A leírással is megtehetjük ugyanezt…
class Article < ActiveRecord::Base
validates :title, presence: true
validates :description, presence: trueend
És megakadályozza, hogy leírás nélküli cikket hozzunk létre, még akkor is, ha van címe… (megint csak ügyeljünk arra, hogy a modell frissítése után újraindítsuk a rails konzolt.)
A hibákat ezekkel a parancsokkal ellenőrizheted…
article.errors.any?
article.errors.full_messages
A következőkben hosszérvényesítést adunk hozzá…
Klassz.
A következőkben azt szeretnénk, ha a felhasználók ugyanezeket a műveleteket a böngészőben is végre tudnák hajtani, ezért útvonalakat, vezérlőket és nézeteket kell létrehoznunk a cikkek létrehozásához és mentéséhez!
9. lépés: Hozzáadni a cikkek böngészőből történő létrehozásának lehetőségét
Az új cikk életciklusa…
Nézzük meg az Udemy kurzus 4. szakaszának első 2 percét, 63. előadás a teljes áttekintésért…
Először foglalkozzunk az útvonalainkkal…
Az útvonalakon.rb fájlban adjuk hozzá ezt a sort …
resources :articles
Ez mindenféle útvonalat megad nekünk a frissítéshez, törléshez, létrehozáshoz, megjelenítéshez stb.
Az új elérési utak ellenőrzése a… DE VÁRJ, mielőtt ellenőriznéd az elérési utakat, győződj meg róla, hogy visszakerültél a rails konzolból, beírva:
exit
akkor,
$ rake routes
Cool.
Most, szükségünk van egy új vezérlőre… Hozzuk létre ezt a fájlt az app/controllers alatt.
touch articles_controller.rb#or just create the file using the visual text editor
Az új vezérlőfájlon belül…
class ArticlesController < ApplicationControllerend
Most, létre kell hoznunk egy új mappát a views alatt, ahová a cikkek nézetfájljait menthetjük… A mappa neve legyen ‘articles’
<<< UPDATE FROM THE AUTHOR >>>>
Próbáljuk meg a parancssort használni a vizuális szövegszerkesztő helyett:
cd views
mkdir articles
cd articles
<<< END UPDATE >>>>
Most létrehozunk egy új fájlt az ‘articles’ alatt, melynek neve…
touch new.html.erb# or create using the visual text editor
Aztán frissítenünk kell az articles_controllerünket.rb:
class ArticlesController < ApplicationController
def new
end
end
Mentés.
Az új.html.erb oldalon belül fogjuk tárolni a cím és a leírás rögzítésére szolgáló űrlapunkat.
De előbb győződjünk meg róla, hogy az oldal működik… Add:
<h1>Create an article</h1>
Aztán töltsük be a szervert…
Az eredmény…
Nagyszerű. Működik.
Most hozzuk létre a modellel támogatott űrlapot. A Rails itt biztosítja a form-for helper metódusokat.
A new.html.erb fájlban…
<h1>Create an Article</h1><%= form_for @article do |f| %><% end %>
És kezdeményeztünk egy példányváltozót, így most létre kell hoznunk a változót a kontrollerünkben…
class ArticlesController < ApplicationControllerdef new
@article = Article.new
endend
Nagyszerű. Minden rendben működik…
Most, gyűjtsünk néhány adatot…
<h1>Create an Article</h1><%= form_for @article do |f| %>
<p>
<%= f.label :title %>
<%= f.text_field :title %>
</p><% end %>
És töltsük be az oldalt, hogy lássuk, mit csináltunk…
Nagyszerű. Működik…
Most, fejezzük be az űrlapot…
Nagyszerű. Minden, amire szükségünk van…
Most, létre kell hoznunk egy ‘create’ műveletet a vezérlőben…
class ArticlesController < ApplicationControllerdef new
@article = Article.new
enddef create
render plain: params.inspect
endend
Az űrlap kitöltésekor, majd elküldésekor ezeket az adatokat fogjuk látni:
De azt akarjuk, hogy ezek az adatok az adatbázisba kerüljenek…
De ez még nem elég… Meg akarjuk mutatni a cikket is…
Egy már létrehozott elérési utat használunk, és átadjuk az új cikk példányváltozóját…
redirect_to articles_show(@article)
A teljes kód…
De ez nem elég jó, ugye? Ezt a kódot úgy akarjuk átalakítani, hogy értesítést adjon, ha a cikket sikeresen létrehoztuk:
És most gondoskodunk arról, hogy a flash üzeneteink minden oldalon láthatóak legyenek…
Az application.html.erb fájl testében…
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
És most gondoskodni akarunk arról, hogy a hibák is megjelenjenek…
A new.html.erb fájlban…
Nagyszerű. Most már megmutatja nekünk a hibákat az articles/new URL-ben:
Most győződjünk meg róla, hogy a show action-t létrehoztuk…
def show
@article = Article.find(params)
end
Most létre kell hoznunk egy oldalt, amelyen az információkat megjelenítjük…
Meghívjuk ezt a fájlt…
show.html.erb
Az oldalon belül…
<h1>Showing selected article</h1><p>
Title: <%= @article.title %>
</p><p>
Description: <%= @article.description %>
</p>
És ez fogja megjeleníteni…
(Hiba? Itt a megoldás egy gyakori hibára: a show.html.erb fájl létrehozása rossz helyen)
Hurrá. Ezután a cikkek szerkesztésével fogunk foglalkozni…
10. lépés: Cikkek szerkesztése
A vezérlőben kell létrehoznunk a szerkesztési műveletet… Melyik vezérlőben? Természetesen a cikkek vezérlőben!
def edit
end
És létre kell hoznunk a szerkesztési sablont a nézetekben… Melyik mappában? A articles view mappában természetesen!
edit.html.erb
Most létre kell hoznunk egy űrlapot a szerkesztéshez…
Ténylegesen a new.html.erb űrlapból másolhatunk/illeszthetünk. Ugyanazt az űrlapot fogjuk használni a jelenlegi cikk frissítéséhez, mint amit az új cikk létrehozásához használtunk.
Most, fejezzük be a szerkesztési műveletünket a vezérlőben…
def edit
@article = Article.find(params)
end
Most, hozzá kell adnunk egy frissítési műveletet…
11. lépés: A cikkek indexlistájának hozzáadása, és a szerkesztési/megjelenítési linkek hozzáadása
Add index műveletet az articles_controllerben.rb…
def index
@articles = Article.all
end
Ezután létre kell hoznunk a sablont… Melyik views könyvtárban fogjuk elhelyezni ezt a fájlt?
index.html.erb
A fájlon belül pedig…
Az eredmény…
Klassz. Most adjuk hozzá az egyes cikkek szerkesztési és megjelenítési linkjeit…
<td><%= link_to 'Edit', edit_article_path(article) %></td>
<td><%= link_to 'Show', article_path(article) %></td>
A kód így néz ki…
Ezzel megkapjuk…
Most adjunk hozzá néhány ‘Vissza’ linket a szerkesztési, megjelenítési és új oldalhoz… Menjünk előre és ugorjunk be az adott oldalakra és adjuk hozzá az új linkeket így:
<%= link_to 'Back', articles_path %>
Az enyémet az egyes fájlok legalsó részéhez adtam hozzá.
És adjunk hozzá egy szerkesztési linket a bemutató oldalra…
<%= link_to "Edit", edit_article_path(@article) %>
12. lépés: Az űrlapok átalakítása egyetlen részletté
Készítsünk egy új fájlt közvetlenül a views/articles-ben.
_form.html.erb
Másold/illeszd be az űrlap adatait ebbe a fájlba…
Aztán rendereld az űrlapot az új és a szerkesztő oldalon…
<%= render 'form' %>
El kell selejtezned az összes régi űrlapadatot, és hozzá kell adnod a kódrészletet az új és a szerkesztő oldalhoz, így mindegyik valahogy így néz ki:
<h1>Edit Article</h1><%= render 'form' %><%= link_to 'Back', articles_path %>
Most hozzáadjuk a destroy action-t…
13. lépés: A Destroy Action hozzáadása
A vezérlőben…
Melyik vezérlőben? Már tudod.
Most, hozzá kell adnunk a linkeket azokhoz az oldalakhoz, ahonnan törölni szeretnénk. Az alábbi linket használva…
<%= link_to 'Delete', article_path(article), method: :delete, data: {confirm: "Are you sure?"} %>
…hozzáadjuk azokhoz az oldalakhoz, ahonnan szeretnénk, hogy a felhasználó törölni tudjon.
Ha az index oldalunkhoz adom hozzá, akkor így fog kinézni…
Ha a show oldalunkhoz adjuk hozzá, akkor a destroy linket csak egy kicsit kell módosítanunk, hogy utánozza a szerkesztés link szerkezetét. Érti, mire gondolok?
Ez:
<%= link_to 'Delete', article_path(@article), method: :delete, data: {confirm: "Are you sure?"} %>
Ez helyett:
<%= link_to 'Delete', article_path(article), method: :delete, data: {confirm: "Are you sure?"} %>
14. lépés: Refaktoráljuk a cikkek vezérlőjét
A fejlesztés egyik alapelve a DRY.
Elképzelhető, hogy már tudja, mit jelent: “
Meglehetősen sokat ismételjük magunkat, ezért végezzünk egy kis refaktorálást.
Ez a kódsor az összes akciónkban megjelenik…
@article = Article.find(params)
Elkészítünk tehát egy privát metódust, és ott tároljuk ezt a sort…
def set_article
@article = Article.find(params)
end
Ezt követően töröljük a kódsort az akciókból…
Ez benne van a destroy, show, update, edit…
Jobbra a vezérlő első sora alatt…
before_action :set_article, only:
A frissített vezérlő fájl így fog kinézni:
15. lépés: Bootstrap telepítése
Add hozzá a gemfile-t a github oldalról…
gem 'bootstrap-sass', '~> 3.4.1'
gem 'sassc-rails', '>= 2.1.0'
Ezután a parancssorban, ügyelve arra, hogy az app könyvtárban vagy, és nem az egyik alkönyvtárban, telepítsd…
$ bundle install
Egy új CSS fájlt is létre kell hoznod… A fájl neve így nézhet ki alább, és az app/assets/stylesheets alatt hozod létre
custom.css.scss
És hozzáadod…
Ezután, az alkalmazásban.js fájlban az app/assets/javascripts alatt…
//= require jquery
//= require bootstrap-sprockets
És ha Rails 5-t használsz, telepítsd a jQuery gem-et…
gem 'jquery-rails'
Nem vagy benne biztos, hogy milyen verziót használsz? Futtasd le a következőt a terminálban:
$ rails -v
Már tudod. Ha telepítened kell a jquery-t, add hozzá a fenti gem-et a gemfile-hoz és bundle install.
$ bundle install
16. lépés: Navigációs sáv telepítése
Hozz létre részlegeset a layouts mappa alatt…
_navigation.html.erb
Most, menj a bootstrap honlapjára…
Kapd el az alapértelmezett navbar kódját… Ez az első példa és valahogy így néz ki:
És illeszd be a _navigation részlegedbe… Mentés.
Most renderelje a részlegeset az application.html <head> </head> részen belül.erb fájlban…
<%= render 'layouts/navigation' %>
A teljes fájl most valahogy így néz ki:
Indítsd újra a kiszolgálót (mac-en: control + c), mert nemrég adtál hozzá néhány új drágakövet, majd indítsd újra:
$ rails s
Azután, amikor frissíted a helyi szervert, azt fogod látni:
Niiiiiiiiice….. Jól néz ki, nem?
Most, kezdjük a stylingot! Vagy inkább, tegyük ki a stylingot az utunkból nagyon gyorsan, hogy az alkalmazás építésére koncentrálhassunk, ne pedig az alkalmazás stylingjára 🙂
A custom.css.scss fájlba másoljuk be/be, majd mentsük el:
17. lépés: Linkek hozzáadása a Navbarhoz
Most foglalkozzunk a Nav barral, és győződjünk meg róla, hogy a navbar linkjei oda mutatnak, ahová szeretnénk, hogy mutassanak!
Ez…
<a class="navbar-brand" href="#">Alpha Blog</a>
lesz:
<%= link_to "Alpha Blog", root_path, class: "navbar-brand", id: "logo" %>
Frissítsd újra az oldalad és nézd meg:
És most már bármelyik oldalon az ALPHA BLOG-ra kattintva a root_path-ra (az index oldalra) navigálhatsz.
A következőkben adjunk egy linket a Cikkek indexe oldalra:
A Navbar első “Link” helyett:
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
Add:
<li><%= link_to "Articles", articles_path %></li>
És a Navbar második “Link” helyett:
<li><a href="#">Link</a></li>
Add:
<li><%= link_to "Create Article", new_article_path %></li>
Az indexben lévő “Cikk létrehozása” másik linket most már eltávolíthatjuk.html.erb fájlt. Csak keressük meg és töröljük.
A keresősávot is törölni fogom. Azt nem fogjuk használni.
Tépjünk ki mindent alulról:
Az első legördülő menüre sincs szükségünk, így az is kikerül. Csak keressük meg ezt, és töröljük ki:
Mentsük el a fájlt. Frissítsük a localhost szerverünket, és látni fogjuk:
18. lépés: Az űrlap sablonjának stílusa
A kódot a bootstrapen itt találjuk.
A beágyazott ruby-t és a bootstrap-et fogjuk keverni, hogy a kívánt eredményt kapjuk.
A _form.html fájlban.erb partial, Change this…
Into this…
Nézzünk meg egy fontos változtatást, amit a form do utasítás elején végeztünk…
<%= form_for(@article, :html => {class: "form-horizontal", role: "form"}) do |f| %>
És figyeljük meg a szintaxist a form elemeken belül…
<%= f.text_field :title, class: "form-control", placeholder: "Title of article", autofocus: true %>
Step 19: Az üzenetek stílusa & Refactor into Partials
Most frissítsük a hibaüzenetek stílusát is. Frissítsük a stilizálást…
ről:
Ez megváltoztatja a hibaüzeneteket:
Most kivonjuk egy részlegesre..
Hozzunk létre egy új mappát a nézetek alatt ‘shared’ néven…
Hozzunk létre egy új fájlt _errors néven.html.erb…
Másoljuk/illesszük be a hibaüzenetet ebbe a fájlba… Mentés.
Most távolítsuk el a hibaüzenetet a _form.html.erb fájlból, és cseréljük ki a kódot:
<%= render 'shared/errors' %>
Hozzunk létre egy _messages.html.erb fájlt is, és tároljuk a shared mappa alatt. Ebben a fájlban adjuk hozzá a flash üzenetek kódját:
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
Mentsük el a fájlt. Győződjünk meg róla, hogy a layouts/application.html.erb fájlban lévő kódot kicseréljük:
<%= render 'shared/errors' %>
A teljes fájl jelenleg így néz ki:
A következőkben a flash üzeneteket stilizáljuk…
A _messages.html.erb részleges fájlban változtassuk meg ezt…
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
erre:
Az articles_controller.rb fájlban lévő összes flash-t is flash-re kell változtatnunk, hogy befejezzük ezt a lépést.
20. lépés: Update Article Instance Variables To Work For Users
Ez egy kicsit korai, mivel még nem is hoztunk létre felhasználókat vagy felhasználói műveleteket a blogunkhoz, de majd létrehozunk felhasználókat, és azt akarjuk, hogy a hibaüzeneteink ugyanúgy működjenek a felhasználóknál, mint a cikkeknél. Érted, mire gondolok?
Mindegyik funkció működik a cikkeknél: új cikkek létrehozása, régi cikkek szerkesztése, és a flash hibaüzenetek, amelyek tudatják velünk, hogy mi ment rosszul… Azt akarjuk, hogy ezek a flash hibaüzenetek közöljék velünk, amikor megpróbálunk létrehozni egy új felhasználót vagy szerkeszteni egy jelenlegi felhasználót.
Ezt úgy érjük el, hogy a @article instance változót frissítjük olyanná, ami cikkeknél vagy felhasználóknál is működik…
A shared/_errors.html.erb fájlban frissítsük a @article példányváltozót egy @obj példányváltozóra…
Most, frissítenünk kell a részleges renderelési utasítást… Az articles/_form.html fájlban találhatót.erb
Ez volt…
<%= render 'shared/errors' %>
és most már így kell olvasni…
<%= render 'shared/errors', obj: @article %>
A következőkben a “show” nézeten fogunk dolgozni…
21. lépés: A Show Article oldal stílusa
A views/articles/show.html frissítése.erb oldalt a következőre…
Ez így fog renderelni:
A következőkben hozzáadunk néhány ‘simple_format’…
Módosítjuk ezt…
<%= @article.description %>
Erre…
<%= simple_format(@article.description) %>
Ezután még egy kis stílus a gombokhoz…
<%= link_to "Edit", edit_article_path(@article), class: "btn btn-xs btn-primary" %> |
<%= link_to 'Back', articles_path, class: "btn btn-xs btn-success" %>
Ezzel gyönyörű kis gombokat kapunk…
Aztán, adjunk hozzá egy törlés gombot…
Egy szép színes törlés gombot…
Az egész kódblokk most így néz ki:
22. lépés: Stílus cikklistás indexoldal
Frissítjük ezt a szörnyen bénán kinéző oldalt…
Az index.html.erb oldalt a következő kóddal kell helyettesíteni:
A cikk testének stílusa:
.article-body {
border-top: 1px solid #eaeaea;
padding-top: 15px;
padding-bottom: 15px;
}
A cikk címének stílusa:
.article-title {
font-weight: bold;
font-size: 1.5em;
}
Az oldalad mostantól így fog kinézni:
Lovely.
23. lépés: Felhasználók létrehozása + Feature Branch létrehozása a Githubon
A következő lépés a felhasználók létrehozása! Király! A felhasználóink modellje a “User” nevet fogja viselni. Az alábbi hasznos táblázatban megmagyarázzuk, hogyan lesz formázva a felhasználói táblázat, és mik lesznek a különböző elnevezési struktúrák a fájlok számára:
A cikkeket már létrehoztuk. Tudunk cikkeket létrehozni, olvasni, szerkeszteni és törölni.
De jelenleg bárki, aki hozzáfér a bloghoz, bármelyik másik cikket elolvashatja, szerkesztheti és törölheti.
Azt akarjuk, hogy csak a regisztrált felhasználók legyenek képesek ezekre a funkciókra, és csak az általuk létrehozott cikkeket tudják szerkeszteni és törölni.
Ezért persze szükségünk van felhasználókra, és szükségünk van egy olyan módszerre is, amellyel nyomon követhetjük a cikkeket létrehozó felhasználókat. Ezt úgy tudjuk megoldani, hogy a cikket létrehozó felhasználó felhasználói azonosítóját a cikk táblában tároljuk a cikkek sorában. Ez egy idegen kulcsú társítás:
A user_id oszlop hozzáadása a cikkek táblához lehetővé teszi számunkra, hogy “v-lookup”-ot végezzünk a többi felhasználói információhoz.
Egy cikk, amelyen több ember dolgozik, egy sok-sok kapcsolat lenne…
Egy cikk, amin egy ember dolgozik, ahol egy ember sok cikket hozhat létre, az egy a sokhoz társítás…
A cikkkategóriák, ha létrehoznánk őket, sok a sokhoz társítás lenne.
Oké, elég a dumából, hozzuk létre a Felhasználó táblát…