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

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

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

「18 | プロフィールページ作成」のBootstrap記述変更部分を載せておきます。 「app\views\users」フォルダに「show.html.erb」ファイルを新規作成します。 app\views\users\show.html.erb(新規作成したファイル) <div class="row" style="margin: 20px;"> <div class="col-4"> <div class="card"> <div class="card-body"> <%= image_tag avatar_url(@user), c…</div></div></div></div>

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

「17 | 電話番号カラム追加」のBootstrap変更部分を載せておきます。 「app\views\devise\registrations\edit.html.erb」ファイルを更新します。 記述追加 app\views\devise\registrations\edit.html.erb(18行目) <div class="field"> <div class="form-group"> <%= f.text_field :phone_number, autofoc</div></div>…

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

「15 | 画像アップロード」のBootstrap変更部分のみ書いておきます。 ダッシュボードビューに記述を追加します。 記述更新 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(curre</div></div></div></div>…

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

「12 | Googleフォント」についてはそのまま記述追加で問題ないです。 「13 | アイコン」のBootstrap変更部分から書いておきます。 「app\views\layouts\application.html.erb」ファイルに以下の記述を追加します。 記述追加 app\views\layouts\application.…

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

「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 | デバイス認証設定の修正

「10 | デバイス認証設定の修正」の変更部分を中心に書いておきます。 ユーザー編集ページを更新してパスワードのフィールドを減らします。 ユーザ情報を更新する際に今までは現在のパスワードを入力していましたが、今回の変更によりパスワード入力を省略で…

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

設定部分は「09 | Gメール」と同じなので違う部分をメインに書いておきます。 更新 app\views\devise\mailer\reset_password_instructions.html.erb <p><%= @resource.full_name %>様</p><br/> <br/> <p>テストサイトMinpakuBsです。</p><br/> <br/> <p>登録メールアドレス 「<%= @resource.email </p></br/></br/></br/></br/>…

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

フラッシュメッセージ(noty)をBootstrapで実装していきます。 インストール等については「08| フラッシュメッセージ(noty)」と同じなので省略します。 「app\javascript\packs\application.js」に以下の記述を追加します。 記述追加 app\javascript\packs\ap…

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

設定方法等は「07 | 氏名認証」と同じですので、Bootstrapによって変更になった部分のみを載せておきます。 認証ビューを更新します。 記述更新 app\views\devise\registrations\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サイトを作成する 63 | Bootstrap | デバイス(devise)

デバイスの設定部分は「06 | デバイス(devise)」と同じです。 Bootstrap用に書き換えた部分を載せていきます。 ナビゲーションバーに「新規ユーザ登録」「ログイン」「ログアウト」のリンクを追加する変更です。 記述更新 app\views\shared\_navbar.html.erb <nav class="navbar navbar-expand-lg navbar-dark bg-info" style="z-index: 5;"></nav>…