noggy’s blog

自分用の備忘録です。。。

質問投稿サイトの作成(2/3)

初めてのRoR

1/3のつづき

122.質問投稿画面へのリンク

質問一覧の下に「質問入力フォーム」へのリンクを追加する

<h2>Questions</h2>
<div class="row">
  <div class="col-md-12">
    <table class="table table-striped">
      <thead class="thead-light">
        <tr>
	  <th>ID</th>
	  <th>Title</th>
	  <th>Menu</th>
	</tr>
      </thead>
    <tbody>
      <% @questions.each do |question| %>
        <tr>
          <td><%= question.id %></td>
	  <td><%= question.title %></td>
	  <td>[Edit][Delete]</td>
        </tr>
      <% end %>
    </tbody>
   </table>
   <!-- 追加ココから -->
   <div>
     <%= link_to 'New question', new_question_path %>
　</div>
    <!-- ココまで -->
  </div>
</div>

f:id:nogicchi:20210918110148p:plain

123.質問編集画面へのリンク

仮のボタン「Edit」を編集画面へのリンクに変更する

<h2>Questions</h2>
<div class="row">
  <div class="col-md-12">
    <table class="table table-striped">
      <thead class="thead-light">
        <tr>
	  <th>ID</th>
	  <th>Title</th>
	   <th>Menu</th>
	</tr>
      </thead>
      <tbody>
        <% @questions.each do |question| %>
	  <tr>
	    <td><%= question.id %></td>
	    <td><%= question.title %></td>
	    <td>[<%= link_to 'Edit', edit_question_path(question) %>]
              [Delete]</td>　<!-- 変更 -->
	  </tr>
	<% end %>
      </tbody>
    </table>
    <div>
      <%= link_to 'New question', new_question_path %>
    </div>
  </div>
</div>

raills rouresでルーティングを確認すると

edit_question  GET   /questions/:id/edit(.:format)     questions#edit

edit_question_path(question)は引数にquestionのインスタンスをわたす．
これでidが編集画面にわたり利用することができる．
f:id:nogicchi:20210918111926p:plain
リンク[Edit]にカーソルをあてて右クリックで「検証」．
すると生成されているHTMLが見れる．

124.質問編集画面View

new.html.erbと基本同じなので，コピペする

<div>
  <div class="col-md-4 offset-md-4">
    <h2 class="text-center">Edit question</h2>  <!-- 違うのはここだけ -->
    <%= form_with model: @question, local:true do |f| %>
      <div class="form-group">
	<label>Name</label>
        <%= f.text_field :name, class: "form-control" %>
      </div>
      <div class="form-group">
        <label>Title</label>
         <%= f.text_field :title, class: "form-control" %>
      </div>
      <div class="form-group">
        <label>Content</label>
        <%= f.text_area :content, class: "form-control" %>
      </div>
      <div class="text-center">
        <%= f.submit "Save", class: "btn btn-primary" %>
      </div>
    <% end %>
  </div>
</div>

f:id:nogicchi:20210918113149p:plain
編集欄に何も表示されていないことに注意する．
これはインスタンス変数@questionが空のため，Railsが新規入力と判断したためなのか，単に表示するものがないからのどちらかだろう．次では，editアクションで@questionにデータをわたす．

125.質問編集画面Controller

　# すべて追加 
  def edit
    @question = Question.find(params[:id])
  end

  def update
    @question = Question.find(params[:id])
    if @question.update(question_params)
      redirect_to root_path, notice: 'Success!'
    else
      flash[:alert]='Save error!'
      render :edit
    end
  end

f:id:nogicchi:20210918120929p:plain
今度はちゃんと編集欄に表示さている

f:id:nogicchi:20210918121106p:plain
編集し、保存してみる

f:id:nogicchi:20210918121128p:plain
編集できた！

127.Viewのリファクタリング

new.html.erbとedit.html.erbのviewはほとんど同じなので，viewを共通化する。
共通しているのは↓この部分．

<%= form_with model: @question, local:true do |f| %>
  <div class="form-group">
    <label>Name</label>
    <%= f.text_field :name, class: "form-control" %>
  </div>
  <div class="form-group">
    <label>Title</label>
    <%= f.text_field :title, class: "form-control" %>
  </div>
  <div class="form-group">
    <label>Content</label>
    <%= f.text_area :content, class: "form-control" %>
  </div>
  <div class="text-center">
    <%= f.submit "Save", class: "btn btn-primary" %>
  </div>
<% end %>


<div>
  <div class="col-md-4 offset-md-4">
    <h2 class="text-center">New question</h2>
    <%= render 'form' %>
  </div>
</div>


<div>
  <div class="col-md-4 offset-md-4">
    <h2 class="text-center">Edit question</h2>
    <%= render 'form' %>
  </div>
</div>

重複が少なくなり，メンテナンスがしやすくなった。

128.質問削除機能の追加

投稿した質問を削除できるようにする．まずはコントローラ側から

  def destroy
    @question = Question.find(params[:id])
    @question.destroy
    redirect_to root_path, notice: 'Success!'
  end

削除が成功したら，root_path(一覧表示)させる

次はview側
仮のボタン[Delete]をリンクに変更

<h2>Questions</h2>
<div class="row">
  <div class="col-md-12">
    <table class="table table-striped">
      <thead class="thead-light">
        <tr>
	  <th>ID</th>
	  <th>Title</th>
	  <th>Menu</th>
	</tr>
      </thead>
      <tbody>
        <% @questions.each do |question| %>
          <tr>
            <td><%= question.id %></td>
            <td><%= question.title %></td>
            <td>[<%= link_to 'Edit', edit_question_path(question) %>]
              [<%= link_to 'Delete', question_path(question), method: :delete, data: {confirm: 'R U sure?'} %>]</td>
          </tr>   <!-- ↑変更 -->
        <% end %>
      </tbody>
    </table>
    <div>
      <%= link_to 'New question', new_question_path %>
    </div>
  </div>
</div>

f:id:nogicchi:20210918134608p:plain
4番目の投稿を削除してみる

f:id:nogicchi:20210918135122p:plain
削除できた！

129.質問詳細画面へのリンク

投稿タイトルをリンクに変更し，詳細画面に遷移できるようにする

<h2>Questions</h2>
<div class="row">
  <div class="col-md-12">
    <table class="table table-striped">
      <thead class="thead-light">
        <tr>
	  <th>ID</th>
	  <th>Title</th>
	  <th>Menu</th>
	</tr>
      </thead>
      <tbody>
        <% @questions.each do |question| %>
          <tr>
	    <td><%= question.id %></td>
	    <td><%= link_to question.title, question_path(question) %></td>  <!-- 変更 -->
            <td>[<%= link_to 'Edit', edit_question_path(question) %>]
              [<%= link_to 'Delete', question_path(question), method: :delete, data: {confirm: 'R U sure?'} %>]</td>
          </tr>   
        <% end %>
      </tbody>
    </table>
    <div>
      <%= link_to 'New question', new_question_path %>
    </div>
  </div>
</div>

f:id:nogicchi:20210918135632p:plain
タイトルがリンクに変更

f:id:nogicchi:20210918135757p:plain
どのリンクをクリックしてもshowアクションとviewを実装していないため，同じviewになる


rails routesでshowメソッドのルーティングを確認

question 　GET　/questions/:id(.:format) 　questions#show

viewの実装はこの後