【PHP】掲示板サイトを作りながら学ぶPHP学習

2025年2月2日

この記事では、簡単な掲示板サイトを作りながらPHPの勉強をしていきます。できる限り分かりやすく説明していきますが、分かりにくい箇所があれば気軽にコメントしてください。

まだPHPの環境設定ができていない方は↓を参考にしてみてください。

作成する掲示板サイトの完成形
掲示板サイト作成前の準備
HTMLをコーディング
MySQLでデータベースを作成する
データベースに接続する
データベースへの書き込み
データベースからデータを取得する
取得したデータをブラウザー上に表示する
不正対策(特殊文字をEntityに変換する)
データベース接続を閉じる

作成する掲示板サイトの完成形

複雑なコードやコーディング量が多いと難易度が上がってしまうため、今回はHTMLとPHPのコードのみで掲示板サイトを作成しています。そのため出来上がりの感じがシンプルすぎるものになっていますが、続編でCSSやJavaScriptも使用して装飾していきたいと思っています。

	<?php
	//タイムゾーンを東京に設定
	date_default_timezone_set('Asia/Tokyo');
	//投稿データの格納用
	$posts = array();
	//エラーの格納用
	$error = array();

	//データベース接続
	try {
	$dbh = new PDO('mysql:host=127.0.0.1;dbname=bbs', 'root', '');
	}catch(PDOException $e){
	echo 'DB接続エラー:' . $e->getMessage();
	}

	//フォームを送信したとき
	if(!empty($_POST['submitButton'])){

	//名前のチェック
	if(empty($_POST['username'])){
	$error['username'] = 'error';
	}
	//コメントのチェック
	if(empty($_POST['comment'])){
	$error['comment'] = 'error';
	}

	if(empty($error)){
	$postDate = date('Y-m-d H:i:s');

	try {
	$stmt = $dbh->prepare("INSERT INTO `bbs-table` (`username`, `comment`, `postDate`) VALUES (:username, :comment, :postDate)");
	$stmt->bindParam(':username', $_POST['username'], PDO::PARAM_STR);
	$stmt->bindParam(':comment', $_POST['comment'], PDO::PARAM_STR);
	$stmt->bindParam(':postDate', $postDate, PDO::PARAM_STR);

	$stmt->execute();
	}catch(PDOException $e){
	echo 'DBへの書き込みエラー:' . $e->getMessage();
	}
	}
	}

	//DBからコメントデータを取得する
	$posts = $dbh->prepare('SELECT `id`, `username`, `comment`, `postDate` FROM `bbs-table`');
	$posts->execute();

	//htmlspecialcharsのショートカット
	function h($value) {
	return htmlspecialchars($value, ENT_QUOTES);
	}

	//DBの接続を閉じる
	$dbh = null

	?>

	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>掲示板</title>
	</head>
	<body>
	<h1>掲示板</h1>
	<hr>
	<section>
	<?php foreach($posts as $post): ?>
	<article>
	<p>名前 : <?php echo h($post["username"]); ?></p>
	<p><?php echo h($post["comment"]); ?></p>
	<time><?php echo h($post["postDate"]); ?></time>
	</article>
	<?php endforeach; ?>
	</section>
	<form method="post">
	<div>
	<label for="">名前 : </label>
	<input type="text" name="username">
	</div>
	<div>
	<textarea name="comment"></textarea>
	</div>
	<div>
	<input type="submit" value="書き込む" name="submitButton">
	</div>
	</form>
	</body>
	</html>

view raw index.php hosted with ❤ by GitHub

掲示板サイト作成前の準備

ApacheとMySQLを起動する

XAMPPコントロールパネルを起動して、ApacheとMySQLを起動しましょう。

phpMyAdminを開く

ApacheとMySQLを起動したらAdminをクリックしてphpMyAdminを開きましょう。

↓の画面が表示されれば大丈夫です！

作成する掲示板サイトのフォルダを作る

エクスプローラーを開いて、Windows(C:) → xampp → htdocs と進み、htdocsフォルダの中に今回作成するbbsフォルダを作りましょう。

作ったフォルダをVSCodeで開く

bbsフォルダを作成したらVSCodeを開き、ファイル → フォルダーを開くでbbsフォルダを開きましょう。

index.htmlファイルを作る

まずは、HTML部分を作っていきます。PHPのコードを書くにはファイルの拡張子をphpにする必要がありますが、まだHTMLのコードしか書かないので拡張子はhtmlにしておきましょう。

htmlファイルにしておくことでコーディング中の予測変換など補佐機能がありコードが打ちやすいです。

HTMLをコーディング

↓のHTMLコードを入力しましょう。

	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>掲示板</title>
	</head>
	<body>
	<h1>掲示板</h1>
	<hr>
	<section>
	<article>
	<p>名前 : A</p>
	<p>おはようございます</p>
	<time>2023-8-12 23:09:30</time>
	</article>
	</section>
	<form method="post">
	<div>
	<label for="">名前 : </label>
	<input type="text" name="username">
	</div>
	<div>
	<textarea name="comment"></textarea>
	</div>
	<div>
	<input type="submit" value="書き込む" name="submitButton">
	</div>
	</form>
	</body>
	</html>