◆プログラムの処理フロー
大きく分けて4つで構成されています。
- ①データベース（MySQL）との接続
- ②投稿データのバリデーションと保存
- ③表示用データの取得
- ④HTMLへの動的な出力
PHPを用いたchatアプリの実装について
◎今回伝えたいこと
これまでフロントの部分を重点的に触って、現在バックを勉強してる最中ですが結局どんなことができるのかということを知るためによく見るchatアプリをphpとmysqlを用いて実装したので紹介したいと思います。
◎テーマを決めた背景
PHPの学習を始めるにあたり、基礎となる『データの送受信』と『データベースへの保存』の流れを体系的に理解することを目的に、本アプリを制作しました。Webアプリケーションの根幹となる仕組みが凝縮されたチャットアプリを題材に選ぶことで、初心者としてまず習得すべき基本スキルの定着を図りました。
◎技術内容
作ったアプリの見た目は以下の様になっています。
①データベース（MySQL）との接続
PDOインスタンスを生成し、掲示板のデータを管理するデータベースへ接続します。接続エラーが発生した場合には、例外処理（try-catch）を用いて適切にエラーメッセージを表示するようにしています。
//DB接続
try {
$pdo = new PDO('mysql:host=localhost;dbname=bbs-yt', "root", "");
} catch (PDOException $e) {
echo $e->getMessage();
}
②投稿データのバリデーションと保存
ユーザーが「書き込む」ボタンを押した際、入力された「名前」と「コメント」が空でないかをチェックします。問題がなければ、プリペアドステートメントを使用してSQLインジェクション対策を施した上で、データベースへ安全にデータを保存します。
//フォームを打ち込んだ時
if (!empty($_POST["submitButton"])) {
//名前のチェック
if (empty($_POST["username"])) {
echo "名前を入力してください";
$error_messages["username"] = "名前を入力してください";
}
//コメントのチェック
if (empty($_POST["comment"])) {
echo "コメントを入力してください";
$error_messages["comment"] = "コメントを入力してください";
}
if (empty($error_messages)) {
$postDate = date("Y-m-d H:i:s");
try {
$stmt = $pdo->prepare("INSERT INTO `bbs-table` (`username`, `comment`, `postDate`) VALUES (:username, :comment, :postDate);");
$stmt->bindParam(':username', $_POST["username"]);
$stmt->bindParam(':comment', $_POST["comment"]);
$stmt->bindParam(':postDate', $postDate);
$stmt->execute();
} catch (PDOException $e) {
echo $e->getMessage();
}
}
}
③表示用データの取得
データベースから過去の投稿データ（ID、名前、コメント、投稿日時）を全件取得します。
//DBからコメントデータを取得する
$sql = "SELECT `id`, `username`, `comment`, `postDate` FROM `bbs-table`;";
$commment_array = $pdo->query($sql);
//DBの接続を閉じる
$pdo = null;
④HTMLへの動的な出力
取得したデータをforeachループを使用してHTML内に展開します。PHPの「別構文（endforeach）」を採用することで、HTML構造の中での視認性を高めています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>PHP掲示板</title>
</head>
<body>
<h1 class="title">PHPで掲示板アプリ</h1>
<hr>
<div class="boardWrapper">
<section>
<?php foreach ($commment_array as $commment): ?>
<article>
<div class="wrapper">
<div class="nameArea">
<span>名前:</span>
<p class="username"><?php echo $commment["username"] ?></p>
<time><?php echo $commment["postDate"] ?></time>
</div>
<p class="comment"><?php echo $commment["comment"] ?></p>
</div>
</article>
<?php endforeach; ?>
<form class="formWrapper" method="POST">
<div>
<input type="submit" value="書き込む" name="submitButton">
<label for="">名前 : </label>
<input type="text" name="username">
</div>
<div>
<textarea class="commentTextArea" name="comment"></textarea>
</div>
</form>
</section>
</div>
</body>
</html>
◎課題点
ユーザーが入力した文字をそのまま表示しているため、悪意のあるプログラム（JavaScriptなど）が投稿されると実行されてしまう危険があります(XSS(クロスサイトスクリプティング)対策のためにサニタイズ処理が必要)。