↓↓クリックして頂けると励みになります。
【14 | Active Storageの利用】 << 【ホーム】 >> 【16 | ページ作成】
Ruby on Railsでデータベーステーブルに新しいカラムを追加する方法はいくつかありますが、マイグレーションを使用する方法が一番簡単です。
まず、ターミナルでコマンドを実行して新しいマイグレーションファイルを生成し、最後にマイグレーションを実行してデータベースを更新します。
今回は、電話番号を入力するカラムをユーザーテーブルに追加します。
コマンド
rails g migration AddExtraFieldsToUser phone_number:string
マイグレーションを実行して、データベースを更新します。
コマンド マイグレーション
rails db:migrate
電話番号カラムが追加されました。
電話番号カラムにデータを追加できるようにするには、コントローラーのpermitにカラムを追加する必要があります。
記述追加 app\controllers\application_controller.rb(8行目)
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
<div class="container"> <div class="row gx-5"> <div class="col"> <div class="card w-100 mb-3"> <div class="card-body"> <h5 class="card-title text-danger h3"><strong><span class="ttl">ユーザ情報編集</span></strong></h5> <p class="card-text">変更があったら更新しましょう。</p> <%= 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="mb-3"> <label for="exampleInputEmail1" class="ttl">氏名</label> <%= f.text_field :full_name, autofocus: true, placeholder: "氏名", class: "form-control" %> <div id="emailHelp" class="form-text">氏名</div> </div> <div class="mb-4"> <label for="exampleInputEmail1" class="ttl">Eメールアドレス</label> <%= f.email_field :email, autofocus: true, placeholder: "Eメールアドレス", class: "form-control" %> <div id="emailHelp" class="form-text">あなたのメールは他の誰とも共有しません。</div> </div> <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %> <div>現在、次の確認を待っています：<%= resource.unconfirmed_email %></div> <% end %> <div class="mb-5"> <label for="phone_number">電話番号</label> <%= f.text_field :phone_number, autofocus: true, placeholder: "電話番号", class: "form-control", id: "phone_number" %> </div> <div class="mb-3"> <label for="password" class="ttl">変更パスワード</label> <%= f.password_field :password, autocomplete: "off", placeholder: "パスワード", class: "form-control", id: "password" %> <div id="emailHelp" class="form-text">強力なセキュリティを確保するために、最低でも6文字以上のパスワードが必要です。</div> </div> <div class="mb-5"> <label for="confirmation" class="ttl">変更パスワード（確認）</label> <%= f.password_field :password_confirmation, autocomplete: "off", placeholder: "確認パスワード", class: "form-control", id: "confirmation" %> <div id="emailHelp" class="form-text">パスワード確認： 確認のため、入力したパスワードをもう一度入力してください。同じパスワードを入力する必要があります。</div> </div> <div class="mb-2"> <%= f.submit "更新", class: "btn btn-danger w-100" %> </div> <% end %> <div class="mb-5"> <%= link_to "戻る", :back, class: "btn btn-secondary w-100" %> </div> </div> </div> </div> </div> </div>
ブラウザで確認します。
電話番号が追加できるかどうか動作を確認してください。
ブラウザ確認
http://localhost:3000/profile
ダッシュボードページを編集します。
app\views\users\dashboard.html.erb62行目
<div class="container mt-4 mb-4"> <div class="row"> <!-- 左側 --> <div class="col-md-4"> <div class="card"> <div class="card-body"> <!-- アバター --> <%= image_tag avatar_url(current_user), class: "img-fluid img-thumbnail rounded-pill" %> <h4 style="margin-left: 5.5rem;"><%= current_user.full_name %></h4> <!-- 画像アップロードボタン --> <button class="btn btn-info text-light w-100" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="false" aria-controls="collapse1"> <i class="fa-solid fa-cloud-arrow-up"></i>アバター画像アップロード </button> <div class="collapse" id="collapse1"> <div class="card card-body"> <%= 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> </div> <hr/> <!-- アカウント登録日 --> 登録：<%= I18n.l(current_user.created_at, format: :full_date) %> <hr/> <!-- ステータス --> <div type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapse2"> <% if current_user.status %> <span class="btn btn-success"><i class="toggle far fa-edit"></i>オンライン</span> <% else %> <span class="btn btn-secondary"><i class="toggle far fa-edit"></i>オフライン</span> <% end %> </div> <div class="collapse" id="collapse2"> <div class="card card-body"> <%= form_for :user, url: users_edit_url(current_user), action: :update, method: :post do |f| %> <%= f.select(:status, options_for_select([["オンライン", true], ["オフライン", false]]), {}, {class: "custom-select"}) %> <%= f.submit "保存", class: "btn btn-dark" %> <% end %> </div> </div> <hr/> <!-- 自己紹介 --> <div class="h5"><%= current_user.about %></div> <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="false" aria-controls="collapse3"> 自己紹介編集 </button> <div class="collapse" id="collapse3"> <div class="card card-body"> <%= form_for :user, url: users_edit_url(current_user), action: :update, method: :post do |f| %> <div><%= f.text_area :about, autofocus: true, autocomplete: 'form'%></div> <%= f.submit "保存", class: "btn btn-dark" %> <% end %> </div> </div> <hr/> <!-- 電話番号 --> <div> <% if !current_user.phone_number.blank? %> <span class="pull-right icon-babu"><i class="far fa-check-circle" style="color:green;"></i></span> 電話番号 <% else %> <div class="text-danger">電話番号が登録されていません</div> <%= link_to "電話番号登録", edit_user_registration_path, class: "btn btn-danger" %> <% end %> </div> </div> </div> </div> <!-- 右側 --> <div class="col-md-8"> <!-- お知らせ --> <div class="card"> <div class="card-body"> <h5 class="card-title">お知らせ</h5> <h6 class="card-subtitle mb-2 text-body-secondary"> </h6> <p class="card-text"> </p> </div> </div> <!-- 登録している部屋 --> <div class="card"> <div class="card-body"> <h5 class="card-title">登録している部屋</h5> <h6 class="card-subtitle mb-2 text-body-secondary"> </h6> <p class="card-text"> </p> </div> </div> </div> </div> </div>
ブラウザ確認
http://localhost:3000/dashboard
【14 | Active Storageの利用】 << 【ホーム】 >> 【16 | ページ作成】
↓↓クリックして頂けると励みになります。
