69
57

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

[ポートフォリオ] エンジニア専用書籍サービス EggBook について【FWなし。素のphpで作成しました】

Last updated at Posted at 2019-05-13

##はじめに
はじめまして
現在、転職活動を行なっている なおと です。
まずは、ご覧いただきありがとうございます。

この記事では
ポートフォリオとして使用している「Eggbook」について説明していきます。

##ポートフォリオのURL
Eggbook

May-12-2019 15-50-54.gif

(ユーザー登録機能を行うと、書籍登録やお気に入り機能が使えるようになります。
登録を行わなくとも、大半の機能は使用可能です)

##主な機能
◯フレームワークを使わないPHPを用いたユーザー管理機能
 ・ユーザー登録機能
 ・ユーザー編集機能
 ・ユーザー削除機能
 ・ユーザーログイン機能

◯フレームワークを使わないPHPを用いた商品(書籍)管理機能
 ・書籍登録
 ・書籍詳細
 ・書籍一覧(ページネーション)
 ・書籍編集
 ・書籍削除
 ・書籍検索機能(カテゴリー(言語)/ランク(習得難度)の検索)
 ・書籍ソート機能(ページ数/金額のソート)

◯商品詳細機能
 ・書籍詳細表示
 ・お気に入り機能
 ・Amazonへのリンク
 ・掲示板機能(メッセージ投稿)

◯その他機能
 ・

##ポートフォリオ概要
エンジニアの中で良本とされている参考書。
しかし、相手のレベル感との違いで、オススメされた参考書が難しすぎることも...

そこで、
ページ数の検索により、参考書の分量の推測に役立てるだけでなく
参考書の難易度を3段階で分類し、検索可能にできるようにすることで

新しい言語を学びたての人や、
すでに使いこなしているが+αの情報が欲しい中・上級者向けの書籍を
見つけやすくするサービスです。

##具体的な機能の詳細について
それでは詳しく見ていきましょう。

###①書籍登録では書籍のタイトル、ランク、カテゴリー、書籍画像、ページ数、書籍URL、詳細・説明を入力し、投稿可能。

May-12-2019 16-30-10.gif

商品登録の画像のライブプレビューはjQueryを用いて実装しています。
CSSでopacityを0とし、選択範囲を広げ、ドラックアンドドロップでInputされるように設定しています。

また、画像を入力した後は、Inputされた画像はData URLを用いて
.attrでsrcを変更することで動的に画像表示しています。

スクリーンショット 2019-05-12 18.16.11.png

また書籍の登録と編集に関しては同一のhtmlを条件分岐行うことで使い分けています。
そのためログインを行わないと登録できないようにし、
DBのデータの有無でDBにINSERTを行うのか、UPDATEを行うのかを決定しています。
スクリーンショット 2019-05-12 20.06.53.png

バリデーションチェックでは、PHP側で行い、
 ・未入力チェック
 ・同値チェック
 ・文字数チェック
 ・半角チェック
 ・最大、最小文字数チェック
などを正規表現を使用しつつ、判定を行いました。

スクリーンショット 2019-05-12 20.07.59.png

スクリーンショット 2019-05-12 20.08.23.png

###②書籍一覧画面では、書籍検索機能、ソート機能、ページネーション機能の実装

表示件数を動的に変更するように設定し、
DBのデータを読み込む順序とデータ量を変化させることで、
検索・ソート機能を実装しました。

ソート・検索機能
May-12-2019 16-48-15.gif

スクリーンショット 2019-05-13 14.44.45.png

総書籍数と表示数からページ数を算出し、
総ページ数と残りのページ数から条件分岐を行うことで

現在のページを起点として±2ページを表示する
動的なページネーションを実装しました。

ページネション機能の実装
May-12-2019 16-47-19.gif

スクリーンショット 2019-05-13 14.48.46.png

###③書籍詳細画面では、Ajax処理によるお気に入り機能の実装や掲示板機能の実装

商品詳細画面では、右上のハートマークを押すことで
お気に入りに追加できる機能をAjaxを用いて実装。

Amazonへのリンクを設置。
商品一覧へ戻った際も検索して表示している場合は
GETで検索条件を渡し、検索していた画面を表示するように設定しました。

Ajax処理によるお気に入り機能や掲示板機能
May-12-2019 16-52-29.gif

お気に入り機能
スクリーンショット 2019-05-13 15.01.23.png

掲示板機能では、
LINE風の見た目に変更し、親しみやすさと使いやすさを向上させています。

掲示板機能
スクリーンショット 2019-05-13 15.02.09.png

###④ログイン機能では、ユーザー登録・削除・編集、パスワードリマインダー機能を実装

ユーザー登録時やログインのバリデーションチェックは
 ・未入力チェック
 ・Email形式チェック(正規表現)
 ・Email重複チェック(DBと連携)
 ・同値チェック
 ・固定長チェック
 ・最大、最小文字数チェック
 ・半角チェック(正規表現)
 ・電話番号形式チェック(正規表現)
 ・郵便番号形式チェック(正規表現)
を行いました。

パスワード保存時には password_hashによるハッシュ化を行い
セッションのリミットは1時間とし、login_limitとしてセッション内に埋め込みました。

スクリーンショット 2019-05-13 15.20.57.png

ログイン時には、
password_verifiを使用し、ハッシュ化されたパスワードを確認。
セッションの制限時間を更新・延長を行い、マイページへ遷移させるようにしています。

スクリーンショット 2019-05-13 15.24.39.png

###⑤ユーザー画面では、お気に入りした書籍や登録した書籍を閲覧可能

マイページでは、user_idを元に
自身がお気に入りした書籍や、登録した書籍を閲覧できるようになっています。

May-12-2019 16-56-17.gif

###⑥セキュリティ面の対策として、なりすまし防止、SQLインジェクション対策、サニタイズを実装。

セッション管理によるなりすまし防止
スクリーンショット 2019-05-15 11.58.20.png

DB接続時は、プレースホルダーによるSQLインジェクション対策
スクリーンショット 2019-05-15 12.00.10.png

サニタイズ関数も使用

スクリーンショット 2019-05-15 12.04.09.png

この他に④でも述べていますが
パスワード管理にはハッシュ化を行って管理しています。

##どうやって作成したのか

1.構想: 必要な機能を洗い出し
 その機能を実現するために必要なテーブルの整理(第1,2正規化)。

2.準備: ワイヤーフレームを作成

3.制作: 各ページの作成
 書籍一覧ページとマイページの主要なページ2つから作り込み、機能を拡張を繰り返す。

4.デバッグ: console.logやdebug(),print_r()等を繰り返し行い
 値が取れていないない場合、なぜ取れていないのか仮説と検証を繰り返す。

##制作期間
 学習時間を随時アップしているTwitter(https://twitter.com/190131start )から算出
 
 約32日 計104.7時間ほど

##このアプリの課題
 ・ユーザーが登録したくなるような動機付け
 ・コメント機能・検索機能のAjax化
 ・書籍登録方法の簡便化(API)
 ・表示の高速化

##スペック/DB
 ・HTML5
 ・CSS3
 ・jQuery 2.2.2
 ・ローカル環境 MAMP 5.3 /MySQL 7.3.1
 ・本番環境 WordPress/MySQL 7.2.6

##最後に
  Twitter:https://twitter.com/190131start

見込みがあると思った企業の方へ。
是非連絡お待ちしております!!!!!!
 

69
57
11

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
69
57

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?