Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8704

ゴルフスクールの予約システムを作ってみよう!

$
0
0

ポートフォリオとして制作したゴルフスクールの予約システムの制作過程をまとめました。

尚、ポートフォリオとGitHubは下記でございます。

ポートフォリオ「ゴルフスクールの予約システム」URL
https://www.golfchamp-reservation.com/login

GitHub
https://github.com/takayuki007/golfChamp-reservation

1、要件概要

導入

PHPのフレームワークであるLaravelを使ってゴルフレッスンの予約サイトを作ってみます。以前、作ったゴルフレッスンのサイトの予約システムです。
ゴルフレッスンサイトURL:
https://takayuki007.github.io/golfChamp/index.html

参考にしたサイトは下記です。

ZERO FUSION
https://www.zero-fusion.com/

2、サービス概要

自分の希望日時と場所でゴルフの個人レッスンを受けるための予約が取れる。

要件定義(10分)

  • ユーザー名、メールアドレスで登録できる。
  • ユーザー名とパスワードでログインすることができる。
  • レッスン日とコーチとレッスン場所を明確に。
  • マイページでレッスンの確認。
  • PCとスマホに対応。

ページ構成(5分)

  • 新規登録ページ
  • ログインページ
  • マイページ
  • 予約ページ
  • 完了ページ

画面設計&デザイン作成

  • 新規登録ページ(PC25分)(SP10分)
  • ログインページ(PC5分)(SP5分)
  • マイページ(PC10分)(SP5分)
  • 予約ページ(PC10分)(SP5分)
  • 予約確認ページ(PC10分)(SP15分)
  • 完了ページ(PC5分)(SP5分)

DB設計(20分)

users
idid
namevarchar
emailvarchar
passwordvaerchar
email_verified_attimestamp
remember_tokenvarchar
created_attimestamp
updated_attimestamp
deleted_attimestamp
locations
idint
namevarchar
addressvarchar
urltext
created_attimestamp
updated_attimestamp
deleted_attimestamp
times
idint
timevarchar
created_attimestamp
updated_attimestamp
deleted_attimestamp
coaches
idint
namevarchar
created_attimestamp
updated_attimestamp
deleted_attimestamp
reservation
idint
datevarchar
user_idint
location_idint
coach_id
created_attimestamp
updated_attimestamp
deleted_attimestamp

クラス設計(15分)

FLOCSSを採用

  • 全体

app

  • Foundation部分

_reset、_variables

  • Layout部分

l-wrapper、l-site-width、l-margin、l-main、l-header

  • Object部分
  • Component部分

c-btn-second、c-alert-success、c-btn-area、c-btn、c-form-check-area、c-form-check-label、c-form-group、c-form、c-from-check-input、c-heading、c-input-area、c-input、c-invalid-feedback、c-is-invalid、c-li、c-link、c-logo-link、c-logo、c-reservation-group、c-reservation-li、c-reservation-ul、c-reservation、c-text、c-title、c-ul、c-wrapper

  • Project

p-text-center

  • Utility

u-space-area、u-margin-top、u-login-link、u-color-red

環境構築(30分)

Laravelをインストールし、サーバーを起動。
参考URL:
https://readouble.com/laravel/5.8/ja/installation.html
https://teratail.com/questions/285110
https://stackoverflow.com/questions/39098717/fatal-error-unable-to-create-lock-file-bad-file-descriptor-9-while-running
https://stackoverflow.com/questions/17933882/php-bad-file-descriptor-error

3、実装

HTMLとCSSを同時に書いていく。

  • header(PC45分)(SP10分)
  • 新規登録ページ(PC70分)(SP10分)
  • ログインページ(PC20分)(SP0分)
  • パスワードリセットリンク(PC15分)(SP0分)
  • パスワードリセット画面(PC10分)(SP0分)
  • 完了ページ(PC10分)(SP5分)
  • 予約確認ページ(PC15分)(SP5分)
  • マイページ(PC45分)(SP0分)
  • 予約ページ(PC5分)(SP5分)
  • 表示するためにコントローラーを通す(10分)

