【初心者向け】PHPとSQLで掲示板を作る方法とソースコードを公開

💡掲示板をすぐに作りたい人へ💡

PHPで掲示板を作る具体的な方法（処理の仕組みや詳しい解説）は「PHP+MySQL（MariaDB） Webサーバーサイドプログラミング入門」で詳細に学べます。

どうも！プログラミングを勉強しつつ、いろいろなものを作っているなおやん(naoya2_2)です。

今回はプログラミング言語の1つ「PHP」を使って簡易的な掲示板を自作してみたので、そのソースコードを備忘録として書いておきたいと思います。

同じくPHPで掲示板を作ってみたいと思う方は真似しながら作ってみてください！

ちなみに冒頭にも書きましたが、掲示板の仕組みまでじっくり理解したい人はUdemyの以下教材をやってみてください。

>> PHP+MySQL（MariaDB） Webサーバーサイドプログラミング入門

これだけで投稿が登録される仕組みや画面に表示される仕組みまで全部分かります。

【著者プロフィール】
高橋直也（@naoya2_2）
フリーランスエンジニア。SEとして主に某企業顧客管理システムの開発、改修を担当している。ブログでは未経験からSESを経てフリーランスになった経緯等を発信中。

関連記事：未経験からエンジニア転職までの超具体的ロードマップ

1 作った掲示板は非常にシンプルな機能のみ
2 データベースにSQLも用意する
3 掲示板のソースコードはこちら
4 この掲示板の課題点

作った掲示板は非常にシンプルな機能のみ

掲示板と言っても機能は本当にシンプルなもののみを実装。

書き込み(200文字以内)
削除

この2つ。

以下の投稿フォームに入力し、投稿するボタンを押すことで投稿できます。

投稿メッセージだけでなく、投稿された日時や投稿IDも実装。

文字数がオーバーした場合や、1文字も入力されていてない場合はエラー表示を出します。

このような非常にシンプルで初心者にも作れる機能になっています。

データベースにSQLも用意する

掲示板は書き込まれたメッセージを保存しておく必要があるので、データベースの準備も必要です。今回はMySQLを利用しました。

掲示板で書き込まれたメッセージはデータベースに保存され、そのデータベースからメッセージを呼び出して画面に表示します。

↑これが呼び出されると↑

↓こうなる↓

仕組み自体は非常に簡単なので作ってみてくださいね。

掲示板のソースコードはこちら

ではソースコードを書いていきます。

これらをコピーして指定通りのデータベースを用意すれば簡単な掲示板が作れますので、そこから好きなように改良してみてください。

input.html（メッセージ入力画面）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>なおやん掲示板</title>
</head>
<body>
    <h1>投稿フォーム</h1>
    <form action="input_do.php" method="POST">
        <textarea name="message" id="" cols="50" rows="10"></textarea>
        <button type="submit">投稿する</button>
    </form>
    <a href="index.php">投稿一覧</a>
</body>
</html>

<!DOCTYPE html>

<head>

<title>なおやん掲示板</title>

</head>

<body>

<h1>投稿フォーム</h1>

</form>

</body>

</html>

メッセージを入力する画面を作っているHTMLコードです。

ここでは<form>タグを使ってユーザーがメッセージを入力できるようにし、POSTとして受け取る仕組みを作っています。

また、「投稿する」ボタンを押した際に”input_do.php”に画面が推移します。

style,css（ページデザイン）

body {
  margin: 0;
}

header {
  position: fixed;
  margin: 0 auto;
  top: 0;
  left: 10%;
  width: 80%;
  height: 50px;
  background-color: black;
  opacity: 0.6;
  color: white;
}

header .post {
  font-size: 20px;
  display: inline-block;
  padding: 10px 20px;
  background-color: green;
  position: absolute;
  right: 0;
  color: white;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  z-index: 1;
}

header .post:hover {
  background-color: #006600;
}

h1 {
  display: inline-block;
  margin: 0 auto;
  text-align: center;
  width: 100%;
  height: 50px;
}

.container {
  width: 60%;
  margin: 100px auto;
}
/*# sourceMappingURL=style.css.map */

body {

margin: 0;

}

header {

position: fixed;

margin: 0 auto;

top: 0;

left: 10%;

width: 80%;

height: 50px;

background-color: black;

opacity: 0.6;

color: white;

}

header .post {

font-size: 20px;

display: inline-block;

padding: 10px 20px;

background-color: green;

position: absolute;

right: 0;

color: white;

-webkit-transition: all 0.3s;

transition: all 0.3s;

z-index: 1;

}

header .post:hover {

background-color: #006600;

}

h1 {

display: inline-block;

margin: 0 auto;

text-align: center;

width: 100%;

height: 50px;

}

.container {

width: 60%;

margin: 100px auto;

}

/*# sourceMappingURL=style.css.map */

cssファイルで外観を整えています。

ここでは特に難しいことはやっていないので、オリジナルに改良してみてください。

index.php（投稿表示画面）

