index画面とフォームの作成

2019-02-17 Yuki MatsumotoRuby on Rails

ideasテーブルから全データを取得する

indexページは全ユーザーが投稿したアイデアの一覧を表示するページにする予定です。なのでideasテーブルから全データを取得する命令を記述する必要があります。

indexアクションにideasテーブルから全データを取得する

 def index
    @ideas = Idea.all
  end

これでideasから全データを取得する準備ができました。

indexに取得したデータを表示させる

controller側でideaを全権取得するアクションを作成したので、次は取得したデータを画面に表示させるためのviewを作成します。

controllerで作成した@ideasはインスタンス変数としてviewからも値を参照することができます。これをテンプレート変数と呼びます。テンプレート変数(@ideas)を要素の数だけ取り出してindex画面に表示させるためにeachを使います。

<% @ideas.each do |idea| %>
    <p><%= idea.title %></p>
    <p><%= idea.content %></p>
<% end %>

今回はindexページに投稿されたアイデアの一覧を表示させたいので、ideasテーブルのtitleとcontentを投稿された数だけ表示させる記述をしました。

登録機能を実装する

indexページに登録されている全データを表示することができたので、次は実際のデータを入力してデータベースに保存する機能を実装します。

データの登録はnew actionでしたいので、まずはcontrollerに必要な処理を追加

  def new
    @idea = Idea.new
  end

Idea.newでデータがない空のIdeaオブジェクトを作成して@ideaのテンプレート変数に代入します。そして作成したテンプレート変数をviewで使うためにnew.html.erbで入力フォームを作成します。※Rails5.1以降はform_forではなくform_withを利用する

<%= form_with @idea do |f| %>
  <p>
    <%= f.label :title %>
    <%= f.text_field :title %> #input titile
  </p>

  <p>
    <%= f.label :content %>
    <%= f.text_field :content %> #input content
  </p>

  <%= f.submit %> #submit button

<% end %>

実際にフォームが作成されたことを確認してみましょう。

bundler exec rails sでサーバーを立ち上げて生成されたviewを確認します。

うまくできているようです。

送信された内容をデータベースに書き込む

フォーム画面の作成までができました。次は入力した内容をデータベースに書き込むための処理を追加していきます。

routesを確認するとpostメソッドで/ideasにリクエストがあった場合にcreateアクションが呼ばれるように自動設定されています。

Prefix Verb   URI Pattern                                                                              Controller#Action
                     root GET    /                                                                                        ideas#index
                    ideas GET    /ideas(.:format)                                                                         ideas#index
                          POST   /ideas(.:format)                                                                         ideas#create
                 new_idea GET    /ideas/new(.:format)                                                                     ideas#new
                edit_idea GET    /ideas/:id/edit(.:format)                                                                ideas#edit
                     idea GET    /ideas/:id(.:format)                                                                     ideas#show
                          PATCH  /ideas/:id(.:format)                                                                     ideas#update
                          PUT    /ideas/:id(.:format)                                                                     ideas#update
                          DELETE /ideas/:id(.:format)                                                                     ideas#destroy

これはroutes.rbで書いたresources :ideasが適用されているためです。この一行によってideasリソースのリクエストに対する一通りのルーティングが自動で作成されてます。

というわけで、postメソッドで送られてきた情報をデータベースに書き込むためのcreateアクションを作成します。場所はapp -> controllers -> ideas.controller.rb

  def create
    @idea = Idea.new(idea_params)
    @idea.save
    redirect_to ideas_path
  end

まずparamsを使うことで連想配列を全て取得することができます。ideaにあるtitleとcontentをpramasで取得してIdea.newに値を入れます。これを実行したら@idea.saveで@ideaをsaveします。そしてredirect_to ideas_pathで/ideasのgetメソッドにリダイレクトされるようにしてます。

次にフォームから送られてきた特定のデータのみを受け付けるためにストロングパラメーターを設置します。理由としては悪意あるコードをデータベースに送れないようにするためです。

 private
    def idea_params
      params.require(:idea).permit(:title, :content)
    end

少し説明するとフォームから送られてきたideaのデータからtitleとcontentのみを受け付けるようになっています。そのため、IDなどの異なる情報が送られてきた場合は無効になります。

まとめ

今日はcontorllerとview周りを中心に実装を進めていきました。まだ、挙動が完璧ではないので次はcreate側のviewを作り込んでいきます。