戻る

Rails5.0


民泊サイトの構築 Rails5.0

  (0)
2,000円

タスク3-1   プロフィール

このタスクについて


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




ユーザプロフィールページを作成します。


コマンド
rails g migration AddExtraFieldsToUser phone_number:string description:text


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


電話番号と詳細フィールドが追加されました。


フィールド追加



記述追加 config\routes.rb(8行目)
resources :users, only: [:show]



config\routes.rb
 
Rails.application.routes.draw do 
  #ルートをpages#homeに設定 
  root 'pages#home' 
  get 'pages/home' 
  resources :users, only: [:show] 
  devise_for :users 
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html 
end 



「app\controllers」フォルダに「users_controller.rb」ファイルを新規作成して下さい。


app\controllers\users_controller.rb(新規作成したファイル)
 
class UsersController < ApplicationController 
  def show 
    @user = User.find(params[:id]) 
  end 
end 



「app\views」フォルダに「users」フォルダを新規作成します。
さらに作成した「users」フォルダに「show.html.erb」ファイルを新規作成します。



app\views\users\show.html.erb(新規作成したファイル)
 
<div class="row"> 
  <div class="col-md-3"> 
    <div class="center"> 
      <%= image_tag @user.gravatar_url, class: "avatar-full" %> 
    </div> 
    <div class="panel panel-default"> 
      <div class="panel-heading" style="text-align: center;"><%= @user.fullname %></div> 
      <br/> 
      <div class="center"> 
        <%= @user.description %> 
       </div> 
       <hr/> 
      <div class="panel-body"> 
        <ul class="sidebar-list"> 
          <% if @user.confirmation_token %> 
            <li>Emailアドレス<span class="pull-right icon-babu"><i class="fa fa-check-circle-o"></i></span></li> 
          <% end %> 
          <li>電話番号<span class="pull-right icon-babu"><i class="fa fa-check-circle-o"></i></span></li> 
        </ul> 
      </div> 
    </div> 
  </div> 
  <div class="col-md-9"> 
 
    <br/> 
    <h4><%= @user.fullname %>さんが登録しているお部屋()</h4><br/> 
    <br/> 
  </div> 
</div> 



ブラウザ確認
数字のところはユーザidを入れてください。
http://localhost:3000/users/2




プロフィールページ



記述更新 app\views\devise\registrations\edit.html.erb
大幅に記述を変更していますのでコードをコピーしてファイルの内容を置き換えてください。
 
<div class="row"> 
  <div class="col-md-3"> 
    <ul class="sidebar-list"> 
      <li class="sidebar-item"><%= link_to "ユーザ登録情報の編集", edit_user_registration_path, class: "sidebar-link active" %></li> 
    </ul> 
    <br/> 
    <%= link_to "登録情報を確認する", user_path(current_user.id), class: "btn btn-default" %> 
  </div> 
  <div class="col-md-9 text-center"> 
    <div class="panel panel-default"> 
      <div class="panel-heading">登録情報 追加・修正</div> 
      <div class="panel-body"> 
        <div class="container"> 
          <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %> 
            <%= render 'shared/devisemes' %> 
            <div class="form-group"> 
              <%= f.text_field :fullname, autofocus: true, placeholder: "氏名", class: "form-control" %> 
            </div> 
            <div class="form-group"> 
              <%= f.text_field :phone_number, autofocus: true, placeholder: "電話番号", class: "form-control" %> 
            </div> 
            <div class="form-group"> 
              <%= f.text_area :description, rows: 5, cols: 25, autofocus: true, placeholder: "説明", class: "form-control" %> 
            </div> 
            <div class="form-group"> 
              <%= f.email_field :email, autofocus: true, placeholder: "メールアドレス", class: "form-control" %> 
            </div> 
            <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %> 
              <div>現在、次の確認を待っています: <%= resource.unconfirmed_email %></div> 
            <% end %> 
            <div class="form-group"> 
              <%= f.password_field :password, autocomplete: "off", placeholder: "パスワード (変更しない場合は空白のまま)", class: "form-control" %> 
            <div class="form-group"> 
              <%= f.password_field :password_confirmation, autocomplete: "off", placeholder: "確認(変更しない場合は空白のまま)", class: "form-control" %> 
            </div> 
            <div class="actions"> 
              <%= f.submit "保存する", class: "btn btn-normal btn-block" %> 
            </div> 
          <% end %> 
        </div> 
      </div> 
    </div> 
  </div> 
</div> 



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


記述追加 app\controllers\application_controller.rb(12行目)
devise_parameter_sanitizer.permit(:account_update, keys: [:fullname, :phone_number, :description])



app\controllers\application_controller.rb
 
class ApplicationController < ActionController::Base 

  protect_from_forgery with: :exception 

  #devise_controllerが読み込まれたら 
  before_action :configure_permitted_parameters, if: :devise_controller? 

  protected 
  #フィールドの更新を許可 
  def configure_permitted_parameters 
    devise_parameter_sanitizer.permit(:sign_up, keys: [:fullname]) 
    devise_parameter_sanitizer.permit(:account_update, keys: [:fullname, :phone_number, :description]) 
  end 
end 



「app\controllers」フォルダに「registrations_controller.rb」ファイルを新規作成します。


app\controllers\registrations_controller.rb(新規作成したファイル)
 
class RegistrationsController < Devise::RegistrationsController 

  protected 
    def update_resource(resource, params) 
      resource.update_without_password(params) 
    end 
end 



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

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

民泊サイトの構築 Rails5.0

2,000円

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

タスク数: 136