WordPressのようなコメント管理システムを作ってみよう

2020

1/25

WordPressのようなコメント管理システムを作ってみよう – 第5回

2020年01月25日約20分で読めます

こんにちは、MIO webデザインです。

『WordPressのようなコメント管理システムを作ってみよう』企画も、いよいよ今回で最終回です！

対象者

PHPの基礎がわかる人
phpMyAdminの使い方がわかる人

第1回目では、データベース情報を定義するdb_info.php・入力されたコメントをデータベースに保存するsave_comment.phpを。

第2回目では、コメントの操作を行うdashboard.php（未完成）・dashboard.phpにアクセスするためのlogin.php・dashboard.phpからログアウトするためのlogout.phpを。

第3回目では、いただいたコメント一覧として表示するdashboard.php（完成）・コメントを編集するupdate.php・コメントを削除するdelete.phpを。

第4回目では、いただいたコメントをsave_comment.php上で表示するためのdisplay.php・コメントに返信するreply.phpを作成しました。

最後は、新しい管理アカウントを追加するための、サインアップ（新規登録）機能を作成します！

1. これから作っていくもの
2. 今回作るもの – 『サインアップ機能』
3. signup.phpの作成
4. まとめとコードのダウンロード

これから作っていくもの

改めまして、簡易コメント管理システム『ふらこめ（necofly comment system）』制作シリーズ第5回です！

WordPressのコメント管理機能をイメージしてくれるとありがたいです。

『ふらこめ』で実装する機能は以下の通り。

ふらこめで実装する機能

コメントの受付
管理画面でのコメント管理
コメントの承認・削除・編集・返信機能
管理画面へのログイン機能
新規管理アカウント取得機能

ざっとこんな感じです！

コメント欄からコメントを受け付けられるのはもちろんのこと、コメントの管理画面も欲しいところですね。

ただ見る人全員が好き勝手管理できたら大変なので、ログイン機能も設置。ついでに新規管理アカウント取得（サインアップ）機能も作ってしまいましょう。

最終的には下記のようなファイル構造になります。

hura_come
├── admin
│   ├── dashboard.php
│   ├── delete.php
│   ├── display.php
│   ├── login.php
│   ├── logout.php
│   ├── reply.php
│   ├── signup.php
│   └── update.php
├── css
│   └── style.css
├── db_info
│   └── db_info.php
├── images
│   └── logo.jpg
└── save_comment.php

では早速作っていきましょう！

今回作るもの – 『サインアップ機能』

いよいよ『ふらこめ』作成も大詰め。コメント管理を行うダッシュボードと、その他主要機能を作成し、ほとんど完成状態です。最後に新規アカウント登録（サインアップ）機能を作って、『ふらこめ』を完成とさせていただきます。

コメントの投稿ページ・投稿コメントの管理ページ・管理画面へのログインページ。

これだけあればコメント管理プログラムとしては十分ですが、最後におまけとしてサインアップ機能を作って本企画を締めさせていただきたいと思います。

サインアップとは新規登録を意味します。つまり、dashboard.phpにアクセスできるユーザーを、新しく作成する機能です。

今回実装する機能

新しいコメント管理ユーザーを追加する『サインアップ機能』

今回新たに作成するファイルは1つ。『signup.php』です。

下記を参考にファイルを配置しましょう。

hura_come
├── admin
│   ├── dashboard.php
│   ├── delete.php
│   ├── display.php
│   ├── login.php
│   ├── logout.php
│   ├── reply.php
│   ├── signup.php
│   └── update.php
├── css
│   └── style.css
├── db_info
│   └── db_info.php
└── save_comment.php

では最後のファイルを作っていきましょう！

signup.phpの作成

全体のコード

まずは全体のコードを見てみましょう。

