溫馨提示×

Bootstrap與MySQL交互如何實(shí)現(xiàn)

小樊
81
2024-09-27 11:23:33
欄目: 云計(jì)算

Bootstrap 是一個(gè)用于快速開發(fā)響應(yīng)式網(wǎng)站和 Web 應(yīng)用程序的前端框架，而 MySQL 是一個(gè)關(guān)系型數(shù)據(jù)庫管理系統(tǒng)。要實(shí)現(xiàn) Bootstrap 與 MySQL 的交互，通常需要后端編程語言（如 PHP、Python、Node.js 等）來作為橋梁。以下是一個(gè)簡單的示例，使用 PHP 和 MySQL 實(shí)現(xiàn) Bootstrap 與數(shù)據(jù)庫的交互。

  1. 創(chuàng)建一個(gè) MySQL 數(shù)據(jù)庫和數(shù)據(jù)表：

首先，創(chuàng)建一個(gè)名為 my_database 的數(shù)據(jù)庫，并在其中創(chuàng)建一個(gè)名為 users 的數(shù)據(jù)表，用于存儲用戶信息。

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
);
  1. 創(chuàng)建一個(gè) PHP 文件來處理數(shù)據(jù)庫連接和操作：

創(chuàng)建一個(gè)名為 config.php 的文件，用于存儲數(shù)據(jù)庫連接信息。

<?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);
}
?>

接下來，創(chuàng)建一個(gè)名為 functions.php 的文件，用于處理數(shù)據(jù)庫操作。

<?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;
  }
}
?>
  1. 在 HTML 文件中使用 Bootstrap 和 PHP：

創(chuàng)建一個(gè)名為 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); // 獲取第一個(gè)用戶
        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>
  1. 創(chuàng)建一個(gè) PHP 文件來處理新用戶的添加：

創(chuàng)建一個(gè)名為 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();
}
?>

現(xiàn)在，當(dāng)用戶提交表單時(shí)，add_user.php 文件將處理新用戶的添加操作，并將結(jié)果重定向回 index.html 文件以顯示更新后的用戶列表。

0 踩