参考URL:
https://readouble.com/laravel/5.5/ja/configuration.html
https://readouble.com/laravel/5.4/ja/mix.html
https://saruwakakun.com/html-css/basic/box-shadow

HTML/CSSが完了したので、PHPの処理部分に入る。

usersテーブルの作成(5分)

deleted_atのカラムを追加

参考URL:
https://qiita.com/miriwo/items/5e5a47ece1b805266246
https://qiita.com/I-201/items/bfb4c216da196247e369

ログイン機能の確認(5分)
ログイン後のヘッダー直し(10分)
ログアウト後の戻りページ直し(5分)

参考URL:
https://teratail.com/questions/259884
https://qiita.com/nekyo/items/d9413d8ae6dc9f3eb05d

ログイン処理のエラー文字を赤色にする(5分)
ログイン処理のエラー枠を赤色にする(5分)
エラーメッセージを日本語にする(5分)

参考URL:
https://qiita.com/samuraibrass/items/d71c08e144dbbf98e348

新規登録で確認メールを送信(30分)

参考URL:
https://qiita.com/nekyo/items/03e50b4d0dd6f09287d6
https://qiita.com/yutaroshimamura/items/8a89fc57bd3c73a24c32
https://www.sejuku.net/blog/72944
https://stackoverflow.com/questions/50232314/laravel-5-5-missing-required-parameters-for-route-password-request

認証メールを日本語化(60分)

参考URL:

https://webplus8.com/laravel-env-attention/
https://eigoswitch.com/eigo-regards#:~:text='Regards'%20%E3%82%92%E8%8B%B1%E8%AA%9E%E3%81%AB%E7%9B%B4%E8%A8%B3,%E3%81%AE%E5%90%8D%E5%89%8D%E3%82%92%E6%9B%B8%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82
https://teratail.com/questions/217183
https://note.com/insectchan/n/n80de3ee6722b


苦労したこと

日本語に設定したが、なかなか反映しないので見落としがあるか何度もチェックすることで時間をかけてしまいました。ただ、その原因はキャッシュが残っていたことだったので、次からはそちらも見逃さず当たりをつけられるようにしたい。


パスワードリセットメールの日本語化(15分)
コーチテーブルの作成&seederでのデータ挿入(15分)
時間テーブルの作成&seederでのデータ挿入(15分)
レッスン場所テーブル&seederでのデータ挿入(30分)

参考URL:
https://stackoverflow.com/questions/59511459/how-to-get-website-url-in-laravel-seeder
https://teratail.com/questions/864
https://qiita.com/Otake_M/items/3c761e1a5e65b04c6c0e


苦労したこと

レッスン場所のマップをURLで入れる際の型とそれに必要な方法を調べるのに手間取ってしまった。調べたいことをすぐに言葉にできるように常に意識づけをしたい。


予約画面の作成(300分)

参考URL:
http://hpscript.com/blog/php%E3%81%A7%E4%BA%88%E7%B4%84%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%82%92%E4%BD%9C%E3%81%8F%E3%82%8D%E3%81%862%E3%80%80%E4%BA%88%E7%B4%84%E7%94%BB%E9%9D%A2/
https://jqueryui.com/datepicker/
https://teratail.com/questions/31293
https://www.larajapan.com/2019/11/10/npm%E3%81%8B%E3%82%89%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%82%92%E8%BF%BD%E5%8A%A0/
https://pointsandlines.jp/front-end/javascript/datepicker
https://stackoverflow.com/questions/43823295/uncaught-typeerror-datepicker-is-not-a-function-at-htmldocument-anonymo/43823339
https://code-kitchen.dev/html/input-date/
https://takuya0805.hatenadiary.org/entry/20131023/1382505579
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/date


苦労したこと

