概要
ユーザー設定の枠組みに、プロフィールコメントの編集機能を実装する。
ルーティングの確認
ユーザー設定でルーティングは設定済みだが確認しておく。フォームからのデータはPATCHで送られてくる。
|
1 2 3 4 5 6 7 |
Rails.application.routes.draw do ..... get '/users/:id/edit', to: 'users#edit', as: :edit_user patch '/users/:id/edit', to: 'users#update', as: :update_user end |
ビューの編集
edit.html.erbにコメント入力欄を追加し、スタイル設定のためのdiv要素を加える。
フォームのボタンが押されると、PATCHメソッドでupdate_user_pathにルーティングされる。その際、セッション中のユーザーのIDがparamsに渡される。
app/views/users/edit.html.erb
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="user_settings"> <h1><%= @user.name %>さんのユーザー設定</h1> <div class="user_settings_form"> <%= form_with(model: @user, url: update_user_path(user_in_session), local: true) do |f| %> <h2>プロフィールコメント</h2> <%= f.text_area(:comment, class: "input comment", placeholder: "プロフィールコメント") %> <button>この内容で設定</button> <% end %> </div> </div> |
また、プロフィール画面でコメント表示するようshow.html.erbを変更する。
app/views/users/show.html.erb
|
1 2 3 4 5 6 7 8 9 |
<div class="user_profile"> <h1><%= @user.name %>さんのプロフィール</h1> <div class="contents"> <%= image_tag "https://dummyimage.com/200x200/0b0e4d/23f534.png&text=Profile+Image" %> <p class="comment"> <%= @user.comment %><br> </p> </div> </div> |
コントローラーの編集
editアクション(再掲)
UsersControllerのeditでセッションユーザーを取得し、ビューで共用できるようインスタンス変数に格納する(ユーザー設定機能で実装済みだが再掲)。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
class UsersController < ApplicationController ..... def edit # ビューで表示させるユーザー @user = User.find(user_in_session.id) end ..... end |
updateアクション
updateでもセッション中のユーザー取得してインスタンス変数に保存する。
そして、フォームで入力されたパラメーターの内容で@user(セッション中のユーザー)の内容を更新する。
現在のフォームから送られてくるのは:comment(と:id)だけなので、この内容で:idで取得済みのユーザーのコメントが更新される。
- 更新に成功した場合はプロフィールページへ
- 更新に失敗した場合は再度ユーザー設定画面へ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
class UsersController < ApplicationController ..... def update @user = User.find(user_in_session.id) if @user.update(user_params) redirect_to profile_path(user_in_session) else flash.now[:danger] = "設定更新できませんでした" flash.now :edit_user, layout: 'application' and return end end ..... end |
user_paramsヘルパーの変更
今の設定では、user_paramsの中で取得が許可されている属性にコメントが含まれていない。
そこでフォームから送られてくるコメントのデータを受信可能とするために、user_paramsで:commentをpermitに追加する。
|
1 2 3 4 5 6 7 8 9 10 |
class UsersController < ApplicationController ..... # フォーム入力のパラメーターを取得するメソッド private def user_params params.require(:user).permit(:name, :email, :password, :comment) end end |
スタイルファイル
ユーザー設定ページのスタイルをusers.scssに追記する。
apps/assets/stylesheets/users.scss
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
// ユーザー設定ページのスタイル .user_settings { margin: 0 auto; width: 600px; height: 100%; background-color: white; h1 { margin: 0 auto; padding: 40px 0 30px 0; font-size: 20px; text-align: center; font-weight: bold; } .user_settings_form { h2 { margin: 30px 20px 0 10px; font-size: 15px; } .input { display: block; margin: 10px 20px 0 auto; width: 500px; } .comment { height: 100px; background-color: #f8f8f8; } button { display: block; margin: 10px 20px 10px auto; } } } |
実行結果
ボタンを押して内容がセットされると、プロフィールページに遷移して変更が反映される。