Aki-1038
commented
3 weeks ago
要設計一套智慧家庭系統，並使用PDO訪問MySQL資料庫以實現用戶登入功能，您可以按照以下步驟進行：
步驟 1: 設計資料庫
首先，確保您的MySQL資料庫中已經存在一個名為 smart_home_aki 的資料庫，並且在其中有一個名為 user 的資料表。這個資料表應該包含至少兩個欄位：username 和 password。您可以使用以下SQL語句來創建這個資料表：
CREATE TABLE user (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL,
password VARCHAR(255) NOT NULL
);接著，插入您的用戶資料：
INSERT INTO user (username, password) VALUES ('aki', 'Md-3308333');步驟 2: 設計登入頁面 (login.html)
使用Bootstrap設計一個簡單的登入頁面。以下是一個基本的範例：
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<title>登入</title>
</head>
<body>
<div class="container">
<h2 class="mt-5">智慧家庭系統登入</h2>
<form action="login.php" method="POST" class="mt-3">
<div class="form-group">
<label for="username">帳號</label>
<input type="text" class="form-control" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">密碼</label>
<input type="password" class="form-control" id="password" name="password" required>
</div>
<button type="submit" class="btn btn-primary">登入</button>
</form>
</div>
</body>
</html>步驟 3: 實作登入邏輯 (login.php)
在 login.php 中，使用PDO來連接MySQL資料庫並驗證用戶的帳號和密碼。以下是範例代碼：
<?php
session_start();
$host = 'localhost'; // 資料庫主機
$db = 'smart_home_aki'; // 資料庫名稱
$user = 'your_db_username'; // 資料庫用戶名
$pass = 'your_db_password'; // 資料庫密碼
try {
// 建立PDO連接
$pdo = new PDO("mysql:host=$host;dbname=$db;charset=utf8", $user, $pass);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// 檢查表單是否提交
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = $_POST['username'];
$password = $_POST['password'];
// 查詢用戶
$stmt = $pdo->prepare("SELECT * FROM user WHERE username = :username AND password = :password");
$stmt->execute(['username' => $username, 'password' => $password]);
// 檢查是否有匹配的用戶
if ($stmt->rowCount() > 0) {
// 登入成功，重定向到home.html
header("Location: home.html");
exit();
} else {
echo "帳號或密碼錯誤";
}
}
} catch (PDOException $e) {
echo "資料庫錯誤: " . $e->getMessage();
}
?>步驟 4: 設計主頁 (home.html)
最後，您可以設計一個簡單的主頁 home.html，用於顯示登入後的內容：
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<title>智慧家庭系統</title>
</head>
<body>
<div class="container">
<h1 class="mt-5">歡迎來到智慧家庭系統</h1>
<p>這裡是您的主頁內容。</p>
</div>
</body>
</html>注意事項
- 確保在實際應用中，密碼應該使用哈希加密存儲，而不是明文存儲。可以使用PHP的
password_hash()和password_verify()函數來處理密碼。 - 確保您的資料庫連接資訊正確，並根據實際情況調整。
- 測試整個流程以確保用戶能夠成功登入並重定向到主頁。
這樣，您就完成了一個基本的智慧家庭系統登入功能。 [1] https://www.scimonth.com.tw/archives/2506 [2] https://www.flh.com.tw/2021-11-29-100-design/ [3] https://www.pro360.com.tw/price/home_automation [4] https://www.youtube.com/watch?v=QATxyP2o65s [5] https://www.flh.com.tw/portfolio/ [6] https://www.ibtmag.com.tw/new_article.asp?ar_id=25272 [7] https://www.cox.com/residential/home.html [8] http://www.runoob.com/php/php-pdo.html [9] https://docs.pingcode.com/baike/1816134 [10] https://yungerdesign.com/article/15 [11] https://blog.csdn.net/guo_qiangqiang/article/details/89959805 [12] https://www.ewa.com.tw/news-detail/smart-home-system.htm [13] https://worktile.com/kb/ask/118343.html [14] https://blog.csdn.net/weixin_43374861/article/details/108961460 [15] https://www.housegood.com.tw/articles/100034/%E6%99%BA%E6%85%A7%E5%AE%B6%E5%BA%AD%E7%B3%BB%E7%B5%B1%E6%95%B4%E5%90%88%E5%AE%A4%E5%85%A7%E8%A8%AD%E8%A8%88%EF%BC%8C5%E5%A4%A7%E6%83%85%E5%A2%83%E9%81%8B%E7%94%A8%E8%9E%8D%E5%90%88%E8%A3%9D%E4%BF%AE%E4%B8%AD%EF%BC%8C%E5%B1%85%E5%AE%B6%E7%94%9F%E6%B4%BB%E6%9B%B4%E4%BE%BF%E5%88%A9 [16] https://www.cnblogs.com/fogwind/p/15218809.html [17] https://help.fanruan.com/finereport-tw/doc-view-882.html [18] https://keithlan.github.io/2019/03/06/prepare_slow/ [19] https://www.youtube.com/watch?v=gLVlW1fZv4U [20] https://juejin.cn/post/7035988582162497567 [21] https://whien.medium.com/js20min-day-16-%E8%A8%AD%E7%BD%AE%E5%85%A7%E5%AE%B9-text-html-%E7%99%BB%E5%85%A5%E6%B5%81%E7%A8%8B%E7%AF%84%E4%BE%8B-6204358646d0 [22] https://www.cnblogs.com/hu308830232/p/14942906.html [23] https://m.php.cn/zh-tw/faq/681284.html [24] https://www.menards.com/main/home.html [25] https://ithelp.ithome.com.tw/articles/10304389 [26] https://bootsnipp.com/tags/login [27] https://m.php.cn/zh-tw/faq/471550.html [28] https://freefrontend.com/bootstrap-login-forms/ [29] http://magicalloveshe.blogspot.com/2008/07/blog-post_18.html [30] https://www.cnblogs.com/WinkJie/p/11875144.html [31] https://www.w3schools.com/howto/howto_css_login_form.asp [32] https://hsuchihting.github.io/javascript/20200813/122919015/ [33] https://ithelp.ithome.com.tw/articles/10234298?sc=hot [34] https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/password [35] https://www.w3schools.com/html/ [36] https://blog.csdn.net/cunjiu9486/article/details/109072840 [37] https://codepen.io/ [38] https://www.mcdonalds.com/us/en-us.html [39] https://getbootstrap.com/ [40] https://www.thermofisher.com/us/en/home.html [41] https://www.nationalcar.com/en/home.html [42] https://www.amtrak.com/home [43] https://mdbootstrap.com/docs/standard/extended/login/ [44] https://getbootstrap.com/docs/4.3/components/forms/ [45] https://colorlib.com/wp/cat/login-forms/ [46] https://cssauthor.com/best-free-bootstrap-login-forms/ [47] https://bootstrapbrain.com/component-tag/login-forms/ [48] https://www.sliderrevolution.com/resources/bootstrap-login-form/ [49] https://themehunk.com/bootstrap-templates-for-login-pages/ [50] https://getbootstrap.com/docs/4.0/examples/sign-in/
設計一套智慧家庭系統 1 . php使用PDO訪問mysql資料庫。 2 . 先在login.html輸入帳號及密碼。