オリジナルWebサービス -Lunches- (フルスクラッチ開発)

##はじめに
フロントエンジニアを目指してプログラミング学習をしている小林と申します。
本記事ではオリジナルWebサービス「Lunches」の概要や制作過程について説明します。

<img width="1440" alt="スクリーンショット 2019-11-08 午後5.15.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386284/172de1bc-2ac9-981b-03de-cda400b331db.png">

##URL
リンク:<a href="http://front-yk.com/">Lunches</a>

##目的
- フルスクラッチ開発でPHP、SQLの言語理解を深める
- Webサービスの基本的な構成、動作を把握する

##スペック
プログラミング言語:HTML５/ CSS3 / Javascript / PHP

データベース言語:MySQL

開発環境:macOS Catalina 10.15.1

バージョン管理:SourceTree

本番環境:さくらサーバー

##機能
**ユーザー管理機能**
　・ユーザー登録
　・ログイン
　・プロフィール編集
　・ユーザー削除機能
　・退会

**イベント機能(メインサービス)**
　・イベント投稿
　・イベント詳細
　・イベント一覧(ページネーション)
　・カテゴリー検索、日付検索
  
##サービス概要##
 「Lunches」はランチタイムに恋愛やビジネス、友達作りなどもイベントを気軽に開催することができる　
Webサービスです。
インターネットを通じて人との交流を活性化させることを目的として制作しました。

##開発手順
###1.ワイヤーフレーム作成
7つブラウザ画面をノートに手書きでワイヤーフレームを作成しました。

###2.テーブル設計
実装させたい機能から必要な情報を洗い出し、それに応じてテーブルを作成しました。
作成したテーブルは以下の3つです。

**users**
<img width="1321" alt="users.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386284/5d54154e-a357-63cb-8de6-aa393ea5ede0.png">


**event**
<img width="1098" alt="event.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386284/cfd07e04-82c2-fa94-0f9f-5e32d1e5eabe.png">

**category**
<img width="1108" alt="category.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386284/924e5206-a8b4-41f8-5d1a-4e872c20c89a.png">

###3.画面モック作成
ワイヤーフレームを元にHTML・CSSでコーディングを行い画面モックを作成しました。

##セキュリティ

###バリデーションチェック
　・未入力チェック
　・Email型式チェック(正規表現)
　・Email重複チェック
　・最大、最小文字数チェック
　・半角英数字チェック
　・同値チェック

＊コード一部抜粋
<img width="860" alt="スクリーンショット 2019-11-27 22.18.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386284/90085794-e650-0841-bbd4-638e62f2f5e2.png">

###例外処理
DBへ接続する際にはエラーで接続できない可能性を考慮して「try」「catch」で例外処理を行っています。
<img width="899" alt="スクリーンショット 2019-11-29 21.11.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386284/07e37872-e894-9907-41e8-cf1dfc3fa534.png">

###セッションIDの再生成
セッションハイジャックによって第三者による乗っ取りを防ぐために*session_regenerate_id*を使用
この関数をコールすることで現在のセッションデータを保持したまま、セッションIDを新しくすることができる。
<img width="1159" alt="session.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386284/64a39d0c-14df-7be2-e8b7-1b8d5e838baf.png">

###パスワードハッシュ
<img width="958" alt="スクリーンショット 2019-11-29 22.20.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386284/3d40de1d-737f-0ace-e4d3-dd19304b24c6.png">
DB側でユーザーのパスワードが漏れないようにパスワードを*password_hash*でセキュリティを高めています。

<img width="646" alt="スクリーンショット 2019-12-04 19.54.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386284/af73f1ff-ed4c-2071-c827-f5efe2aafc55.png">

 ログイン時には*password_verify*を使用してハッシュ化されたパスワードと照合しています。
このとき第一引数である$passにはフォームからpostされたパスワード
そして、第二引数にはDBから配列形式で取り出した情報を$resultに詰め
*array_shift*を使って先頭のパスワードを取り出しています。

###SQLインジェクション対策
DB接続時にはプレースホルダーを使用し、SQL文を作成。
値をバインドすることでSQLインジェクション対策を行っています。
<img width="631" alt="スクリーンショット 2019-12-04 21.30.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386284/7fa32b02-118f-eabe-fc87-b8f5bd19b1c0.png">

##Lunchesの使い方
#####①イベントの登録・　プロフィール編集
<img width="1440" alt="スクリーンショット 2019-12-18 14.18.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386284/fec35376-b270-dedc-3a8f-1f061c3648fd.png">
イベント投稿、プロフィール編集の画像登録ではjQueryを使用し、ドラック&ドロップでファイルをinputすることができます。

#####②イベント一覧・検索機能
<img width="1440" alt="スクリーンショット 2019-12-18 14.25.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386284/b7cd6f52-a599-5556-959f-562a3775f98a.png">
イベント一覧ページではGETパラメータを使用して、ページネーションと検索機能を実装しています。
検索機能はカテゴリー検索、投稿日時のソート順検索ができます。

##今後の課題
・スマートフォンにも対応したレスポンシブデザイン
・オブジェクト指向に基づく、保守性の高いコード設計
・FLOCSSをベースとしたCSS設計

主に以上の３点です。
特に様々なデバイスからアクセスされるユーザーを想定したレスポンシブデザインでの設計は
現在のWebサービスでは必要不可欠な物だと思いました。