【目 的】
・店舗サービス案内・オンライン受注による集客
【ターゲット】
・30〜60代 男女
【制 作 期 間】
・3週間程度
【意識した点】
・すぐ画面遷移行えるよう上部にナビゲーション固定させました。
・飲食業の為、清潔感がでるようベースカラーは白でまた高級路線を意識して落ち着いた配色で動きがあるか所はゆっくりとした動きを意識しました。
・ヘッダー、ナビゲーション部分・フッター部分をそれぞれphpファイルを読み込み、１つのファイルで複数ページを更新できるようにしました。
【ヘッダー、ナビゲーション部分のphpファイル】
・レスポンシブデザイン：左上部にハンバーガーメニューとしてナビゲーションを左側に配置しました。
・コンセプトページで素材を紹介する箇所にjavascriptを使い、左右からゆっくりフェードインするようにして動きを付け印象を残すようにしました。
・メニューページではデータベースに登録したメニュー項目を取り出し表示させるようにしました。
【xamppのMyAdminでデータベースとメニュー(items)テーブル作成】
【データベースからwhileでアイテム分繰り返しデータの取り出し】
・メニューページ同様に商品詳細ページもデータベースから商品データを取り出し表示させるようにしました。
また購入数が空欄でカートへ入れるボタンを押下した際、エラー文の表示と入力欄に赤枠がつくようにしました。
・phpを使い、買い物かごで商品を削除できるようにしました。
商品毎の右側にある削除ボタン押下で削除確認のポップアップの表示
→ＯＫで削除され買い物かごのページに戻るようにしています。
リスト下部の買い物かごを空にするボタン押下でも同様に削除確認のポップアップ表示
→ＯＫで買い物かご内のすべての商品を削除し買い物かごのページに戻るようにしています。
・予約情報入力画面では商品詳細ページと同様に空欄箇所があればエラー文の表示と入力欄に赤枠がつくようにしています。入力箇所については他の箇所がエラー時でも再入力不要になるよう入力内容が残るようにしています。
・確認画面へ進み予約確定ボタンを押下後、データベースに予約情報を挿入し、予約完了画面へ遷移するようにしました。
・店舗情報ページについて複数店舗を想定して両サイドの矢印マーク押下で店舗の表示リストの切り替えができるようにしました。またはリスト上部の店舗名ボタン押下で目的の店舗のリストが表示されるようにしています。
・お問い合わせページについて予約情報入力ページと同様の作りをしています。
・オーナー（店舗）側で情報を確認できるようページを作成しました。予約情報を取り扱うため、ログインID、パスワードを設定しました。
【ログイン後、本日の予約状況確認画面へ遷移】
【予約が入っている場合の画面】
・データベースより予約内容を取り出し、表示させています。お客様より予約キャンセルとなった場合、削除ボタン押下でデータベースのデータを削除できるようにしました。
***Special Thanks***
【フリー素材利用サイト】
写真AC（https://www.photo-ac.com/）
イラストAC（https://www.ac-illust.com/）
シルエットAC（https://www.silhouette-ac.com/）