見た目を美しくしてみましょう

Ruby on Rails Academy #3

Index Page

まずは新しいブランチを作成し、チェックアウトします。

git checkout -b new-branch-name

#2で作ったフォームからいくつか新しいアイテムを投稿し、画像をapp/assets/images/に格納したら、インデックスページを作成します。
このページでは全てのアイテムを一覧させたいので、items_controller.rbのindexアクションに

@items = Item.all

を追加します。複数のアイテムを内包しているのでitem__s__にします。Railsの決まりはできるだけ守っていきます。

exercise 1

それぞれの項目が縦に並び、画像の横に詳細が記述されるビューを作りましょう。
問題ないことが確認できたら、ここで一度Gitにコミットしましょう。

Make It Prettier

さて、今までの部分にはまだ何もスタイルを与えてません。これでは見栄えが悪いのでCSSを用いて色付けしていきましょう。
そのような目的には、Bootstrapという非常に有名なライブラリーがあるのでそれを使います。

Gemfile

gem 'bootstrap-sass'

bundle install

application.js

//= require turbolinks
//= require bootstrap-sprockets <--この行を追加
//= require_tree

application.css の名前を application.sass に変え

@import "bootstrap-sprockets"
@import "bootstrap"

この二行を追加します

ブラウザで見てみると少し雰囲気が変わっていることがわかると思います。

exercise 2

CSSとBootstrap(http://getbootstrap.com/)を参考に今までの部分（indexページ、newページ）の見た目を自由に改善しましょう。

Update and Delete

今までのindex new で　CRUD　の CとRができました。
残りのUとDを作ります。

routes.rb にresourceルーティングを設定してなければここで設定しましょう。

resources :items

views以下に、edit.html.erbを作成し、items_controller.rbに、

def edit
@item = Item.find(params[:id])
end

を追加します。

exercise 3

その中にedit用のフォームを作成しましょう。
できたら、indexのページの各項目の横に”編集”リンクが出るようにして、editページに飛ぶか確認しましょう。
同様に、削除リンクもindexページに追加します。

<%= link_to 'Destroy', item, method: :delete, data: { confirm: 'Are you sure?' } %>

コントローラーにdestroyアクションを追加します。

def destroy
item = Item.find(params[:id])
item.destroy
redirect_to :action => "index"
end

確認できたら、Gitにコミット、プッシュします。

開発用gem

controller内に、params という宣言していないものが出てきました。
Railsはアクションに渡すパラメータを params という変数に入れて渡します。
ここで一度中身を見ておきましょう。
pry-rails というデバッグ用のgemを導入します。
Gemfileの group development 内に

gem 'pry-rails'

bundle install

し、処理を止めたいところ(今回は items_controller.rb)に

binding.pry

を、追加します。
これでeditページを開こうとすると、コンソール上に
このように出て、処理が中断されます。ここで変数名やメソッド名を打つと

[1] pry(#)>params

paramsの内容が表示されます。

このように、開発をしやすくするためのGemというものも多数存在します。
興味があれば探して、試しに使ってみましょう。