空き部屋を登録・予約・決済できるWebサイトを作成する
ランキング参加中プログラミング | 41 | メッセージと会話 ホーム] 通知機能を実装します。 コマンド rails g model Notification content user:references コマンド rails g migration AddUnreadToUser unread:bigint 記述追加 db\migrate\20200729003608_a…
ランキング参加中プログラミング | 40 | 予約確認メール ホーム] >> | 42 | 通知 メッセージと会話のモデルを作成していきます。 コマンド rails g model Conversation sender:references receiver:references コマンド rails g model Message content:text …
ランキング参加中プログラミング | 39 | クレジットカード決済 ホーム] >> | 41 | メッセージと会話 「app\mailers」フォルダに「reservation_mailer.rb」ファイルを新規作成してください。 app\mailers\reservation_mailer.rb(新規作成したファイル) class …
ランキング参加中プログラミング | 38 | Stripe Connectの実装 ホーム] >> | 40 | 予約確認メール 「app\controllers\reservations_controller.rb」ファイルの記述を更新します。 １．5行目の「create()」メソッドの記述を以下のように更新します。 def crea…
ランキング参加中プログラミング | 37 |Stripeによるクレジットカード決済の実装 ホーム] >> | 39 | クレジットカード決済 部屋を登録したホストに宿泊料金の８０％が自動で支払われるように設定します。 このセッションでは接続のみを扱い、次のセッション…
ランキング参加中プログラミング | 36 |ページネーションの実装 ホーム] >> | 38 | Stripe Connectの実装 Stripe（ストライプ）を使ってでクレジット決済ができるようにします。 まずは以下の手順でStripeのアカウントを取得してください。 mrradiology.hate…
ランキング参加中プログラミング | 35 |フルカレンダーの実装 ホーム] >> | 37 |Stripeによるクレジットカード決済の実装 検索ページにページング機能をつけます。 「GemFile」に以下の記述を追加します。 記述追加 GemFile(85行目) gem 'kaminari' GemFile …
ランキング参加中プログラミング | 34 |ホームページとAJAX検索 ホーム] >> | 36 |ページネーションの実装 フルカレンダーをインストールします。 コマンド 一文です。 yarn add @fullcalendar/core@5.9.0 @fullcalendar/daygrid@5.9.0 @fullcalendar/intera…
ランキング参加中プログラミング | 33 |レビューの実装 ホーム] >> | 35 |フルカレンダーの実装 「app\assets\images」フォルダに「home」フォルダを新規作成してください。作成した「home」フォルダの中に何でも良いのでホームページの背景画像となる「back…
ランキング参加中プログラミング | 32 |予約確認ページの実装 ホーム] >> | 34 |ホームページとAJAX検索 「star-on.png」「star-off.png」「star-half.png」の３ファイルを「app/assets/images」フォルダにコピーしておいてください。 画像は下記のリンクに…
ランキング参加中プログラミング | 31 |予約フォームの実装 ホーム] >> | 33 |レビューの実装 宿泊者（ゲスト）の予約確認ページを作成します。 記述追加 app\controllers\reservations_controller.rb(26行目) def your_trips @trips = current_user.reserva…
ランキング参加中プログラミング | 30 | jQuery日付ピッカー ホーム] >> | 32 |予約確認ページの実装 「app\controllers\rooms_controller.rb」ファイルを編集します。 １．記述追加 app\controllers\rooms_controller.rb(71行目) # 予約 開始日のAJAX def p…
ランキング参加中プログラミング | 29 | 予約の実装（コントローラーとビュー作成） ホーム] >> | 31 |予約フォームの実装 jqueryはすでにインストールされているので、「jquery-ui」をインストールします。 コマンド yarn add jquery-ui 記述追加 config\we…
ランキング参加中プログラミング | 28 | 予約モデルの実装 ホーム] >> | 30 | jQuery日付ピッカー 「app\controllers」フォルダに「reservations_controller.rb」ファイルを新規作成します。 app\controllers\reservations_controller.rb(新規作成したファイ…
ランキング参加中プログラミング | 27 | Google認証の実装 ホーム] >> | 29 | 予約の実装（コントローラーとビュー作成） コマンド １文です。 rails g model Reservation user:references room:references start_date:datetime end_date:datetime price:big…
ランキング参加中プログラミング | 26 | Facebook認証の実装 ホーム] >> | 28 | 予約モデルの実装 Google Cloud PlatformにGoogleアカウントでログインしてAPIキーを取得してください。 手順は以下の通りにお願いします。 mrradiology.hatenablog.jp GemFile…
ランキング参加中プログラミング | 25 | Googleマップ ホーム] >> | 27 | Google認証の実装 まずはFacebook for Developersでアカウントを作成しなければなりません。 developers.facebook.com アカウント、アプリの作成は以下の手順でお願いします。 mrradi…
ランキング参加中プログラミング | 24 | 写真カルーセル表示 ホーム] >> | 26 | Facebook認証の実装 Google Cloud PlatformにGoogleアカウントでログインしてAPIキーを取得してください。 手順は以下の通りにお願いします。 mrradiology.hatenablog.jp 記述…
ランキング参加中プログラミング | 23 | アクションテキスト ホーム] >> | 25 | Googleマップ 「app\assets\images」フォルダに「blank.jpg」「icon_add.png」ファイルを保存しておいてください。 記述追加 app\helpers\application_helper.rb（13行目） def…
ランキング参加中プログラミング | 22 | AmazonS3 ホーム] >> | 24 | 写真カルーセル表示 アクションテキストをインストールします。 コマンド rails action_text:install マイグレーション適用 rails db:migrate 「app\models\room.rb」ファイルを以下の内…
ランキング参加中プログラミング | 21 | 複数の写真をアップロード ホーム] >> | 23 | アクションテキスト herokuにアプリケーションをデプロイすると画像をローカルに保存することができません。 それに対応するため、アップロードした画像を全てアマゾンS3…
ランキング参加中プログラミング | 20 | 部屋ビューの作成 ホーム] >> | 22 | AmazonS3 複数の写真をアップロードできるようにします。 まずは「doropzone」のインストールをします。 コマンド yarn add dropzone@5.5.1 「app/javascript/stylesheets/applic…
ランキング参加中プログラミング | 19 | 部屋コントローラーの作成 ホーム] >> | 21 | 複数の写真をアップロード app\views\room\new.html.erb <br/> <br/> <div class="row"> <div class="col-sm-9" style="margin:0 auto;"> <div class="card text-center"> <h4 class="card-header text-center text-light bg-primary">部屋の新規登録</h4> </div></div></div></br/></br/>
ランキング参加中プログラミング | 18 | 部屋モデルの作成 ホーム] >> | 20 | 部屋ビューの作成 コマンド １文です。 rails g controller Rooms index new create listing pricing description photo_upload amenities location update app\controllers\room…
ランキング参加中プログラミング | 17 | プロフィールページ ホーム] >> | 19 | 部屋コントローラーの作成 コマンド 長いですが全部つながっています。１文です。 rails g model Room home_type:string room_type:string accommodate:bigint bed_room:bigint…
ランキング参加中プログラミング | 16 | 電話番号カラム追加 ホーム] >> | 18 | 部屋モデルの作成 ユーザープロフィールページを作成します。 「app\controllers\users_controller.rb」ファイルに以下のメソッドを追加します。 記述追加 app\controllers\use…
ランキング参加中プログラミング | 15 | 画像アップロード ホーム] >> | 17 | プロフィールページ コマンド rails g migration AddExtraFieldsToUser phone_number:string コマンド マイグレーション rails db:migrate 電話番号カラムが追加されました。 電…
ランキング参加中プログラミング | 14 | Githubにコミットする用 ホーム] >> | 16 | 電話番号カラム追加 アバター画像をアップロードできるようにします。 コマンド rails g migration AddImageColumsToUser image コマンド rails active_storage:install コ…
ランキング参加中プログラミング | 13 | アイコン(Font Awesome)の利用 ホーム] >> | 15 | 画像アップロード 今まで行なった変更をGithubにファイル送信してコミットします。 Githubにコミットしておけば、好きなバージョンに巻き戻したり出来ますし、バック…
ランキング参加中プログラミング | 12 | Googleフォント ホーム] >> | 14 | Githubにコミットする 「Font Awesome」のアイコンを使えるようにします。 fontawesome.com 「app\views\layouts\application.html.erb」ファイルに以下の記述を追加します。 記述…
