2020.11.16 ＊ 編集機能

本日のゴール

■ 編集機能作成

editアクション作成

まず編集画面に遷移させるアクションを作成します。
words_controller.py

  def edit
    @word = Word.find(params[:id])
  end

showアクションと同じく、idをキーに単語を１つ探してviewに渡すという処理です。

createアクション作成

続いて、viewから受け取った値をDBに格納するアクションを作成します。
words_controller.py

  def update
    @word = Word.find(params[:id])
    @word.update(word_params)
    redirect_to words_path
  end

  中略

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

処理の内容は以下の通り。
1. idをキーに更新対象の単語を探す
2. viewから受け取った引数をword_paramsに渡し、updateメソッドでDB更新
3. 一覧画面にリダイレクト

view作成

最後に編集画面を作成します。
words/edit.html.erb

<%= render 'form' %>

第３回の時にフォームのパーシャルを作成しているので、editでもこれを使います。

http://localhost:3000/words/1/editにアクセスしてみます。

登録済みの値が表示されました！

値を変えてSaveボタンを押してみます。

　↓ボタンクリック

更新できました！
と思ったらIDが５になっている 0 _ 0

フォームのパーシャルを修正

updateを実行するはずがcreateしてしまっている原因はフォームにありそうです。
words/_form.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 %>

１行目のurl: words_pathがwords#createを指しているので削除してみます。

<%= form_with scope: :word, local:true do |f| %>
　以下略

http://localhost:3000/words/newにアクセスして

Saveボタンクリック↓

0 _ 0...

いろいろ調べて以下に落ち着きました。
words/_form.html.erb

<%= form_with model: @word, local:true do |f| %>

words_controller.rb

  def new
    @word = Word.new
  end

仕組みがあんまり理解できていないのでもやもやする....

editのリンク作成

一覧画面から編集画面に遷移できるようリンクを作っておきます。

editはedit_word_pathというルーティングになっているので、index.html.erbに
<%= button_to 'Delete', word_path(word), method: :delete %>
という行を追加します。

words/index.html.erb

<h1>INDEX</h1>
<div>
<% @words.each do |word| %>
    <div>
        ID: <%= word.id %> |
        ENGLISH: <%= word.english %> |
        JAPANESE: <%= word.japanese %>
        <%= button_to 'Edit', edit_word_path(word), method: :get%>
        <%= button_to 'Delete', word_path(word), method: :delete %>
        ----------
    </div>
<% end %>
</div>

http://localhost:3000/wordsにアクセス

これで一通りのCRUDが完成しました〜🎉

おわり*0 v 0