| 15 | 画像アップロード << [ホーム] >> | 17 | プロフィールページ
コマンド
rails g migration AddExtraFieldsToUser phone_number:stringコマンド マイグレーション
rails db:migrate電話番号カラムが追加されました。
電話番号カラムに追加できるよう、permitに電話番号の項目追加します。
記述追加 app\controllers\application_controller.rb(9行目)
devise_parameter_sanitizer.permit(:account_update, keys: [:full_name, :phone_number])
app\controllers\application_controller.rb
class ApplicationController < ActionController::Base before_action :configure_permitted_parameters, if: :devise_controller? protected def configure_permitted_parameters devise_parameter_sanitizer.permit(:sign_up, keys: [:full_name]) devise_parameter_sanitizer.permit(:account_update, keys: [:full_name, :phone_number]) end def after_sign_in_path_for(resource) dashboard_path end end
「app\views\devise\registrations\edit.html.erb」ファイルを更新します。
app\views\devise\registrations\edit.html.erb
<br/> <br/> <div class="row"> <div class="col-sm-6" style="margin:0 auto;"> <div class="card text-center"> <h4 class="card-header text-center bg-warning"><font style="font-size: 1.4rem"><b>登録情報の編集</font> <font style="font-size: 1.1rem">Edit registration information</b></font></h4> <div class="card-body"> <br/> <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %> <%= render "devise/shared/error_messages", resource: resource %> <div class="form-group"> <div class="text-left text-info"> <label for="full_name">氏名 Full name</label> </div> <%= f.text_field :full_name, autofocus: true, placeholder: "氏名 full name", class: "form-control", id: "full_name" %> </div> <div class="text-left text-info"> <label for="mail_address">メールアドレス Mail address</label> </div> <div class="form-group"> <%= f.email_field :email, autofocus: true, placeholder: "メールアドレス mail address", class: "form-control", id: "mail_address" %> </div> <div class="text-left text-info"> <label for="phone_number">電話番号 Phone_number</label> </div> <div class="form-group"> <%= f.text_field :phone_number, autofocus: true, placeholder: "電話番号 phone number", class: "form-control", id: "phone_number" %> </div> <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %> <div>現在、次の確認を待っています：<%= resource.unconfirmed_email %></div> <% end %> <br/> <div class="text-left text-info"> <label for="password">変更するパスワード(6文字以上)<br/> Password to change(6 characters or more)</label> </div> <div class="form-group"> <%= f.password_field :password, autocomplete: "off", placeholder: "変更するパスワード Password to change", class: "form-control", id: "password" %> </div> <div class="form-group"> <%= f.password_field :password_confirmation, autocomplete: "off", placeholder: "変更するパスワード（もう一度） Change password again", class: "form-control" %> </div> <br/> <br/> <div class="actions"> <%= f.submit "更新する update", class: "btn btn-warning btn-block" %> </div> <% end %> <%= link_to "戻る back", :back, class: "btn btn-outline-info btn-block" %> </div> </div> </div> </div> <br/>
ブラウザ確認
http://localhost:3000/profile
ダッシュボードページを編集します。
app\views\users\dashboard.html.erb
<div class="row" style="margin: 20px;"> <!-- 左側 --> <div class="col-4"> <div class="card"> <div class="card-body"> <!-- アバター --> <%= image_tag avatar_url(current_user), class: "img-fluid img-thumbnail rounded-pill" %> <!-- 画像アップロードボタン --> <div class="mx-auto" style="text-align: center;"> <h5 class="card-title btn-block" style="margin-left: 15px; margin-top: 10px;"><%= current_user.full_name %></h5> <%= current_user.about %> </div> <br/> <a data-toggle="collapse" href="#collapseExample3" role="button" aria-expanded="false" aria-controls="collapseExample3" style="text-decoration: none;"> <div> <strong> <button type="button" class="btn btn-info btn-block"><i class="fas fa-upload"></i>アバター画像アップロード<br/> Avatar image upload</button> </strong> </a> <br/> <div class="collapse" id="collapseExample3"> <%= form_for :user, url: users_edit_url(current_user), action: :update, method: :post do |f| %> <%= f.file_field :avatar, class: "input-group-text", onchange: "this.form.submit();" %> <% end %> </div> <br/> </div> <!-- オンラインステータス --> <a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"> <div style="margin-left: 20px;"> <strong> <% if current_user.status %> <span class="btn btn-success btn-sm"><i class="toggle far fa-edit"></i>オンライン online</span> <% else %> <span class="btn btn-danger btn-sm"><i class="toggle far fa-edit"></i>オフライン offline</span> <% end %> </strong> </a> <div class="collapse" id="collapseExample"> <div class="card card-body" style="width:16rem;"> <%= form_for :user, url: users_edit_url(current_user), action: :update, method: :post do |f| %> <%= f.select(:status, options_for_select([["オンライン online", true], ["オフライン offline", false]]), {}, {class: "custom-select"}) %> <br/> <br/> <%= f.submit "保存", class: "btn btn-outline-info" %> <% end %> </div> </div> </div> <br/> <!-- 自己紹介 --> <a data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample2"> <div style="margin-left: 20px;"> <span class="btn btn-primary btn-sm"><i class="toggle far fa-edit"></i>コメント comment</span> </a> <div class="collapse" id="collapseExample2"> <div class="card card-body" style="width: 16rem;"> <%= form_for :user, url: users_edit_url(current_user), action: :update, method: :post do |f| %> <%= f.text_area :about, autofocus: true, autocomplete: 'form'%> <br/> <br/> <%= f.submit "保存", class: "btn btn-outline-info" %> <% end %> </div> </div> <div class="mx-auto" style="margin-top: 1rem; text-align: right;"> <%= l(current_user.created_at, format: :long) %> </div> </div> <!-- 電話番号 --> <div class="mx-auto" style="margin-top: 1rem; text-align: right;"> <% if !current_user.phone_number.blank? %> <span class="pull-right icon-babu" style="margin-left: 20px;"><i class="far fa-check-circle" style="color:#528fff;"></i></span> 電話番号登録済 <% else %> <span style="margin-left: 20px;">電話番号を登録していません</span> <% end %> </div> </div> </div> </div> <!-- 右側 --> <div class="col-8"> <!-- お知らせ --> <div class="card"> <div class="card-header"> お知らせ </div> <div class="card-body"> <h5 class="card-title"></h5> <p class="card-text"></p> </div> </div> <br/> <!-- 登録しているお部屋 --> <div class="card"> <div class="card-header"> 登録しているお部屋() </div> <div class="card-body"> <div class="row"> </div> </div> </div> </div> </div>
ブラウザ確認
http://localhost:3000/dashboard
↓↓クリックして頂けると励みになります。
| 15 | 画像アップロード << [ホーム] >> | 17 | 電話番号カラム追加
