友達の卒業コンサートの申し込みフォームを作成しました。
機能としては、①申し込み、②チケットの発行、③参加者の管理の3つです。
友達が学科の卒業コンサートを行うということを知ったのがきっかけでした。
その友達が申し込みの方法を迷っていたところを、私が「作成しようか」と提案して開発が始まりました。
※下記のURLには開発用のダミーデータが入っています。
※各ページはスマートフォンで最適に表示されるように調整しています。
Vue.jsを使ったバリデーション
申込ページで、@blurを使い、フォーカスが外れた際にバリデーションをかけるようにしました。フォームを送信する前に入力の間違いに気づくことができるため、UXの向上が期待できます。
平仮名検索機能
管理者画面で平仮名の検索に対応しました。演奏会当日に口頭で名前を言われた際にも対応できます。
チケット画面のUI・UX
チケット画面はスワイプで直感的に使用できることを目指しました。デザイン科の生徒が描いてくれたデザインを使用しています。
- Laravel 8.81.0
- Vue.js 3.x
- Keen Slider(JavaScriptのライブラリ)
- Bootstrap
- ConoHaのVPS
- Apache
- MySQL
- さくらのレンタルサーバ(メールサーバ)
- ひらがな化API