カレンダーのようなUIがあれば利用者に分かりやすいと思いdatepickerを導入することにしましたが、datepickerが機能せずに苦労しました。初めはjQueryやjQuery-uiが読み込みできていないと思い、読み込み順序を確認したり、CDNで実験してみたりしましたがうまくいきませんでした。。クリックしたらアラートを出すような単純な処理を加えるときちんと反応していたので、そもそもdatepickerに問題があると思いましたが解決できませんでした。そこでinputのdateを使ってカレンダーのように表示し、登録できるようにしました。この一連の作業のため、かなり時間がかかってしまいました。


reservationsテーブルの作成(10分)
予約機能の実装(45分)
マイページの実装(180分)

参考URL:
https://blog.capilano-fw.com/?p=665

登録済のユーザーしか使えないようにページの表示をルーティングで調整(10分)
不要部分の削除、必要箇所にコメントを入れる(30分)

4、テスト(ローカル)

必要な要件はすべて実装し終えたので、テストをする。テストは単体テストと結合テストの2つを行う。単体テストは境界値テストとブラックボックステストを行う。結合テストでは、ページの遷移が正しいかなど、全体的な動作の確認を行う。

加えて、今回のテスト範囲は、PCは世界的にもっとも使われているGoogle Chrome、スマホはandroidとiOSの最新バージョンでテストをする。スマホのブラウザはSafariとGoogle Chromeにする。

尚、スマホについてはシミュレーターを使う。

単体テストケースの作成(100分)
結合テストケースの作成(10分)

単体テストの実施(240分)

