สร้างเว็บไซด์ Kahoot Clone ด้วย PHP

ต่อไปนี้เป็นตัวอย่างโค้ดทั้งหมดสำหรับการสร้างเว็บไซต์ที่ทำงานคล้ายกับ Kahoot รวมถึงการเพิ่มคำถามและคำตอบใหม่ และการรองรับผู้ใช้หลายคนพร้อมกัน:

1.สร้างฐานข้อมูล

CREATE DATABASE kahoot_clone;
USE kahoot_clone;

CREATE TABLE questions (
    id INT AUTO_INCREMENT PRIMARY KEY,
    question_text VARCHAR(255) NOT NULL
);

CREATE TABLE answers (
    id INT AUTO_INCREMENT PRIMARY KEY,
    question_id INT NOT NULL,
    answer_text VARCHAR(255) NOT NULL,
    is_correct BOOLEAN NOT NULL,
    FOREIGN KEY (question_id) REFERENCES questions(id)
);

CREATE TABLE scores (
    id INT AUTO_INCREMENT PRIMARY KEY,
    player_name VARCHAR(255) NOT NULL,
    score INT NOT NULL
);

2.หน้าเชื่อมต่อฐานข้อมูล (db.php)

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "kahoot_clone";

$conn = mysqli_connect($servername, $username, $password, $dbname);

if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
?>

3.หน้าเว็บหลัก (index.php)

<!DOCTYPE html>
<html>
<head>
    <title>Kahoot Clone</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>Welcome to Kahoot Clone</h1>
    <form method="post" action="game.php">
        <label for="name">Enter your name:</label>
        <input type="text" id="name" name="name" required>
        <button type="submit">Start Game</button>
    </form>
</body>
</html>

4.หน้าเกม (game.php)

<?php
session_start();
include 'db.php'; // ไฟล์นี้ใช้สำหรับเชื่อมต่อกับฐานข้อมูล

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $_SESSION['name'] = $_POST['name'];
    $_SESSION['score'] = 0;
    $_SESSION['question_number'] = 0;
}

$name = $_SESSION['name'];
$score = $_SESSION['score'];
$question_number = $_SESSION['question_number'];

// ดึงคำถามจากฐานข้อมูล
$query = "SELECT * FROM questions LIMIT 1 OFFSET $question_number";
$result = mysqli_query($conn, $query);
$question = mysqli_fetch_assoc($result);

$query = "SELECT * FROM answers WHERE question_id = " . $question['id'];
$answers = mysqli_query($conn, $query);

?>

<!DOCTYPE html>
<html>
<head>
    <title>Kahoot Clone</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h2><?php echo $question['question_text']; ?></h2>
    <form method="post" action="answer.php">
        <?php while ($row = mysqli_fetch_assoc($answers)): ?>
            <input type="radio" name="answer" value="<?php echo $row['id']; ?>" required>
            <label><?php echo $row['answer_text']; ?></label><br>
        <?php endwhile; ?>
        <button type="submit">Submit Answer</button>
    </form>
</body>
</html>

5.การตรวจสอบคำตอบ (answer.php)

<?php
session_start();
include 'db.php';

$selected_answer = $_POST['answer'];
$question_number = $_SESSION['question_number'];

// ตรวจสอบว่าคำตอบถูกต้องหรือไม่
$query = "SELECT is_correct FROM answers WHERE id = $selected_answer";
$result = mysqli_query($conn, $query);
$answer = mysqli_fetch_assoc($result);

if ($answer['is_correct']) {
    $_SESSION['score'] += 1;
}

$_SESSION['question_number'] += 1;

// ถามคำถามถัดไปหรือจบเกม
if ($_SESSION['question_number'] < $total_questions) {
    header('Location: game.php');
} else {
    header('Location: score.php');
}

6.แสดงคะแนน (score.php)

<?php
session_start();
include 'db.php';

$name = $_SESSION['name'];
$score = $_SESSION['score'];

// บันทึกคะแนนลงฐานข้อมูล
$query = "INSERT INTO scores (player_name, score) VALUES ('$name', $score)";
mysqli_query($conn, $query);

?>

<!DOCTYPE html>
<html>
<head>
    <title>Kahoot Clone</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>Game Over</h1>
    <p><?php echo $name; ?>, your score is: <?php echo $score; ?></p>
    <a href="index.php">Play Again</a>
</body>
</html>

7.หน้าเพิ่มคำถาม (add_question.php)

8.หน้าประมวลผลการเพิ่มคำถาม (add_question_process.php)

สรุป

ด้วยโค้ดทั้งหมดนี้ คุณจะได้เว็บไซต์ที่ทำงานคล้ายกับ Kahoot ซึ่งมีฟังก์ชันการเพิ่มคำถามและคำตอบใหม่ และการจัดการผู้ใช้หลายคนพร้อมกัน

สรุป

เรื่องน่าสนใจ

Sugarberg กำลังทำงานกับฐานข้อมูล XXL หรือไม่?

Meta แจ้งเตือนให้ระวังถูกแอปปลอมล้วงข้อมูล

Facebook ยืนหยัดในการตัดสินใจที่จะไม่ห้ามโฆษณาทางการเมืองที่โกหก