MIO webデザインでは高品質なWEBサイトをご提供いたします。ホームページ・ランディングページ(LP)制作、サイトリニューアルなど、WEB制作のことならお任せください。

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

2020
1/25

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

約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を作成しました。

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

これから作っていくもの

改めまして、簡易コメント管理システム『ふらこめ(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回に渡り閲覧してくれてありがとうございました!

関連記事

コメントを書く

メールアドレスが公開されることはありません。* の項目は必須項目となります。

ユーザーに求められるWEBサイトを創造します

MIO webデザインでは、見栄えがいいだけではなく、売上・CV率向上に繋がるWEBサイトを制作いたします。モバイルフレンドリー対策・SEO対策・各種ブラウザ対応など幅広く対応。CMS(WordPress)を導入することで、簡単にサイトを運営・管理することができます。

また、新規制作だけではなく、既存サイトのカスタマイズもMIO webデザインでは承ります。CSSによるカスタマイズが可能であれば、アメブロをはじめとした無料ブログサービスのカスタマイズも可能です。