PHPとMySQLを使って、簡単なコメント機能を実装しよう！HTML、CSS、javascriptで書こう

今回は、プログラミングの授業で作ったのでせっかくなので共有します。
使用するものは、

PHP
phpmyadmin(mysql)
HTML,css,javascript
PHPが動く環境(今回使用したのはxserver)

です。
今回も、codicを使って変数名を作っていくので手作業でしていく人は頑張ってください。

codicの画面

そろそろ自力で変数名が書けるようになりたいです。
それでは、やっていきましょう。

PHPの設定
さいごに

PHPの設定

MySQLで、データベースを作る

まずは、mysqlでチャットの保存につかうテーブルを作りましょう。
「comment_system」というデータベースを作り、「id」「username」「comment」「created_at」とを含むテーブルを作りましょう。

phpmyadminでどこで実行すればいいか分からない　

下の方の、コンソールで実行できます

CREATE DATABASE comment_system; /*データベースの作成*/
USE comment_system;

CREATE TABLE comments (　/*テーブルの作成*/
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL,
    comment TEXT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

「権限がありません」とか言われたら、データベースだけを手動で作ると行けるかもしれません。

送信用PHP

コメントを送信するためのPHPです。「submit_comment.php」という名前にしてください。
ユーザー名、パスワードは自分で設定してください。

xserverでのユーザー名・パスワードの確認方法

「mysql設定→ユーザー一覧」で見れます。

<?php
// submit_comment.php
$servername = "localhost";
$username = "mysqlのユーザー名";
$password = "mysqlのパスワード";
$dbname = "データベース名";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $username = $_POST['username'];
    $comment = $_POST['comment'];

    $sql = "INSERT INTO comments (username, comment) VALUES ('$username', '$comment')";

    if ($conn->query($sql) === TRUE) {
        echo "正常に送信されました！ブラウザバックしてください....";
    } else {
        echo "Error: " . $sql . "<br>" . $conn->error;
    }

    $conn->close();
    header("Location: index.html");
    exit();
}
?>

次は、受信用です。

<?php
// display_comments.php
$servername = "localhost";
$username = "ユーザー名";
$password = "パスワード";
$dbname = "データベース名";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT username, comment, created_at FROM comments ORDER BY created_at DESC";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo "<div class='comment'>";
        echo "<h4>" . htmlspecialchars($row['username']) . "</h4>";
        echo "<p>" . htmlspecialchars($row['comment']) . "</p>";
        echo "<small>" . $row['created_at'] . "</small>";
        echo "</div>";
    }
} else {
    echo "まだ誰も登校していません・・・";
}

$conn->close();
?>

PHPの使い方

投稿の場合は、次のHTMLで送信します。自由に書き換えてください。
PHPへのアドレスは、submit_comment.phpへのリンクにしてください。
ローカルで実行したい場合は、xampp等を使用してください。

<form action="PHPへのアドレス/submit_comment.php" method="post">
    <label for="name">名前：</label>
    <input type="text" id="name" name="username" required="">
    <br>
    <label for="comment">コメント：</label>
    <textarea id="comment" name="comment" rows="5" required=""></textarea>
    <br>
    <button id="toukou" type="submit">投稿</button>
  </form>

受信の場合もPHPへのアドレスも同様、display_comments.phpへのリンクにしてください。

<div id="comments">
    <iframe src="PHPへのアドレスdisplay_comments.php" width="”400″" height="”500″　allow-scripts"></iframe>
  </div>

さいごに

わかってくれたら、OKデス

rinta

とある高専生。
AIとネットが好き。
将来はAIの妹と火星に住みたい。

discord : r_nightcore
このサイトの管理者。