許多企業在管理網路應用程式時都會遇到困難。如果沒有一個好的儀表盤，檢查效能、管理使用者和分析資料等任務就會變得很困難，而且需要很長時間。
PHP 和 Bootstrap 可以幫助您製作自定義儀表盤。PHP 可以處理複雜的資料，而 Bootstrap 則能讓儀表盤在不同裝置上都具有視覺吸引力，並對使用者友好。
本教程將向您展示如何建立 PHP 管理儀表盤。一個精心設計的儀表盤可以幫助您加快工作速度、簡化流程並獲取有關網路應用的有用資訊。
什麼是PHP Bootstrap整合？
PHP 和 Bootstrap 是構建網站的兩個重要工具。PHP 是一種程式語言，可幫助建立動態網頁。Bootstrap 是一個框架，為設計有吸引力的網站提供現成的樣式和功能。
當 PHP 和 Bootstrap 結合使用時，就能創造出一種功能強大、視覺效果極佳的網路應用程式。PHP 處理伺服器端邏輯，而 Bootstrap 則負責前端設計。
將Bootstrap與PHP結合使用的好處
PHP 和 Bootstrap 的結合讓網站建設變得更快、更簡單。開發人員可以專注於網站的主要功能，而 Bootstrap 則負責設計。
使用 PHP 和 Bootstrap 有很多好處。
✅ Bootstrap 提供現成的樣式和功能。
✅ 確保網站在所有裝置上都美觀大方。
✅ 幫助開發人員編寫更有條理的程式碼。
✅ 方便建立有吸引力的互動式網站。
管理控制面板概述
管理員控制面板是一種 Web UI，可讓管理員監控應用程式效能和管理設定。它提供使用者參與、銷售和網站功能等重要統計資料。此外，它還允許管理員調整普通使用者無法訪問的設定。
管理員儀表板可實現不同的功能，包括
- 透過建立、編輯或刪除使用者賬戶來管理使用者賬戶。
- 修改網站內容。
- 檢視訪客數量、會話持續時間和購買率等指標。
- 自定義網站的外觀和操作。
PHP和Bootstrap 5的要求
在本教程中，我假設您已經有了一個基於 PHP 的網站。以下是您所需要的：
- PHP 8 或更高版本
- MariaDB 10 或更高版本
- Bootstrap 5 或更高版本
使用Bootstrap構建管理面板
我將建立一個簡單的應用程式來管理銷售。它將有一個儀表板，使用者可以在上面檢視銷售資訊、更新產品資料和新增新產品。使用者還可以註冊並登入儀表板。
第 1 步：建立表格
管理面板模板有許多不同的表單，包括註冊和登入。我將使用 HTML5 和自定義 PHP 程式碼來確保使用者輸入的資訊正確無誤。
建立登錄檔單
使用者登錄檔單已經可用。我將使用以下程式碼更改欄位名稱並更新方法和操作：
<?php include('server.php') ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Start Bootstrap Template</title>
<!-- Bootstrap core CSS-->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template-->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template-->
<link href="css/sb-admin.css" rel="stylesheet">
</head>
<body class="bg-dark">
<div class="container">
<div class="card card-register mx-auto mt-5">
<div class="card-header">Register an Account</div>
<div class="card-body">
<form method="post" action="register.php">
<?php include('errors.php'); ?>
<div class="form-group">
<div class="form-row">
<div class="col-md-12">
<label for="exampleInputName">Username</label>
<input class="form-control" id="exampleInputName" type="text" name="username" value="<?php echo $username; ?>" >
</div>
</div>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input class="form-control" id="exampleInputEmail1" type="email" aria-describedby="emailHelp" name="email" value="<?php echo $email; ?>" >
</div>
<div class="form-group">
<div class="form-row">
<div class="col-md-6">
<label for="exampleInputPassword1">Password</label>
<input class="form-control" id="exampleInputPassword1" type="password" name="password_1" >
</div>
<div class="col-md-6">
<label for="exampleInputPassword1">Confirm Password</label>
<input class="form-control" id="exampleInputPassword2" type="password" name="password_2" >
</div>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block" name="reg_user">Register</button>
</form>
<div class="text-center">
<a class="d-block small mt-3" href="login.php">Login Page</a>
<!--- <a class="d-block small" href="forgot-password.html">Forgot Password?</a>-->
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
</body>
</html>
<?php include('server.php') ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Start Bootstrap Template</title>
<!-- Bootstrap core CSS-->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template-->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template-->
<link href="css/sb-admin.css" rel="stylesheet">
</head>
<body class="bg-dark">
<div class="container">
<div class="card card-register mx-auto mt-5">
<div class="card-header">Register an Account</div>
<div class="card-body">
<form method="post" action="register.php">
<?php include('errors.php'); ?>
<div class="form-group">
<div class="form-row">
<div class="col-md-12">
<label for="exampleInputName">Username</label>
<input class="form-control" id="exampleInputName" type="text" name="username" value="<?php echo $username; ?>" >
</div>
</div>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input class="form-control" id="exampleInputEmail1" type="email" aria-describedby="emailHelp" name="email" value="<?php echo $email; ?>" >
</div>
<div class="form-group">
<div class="form-row">
<div class="col-md-6">
<label for="exampleInputPassword1">Password</label>
<input class="form-control" id="exampleInputPassword1" type="password" name="password_1" >
</div>
<div class="col-md-6">
<label for="exampleInputPassword1">Confirm Password</label>
<input class="form-control" id="exampleInputPassword2" type="password" name="password_2" >
</div>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block" name="reg_user">Register</button>
</form>
<div class="text-center">
<a class="d-block small mt-3" href="login.php">Login Page</a>
<!--- <a class="d-block small" href="forgot-password.html">Forgot Password?</a>-->
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
</body>
</html>
<?php include('server.php') ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Start Bootstrap Template</title>
<!-- Bootstrap core CSS-->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template-->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template-->
<link href="css/sb-admin.css" rel="stylesheet">
</head>
<body class="bg-dark">
<div class="container">
<div class="card card-register mx-auto mt-5">
<div class="card-header">Register an Account</div>
<div class="card-body">
<form method="post" action="register.php">
<?php include('errors.php'); ?>
<div class="form-group">
<div class="form-row">
<div class="col-md-12">
<label for="exampleInputName">Username</label>
<input class="form-control" id="exampleInputName" type="text" name="username" value="<?php echo $username; ?>" >
</div>
</div>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input class="form-control" id="exampleInputEmail1" type="email" aria-describedby="emailHelp" name="email" value="<?php echo $email; ?>" >
</div>
<div class="form-group">
<div class="form-row">
<div class="col-md-6">
<label for="exampleInputPassword1">Password</label>
<input class="form-control" id="exampleInputPassword1" type="password" name="password_1" >
</div>
<div class="col-md-6">
<label for="exampleInputPassword1">Confirm Password</label>
<input class="form-control" id="exampleInputPassword2" type="password" name="password_2" >
</div>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block" name="reg_user">Register</button>
</form>
<div class="text-center">
<a class="d-block small mt-3" href="login.php">Login Page</a>
<!--- <a class="d-block small" href="forgot-password.html">Forgot Password?</a>-->
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
</body>
</html>
下面是修改後的登錄檔單：
– 註冊頁面包含使用者名稱、電子郵件地址、密碼、確認密碼等欄位，以及註冊或轉到登入頁面的按鈕。
建立登入表單
接下來，使用以下程式碼建立登入表單：
<?php include('server.php') ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Start Bootstrap Template</title>
<!-- Bootstrap core CSS-->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template-->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template-->
<link href="css/sb-admin.css" rel="stylesheet">
</head>
<body class="bg-dark">
<div class="container">
<div class="card card-login mx-auto mt-5">
<div class="card-header">Login</div>
<div class="card-body">
<form method="post" action="login.php">
<?php include('errors.php'); ?>
<div class="form-group">
<label for="exampleInputEmail1">Username</label>
<input class="form-control" type="text" name="username">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input class="form-control" type="password" name="password">
</div>
<div class="form-group">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember Password</label>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block" name="login_user">Login</button>
</form>
<div class="text-center">
<a class="d-block small mt-3" href="register.php">Register an Account</a>
<!-- <a class="d-block small" href="forgot-password.php">Forgot Password?</a>-->
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
</body>
</html>
<?php include('server.php') ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Start Bootstrap Template</title>
<!-- Bootstrap core CSS-->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template-->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template-->
<link href="css/sb-admin.css" rel="stylesheet">
</head>
<body class="bg-dark">
<div class="container">
<div class="card card-login mx-auto mt-5">
<div class="card-header">Login</div>
<div class="card-body">
<form method="post" action="login.php">
<?php include('errors.php'); ?>
<div class="form-group">
<label for="exampleInputEmail1">Username</label>
<input class="form-control" type="text" name="username">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input class="form-control" type="password" name="password">
</div>
<div class="form-group">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember Password</label>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block" name="login_user">Login</button>
</form>
<div class="text-center">
<a class="d-block small mt-3" href="register.php">Register an Account</a>
<!-- <a class="d-block small" href="forgot-password.php">Forgot Password?</a>-->
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
</body>
</html>
<?php include('server.php') ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Start Bootstrap Template</title>
<!-- Bootstrap core CSS-->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template-->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template-->
<link href="css/sb-admin.css" rel="stylesheet">
</head>
<body class="bg-dark">
<div class="container">
<div class="card card-login mx-auto mt-5">
<div class="card-header">Login</div>
<div class="card-body">
<form method="post" action="login.php">
<?php include('errors.php'); ?>
<div class="form-group">
<label for="exampleInputEmail1">Username</label>
<input class="form-control" type="text" name="username">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input class="form-control" type="password" name="password">
</div>
<div class="form-group">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember Password</label>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block" name="login_user">Login</button>
</form>
<div class="text-center">
<a class="d-block small mt-3" href="register.php">Register an Account</a>
<!-- <a class="d-block small" href="forgot-password.php">Forgot Password?</a>-->
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
</body>
</html>
下面是修改後的登入表單：
– 登入頁面上有使用者名稱和密碼欄位、記住密碼的覈取方塊以及登入或建立賬戶的按鈕。
第 2 步：設定資料庫連線
如果您使用寶塔面板管理伺服器，可以輕鬆訪問伺服器資料庫（參考寶塔面板教程之資料庫管理篇）。
Users Table
使用以下 SQL 查詢建立表格：
CREATE TABLE `users` (
`id` int(11) NOT NULL,
`username` varchar(100) NOT NULL,
`email` varchar(100) NOT NULL,
`password` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;Products tableCREATE TABLE `products` (
`product_id` int(22) NOT NULL,
`product_name` varchar(22) NOT NULL,
`product_price` int(22) NOT NULL,
`product_cat` varchar(22) NOT NULL,
`product_details` varchar(22) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Sales tableCREATE TABLE `sales_stats` (
`id` int(22) NOT NULL,
`sales` int(22) NOT NULL,
`month` varchar(25) NOT NULL,
`pending_orders` int(55) NOT NULL,
`revenue` int(55) NOT NULL,
`Vistors` int(55) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
CREATE TABLE `users` (
`id` int(11) NOT NULL,
`username` varchar(100) NOT NULL,
`email` varchar(100) NOT NULL,
`password` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;Products tableCREATE TABLE `products` (
`product_id` int(22) NOT NULL,
`product_name` varchar(22) NOT NULL,
`product_price` int(22) NOT NULL,
`product_cat` varchar(22) NOT NULL,
`product_details` varchar(22) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Sales tableCREATE TABLE `sales_stats` (
`id` int(22) NOT NULL,
`sales` int(22) NOT NULL,
`month` varchar(25) NOT NULL,
`pending_orders` int(55) NOT NULL,
`revenue` int(55) NOT NULL,
`Vistors` int(55) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
CREATE TABLE `users` ( `id` int(11) NOT NULL, `username` varchar(100) NOT NULL, `email` varchar(100) NOT NULL, `password` varchar(100) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;Products tableCREATE TABLE `products` ( `product_id` int(22) NOT NULL, `product_name` varchar(22) NOT NULL, `product_price` int(22) NOT NULL, `product_cat` varchar(22) NOT NULL, `product_details` varchar(22) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; Sales tableCREATE TABLE `sales_stats` ( `id` int(22) NOT NULL, `sales` int(22) NOT NULL, `month` varchar(25) NOT NULL, `pending_orders` int(55) NOT NULL, `revenue` int(55) NOT NULL, `Vistors` int(55) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Products Table
CREATE TABLE `products` (
`product_id` int(22) NOT NULL,
`product_name` varchar(22) NOT NULL,
`product_price` int(22) NOT NULL,
`product_cat` varchar(22) NOT NULL,
`product_details` varchar(22) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
CREATE TABLE `products` (
`product_id` int(22) NOT NULL,
`product_name` varchar(22) NOT NULL,
`product_price` int(22) NOT NULL,
`product_cat` varchar(22) NOT NULL,
`product_details` varchar(22) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
CREATE TABLE `products` ( `product_id` int(22) NOT NULL, `product_name` varchar(22) NOT NULL, `product_price` int(22) NOT NULL, `product_cat` varchar(22) NOT NULL, `product_details` varchar(22) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Sales Table
CREATE TABLE `sales_stats` (
`id` int(22) NOT NULL,
`sales` int(22) NOT NULL,
`month` varchar(25) NOT NULL,
`pending_orders` int(55) NOT NULL,
`revenue` int(55) NOT NULL,
`Vistors` int(55) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
CREATE TABLE `sales_stats` (
`id` int(22) NOT NULL,
`sales` int(22) NOT NULL,
`month` varchar(25) NOT NULL,
`pending_orders` int(55) NOT NULL,
`revenue` int(55) NOT NULL,
`Vistors` int(55) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
CREATE TABLE `sales_stats` ( `id` int(22) NOT NULL, `sales` int(22) NOT NULL, `month` varchar(25) NOT NULL, `pending_orders` int(55) NOT NULL, `revenue` int(55) NOT NULL, `Vistors` int(55) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
訪問您的資料庫管理器。找到資料庫名稱和其他資訊。然後，建立一個名為 server.php 的新檔案，並將此程式碼複製到其中。
<?php
session_start();
// initializing variables
$username = "";
$email = "";
$errors = array();
// connect to the database
$db = mysqli_connect('localhost', 'root', '', 'registration');
<?php
session_start();
// initializing variables
$username = "";
$email = "";
$errors = array();
// connect to the database
$db = mysqli_connect('localhost', 'root', '', 'registration');
<?php
session_start();
// initializing variables
$username = "";
$email = "";
$errors = array();
// connect to the database
$db = mysqli_connect('localhost', 'root', '', 'registration');
Registration
// REGISTER USER
if (isset($_POST['reg_user'])) {
// Receive all input values from the form
$username = mysqli_real_escape_string($db, $_POST['username']);
$email = mysqli_real_escape_string($db, $_POST['email']);
$password_1 = mysqli_real_escape_string($db, $_POST['password_1']);
$password_2 = mysqli_real_escape_string($db, $_POST['password_2']);
// Form validation: ensure that the form is correctly filled
// by adding (array_push()) corresponding error unto $errors array
if (empty($username)) {
array_push($errors, "Username is required");
}
if (empty($email)) {
array_push($errors, "Email is required");
}
if (empty($password_1)) {
array_push($errors, "Password is required");
}
if ($password_1 != $password_2) {
array_push($errors, "The two passwords do not match");
}
// First check the database to make sure
// a user does not already exist with the same username and/or email
$user_check_query = "SELECT * FROM users WHERE username='$username' OR email='$email' LIMIT 1";
$result = mysqli_query($db, $user_check_query);
$user = mysqli_fetch_assoc($result);
if ($user) { // If user exists
if ($user['username'] === $username) {
array_push($errors, "Username already exists");
}
if ($user['email'] === $email) {
array_push($errors, "Email already exists");
}
}
// Finally, register user if there are no errors in the form
if (count($errors) == 0) {
$password = md5($password_1); // Encrypt the password before saving in the database
$query = "INSERT INTO users(username, email, password) VALUES('$username', '$email', '$password')";
mysqli_query($db, $query);
$_SESSION['username'] = $username;
$_SESSION['success'] = "You are now logged in";
header('location: login.php');
}
}
// REGISTER USER
if (isset($_POST['reg_user'])) {
// Receive all input values from the form
$username = mysqli_real_escape_string($db, $_POST['username']);
$email = mysqli_real_escape_string($db, $_POST['email']);
$password_1 = mysqli_real_escape_string($db, $_POST['password_1']);
$password_2 = mysqli_real_escape_string($db, $_POST['password_2']);
// Form validation: ensure that the form is correctly filled
// by adding (array_push()) corresponding error unto $errors array
if (empty($username)) {
array_push($errors, "Username is required");
}
if (empty($email)) {
array_push($errors, "Email is required");
}
if (empty($password_1)) {
array_push($errors, "Password is required");
}
if ($password_1 != $password_2) {
array_push($errors, "The two passwords do not match");
}
// First check the database to make sure
// a user does not already exist with the same username and/or email
$user_check_query = "SELECT * FROM users WHERE username='$username' OR email='$email' LIMIT 1";
$result = mysqli_query($db, $user_check_query);
$user = mysqli_fetch_assoc($result);
if ($user) { // If user exists
if ($user['username'] === $username) {
array_push($errors, "Username already exists");
}
if ($user['email'] === $email) {
array_push($errors, "Email already exists");
}
}
// Finally, register user if there are no errors in the form
if (count($errors) == 0) {
$password = md5($password_1); // Encrypt the password before saving in the database
$query = "INSERT INTO users(username, email, password) VALUES('$username', '$email', '$password')";
mysqli_query($db, $query);
$_SESSION['username'] = $username;
$_SESSION['success'] = "You are now logged in";
header('location: login.php');
}
}
// REGISTER USER
if (isset($_POST['reg_user'])) {
// Receive all input values from the form
$username = mysqli_real_escape_string($db, $_POST['username']);
$email = mysqli_real_escape_string($db, $_POST['email']);
$password_1 = mysqli_real_escape_string($db, $_POST['password_1']);
$password_2 = mysqli_real_escape_string($db, $_POST['password_2']);
// Form validation: ensure that the form is correctly filled
// by adding (array_push()) corresponding error unto $errors array
if (empty($username)) {
array_push($errors, "Username is required");
}
if (empty($email)) {
array_push($errors, "Email is required");
}
if (empty($password_1)) {
array_push($errors, "Password is required");
}
if ($password_1 != $password_2) {
array_push($errors, "The two passwords do not match");
}
// First check the database to make sure
// a user does not already exist with the same username and/or email
$user_check_query = "SELECT * FROM users WHERE username='$username' OR email='$email' LIMIT 1";
$result = mysqli_query($db, $user_check_query);
$user = mysqli_fetch_assoc($result);
if ($user) { // If user exists
if ($user['username'] === $username) {
array_push($errors, "Username already exists");
}
if ($user['email'] === $email) {
array_push($errors, "Email already exists");
}
}
// Finally, register user if there are no errors in the form
if (count($errors) == 0) {
$password = md5($password_1); // Encrypt the password before saving in the database
$query = "INSERT INTO users(username, email, password) VALUES('$username', '$email', '$password')";
mysqli_query($db, $query);
$_SESSION['username'] = $username;
$_SESSION['success'] = "You are now logged in";
header('location: login.php');
}
}
Login
// LOGIN USER
if (isset($_POST['login_user'])) {
$username = mysqli_real_escape_string($db, $_POST['username']);
$password = mysqli_real_escape_string($db, $_POST['password']);
if (empty($username)) {
array_push($errors, "Username is required");
}
if (empty($password)) {
array_push($errors, "Password is required");
}
if (count($errors) == 0) {
$password = md5($password);
$query = "SELECT * FROM users WHERE username='$username' AND password='$password'";
$results = mysqli_query($db, $query);
if (mysqli_num_rows($results) == 1) {
$_SESSION['username'] = $username;
$_SESSION['success'] = "You are now logged in";
header('location: index.php');
}else {
array_push($errors, "Wrong username/password combination");
}
}
}?>
// LOGIN USER
if (isset($_POST['login_user'])) {
$username = mysqli_real_escape_string($db, $_POST['username']);
$password = mysqli_real_escape_string($db, $_POST['password']);
if (empty($username)) {
array_push($errors, "Username is required");
}
if (empty($password)) {
array_push($errors, "Password is required");
}
if (count($errors) == 0) {
$password = md5($password);
$query = "SELECT * FROM users WHERE username='$username' AND password='$password'";
$results = mysqli_query($db, $query);
if (mysqli_num_rows($results) == 1) {
$_SESSION['username'] = $username;
$_SESSION['success'] = "You are now logged in";
header('location: index.php');
}else {
array_push($errors, "Wrong username/password combination");
}
}
}?>
// LOGIN USER
if (isset($_POST['login_user'])) {
$username = mysqli_real_escape_string($db, $_POST['username']);
$password = mysqli_real_escape_string($db, $_POST['password']);
if (empty($username)) {
array_push($errors, "Username is required");
}
if (empty($password)) {
array_push($errors, "Password is required");
}
if (count($errors) == 0) {
$password = md5($password);
$query = "SELECT * FROM users WHERE username='$username' AND password='$password'";
$results = mysqli_query($db, $query);
if (mysqli_num_rows($results) == 1) {
$_SESSION['username'] = $username;
$_SESSION['success'] = "You are now logged in";
header('location: index.php');
}else {
array_push($errors, "Wrong username/password combination");
}
}
}?>
要顯示錯誤，請新建一個名為errors.php的檔案，並將以下程式碼複製到其中。
<?php if (count($errors) > 0) : ?>
<div class="error">
<?php foreach ($errors as $error) : ?>
<p><?php echo $error ?></p>
<?php endforeach ?>
</div>
<?php endif ?>
<?php if (count($errors) > 0) : ?>
<div class="error">
<?php foreach ($errors as $error) : ?>
<p><?php echo $error ?></p>
<?php endforeach ?>
</div>
<?php endif ?>
<?php if (count($errors) > 0) : ?> <div class="error"> <?php foreach ($errors as $error) : ?> <p><?php echo $error ?></p> <?php endforeach ?> </div> <?php endif ?>
第 3 步：建立產品頁面
然後，建立一個名為 product.php 的新頁面，並將以下程式碼複製到其中。
<?php
include('pserver.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Start Bootstrap Template</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="css/sb-admin.css" rel="stylesheet">
</head>
<body class="fixed-nav sticky-footer bg-dark" id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<a class="navbar-brand" href="index.php">Start Bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav navbar-sidenav" id="exampleAccordion">
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Dashboard">
<a class="nav-link" href="index.php">
<i class="fa fa-fw fa-dashboard"></i>
<span class="nav-link-text">Dashboard</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Charts">
<a class="nav-link" href="charts.html">
<i class="fa fa-check-square"></i>
<span class="nav-link-text">Create Products</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Charts">
<a class="nav-link" href="register.php">
<i class="fa fas fa-user"></i>
<span class="nav-link-text">Register Users</span>
</a>
</li>
</ul>
<ul class="navbar-nav sidenav-toggler">
<li class="nav-item">
<a class="nav-link text-center" id="sidenavToggler">
<i class="fa fa-fw fa-angle-left"></i>
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle mr-lg-2" id="messagesDropdown" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-envelope"></i>
<span class="d-lg-none">Messages
<span class="badge badge-pill badge-primary">12 New</span>
</span>
<span class="indicator text-primary d-none d-lg-block">
<i class="fa fa-fw fa-circle"></i>
</span>
</a>
<div class="dropdown-menu" aria-labelledby="messagesDropdown">
<h6 class="dropdown-header">New Messages:</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<strong>David Miller</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">Hey there! This new version of SB Admin is pretty awesome! These messages clip off when they reach the end of the box so they don't overflow over to the sides!</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<strong>Jane Smith</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">I was wondering if you could meet for an appointment at 3:00 instead of 4:00. Thanks!</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<strong>John Doe</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">I've sent the final files over to you for review. When you're able to sign off of them let me know and we can discuss distribution.</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item small" href="#">View all messages</a>
</div>
</li>
<li class="nav-item">
<form class="form-inline my-2 my-lg-0 mr-lg-2">
<div class="input-group">
<input class="form-control" type="text" placeholder="Search for...">
<span class="input-group-append">
<button class="btn btn-primary" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="modal" data-target="#exampleModal">
<i class="fa fa-fw fa-sign-out"></i>Logout</a>
</li>
</ul>
</div>
</nav>
<div class="content-wrapper">
<div class="container-fluid">
<!-- Breadcrumbs-->
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="index.html">Dashboard</a>
</li>
<li class="breadcrumb-item active">Product Page</li>
</ol>
<div class="row">
<div class="col-12">
<h1>Create Product</h1>
</div>
<div class="col-md-8">
<form method="post" action="product.php">
<div class="form-group">
<label>Product Name</label>
<input type="text" class="form-control" name="pname" required>
</div>
<div class="form-group">
<label>Product Price</label>
<input type="text" class="form-control" name="price" required>
</div>
<div class="form-group">
<label>Product Category</label>
<input type="text" class="form-control" name="pcat" required>
</div>
<div class="form-group">
<label>Product Details</label>
<textarea class="form-control" name="pdetails" required></textarea>
</div>
<button type="submit" class="btn btn-primary" name="reg_p">Submit</button>
</form>
</div>
</div>
</div>
<!-- /.container-fluid-->
<!-- /.content-wrapper-->
<footer class="sticky-footer">
<div class="container">
<div class="text-center">
<small>Copyright © Your Website 2018</small>
</div>
</div>
</footer>
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fa fa-angle-up"></i>
</a>
<!-- Logout Modal-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="document" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="login.php">Logout</a>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin.min.js"></script>
</div>
</body>
</html>
<?php
include('pserver.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Start Bootstrap Template</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="css/sb-admin.css" rel="stylesheet">
</head>
<body class="fixed-nav sticky-footer bg-dark" id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<a class="navbar-brand" href="index.php">Start Bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav navbar-sidenav" id="exampleAccordion">
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Dashboard">
<a class="nav-link" href="index.php">
<i class="fa fa-fw fa-dashboard"></i>
<span class="nav-link-text">Dashboard</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Charts">
<a class="nav-link" href="charts.html">
<i class="fa fa-check-square"></i>
<span class="nav-link-text">Create Products</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Charts">
<a class="nav-link" href="register.php">
<i class="fa fas fa-user"></i>
<span class="nav-link-text">Register Users</span>
</a>
</li>
</ul>
<ul class="navbar-nav sidenav-toggler">
<li class="nav-item">
<a class="nav-link text-center" id="sidenavToggler">
<i class="fa fa-fw fa-angle-left"></i>
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle mr-lg-2" id="messagesDropdown" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-envelope"></i>
<span class="d-lg-none">Messages
<span class="badge badge-pill badge-primary">12 New</span>
</span>
<span class="indicator text-primary d-none d-lg-block">
<i class="fa fa-fw fa-circle"></i>
</span>
</a>
<div class="dropdown-menu" aria-labelledby="messagesDropdown">
<h6 class="dropdown-header">New Messages:</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<strong>David Miller</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">Hey there! This new version of SB Admin is pretty awesome! These messages clip off when they reach the end of the box so they don't overflow over to the sides!</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<strong>Jane Smith</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">I was wondering if you could meet for an appointment at 3:00 instead of 4:00. Thanks!</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<strong>John Doe</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">I've sent the final files over to you for review. When you're able to sign off of them let me know and we can discuss distribution.</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item small" href="#">View all messages</a>
</div>
</li>
<li class="nav-item">
<form class="form-inline my-2 my-lg-0 mr-lg-2">
<div class="input-group">
<input class="form-control" type="text" placeholder="Search for...">
<span class="input-group-append">
<button class="btn btn-primary" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="modal" data-target="#exampleModal">
<i class="fa fa-fw fa-sign-out"></i>Logout</a>
</li>
</ul>
</div>
</nav>
<div class="content-wrapper">
<div class="container-fluid">
<!-- Breadcrumbs-->
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="index.html">Dashboard</a>
</li>
<li class="breadcrumb-item active">Product Page</li>
</ol>
<div class="row">
<div class="col-12">
<h1>Create Product</h1>
</div>
<div class="col-md-8">
<form method="post" action="product.php">
<div class="form-group">
<label>Product Name</label>
<input type="text" class="form-control" name="pname" required>
</div>
<div class="form-group">
<label>Product Price</label>
<input type="text" class="form-control" name="price" required>
</div>
<div class="form-group">
<label>Product Category</label>
<input type="text" class="form-control" name="pcat" required>
</div>
<div class="form-group">
<label>Product Details</label>
<textarea class="form-control" name="pdetails" required></textarea>
</div>
<button type="submit" class="btn btn-primary" name="reg_p">Submit</button>
</form>
</div>
</div>
</div>
<!-- /.container-fluid-->
<!-- /.content-wrapper-->
<footer class="sticky-footer">
<div class="container">
<div class="text-center">
<small>Copyright © Your Website 2018</small>
</div>
</div>
</footer>
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fa fa-angle-up"></i>
</a>
<!-- Logout Modal-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="document" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="login.php">Logout</a>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin.min.js"></script>
</div>
</body>
</html>
<?php
include('pserver.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Start Bootstrap Template</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="css/sb-admin.css" rel="stylesheet">
</head>
<body class="fixed-nav sticky-footer bg-dark" id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<a class="navbar-brand" href="index.php">Start Bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav navbar-sidenav" id="exampleAccordion">
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Dashboard">
<a class="nav-link" href="index.php">
<i class="fa fa-fw fa-dashboard"></i>
<span class="nav-link-text">Dashboard</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Charts">
<a class="nav-link" href="charts.html">
<i class="fa fa-check-square"></i>
<span class="nav-link-text">Create Products</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Charts">
<a class="nav-link" href="register.php">
<i class="fa fas fa-user"></i>
<span class="nav-link-text">Register Users</span>
</a>
</li>
</ul>
<ul class="navbar-nav sidenav-toggler">
<li class="nav-item">
<a class="nav-link text-center" id="sidenavToggler">
<i class="fa fa-fw fa-angle-left"></i>
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle mr-lg-2" id="messagesDropdown" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-envelope"></i>
<span class="d-lg-none">Messages
<span class="badge badge-pill badge-primary">12 New</span>
</span>
<span class="indicator text-primary d-none d-lg-block">
<i class="fa fa-fw fa-circle"></i>
</span>
</a>
<div class="dropdown-menu" aria-labelledby="messagesDropdown">
<h6 class="dropdown-header">New Messages:</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<strong>David Miller</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">Hey there! This new version of SB Admin is pretty awesome! These messages clip off when they reach the end of the box so they don't overflow over to the sides!</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<strong>Jane Smith</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">I was wondering if you could meet for an appointment at 3:00 instead of 4:00. Thanks!</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<strong>John Doe</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">I've sent the final files over to you for review. When you're able to sign off of them let me know and we can discuss distribution.</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item small" href="#">View all messages</a>
</div>
</li>
<li class="nav-item">
<form class="form-inline my-2 my-lg-0 mr-lg-2">
<div class="input-group">
<input class="form-control" type="text" placeholder="Search for...">
<span class="input-group-append">
<button class="btn btn-primary" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="modal" data-target="#exampleModal">
<i class="fa fa-fw fa-sign-out"></i>Logout</a>
</li>
</ul>
</div>
</nav>
<div class="content-wrapper">
<div class="container-fluid">
<!-- Breadcrumbs-->
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="index.html">Dashboard</a>
</li>
<li class="breadcrumb-item active">Product Page</li>
</ol>
<div class="row">
<div class="col-12">
<h1>Create Product</h1>
</div>
<div class="col-md-8">
<form method="post" action="product.php">
<div class="form-group">
<label>Product Name</label>
<input type="text" class="form-control" name="pname" required>
</div>
<div class="form-group">
<label>Product Price</label>
<input type="text" class="form-control" name="price" required>
</div>
<div class="form-group">
<label>Product Category</label>
<input type="text" class="form-control" name="pcat" required>
</div>
<div class="form-group">
<label>Product Details</label>
<textarea class="form-control" name="pdetails" required></textarea>
</div>
<button type="submit" class="btn btn-primary" name="reg_p">Submit</button>
</form>
</div>
</div>
</div>
<!-- /.container-fluid-->
<!-- /.content-wrapper-->
<footer class="sticky-footer">
<div class="container">
<div class="text-center">
<small>Copyright © Your Website 2018</small>
</div>
</div>
</footer>
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fa fa-angle-up"></i>
</a>
<!-- Logout Modal-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="document" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="login.php">Logout</a>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin.min.js"></script>
</div>
</body>
</html>
第 4 步：向資料庫新增產品
接下來，我將在主資料夾中新建一個名為 pserver.php 的檔案，並將這些程式碼複製到其中。
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "registration";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
if (isset($_POST['reg_p'])) {
// Receive all input values from the form
$pname = mysqli_real_escape_string($conn, $_POST['pname']);
$price = mysqli_real_escape_string($conn, $_POST['pirce']); // Note: There might be a typo here, should it be 'price'?
$pcat = mysqli_real_escape_string($conn, $_POST['pcat']);
$product_details = mysqli_real_escape_string($conn, $_POST['pdetails']);
$sql = "INSERT INTO products (product_name, product_price, product_cat, product_details)
VALUES ('$pname', '$price', '$pcat', '$product_details')";
if ($conn->query($sql) === TRUE) {
echo "alert('New record created successfully')";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}
$conn->close();
?>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "registration";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
if (isset($_POST['reg_p'])) {
// Receive all input values from the form
$pname = mysqli_real_escape_string($conn, $_POST['pname']);
$price = mysqli_real_escape_string($conn, $_POST['pirce']); // Note: There might be a typo here, should it be 'price'?
$pcat = mysqli_real_escape_string($conn, $_POST['pcat']);
$product_details = mysqli_real_escape_string($conn, $_POST['pdetails']);
$sql = "INSERT INTO products (product_name, product_price, product_cat, product_details)
VALUES ('$pname', '$price', '$pcat', '$product_details')";
if ($conn->query($sql) === TRUE) {
echo "alert('New record created successfully')";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}
$conn->close();
?>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "registration";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
if (isset($_POST['reg_p'])) {
// Receive all input values from the form
$pname = mysqli_real_escape_string($conn, $_POST['pname']);
$price = mysqli_real_escape_string($conn, $_POST['pirce']); // Note: There might be a typo here, should it be 'price'?
$pcat = mysqli_real_escape_string($conn, $_POST['pcat']);
$product_details = mysqli_real_escape_string($conn, $_POST['pdetails']);
$sql = "INSERT INTO products (product_name, product_price, product_cat, product_details)
VALUES ('$pname', '$price', '$pcat', '$product_details')";
if ($conn->query($sql) === TRUE) {
echo "alert('New record created successfully')";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}
$conn->close();
?>
第 5 步：資料視覺化
我需要用資料庫中的資訊填充 Bootstrap 資料表。我將把資料表連線到資料庫。
下面是填充 Bootstrap 資料表的程式碼。讓我們用這段程式碼更新表格程式碼：
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>Name of Product</th>
<th>Price of Product</th>
<th>Product Category</th>
<th>Product Details</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Name of Product</th>
<th>Price of Product</th>
<th>Product Category</th>
<th>Product Details</th>
</tr>
</tfoot>
<tbody>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "registration";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = 'SELECT * FROM products';
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
// Output data of each row
while ($row = mysqli_fetch_assoc($result)) {
?>
<tr>
<th><?php echo $row['product_id']; ?></th>
<td><?php echo htmlspecialchars($row['product_name']); ?></td>
<td><?php echo htmlspecialchars($row['product_price']); ?></td>
<td><?php echo htmlspecialchars($row['product_cat']); ?></td>
<td><?php echo htmlspecialchars($row['product_details']); ?></td>
</tr>
<?php
}
} else {
echo '<tr><td colspan="5">0 results</td></tr>';
}
$conn->close();
?>
</tbody>
</table>
</div>
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>Name of Product</th>
<th>Price of Product</th>
<th>Product Category</th>
<th>Product Details</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Name of Product</th>
<th>Price of Product</th>
<th>Product Category</th>
<th>Product Details</th>
</tr>
</tfoot>
<tbody>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "registration";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = 'SELECT * FROM products';
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
// Output data of each row
while ($row = mysqli_fetch_assoc($result)) {
?>
<tr>
<th><?php echo $row['product_id']; ?></th>
<td><?php echo htmlspecialchars($row['product_name']); ?></td>
<td><?php echo htmlspecialchars($row['product_price']); ?></td>
<td><?php echo htmlspecialchars($row['product_cat']); ?></td>
<td><?php echo htmlspecialchars($row['product_details']); ?></td>
</tr>
<?php
}
} else {
echo '<tr><td colspan="5">0 results</td></tr>';
}
$conn->close();
?>
</tbody>
</table>
</div>
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>Name of Product</th>
<th>Price of Product</th>
<th>Product Category</th>
<th>Product Details</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Name of Product</th>
<th>Price of Product</th>
<th>Product Category</th>
<th>Product Details</th>
</tr>
</tfoot>
<tbody>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "registration";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = 'SELECT * FROM products';
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
// Output data of each row
while ($row = mysqli_fetch_assoc($result)) {
?>
<tr>
<th><?php echo $row['product_id']; ?></th>
<td><?php echo htmlspecialchars($row['product_name']); ?></td>
<td><?php echo htmlspecialchars($row['product_price']); ?></td>
<td><?php echo htmlspecialchars($row['product_cat']); ?></td>
<td><?php echo htmlspecialchars($row['product_details']); ?></td>
</tr>
<?php
}
} else {
echo '<tr><td colspan="5">0 results</td></tr>';
}
$conn->close();
?>
</tbody>
</table>
</div>
下面是使用上述程式碼後表格的樣子：
接下來，我將使用資料庫中的資料在 PHP 管理儀表板上建立一個折線圖。
– 儀表盤顯示下載量、利潤、客戶和渠道等資訊，還有收入明細和細分圖表，以及檢視更詳細報告的選項。
如圖所示，儀表板頂部有四張卡片，分別顯示每月訪客、收入、新訂單和新票據。這些卡片的資料來自資料庫，使用的是簡單的 SELECT 查詢。
第 6 步：設定儀表盤
下面是儀表盤檢視的完整程式碼，你需要把它放在 index.php 中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Start Bootstrap Template</title> <!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom fonts for this template -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Page level plugin CSS -->
<link href="vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet"> <!-- Custom styles for this template -->
<link href="css/sb-admin.css" rel="stylesheet">
</head>
<body class="fixed-nav sticky-footer bg-dark" id="page-top"> <!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav"> <a class="navbar-brand"
href="index.php">Start Bootstrap</a> <button class="navbar-toggler navbar-toggler-right" type="button"
data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav navbar-sidenav" id="exampleAccordion">
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Dashboard"> <a class="nav-link"
href="index.php"> <i class="fa fa-fw fa-dashboard"></i> <span
class="nav-link-text">Dashboard</span> </a> </li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Create Product"> <a
class="nav-link" href="product.php"> <i class="fa fa-check-square"></i> <span
class="nav-link-text">Create Product</span> </a> </li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Register Users"> <a
class="nav-link" href="register.php"> <i class="fa fas fa-user"></i> <span
class="nav-link-text">Register Users</span> </a> </li>
</ul>
<ul class="navbar-nav sidenav-toggler">
<li class="nav-item"> <a class="nav-link text-center" id="sidenavToggler"> <i
class="fa fa-fw fa-angle-left"></i> </a> </li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle mr-lg-2" id="messagesDropdown"
href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i
class="fa fa-fw fa-envelope"></i> <span class="d-lg-none">Messages <span
class="badge badge-pill badge-primary">12 New</span> </span> <span
class="indicator text-primary d-none d-lg-block"> <i class="fa fa-fw fa-circle"></i> </span>
</a>
<div class="dropdown-menu" aria-labelledby="messagesDropdown">
<h6 class="dropdown-header">New Messages:</h6>
<div class="dropdown-divider"></div> <a class="dropdown-item" href="#"> <strong>David
Miller</strong> <span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">Hey there! This new version of SB Admin is pretty
awesome! These messages clip off when they reach the end of the box so they don't
overflow over to the sides!</div>
</a>
<div class="dropdown-divider"></div> <a class="dropdown-item" href="#"> <strong>Jane
Smith</strong> <span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">I was wondering if you could meet for an appointment at
3:00 instead of 4:00. Thanks!</div>
</a>
<div class="dropdown-divider"></div> <a class="dropdown-item" href="#"> <strong>John
Doe</strong> <span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">I've sent the final files over to you for review. When
you're able to sign off of them let me know and we can discuss distribution.</div>
</a>
<div class="dropdown-divider"></div> <a class="dropdown-item small" href="#">View all
messages</a>
</div>
</li>
<li class="nav-item">
<form class="form-inline my-2 my-lg-0 mr-lg-2">
<div class="input-group"> <input class="form-control" type="text" placeholder="Search for...">
<span class="input-group-append"> <button class="btn btn-primary" type="button"> <i
class="fa fa-search"></i> </button> </span> </div>
</form>
</li>
<li class="nav-item"> <a class="nav-link" data-toggle="modal" data-target="#exampleModal"> <i
class="fa fa-fw fa-sign-out"></i>Logout </a> </li>
</ul>
</div>
</nav>
<div class="content-wrapper">
<div class="container-fluid"> <!-- Breadcrumbs-->
<ol class="breadcrumb">
<li class="breadcrumb-item"> <a href="#">Dashboard</a> </li>
<li class="breadcrumb-item active">My Dashboard</li>
</ol> <!-- Icon Cards-->
<?php $servername = "localhost"; $username = "root"; $password = ""; $dbname = "registration"; // Create connection $conn = new mysqli($servername, $username, $password, $dbname); $sql = "SELECT * from sales_stats WHERE month='Mar' "; $result = mysqli_query($conn, $sql); if (mysqli_num_rows($result) > 0) { // output data of each row while($row = mysqli_fetch_assoc($result)) { ?>
<div class="row">
<div class="col-xl-3 col-sm-6 mb-3">
<div class="card text-white bg-primary o-hidden h-100">
<div class="card-body">
<div class="card-body-icon"> <i class="fa fa-fw fa-comments"></i> </div>
<div class="mr-5">
<?php echo $row['Visitors']; ?> Visitors
</div>
</div> <a class="card-footer text-white clearfix small z-1" href="#"> <span
class="float-left">View Details</span> <span class="float-right"> <i
class="fa fa-angle-right"></i> </span> </a>
</div>
</div>
<?php } } else { echo '0 results'; } $conn->close(); ?> <!-- Example DataTables Card-->
<div class="card mb-3">
<div class="card-header"> <i class="fa fa-table"></i> Data Table Example </div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>Name of Product</th>
<th>Price of Product</th>
<th>Product Category</th>
<th>Product Details</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Name of Product</th>
<th>Price of Product</th>
<th>Product Category</th>
<th>Product Details</th>
</tr>
</tfoot>
<tbody>
<?php $sql = 'SELECT * from products'; $result = mysqli_query($conn, $sql); if (mysqli_num_rows($result) > 0) { // output data of each row while($row = mysqli_fetch_assoc($result)) { ?>
<tr>
<th>
<?php echo $row['product_id']; ?>
</th>
<td>
<?php echo $row['product_name']; ?>
</td>
<td>
<?php echo $row['product_price']; ?>
</td>
<td>
<?php echo $row['product_cat']; ?>
</td>
<td>
<?php echo $row['product_details']; ?>
</td>
</tr>
<?php } } else { echo '0 results'; } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Start Bootstrap Template</title> <!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom fonts for this template -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Page level plugin CSS -->
<link href="vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet"> <!-- Custom styles for this template -->
<link href="css/sb-admin.css" rel="stylesheet">
</head>
<body class="fixed-nav sticky-footer bg-dark" id="page-top"> <!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav"> <a class="navbar-brand"
href="index.php">Start Bootstrap</a> <button class="navbar-toggler navbar-toggler-right" type="button"
data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav navbar-sidenav" id="exampleAccordion">
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Dashboard"> <a class="nav-link"
href="index.php"> <i class="fa fa-fw fa-dashboard"></i> <span
class="nav-link-text">Dashboard</span> </a> </li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Create Product"> <a
class="nav-link" href="product.php"> <i class="fa fa-check-square"></i> <span
class="nav-link-text">Create Product</span> </a> </li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Register Users"> <a
class="nav-link" href="register.php"> <i class="fa fas fa-user"></i> <span
class="nav-link-text">Register Users</span> </a> </li>
</ul>
<ul class="navbar-nav sidenav-toggler">
<li class="nav-item"> <a class="nav-link text-center" id="sidenavToggler"> <i
class="fa fa-fw fa-angle-left"></i> </a> </li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle mr-lg-2" id="messagesDropdown"
href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i
class="fa fa-fw fa-envelope"></i> <span class="d-lg-none">Messages <span
class="badge badge-pill badge-primary">12 New</span> </span> <span
class="indicator text-primary d-none d-lg-block"> <i class="fa fa-fw fa-circle"></i> </span>
</a>
<div class="dropdown-menu" aria-labelledby="messagesDropdown">
<h6 class="dropdown-header">New Messages:</h6>
<div class="dropdown-divider"></div> <a class="dropdown-item" href="#"> <strong>David
Miller</strong> <span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">Hey there! This new version of SB Admin is pretty
awesome! These messages clip off when they reach the end of the box so they don't
overflow over to the sides!</div>
</a>
<div class="dropdown-divider"></div> <a class="dropdown-item" href="#"> <strong>Jane
Smith</strong> <span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">I was wondering if you could meet for an appointment at
3:00 instead of 4:00. Thanks!</div>
</a>
<div class="dropdown-divider"></div> <a class="dropdown-item" href="#"> <strong>John
Doe</strong> <span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">I've sent the final files over to you for review. When
you're able to sign off of them let me know and we can discuss distribution.</div>
</a>
<div class="dropdown-divider"></div> <a class="dropdown-item small" href="#">View all
messages</a>
</div>
</li>
<li class="nav-item">
<form class="form-inline my-2 my-lg-0 mr-lg-2">
<div class="input-group"> <input class="form-control" type="text" placeholder="Search for...">
<span class="input-group-append"> <button class="btn btn-primary" type="button"> <i
class="fa fa-search"></i> </button> </span> </div>
</form>
</li>
<li class="nav-item"> <a class="nav-link" data-toggle="modal" data-target="#exampleModal"> <i
class="fa fa-fw fa-sign-out"></i>Logout </a> </li>
</ul>
</div>
</nav>
<div class="content-wrapper">
<div class="container-fluid"> <!-- Breadcrumbs-->
<ol class="breadcrumb">
<li class="breadcrumb-item"> <a href="#">Dashboard</a> </li>
<li class="breadcrumb-item active">My Dashboard</li>
</ol> <!-- Icon Cards-->
<?php $servername = "localhost"; $username = "root"; $password = ""; $dbname = "registration"; // Create connection $conn = new mysqli($servername, $username, $password, $dbname); $sql = "SELECT * from sales_stats WHERE month='Mar' "; $result = mysqli_query($conn, $sql); if (mysqli_num_rows($result) > 0) { // output data of each row while($row = mysqli_fetch_assoc($result)) { ?>
<div class="row">
<div class="col-xl-3 col-sm-6 mb-3">
<div class="card text-white bg-primary o-hidden h-100">
<div class="card-body">
<div class="card-body-icon"> <i class="fa fa-fw fa-comments"></i> </div>
<div class="mr-5">
<?php echo $row['Visitors']; ?> Visitors
</div>
</div> <a class="card-footer text-white clearfix small z-1" href="#"> <span
class="float-left">View Details</span> <span class="float-right"> <i
class="fa fa-angle-right"></i> </span> </a>
</div>
</div>
<?php } } else { echo '0 results'; } $conn->close(); ?> <!-- Example DataTables Card-->
<div class="card mb-3">
<div class="card-header"> <i class="fa fa-table"></i> Data Table Example </div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>Name of Product</th>
<th>Price of Product</th>
<th>Product Category</th>
<th>Product Details</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Name of Product</th>
<th>Price of Product</th>
<th>Product Category</th>
<th>Product Details</th>
</tr>
</tfoot>
<tbody>
<?php $sql = 'SELECT * from products'; $result = mysqli_query($conn, $sql); if (mysqli_num_rows($result) > 0) { // output data of each row while($row = mysqli_fetch_assoc($result)) { ?>
<tr>
<th>
<?php echo $row['product_id']; ?>
</th>
<td>
<?php echo $row['product_name']; ?>
</td>
<td>
<?php echo $row['product_price']; ?>
</td>
<td>
<?php echo $row['product_cat']; ?>
</td>
<td>
<?php echo $row['product_details']; ?>
</td>
</tr>
<?php } } else { echo '0 results'; } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Start Bootstrap Template</title> <!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom fonts for this template -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Page level plugin CSS -->
<link href="vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet"> <!-- Custom styles for this template -->
<link href="css/sb-admin.css" rel="stylesheet">
</head>
<body class="fixed-nav sticky-footer bg-dark" id="page-top"> <!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav"> <a class="navbar-brand"
href="index.php">Start Bootstrap</a> <button class="navbar-toggler navbar-toggler-right" type="button"
data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav navbar-sidenav" id="exampleAccordion">
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Dashboard"> <a class="nav-link"
href="index.php"> <i class="fa fa-fw fa-dashboard"></i> <span
class="nav-link-text">Dashboard</span> </a> </li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Create Product"> <a
class="nav-link" href="product.php"> <i class="fa fa-check-square"></i> <span
class="nav-link-text">Create Product</span> </a> </li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Register Users"> <a
class="nav-link" href="register.php"> <i class="fa fas fa-user"></i> <span
class="nav-link-text">Register Users</span> </a> </li>
</ul>
<ul class="navbar-nav sidenav-toggler">
<li class="nav-item"> <a class="nav-link text-center" id="sidenavToggler"> <i
class="fa fa-fw fa-angle-left"></i> </a> </li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle mr-lg-2" id="messagesDropdown"
href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i
class="fa fa-fw fa-envelope"></i> <span class="d-lg-none">Messages <span
class="badge badge-pill badge-primary">12 New</span> </span> <span
class="indicator text-primary d-none d-lg-block"> <i class="fa fa-fw fa-circle"></i> </span>
</a>
<div class="dropdown-menu" aria-labelledby="messagesDropdown">
<h6 class="dropdown-header">New Messages:</h6>
<div class="dropdown-divider"></div> <a class="dropdown-item" href="#"> <strong>David
Miller</strong> <span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">Hey there! This new version of SB Admin is pretty
awesome! These messages clip off when they reach the end of the box so they don't
overflow over to the sides!</div>
</a>
<div class="dropdown-divider"></div> <a class="dropdown-item" href="#"> <strong>Jane
Smith</strong> <span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">I was wondering if you could meet for an appointment at
3:00 instead of 4:00. Thanks!</div>
</a>
<div class="dropdown-divider"></div> <a class="dropdown-item" href="#"> <strong>John
Doe</strong> <span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">I've sent the final files over to you for review. When
you're able to sign off of them let me know and we can discuss distribution.</div>
</a>
<div class="dropdown-divider"></div> <a class="dropdown-item small" href="#">View all
messages</a>
</div>
</li>
<li class="nav-item">
<form class="form-inline my-2 my-lg-0 mr-lg-2">
<div class="input-group"> <input class="form-control" type="text" placeholder="Search for...">
<span class="input-group-append"> <button class="btn btn-primary" type="button"> <i
class="fa fa-search"></i> </button> </span> </div>
</form>
</li>
<li class="nav-item"> <a class="nav-link" data-toggle="modal" data-target="#exampleModal"> <i
class="fa fa-fw fa-sign-out"></i>Logout </a> </li>
</ul>
</div>
</nav>
<div class="content-wrapper">
<div class="container-fluid"> <!-- Breadcrumbs-->
<ol class="breadcrumb">
<li class="breadcrumb-item"> <a href="#">Dashboard</a> </li>
<li class="breadcrumb-item active">My Dashboard</li>
</ol> <!-- Icon Cards-->
<?php $servername = "localhost"; $username = "root"; $password = ""; $dbname = "registration"; // Create connection $conn = new mysqli($servername, $username, $password, $dbname); $sql = "SELECT * from sales_stats WHERE month='Mar' "; $result = mysqli_query($conn, $sql); if (mysqli_num_rows($result) > 0) { // output data of each row while($row = mysqli_fetch_assoc($result)) { ?>
<div class="row">
<div class="col-xl-3 col-sm-6 mb-3">
<div class="card text-white bg-primary o-hidden h-100">
<div class="card-body">
<div class="card-body-icon"> <i class="fa fa-fw fa-comments"></i> </div>
<div class="mr-5">
<?php echo $row['Visitors']; ?> Visitors
</div>
</div> <a class="card-footer text-white clearfix small z-1" href="#"> <span
class="float-left">View Details</span> <span class="float-right"> <i
class="fa fa-angle-right"></i> </span> </a>
</div>
</div>
<?php } } else { echo '0 results'; } $conn->close(); ?> <!-- Example DataTables Card-->
<div class="card mb-3">
<div class="card-header"> <i class="fa fa-table"></i> Data Table Example </div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>Name of Product</th>
<th>Price of Product</th>
<th>Product Category</th>
<th>Product Details</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Name of Product</th>
<th>Price of Product</th>
<th>Product Category</th>
<th>Product Details</th>
</tr>
</tfoot>
<tbody>
<?php $sql = 'SELECT * from products'; $result = mysqli_query($conn, $sql); if (mysqli_num_rows($result) > 0) { // output data of each row while($row = mysqli_fetch_assoc($result)) { ?>
<tr>
<th>
<?php echo $row['product_id']; ?>
</th>
<td>
<?php echo $row['product_name']; ?>
</td>
<td>
<?php echo $row['product_price']; ?>
</td>
<td>
<?php echo $row['product_cat']; ?>
</td>
<td>
<?php echo $row['product_details']; ?>
</td>
</tr>
<?php } } else { echo '0 results'; } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Bootstrap管理面板模板
這裡有最好的免費 Bootstrap 管理面板模板，每個模板都有不同之處。請選擇適合您專案的模板。
1. AdminLTE
– Source: AdminLTE
AdminLTE 是目前最流行的免費 Bootstrap 管理模板之一。其簡潔的響應式設計使其成為小型和大型專案的理想選擇。其介面直觀，允許開發人員快速設定一個外觀時尚的管理儀表板。
AdminLTE 的與眾不同之處在於它擁有大量可重複使用的元件庫，如圖表、圖形和表單。它支援多個外掛，使定製變得無縫。該模板具有高度響應性，可確保在所有裝置上執行。
功能特點
- 多種預設計皮膚
- 互動式圖表和圖形
- 文件齊全，易於定製
優缺點
✓ 在所有裝置上響應式靈敏
✓ 大量可重複使用的元件集合
✗ 沒有付費擴充套件，高階定製功能有限
2. SB Admin 2
– Source: SB Admin 2
SB Admin 2 是一款基於 Bootstrap 4 的現代化免費管理儀表盤模板。簡約的設計注重功能性，同時確保快速、輕量級的體驗。其簡潔的佈局使導航變得流暢和使用者友好。
該模板包含一系列使用者介面元件，如按鈕、卡片和表單，可輕鬆進行調整。它還整合了 FontAwesome 圖示和自定義 Bootstrap 工具，以增強造型選項。SB Admin 2 是建立基礎到中級管理面板的完美選擇。
功能特點
- 整合 FontAwesome 圖示
- 自定義 Bootstrap 實用程式，用於擴充套件樣式
- 簡約設計，載入速度更快
優缺點
✓ 輕量級、快速載入
✓ 與 FontAwesome 圖示輕鬆整合
✗ 開箱即用的小部件有限
3. CoreUI
– Source: CoreUI
CoreUI 是一款全面的免費管理儀表盤模板，它提供的遠不止基本的 Bootstrap 設定。CoreUI 在設計時考慮到了開發人員的需求，功能豐富，為構建複雜的管理介面奠定了堅實的基礎。它支援 Vue.js、React 和 Angular 等多個框架。
該模板因其廣泛的預置元件（包括各種圖表庫和詳細表單）而脫穎而出。CoreUI 提供的靈活性使其成為希望在更高階的網路應用程式中實施儀表盤的開發人員的首選。
功能特點
- 支援 Vue.js、Angular 和 React
- 詳細的表單和多種圖表選項
- 相容多種框架
優缺點
✓ 多框架支援（Vue、Angular 和 React）
✓ 大量自定義選項
✗ 對於初學者來說略顯複雜
4. Matrix Admin
– Source: Matrix Admin
Matrix Admin 為管理儀表盤提供了一種簡單明瞭的方法。它的設計簡潔，易於瀏覽，適合以簡潔為關鍵的專案。該模板包含多個基本部件和使用者介面元件，為功能儀表盤奠定了堅實的基礎。
Matrix Admin 非常適合正在尋找輕量級模板的開發人員，它不會被不必要的功能所淹沒。它包含基本的表單元素、驗證工具和簡單的表格，是簡化後端介面的絕佳選擇。
功能特點
- 簡單的小部件和表單驗證工具
- 輕量級、易於瀏覽的設計
- 具有排序和過濾功能的基本表格
優缺點
✓ 輕量級，易於設定
✓ 適合簡單的後臺
✗ 自定義選項有限
5. Gentelella
– Source: Gentelella
Gentelella是一款優雅的免費 Bootstrap 管理模板，具有靈活的佈局和許多用於高階後臺系統的功能。其現代化和結構合理的設計使其成為大型專案的理想之選。Gentelella 為圖表、資料表和日曆提供了多個外掛，確保開發人員擁有建立強大儀表盤所需的工具。
該模板因其可定製的面板和先進的外掛而脫穎而出，具有很強的適應性。Gentelella 設計用於高效處理大型資料集，提供詳細的表格和報告，是資料驅動型專案的完美之選。
功能特點
- 多種圖表和日曆外掛
- 適用於大型資料集的高階資料表
- 可定製面板，佈局靈活
優缺點
✓ 處理大型資料集的理想選擇
✓ 包括高階資料視覺化工具
✗ 對於較小的專案，可能會感覺力不從心
小結
使用 Bootstrap 5 構建 PHP 管理面板可以讓您的 Web 開發更輕鬆，並改善使用者體驗應用程式的方式。但是，您所做的設計選擇會影響儀表盤的執行效果、維護的簡易程度以及增長的方式。
透過學習和提高技能，您可以建立使用者喜愛的優秀解決方案。您還可以使用應用程式介面（API）來構建此應用程式，而無需混合 HTML 和 PHP 程式碼。API 將從資料庫中新增或獲取資料。
常見問題
問：Bootstrap 是 CSS 嗎？
答：Bootstrap 不僅僅是 CSS。它是一個開源框架，包含 CSS 和 JavaScript，可幫助快速構建響應式、移動優先的網站。它為排版、表單、按鈕等提供預置樣式，使開發人員更容易建立一致、使用者友好的網站介面。
問：什麼是 PHP 儀表盤？
答：在 PHP 中，儀表盤是一種使用者介面，旨在清晰地顯示重要資訊和資料。它將資料彙總並組織成易於閱讀的格式，通常用於監控和分析，使使用者可以一目瞭然地檢視關鍵指標和更新。
問：Bootstrap 好還是 PHP 好？
答：Bootstrap 和 PHP 有不同的用途，因此直接比較它們並無益處。Bootstrap 是用於設計響應式網頁介面的前端框架，而 PHP 是用於伺服器端功能的後端程式語言。在網站開發中，它們可以協同工作，建立既實用又美觀的網站。
問：如何製作 Bootstrap 管理儀表板？
A. 要使用 Bootstrap 建立管理面板，首先要使用響應式網格佈局來組織導航、側邊欄和主內容等部分。加入表格、表單和卡片等元件來顯示資料。利用 Bootstrap 內建的 UI 元素，如按鈕、警報和模式來實現互動。對於高階功能，可考慮整合 Chart.js 等庫，實現資料視覺化。這樣的設定可確保使用者友好和移動響應的設計，便於管理資料。
問：我可以在 PHP 中使用 Bootstrap 嗎？
A. 可以，您可以在 PHP 中使用 Bootstrap。Bootstrap 是一種前端框架，而 PHP 是一種後端程式語言。將兩者結合起來，您就可以建立動態的、反應靈敏的網頁。PHP 負責處理伺服器端邏輯，而 Bootstrap 則確保使用者介面具有吸引力並對移動裝置友好。透過這種組合，您可以建立強大的互動式網路應用程式。
問：AdminLTE 是免費使用的嗎？
A. 是的，AdminLTE 可以免費使用。它是使用 Bootstrap 構建的開源、響應式儀表盤模板。您可以將其用於個人和商業專案，無需支付任何許可費用。不過，請務必檢視 GitHub 儲存庫中的具體條款，以瞭解任何更新或潛在限制。
問：如何在 Laravel 中整合管理儀表板？
A. 要在 Laravel 中整合管理面板，你有幾個選擇。你可以使用 Voyager 或 AdminLTE 這樣的軟體包，也可以從頭開始建立自己的儀表板。首先透過 Composer 設定 Laravel 並安裝必要的軟體包。然後，將儀表盤的 HTML、CSS 和 JavaScript 新增到 Laravel 檢視中。使用 Laravel 的路由和控制器來連結動態內容，你就能擁有一個功能強大的管理面板了。
評論留言