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

掲示板 アイキャッチ プログラミング

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

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

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

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

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

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

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

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

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

この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>

メッセージを入力する画面を作っている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 */

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']); ?>
        <br>
        <?php print('投稿ID:' . $message['id']); ?>
        <?php print('投稿日時:' . $message['modified']); ?>
        <a href="delete.php?id=<?php print($message['id']); ?>">削除</a>
        <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>

投稿送信画面です。

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>

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

本当に削除して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>

実際に削除する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ファイルです。

このファイルを他のファイルでimportすることで、それぞれがデータベースに接続可能になります。

さらに詳細は以下サイトで学習できます。

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

この掲示板の課題点

とりあえずお遊び感覚で掲示板を作ってみましたが、もっと実用性をもたせる課題点としては、

  • ログインやログアウトの実装
  • 誰でも削除ができてしまうので改善
  • デザインをかっこよく

こんなところですね。

しっかりしたWebサービスに発展させるなら登録する仕様にしてログイン・ログアウト機能を実装すると良いでしょう。

また、現状は誰でもメッセージを削除できてしまうので、書き込んだ人しか削除できない仕様にしたほうが使いやすくなりますね。

あとはデザインがダサいので要改善といったところでしょうか。これから少しずつ改善していきます。

関連記事:【無料あり】プログラミングスクールのおすすめ5選!