初めに

フロントエンドエンジニアを目指してプログラミングを学習しています。
長田と申します。
プログラミング学習のアウトプットとして自作のWebサービス「FOOTBALL SHIRTS」のポートフォリオを制作しました。
この記事では「FOOTBALL SHIRTS」の概要や制作過程について説明します。
ソースコード↓
https://github.com/satoruosada/uniform

目的

・フルスクラッチ開発を行うことでWebアプリの基本的な構成、動作を知る.
・自作のWebアプリで同じ初学者の方の役に立つサービスを提供したい.

スペック

使用言語 / HTML５/ CSS3 / Javascript / PHP

DBMS / MySQL

開発環境 / MacOS Catalina 10.15.6

バージョン管理 / SourceTree(3.0.15)

主な機能

ユーザー管理機能
　・ユーザー登録機能
　・ユーザーログイン機能
　・ユーザー編集機能
　・ユーザー削除機能

出品する商品登録管理機能
　・商品登録
　・商品編集
　・商品詳細
　・商品一覧（ページネーション）
　・商品検索機能
　

商品詳細機能
　・商品詳細表示
　・商品へのリンク
　・お気に入り機能
　・掲示板機能（メッセージ投稿）

概要

「FOOTBALL SHIRTS」は、サッカーのユニフォームを出品するWebサービスです。

サッカーのユニフォームマニアが様々な世界中のサッカーのユニフォームを集めたり、転売できる専門のwebサービスを制作してみました。

開発手順

実装させたい主な機能から必要な項目を洗い出し、サンプルとしてExcelに必要なDB情報を書き出していきました。
洗い出した情報を元にテーブルを作成します。

AdobeXDデザインカンプ作成

コーディング

デザインカンプを元に画面モックを作成
その後裏側の機能を実装していきます

セキュリティ対策

バリデーションチェック
サーバーサイド(PHP)側
　☑︎未入力チェック
　☑︎最大、最小文字数チェック
　☑︎半角英数字チェック
　☑︎正規表現を使用したemail型式チェック
　☑︎正規表現を使用したURL型式チェック
　☑︎同値チェック
　それぞれ関数を作成し各フォームで判定を行なっています。
以下一部抜粋です

フロントエンド(HTML)側

なりすまし対策について

セッションハイジャックによるなりすまし対策としてsession_regenerate_id関数を使用しています。

session_regenerate_id関数は、現在のセッションのデータを保持したまま、セッションIDを新しく生成してくれます。

パスワードのハッシュ化について

パスワードをDBで登録する際は開発環境から見えてしまうのでセキュリティ上よくありません。
「FOOTBALL SHIRTS」ではpassword_hash関数でパスワードをハッシュ化してDB登録しています。

ログイン時には、
password_verifiを使用し、ハッシュ化されたパスワードを確認しています。

このとき$passはフォームからpostされたパスワード
DBから配列形式で取り出した情報を$resultに詰め
array_shiftを使って先頭から要素を一つ取り出し第二引数としています。

SQLインジェクション対策

DB接続時は、プレースホルダーを利用しSQL文を作成。
プリペアードステートメントを使うことでSQLインジェクション対策を行なっています。

XSS（クロスサイトスクリプティング）対策

画面へ文字列や数値を出力する際は、htmlspecialchars関数を使いエスケープ処理を行なっています。

エスケープ処理とは特殊な文字を無害な文字に強制的に置き換える方法です

第二引数のエスケープにはいくつか種類がありますが最もエスケープ文字数の多いENT_QUOTESを使用しています。

「FOOTBALL SHIRTS」で出来ること

①「FOOTBALL SHIRTS」へのユーザー登録、ログイン、ログアウト

②ログイン後「FOOTBALL SHIRTS」の商品登録（出品）・編集・マイページ機能

「FOOTBALL SHIRTS」の商品登録ページでは、「FOOTBALL SHIRTS」の商品名、カテゴリー、詳細コメント、商品の画像の登録が可能です。

画像登録にはjQueryを利用しドラック&ドロップでInputされるよう設定しています。

登録完了後はマイページに遷移し、きちんと登録できたことが確認できるようメッセージが表示されます。

マイページでは自身が登録した「FOOTBALL SHIRTS」の商品の閲覧、編集、自身のプロフィール編集、パスワード変更、退会、お気に入り登録した「FOOTBALL SHIRTS」の閲覧が可能です。

③「FOOTBALL SHIRTS」詳細画面に、Ajax処理によるお気に入り登録機能、掲示板機能を実装

お気に入り機能について
「FOOTBALL SHIRTS」の商品詳細画面では、商品画像右上のハートアイコンを押すことで
マイページのお気に入り一覧に商品を登録できます。
こちらはAjaxを用いて実装しています。

掲示板機能について

「FOOTBALL SHIRTS」のやり取りについて気軽に質問できるように
掲示板機能を各詳細ページに実装しています。

まず掲示板自体が存在するかDB情報を確認。
無ければ新規作成します。

もし既に掲示板情報があればメッセージのみ追加できるよう条件分岐させています。

④商品一覧・検索機能

　商品一覧ページにはページネーション、カテゴリ選択による表示順選択機能を実装しました。