2020-11-16に投稿

2020.11.16 * 編集機能

本日のゴール

■ 編集機能作成

editアクション作成

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

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

showアクションと同じく、idをキーに単語を1つ探して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' %>

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

http://localhost:3000/words/1/editにアクセスしてみます。
image.png
登録済みの値が表示されました!

値を変えてSaveボタンを押してみます。
image.png
 ↓ボタンクリック
image.png
更新できました!
と思ったらIDが5になっている 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 %>

1行目のurl: words_pathwords#createを指しているので削除してみます。

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

http://localhost:3000/words/newにアクセスして
image.png
Saveボタンクリック↓
image.png
0 _ 0...

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

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

words_controller.rb

  def new
    @word = Word.new
  end

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

editのリンク作成

一覧画面から編集画面に遷移できるようリンクを作っておきます。
image.png
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

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

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

same0v0same

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

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

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

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

コメント