機能名No.分類テスト手順想定結果結果1担当者1実施日1
新規登録機能1異常系名前欄、メールアドレス欄、パスワード欄、パスワード再入力欄に何も入力せず、登録ボタンを押す。DBの登録処理は実施されず、名前欄のところに「このフィールドを入力してください」と表示される。自分3/26
2異常系名前欄に「test」を入力し、メールアドレス欄、パスワード入力欄、パスワード再入力欄は何も入力せず、登録ボタンを押す。DBの登録処理は実施されず、メールアドレス欄に「このフィールドを入力してください」と表示される。自分3/26
3異常系名前欄に「test」を入力し、メールアドレス欄に「test@test.com」を入力し、パスワード入力欄、パスワード再入力欄は何も入力せず、登録ボタンを押す。DBの登録処理は実施されず、パスワード入力欄にパスワードを提案される。自分3/26
4異常系名前欄に「test」を入力し、メールアドレス欄に「test@test.com」を入力し、パスワード入力欄に「aaaaaaaa」を入力し、パスワード再入力欄は何も入力せず、登録ボタンを押す。DBの登録処理は実施されず、パスワード確認欄に「このフィールドを入力してください」と表示される。自分3/26
5異常系名前欄に「test」を入力し、メールアドレス欄に「@test.com」を入力し、パスワード入力欄に「aaaaaaaa」を入力し、パスワード最入力欄に「aaaaaaaa」を入力し、登録ボタンを押す。DBの登録処理は実施されず、メールアドレス入力欄の下に「「@」の前の文字列を入力してください。「@test.com」は完全なメールアドレスではありません。」と表示される。自分3/26
6異常系名前欄に「a」を256文字入力し、メールアドレス欄に「test@test.com」を入力し、パスワード入力欄に「aaaaaaaa」、パスワード再入力欄に「aaaaaaaa」を入力し、登録ボタンを押す。DBの登録処理は実施されず、名前入力欄に「名前は255文字以下のみ有効です。」の赤文字と該当入力欄が赤色で囲われる。自分3/26
7異常系名前欄に「test」を入力し、メールアドレス欄にaを256文字、その後に@a.comというメールアドレスの形式を入力し、パスワード入力欄に「aaaaaaaa」、パスワード再入力欄に「aaaaaaaa」を入力し、登録ボタンを押す。DBの登録処理は実施されず、メールアドレス入力欄に「メールアドレスは255文字以下のみ有効です。」の赤文字と該当入力欄が赤色で囲われる。自分3/26
8異常系名前欄に「test」を入力し、メールアドレス欄に「自分のメールアドレス」と入力し、パスワード入力欄に「aaaaaaaa」を入力し、パスワード再入力欄に「aaaaaaaa」を入力し、登録ボタンを押す。DBの登録処理は実施されず、エラーメッセージも表示されない。自分3/26
9異常系名前欄に「test」を入力し、メールアドレス入力欄に「test@test.com」と入力し、パスワード入力欄に「aaaaaaa」を入力し、パスワード再入力欄に「aaaaaaa」を入力し、登録ボタンを押す。DBの登録処理は実施されず、パスワード入力欄下に、「パスワードは8文字以上のみ有効です」の赤文字と該当入力欄が赤色で囲われる。自分3/26
10異常系名前欄に「test」を入力し、メールアドレス入力欄に「test@test.com」と入力し、パスワード入力欄にaを256文字入力し、パスワード再入力欄にaを256文字入力し、登録ボタンを押す。DBの登録処理は実施されず、パスワード入力欄下に、「パスワードは255文字以下のみ有効です。」の赤文字と該当入力欄が赤色で囲われる。自分3/26
11異常系名前欄に「test」を入力し、メールアドレス入力欄に「test@test.com」と入力し、パスワード入力欄に「aaaaaaaa」と入力し、パスワード再入力欄に「bbbbbbbb」と入力し、登録ボタンを押す。DBの登録処理は実施されず、パスワード入力欄下に、「パスワードは確認用と一致させてください」の赤文字と該当入力欄が赤色で囲われている。自分3/26
12正常系名前欄に「test」を入力し、メールアドレス入力欄「自分のメールアドレス」と入力し、パスワード入力欄に「aaaaaaaa」と入力し、パスワード再入力欄に「aaaaaaaa」と入力し、登録ボタンを押す。確認メールが送信され、そのリンクをクリックするように案内する画面が表示される。実際に届いたメールをクリックしてDBに登録される。認証されたかどうかの確認は、email_verified_atに記録される。正しく登録されれば、マイページに遷移する。自分3/26
ログイン機能13異常系メールアドレス欄、パスワード欄に何も入力せず、ログインボタンを押す。ログイン処理は実施されず、メールアドレス入力欄に、「このフィールドを入力してください」と表示される。自分3/26
14異常系メールアドレス入力欄に「@test.com」と入力し、パスワード欄に「aaaaaaaa」と入力し、ログインボタンを押す。ログイン処理は実施されず、メールアドレス入力欄の下に「「@」の前の文字列を入力してください。「@test.com」は完全なメールアドレスではありません。」と表示される。自分3/26
15正常系メールアドレス入力欄「自分のメールアドレス」と入力し、パスワード入力欄に「aaaaaaaa」と入力し、っログインボタンを押す。ログインが許可され、マイページ画面に遷移する。三吉3/26
パスワード変更機能16異常系メールアドレス欄に「test@test.com」を入力し、送信ボタンを押す。「ユーザーは存在しません。」と入力欄の下に表示される。自分3/26
17異常系メールアドレス入力欄に何も入力せず送信ボタンを押す。メールアドレス入力欄の下に「このフィールドを入力してください」と表示される。自分3/26
18異常系メールアドレス欄に「@test.com」を入力し、送信ボタンを押す。メールアドレス入力欄の下に「「@」の前の文字列を入力してください。「@test.com」は完全なメールアドレスではありません。」と表示される。自分3/26
19正常系メールアドレス入力欄「自分のメールアドレス」と入力し、送信ボタンを押す。確認メールが送信され、そのリンクをクリックし、パスワード更新画面に遷移する。そこで、メールアドレスは「自分のメールアドレス」、パスワードは「bbbbbbbb」、パスワード確認は「bbbbbbbb」を入力し、更新する。自分3/26
予約機能20異常系何も入力せず予約ボタンを押すDBの登録処理はされず、日時欄に「このフィールドを入力してください」と表示される。自分3/26
21異常系日時(2021/4/4)を入力し、他は何も入力せず予約するボタンを押す。DBの登録処理はされず、日時以外の入力部分の枠が赤くなり、入力欄の下に「~必須です。」と表示される。自分3/26
22異常系時間(9:00~10:00)を入力し、他は何も入力せず予約するボタンを押す。DBの登録処理はされず、日時欄に「このフィールドを入力してください」と表示される。自分3/26
23異常系コーチ(ホセ・トドロギ)を入力し、他は何も入力せず予約するボタンを押す。DBの登録処理はされず、日時欄に「このフィールドを入力してください」と表示される。自分3/26
24異常系レッスン場所(日吉ゴルフ練習場)を入力し、他は何も入力せず予約するボタンを押す。DBの登録処理はされず、日時欄に「このフィールドを入力してください」と表示される。自分3/26
25異常系日時(2021/4/4)、時間(9:00~10:00)を入力し、他は何も入力せず予約するボタンを押す。DBの登録処理はされず、日時、時間以外の入力部分の枠が赤くなり、入力欄の下に「~は必須です。」と表示される。自分3/26
26異常系日時(2021/4/4)、コーチ(ホセ・トドロギ)を入力し、他は何も入力せず予約するボタンを押す。DBの登録処理はされず、日時、コーチ以外の入力部分の枠が赤くなり、入力欄の下に「~は必須です。」と表示される。自分3/26
27異常系日時(2021/4/4)、レッスン場所(日吉ゴルフ練習場)を入力し、他は何も入力せず予約するボタンを押す。DBの登録処理はされず、日時、レッスン場所以外の入力部分の枠が赤くなり、入力欄の下に「~は必須です。」と表示される。自分3/26
28異常系時間(9:00~10:00)、コーチ(ホセ・トドロギ)を入力し、他は何も入力せず予約するボタンを押す。DBの登録処理はされず、、日時欄に「このフィールドを入力してください」と表示される。自分3/26
29異常系時間(9:00~10:00)、レッスン場所(日吉ゴルフ練習場)を入力し、他は何も入力せず予約するボタンを押す。DBの登録処理はされず、日時欄に「このフィールドを入力してください」と表示される。自分3/26
30異常系コーチ(ホセ・トドロギ)、レッスン場所(日吉ゴルフ練習場)を入力し、他は何も入力せず予約するボタンを押す。DBの登録処理はされず、日時欄に「このフィールドを入力してください」と表示される。自分3/26
31異常系日時(2021/4/4)、時間(9:00~10:00)、コーチ(ホセ・トドロギ)を入力し、他は何も入力せず予約するボタンを押す。DBの登録処理はされず、日時、時間、コーチ以外の入力部分の枠が赤くなり、入力欄の下に「レッスン場所は必須です。」と表示される。自分3/26
32異常系日時(2021/4/4)、時間(9:00~10:00)、レッスン場所(日吉ゴルフ練習場)を入力し、他は何も入力せず予約するボタンを押す。DBの登録処理はされず、日時、時間、レッスン場所以外の入力部分の枠が赤くなり、入力欄の下に「コーチは必須です。」と表示される。自分3/26
33異常系時間(9:00~10:00)、コーチ(ホセ・トドロギ)、レッスン場所(日吉ゴルフ練習場)を入力し、他は何も入力せず予約するボタンを押す。DBの登録処理はされず、日時欄に「このフィールドを入力してください」と表示される。自分3/26
34正常系日時(2021/4/4)、時間(9:00~10:00)、コーチ(ホセ・トドロギ)、レッスン場所(日吉ゴルフ練習場)を入力し、予約するボタンを押す。DBの登録処理が行われ、reservationテーブルに予約した内容が表示される。自分3/26

