RubyオンRailsでブログを作る方法

次にblog/app/models以下にモデルファイルを作成します。

article.rb

<< MAY 2019 UPDATE FROM THE AUTHOR >>

なお、ビジュアルテキストエディタを使用せずターミナルからファイルを作成してもよいでしょう。

cd app/models
touch article.rb

<< END UPDATE >>

さて、ビジュアルテキストエディターに戻り、記事の中に入ってみましょう。rb モデル…

class Article < ActiveRecord::Baseend

Step 7: Railsコンソール内

さて、railsコンソール内に飛び込んで、テーブルへの接続をテストしてみましょう…

$ rails c

次にすべての記事を呼び出します…

$ Article.all

すると、以下のようなSQLクエリが見えるはずです…。

(blog ディレクトリからコマンドライン内に移動していた場合、ここでエラーになることがあります) app ディレクトリに戻るか、以下の Article.all コマンドがエラーを返すことを確認してください。)

‘Article’とだけ入力すると、すべてのテーブル属性が得られます…

その他のコマンド…

article = Article.new

変数 ‘article’ に属性を格納して新しい記事を作成する。

createメソッドを使えば第三の方法として…

Article.create(title: "This is my third title", description: "This is my third description")

そして自動的に記事を保存する…と言うわけです。

さて、これらの記事の一つを編集したいとしましょう。まず、記事を取得しなければなりません…

article = Article.find(2)

そして記事を編集して保存します…

article.title = "This is an edited second article"

そして保存…

article.save

必要な SQL クエリを生成します…このクエリは

さて、記事を削除します。まず記事を取得します…。

article = Article.find(3)

Then delete…

article.destroy

Walah…

Step 8: 記事に対する制約を強制するバリデーションを追加する

記事の中で。rb モデル…

class Article < ActiveRecord::Base
validates :title, presence: trueend

これは、すべての新しい記事がタイトルを含むことを要求します。これはrails consoleでテストできます(モデルを更新したらrails consoleを再起動するのを忘れないでください!)。 Mike Boyd と Andrew Linck に感謝します)…

article = Article.new

次に、タイトルを更新せずに保存しようとすると…

article.save

ドカン…

説明についても同じことを行うことができます…

class Article < ActiveRecord::Base
validates :title, presence: true
validates :description, presence: trueend

そして、タイトルがあっても説明文がない記事を作れないようにします…（繰り返しますが、モデルを更新した後は必ずrails consoleを再起動してください）。)

これらのコマンドでエラーを確認できます…

article.errors.any?
article.errors.full_messages

次はlength validations…

かっこいいです。

次に、ユーザーがブラウザでこれらの同じアクションを実行できるようにしたいので、記事を作成および保存するためのルート、コントローラー、およびビューをセットアップする必要があります!

Step 9: ブラウザーから記事を作成する機能を追加する

新しい記事のライフサイクルは…

Udemy Course Section 4, Lecture 63の最初の2分間で概要を復習…

最初に、ルーティングに取り組みましょう…

routes.で、ルーティングを作成しましょう…rb ファイルに、次の行を追加します。…

resources :articles

これにより、更新、削除、作成、表示など、あらゆる種類のパスが提供されます。

Check new paths with… BUT WAIT, before you check paths make back out of the rails console by enter:

exit

then,

$ rake routes

Cool.

Now, we need a new controller… app/controllers 以下にこのファイルを作成する。

touch articles_controller.rb#or just create the file using the visual text editor

そして、新しいコントローラファイルの中に…

class ArticlesController < ApplicationControllerend

さて、記事のビューファイルを保存するために views の下に新しいフォルダを作る必要があります… フォルダ名は ‘articles’

<<Update From THE AUTHOR >>

ビジュアルテキストエディタの代わりにコマンドラインを使ってみてください。

cd views
mkdir articles
cd articles

<< END UPDATE >>

さて、「articles」の下に新しいファイル「…」を作成します。

