Nästan måste vi skapa en modellfil under blog/app/models…
article.rb
<<<< MAY 2019 UPPDATERING FRÅN FÖRFATTAREN >>>>
Istället för att använda den visuella textredigeraren kan du också skapa filen via terminalen:
cd app/models
touch article.rb
<<<< END UPDATE >>>>
Nu är du tillbaka i den visuella textredigeraren och inne i artikeln.rb model…
class Article < ActiveRecord::Baseend
Steg 7: Nu kan vi hoppa in i Rails Console
Nu kan vi hoppa in i Rails Console och testa anslutningen till tabellen…
$ rails c
Kalla sedan alla artiklar…
$ Article.all
Du bör se en SQL-fråga som ser ut som…
(Om du har navigerat inne på kommandoraden genom bloggkatalogen kan du få ett fel här. Se till att du kommer tillbaka till app-katalogen, annars kommer ditt Article.all-kommando nedan att ge ett fel.)
Tar du bara in ”Article” får du alla tabellens attribut…
Fler kommandon…
article = Article.new
Skapar en ny artikel som lagras i variabeln ”article” med attributen:
Nu kan vi lägga till en titel och beskrivning manuellt via rails-konsolen…
Nu måste vi spara dessa data..
article.save
Detta kommando kommer att generera en SQL-fråga för att infoga dessa nya värden i tabellen articles…
Vi kan skapa ytterligare en artikel på en gång genom att använda ”mass assignment”…
article = Article.new(title: "This is my second article", description: "This is my second description")
Nu måste vi spara artikeln…
article.save
Walah…
Vi kan göra det här på ett tredje sätt genom att använda metoden ”create”…
Article.create(title: "This is my third title", description: "This is my third description")
Och den sparar automatiskt artikeln…
Nu kan vi låtsas att vi vill redigera en av dessa artiklar… Först måste vi hämta artikeln…
article = Article.find(2)
Därefter kan vi redigera artikeln och spara artikeln…
article.title = "This is an edited second article"
Och sedan spara…
article.save
Vi kommer att generera den nödvändiga SQL-frågan…
Nu ska vi ta bort en artikel… Ta först tag i artikeln…
article = Article.find(3)
Därefter radera…
article.destroy
Walah…
Steg 8: Lägg till valideringar för att tvinga fram begränsningar för artiklar
I artikeln.rb-modellen…
class Article < ActiveRecord::Base
validates :title, presence: trueend
Detta kräver att alla nya artiklar innehåller en titel. Vi kan testa detta i rails-konsolen (glöm inte att starta om rails-konsolen efter att du har uppdaterat modellen! Tack Mike Boyd och Andrew Linck för påminnelserna)…
article = Article.new
försök sedan att spara utan att uppdatera titeln…
article.save
boom…
Vi kan göra samma sak för description…
class Article < ActiveRecord::Base
validates :title, presence: true
validates :description, presence: trueend
Och det kommer att förhindra att du skapar en artikel utan beskrivning även om den har en titel… (återigen, se till att du startar om rails-konsolen efter att du har uppdaterat modellen.)
Du kan kontrollera dina fel med dessa kommandon…
article.errors.any?
article.errors.full_messages
Nästan lägger vi till valideringar av längden…
Cool.
Nästan vill vi att användarna ska kunna utföra samma åtgärder i webbläsaren, så vi måste konfigurera rutter, kontrollanter och vyer för att skapa och spara artiklar!
Steg 9: Lägg till möjligheten att skapa artiklar från webbläsaren
Livscykeln för en ny artikel…
Se Udemy-kursen de första 2 minuterna av avsnitt 4, föreläsning 63 för en fullständig översikt…
Först ska vi ta itu med våra rutter…
I rutterna.rb-filen lägger du till den här raden …
resources :articles
Detta ger oss alla möjliga sökvägar för att uppdatera, ta bort, skapa, visa osv.
Kontrollera nya sökvägar med… MEN VÄNTA, innan du kontrollerar sökvägar se till att du är tillbaka från rails-konsolen genom att skriva:
exit
then,
$ rake routes
Cool.
Nu behöver vi en ny controller… Skapa den här filen under app/controllers.
touch articles_controller.rb#or just create the file using the visual text editor
Och sedan inuti den nya kontrollantfilen…
class ArticlesController < ApplicationControllerend
Nu behöver vi skapa en ny mapp under views för att spara våra articles view-filer… Mappen ska heta ’articles’
<<<< UPPDATERING FRÅN FÖRFATTAREN >>>>
Prova att använda kommandoraden istället för den visuella texteditorn:
cd views
mkdir articles
cd articles
<<<< END UPDATE >>>
Nu ska vi skapa en ny fil under ”articles” som heter…
touch new.html.erb# or create using the visual text editor
Och sedan måste vi uppdatera vår articles_controller.rb:
class ArticlesController < ApplicationController
def new
end
end
Save.
Inom denna new.html.erb-sida ska vi lagra vårt formulär för att fånga titel och beskrivning.
Men först ska vi se till att sidan fungerar… Lägg till:
<h1>Create an article</h1>
Och sedan ladda servern…
Det ger oss…
Skönt. Det fungerar.
Nu ska vi skapa det modellstödda formuläret. Rails tillhandahåller hjälpmetoder för formulär här.
I filen new.html.erb…
<h1>Create an Article</h1><%= form_for @article do |f| %><% end %>
Och vi initierade en instansvariabel, så nu måste vi skapa variabeln i vår controller…
class ArticlesController < ApplicationControllerdef new
@article = Article.new
endend
Snyggt. Allt fungerar bra…
Nu ska vi samla in lite data…
<h1>Create an Article</h1><%= form_for @article do |f| %>
<p>
<%= f.label :title %>
<%= f.text_field :title %>
</p><% end %>
Och ladda sidan för att se vad vi har gjort…
Skönt. Det fungerar…
Nu ska vi avsluta formuläret…
Skönt. Allt vi behöver…
Nu måste vi skapa en ”create”-åtgärd i controllern…
class ArticlesController < ApplicationControllerdef new
@article = Article.new
enddef create
render plain: params.inspect
endend
När du fyller i formuläret och sedan skickar, kommer du att se dessa data:
Men vi vill att dessa data ska sparas i databasen…
Men det räcker inte… Vi vill också visa artikeln…
Vi använder en sökväg som vi redan har skapat och skickar in instansvariabeln för den nya artikeln…
redirect_to articles_show(@article)
Alla koden…
Men det räcker väl inte? Vi vill göra om den här koden så att den ger ett meddelande om artikeln har skapats framgångsrikt:
Och nu ska vi se till att våra flashmeddelanden kan ses på alla sidor…
I kroppen av filen application.html.erb…
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
Och nu vill vi se till att även felmeddelanden visas…
I filen new.html.erb…
Snyggt. Nu kommer den att visa oss felen i URL:en articles/new:
Säkerställ nu att show action har skapats…
def show
@article = Article.find(params)
end
Nu måste vi skapa en sida för att visa informationen på…
Vi kommer att kalla den filen…
show.html.erb
Inför den sidan…
<h1>Showing selected article</h1><p>
Title: <%= @article.title %>
</p><p>
Description: <%= @article.description %>
</p>
Och den kommer att rendera…
(Får du ett fel? Här är lösningen på ett vanligt fel: att skapa filen show.html.erb på fel ställe)
Hurrah. Nästa gång ska vi arbeta med att redigera artiklar…
Steg 10: Redigera artiklar
Vi måste skapa redigeringsåtgärden i kontrollern… Vilken kontrollör? Artikelkontrollern förstås!
def edit
end
Och vi måste skapa redigeringsmallen i vyerna… I vilken mapp? Vyns mapp artiklar förstås!
edit.html.erb
Nu måste vi skapa ett formulär för redigering…
Vi kan faktiskt kopiera/klistra in från formuläret new.html.erb. Vi kommer att använda samma formulär för att uppdatera en aktuell artikel som vi använde för att skapa en ny artikel.
Nu kan vi slutföra vår redigeringsåtgärd i kontrollern…
def edit
@article = Article.find(params)
end
Nu måste vi lägga till en uppdateringsåtgärd…
Steg 11: Lägg till en indexlista över artiklar och lägg till länkar för att redigera och visa
Lägg till en indexåtgärd i articles_controller.rb…
def index
@articles = Article.all
end
Därefter måste vi skapa mallen… I vilken katalog för vyer ska vi placera den här filen?
index.html.erb
Och inuti den filen…
Detta ger oss…
Snyggt. Nu lägger vi till länkarna redigera och visa för varje artikel…
<td><%= link_to 'Edit', edit_article_path(article) %></td>
<td><%= link_to 'Show', article_path(article) %></td>
Koden ser ut som…
Det ger oss…
Nu ska vi lägga till några ”Tillbaka”-länkar till redigeringen, visningen och den nya sidan… Hoppa in på respektive sida och lägg till de nya länkarna så här:
<%= link_to 'Back', articles_path %>
Jag lade till mina längst ner i varje fil.
Och låt oss lägga till en redigeringslänk på show-sidan…
<%= link_to "Edit", edit_article_path(@article) %>
Steg 12: Refactor Forms into a Single Partial
Skapa en ny fil i views/articles direkt.
_form.html.erb
Kopiera/klistra in formulärdata i den här filen…
Rendera sedan formuläret i den nya och redigerade sidan…
<%= render 'form' %>
Du bör ha skrotat ut all gammal formulärinformation och lagt till kodutdraget om till den nya och redigerade sidan så att varje ser ut ungefär så här:
<h1>Edit Article</h1><%= render 'form' %><%= link_to 'Back', articles_path %>
Nu ska vi lägga till destruktionsåtgärden…
Steg 13: Lägg till destruktionsåtgärden
I kontrollern…
Vilken kontrollör? Det vet du redan.
Nu måste vi lägga till länkarna till de sidor från vilka vi vill kunna radera. Använd länken nedan…
<%= link_to 'Delete', article_path(article), method: :delete, data: {confirm: "Are you sure?"} %>
…lägg till på de sidor där du vill att användaren ska kunna radera.
Om jag lägger till på vår indexsida kommer det att se ut som…
Om vi lägger till på vår show-sida måste vi ändra destroy-länken en aning så att den efterliknar redigeringslänkens struktur. Förstår du vad jag menar?
Detta:
<%= link_to 'Delete', article_path(@article), method: :delete, data: {confirm: "Are you sure?"} %>
Istället för detta:
<%= link_to 'Delete', article_path(article), method: :delete, data: {confirm: "Are you sure?"} %>
Steg 14: Refactor Articles Controller
En av utvecklingsprinciperna är DRY.
Du kanske redan vet vad det innebär: ”DON’T REPEAT YOURSELF”
Vi upprepar oss själva ganska mycket, så låt oss göra lite refaktorisering.
Denna kodrad visas i alla våra åtgärder…
@article = Article.find(params)
Så, vi kommer att skapa en privat metod och lagra denna rad där…
def set_article
@article = Article.find(params)
end
Därefter raderar vi kodraden från åtgärderna…
Den ingår i destroy, show, update, edit…
Helt nedanför den första raden i controllern…
before_action :set_article, only:
Den uppdaterade controllerfilen kommer att se ut så här:
Steg 15: Installera Bootstrap
Lägg till gemfilen från github-sidan…
gem 'bootstrap-sass', '~> 3.4.1'
gem 'sassc-rails', '>= 2.1.0'
Installera sedan på kommandoraden i app-katalogen och se till att du är i app-katalogen och inte i en av underkatalogerna…
$ bundle install
Du måste också skapa en ny CSS-fil… Filnamnet kan se ut så här nedan och du skapar den under app/assets/stylesheets
custom.css.scss
Och lägg till…
Därefter, i programmet.js-filen under app/assets/javascripts…
//= require jquery
//= require bootstrap-sprockets
Och, om du använder Rails 5, installera jQuery-gemmen…
gem 'jquery-rails'
Inte säker på vilken version du använder? Kör följande i terminalen:
$ rails -v
Nu vet du. Om du behöver installera jquery lägger du till gemen ovan i gemfilen och gör en buntinstallation.
$ bundle install
Steg 16: Installera navigeringsfältet
Skapa partial under mappen layouts…
_navigation.html.erb
Nu går du till bootstraps hemsida…
Hämta standardkoden för navigeringsfältet… Det är det första exemplet och ser ungefär så här ut:
Och klistra in i din _navigation partial… Spara.
Rendera nu den partiella delen inuti <head> </head> i application.html.erb-filen…
<%= render 'layouts/navigation' %>
Hela filen ser nu ut ungefär så här:
Starta om servern (på en mac: control + c) eftersom du nyligen har lagt till några nya gems, och starta sedan upp den igen:
$ rails s
Och när du sedan uppdaterar din lokala server kommer du att se:
Niiiiiiiiice…. Ser bra ut, eller hur?
Nu kan vi börja styla! Eller snarare, låt oss få bort stylingen väldigt snabbt så att vi kan fokusera på att bygga appen snarare än att styla appen 🙂
I filen custom.css.scss kopiera/klistra in och spara sedan:
Steg 17: Lägg till länkar i navigeringsfältet
Nu tar vi oss an navigeringsfältet och ser till att länkarna i navigeringsfältet pekar till de ställen som vi vill att de ska peka på!
Detta…
<a class="navbar-brand" href="#">Alpha Blog</a>
blir detta:
<%= link_to "Alpha Blog", root_path, class: "navbar-brand", id: "logo" %>
Förnya sidan och se:
Och nu kan du på vilken sida som helst navigera till root_path (indexsidan) genom att klicka på ALPHA BLOG.
Nästan, låt oss lägga till en länk till sidan Artikelindex:
Istället för den första ”länken” i Navbar:
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
Lägg till:
<li><%= link_to "Articles", articles_path %></li>
Och istället för den andra ”länken” i Navbar:
<li><a href="#">Link</a></li>
Lägg till:
<li><%= link_to "Create Article", new_article_path %></li>
Nu kan vi ta bort den andra länken till ”Skapa artikel” i index.html.erb-filen. Det är bara att spåra upp den och ta bort den.
Jag ska också ta bort sökfältet. Vi kommer inte att använda den.
Ripa ut allt nedan:
Vi behöver inte heller den första rullgardinsmenyn, så den försvinner. Hitta bara den här och ta bort den:
Spara filen. Uppdatera din localhost-server och du kommer att se:
Steg 18: Styla blankettmallen
Du hittar koden på bootstrap här.
Vi ska blanda inbäddad ruby med bootstrap för att få det resultat vi vill ha.
Inuti _form.html.erb partial, Change this…
Into this…
Notera en viktig ändring som vi gjorde i början av formuläret do statement…
<%= form_for(@article, :html => {class: "form-horizontal", role: "form"}) do |f| %>
Och notera syntaxen inne i formulärelementen…
<%= f.text_field :title, class: "form-control", placeholder: "Title of article", autofocus: true %>
Steg 19: Styling av meddelandena & Refactor into Partials
Nu uppdaterar vi också stilen för felmeddelanden. Uppdatera stilen från…
till:
Det ändrar felmeddelandena till:
Nu kommer vi att extrahera till en partiell..
Skapa en ny mapp under vyerna som heter ”shared”…
Skapa en ny fil som heter _errors.html.erb…
Kopiera/klistra in felmeddelandet i den filen… Spara.
Ta nu bort felmeddelandet från _form.html.erb och ersätt koden med:
<%= render 'shared/errors' %>
Låt oss också skapa en _messages.html.erb-fil och lagra den under mappen shared. I den filen lägger du till koden för flashmeddelanden:
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
Spara filen. Se till att ersätta koden i filen layouts/application.html.erb med:
<%= render 'shared/errors' %>
Hela filen ser för närvarande ut så här:
Nästan ska vi styla flashmeddelandena…
I filen _messages.html.erb ändrar vi detta…
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
till detta:
Vi måste också ändra all flash i filen articles_controller.rb till flash för att slutföra detta steg.
Steg 20: Detta är lite för tidigt eftersom vi inte ens har skapat användare eller användaråtgärder ännu för vår blogg, men vi kommer att skapa användare och vi vill att våra felmeddelanden ska fungera för användare precis som de fungerar för artiklar. Förstår du vad jag menar?
Vi har alla dessa funktioner som fungerar för artiklar: skapande av nya artiklar, redigering av gamla artiklar och flash-felmeddelanden som låter oss veta vad som gick fel… Vi vill att dessa flash-felmeddelanden ska kommunicera till oss när vi försöker skapa en ny användare eller redigera en nuvarande användare.
Vi åstadkommer detta genom att uppdatera instansvariabeln @article till en variabel som kommer att fungera för artiklar eller användare…
I shared/_errors.html.erb-filen uppdaterar du instansvariabeln @article till en instansvariabel @obj…
Nu måste vi uppdatera den partiella renderingsförklaringen… Den i articles/_form.html.erb
Det var…
<%= render 'shared/errors' %>
och nu måste det stå…
<%= render 'shared/errors', obj: @article %>
Nästan ska vi arbeta med vyn ”show”…
Steg 21: Styla sidan Visa artikel
Uppdatera views/articles/show.html.erb-sidan till…
Detta kommer att återges:
Nästan ska vi lägga till lite ”simple_format”…
Ändra detta…
<%= @article.description %>
till detta…
<%= simple_format(@article.description) %>
Därefter lite mer stil för knapparna…
<%= link_to "Edit", edit_article_path(@article), class: "btn btn-xs btn-primary" %> |
<%= link_to 'Back', articles_path, class: "btn btn-xs btn-success" %>
Det kommer att ge oss några vackra små knappar…
Sedan kan vi lägga till en delete-knapp…
En fin färgglad delete-knapp…
Hela kodblocket ser ut så här nu:
Steg 22: Stil för indexsidan för artikelförteckningar
Vi ska uppdatera den här hemskt skräpiga sidan…
Indexet.html.erb-sidan bör ersättas med följande kod:
Styling för artikelkroppen:
.article-body {
border-top: 1px solid #eaeaea;
padding-top: 15px;
padding-bottom: 15px;
}
Styling för artikelrubriken:
.article-title {
font-weight: bold;
font-size: 1.5em;
}
Din sida kommer nu att se ut så här:
Skönt.
Steg 23: Skapa användare + skapa en funktionsgren i Github
Nästan ska vi skapa användare! Coolt. Vår modell för användare kommer att kallas ”User”. Nedan finns ett användbart diagram som förklarar hur användartabellen kommer att formateras och vad de olika namnstrukturerna för filerna kommer att vara:
Vi har redan byggt artiklar. Vi kan skapa, läsa, redigera och radera artiklar.
Men just nu kan vem som helst som har tillgång till bloggen läsa, redigera och radera vilken annan artikel som helst.
Vi vill bara att användare som har anmält sig ska kunna göra dessa funktioner, och vi vill bara att de ska kunna redigera och radera artiklar som de själva har skapat.
Så vi behöver förstås användare, och vi behöver också ett sätt att spåra användare som skapar artiklar. Detta kan göras genom att användar-id för den användare som skapar artikeln lagras i artikeltabellen i artikelraden. Detta är en främmande nyckelassociation:
Om vi lägger till kolumnen user_id i artikeltabellen får vi möjlighet att ”v-lookup” till resten av användarinformationen.
En artikel som flera personer arbetar med skulle vara en många-till-många-association…
En artikel som en person arbetar med, där en person kan skapa många artiklar, är en en-till-många-association…
Artikelkategorier, om vi skulle skapa dem, skulle vara en många-till-många-association.
Okej, nu räcker det, låt oss skapa användartabellen…