まずは新しいブランチを作成し、チェックアウトします。
git checkout -b new-branch-name
#2で作ったフォームからいくつか新しいアイテムを投稿し、画像をapp/assets/images/に格納したら、インデックスページを作成します。
このページでは全てのアイテムを一覧させたいので、items_controller.rbのindexアクションに
@items = Item.all
を追加します。複数のアイテムを内包しているのでitem__s__にします。Railsの決まりはできるだけ守っていきます。
それぞれの項目が縦に並び、画像の横に詳細が記述されるビューを作りましょう。
問題ないことが確認できたら、ここで一度Gitにコミットしましょう。
さて、今までの部分にはまだ何もスタイルを与えてません。これでは見栄えが悪いので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"
この二行を追加します
ブラウザで見てみると少し雰囲気が変わっていることがわかると思います。
CSSとBootstrap(http://getbootstrap.com/)を参考に今までの部分(indexページ、newページ)の見た目を自由に改善しましょう。
今までの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
を追加します。
その中に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にコミット、プッシュします。
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というものも多数存在します。
興味があれば探して、試しに使ってみましょう。