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

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

Bootstrap

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 94 | Bootstrap | 通知

[93]Bootstrap | メッセージと会話 | 会話表示[ホームに戻る] 「50 | 通知」の内容をBootstrapの記述に変更します。 コマンド rails g model Notification content user:references コマンド rails g migration AddUnreadToUser unread:bigint 記述追加 db…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 93 | Bootstrap | メッセージと会話 | 会話表示

[92]Bootstrap | メッセージと会話 | コントローラとビュー作成[ホームに戻る] >> [94]Bootstrap | 通知 「48 | メッセージと会話 | 会話表示」の内容をBootstrapに変更します。 会話表示できるようにします。 「app\controllers」フォルダに「conversat…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 92 | Bootstrap | メッセージと会話 | コントローラとビュー作成

[91]Bootstrap | ページネーション[ホームに戻る] >> [93]Bootstrap | メッセージと会話 | 会話表示 「47 | メッセージと会話 | コントローラとビュー作成」の内容をBootstrapの記述に変更します。 メッセージコントローラを作成します。 コマンド rails…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 91 | Bootstrap | ページネーション

[90]Bootstrap | クレジットカード決済 | Stripe(ストライプ)コネクト[ホームに戻る] >> [92]Bootstrap | メッセージと会話 | コントローラとビュー作成 「44 | ページネーション」の内容をBootstrapの記述に変更します。 検索ページにページング機能…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 90 | Bootstrap | クレジットカード決済 | Stripe(ストライプ)コネクト

[89]Bootstrap | クレジットカード決済 | Stripe(ストライプ)[ホームに戻る] >> [91]Bootstrap | ページネーション 「42 | クレジットカード決済 | Stripe(ストライプ)コネクト」をBootstrapの記述に書き換えます。 お部屋を登録したホストに宿泊料…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 89 | Bootstrap | クレジットカード決済 | Stripe(ストライプ)

[88]Bootstrap | 承認予約[ホームに戻る] >> [90]Bootstrap | クレジットカード決済 | Stripe(ストライプ)コネクト 「41 | クレジットカード決済 | Stripe(ストライプ)」をBootstrapの記述で書き換えます。Stripe(ストライプ)を使ってでクレジット…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 88 | Bootstrap | 承認予約

[87]Bootstrap | jQueryスライダー[ホームに戻る] >> [89]Bootstrap | クレジットカード決済 | Stripe(ストライプ) 「40 | 承認予約」をBootstrapの記述に書き換えます。 設定部分は省略します。 app\views\rooms\new.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">お…</h4></div></div></div></br/></br/>

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 87 | Bootstrap | jQueryスライダー

[86]Bootstrap | AJAX検索[ホームに戻る] >> [88]Bootstrap | 承認予約 「38 | jQueryスライダー」をBootstrapの記述に書き換えます。 記述追加 app\javascript\packs\application.js 「require("jquery-ui/ui/widgets/slider");」の記述を14行目に追加 …

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 86 | Bootstrap | AJAX検索

[85]Bootstrap | ホームページ[ホームに戻る] >> [87]Bootstrap | jQueryスライダー 「37 | AJAX検索」をBootstrapの記述に書き換えます。 設定部分は省略します。 記述追加 app\controllers\pages_controller.rb 「search()」メソッドの実装 class Page…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 85 | Bootstrap | ホームページ

[84]Bootstrap | レビュー[ホームに戻る] >> [86]Bootstrap | AJAX検索 「36 | ホームページ」をBootstrapで書き換えます。 「app\assets\images」フォルダに「home」フォルダを新規作成してください。作成した「home」フォルダの中に何でも良いのでホー…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 84 | Bootstrap | レビュー

[83]Bootstrap | ページ修正[ホームに戻る] >> [85]Bootstrap | ホームページ 「35 | レビュー」をBootstrapの記述に書き換えます。 「raty-js」をインストールします。 コマンド yarn add raty-js@2.9.0 「app\javascript\packs\application.js」ファイ…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 83 | Bootstrap | ページ修正

[82]Bootstrap | 予約確認ページ[ホームに戻る] >> [84]Bootstrap | レビュー 「34 | ページ修正」をBootstrapの記述に書き換えます。 プロフィールページを修正していきます。 記述追加 app\controllers\users_controller.rb 「show()」メソッドに「@ro…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 82 | Bootstrap | 予約確認ページ

[81]Bootstrap | 予約フォーム[ホームに戻る] >> [83]Bootstrap | ページ修正 「33 | 予約確認ページ」をBootstrapの記述に変更します。 宿泊者(ゲスト)の予約確認ページを作成します。 記述追加 app\controllers\reservations_controller.rb(26行目) …

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 81 | Bootstrap | 予約フォーム

[80]Bootstrap |jQuery日付ピッカー[ホームに戻る] >> [82]Bootstrap | 予約確認ページ 「32 | 予約フォーム」をBootstrapの記述に変更します。 設定部分は省略します。 記述更新 app\views\reservations\_form.html.erb コードをコピーして内容を置き換…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 80 | Bootstrap | jQuery日付ピッカー

[79]Bootstrap |予約コントローラとビュー[ホームに戻る] >> [81]Bootstrap | 予約フォーム 「31 | jQuery日付ピッカー」をBootstrapの記述に変更します。 jqueryはすでにインストールされているので、「jquery-ui」をインストールします。 コマンド yar…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 79 | Bootstrap | 予約コントローラとビュー

