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

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

Rails6.0 | 民泊サイトの構築(改良版)| 16 | 電話番号カラム追加 | for MacOSX



| 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>&nbsp;&nbsp;電話番号登録済
                        <% 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 | 電話番号カラム追加

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

関連記事(外部サイト)