<?php require('dbconnect.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>なおやん掲示板</title>
</head>
<body>
<header>
    <h1>なおやん掲示板</h1>
    <a class="post" href="input.html"><strong>新規投稿</strong></a>
</header>
<div class="container">
    <?php
    $messages = $db->query('SELECT * FROM posts');
    while ($message = $messages->fetch()): ?>
        <?php print($message['message']); ?> //DBのmessageカラムの値を画面出力
        <br>
        <?php print('投稿ID:' . $message['id']); ?> //DBのidカラムの値を画面出力
        <?php print('投稿日時：' . $message['modified']); ?> //DBのmodifiedカラムの値を画面出力
        <a href="delete.php?id=<?php print($message['id']); ?>">削除</a>
        <br>
        <hr>
    <?php endwhile; ?>
</div>
</body>
</html>

<?php require('dbconnect.php'); ?>

<!DOCTYPE html>

<head>

<title>なおやん掲示板</title>

</head>

<body>

<h1>なおやん掲示板</h1>

</header>

<?php

$messages = $db->query('SELECT * FROM posts');

while ($message = $messages->fetch()): ?>

<?php print($message['message']); ?> //DBのmessageカラムの値を画面出力

<br>

<?php print('投稿ID:' . $message['id']); ?> //DBのidカラムの値を画面出力

<?php print('投稿日時：' . $message['modified']); ?> //DBのmodifiedカラムの値を画面出力

<br>

<hr>

<?php endwhile; ?>

</div>

</body>

</html>

投稿されたメッセージを一覧するページを作っているphpファイルです。

データベースに接続し、queryでSQLを操作しデータベース内のメッセージやid、投稿日時を呼び出しています。

input_do.php（投稿送信画面）

<?php require('dbconnect.php')?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>なおやん掲示板</title>
</head>
<body>
    <?php
    $message = $_POST['message'];
    if (strlen($message) >= 1 && strlen($message) <= 200) {
        $statement = $db->prepare('INSERT INTO posts SET message=?');
        $statement->execute(array($_POST['message']));
        echo '投稿を送信しました';
    } else {
        echo '投稿エラー: 200文字以内で入力してください';
    }
    ?>
    <a href="index.php">投稿一覧</a>
</body>
</html>

<?php require('dbconnect.php')?>

<!DOCTYPE html>

<head>

<title>なおやん掲示板</title>

</head>

<body>

<?php

$message = $_POST['message'];

if (strlen($message) >= 1 && strlen($message) <= 200) {

$statement = $db->prepare('INSERT INTO posts SET message=?');

$statement->execute(array($_POST['message']));

echo '投稿を送信しました';

} else {

echo '投稿エラー: 200文字以内で入力してください';

}

</body>

</html>

投稿送信画面です。

if文で条件分岐し、POSTで送られたメッセージが1文字以上200文字以下の場合は通過するように、それ以外(0文字や200文字以上)の場合はエラーメッセージを表示する仕組みにしています。

編集後記（補足）

すでにプログラミングに慣れている場合は、投稿送信画面や削除画面は個別に作らずメイン画面上でポップアップ等出して完結させるのがスマートかもしれません。

delete.php（削除画面）

<?php require('dbconnect.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>なおやん掲示板</title>
</head>
<body>
<?php
$id = $_REQUEST['id'];
if (is_numeric($id) && $id >= 1): ?>
    <?php
        $messages = $db->prepare('SELECT * FROM posts WHERE id=?');
        $messages->execute(array($id));
        $message = $messages->fetch();
        echo $message['message'];
    ?>
    <a href="delete_do.php?id=<?php print($message['id']); ?>">本当に削除しますか？</a>
<?php endif; ?>
<?php
if (!is_numeric($id) || $id <= 0): ?>
    <?php echo '正しいURLを指定してください'; ?>
    <a href="index.php">投稿一覧へ戻る</a>
<?php endif; ?>
<br>
</body>
</html>

<?php require('dbconnect.php'); ?>

<!DOCTYPE html>

<head>

<title>なおやん掲示板</title>

</head>

<body>

<?php

$id = $_REQUEST['id'];

if (is_numeric($id) && $id >= 1): ?>

<?php

$messages = $db->prepare('SELECT * FROM posts WHERE id=?');

$messages->execute(array($id));

$message = $messages->fetch();

echo $message['message'];

<a href="delete_do.php?id=<?php print($message['id']); ?>">本当に削除しますか？</a>

<?php endif; ?>

<?php

if (!is_numeric($id) || $id <= 0): ?>

<?php echo '正しいURLを指定してください'; ?>

<a href="index.php">投稿一覧へ戻る</a>

<?php endif; ?>

<br>

</body>

</html>

投稿一覧画面で「削除」を押した際に推移する削除画面を作っています。

本当に削除してOKかチェックを行います。

delete_do.php（削除確認画面）

<?php require('dbconnect.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<?php
$id = $_REQUEST['id'];
$delete = $db->prepare('DELETE FROM posts WHERE id=?');
$delete->execute(array($id));
echo '削除しました'
?>
<a href="index.php">投稿一覧</a>
</body>
</html>

<?php require('dbconnect.php'); ?>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<?php

$id = $_REQUEST['id'];

$delete = $db->prepare('DELETE FROM posts WHERE id=?');

$delete->execute(array($id));

echo '削除しました'

</body>

</html>

実際に削除するSQLを実行し、メッセージを削除します。

dbconnect.php（データベースに接続）

<?php
try {
    $db = new PDO('mysql:dbname=original_bbs; host=127.0.0.1; port=8889; charset=utf8', 'root', 'root');
} catch(PDOException $e) {
    echo '接続エラー:' . $e->getMessage();
}
?>

<?php

try {