Następnie musimy utworzyć plik modelu pod blog/app/models…
article.rb
<<< MAY 2019 UPDATE FROM THE AUTHOR >>>
Zamiast używać wizualnego edytora tekstu, możesz również utworzyć plik przez terminal:
cd app/models
touch article.rb
<<< END UPDATE >>>
Teraz z powrotem w wizualnym edytorze tekstu i wewnątrz artykułu.rb model…
class Article < ActiveRecord::Baseend
Krok 7: Inside the Rails Console
Teraz możemy wskoczyć do konsoli rails i przetestować połączenie z tabelą…
$ rails c
Następnie wywołaj wszystkie artykuły…
$ Article.all
Powinieneś zobaczyć zapytanie SQL, które wygląda jak…
(Jeśli nawigowałeś wewnątrz wiersza poleceń przez katalog bloga, możesz otrzymać tutaj błąd. Upewnij się, że wrócisz do katalogu app lub twoje polecenie Article.all poniżej zwróci błąd.)
Wpisanie tylko 'Artykuł’ da ci wszystkie atrybuty tabeli…
Więcej komend…
article = Article.new
Tworzy nowy artykuł przechowywany wewnątrz zmiennej 'artykuł’ z atrybutami:
Teraz możemy dodać tytuł i opis ręcznie poprzez konsolę rails….
Teraz musimy zapisać te dane..
article.save
To polecenie wygeneruje zapytanie SQL, aby wstawić te nowe wartości do tabeli articles…
Możemy utworzyć kolejny artykuł za jednym razem używając „masowego przypisania”…
article = Article.new(title: "This is my second article", description: "This is my second description")
Ponownie musimy zapisać artykuł….
article.save
Walah…
Możemy to zrobić w trzeci sposób używając metody create…
Article.create(title: "This is my third title", description: "This is my third description")
I to automatycznie zapisze artykuł….
A teraz udawajmy, że chcemy edytować jeden z tych artykułów… Najpierw musimy złapać artykuł….
article = Article.find(2)
Potem możemy edytować artykuł i zapisać artykuł…
article.title = "This is an edited second article"
A następnie zapisać…
article.save
W ten sposób wygenerujemy niezbędne zapytanie SQL….
Teraz usuniemy artykuł… Najpierw złap artykuł….
article = Article.find(3)
Następnie usuń…
article.destroy
Walah…
Krok 8: Add Validations to Enforce Constraints on Articles
W artykule.rb model…
class Article < ActiveRecord::Base
validates :title, presence: trueend
To będzie wymagało, aby wszystkie nowe artykuły zawierały tytuł. Możemy to przetestować w konsoli rails (nie zapomnij zrestartować konsoli rails po aktualizacji modelu! Dzięki Mike Boyd i Andrew Linck za przypomnienie)…
article = Article.new
potem spróbuj zapisać bez aktualizacji tytułu…
article.save
boom…
Możemy zrobić to samo dla opisu…
class Article < ActiveRecord::Base
validates :title, presence: true
validates :description, presence: trueend
I zapobiegnie to tworzeniu artykułu bez opisu, nawet jeśli ma on tytuł… (ponownie, upewnij się, że uruchomisz ponownie konsolę rails po aktualizacji modelu.)
Możesz sprawdzić swoje błędy za pomocą tych komend…
article.errors.any?
article.errors.full_messages
Następnie dodamy walidacje długości…
Cool.
Następnie chcemy, aby użytkownicy mogli wykonywać te same czynności w przeglądarce, więc będziemy musieli skonfigurować trasy, kontrolery i widoki do tworzenia i zapisywania artykułów!
Krok 9: Add Ability to Create Articles From Browser
Cykl życia nowego artykułu…
Zapoznaj się z Kursem Udemy pierwsze 2 minuty Sekcji 4, Wykład 63 dla pełnego przeglądu…
Początkowo, zajmijmy się naszymi trasami…
W pliku routes.rb, dodaj tę linię …
resources :articles
To daje nam wszystkie rodzaje ścieżek do aktualizacji, usuwania, tworzenia, pokazywania, itd.
Sprawdź nowe ścieżki z… ALE CZEKAJ, zanim sprawdzisz ścieżki upewnij się, że jesteś z powrotem z konsoli rails poprzez wpisanie:
exit
then,
$ rake routes
Cool.
Teraz, potrzebujemy nowego kontrolera… Stwórz ten plik w app/controllers.
touch articles_controller.rb#or just create the file using the visual text editor
A następnie wewnątrz nowego pliku kontrolera…
class ArticlesController < ApplicationControllerend
Teraz musimy utworzyć nowy folder pod widokami, aby zapisać nasze pliki widoku artykułów… Folder powinien nazywać się 'articles’
<<< UPDATE FROM THE AUTHOR >>>
Spróbuj użyć wiersza poleceń zamiast wizualnego edytora tekstu:
cd views
mkdir articles
cd articles
<<< END UPDATE >>
Teraz stworzymy nowy plik pod 'articles’ o nazwie…
touch new.html.erb# or create using the visual text editor
A następnie musimy zaktualizować nasz articles_controller.rb:
class ArticlesController < ApplicationController
def new
end
end
Save.
Wewnątrz tej strony new.html.erb, będziemy przechowywać nasz formularz do przechwytywania tytułu i opisu.
Ale najpierw upewnijmy się, że strona działa… Dodaj:
<h1>Create an article</h1>
A następnie załaduj serwer…
Daje nam…
Świetnie. To działa.
Teraz stwórzmy formularz wspierany przez model. Rails dostarcza tutaj metod pomocniczych form-for.
W pliku new.html.erb…
<h1>Create an Article</h1><%= form_for @article do |f| %><% end %>
I zainicjowaliśmy zmienną instancji, więc teraz musimy stworzyć zmienną w naszym kontrolerze…
class ArticlesController < ApplicationControllerdef new
@article = Article.new
endend
Świetnie. Wszystko działa dobrze…
Teraz zbierzmy trochę danych…
<h1>Create an Article</h1><%= form_for @article do |f| %>
<p>
<%= f.label :title %>
<%= f.text_field :title %>
</p><% end %>
I załadujmy stronę, aby zobaczyć, co zrobiliśmy…
Świetnie. Działa…
Teraz dokończmy formularz…
Świetnie. Wszystko, czego potrzebujemy…
Teraz musimy stworzyć akcję 'create’ w kontrolerze…
class ArticlesController < ApplicationControllerdef new
@article = Article.new
enddef create
render plain: params.inspect
endend
Gdy użytkownik wypełni formularz, a następnie prześle go, zobaczy te dane:
Chcemy jednak, aby te dane zostały zapisane do bazy danych…
Ale to nie wszystko… Chcemy również wyświetlić artykuł….
Użyjemy ścieżki, którą już utworzyliśmy, i przekażemy zmienną instancji dla nowego artykułu…
redirect_to articles_show(@article)
Cały kod…
Ale to nie wystarczy, prawda? Chcemy przerobić ten kod tak, aby informował, czy artykuł został pomyślnie utworzony:
A teraz upewnimy się, że nasze komunikaty flash będą widoczne na wszystkich stronach…
W ciele pliku application.html.erb…
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
A teraz chcemy się upewnić, że błędy są również wyświetlane…
W pliku new.html.erb…
Wspaniale. Teraz pokaże nam błędy w adresie URL articles/new:
Teraz upewnij się, że akcja show została utworzona…
def show
@article = Article.find(params)
end
Teraz musimy utworzyć stronę, na której pokażemy te informacje….
Zadzwonimy do tego pliku…
show.html.erb
Wewnątrz tej strony…
<h1>Showing selected article</h1><p>
Title: <%= @article.title %>
</p><p>
Description: <%= @article.description %>
</p>
I to będzie renderować…
(Get an error? Oto rozwiązanie częstego błędu: tworzenie pliku show.html.erb w niewłaściwym miejscu)
Hurrah. Następnie zajmiemy się edycją artykułów…
Krok 10: Edycja artykułów
Musimy utworzyć akcję edycji w kontrolerze… Którym kontrolerze? Oczywiście w kontrolerze artykułów!
def edit
end
A my musimy utworzyć szablon edycji w widokach… W którym folderze? Oczywiście w folderze widoku artykułów!
edit.html.erb
Teraz musimy zbudować formularz do edycji…
Możemy właściwie kopiować/wklejać z formularza new.html.erb. Do aktualizacji bieżącego artykułu użyjemy tego samego formularza, którego użyliśmy do stworzenia nowego artykułu.
Teraz, zakończmy naszą akcję edycji w kontrolerze…
def edit
@article = Article.find(params)
end
Teraz, musimy dodać akcję aktualizacji…
Krok 11: Dodaj indeks artykułów i dodaj linki edycji/pokazywania
Dodaj akcję indeksu w articles_controller.rb…
def index
@articles = Article.all
end
Następnie musimy stworzyć szablon… W którym katalogu views umieścimy ten plik?
index.html.erb
A wewnątrz tego pliku…
To daje nam…
Cool. Teraz dodajmy linki edytuj i pokaż dla każdego artykułu…
<td><%= link_to 'Edit', edit_article_path(article) %></td>
<td><%= link_to 'Show', article_path(article) %></td>
Kod wygląda tak…
To daje nam…
Teraz dodajmy kilka linków 'Wstecz’ do edycji, pokazu i nowej strony… Przejdź do odpowiednich stron i dodaj nowe linki tak jak poniżej:
<%= link_to 'Back', articles_path %>
Ja dodałem swoje na samym dole każdego pliku.
I dodajmy link edycji na stronie pokazu…
<%= link_to "Edit", edit_article_path(@article) %>
Krok 12: Przekształcenie formularzy w pojedynczą część
Utwórz nowy plik bezpośrednio w widokach/artykułach.
_form.html.erb
Kopiuj/wklej dane z formularza do tego pliku…
Następnie wyrenderuj formularz na nowej i edytowanej stronie…
<%= render 'form' %>
Powinieneś wyskrobać wszystkie stare informacje o formularzu i dodać fragment kodu do nowej i edytowanej strony tak, aby każdy z nich wyglądał mniej więcej tak:
<h1>Edit Article</h1><%= render 'form' %><%= link_to 'Back', articles_path %>
Teraz dodamy akcję destroy…
Krok 13: Dodaj akcję destroy
W kontrolerze…
Który kontroler? Już wiesz.
Teraz musimy dodać linki do stron, z których chcemy mieć możliwość usuwania. Używając poniższego linku…
<%= link_to 'Delete', article_path(article), method: :delete, data: {confirm: "Are you sure?"} %>
…dodaj do stron, z których chcesz, aby użytkownik mógł usuwać…
Jeśli dodam do naszej strony index, będzie to wyglądało jak…
Jeśli dodamy do naszej strony show, będziemy musieli nieco zmodyfikować link destroy, aby naśladował strukturę linku edit. Czy widzisz, co mam na myśli?
To:
<%= link_to 'Delete', article_path(@article), method: :delete, data: {confirm: "Are you sure?"} %>
Zamiast tego:
<%= link_to 'Delete', article_path(article), method: :delete, data: {confirm: "Are you sure?"} %>
Krok 14: Refaktoryzacja artykułów Kontroler
Jedną z zasad rozwoju jest DRY.
Możesz już wiedzieć, co to znaczy: „DON’T REPEAT YOURSELF”
Powtarzamy się dość często, więc zróbmy mały refaktoring.
Ta linia kodu pojawia się we wszystkich naszych akcjach…
@article = Article.find(params)
Więc, stworzymy prywatną metodę i tam przechowamy tę linię…
def set_article
@article = Article.find(params)
end
Następnie, usuń linię kodu z akcji…
Jest ona zawarta w destroy, show, update, edit…
Tuż pod pierwszą linią kontrolera…
before_action :set_article, only:
Zaktualizowany plik kontrolera będzie wyglądał tak:
Krok 15: Install Bootstrap
Add gemfile from github page…
gem 'bootstrap-sass', '~> 3.4.1'
gem 'sassc-rails', '>= 2.1.0'
Then in the command line, making sure you are in the app directory and not in one of the sub-directories, install…
$ bundle install
Będziesz także potrzebował stworzyć nowy plik CSS… Nazwa pliku może wyglądać tak jak poniżej i stworzysz go w app/assets/stylesheets
custom.css.scss
I dodaj…
Potem, w aplikacji.js w pliku app/assets/javascripts…
//= require jquery
//= require bootstrap-sprockets
A jeśli używasz Rails 5, zainstaluj klejnot jQuery…
gem 'jquery-rails'
Nie jesteś pewien, jakiej wersji używasz? Wykonaj następujące polecenie w terminalu:
$ rails -v
Teraz już wiesz. Jeśli potrzebujesz zainstalować jquery, dodaj powyższy klejnot do pliku gemfile i zainstaluj bundle.
$ bundle install
Krok 16: Zainstaluj pasek nawigacyjny
Utwórz częściowy w folderze layouts…
_navigation.html.erb
Teraz, przejdź do strony głównej bootstrapa…
Zgarnij domyślny kod paska nawigacyjnego… Jest to pierwszy przykład i wygląda mniej więcej tak:
I wklej do swojego _navigation partial… Zapisz.
Teraz wyrenderuj tę część wewnątrz <head> </head> pliku application.html.erb…
<%= render 'layouts/navigation' %>
Cały plik wygląda teraz tak:
Restartuj serwer (na macu: control + c), ponieważ dodałeś ostatnio kilka nowych klejnotów, a następnie uruchom go ponownie:
$ rails s
A kiedy odświeżysz swój lokalny serwer, zobaczysz:
Niiiiiiiiiiice…. Wygląda dobrze, nie?
A teraz zacznijmy stylizację! A raczej szybko pozbądźmy się stylizacji, abyśmy mogli skupić się na budowaniu aplikacji, a nie na jej stylizowaniu 🙂
W pliku custom.css.scss skopiuj/wklej, a następnie zapisz:
Krok 17: Dodaj linki do paska nawigacyjnego
Teraz zajmijmy się paskiem nawigacyjnym i upewnijmy się, że linki do paska nawigacyjnego wskazują na miejsca, na które chcemy, aby wskazywały!
To…
<a class="navbar-brand" href="#">Alpha Blog</a>
stanie się tak:
<%= link_to "Alpha Blog", root_path, class: "navbar-brand", id: "logo" %>
Odśwież swoją stronę i zobacz:
A teraz na dowolnej stronie możesz przejść do root_path (strony indeksu) klikając na ALPHA BLOG.
Następnie dodajmy link do strony z indeksem artykułów:
Zamiast pierwszego „linku” w pasku nawigacji:
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
Dodaj:
<li><%= link_to "Articles", articles_path %></li>
I zamiast drugiego „linku” w pasku nawigacji:
<li><a href="#">Link</a></li>
Dodaj:
<li><%= link_to "Create Article", new_article_path %></li>
Teraz możemy usunąć inny link do „Utwórz artykuł” w pliku index.html.erb. Wystarczy go namierzyć i usunąć.
Usuwam również pasek wyszukiwania. Nie będziemy go używać.
Wyrzuć wszystko poniżej:
Pierwsze rozwijane menu również nie jest nam potrzebne, więc je usuń. Po prostu znajdź to i usuń:
Zapisz plik. Odśwież swój serwer localhost i zobaczysz:
Krok 18: Styl szablonu formularza
Kod na bootstrap możesz znaleźć tutaj.
Mamy zamiar zmieszać wbudowany rubin z bootstrapem, aby uzyskać pożądany rezultat.
Wewnątrz _form.html.erb partial, Change this…
Into this…
Zauważ ważną zmianę, którą wprowadziliśmy na początku instrukcji do formularza…
<%= form_for(@article, :html => {class: "form-horizontal", role: "form"}) do |f| %>
I zauważ składnię wewnątrz elementów formularza…
<%= f.text_field :title, class: "form-control", placeholder: "Title of article", autofocus: true %>
Krok 19: Style the Messages & Refactor into Partials
Teraz zaktualizujmy również stylizację dla komunikatów o błędach. Zaktualizuj stylizację z…
do:
To zmienia komunikaty o błędach na:
Teraz rozpakujemy do częściowego..
Utwórz nowy folder pod widokami o nazwie 'shared’…
Utwórz nowy plik o nazwie _errors.html.erb…
Kopiuj/wklej komunikat o błędzie do tego pliku… Zapisz.
Teraz usuń komunikat o błędzie z _form.html.erb, i zastąp kod następującym kodem:
<%= render 'shared/errors' %>
Utwórzmy także plik _messages.html.erb i przechowujmy go w folderze współdzielonym. Wewnątrz tego pliku, dodaj kod wiadomości flash:
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
Zapisz ten plik. Upewnij się, że kod w pliku layouts/application.html.erb został zastąpiony przez:
<%= render 'shared/errors' %>
Cały plik wygląda obecnie tak:
Następnie zajmiemy się stylizacją wiadomości flash…
W pliku _messages.html.erb, zmień to…
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
na to:
Będziemy musieli również zmienić wszystkie elementy flash w pliku articles_controller.rb na flash, aby zakończyć ten krok.
Krok 20: Update Article Instance Variables To Work For Users
To jest trochę przedwczesne, ponieważ nie stworzyliśmy jeszcze użytkowników ani akcji użytkownika na naszym blogu, ale stworzymy użytkowników i będziemy chcieli, aby nasze komunikaty o błędach działały dla użytkowników tak samo jak dla artykułów. Wiesz o co mi chodzi?
Mamy wszystkie te funkcje, które działają dla artykułów: tworzenie nowych artykułów, edytowanie starych artykułów i komunikaty błędów flash, które pozwalają nam wiedzieć, co poszło nie tak… Chcemy, aby te komunikaty błędów flash komunikowały się z nami, gdy próbujemy stworzyć nowego użytkownika lub edytować bieżącego użytkownika.
Osiągniemy to poprzez aktualizację zmiennej instancji @article do takiej, która będzie działać dla artykułów lub użytkowników…
W pliku shared/_errors.html.erb, zaktualizuj zmienną instancji @article do zmiennej instancji @obj…
Teraz musimy zaktualizować oświadczenie o częściowym renderowaniu… To w articles/_form.html.erb
Było…
<%= render 'shared/errors' %>
a teraz musi brzmieć…
<%= render 'shared/errors', obj: @article %>
Następnie, popracujemy nad widokiem „show”…
Krok 21: Stylizacja strony artykułu Show
Zaktualizuj stronę views/articles/show.html.erb do…
To będzie renderować:
Następnie dodamy trochę 'simple_format’…
Zmień to…
<%= @article.description %>
Na this…
<%= simple_format(@article.description) %>
Następnie, trochę więcej stylu dla przycisków…
<%= link_to "Edit", edit_article_path(@article), class: "btn btn-xs btn-primary" %> |
<%= link_to 'Back', articles_path, class: "btn btn-xs btn-success" %>
Damy nam kilka pięknych, małych przycisków…
Następnie dodajemy przycisk kasowania…
Piękny kolorowy przycisk kasowania….
Cały blok kodu wygląda teraz tak:
Krok 22: Style Article Listing Index Page
Zaktualizujemy tę okropnie jankesko wyglądającą stronę…
Strona index.html.erb powinien zostać zastąpiony następującym kodem:
Styling dla ciała artykułu:
.article-body {
border-top: 1px solid #eaeaea;
padding-top: 15px;
padding-bottom: 15px;
}
Styling dla tytułu artykułu:
.article-title {
font-weight: bold;
font-size: 1.5em;
}
Twoja strona będzie teraz wyglądać tak:
Pięknie.
Krok 23: Tworzenie użytkowników + Utwórz gałąź funkcji w Githubie
Następnie, będziemy tworzyć użytkowników! Fajnie. Nasz model dla użytkowników będzie się nazywał „User”. Poniżej znajduje się pomocny wykres, który wyjaśnia jak będzie sformatowana tabela użytkowników i jakie będą różne struktury nazewnictwa plików:
Zbudowaliśmy już artykuły. Możemy tworzyć, czytać, edytować i usuwać artykuły.
Ale teraz każdy, kto ma dostęp do bloga, może czytać, edytować i usuwać każdy inny artykuł.
Chcemy, aby tylko użytkownicy, którzy się zarejestrowali, mogli wykonywać te funkcje, i chcemy, aby tylko oni mogli edytować i usuwać artykuły, które stworzyli.
Potrzebujemy więc oczywiście użytkowników, a także sposobu śledzenia użytkowników, którzy tworzą artykuły. Można to zrobić poprzez posiadanie identyfikatora użytkownika tworzącego artykuł przechowywanego w tabeli article w wierszu article. Jest to powiązanie z kluczem obcym:
Dodanie kolumny user_id do tabeli articles da nam możliwość „v-lookup” do reszty informacji o użytkowniku.
Jeden artykuł, nad którym pracuje wiele osób, byłby asocjacją typu many-to-many…
Jeden artykuł, nad którym pracuje jedna osoba, gdzie jedna osoba może stworzyć wiele artykułów, jest asocjacją typu jeden do wielu…
Kategorie artykułów, jeśli je stworzymy, będą asocjacją typu wiele do wielu.
Ok, dość czepialstwa, stwórzmy tabelę użytkownika…
.