Edited at

ポートフォリオ「継続支援アプリ CHIRITSUMO!!」について


はじめに

はじめまして。

今回、PHPの基礎のアウトプットを兼ねてポートフォリオを作成しましたので、説明します。


目的

PHP言語を用いてフルスクラッチ開発をすることで、下記事項が理解できているかを確認する

・セッション

・GET送信、POST送信

・条件分岐、繰り返し処理

・DB関連(DB接続、SQL実行)

・DBデータの編集、画面への出力


スペック

■言語

PHP, HTML, CSS, JavaScript(jQuery)

■DBMS

MySQL

■フレームワーク

なし

■サーバー

XSERVER


ポートフォリオ

URL:http://chiritsumo.nyankormotti.com


ポートフォリオの概要

勉強時間、実施内容を記録するWEBサービス


ポートフォリオの機能

■ユーザー情報関連

・ユーザー登録

・ログイン・ログアウト

・ユーザープロフィール編集

・パスワード変更

・パスワードリマインダー

・退会

■メイン機能

・マイページ(実績一覧)

・実績登録

・実績編集

・実績削除

・実績詳細

・カテゴリー編集

・実績検索

■その他

・お問い合わせ


何ができるか

■実績を投稿できる

 (勉強した日にち、勉強時間、内容、内容の画像を保存できる。POST送信にて対応)

ezgif.com-video-to-gif.gif

■実績詳細にて保存した画像を拡大して閲覧できる(lightboxを使用)

ezgif.com-video-to-gif.1gif.gif

■実績をカテゴリーで検索、また実績日を範囲指定して検索できる。

実績登録した日にちの昇順、降順でソートを実施できる。

ページネーション後も検索情報を保持している。

(GET送信にて対応)

 ※多くのデータ数が必要なため、ユーザーを変更しています。

ezgif.com-video-to-gif3.gif

■その他

・パスワードリマインダーにて、登録されたメールアドレス宛に認証キー、新しいパスワードを送信する。


作成方法

1.機能の洗い出し

2.画面モックの作成

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

3.テーブル設計、DB作成

4.各画面、機能を実装

ログイン、ユーザー登録機能などセッション周りから作成。

→パスワード変更など非機能要件

→POST・GET送信関連などのメイン機能を実装

→細部の調整

5.テスト

・各機能の処理が正常終了すること。

・商品一覧表示機能に関しては、境界値のデータを作成し、実施。

・URL直打ちした際にセッションが保持されているか確認。 など


工夫したところ

■検索条件の保持

実績詳細画面からマイページへ遷移する際や、ページングにてページを移動する際に、検索条件を保持するために、GET送信を用いています。

実績詳細画面から戻る際は、実績テーブルのキーであるIDのみGET送信から削除して遷移しています。(遷移時のURLにて「p_id」を削除しています)

■お問い合わせ機能

セッション情報の有無(ログイン前後)にて、お問い合わせ画面のメールアドレス入力フォームの表示・非表示を制御しています。

 (ログイン後はセッションIDよりDBからメールアドレスを取得し、メールを送信する仕様にしています。)

■マイページ画面の余白

マイページ画面の余白を確保するために、検索フォームをモーダルで出力するようにしています。

また、ヘッダーのメニューをドロップダウンにするようにして、空間を確保し、ゆとりを持たせています。

(実績一覧の表示にはcssのoverflow:scrollにてスクロールして表示しています。)


ポートフォリオの課題

・カテゴリー名変更機能の追加(登録、削除機能のみ)

・FWによるMVCモデルの適用(保守性が低い)

・SASSを用いたCSS実装(保守性が低い)

・レスポンシブ対応(1000px以下だと崩れる)


現在の学習内容(2019.05.12現在)

・Laravel

・JavaScriptの基礎

・React、Vue.js(主にVue.js)

・SASS

・CSS設計(FLOCSS)

→Laravelでポートフォリオ作成予定