⑪ユーザ情報の更新処理を実装

この章でのゴール

・ユーザ情報を更新できるようにする

投稿した日記の一覧を表示

この章では、ユーザ情報を更新できる機能を実装していきます。

完成イメージは下記です。

ユーザ情報を更新するビューを作成

$ touch app/views/users/edit.html.erb

 

作成したら、app/views/users/edit.html.erbを開き、以下の通り保存します。

<div class="post-new-wrapper" >
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <h1 class="text-center">ユーザ情報の更新</h1>
        <%= form_for @user do |f| %>
          <div class="form-group">
            <%= f.label :名前, class: 'text-white' %>
            <%= f.text_field :name, class: 'form-control' %>
          </div>
          <div class="form-group">
            <%= f.label :メールアドレス, class: 'text-white' %>
            <%= f.text_field :email, class: 'form-control' %>
          </div>
          <div class="form-group">
            <%= f.label :パスワード, class: 'text-white' %>
            <%= f.password_field :password, class: 'form-control' %>
          </div>
          <div class="form-group">
            <%= f.label :パスワード(確認用), class: 'text-white' %>
            <%= f.password_field :password_confirmation, class: 'form-control' %>
          </div>

          <%= f.submit '保存', class: 'btn btn-black btn-block' %>

        <% end %>
      </div>
    </div>
  </div>
</div>

Usersコントローラの設定

app/controllers/users_controller.rbを開き、以下の通り保存します。

class UsersController < ApplicationController
  def new
    @user = User.new
  end

  def create
    @user = User.new(name: params[:user][:name], email: params[:user][:email], password: params[:user][:password], password_confirmation: params[:user][:password_confirmation])

    if @user.save
            redirect_to '/', success: '登録が完了しました'
    else
        flash.now[:danger] = "登録に失敗しました"
        render :new
    end
  end

  def edit
    @user = User.find(params[:id])
  end

  def update
    @user = User.find(params[:id])
    if @user.update_attributes(user_params)
      flash[:success] = "ユーザ情報を更新しました。"
      redirect_to '/'
    else
      flash.now[:danger] = "ユーザ情報の更新に失敗しました"
      render 'edit'
    end
  end

  private

  def user_params
    params.require(:user).permit(:name, :email, :password,
                                 :password_confirmation)
  end

end

ヘッダーの編集

続いて、ヘッダーに、ユーザ情報の更新ページへのリンクを追加します。

また、app/views/layouts/application.html.erbを開き、以下の通り保存します。

<!DOCTYPE html>
<html>
  <head>
    <title>HelloWorldApp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <header class="navbar navbar-inverse">
      <div class="container">
        <%= link_to "サンプルアプリケーション(仮)", '/', id: "logo" %>
        <nav>
          <ul class="nav navbar-nav navbar-right">
            <% if current_user %>
              <li><%= link_to '新規投稿', new_post_path %></li>
              <li><%= link_to 'ログアウト', logout_path, method: :delete %></li>
              <li><%= link_to 'ユーザ情報編集', edit_user_path(current_user.id) %></li>
            <% else %>
              <li><%= link_to 'ログイン', login_path %></li>
            <% end %>
          </ul>
        </nav>
      </div>
    </header>
    <% flash.each do |key, value| %>
      <div class="alert alert-<%= key %>" role="alert"><%= value %></div>
    <% end %>

    <%= yield %>
  </body>
</html>

 

<li><%= link_to 'ユーザ情報編集', edit_user_path(current_user.id) %></li>

 

↑追加したコードです。

if current_userの中に記述することで、ログイン中のみ、リンクを表示することができます。

以下の画像のように表示されるはずです。

実際に、ユーザ情報を更新してみて、動作を確認しましょう。

「名前」「メールアドレス」「パスワード」などが更新されればOKです。

ここまで完成したら、githubへプッシュしておきましょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA