LoginSignup
2

More than 3 years have passed since last update.

プロフィール編集機能の実装

Posted at

備忘録です!!

新たなカラムの追加

userのアバター画像のカラムを生成します。

rails g migration add_avatar_to_users avatar:string

viewの生成

プロフィール詳細画面として

profiles/show.html.erb
<% content_for(:title, 'プロフィール') %>
<div class="container pt-3">
  <div class="row">
    <div class="col-md-10 offset-md-1 mb-5">
      <h1 class="float-left"><%= t('.title') %></h1>
      <%=link_to "編集", edit_profile_path, class: 'btn btn-success float-right' %>
    </div>
    <div class="col-md-10 offset-md-1">
      <table class="table">
        <tbody>
          <tr>
            <th>
              <span>メールアドレス</span>
            </th>
            <td><%= current_user.email %></td>
          </tr>
          <tr>
            <th>
              <span>氏名</span>
            </th>
            <td><%= current_user.decorate.full_name %></td>
          </tr>
          <tr>
            <th>
              <span>アバター</span>
            </th>
            <td><%= image_tag current_user.avatar.url, size: '50x50', class: 'rounded-circle mr15' %></td>
          </tr>

        </tbody>
      </table>
    </div>
  </div>
</div>

プロフィール変更画面

edit.html.erb
<% content_for(:title, 'プロフィール編集') %>
<div class="container pt-3">
  <div class="row">
    <div class="col-md-10 offset-md-1 mb-5">
      <h1 class="float-left"><%= t('.title') %></h1>
    </div>
    <div class="col-md-10 offset-md-1">
      <%= form_with model: @user, url: profile_path, local: true do |f| %>
        <%= render "shared/error_messages", object: f.object %>
        <div class="form-group">
          <%= f.label :email %>
          <%= f.email_field :email, class: "form-control" %>
        </div>
        <div class="form-group">
          <%= f.label :last_name %>
          <%= f.text_field :last_name, class: "form-control" %>
        </div>
        <div class="form-group">
          <%= f.label :first_name %>
          <%= f.text_field :first_name, class: "form-control" %>
        </div>
        <div class="form-group">
          <%= f.label :avatar %>
          <%= f.file_field :avatar, class: "form-control", accept: 'image/*', onchange: 'previewFileWithId(preview)' %>
          <%= f.hidden_field :avatar_cache %>
          <div class='mt-3 mb-3'>
            <%= image_tag @user.avatar.url , size: '100x100', class: 'rounded-circle' %>
          </div>
        </div>
        <%= f.submit (t 'defaults.update'), class: "btn btn-primary"%>
      <% end %>  
    </div>
  </div>
</div>

ルーティングの設定

今回は、resourcesではなく、resourceを使っていきます。

本来、/users/:id/edit、のようになるはずですが、もしidを変えれば、他のユーザーのプロフィール編集ページに入ることができてしまう可能性があります。(もちろん、入れないようにバリデーションはかけますが)

プロフィール変更ページは自分自身に対してしか使わないので、idを用いず、pofile/editとなるようにルーティングを設定していきます。

resource resource :profile, only: %i[show edit update]

profileコントローラーの生成

rails g controller profiles

userの情報は、userモデルに紐づいたデータベースに保存されていますが、今回は新たにモデルに紐づかないprofileコントローラーを生成し、profileコントローラーでプロフィールの編集ページを実装していきます。

profile_controller.rb
def edit
  @user = User.find(current_user.id)
end

def update
  @user = User.find(current_user.id)
  if @user.update(user_params)
    redirect_to profile_path, success: t('defaults.message.edited', item: User.model_name.human)
  else
    flash.now['danger'] = t('defaults.message.not_edited', item: User.model_name.human)
    render :edit 
  end
end

private

def user_params
  params.require(:user).permit(:email, :first_name, :last_name, :avatar)
end

実装完了です!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2