Seuraavaksi meidän on luotava mallitiedosto osoitteeseen blog/app/models…
article.rb
<<<< MAI 2019 PÄIVITYS KIRJOITTAJALTA >>>>
Visuaalisen tekstinkäsittelyohjelman käyttämisen sijaan voit luoda tiedoston myös päätelaitteen kautta:
cd app/models
touch article.rb
<<< END UPDATE >>>>
Nyt takaisin visuaalisessa tekstieditorissa ja artikkelin sisällä.rb-malli…
class Article < ActiveRecord::Baseend
Vaihe 7: Inside the Rails Console
Nyt voimme hypätä sisään Rails-konsoliin ja testata yhteyden taulukkoon…
$ rails c
Sitten kutsua kaikkia artikkeleita…
$ Article.all
Sinun pitäisi nähdä SQL-kysely, joka näyttää seuraavalta…
(Jos olet navigoinut komentorivin sisällä blogihakemiston kautta, saatat saada virheilmoituksen tähän. Varmista, että pääset takaisin app-hakemistoon tai alla oleva Article.all-komento palauttaa virheen.)
Kirjoittamalla vain ’Article’ saat kaikki taulukon attribuutit…
Lisää komentoja…
article = Article.new
Luo uuden muuttujan ’artikkeli’ sisälle tallennetun uuden artikkelin, jossa on kaikki attribuutit:
Nyt voimme lisätä otsikon ja kuvauksen manuaalisesti rails-konsolin kautta…
Nyt meidän täytyy tallentaa nämä tiedot..
article.save
Tämä komento luo SQL-kyselyn, jolla nämä uudet arvot lisätään artikkelitaulukkoon…
Voitamme luoda toisen artikkelin kerralla käyttämällä komentoa ”mass assignment” (joukkotiedonanto)…
article = Article.new(title: "This is my second article", description: "This is my second description")
Jälleen kerran meidän on tallennettava artikkelin….
article.save
Walah…
Voimmekin tehdä tämän kolmannella tapaa käyttämällä create-menetelmää…
Article.create(title: "This is my third title", description: "This is my third description")
Ja se tallentaa artikkelin automaattisesti…
Toteutetaan nyt, että haluamme muokata jotakin näistä artikkeleista… Ensin meidän täytyy napata artikkeli…
article = Article.find(2)
Sitten voimme muokata artikkelia ja tallentaa artikkelin…
article.title = "This is an edited second article"
Ja sitten tallentaa…
article.save
Tuottaa tarvittavan SQL-kyselyn…
Poistamme nyt artikkelin… Tartu ensin artikkeliin…
article = Article.find(3)
Sitten poista…
article.destroy
Walah…
Vaihe 8: Add Validations to Enforce Constraints on Articles
In the article.rb-mallissa…
class Article < ActiveRecord::Base
validates :title, presence: trueend
Tämä edellyttää, että kaikki uudet artikkelit sisältävät otsikon. Voimme testata tämän rails-konsolissa (älä unohda käynnistää rails-konsolia uudelleen mallin päivittämisen jälkeen!
class Article < ActiveRecord::Base
validates :title, presence: true
validates :description, presence: trueend
Ja se estää luomasta artikkelia ilman kuvausta, vaikka sillä olisikin otsikko… (muista taas käynnistää rails-konsoli uudelleen mallin päivittämisen jälkeen.)
Virheitäsi voit tarkastaa näillä komennoilla…
article.errors.any?
article.errors.full_messages
Seuraavaksi lisäämme pituuden validoinnit…
Kiva.
Jatkossa haluamme, että käyttäjät voivat suorittaa nämä samat toiminnot selaimessa, joten meidän täytyy perustaa reitit, ohjaimet ja näkymät artikkelien luomista ja tallentamista varten!
Vaihe 9: Lisää kyky luoda artikkeleita selaimesta
Uuden artikkelin elinkaari…
Katsele Udemy-kurssin 4. jakson luennon 63 ensimmäiset 2 minuuttia saadaksesi täydellisen yleiskatsauksen…
Käsitellään ensin reittejämme…
Reittien sisälle.rb-tiedostoon lisätään tämä rivi …
resources :articles
Tämä antaa meille kaikenlaisia polkuja päivittää, poistaa, luoda, näyttää jne.
Tarkista uudet polut… MUTTA ODOTTA, ennen kuin tarkistat polut varmista, että olet takaisin pois rails-konsolista kirjoittamalla:
exit
silloin,
$ rake routes
Cool.
Nyt tarvitsemme uuden ohjaimen… Luo tämä tiedosto alle app/controllers.
touch articles_controller.rb#or just create the file using the visual text editor
Ja sitten uuden controller-tiedoston sisällä…
class ArticlesController < ApplicationControllerend
Nyt, meidän täytyy luoda uusi kansio viewsin alle tallentamaan artikkelinäkymätiedostojamme… Kansion tulee olla nimeltään ’articles’
<<<< PÄIVITTÄMINEN KIRJOITTAJALTA >>>>
Kokeile visuaalisen tekstinkäsittelyohjelmiston sijasta komentorivin käyttöä:
cd views
mkdir articles
cd articles
<<< END UPDATE >>>>
Luomme nyt uuden tiedoston ’articles’ alle nimellä…
touch new.html.erb# or create using the visual text editor
Ja sitten meidän on päivitettävä articles_controller.rb:
class ArticlesController < ApplicationController
def new
end
end
Tallenna.
Tälle new.html.erb-sivulle tallennamme lomakkeemme otsikon ja kuvauksen kaappaamiseksi.
Mutta ensin varmistetaan, että sivu toimii… Lisää:
<h1>Create an article</h1>
Ja sitten lataamme palvelimen…
Tuloksena on…
Hienoa. Se toimii.
Luotaan nyt mallipohjainen lomake. Rails tarjoaa tässä lomaketta varten apumetodit.
Tiedostossa new.html.erb…
<h1>Create an Article</h1><%= form_for @article do |f| %><% end %>
Ja aloitimme instanssimuuttujan, joten nyt meidän on luotava muuttuja kontrolleriimme…
class ArticlesController < ApplicationControllerdef new
@article = Article.new
endend
Hienoa. Se toimii…
Nyt viimeistellään lomake…
Hienoa. Kaikki mitä tarvitsemme…
Nyt meidän täytyy luoda ’create’-toiminto ohjaimeen…
class ArticlesController < ApplicationControllerdef new
@article = Article.new
enddef create
render plain: params.inspect
endend
Kun täytät lomakkeen ja lähetät sen jälkeen, näet nämä tiedot:
Mutta haluamme, että nämä tiedot tallennetaan tietokantaan…
Mutta se ei riitä… Haluamme myös näyttää artikkelin…
Käytämme polkua, jonka olemme jo luoneet, ja välitämme uuden artikkelin instanssimuuttujan…
redirect_to articles_show(@article)
Koko koodi…
Mutta se ei taida riittää? Haluamme muokata tätä koodia niin, että se antaa ilmoituksen, jos artikkelin luominen onnistui:
Ja nyt varmistamme, että flash-viestimme näkyvät kaikilla sivuilla…
Tiedoston application.html.erb rungossa…
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
Ja nyt haluamme varmistaa, että myös virheet näytetään…
Tiedostossa new.html.erb…
Hienoa. Nyt se näyttää meille virheet artikkelit/uusi URL-osoitteessa:
Varmista nyt, että show action on luotu…
def show
@article = Article.find(params)
end
Nyt meidän on luotava sivu, jolla näytämme tiedot… Tässä on ratkaisu yleiseen virheeseen: show.html.erb-tiedoston luominen väärään paikkaan)
Hurra. Seuraavaksi käsittelemme artikkelien muokkaamista…
Vaihe 10: Artikkelien muokkaaminen
Meidän on luotava muokkaustoiminto ohjaimeen… Mihin ohjaimeen? Artikkelien kontrollerissa tietenkin!
def edit
end
Ja meidän täytyy luoda muokkausmalli näkymiin… Mihin kansioon? Artikkelit-näkymät-kansiossa tietenkin!
edit.html.erb
Nyt meidän täytyy rakentaa lomake muokkausta varten…
Voidaan itse asiassa kopioida/liimata new.html.erb-lomakkeesta. Käytämme samaa lomaketta nykyisen artikkelin päivittämiseen, jota käytimme uuden artikkelin luomiseen.
Viedään nyt valmiiksi editointitoimintomme kontrollerissa…
def edit
@article = Article.find(params)
end
Nyt meidän on lisättävä päivitystoiminto…
Vaihe 11: Lisää artikkeleiden indeksilistaus ja lisää muokkaus-/näyttölinkit
Lisää index-toiminto artikkeleiden_kontrolleriin.rb…
def index
@articles = Article.all
end
Sitten meidän on luotava malli…Mihin views-hakemistoon sijoitamme tämän tiedoston?
index.html.erb
Ja tuon tiedoston sisälle…
Siten saamme…
4863>
Cool. Lisätään nyt muokkaus- ja näyttölinkit jokaiselle artikkelille…
<td><%= link_to 'Edit', edit_article_path(article) %></td>
<td><%= link_to 'Show', article_path(article) %></td>
Koodi näyttää seuraavalta…
Siten saamme…
Lisätään nyt ’Takaisin’-linkit muokkaus-, näyttämis- ja uudelle sivulle… Mene ja hyppää kyseisille sivuille ja lisää uudet linkit näin:
<%= link_to 'Back', articles_path %>
Lisäsin omani kunkin tiedoston alareunaan.
Ja lisätään vielä muokkauslinkki show-sivulle…
<%= link_to "Edit", edit_article_path(@article) %>
Vaihe 12: Refactor Forms into a Single Partial
Luo uusi tiedosto suoraan views/artikkelit.
_form.html.erb
Kopioi/liitä lomakkeen tiedot tähän tiedostoon…
Sitten renderöi lomake uudella ja muokkaa sivulla…
<%= render 'form' %>
Sinun pitäisi olla romuttanut kaikki vanhat lomaketiedot pois ja lisännyt koodinpätkän noin uudelle ja muokkaa sivulle niin, että kumpikin näyttää jotakuinkin tältä:
<h1>Edit Article</h1><%= render 'form' %><%= link_to 'Back', articles_path %>
Nyt lisäämme tuhota-toiminnon…
Vaihe 13: Lisää tuhota-toiminto
Kontrolleriin…
Mihin kontrolleriin? Tiedät jo.
Nyt meidän täytyy lisätä linkit sivuille, joilta haluamme pystyä poistamaan. Käyttämällä alla olevaa linkkiä…
<%= link_to 'Delete', article_path(article), method: :delete, data: {confirm: "Are you sure?"} %>
…lisää sivuille, joilta haluat käyttäjän pystyvän poistamaan…
Jos lisään index-sivullemme, se näyttää seuraavalta…
Jos lisäämme show-sivullemme, meidän on muutettava destroy-linkkiä vain hieman, jotta se jäljittelisi edit-linkin rakennetta. Ymmärrätkö, mitä tarkoitan?
Tämä:
<%= link_to 'Delete', article_path(@article), method: :delete, data: {confirm: "Are you sure?"} %>
Tämän sijaan:
<%= link_to 'Delete', article_path(article), method: :delete, data: {confirm: "Are you sure?"} %>
Vaihe 14: Refaktoroi artikkelien ohjaimet
Yksi kehityksen periaatteista on DRY.
Tiedät ehkä jo, mitä se tarkoittaa: ”
Toistamme itseämme aika paljon, joten tehdään pieni refaktorointi.
Tämä koodirivi esiintyy kaikissa toiminnoissamme…
@article = Article.find(params)
Luomme siis yksityisen metodin ja tallennamme tämän rivin sinne…
def set_article
@article = Article.find(params)
end
Poista sitten koodirivi toiminnoistamme…
Se sisältyy destroy, show, update, edit…
Suoraan ohjaimen ensimmäisen rivin alapuolella…
before_action :set_article, only:
Päivitetty ohjaustiedosto näyttää seuraavalta:
Vaihe 15: Asenna Bootstrap
Add gemfile from github page…
gem 'bootstrap-sass', '~> 3.4.1'
gem 'sassc-rails', '>= 2.1.0'
Sitten komentorivillä, varmista että olet app-hakemistossa etkä missään alihakemistossa, asenna…
$ bundle install
Tarvitset myös uuden CSS-tiedoston luomista… Tiedoston nimi voi näyttää tältä alla ja luot sen app/assets/stylesheets
custom.css.scss
Ja lisää…
Sitten, sovelluksessa.js-tiedoston alle app/assets/javascripts…
//= require jquery
//= require bootstrap-sprockets
Ja jos käytät Rails 5:tä, asenna jQuery-jalokivi…
gem 'jquery-rails'
Et ole varma mitä versiota käytät? Suorita terminaalissa seuraava:
$ rails -v
Nyt tiedät. Jos sinun täytyy asentaa jquery, lisää yllä oleva gem gemfileen ja bundle install.
$ bundle install
Vaihe 16: Asenna navigaatiopalkki
Luo osittainen layouts-kansion alle…
_navigation.html.erb
Mene nyt bootstrapin kotisivulle…
Nappaa oletusarvoinen navigaatiopalkin koodi… Se on ensimmäinen esimerkki ja näyttää jotakuinkin tältä:
Ja liitä se omaan _navigation-osaan… Tallenna.
Renderöi nyt osittainen sovellus.html:n <head> </head>:n sisällä.erb-tiedoston…
<%= render 'layouts/navigation' %>
Koko tiedosto näyttää nyt jotakuinkin tältä:
Käynnistä palvelin uudelleen (macilla: control + c), koska olet hiljattain lisännyt uusia helmiä, ja käynnistä se sitten uudelleen:
$ rails s
Ja sitten kun päivität paikallisen palvelimesi, näet:
Niiiiiiiiiiice….. Näyttää hyvältä, eikö?
Nyt alkaa muotoilu! Tai pikemminkin, hoidetaan muotoilu pois tieltä todella nopeasti, jotta voimme keskittyä sovelluksen rakentamiseen sen sijaan, että muotoilisimme sovellusta 🙂
Kopioi custom.css.scss-tiedostoon kopioi/pastaa ja tallenna sitten:
Vaihe 17: Lisää linkit navipalkkiin
Käsitellään nyt navipalkki ja varmistetaan, että navipalkin linkit viittaavat niihin paikkoihin, joihin haluamme niiden viittaavan!
Tästä…
<a class="navbar-brand" href="#">Alpha Blog</a>
tulee tämä:
<%= link_to "Alpha Blog", root_path, class: "navbar-brand", id: "logo" %>
Virkistä sivusi ja katso:
Ja nyt millä tahansa sivulla voit siirtyä juuripolkuun (indeksisivulle) klikkaamalla ALPHA BLOG.
Lisätään seuraavaksi linkki artikkelien hakemistosivulle:
Navapalkin ensimmäisen ”linkin” tilalle:
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
Lisää:
<li><%= link_to "Articles", articles_path %></li>
Ja navapalkin toisen ”linkin” tilalle:
<li><a href="#">Link</a></li>
Lisää:
<li><%= link_to "Create Article", new_article_path %></li>
Nyt voimme poistaa toisen linkin ”Luo artikkeleja” hakemistosta.html.erb-tiedostosta. Jäljitä se ja poista se.
Poistan myös hakupalkin. Emme tule käyttämään sitä.
Poista kaikki alla oleva:
Emme tarvitse myöskään ensimmäistä pudotusvalikkoa, joten se poistuu. Etsi vain tämä ja poista se:
Tallenna tiedosto. Päivitä localhost-palvelimesi ja näet:
Vaihe 18: Muotoile lomakemalli
Koodin bootstrapista löydät täältä.
Sekoitamme sulautettua rubya ja bootstrapia saadaksemme haluamamme lopputuloksen.
Sisällä _form.html.erb partial, Change this…
Into this…
Huomaa tärkeä muutos, jonka teimme lomakkeen do-lausekkeen alkuun…
<%= form_for(@article, :html => {class: "form-horizontal", role: "form"}) do |f| %>
Ja huomaa syntaksi lomakkeen elementtien sisällä…
<%= f.text_field :title, class: "form-control", placeholder: "Title of article", autofocus: true %>
Vaihe 19: Viesteiden tyylittely & Refactor into Partials
Päivitetään nyt myös virheilmoitusten tyylittely. Päivitä muotoilu…
:
Tällöin virheilmoitukset muuttuvat:
Nyt poimitaan osittaiseksi..
Luo näkymien alle uusi kansio nimeltä ’shared’…
Luo uusi tiedosto nimeltä _errors.html.erb…
Kopioi/liitä virheilmoitus tuohon tiedostoon… Tallenna.
Poistetaan nyt virheilmoitus tiedostosta _form.html.erb ja korvataan koodi seuraavasti:
<%= render 'shared/errors' %>
Luotaan myös tiedosto _messages.html.erb ja tallennetaan se jaetun kansion alle. Lisää tuohon tiedostoon flash messages -koodi:
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
Tallenna tiedosto. Varmista, että korvaat layouts/application.html.erb-tiedostossa olevan koodin seuraavalla:
<%= render 'shared/errors' %>
Koko tiedosto näyttää tällä hetkellä seuraavalta:
Seuraavaksi tyylittelemme flash-viestit…
Tiedostossa _messages.html.erb-osio, muuta tämä…
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
tämäksi:
Meidän on myös muutettava kaikki artikkelit_controller.rb-tiedostossa oleva flash flashiksi tämän vaiheen loppuun saattamiseksi.
Vaihe 20: Päivitä artikkeli-instanssimuuttujat toimimaan käyttäjille
Tämä on hieman ennenaikaista, koska emme ole vielä edes luoneet käyttäjiä tai käyttäjätoimintoja blogiimme, mutta luomme käyttäjiä ja haluamme virheilmoitustemme toimivan käyttäjille aivan kuten ne toimivat artikkeleille. Tiedätkö mitä tarkoitan?
Meillä on kaikki nämä toiminnot, jotka toimivat artikkeleille: uusien artikkeleiden luominen, vanhojen artikkeleiden muokkaaminen ja flash-virheilmoitukset, jotka kertovat meille, mikä meni pieleen… Haluamme, että nämä flash-virheilmoitukset ilmoittavat meille, kun yritämme luoda uutta käyttäjää tai muokata nykyistä käyttäjää.
Saavutamme tämän päivittämällä instanssimuuttujan @article sellaiseksi, että se sopii artikkeleille tai käyttäjille…
Jako-osassa shared/_errors.html.erb-tiedostossa päivitetään @article-instanssimuuttuja @obj-instanssimuuttujaksi…
Nyt meidän on päivitettävä osittainen renderöintilauseke… Se, joka on kohdassa articles/_form.html.erb
Se oli…
<%= render 'shared/errors' %>
ja nyt sen pitää lukea…
<%= render 'shared/errors', obj: @article %>
Seuraavaksi työstämme ”näytä”-näkymää…
Vaihe 21: Näytä artikkelin näyttösivun tyylittely
Päivitä näkymät/artikkelit/artikkelit/näyttösivu.html.erb-sivun…
Tämä renderöi:
Seuraavaksi lisäämme jonkin verran ’simple_format’…
Muutetaan tämä…
<%= @article.description %>
Tälle…
<%= simple_format(@article.description) %>
Sitten, hieman lisää tyyliä painikkeille…
<%= link_to "Edit", edit_article_path(@article), class: "btn btn-xs btn-primary" %> |
<%= link_to 'Back', articles_path, class: "btn btn-xs btn-success" %>
Se antaa meille kauniit pienet painikkeet…
Sitten, lisää poistopainike…
Kiva värikäs poistopainike…
Koko koodilohko näyttää nyt tältä:
Vaihe 23: Käyttäjien luominen + Feature-haaran luominen Githubiin
Jatkossa luomme käyttäjiä! Siistiä. Käyttäjämallimme tulee olemaan nimeltään ”User”. Alla on hyödyllinen kaavio, joka selittää, miten käyttäjätaulukko muotoillaan ja mitkä ovat tiedostojen erilaiset nimirakenteet:
Olemme jo luoneet artikkeleita. Voimme luoda, lukea, muokata ja poistaa artikkeleita.
Mutta tällä hetkellä kuka tahansa, joka käyttää blogia, voi lukea, muokata ja poistaa minkä tahansa muun artikkelin.
Haluamme, että vain käyttäjät, jotka ovat rekisteröityneet, voivat tehdä näitä toimintoja, ja haluamme, että he voivat muokata ja poistaa vain luomiaan artikkeleita.
Tarvitsemme siis tietenkin käyttäjiä, ja tarvitsemme myös tavan, jolla voimme jäljittää artikkeleja luovat käyttäjät. Tämä voidaan tehdä siten, että artikkelin luoneen käyttäjän käyttäjätunnus tallennetaan artikkelitaulukkoon artikkeliriville. Kyseessä on vierasavainassosiaatio:
Lisäämällä user_id-sarakkeen artikkelitaulukkoon saamme mahdollisuuden ”v-lookup”-hakuun muuhun käyttäjätietoon.
Yhden artikkelin, jonka parissa työskentelee useita henkilöitä, olisi monesta moneen -yhdistelmä…
Yksi artikkeli, jonka parissa yksi henkilö työskentelee, jolloin yksi henkilö voi luoda monta artikkelia, on yksi-moneen assosiaatio…
Artikkelikategoriat, jos niitä luodaan, olisivat monesta-moneen assosiaatio.
Okei, riittää jib-jab, luodaan Käyttäjä-taulukko…