How to use MySQL and JavaScript to implement a simple forum function

How to use MySQL and JavaScript to implement a simple forum function

Introduction:
As one of the very important social platforms on the Internet, the forum has users Register, post, reply, view posts and other functions. This article will introduce how to use MySQL and JavaScript to implement a simple forum function, and provide specific code examples.

1. Preparation work
1. Install the MySQL server and client, and create a database.
2. Build a Web server, such as Apache, Nginx, etc.
3. Create an HTML page as the front-end interface of the forum.

2. Database design
The function of this forum needs to store user information, post information and reply information. We design three tables: users table (users), post table (posts) and reply table (comments).

1. User table (users):
Field:

• id: primary key, auto-increment, user ID.
• username: username, unique.
• password: Password.

2. Posts table (posts):
Field:

• id: primary key, auto-increment, post ID.
• title: Post title.
• content: Post content.
• userId: foreign key, pointing to the user ID of the user table.

3. Reply table (comments):
Field:

• id: primary key, self-increasing, reply ID.
• postId: foreign key, pointing to the post ID of the posts table.
• content: Reply content.
• userId: foreign key, pointing to the user ID of the user table.

3. Back-end development
1. Create an interface (register.php) for processing user registration.

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

// Get the username and password sent from the front end
$username = $_POST['username'];
$password = $_POST['password'];

//Check if the username already exists
$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 an interface for publishing posts (create_post.php).

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

// Get the post title, content and user ID sent from the front end
$title = $_POST['title'];
$content = $_POST['content'];
$userId = $_POST['userId'];

// Insert post data
$insertQuery = "INSERT INTO posts (title, content, userId) VALUES ('$title', '$ content', '$userId')";
mysqli_query($conn, $insertQuery);

$response = [

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

];

echo json_encode( $response);
?>

3. Create an interface for replying (create_comment.php).

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

// Get the reply content, post ID and user ID sent from the front end
$content = $_POST['content'];
$postId = $_POST['postId'];
$userId = $_POST['userId'];

//Insert reply data
$insertQuery = "INSERT INTO comments (content, postId, userId) VALUES ('$content', ' $postId', '$userId')";
mysqli_query($conn, $insertQuery);

$response = [

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

];

echo json_encode ($response);
?>

4. Front-end development
1. Registration page (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. Post page (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. Reply page (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>

The above is the detailed content of How to use MySQL and JavaScript to implement a simple forum function. For more information, please follow other related articles on the PHP Chinese website!