戻る

Rails6.0


民泊サイトの構築 Rails6.0

  (0)
3,000円

タスク3-3   電話番号カラム追加

このタスクについて


タスクの内容を一部抜粋します。
プロジェクトを購入していただくとこのタスクの内容の全てを読みやすい表示で見ることができます。
プログラムコードが色分けされて見やすくなります。
プログラムコードに行番号が付きます。
本文が色分けされて見やすくなります。
そしてこのアプリケーションのフルコードをダウンロードすることが可能になります。




コマンド
rails g migration AddExtraFieldsToUser phone_number:string


コマンド マイグレーション
rails db:migrate


電話番号カラムが追加されました。


電話番号カラム追加




ストロングパラメータに電話番号の項目追加します。


記述追加 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(17行目)
 <div class="field"> 
  <%= f.label :電話番号, class: "label" %> 
  <%= f.text_field :phone_number, autofocus: true, autocomplete: "phone_number", class: "input" %> 
</div> 



app\views\devise\registrations\edit.html.erb
 
<section class="hero is-dark is-fullheight"> 
  <div class="hero-body"> 
    <div class="container"> 
      <div class="columns is-centered"> 
        <div class="column is-6-table is-6-desktop is-6-widescreen"> 
          <div class="box"> 
            
            <div class="field has-text-centered"> 
              <strong>ユーザ登録情報編集</strong> 
            </div> 
            <%= 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="field"> 
                <%= f.label :氏名, class: "label" %> 
                <%= f.text_field :full_name, autofocus: true, autocomplete: "full_name", class: "input" %> 
              </div> 
              <div class="field"> 
                <%= f.label :電話番号, class: "label" %> 
                <%= f.text_field :phone_number, autofocus: true, autocomplete: "phone_number", class: "input" %> 
              </div> 
              <div class="field"> 
                <%= f.label :メールアドレス, class: "label" %> 
                <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "input" %> 
              </div> 
              <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %> 
                <div>現在、確認を待っています: <%= resource.unconfirmed_email %></div> 
              <% end %> 
              <div class="field"> 
                <%= f.label :パスワード, class: "label"  %> <i>(変更しない場合は空白のままにします)</i> 
                <%= f.password_field :password, autocomplete: "new-password", class: "input" %> 
                <% if @minimum_password_length %> 
                  <br /> 
                  <em><%= @minimum_password_length %> 文字以上</em> 
                <% end %> 
              </div> 
              <div class="field"> 
                <%= f.label :確認, class: "label"  %> 
                <%= f.password_field :password_confirmation, autocomplete: "new-password", class: "input" %> 
              </div> 
              <div class="field"> 
                <%= f.submit "更新する", class: "button is-danger is-fullwidth" %> 
              </div> 
            <% end %> 
            <%= link_to "戻る", :back, class: "button is-fullwidth m-t-10" %> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
</section> 



ブラウザ確認
http://localhost:3000/profile



電話番号フィールド追加




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


記述追加 app\views\users\dashboard.html.erb(100行目)
 <% if !current_user.phone_number.blank? %> 
<span class="pull-right icon-babu"><i class="far fa-check-circle" style="color:#528fff;"></i></span>&nbsp;&nbsp;電話番号 
<% end %> 



この続きはプロジェクトを購入していただくことで見ることができます。
プロジェクトを購入していただくとこのタスクの内容の全てを読みやすい表示で見ることができます。
プログラムコードが色分けされて見やすくなります。
プログラムコードに行番号が付きます。
本文が色分けされて見やすくなります。
そしてプロジェクトを購入するとこのアプリケーションのフルコードをダウンロードすることができます。

まだレビューはありません。

民泊サイトの構築 Rails6.0

3,000円

Rails6.0で民泊サイトを構築します。
ホストは部屋を登録し、ゲストは宿泊予約できます。
ゲストはクレジットカードで支払いをし、ホストには料金の80%が自動で口座に振り込まれます。
Googleマップによる表示、AJAX検索、日付カレンダーによる予約ができます。
リアルタイムメッセージにより連絡がとれます。
予約確認メールの送信も可能。
写真のアップロード機能、アマゾンS3の利用方法も解説。
レビュー機能の実装方法解説。
フルカレンダー による予約管理。
HEROKUへのデプロイ方法を解説。
フルコードのダウンロード可能。

タスク数: 128