2020-11-10に更新

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にアクセスするとこんな画面になりました。
image.png

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

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

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

で、http://localhost:3000/words/newにアクセスしてsaveボタン押下。
image.png
ちゃんと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にアクセスしてみます。
image.png
無事登録できていました✨

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

パラメータの許可を逐一書くのはよくないので共通化します。
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

ツイッターでシェア
みんなに共有、忘れないようにメモ

view_list Ruby on Railsを使ったwebアプリ開発の記録
第1回 2020.11.6 * サーバ起動まで
第2回 2020.11.9 * 最初のコントローラとWord・Chapterモデル
第3回 2020.11.10 * 英単語の登録機能
第4回 2020.11.11 * 削除機能
第5回 2020.11.12 * 単語の一覧表示

same0v0same

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント