読者です 読者をやめる 読者になる 読者になる

Ruby好き非エンジニアのブログ

〜Ruby on Railsの学習記録〜

プロフィール編集ページの作成

プロフィール編集についてのメモ。

前回ログイン周りを一通りおこなったので、今回は登録した情報の編集・更新ができるようにします。


まずは、コントローラーにeditアクションを追加します。

app/controllers/users_controller.rb

def edit
    @user = User.find(params[:id])
    render :layout => 'users'
end

※render :layout => 'users' 
・・・通常画面と会員画面のレイアウトが異なるため、会員画面のレイアウトに飛ばしています。



そして、それに対応するViewも作成していきます。
登録時の、「ニックネーム」と「パスワード」カラムに加えて、
プロフィールの編集では、「肩書き」と「自己紹介」のカラムも追加してみます。
決まりは無いので何でも良いですが、
肩書き=position
自己紹介=s_introduction
としてみました。
(肩書きの英訳はtitleですが、titleは他で使用する予定のため、別の名前にしました)


ではまずはカラムの追加。ターミナルにて以下を実行。

rails generate  migration AddEditToUsers position:string s_introduction:text
rake db:migrate

これでマイグレーションファイルが出来ました。
db/migrate/2016*******_add_edit_to_users.rb

class AddEditToUsers < ActiveRecord::Migration[5.0]
  def change
    add_column :users, :position, :string
    add_column :users, :s_introduction, :text
  end
end


次は編集フォームの作成。
先ほど追加したカラムと、画像の登録をできるようにします。
とりあえずはgravatorでサンプル画像を表示しておきます。
(画像の登録・表示はまた別の回で)

<% provide(:title, "Edit user") %>
<h1>プロフィール編集</h1>

<div class="row">
  <div class="col-md-6 col-md-offset-3">
   <%= form_for(@user) do |f| %>
    <%= render 'shared/error_messages', object: f.object %>
    
    <div class="profile_left">
    
    <%= f.label :ニックネーム %>
    <%= f.text_field :nickname, class: 'form-control' %>

    <%= f.label :メールアドレス %>
    <%= f.email_field :email, class: 'form-control' %>

    <%= f.label :パスワード %>
    <%= f.password_field :password, class: 'form-control' %>

    <%= f.label :パスワード確認 %>
    <%= f.password_field :password_confirmation, class: 'form-control' %>
    </div>

    <div class="profile_right">
    <%= f.label :肩書き %>
    <%= f.text_field :position, class: 'form-control' %>

    <%= f.label :自己紹介 %>
    <%= f.text_area :s_introduction, class: 'form-control' %>
    
    <div class="gravatar_edit">
     <%= gravatar_for @user %>
     <a href="http://gravatar.com/emails" target="_blank">画像編集</a>
    </div>
    </div>


    <%= f.submit "更新する", class: "btn btn-primary" %>
   <% end %>
 </div>
</div>


出来上がった画面
f:id:Jyoko:20161008114826g:plain
登録時に入力した情報は引き継がれています。
細かいCSS部分は割愛させていただきますが、元々の登録情報と、新しく追加したカラムを左右分けてみました。


続いて更新部分。
editと同様、UsersControllerにupdateアクションを追加します。
app/controllers/users_controller.rb

def update
    if @user.update_attributes(user_params)
      redirect_to @user
      flash[:success] = "プロフィールを更新しました" 
    else
      render'edit'
    end
end

更新ができたらユーザー画面へ、それ以外はedit画面へ飛びます。

更新後、ユーザー画面に表示する内容がまだできていないので、showページに情報追加します。

<% provide(:title, @user.nickname)%>
<div class="row">
  <aside class="col-md-4">
    <section class="user_info">
      <h1>
        <%= gravatar_for @user %>
        <h2><%= @user.nickname %></h2>
        <h3><%= @user.position %></h3>
      </h1>
    </section>
  </aside>
</div>

とりあえずは、
・画像
・ニックネーム
・肩書き
をここに表示します。
肩書き・自己紹介を入力して更新を押すと
f:id:Jyoko:20161008114711g:plain

画像・ニックネーム・肩書きのみが表示されます。
f:id:Jyoko:20161008114750g:plain

最後に、過入力による負荷を避けるため、バリデーションも追加しておきます。

validates :position, length: { maximum: 30 }
validates :s_introduction, length: { maximum: 300 }

・肩書きは30文字以下
・自己紹介は300文字以下
※とりあえずこれだけ設定し、状況に合わせて修正します。

仮に肩書きを30文字以上入れてみると…
f:id:Jyoko:20161008120558g:plain
エラーのアラートが流れ、編集画面に戻されます。

ざっくりですが、プロフィールの編集・更新部分が出来上がりました。
また日本語化等等、細かいところは修正しながら進めていきます。