touch new.html.erb# or create using the visual text editor

そして、articles_controllerを更新しなければなりません。rb:

class ArticlesController < ApplicationController
def new
end
end

Save.

この new.html.erb ページ内に、タイトルと説明を取得するフォームを格納するつもりです。

その前に、ページが動作していることを確認しましょう。追加:

<h1>Create an article</h1>

そして、サーバーをロードします…

私たちに与える…

素晴らしいです。動作します。

では、モデルバックアップフォームを作成しましょう。 Railsはここでフォーム用のヘルパーメソッドを提供しています。

new.html.erb ファイルで…

<h1>Create an Article</h1><%= form_for @article do |f| %><% end %>

そしてインスタンス変数を開始したので、今度はコントローラで変数を作成する必要があります…

class ArticlesController < ApplicationControllerdef new
@article = Article.new
endend

素晴らしいです。すべてがうまくいっています…

さて、データを収集してみましょう…

<h1>Create an Article</h1><%= form_for @article do |f| %>
<p>
<%= f.label :title %>
<%= f.text_field :title %>
</p><% end %>

そして、ページをロードして、何をしたかを確認します…

すばらしいです。うまくいった…

さて、フォームを完成させよう…

すごいなー。必要なものはすべて揃いました…

さて、コントローラで「作成」アクションを作成する必要があります…

class ArticlesController < ApplicationControllerdef new
@article = Article.new
enddef create
render plain: params.inspect
endend

フォームに入力してから送信すると、このデータが表示されることになります。

しかし、このデータをデータベースに保存したい…

しかしこれだけでは不十分で、記事も表示したいのです…

すでに作成したパスを使用し、新しい記事のインスタンス変数を渡します…

redirect_to articles_show(@article)

すべてのコード…

でもこれでは不十分でしょう？このコードをリファクタリングして、記事が正常に作成された場合に通知を与えるようにします。

そして、フラッシュメッセージがすべてのページで見られるようにします。これで、articles/newのURLでエラーが表示されるようになりました。

Show アクションが作成されていることを確認します.

def show
@article = Article.find(params)
end

次に、情報を表示するページを作成します…

そのファイルを呼び出します…

show.html.erb

そのページの中で…

<h1>Showing selected article</h1><p>
Title: <%= @article.title %>
</p><p>
Description: <%= @article.description %>
</p>

そしてそれはレンダリングします…

（エラーが発生しますか? よくあるエラーの解決策はこちら: show.html.erb ファイルを間違った場所に作成すること)

Hurrah. 次は、記事の編集に取り組みます…

Step 10: Editing Articles

コントローラで編集アクションを作成する必要があります。もちろんarticlesコントローラです！

def edit
end

そして、ビューに編集テンプレートを作成する必要があります…どのフォルダの下でしょうか？もちろんarticlesビューフォルダです！

edit.html.erb

さて、編集用のフォームを作る必要があります…

実際にnew.html.erbフォームからコピー/ペーストすることが可能です。

さて、コントローラで編集アクションを完成させましょう…

def edit
@article = Article.find(params)
end

次に、更新アクションを追加する必要があります…

ステップ 11: 記事のインデックス一覧を追加し、編集/表示リンクを追加する

articles_controller.Add index action in the new article_controller.

def index
@articles = Article.all
end

次に、テンプレートを作成する必要があります…このファイルをどのビューディレクトリに配置しますか？

index.html.erb

そしてそのファイルの中に…

これで…

クールです。では、各記事の編集と表示リンクを追加してみましょう…

<td><%= link_to 'Edit', edit_article_path(article) %></td>
<td><%= link_to 'Show', article_path(article) %></td>

コードは次のようになります…

これで…です。

さて、編集、表示、新規ページに「戻る」リンクをいくつか追加しましょう… 先に進んでそれぞれのページに飛び、次のように新しいリンクを追加してください。

