掲示板

記事の概要

私が作成したポートフォリオ解説をします
作った背景、工夫したところ、機能、などをまとめました

背景

簡単な掲示板のようなものを作ろうと思いましたが、掲示板なので盛り上がったり、人がもう一度来たくなる要素のある掲示板を作ろうと思いました。

#目的

・PHPを用いてwebアプリケーションを作成する
・webアプリの基本的な構成、動作を知る
・就活目的なので、自分の技術のレベルを知ってもらう

#スペック
言語
PHP 7.4.2
データーベース
MariaDB 10.4.11
開発環境
Apache　2.4.41

ビジュアルスタジオコード使用

#主な機能
会員登録した人がログインしたら掲示板メッセージを送信できます。

・会員登録
会員のお名前、メールアドレス、パスワード、画像を選択することで会員登録ができます。

・会員登録におけるエラー表示
名前に関しては空のときにエラー、メールアドレスに関しては空の時とすでに登録済みの時はエラー、パスワードに関しては空の時と4文字以下の時はエラー

・ログイン機能
メールアドレス、パスワードを入力します。
データベースにある情報と一致したらログインして、一致しなければログインできないという機能です
次回からログインの欄にチェックをすると、cookieに2週間の間情報が保存されます。

・メッセージ送信機能
メッセージを入力するとデーターベースにメッセージが保存されて、それを作成日の新しい順に表示しています。

・削除機能
そのメッセージを投稿した人だけが削除したメッセージを削除できるようにしました

・返信機能
返信したいメッセージに対して返信が可能です

・いいね機能
いいねは一人の会員に対して1回可能で、もう一度いいねしようとすると、いいねを削除します

#開発手順
1、要件定義
2、環境選定
3、データベース設計
4、設計
5、コーディング

#1、要件定義
今回作成するアプリに必要な機能は
・会員登録
・ログイン機能
・メッセージ表示機能

そのために情報が保存できるデーターベースが必要です

また、メッセージに関しては
・メッセージ送信者がメッセージを削除できる
・すべての会員がどんなメッセージに対しても返信できる
・すべての会員がどんなメッセージに対しても1回だけ「いいね」ができ、その「いいね」が削除できる

#環境選定

PHPを使用。

上記環境はWindowsローカル上に構築しました。

#データーベース設計
どんな情報が必要かを考えてデータベースの設計しました。

「いいね」機能をつけるときに、追加でテーブルが必要になり付け加えました。

※画像追加

#設計

会員登録→ログイン→掲示板→ログアウト→ログイン

の順に移動するように設計しました

#5.コーディング

設計が固まったところで、コーディングをスタート。

※しかし設計とおりにコーディングいかず、設計を変更しながらコーディングしました。いいねの機能は、コーディング中に追加したので、最初の設計通りには行きませんでした。

##5.1データーベース作成
ローカル環境のMysqlサーバーに
専用ユーザーを作成して、データーベースを作成。そのあと、テーブルを作成。

##5.2データーベース接続確認
PDOを用いて、データーベースの接続。
try~catchを用いて、成功しているか判断

##5.3・会員登録機能
入力した値をmemberテーブルに保存。

また、入力欄が空、すでに登録済みメールアドレスを入力したなどの場合、error[]という配列に値を代入します。そして、error[]があるばあいは同じページに、error[]が空ばあいは確認画面に飛びます。また、error[]の要素とその値によってメッセージを赤字でページ内に表現します。

##5.4ログイン機能
入力したemailとpasswordがmemberテーブルに保存されている値と一致した場合には、ログインします。エラーが発生した場合は赤字でメッセージをだします。
自動的にログインするをチェックした場合はcookieに値を2週間保存します。

##5.5メッセージの送信、削除、返信機能
メッセージを送信してデータベースに保存。そして、メッセージを新しい順に写真、名前、日付をつけて表示しました。

また、削除の機能を追加して、返信機能も追加しました。
返信機能では「RE」を押すことで、そのメッセージとそのメッセージを送信主の名前をメッセージの入力欄に記載

#5.6いいね機能
いいね追加、削除機能
データーベースに、coutsテーブルを作成。もしそのメッセージにいいねをしていない場合にいいねをクリックしたら、countデータベースにユーザーのidとメッセージのid、時間を保存する。逆に、そのメッセージにいいねをしている状態でいいねをクリックしたら、countデータベースから登録あったしてカラム（ユーザーのidとメッセージのid、時間を保存したもの）を削除する。

いいね表示機能
そして、countsテーブルから、メッセージのidの数だけいいねの数を表示する

#5.7
htmlspecialcharsでセキュリティ対策をしました

#課題点

・全体のレイアウトのいびつさ
htmlをその都度に入力していたので、いびつなレイアウトになりました。設計をしっかりしてその通りに形を整えることができなかったのが原因と思われます

・ユーザーに配慮した設計
ユーザーの使いやすいような、見た目や機能にできてない。スマートフォンに対応したりしていない。