Bootstrap 是一個用于快速開發響應式網站和 Web 應用程序的前端框架，而 MySQL 是一個關系型數據庫管理系統。要實現 Bootstrap 與 MySQL 的交互，通常需要后端編程語言（如 PHP、Python、Node.js 等）來作為橋梁。以下是一個簡單的示例，使用 PHP 和 MySQL 實現 Bootstrap 與數據庫的交互。
首先，創建一個名為 my_database 的數據庫，并在其中創建一個名為 users 的數據表，用于存儲用戶信息。
CREATE DATABASE my_database;
USE my_database;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(255) NOT NULL UNIQUE,
email VARCHAR(255) NOT NULL UNIQUE,
password VARCHAR(255) NOT NULL
);
創建一個名為 config.php 的文件，用于存儲數據庫連接信息。
<?php
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "my_database";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
接下來，創建一個名為 functions.php 的文件，用于處理數據庫操作。
<?php
include 'config.php';
function addUser($username, $email, $password) {
global $conn;
$password = password_hash($password, PASSWORD_DEFAULT);
$stmt = $conn->prepare("INSERT INTO users (username, email, password) VALUES (?, ?, ?)");
$stmt->bind_param("sss", $username, $email, $password);
if ($stmt->execute()) {
echo "New user added successfully";
} else {
echo "Error: " . $stmt->error;
}
$stmt->close();
}
function getUser($id) {
global $conn;
$stmt = $conn->prepare("SELECT * FROM users WHERE id = ?");
$stmt->bind_param("i", $id);
$stmt->execute();
$result = $stmt->get_result();
if ($result->num_rows > 0) {
return $result->fetch_assoc();
} else {
return null;
}
}
?>
創建一個名為 index.html 的文件，用于顯示用戶列表和添加新用戶的表單。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap MySQL Interaction</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h1 class="text-center">User List</h1>
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Username</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<?php
$users = getUser(1); // 獲取第一個用戶
if ($users) {
echo "<tr>";
echo "<td>" . $users['id'] . "</td>";
echo "<td>" . $users['username'] . "</td>";
echo "<td>" . $users['email'] . "</td>";
echo "</tr>";
}
?>
</tbody>
</table>
<h2 class="text-center mt-3">Add New User</h2>
<form action="add_user.php" method="post">
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<input type="text" class="form-control" id="username" name="username" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" name="password" required>
</div>
<button type="submit" class="btn btn-primary">Add User</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js"></script>
</body>
</html>
創建一個名為 add_user.php 的文件，用于處理新用戶的添加操作。
<?php
include 'config.php';
include 'functions.php';
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = $_POST['username'];
$email = $_POST['email'];
$password = $_POST['password'];
addUser($username, $email, $password);
header("Location: index.html");
exit();
}
?>
現在，當用戶提交表單時，add_user.php 文件將處理新用戶的添加操作，并將結果重定向回 index.html 文件以顯示更新后的用戶列表。