結合テストの実施(30分)

機能名No.分類テスト手順想定結果結果1担当者1実施日1
予約機能1正常系日時(2021/4/4)、時間(9:00~10:00)、コーチ(ホセ・トドロギ)、レッスン場所(日吉ゴルフ練習場)を入力し、予約するボタンを押す。DBの登録処理が行われ、マイページに遷移しマイページに先ほど予約した内容が表示される。自分3/26
2正常系マイページの予約一覧にあるGoogleMapのリンクをクリックし、日吉ゴルフ練習場、ゴルフ・コンフォート、バーディーゴルフ、それぞれ正しい情報に遷移する。日吉ゴルフ練習場(名古屋市中村区岩塚神明西)、ゴルフ・コンフォート(名古屋市天白区中砂町549)、バーディーゴルフ(愛西市落合町上河原1510-1)の正しい地図情報が表示される。自分3/26

参考URL:
https://xera.jp/entry/iphone-android-share
https://www.atmarkit.co.jp/ait/articles/0607/22/news014.html
https://qiita.com/unsoluble_sugar/items/f39bb5afae60f51ea7a4

5、本番デプロイ

Xサーバーにデプロイする。(60分)

参考URL:
https://naoya-ono.com/blog/deploy-laravel-xserver/
https://www.xserver.ne.jp/manual/man_server_htaccess.php

  • バリュードメインでドメインを購入し、ネームサーバを設定。
  • Githubにソースコードをアップ。
  • 各種設定をする。

