MySQL と JavaScript を使用して簡単なフォーラム機能を実装する方法

MySQL と JavaScript を使用して簡単なフォーラム機能を実装する方法

はじめに:
インターネット上の非常に重要なソーシャル プラットフォームの 1 つであるフォーラムは、ユーザーの登録、投稿、返信、投稿の閲覧、その他の機能。この記事では、MySQL と JavaScript を使用して簡単なフォーラム機能を実装する方法と、具体的なコード例を紹介します。

1. 準備作業
1. MySQL サーバーとクライアントをインストールし、データベースを作成します。
2. Apache、Nginx などの Web サーバーを構築します。
3. フォーラムのフロントエンド インターフェイスとして HTML ページを作成します。

2. データベース設計
このフォーラムの機能は、ユーザー情報、投稿情報、返信情報を保存する必要があります。 users テーブル (ユーザー)、post テーブル (投稿)、reply テーブル (コメント) の 3 つのテーブルを設計します。

1. ユーザー テーブル (ユーザー):
フィールド:

• id: 主キー、自動インクリメント、ユーザー ID。
• ユーザー名: ユーザー名、一意。
• パスワード: パスワード。

2. 投稿テーブル (投稿):
フィールド:

• id: 主キー、自動インクリメント、投稿 ID。
• title: 投稿のタイトル。
• content: コンテンツを投稿します。
• userId: ユーザー テーブルのユーザー ID を指す外部キー。

3. 返信テーブル (コメント):
フィールド:

• id: 主キー、自己増加、返信 ID。
• postId: 外部キー。posts テーブルの投稿 ID を指します。
• content: 返信内容。
• userId: ユーザー テーブルのユーザー ID を指す外部キー。

3. バックエンド開発
1. ユーザー登録を処理するためのインターフェイス (register.php) を作成します。

header('Content-Type: application/json');
$conn = mysqli_connect('localhost', 'username', 'password', 'database_name') ;

// フロントエンドから送信されたユーザー名とパスワードを取得します
$username = $_POST['username'];
$password = $_POST['password'];

//ユーザー名がすでに存在するかどうかを確認します
$query = "SELECT * FROM users WHERE username = '$username'";
$result = mysqli_query($conn, $query);

if (mysqli_num_rows($result) > 0) {

// 用户名已存在
$response = [
    'status' => 'error',
    'message' => 'Username already exists'
];

} else {

// 插入用户数据
$insertQuery = "INSERT INTO users (username, password) VALUES ('$username', '$password')";
mysqli_query($conn, $insertQuery);
$response = [
    'status' => 'success',
    'message' => 'Registration successful'
];

}

echo json_encode($response);
?> ;

2. 投稿を公開するためのインターフェイスを作成します (create_post.php)。

header('Content-Type: application/json');
$conn = mysqli_connect('localhost', 'username', 'password', 'database_name') ;

// フロントエンドから送信された投稿のタイトル、コンテンツ、ユーザー ID を取得します。
$title = $_POST['title'];
$content = $_POST['content'] ;
$userId = $_POST['userId'];

// 投稿データを挿入
$insertQuery = "投稿 (タイトル、コンテンツ、ユーザー ID) に挿入 VALUES ('$title', '$ content', '$userId')";
mysqli_query($conn, $insertQuery);

$response = [

'status' => 'success',
'message' => 'Post created successfully'

];

echo json_encode( $response);
?>

3. 返信用のインターフェースを作成します (create_comment.php)。

header('Content-Type: application/json');
$conn = mysqli_connect('localhost', 'username', 'password', 'database_name') ;

// フロントエンドから送信された返信内容、投稿ID、ユーザーIDを取得
$content = $_POST['content'];
$postId = $_POST['postId' ];
$userId = $_POST['userId'];

//返信データを挿入
$insertQuery = "コメント (コンテンツ、投稿 ID、ユーザー ID) 値に挿入 ('$content' , ' $postId', '$userId')";
mysqli_query($conn, $insertQuery);

$response = [

'status' => 'success',
'message' => 'Comment created successfully'

];

echo json_encode ($response);
?>

4. フロントエンド開発
1. 登録ページ (register.html)。

<title>论坛注册</title>

<h1 id="用户注册">用户注册</h1>
<form id="registerForm">
    <label>用户名:</label>
    <input type="text" name="username" required>
    <br><br>
    <label>密码:</label>
    <input type="password" name="password" required>
    <br><br>
    <input type="submit" value="注册">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $('#registerForm').submit(function(event) {
            event.preventDefault();

            var data = $(this).serialize();

            $.ajax({
                url: 'register.php',
                type: 'POST',
                data: data,
                success: function(response) {
                    alert(response.message);
                    window.location.href = 'login.html';
                },
                error: function(xhr, status, error) {
                    alert(error);
                }
            });
        });
    });
</script>

2. 投稿ページ (create_post.html)。

<title>发帖</title>

<h1 id="发帖">发帖</h1>
<form id="createPostForm">
    <label>帖子标题:</label>
    <input type="text" name="title" required>
    <br><br>
    <label>帖子内容:</label>
    <textarea name="content" required></textarea>
    <br><br>
    <label>用户ID:</label>
    <input type="text" name="userId" required>
    <br><br>
    <input type="submit" value="发布">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $('#createPostForm').submit(function(event) {
            event.preventDefault();

            var data = $(this).serialize();

            $.ajax({
                url: 'create_post.php',
                type: 'POST',
                data: data,
                success: function(response) {
                    alert(response.message);
                },
                error: function(xhr, status, error) {
                    alert(error);
                }
            });
        });
    });
</script>

3. 返信ページ (create_comment.html)。

<title>回帖</title>

<h1 id="回帖">回帖</h1>
<form id="createCommentForm">
    <label>回帖内容:</label>
    <textarea name="content" required></textarea>
    <br><br>
    <label>帖子ID:</label>
    <input type="text" name="postId" required>
    <br><br>
    <label>用户ID:</label>
    <input type="text" name="userId" required>
    <br><br>
    <input type="submit" value="回复">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $('#createCommentForm').submit(function(event) {
            event.preventDefault();

            var data = $(this).serialize();

            $.ajax({
                url: 'create_comment.php',
                type: 'POST',
                data: data,
                success: function(response) {
                    alert(response.message);
                },
                error: function(xhr, status, error) {
                    alert(error);
                }
            });
        });
    });
</script>

概要:
この記事では、MySQL と JavaScript を使用して、ユーザー登録、投稿、返信機能などの簡単なフォーラム機能を実装する方法を紹介します。 . 、具体的なコード例を示します。開発者は、実際のニーズに基づいて対応する変更や拡張を行い、より完全なフォーラム システムを実現できます。

以上がMySQL と JavaScript を使用して簡単なフォーラム機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。