2020.11.10 ＊ 英単語の登録機能

本日のゴール

■ 英単語を登録できるようにする
■ 登録されたデータを画面で見れるようにする

登録用のアクションとviewを作成

前回wordsコントローラを作成した際、アクションはnew, show, edit, delete としました。
しかしnewは登録画面を表示する関数なので、「DBに登録する」という処理用のアクションが必要です。
なのでwordコントローラにcreateアクションを追加します。

class WordsController < ApplicationController
  def new
  end

  def create
    @word = Word.new(params.require(:word).permit(:english, :japanese))
    @word.save
    redirect_to @word
  end

  def show
  end

  def edit
  end

  def delete
  end
end

処理の意味は以下のとおりです。
1. フォームに入力された値を引数として受け取り、Wordモデルをインスタンス化
　 英単語と日本語訳だけ入力する想定なので、許可する引数はenglishとjapaneseのみにしました。
2. DBに保存
3. showアクションにリダイレクト

viewも実装します。
new.html.erb

<%= form_with scope: :word, local:true do |f| %>
    <div>
        <%= f.label :english %>
        <%= f.text_field :english %>
    </div>
    <div>
        <%= f.label :japanese %>
        <%= f.text_field :japanese %>
    </div>
    <%= f.submit %>
<% end %>

http://localhost:3000/words/newにアクセスするとこんな画面になりました。

EnglishとJapaneseを入力してsaveボタンを押してみます。

ルーティングエラー・m・
[POST]"/words/create"にしたいのに"words/new"になってしまっていますね。
form_withに:urlオプションを追加しましょう。
先ほどのエラー画面に表示されたルートを参考にします。

words_pathのPOSTがcreateアクションに割り当てられているので、words_controller.rbの１行目にurl: words_pathを追加します。

<%= form_with scope: :word, url: words_path, local:true do |f| %>

で、http://localhost:3000/words/newにアクセスしてsaveボタン押下。

ちゃんとshowアクションにリダイレクトされました！URLはhttp://localhost:3000/words/1となっています。

showアクションを実装

登録されたデータを画面で確認できるようにします。
まずwords_controller.rb

class WordsController < ApplicationController
　　中略
  def show
    @word = Word.find(params[:id])
  end

@wordの受け取り先はshow.html.erbです。

<h1>SHOW</h1>
<div>
    <p>ENGLISH: <%= @word.english %></p>
    <p>JAPANESE: <%= @word.japanese %></p>
</div> 

これで先ほどのhttp://localhost:3000/words/1にアクセスしてみます。

無事登録できていました✨

パラメータの処理を切り出し

パラメータの許可を逐一書くのはよくないので共通化します。
words_controller.rb

class WordsController < ApplicationController
　
  def create
    @word = Word.new(word_params)
    @word.save
    redirect_to @word
  end

  private
  def word_params
    params.require(:word).permit(:english, :japanese)
  end
end

※変更のない部分は割愛しています。
word_paramsという関数を作成し、createのWord.new( )の中で呼び出すようにしました。

formをパーシャル化

viewのフォーム部分はnewとeditで共通になるので、パーシャル（部分テンプレート）にして共通化しようと思います。
app/views/words/ディレクトリに_form.html.erbというファイルを作成します。命名規則にしたがってプレフィックスにはアンダースコアを付けました。
ここにedit.html.erbの中身を移植します。

<%= form_with scope: :word, url: words_path, local:true do |f| %>
    <div>
        <%= f.label :english %>
        <%= f.text_field :english %>
    </div>
    <div>
        <%= f.label :japanese %>
        <%= f.text_field :japanese %>
    </div>
    <%= f.submit %>
<% end %>

そしてedit.html.erbの方はこれだけに。

<%= render 'form' %>

動作確認もきちんとできました！

おわり*0 v 0