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

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

Rails6.0

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

宿泊者(ゲスト)の予約確認ページを作成します。 記述追加 app\controllers\reservations_controller.rb(26行目) def your_trips @trips = current_user.reservations.order(start_date: :asc) end app\controllers\reservations_controller.rb class Reser…

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

「app\controllers\rooms_controller.rb」ファイルを編集します。 1.記述追加 app\controllers\rooms_controller.rb(71行目) # 予約 開始日のAJAX def preload today = Date.today reservations = @room.reservations.where("start_date >= ? OR end_date …

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

jqueryはすでにインストールされているので、「jquery-ui」をインストールします。 コマンド yarn add jquery-ui 記述追加 config\webpack\environment.js(14行目) environment.toWebpackConfig().merge({ resolve: { alias: { 'jquery': 'jquery/src/jquery…

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

「app\controllers」フォルダに「reservations_controller.rb」ファイルを新規作成します。 app\controllers\reservations_controller.rb(新規作成したファイル) class ReservationsController < ApplicationController before_action :authenticate_user! d…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 29 | 予約モデル

コマンド 1文です。 rails g model Reservation user:references room:references start_date:datetime end_date:datetime price:bigint total:bigint コマンド マイグレーション rails db:migrate 記述追加 app\models\room.rb 「has_many :reservations」…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 28 | アカウント連携表示

ダッシュボードビューに以下の記述を追加します。 記述追加 app\views\users\dashboard.html.erb(63行目) <div class="content"> <p> <strong>アカウント連携</strong><br/> <% if current_user.provider == 'facebook' %> <span class="has-text-success">Facebookアカウントでログイン中</span> <% elsif current_user.provider == 'google_oauth</br/></p></div>…

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

Google Cloud PlatformにGoogleアカウントでログインしてAPIキーを取得してください。 手順は以下の通りにお願いします。 mrradiology.hatenablog.jp GemFileに以下の記述を追加します。 記述追加 GemFile(80行目) gem 'omniauth-google-oauth2' GemFile sou…

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

まずはFacebook for Developersでアカウントを作成しなければなりません。 developers.facebook.com アカウント、アプリの作成は以下の手順でお願いします。 mrradiology.hatenablog.jp GemFileに以下の記述を追加します。 記述追加 GemFile(76行目) gem 'om…

Facebook for Developers | アカウント作成手順【2021年7月更新】

まずは「Facebook for Developers」のトップページに移動します。 developers.facebook.com 「利用を開始する」をクリックします。 利用を開始する 次へ進みます。 次へ進む 携帯電話を入力し、SMSを送信することでアカウント認証を行います。 アカウント認…

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

Google Cloud PlatformにGoogleアカウントでログインしてAPIキーを取得してください。 手順は以下の通りにお願いします。 mrradiology.hatenablog.jp 記述追加 GemFile(73行目) #googleマップ gem 'geocoder', '~> 1.4' GemFile source 'https://rubygems.…

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

写真をカルーセル表示できるようにします。 「yarn」コマンドで「bulma-extensions」をインストールします。 コマンド yarn add bulma-extensions 「app\javascript\packs\application.js」ファイルを以下のように書き換えます。 1.記述追加 app\javascrip…

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

アクションテキストをインストールします。 コマンド rails action_text:install マイグレーション適用 rails db:migrate 「app\models\room.rb」ファイルを以下の内容に更新します。 記述追加 app\models\room.rb(6行目) has_rich_text :description app\…

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

複数の画像をアップロードできるようにします。 まずは「doropzone」のインストールをします。 コマンド yarn add dropzone@5.5.1 「app\assets\stylesheets\application.scss」ファイルに以下の記述を追加します。 記述追加 app\assets\stylesheets\applica…

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

app\views\room\new.html.erb <section class="section"> <div class="container"> <article class="panel"> <div class="panel-heading"> お部屋の登録 </div> <div class="card"> <div class="card-content"> <div class="media"> <%= form_for @room do |f| %> <div class="col-md-4 select"> <div class="form-group"> </div></div></div></div></div></article></div></section>

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

コマンド 1文です。 rails g controller Rooms index new create listing pricing description photo_upload amenities location update app\controllers\rooms_controller.rb class RoomsController < ApplicationController before_action :set_room, exc…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 19 | 部屋モデル作成

コマンド 長いですが全部つながっています。1文です。 rails g model Room home_type:string room_type:string accommodate:bigint bed_room:bigint bath_room:bigint listing_name:string summary:text address:string is_tv:boolean is_kitchen:boolean i…

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

ユーザープロフィールページを作成します。 「app\controllers\users_controller.rb」ファイルに以下のメソッドを追加します。 記述追加 app\controllers\users_controller.rb(8行目) def show @user = User.find(params[:id]) end app\controllers\users_co…

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

コマンド rails g migration AddExtraFieldsToUser phone_number:string コマンド マイグレーション rails db:migrate 電話番号カラムが追加されました。 電話番号カラム追加 電話番号カラムに追加できるよう、permitに電話番号の項目追加します。 記述追加 …

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 16 | アマゾンS3

herokuにアプリケーションをデプロイすると画像をローカルに保存することができません。 それに対応するため、アップロードした画像を全てアマゾンS3に保存するよう設定します。 アマゾンS3のキーの取得方法は以下の手順でお願いします。 mrradiology.hatena…

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

アバター画像をアップロードできるようにします。 コマンド rails g migration AddImageColumsToUser image コマンド rails active_storage:install コマンド マイグレーションの適用 rails db:migrate 「app\models\user.rb」ファイルに記述を追加します。 …

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 14 | Gitにコミット

今まで行なった変更をGitにファイル送信してコミットします。 Gitにコミットしておけば好きなバージョンに巻き戻したり出来ますし、バックアップにもなります。 ソース管理を選択します。 ソース管理 「+」をクリックして全ての変更をステージします。 全て…

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

「Font Awesome」のアイコンを使えるようにします。 fontawesome.com 「app\views\layouts\application.html.erb」ファイルに以下の記述を追加します。 記述追加 app\views\layouts\application.html.erb(13行目) <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"> app\views\layouts\application.html.erb </link>

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

サイト fonts.google.com 上記のサイトで選んだフォントをサイトに適用することができます。 今回は「Kosugi Maru」というフォントを適用してみます。 https://fonts.google.com/specimen/Kosugi+Maru?subset=japanese 「select this style」をクリックしま…

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

ユーザーモデルに項目を追加します。 コマンド rails g migration AddColumsToUser about:text status:boolean 「db\migrate\20200723123617_add_colums_to_user.rb」ファイルの記述を以下のように更新します。 記述更新 db\migrate\20200723123617_add_colu…

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

「app\controllers」フォルダに「registrations_controller.rb」ファイルを新規作成します。 app\controllers\registrations_controller.rb(新規作成したファイル) class RegistrationsController < Devise::RegistrationsController protected def update_r…

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

Gmailを使ってメールの送信をできるようにします。 以下の手順でGmailのセキュリティを2段階認証プロセスに変更し、アプリパスワードを生成してください。 mrradiology.hatenablog.jp 1.記述の変更 config\environments\development.rb(35行目) 「false」…

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

notyのデザインについては以下を参照して下さい。 ned.im notyはyarnを使ってインストールします。 コマンド yarn add noty 「app\javascript\packs\application.js」に以下の記述を追加します。 記述追加 app\javascript\packs\application.js(11行目) wind…

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

ユーザーモデルに氏名の項目を追加します。 コマンド rails g migration AddFullnameToUser full_name:string コマンド マイグレーション適用 rails db:migrate Posticoでテーブル確認 Windowsの場合はHeidiSQLでテーブル確認します。 full_nameフィールドの…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 06 | デバイス(devise)

「devise」を利用してメールとパスワードでの認証ができるように実装します。 記述追加 GemFile(61行目) gem 'devise' GemFile source 'https://rubygems.org' git_source(:github) { |repo| "https://github.com/#{repo}.git" } ruby '2.6.3' # Bundle edge…

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 05 | ナビゲーションバー(Bulma)

Bulmaを利用してナビゲーションバーを構築します。 Bulmaの詳細については下記を参照してください。 bulma.io GemFileに以下の記述を追加します。 記述追加 GemFile(57行目) gem 'bulma-rails', '~> 0.7.4' gem 'bulma-extensions-rails', '~> 1.0.30' GemFi…