ruby on rails を AWS Cloud9で実施 5 QandAサイト作成 バリデーション追加まで

前回の続きでQandAサイト作成します

環境　AWS Cloud9
environment type EC2
instance type t2.micro
platform ubuntu server 18.04 LTS

質問の編集機能を実装

まずはviewの表示を変更します

app/views/questions/edit.html.erb
を作成します

app/views/questions/edit.html.erb

<h1>Edit</h1>
<%= form_with model: @question do |form| %>
  <% if @question.errors.any? %>
    <div>
      <ul>
        <% @question.errors.full_messages.each do |message| %>
          <li><%= message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>
  <div>
    <%= form.label :title %><br>
    <%= form.text_field :title %>
  </div>
  <div>
    <%= form.label :name %><br>
    <%= form.text_field :name %>
  </div>
  <div>
    <%= form.label :content %><br>
    <%= form.text_area :content %>
  </div>
  <div>
    <%= form.submit %>
  </div>
<% end %>

以下のコマンドで

rails routes

ルートpass を確認後

<%= link_to 'edit', edit_question_path(question) %> を追加

app/views/questions/index.html.erb

<h1>Questions</h1>
<table>
  <tr>
    <th>ID</th>
    <th>Title</th>
    <th>Name</th>
    <th>Content</th>
    <th></th>
  </tr>
  <% @questions.each do |question| %>
  <tr>
    <td><%= question.id %></td>
    <td><%= question.title %></td>
    <td><%= question.name %></td>
    <td><%= question.content %></td>
    <td><%= link_to 'show', question_path(question) %></td>
    <td><%= link_to 'edit', edit_question_path(question) %></td>
  </tr>
  <% end %>
</table>

controller　の変更

app/controllers/questions_controller.rb

class QuestionsController < ApplicationController
  # 質問一覧表示
  def index
    @questions = Question.all
    # p @questions
  end
  
  # 質問詳細ページ表示
  def show
    # p params[:id]
    @question = Question.find(params[:id])
    # p @question
  end
  
  # 質問の作成
  def new
    @question = Question.new
  end
  
  # 質問の登録
  def create
    # Questionモデルを初期化
    @question = Question.new(question_params)
    # QuestionモデルをDBへ保存
    if @question.save
      # showへリダイレクト
      redirect_to @question
    else
      render 'new', status: :unprocessable_entity
    end
  end
  
  # 質問の編集
  def edit
    @question = Question.find(params[:id])
  end
  
  # 質問の更新
  def update
    #データベースからレコードのparamsをもとに引数を取得
    @question = Question.find(params[:id])
　　#モデルのアップデートメソッドを利用
    #引数がquestion_paramsなので許可したカラムのみ更新
    if @question.update(question_params)
　　　#データベースに登録できた場合　質問詳細ページに移動
      redirect_to @question
    else
      #登録に失敗した場合　renderメソッドでもう一度編集ページを表示
      render 'edit', status: :unprocessable_entity
    end
  end
  
  # 質問の削除
  def destroy
  end
  
  private
  def question_params
    params.require(:question).permit(:title, :name, :content)
  end
end

以下の部分が　詳細です

assets.rb

  # 質問の更新
  def update
    #データベースからレコードのparamsをもとに引数を取得
    @question = Question.find(params[:id])
　　#モデルのアップデートメソッドを利用
    #引数がquestion_paramsなので許可したカラムのみ更新
    if @question.update(question_params)
　　　#データベースに登録できた場合　質問詳細ページに移動
      redirect_to @question
    else
      #登録に失敗した場合　renderメソッドでもう一度編集ページを表示
      render 'edit', status: :unprocessable_entity
    end
  end

削除機能の作成

controller　の変更

app/controllers/questions_controller.rb

#省略
  # 質問の削除
  def destroy
    @question = Question.find(params[:id])
    @question.destroy
    redirect_to questions_path
  end

view の変更

一覧も日本語にします

<h1>記事一覧</h1>
<table>
  <tr>
    <th>ID</th>
    <th>タイトル</th>
    <th>入力者</th>
    <th>詳細</th>
    <th></th>
  </tr>
  <% @questions.each do |question| %>
  <tr>
    <td><%= question.id %></td>
    <td><%= question.title %></td>
    <td><%= question.name %></td>
    <td><%= question.content %></td>
    <td><%= link_to '確認', question_path(question) %></td>
    <td><%= link_to '修正', edit_question_path(question) %></td>
    <td><%= link_to '削除', question_path(question),
          data: { turbo_method: 'delete', turbo_confirm: 'Are you sure?' }%></td>
  </tr>
  <% end %>
</table>

リファクタリングを実施

リファクタリング（英：refactoring）とは
プログラムの動きを変えないまま、ソースコードを書き換えること
です。

app/views/questions/_form.html.erb

app/views/questions/_form.html.erb

<%= form_with model: @question do |form| %>
  <% if @question.errors.any? %>
    <div>
      <ul>
        <% @question.errors.full_messages.each do |message| %>
          <li><%= message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>
  <div>
    <%= form.label :title %><br>
    <%= form.text_field :title %>
  </div>
  <div>
    <%= form.label :name %><br>
    <%= form.text_field :name %>
  </div>
  <div>
    <%= form.label :content %><br>
    <%= form.text_area :content %>
  </div>
  <div>
    <%= form.submit %>
  </div>
<% end %>

共通化して呼び出すファイルには先頭に　
アンダスコアを使う　ルールです　_form

呼び出すときはformのように
アンダスコアや拡張子は記載しないルールです

app/views/questions/new.html.erb

<h1>新規作成</h1>
<%= render partial: 'form' %>

app/views/questions/edit.html.erb

<h1>編集画面</h1>
<%= render partial: 'form' %>

同じことを繰り返さないコードになりました

リンクの設置

viewに以下のコマンドを入れると新規作成へのリンクが作成できます

<%= link_to '新規作成', new_question_path %>

<%= link_to '一覧画面へ', questions_path %>

ルートのurlで一覧ページに移動する設定に変更

config/routes.rb

Rails.application.routes.draw do
  # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html

  # Defines the root path route ("/")
  # root "articles#index"
  root "questions#index"
  resources :questions
end

次回は　新たな回答をできるテーブルを追加します！

同じことを繰り返さないコードはとても使用しやすかったです

こちらは
ruby on rails を AWS Cloud9で実施 7で利用予定です！