<%= link_to 'Back', articles_path %>

私の場合は、各ファイルの一番下に追加しました。

そして、show ページに編集リンクを追加します。

<%= link_to "Edit", edit_article_path(@article) %>

Step 12: フォームを単一のパーシャルにリファクタリング

views/articles に直接新しいファイルを作成します。

_form.html.erb

このファイルにフォームデータをコピー/貼り付けます…

次に、新規ページと編集ページにフォームを表示します…

<%= render 'form' %>

すべての古いフォーム情報を破棄して、それぞれが次のように見えるように、新規ページと編集ページにコードスニペットを追加するはずです。

<h1>Edit Article</h1><%= render 'form' %><%= link_to 'Back', articles_path %>

さて、destroy アクションを追加します…

Step 13: Destroy アクションの追加

コントローラで…

どのコントローラ?

さて、削除できるようにしたいページへのリンクを追加する必要があります。下のリンクを使って…

<%= link_to 'Delete', article_path(article), method: :delete, data: {confirm: "Are you sure?"} %>

…ユーザーが削除できるようにしたいページに追加します。

インデックスページに追加すると、このようになります。

ショーページに追加すると、編集リンクの構造を真似るために破壊リンクをわずかに修正する必要があるでしょう。

This:

<%= link_to 'Delete', article_path(@article), method: :delete, data: {confirm: "Are you sure?"} %>

Instead of this:

<%= link_to 'Delete', article_path(article), method: :delete, data: {confirm: "Are you sure?"} %>

Step 14: Articles Controller のリファクタリング

開発原則の 1 つに DRY というものがありますが、この意味がもうわかっているかと思います。 “DON’T REPEAT YOURSELF”

私たちは自分自身をかなり繰り返しているので、少しリファクタリングを行いましょう。

このコード行は、すべてのアクションに表示されます…

@article = Article.find(params)

そこで、プライベートメソッドを作成し、この行をそこに格納します…

def set_article
@article = Article.find(params)
end

次に、アクションからコード行を削除します…

破壊、表示、更新、編集に含まれています…

コントローラの最初の行のすぐ下…

before_action :set_article, only:

更新したコントローラファイルは次のようになります。

Step 15: Bootstrap をインストールする

githubページからgemfileを追加する…

gem 'bootstrap-sass', '~> 3.4.1'
gem 'sassc-rails', '>= 2.1.0'

次に、コマンドラインで、サブディレクトリのいずれかではなく app ディレクトリにいることを確認して、インストールする…

gem 'bootstrap-sass', '~> 3.4.1'
gem 'sassc-rails', '>= 2.1.0'

そして、次のコマンドを実行します。

$ bundle install

また、新しい CSS ファイルを作成する必要があります。ファイル名は以下のようになり、app/assets/stylesheets

custom.css.scss

そして追加…

次に、アプリケーションに、CSS ファイルを作成します。js ファイルを app/assets/javascripts に…

//= require jquery
//= require bootstrap-sprockets

そして、Rails 5 を使用している場合は、jQuery gem をインストールします…

gem 'jquery-rails'

お使いのバージョンがわからない場合は、こちらを参照してください。ターミナルで以下を実行します:

$ rails -v

これでわかりました。 jquery をインストールする必要がある場合は、上記の gem を gemfile に追加し、bundle install してください。

$ bundle install

ステップ16：ナビゲーションバーのインストール

レイアウトフォルダの下にパーシャルを作成…

_navigation.html.erb

さて、bootstrapのホームページへ…

デフォルトナビバーのコードを手に入れる… これは最初の例で次のような感じである。

そしてあなたの _navigation 部分へペーストします… 保存してください。

次に、application.html の <head> </head> 内でパーシャルをレンダリングします。

<%= render 'layouts/navigation' %>

ファイル全体は次のようになります。

最近新しい gems を追加したので、サーバーを再起動 (mac では control + c) してから、再度起動します。

$ rails s

