学生向けプログラミング入門 | 無料

学生向けにプログラミングを無料で解説。Java、C++、Ruby、PHP、データベース、Ruby on Rails, Python, Django

Rails7.1 | 民泊予約アプリ作成 | 15 | カラムの追加

↓↓クリックして頂けると励みになります。



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

PCレイアウト
PCレイアウト


モバイルレイアウト
モバイルレイアウト



ダッシュボードページを編集します。


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>&nbsp;&nbsp;電話番号
                    <% 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 | ページ作成





↓↓クリックして頂けると励みになります。

YAE C5 CLINIC(札幌美容クリニック)

関連記事(外部サイト)