[78]Bootstrap |ログイン認証における書き換え[ホームに戻る] >> [80]Bootstrap | jQuery日付ピッカー 「30 | 予約コントローラとビュー」におけるBootstrapの書き換えを行います。 記述追加 app\views\rooms\show.html.erb 「」の記述追加(199行目) <div class="row" style="margin-left: 10px; margin-right: 10px;"> <div class="col-md-11"></div></div>…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 78 | Bootstrap | ログイン認証における書き換え

[77]Bootstrap |Googleマップ[ホームに戻る] >> [79]Bootstrap | 予約コントローラとビュー 「26 | Facebook認証」「27 | Google認証」について、Bootstrapへの書き換えを行います。 設定は省略します。 app\views\devise\sessions\new.html.erb <br/> <br/> <div class="row"> <div class="col-sm-6" style="margin:0 auto;"> <div class="card text-center"> </div></div></div></br/></br/>

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 77 | Bootstrap | Googleマップ

[76]Bootstrap |写真カルーセル表示[ホームに戻る] >> [78]Bootstrap | ログイン認証における書き換え 「25 | Googleマップ」をBootstrapに書き換えます。 設定部分は省略します。 Google Cloud PlatformにGoogleアカウントでログインしてAPIキーを取得…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 76 | Bootstrap | 写真カルーセル表示

[75]Bootstrap |アクションテキスト[ホームに戻る] >> [77]Bootstrap | Googleマップ 「24 | 写真カルーセル表示」をBootstrapに書き換えます。 Bulmaの設定は省略しても大丈夫です。 「app\assets\images」フォルダに「blank.jpg」ファイルを保存してお…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 75 | Bootstrap | アクションテキスト

[74]Bootstrap |写真アップロード(dropzone)[ホームに戻る] >> [76]Bootstrap | 写真カルーセル表示 「23 | アクションテキスト」のBootstrap変更部分を載せておきます。 「app\views\rooms\description.html.erb」ファイルを更新します。 記述変更 app\…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 74 | Bootstrap | 写真アップロード(dropzone)

[73]Bootstrap |部屋ビューの作成[ホームに戻る] >> [75]Bootstrap | アクションテキスト 「22 | 写真アップロード(dropzone)」の内容をBootstrapの記述で書き換えます。 複数の画像をアップロードできるようにします。 まずは「doropzone」のインストー…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 73 | Bootstrap | 部屋ビューの作成

[72]Bootstrap |プロフィールページ作成[ホームに戻る] >> [74]Bootstrap | 写真アップロード(dropzone) 「21 | 部屋ビューの作成」をBootstrapで書き換えていきます。 app\views\room\new.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">お部屋の新規登録</h4> </div></div></div></br/></br/>

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 72 | Bootstrap | プロフィールページ作成

[71]Bootstrap |電話番号カラム追加[ホームに戻る] >> [73]Bootstrap | 部屋ビューの作成 「18 | プロフィールページ作成」のBootstrap記述変更部分を載せておきます。 「app\views\users」フォルダに「show.html.erb」ファイルを新規作成します。 app\v…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 71 | Bootstrap | 電話番号カラム追加

[70]Bootstrap |画像アップロード[ホームに戻る] >> [72]Bootstrap | プロフィールページ作成 「17 | 電話番号カラム追加」のBootstrap変更部分を載せておきます。 「app\views\devise\registrations\edit.html.erb」ファイルを更新します。 記述追加 ap…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 70 | Bootstrap | 画像アップロード

[69]Bootstrap |Googleフォント・アイコン[ホームに戻る] >> [71]Bootstrap | 電話番号カラム追加 「15 | 画像アップロード」のBootstrap変更部分のみ書いておきます。 ダッシュボードビューに記述を追加します。 記述更新 app\views\users\dashboard.ht…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 69 | Bootstrap | Googleフォント・アイコン

[68]Bootstrap |ダッシュボード[ホームに戻る] >> [70]Bootstrap | 画像アップロード 「12 | Googleフォント」についてはそのまま記述追加で問題ないです。 「13 | アイコン」のBootstrap変更部分から書いておきます。 「app\views\layouts\application.…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 68 | Bootstrap | ダッシュボード

[67]Bootstrap |デバイス認証設定の修正[ホームに戻る] >> [69]Bootstrap | Googleフォント・アイコン 「11 | ダッシュボード」の変更部分を中心に書いていきます。 ナビゲーションバーを更新します。 app\views\shared\_navbar.html.erb <nav class="navbar navbar-expand-lg navbar-dark bg-info" style="z-index: 5;"> <a class="navbar-brand" href="/"><h1 class="navh1">MinpakuBs</h1></a>…</nav>

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 67 | Bootstrap | デバイス認証設定の修正

[66]Bootstrap |Gメール[ホームに戻る] >> [68]Bootstrap | ダッシュボード 「10 | デバイス認証設定の修正」の変更部分を中心に書いておきます。 ユーザー編集ページを更新してパスワードのフィールドを減らします。 ユーザ情報を更新する際に今までは…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 66 | Bootstrap | Gメール

[65]Bootstrap |フラッシュメッセージ(noty)[ホームに戻る] >> [67]Bootstrap | デバイス認証設定の修正 設定部分は「09 | Gメール」と同じなので違う部分をメインに書いておきます。 更新 app\views\devise\mailer\reset_password_instructions.html.er…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 65 | Bootstrap | フラッシュメッセージ(noty)

[64]Bootstrap |氏名認証[ホームに戻る] >> [66]Bootstrap | Gメール フラッシュメッセージ(noty)をBootstrapで実装していきます。 インストール等については「08| フラッシュメッセージ(noty)」と同じなので省略します。 「app\javascript\packs\applic…