6、テスト(本番)

本番テスト(30分)

本番環境できちんと動作するか確認する。

機能名No.分類テスト手順想定結果結果1担当者1実施日1結果2担当者2実施日2
新規登録機能1正常系名前欄に「test」、メールアドレス入力欄「自分のメールアドレス」と入力し、パスワード入力欄に「aaaaaaaa」と入力し、パスワード再入力欄に「aaaaaaaa」と入力し、登録ボタンを押す。確認メールが送信され、そのリンクをクリックするように案内する画面が表示される。実際に届いたメールをクリックしてDBに登録される。認証されたかどうかの確認は、email_verified_atに記録される。正しく登録されれば、マイページに遷移する。×自分3/29自分3/29
ログイン機能2正常系メールアドレス入力欄「自分のメールアドレス」と入力し、パスワード入力欄に「aaaaaaaa」と入力し、ログインボタンを押す。ログインが許可され、マイページ画面に遷移する。自分3/29
パスワード変更機能3正常系メールアドレス入力欄「自分のメールアドレス」と入力し、送信ボタンを押す。確認メールが送信され、そのリンクをクリックし、パスワード更新画面に遷移する。そこで、「bbbbbbbb」を入力し、更新する。自分3/29
予約機能4正常系日時(2021/4/4)、時間(9:00~10:00)、コーチ(ホセ・トドロギ)、レッスン場所(日吉ゴルフ練習場)を入力し、予約するボタンを押す。DBの登録処理が行われ、マイページに遷移しマイページに先ほど予約した内容が表示される。自分3/29
5正常系マイページの予約一覧にあるGoogleMapのリンクをクリックし、日吉ゴルフ練習場、ゴルフ・コンフォート、バーディーゴルフ、それぞれ正しい情報に遷移する。日吉ゴルフ練習場(名古屋市中村区岩塚神明西)、ゴルフ・コンフォート(名古屋市天白区中砂町549)、バーディーゴルフ(愛西市落合町上河原1510-1)の正しい地図情報が表示される。自分3/29

参考URL:
https://qiita.com/takuma-jpn/items/f4e23bed778b17b52e36

7、まとめ

全体として1725分。1人日を8時間とした場合は、3.6人日での完成でした。

現状の予約システムはユーザーに日程を確認してもらって予約する仕組みになっているため、これをシステム側で制御して間違いがないように予約ができるようにしてみたい。また、1人3コマまで予約できるようにしたり、レッスン日が過ぎたら自動で日程をマイページ側から消したり、予約の変更機能だったりをつけてより本格的にしてみたい。


Viewing all articles
Browse latest Browse all 8704

Latest Images

Trending Articles