Næst skal vi oprette en modelfil under blog/app/models…
article.rb
<<<< MAY 2019 UPDATE FROM THE AUTHOR >>>>>
I stedet for at bruge den visuelle teksteditor kan du også oprette filen via terminalen:
cd app/models
touch article.rb
<<<< END UPDATE >>>>
Nu er du tilbage i den visuelle teksteditor og inde i artiklen.rb model…
class Article < ActiveRecord::Baseend
Stræk 7: Inde i Rails-konsollen
Nu kan vi hoppe ind i Rails-konsollen og teste forbindelsen til tabellen…
$ rails c
Kald derefter alle artiklerne…
$ Article.all
Du bør se en SQL-forespørgsel, der ser ud som…
$ Article.all
(Hvis du har navigeret inde på kommandolinjen gennem blogmappen, kan du få en fejl her. Sørg for, at du kommer tilbage til app-mappen, ellers vil din Article.all-kommando nedenfor returnere en fejl.)
Typ blot ‘Artikel’ ind, så får du alle bordattributterne…
Flere kommandoer…
article = Article.new
Vil oprette en ny artikel gemt inde i variablen ‘article’ med attributterne:
Nu kan vi tilføje en titel og beskrivelse manuelt via rails-konsollen…
Nu skal vi gemme disse data..
article.save
Denne kommando vil generere en SQL forespørgsel til at indsætte disse nye værdier i artikeltabellen…
Vi kan oprette endnu en artikel på én gang ved at bruge “mass assignment”…
article = Article.new(title: "This is my second article", description: "This is my second description")
Også her skal vi gemme artiklen…
article.save
Walah…
Vi kan gøre det på en tredje måde ved at bruge “create method”…
Article.create(title: "This is my third title", description: "This is my third description")
Og den vil automatisk gemme artiklen…
Nu lad os lade som om, vi vil redigere en af disse artikler… Først skal vi hente artiklen…
article = Article.find(2)
Så kan vi redigere artiklen og gemme artiklen…
article.title = "This is an edited second article"
Og derefter gemme…
article.save
Vil generere den nødvendige SQL forespørgsel…
Nu skal vi slette en artikel… Tag først fat i artiklen…
article = Article.find(3)
Så sletter du…
article.destroy
Walah…
Stræk 8: Tilføj valideringer for at håndhæve begrænsninger på artikler
I artiklen.rb model…
class Article < ActiveRecord::Base
validates :title, presence: trueend
Dette vil kræve, at alle nye artikler skal indeholde en titel. Vi kan teste dette i rails-konsollen (glem ikke at genstarte rails-konsollen, efter at du har opdateret modellen! Tak til Mike Boyd og Andrew Linck for påmindelserne)…
article = Article.new
prøv derefter at gemme uden at opdatere titlen…
article.save
boom…
Vi kan gøre det samme for description…
class Article < ActiveRecord::Base
validates :title, presence: true
validates :description, presence: trueend
Og det vil forhindre dig i at oprette en artikel uden beskrivelse, selv om den har en titel… (igen, sørg for at genstarte rails-konsollen, efter du har opdateret modellen.)
Du kan kontrollere dine fejl med disse kommandoer…
article.errors.any?
article.errors.full_messages
Næste gang tilføjer vi længdevalideringer…
Cool.
Næste gang vil vi have, at brugerne skal kunne udføre de samme handlinger i browseren, så vi skal oprette ruter, controllere og visninger til oprettelse og lagring af artikler!
Stræk 9: Tilføj mulighed for at oprette artikler fra browseren
Livscyklus for en ny artikel…
Review Udemy Course first 2 minutes of Section 4, Lecture 63 for a complete overview…
Først skal vi tage fat på vores ruter…
In the routes.rb-filen skal du tilføje denne linje …
resources :articles
Det giver os alle mulige stier til at opdatere, slette, oprette, vise osv.
Tjek nye stier med … MEN VENT, før du tjekker stier, skal du sikre dig, at du er tilbage fra rails-konsollen ved at indtaste:
exit
then,
$ rake routes
Cool.
Nu har vi brug for en ny controller … Opret denne fil under app/controllers.
touch articles_controller.rb#or just create the file using the visual text editor
Og derefter inde i den nye controller-fil…
class ArticlesController < ApplicationControllerend
Nu skal vi oprette en ny mappe under views til at gemme vores artikler-visningsfiler… Mappen skal hedde ‘articles’
<<<< OPDATERING FRA FORFATTEREN >>>>
Forsøg at bruge kommandolinjen i stedet for den visuelle teksteditor:
cd views
mkdir articles
cd articles
<<<<< END UPDATE >>>>
Nu skal vi oprette en ny fil under ‘articles’, der hedder…
touch new.html.erb# or create using the visual text editor
Og så skal vi opdatere vores articles_controller.rb:
class ArticlesController < ApplicationController
def new
end
end
Save.
Inden for denne new.html.erb-side skal vi gemme vores formular til at indfange titel og beskrivelse.
Men lad os først sikre os, at siden fungerer… Tilføj:
<h1>Create an article</h1>
Og indlæs derefter serveren…
Giver os…
Glimrende. Det virker.
Nu skal vi oprette den modelunderstøttede formular. Rails leverer form-for-hjælpermetoder her.
I filen new.html.erb…
<h1>Create an Article</h1><%= form_for @article do |f| %><% end %>
Og vi indledte en instansvariabel, så nu skal vi oprette variablen i vores controller…
class ArticlesController < ApplicationControllerdef new
@article = Article.new
endend
Glimrende. Alt fungerer fint…
Lad os nu indsamle nogle data…
<h1>Create an Article</h1><%= form_for @article do |f| %>
<p>
<%= f.label :title %>
<%= f.text_field :title %>
</p><% end %>
Og indlæse siden for at se, hvad vi har gjort…
Glimrende. Det virker…
Nu skal vi afslutte formularen…
Godt. Alt, hvad vi har brug for…
Nu skal vi oprette en ‘create’-handling i controlleren…
class ArticlesController < ApplicationControllerdef new
@article = Article.new
enddef create
render plain: params.inspect
endend
Når du udfylder formularen og derefter sender, vil du se disse data:
Men vi ønsker, at disse data skal gemmes i databasen…
Men det er ikke nok… Vi ønsker også at vise artiklen…
Vi bruger en sti, som vi allerede har oprettet, og vi overfører instansvariablen for den nye artikel…
redirect_to articles_show(@article)
Al den kode…
Men det er ikke godt nok, er det? Vi vil refaktorisere denne kode, så den giver en meddelelse, hvis det lykkedes at oprette artiklen:
Og nu vil vi sørge for, at vores flash-meddelelser kan ses på alle sider…
I kroppen af filen application.html.erb…
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
Og nu vil vi sørge for, at fejl også vises…
I filen new.html.erb…
Glimrende. Nu vil den vise os fejlene i URL’en articles/new:
Sørg nu for, at show action er blevet oprettet…
def show
@article = Article.find(params)
end
Nu skal vi oprette en side til at vise oplysningerne på…
Vi vil kalde denne fil…
show.html.erb
Inden for denne side…
<h1>Showing selected article</h1><p>
Title: <%= @article.title %>
</p><p>
Description: <%= @article.description %>
</p>
Og det vil gengive…
(Får du en fejl? Her er løsningen på en almindelig fejl: oprettelse af filen show.html.erb på det forkerte sted)
Hurra. Nu skal vi arbejde med redigering af artikler…
Strg 10: Redigering af artikler
Vi skal oprette redigeringshandlingen i controlleren… Hvilken controller? Artikelcontrolleren selvfølgelig!
def edit
end
Og vi skal oprette redigeringsskabelonen i visningerne… Under hvilken mappe? I mappen articles view selvfølgelig!
edit.html.erb
Nu skal vi oprette en formular til at redigere…
Vi kan faktisk kopiere/indsætte fra formularen new.html.erb. Vi bruger den samme formular til at opdatere en nuværende artikel, som vi brugte til at oprette en ny artikel.
Nu skal vi færdiggøre vores redigeringshandling i controlleren…
def edit
@article = Article.find(params)
end
Nu skal vi tilføje en opdateringshandling…
Stræk 11: Tilføj indeksliste over artikler, og tilføj redigerings-/visningslinks
Føj indekshandling i articles_controller.rb…
def index
@articles = Article.all
end
Så skal vi oprette skabelonen… I hvilken visningsmappe skal vi placere denne fil?
index.html.erb
Og inde i denne fil…
Det giver os…
Cool. Lad os nu tilføje redigerings- og visningslinks for hver artikel…
<td><%= link_to 'Edit', edit_article_path(article) %></td>
<td><%= link_to 'Show', article_path(article) %></td>
Koden ser ud som…
Det giver os…
Nu skal vi tilføje nogle ‘Tilbage’-links til rediger, vis og ny side… Gå ind på de respektive sider og tilføj de nye links på følgende måde:
<%= link_to 'Back', articles_path %>
Jeg har tilføjet mine helt nede i bunden af hver fil.
Og lad os tilføje et redigeringslink på show-siden…
<%= link_to "Edit", edit_article_path(@article) %>
Stræk 12: Refactor Forms into a Single Partial
Opret en ny fil i views/articles direkte.
_form.html.erb
Kopier/indsæt formularens data i denne fil…
Render derefter formularen i den nye og redigerede side…
<%= render 'form' %>
Du skal have skrottet alle de gamle formularoplysninger og tilføjet kodestumpen om til den nye og redigerede side, så de hver især ser nogenlunde sådan ud:
<h1>Edit Article</h1><%= render 'form' %><%= link_to 'Back', articles_path %>
Nu vil vi tilføje destruktionshandlingen…
Strin 13: Tilføj destruktionshandlingen
I controlleren…
Hvilken controller? Det ved du allerede.
Nu skal vi tilføje links til de sider, hvorfra vi ønsker at kunne slette. Ved hjælp af linket nedenfor…
<%= link_to 'Delete', article_path(article), method: :delete, data: {confirm: "Are you sure?"} %>
…tilføj til de sider, hvor du ønsker, at brugeren skal kunne slette.
Hvis jeg tilføjer til vores indeksside, vil det se ud som…
Hvis vi tilføjer til vores show-side, skal vi ændre destroy-linket en lille smule for at efterligne strukturen af edit-linket. Kan du se, hvad jeg mener?
Dette:
<%= link_to 'Delete', article_path(@article), method: :delete, data: {confirm: "Are you sure?"} %>
I stedet for dette:
<%= link_to 'Delete', article_path(article), method: :delete, data: {confirm: "Are you sure?"} %>
Stræk 14: Refactor artikler controller
Et af principperne for udvikling er DRY.
Du ved måske allerede, hvad det betyder: “DON’T REPEAT YOURSELF”
Vi gentager os selv en hel del, så lad os lave lidt refaktorering.
Denne kodelinje optræder i alle vores handlinger…
@article = Article.find(params)
Så vi vil oprette en privat metode og gemme denne linje der…
def set_article
@article = Article.find(params)
end
Så sletter vi kodelinjen fra handlingerne…
Den er inkluderet i destroy, show, update, edit…
Lige under den første linje i controlleren…
before_action :set_article, only:
Den opdaterede controllerfil vil se sådan ud:
Stræk 15: Installer Bootstrap
Føj gemfile fra github-siden…
gem 'bootstrap-sass', '~> 3.4.1'
gem 'sassc-rails', '>= 2.1.0'
Så i kommandolinjen, og sørg for at du er i app-mappen og ikke i en af undermapperne, skal du installere…
$ bundle install
Du skal også oprette en ny CSS-fil… Filnavnet kan se sådan ud nedenfor, og du opretter den under app/assets/stylesheets
custom.css.scss
Og tilføj…
Derpå, i programmet.js-filen under app/assets/javascripts…
//= require jquery
//= require bootstrap-sprockets
Og, hvis du bruger Rails 5, skal du installere jQuery-perlen…
gem 'jquery-rails'
Er du ikke sikker på, hvilken version du bruger? Kør følgende i terminalen:
$ rails -v
Nu ved du det. Hvis du har brug for at installere jquery, skal du tilføje ovenstående gem til gemfilen og bundle install.
$ bundle install
Stræk 16: Installer navigationsbjælke
Opret partial under mappen layouts…
_navigation.html.erb
Nu skal du gå til bootstraps hjemmeside…
Grib standardnavbar-koden… Det er det første eksempel og ser nogenlunde sådan her ud:
Og indsæt i din _navigation partial… Gem.
Giv nu den partielle delvist gengives inde i <head> </head> i application.html.erb-filen…
<%= render 'layouts/navigation' %>
Hele filen ser nu nogenlunde sådan ud:
Start serveren igen (på en mac: control + c), fordi du for nylig har tilføjet nogle nye perler, og start den derefter op igen:
$ rails s
Og når du så opdaterer din lokale server, vil du se:
Niiiiiiiiice…. Ser godt ud, ikke?
Nu, lad os begynde med styling! Eller rettere sagt, lad os få styling af vejen meget hurtigt, så vi kan holde fokus på at bygge appen i stedet for at style appen 🙂
I filen custom.css.scss copy/paste og gem derefter:
Stræk 17: Tilføj links til navigationslinjen
Nu skal vi tage fat på navigationslinjen og sørge for, at navigationslinkene peger på de steder, som vi ønsker, at de skal pege på!
Dette…
<a class="navbar-brand" href="#">Alpha Blog</a>
bliver dette:
<%= link_to "Alpha Blog", root_path, class: "navbar-brand", id: "logo" %>
Fremkalfat din side og se:
Og nu kan du på en hvilken som helst side navigere til root_path (indekssiden) ved at klikke på ALPHA BLOG.
Næst skal vi tilføje et link til siden Artikelindekset:
I stedet for det første “Link” i Navbar:
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
Tilføj:
<li><%= link_to "Articles", articles_path %></li>
Og i stedet for det andet “Link” i Navbar:
<li><a href="#">Link</a></li>
Tilføj:
<li><%= link_to "Create Article", new_article_path %></li>
Nu kan vi fjerne det andet link til “Opret artikel” i indekset.html.erb-filen. Vi skal bare finde det og slette det.
Jeg vil også slette søgelinjen. Den skal vi ikke bruge.
Slip alt nedenfor ud:
Vi har heller ikke brug for den første drop-down-menu, så den ryger ud. Find bare denne og slet den:
Spar filen. Opdater din localhost-server, og du vil se:
Skridt 18: Style formular-skabelonen
Du kan finde koden på bootstrap her.
Vi skal blande indlejret ruby med bootstrap for at få det resultat, vi ønsker.
Inde i _form.html.erb partial, Skift dette…
Into this…
Bemærk en vigtig ændring, som vi har foretaget i begyndelsen af formularens do-anvisning…
<%= form_for(@article, :html => {class: "form-horizontal", role: "form"}) do |f| %>
Og bemærk syntaksen inde i formularelementerne…
<%= f.text_field :title, class: "form-control", placeholder: "Title of article", autofocus: true %>
Step 19: Style meddelelserne & Refactor into Partials
Nu skal vi også opdatere stylingen for fejlmeddelelserne. Opdater stilen fra…
til:
Det ændrer fejlmeddelelserne til:
Nu vil vi udtrække til en partial..
Opret en ny mappe under visningerne med navnet ‘shared’…
Opret en ny fil med navnet _errors.html.erb…
Kopier/indsæt fejlmeddelelsen i denne fil… Gem.
Fjern nu fejlmeddelelsen fra _form.html.erb, og erstat koden med:
<%= render 'shared/errors' %>
Lad os også oprette en _messages.html.erb-fil og gemme den under den delte mappe. Inde i denne fil skal du tilføje koden til flash-beskederne:
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
Spar filen. Sørg for at erstatte koden i filen layouts/application.html.erb med:
<%= render 'shared/errors' %>
Hele filen ser i øjeblikket ud som:
Næst skal vi style flash-beskederne…
I filen _messages.html.erb partial, ændre dette…
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
til dette:
Vi skal også ændre alt flash i filen articles_controller.rb til flash for at fuldføre dette trin.
Strin 20: Opdater artikelinstansvariabler til at fungere for brugere
Dette er lidt for tidligt, da vi ikke engang har oprettet brugere eller brugerhandlinger endnu for vores blog, men vi vil oprette brugere, og vi vil have vores fejlmeddelelser til at fungere for brugere, ligesom de fungerer for artikler. Forstår du, hvad jeg mener?
Vi har alle disse funktioner, der fungerer for artikler: oprettelse af nye artikler, redigering af gamle artikler og flash-fejlmeddelelser, der fortæller os, hvad der gik galt… Vi vil have disse flash-fejlmeddelelser til at kommunikere til os, når vi forsøger at oprette en ny bruger eller redigere en nuværende bruger.
Vi opnår dette ved at opdatere @article-instansvariablen til en, der fungerer for artikler eller brugere…
I shared/_errors.html.erb-filen skal du opdatere @article-instansvariablen til en @obj-instansvariabel…
Nu skal vi opdatere den delvise renderingsanvisning… Den i articles/_form.html.erb
Den var…
<%= render 'shared/errors' %>
og nu skal den lyde…
<%= render 'shared/errors', obj: @article %>
Næste gang skal vi arbejde på visningen “show”…
Stræk 21: Stil artikelsiden Vis artikelsiden
opdatere views/articles/show.html.erb-siden til…
Dette vil gengive:
Næst skal vi tilføje noget ‘simple_format’…
Ændre dette…
<%= @article.description %>
til dette…
<%= simple_format(@article.description) %>
Dernæst lidt mere stil til knapperne…
<%= link_to "Edit", edit_article_path(@article), class: "btn btn-xs btn-primary" %> |
<%= link_to 'Back', articles_path, class: "btn btn-xs btn-success" %>
Vil give os nogle smukke små knapper…
Så tilføj en sletteknap…
En flot farverig sletteknap…
Hele kodeblokken ser nu sådan her ud:
Stræk 22: Style artikeloversigt indeksside
Vi skal opdatere denne forfærdeligt skramlede side…
Indekset.html.erb-siden skal erstattes med følgende kode:
Styling for artiklens krop:
.article-body {
border-top: 1px solid #eaeaea;
padding-top: 15px;
padding-bottom: 15px;
}
Styling for artiklens titel:
.article-title {
font-weight: bold;
font-size: 1.5em;
}
Din side vil nu se således ud:
Lovely.
Stræk 23: Oprettelse af brugere + Opret en funktionsgren i Github
Næste gang skal vi oprette brugere! Fedt. Vores model for brugere vil blive kaldt “User”. Nedenfor er et nyttigt skema, der forklarer, hvordan brugertabellen vil blive formateret, og hvad de forskellige navngivningsstrukturer for filerne vil være:
Vi har allerede oprettet artikler. Vi kan oprette, læse, redigere og slette artikler.
Men lige nu kan alle, der har adgang til bloggen, læse, redigere og slette enhver anden artikel.
Vi ønsker kun at brugere, der har tilmeldt sig, skal kunne udføre disse funktioner, og vi ønsker kun at de skal kunne redigere og slette artikler, som de har oprettet.
Så vi har selvfølgelig brug for brugere, og vi har også brug for en måde at spore brugere, der opretter artikler. Dette kan gøres ved at have bruger-id’et for den bruger, der opretter artiklen, gemt i artikeltabellen i artikelrækken. Dette er en fremmednøgleforbindelse:
Gennem at tilføje kolonnen user_id til artikeltabellen får vi mulighed for at “v-lookup” til resten af brugeroplysningerne.
En artikel, som flere personer arbejder på, ville være en mange-til-mange-association…
En artikel, som én person arbejder på, hvor én person kan oprette mange artikler, er en one-to-many-association…
Artikelkategorier, hvis vi skulle oprette dem, ville være en many-to-many-association.
Okay, så er det nok, lad os oprette brugertabellen…