<?php

    require '../db_info/db_info.php';

    if($_SERVER['REQUEST_METHOD'] === 'POST'){

        //メッセージの初期化
        $error = '';
        $success = '';

        //入力値のチェック
        if(empty($_POST['email']) || empty($_POST['password']) || empty($_POST['password2'])){
            $error = '未入力の項目があります。';
        } elseif(strlen($_POST['email']) > 100 || strlen($_POST['password']) > 15 || strlen($_POST['password2']) > 15){
            $error = 'メールアドレスは100文字以内、パスワードは15文字以内でご入力ください。';
        }elseif(strlen($_POST['password']) < 4 || strlen($_POST['password2']) < 4){
            $error = 'パスワードは4文字以上15文字以内でご入力ください。';
        } elseif($_POST['password'] != $_POST['password2']){
            $error = 'パスワードが一致しません。';
        }else {
            $email = htmlspecialchars($_POST['email'],ENT_QUOTES, 'UTF-8');
            $password1 = htmlspecialchars($_POST['password'],ENT_QUOTES, 'UTF-8');
            $password2 = htmlspecialchars($_POST['password2'],ENT_QUOTES, 'UTF-8');

            try{

                //データベース接続
                $dbh = new PDO(
                    'mysql:host=' . $host . '; dbname=' . $db_name .'; charset=utf8',
                    $user,
                    $pass,
                    array(
                        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
                        PDO::ATTR_EMULATE_PREPARES => false,
                    )
                );

                //入力したメールアドレスがすでに存在するかチェック
                $check_sql = 'SELECT id FROM user_table WHERE email=?';
                $check_data[] = $email;
                $check_stmt = $dbh->prepare($check_sql);
                $check_stmt->execute($check_data);

                $row = $check_stmt->fetch(PDO::FETCH_ASSOC);

                if($row == false){
                    //メールアドレスが使われていなかったら追加処理
                    $sql = 'INSERT INTO user_table(email,password) VALUES (?,?)';
                    $data[] = $email;
                    $data[] = $password1;
                    $stmt = $dbh->prepare($sql);
                    $stmt->execute($data);

                    $success = '新規登録が完了しました。<a href="login.php">ログインページ</a>からログインしてください。';
                } else {
                    //すでに入力したアドレスのデータがあればエラー
                    $error = 'このメールアドレスはすでに使われています。';
                }


            }catch(PDOException $e){
                echo '<div class="server_error">現在サーバーエラーが発生しています。</div>';
            }

        }

    }


?>


<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>新規登録ページ</title>
    <meta name="viewport" content="width=1000">
    <meta name="robots" content="noindex,nofollow">
    <link rel="stylesheet" type="text/css" href="../css/style.css">
</head>

<body>

    <section class="wrap login">

        <div class="login_wrap">
            <img src="../images/logo.jpg" class="ic logo">

            <?php

                if(isset($error)){
                    echo '<ul class="error"><li>' . $error . '</li></ul>';
                }

                if(isset($success)){
                    echo '<ul class="success"><li>' . $success . '</li></ul>';
                }

            ?>

            <form action="signup.php" method="post" class="login_form">
                <label>メールアドレス</label>
                <input type="email" name="email">
                <label>パスワード</label>
                <input type="password" name="password">
                <label>パスワード（確認）</label>
                <input type="password" name="password2">
                <input type="submit" name="submit" value="登録">
            </form>

            <center><a href="login.php">アカウントをお持ちの方はこちら</a></center>

        </div>

    </section>

</body>

</html>

サインアップに必要なのは、メールアドレスとパスワードです。パスワードは確認のため2回入力するようにしています。

signup.phpは下記のように配置してください。

hura_come
├── admin
│   ├── dashboard.php
│   ├── delete.php
│   ├── display.php
│   ├── login.php
│   ├── logout.php
│   ├── reply.php
│   ├── signup.php
│   └── update.php
├── css
│   └── style.css
├── db_info
│   └── db_info.php
└── save_comment.php

では細かく見ていきましょう。

HTML部分

最初にHTML部分を記述します。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>新規登録ページ</title>
    <meta name="viewport" content="width=1000">
    <meta name="robots" content="noindex,nofollow">
    <link rel="stylesheet" type="text/css" href="../css/style.css">
</head>

<body>

    <section class="wrap login">

        <div class="login_wrap">
            <img src="../images/logo.jpg" class="ic logo">

            <?php

                if(isset($error)){
                    echo '<ul class="error"><li>' . $error . '</li></ul>';
                }

                if(isset($success)){
                    echo '<ul class="success"><li>' . $success . '</li></ul>';
                }

            ?>

            <form action="signup.php" method="post" class="login_form">
                <label>メールアドレス</label>
                <input type="email" name="email">
                <label>パスワード</label>
                <input type="password" name="password">
                <label>パスワード（確認）</label>
                <input type="password" name="password2">
                <input type="submit" name="submit" value="登録">
            </form>

            <center><a href="login.php">アカウントをお持ちの方はこちら</a></center>

        </div>

    </section>

</body>

</html>

色々書いていますが、重要なのはform部分です。

<form action="signup.php" method="post" class="login_form">
    <label>メールアドレス</label>
    <input type="email" name="email">
    <label>パスワード</label>
    <input type="password" name="password">
    <label>パスワード（確認）</label>
    <input type="password" name="password2">
    <input type="submit" name="submit" value="登録">
</form>

同一ファイル内で処理を行うので、データの受け渡し先はsignup.phpです。

メールアドレス入力欄にはemail、パスワード入力欄にはpassword、確認用のパスワード入力欄にはpassword2と、name属性を与えます。

<?php

    if(isset($error)){
        echo '<ul class="error"><li>' . $error . '</li></ul>';
    }

    if(isset($success)){
        echo '<ul class="success"><li>' . $success . '</li></ul>';
    }

?>

これは過去のプログラムと同様、エラーメッセージ・サクセスメッセージを表示させるためのプログラムです。