そして、ローカルサーバーを更新すると、次のようになります:

そして今あなたはどのページで、ALPHA BLOGをクリックすればルート_パス（インデックスページ）に移動することができるのです。

次に、記事インデックスページへのリンクを追加しましょう:

ナバー内の最初の「リンク」の代わりに:

<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>

追加:

<li><%= link_to "Articles", articles_path %></li>

そしてナバー内の2番目の「リンク」の代わりに：

<li><a href="#">Link</a></li>

追加：

<li><%= link_to "Create Article", new_article_path %></li>

あとはインデックス内の「記事作成」への他のリンクは削除すればよいのですが、このリンクは「記事作成」のリンクです。html.erb ファイルにある “Create Article” へのもうひとつのリンクを削除できます。それを突き止めて削除するだけです。

検索バーも削除します。

以下のすべてを切り取る。

最初のドロップダウンメニューも必要ないので、削除する。これを探して削除してください:

ファイルを保存します。ローカルホストサーバーを更新すると、次のように表示されます。

Step 18: Style the Form Template

bootstrap 上のコードはここで見つけられます。

私たちが望む結果を得るために、埋め込みルビーとブートストラップを混ぜるつもりです。

_form.html の内部で、フォームを作成します。erb 部分で、これを変更します…

これに…

フォームの do 文の最初に行った重要な変更に注意してください…

<%= form_for(@article, :html => {class: "form-horizontal", role: "form"}) do |f| %>

そしてフォーム要素内の構文に注意してください…

<%= f.text_field :title, class: "form-control", placeholder: "Title of article", autofocus: true %>

ステップ 19: メッセージのスタイル & Refactor into Partials

今エラーメッセージのスタイルも更新しましょう。スタイリングを…

to:

これでエラーメッセージが:

さて、部分抽出をします。.

ビューの下に ‘shared’ という新しいフォルダーを作成します…

新しいファイル _errors を作成します.

エラーメッセージをそのファイルにコピー/貼り付けます。

ここで _form.html.erb からエラーメッセージを削除し、コードを次のように置き換えます：

<%= render 'shared/errors' %>

さらに _messages.html.erb ファイルを作成して共有フォルダ下に格納しましょう。そのファイルの中に、フラッシュメッセージのコードを追加してください：

<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>

そのファイルを保存してください。 layouts/application.html.erb ファイル内のコードを次のコードに置き換えることを確認します：

<%= render 'shared/errors' %>

ファイル全体は現在次のようになります。html.erb 部分で、これを…

<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>

変更します。

このステップを完了するには、articles_controller.rb ファイル内のすべてのフラッシュをフラッシュに変更することも必要です。 Article Instance Variables To Work For Users

まだブログでユーザーやユーザーアクションを作成していないので、これは少し時期尚早ですが、ユーザーを作成し、エラーメッセージを記事で動作するようにユーザーで動作するようにしたいと思います。新しい記事の作成、古い記事の編集、そして、何が問題だったのかを知らせるフラッシュエラーメッセージです。html.erb ファイルで、@article インスタンス変数を @obj インスタンス変数に更新する…

次に、部分レンダリング文を更新する必要があります… articles/_form.html.erb

It was…

<%= render 'shared/errors' %>

and now it must read…

<%= render 'shared/errors', obj: @article %>

次に、「show」ビューに取り組みます。

ステップ 21: Show Article Page

views/articles/show.html を更新してください。erb ページを…

これはレンダリングされます。

次に、いくつかの ‘simple_format’…

Change this…を追加する。

<%= @article.description %>

このようにします…

<%= simple_format(@article.description) %>

次に、ボタンにいくつかのスタイルを追加します…

<%= link_to "Edit", edit_article_path(@article), class: "btn btn-xs btn-primary" %> |
<%= link_to 'Back', articles_path, class: "btn btn-xs btn-success" %>

いくつかの美しい小さなボタンを作成します…。