登録処理の開始

ではPHPコードに移りましょう。

require '../db_info/db_info.php';

if($_SERVER['REQUEST_METHOD'] === 'POST'){

    //メッセージの初期化
    $error = '';
    $success = '';

    //入力値のチェック
    if(empty($_POST['email']) || empty($_POST['password']) || empty($_POST['password2'])){
        $error = '未入力の項目があります。';
    } elseif(strlen($_POST['email']) > 100 || strlen($_POST['password']) > 15 || strlen($_POST['password2']) > 15){
        $error = 'メールアドレスは100文字以内、パスワードは15文字以内でご入力ください。';
    }elseif(strlen($_POST['password']) < 4 || strlen($_POST['password2']) < 4){
        $error = 'パスワードは4文字以上15文字以内でご入力ください。';
    } elseif($_POST['password'] != $_POST['password2']){
        $error = 'パスワードが一致しません。';
    }else {
        $email = htmlspecialchars($_POST['email'],ENT_QUOTES, 'UTF-8');
        $password1 = htmlspecialchars($_POST['password'],ENT_QUOTES, 'UTF-8');
        $password2 = htmlspecialchars($_POST['password2'],ENT_QUOTES, 'UTF-8');

        try{

            //データベース接続
            $dbh = new PDO(
                'mysql:host=' . $host . '; dbname=' . $db_name .'; charset=utf8',
                $user,
                $pass,
                array(
                    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
                    PDO::ATTR_EMULATE_PREPARES => false,
                )
            );

            //中略

        }catch(PDOException $e){
            echo '<div class="server_error">現在サーバーエラーが発生しています。</div>';
        }

    }

}

この部分はこれまでとやっている事は同じですので、簡単に説明させていただきます。

このコードでしていること

db_info.phpの呼び出し
登録ボタンが押されたら処理を実行
メッセージの初期化
入力値のチェック
入力内容に問題がなければ、各種データをエスケープ処理し、変数に格納
データベースに接続

ユーザー登録処理

新しくユーザーを追加する場合、ユーザーIDの代わりとなるメールアドレスが第三者と被ってはいけません。なので、入力しているメールアドレスが既に使われている場合、エラーが出るようにしましょう。

$check_sql = 'SELECT id FROM user_table WHERE email=?';
$check_data[] = $email;
$check_stmt = $dbh->prepare($check_sql);
$check_stmt->execute($check_data);

$row = $check_stmt->fetch(PDO::FETCH_ASSOC);

まずは入力したメールアドレスを使って、user_tableからidカラムのデータを取得します。取得したら、実行結果を変数rowに格納してください。

if($row == false){
    //メールアドレスが使われていなかったら追加処理
    $sql = 'INSERT INTO user_table(email,password) VALUES (?,?)';
    $data[] = $email;
    $data[] = $password1;
    $stmt = $dbh->prepare($sql);
    $stmt->execute($data);

    $success = '新規登録が完了しました。<a href="login.php">ログインページ</a>からログインしてください。';
} else {
    //すでに入力したアドレスのデータがあればエラー
    $error = 'このメールアドレスはすでに使われています。';
}

変数rowの値がfalse、つまり入力したメールアドレスが使われていない場合、入力したメールアドレスとパスワードを、新規ユーザー情報としてuser_tableに保存します。保存できたらサクセスメッセージを定義します。

逆に、既にメールアドレスが登録されている場合、エラーメッセージを定義します。

ふらこめの場合、メールアドレスの重複は避けたいので、絶対にこのプログラムを導入してください。

ここまでできたら、signup.phpは完成です。

実際にユーザー登録してみよう

signup.phpができたら、実際にユーザー登録してしましょう。

まとめとコードのダウンロード

最後に作成したのはsignup.phpです。
ここまで制作したら、下記のようなツリー構造になっていると思います。

hura_come
├── admin
│   ├── dashboard.php
│   ├── delete.php
│   ├── display.php
│   ├── login.php
│   ├── logout.php
│   ├── reply.php
│   ├── signup.php
│   └── update.php
├── css
│   └── style.css
├── db_info
│   └── db_info.php
└── save_comment.php

お疲れ様でした。

これで簡易コメント管理システム『ふらこめ』は完成です。
こちらにソースコードも公開していますので、よかったら使ってください。

「WordPressのようなコメント管理機能を作りたいなあ」と思い、作成した簡易なプログラムですが、あなたのPHP学習の役に立てれたのならば幸いです。

全5回に渡り閲覧してくれてありがとうございました！

: MIO webデザイン
記事一覧

徳島県在住のフリーランスWEBデザイナー。徳島市内のデザイン事務所でWEBデザイナーとしての就職。以降、ホームページ制作・LP制作などの案件に携わり、2019年1月よりフリーランスとして活動開始。

WordPressのようなコメント管理システムを作ってみよう – 第4回