[IoT] Thực hành #1: Xây dựng hệ thống IoT hoàn chỉnh sử dụng AJAX, Http Request, PHP, MySQL

Ở bài 3 chúng ta đã làm quen với truy vấn http để điều khiển 4 thiết bị, trong phần này, mình sẽ hướng dẫn các bản xây dựng 1 hệ thống IoT hoàn chỉnh để điều khiển + giám sát nhiệt độ và trạng thái ON OFF của các thiết bị. Hệ thống sẽ có cả trang đăng nhập, đăng kí tài khoản cho khách hàng

Tìm hiểu về ngôn ngữ PHP, Ajax và MySQL

PHP là ngôn ngữ để lập trình cho server ( các bạn đã được làm quen ở bài 3 rồi đó) đây là nơi chúng ta sẽ sẽ tiền xử lí giao diện web, xử lí gửi nhận các truy vấn GET POST từ browser ( trình duyệt web) cũng như từ esp8266

Database tức cơ sở dữ liệu, tại sao lại cần cơ sở dữ liệu ? Ở bài 3 chúng ta đã dùng file notepad để lưu dữ liệu trạng thái bật tắt của LED, tuy nhiên ở phần này chúng ta phải lưu trạng thái bật tắt của nhiều LED, lại còn phải lưu tài khoản mật khẩu để đăng nhập … bạn vẫn có thể sử dụng file txt để lưu những thứ đó. Nhưng việc truy xuất dữ liệu trong file txt không tiện chút nào, lại chậm nữa. Do vậy, người ta đã sáng tạo ra cơ sơ dữ liệu để truy xuất dữ liệu dễ dàng hơn

SQL là ngôn ngữ giúp ta truy vấn vào cơ sở dữ liệu (database),

MySQL là 1 hệ thống giúp bạn quản lí cơ sở dữ liệu(database), sử dụng ngôn ngữ SQL

PHPMyadmin nó đơn giản là 1 ứng dụng để bạn quản lí database 1 cách trực quan bằng chuột

Ajax ở bài này, mình chỉ sử dụng ajax cho web browser thôi, hiểu đơn giản Ajax giúp trình duyệt web gửi các http request đến server để lấy dữ liệu nhiệt độ …

Trên đây mình đã giới thiệu qua về các khái niệm cơ bản để các bạn tự tìm hiểu chứ mình không giải thích vì giải thích chắc vài chục bài không hết quá 🙁 nếu hướng dẫn thì blog của mình thành blog lập trình web mất 🙁 trong khi đó tài liệu trên mạng thì nhiều như suối. Các bạn hãy tự tìm hiểu cơ bản sau đó quay lại tus này đọc tiếp nhé !

1 số liên kết để các bạn học

Đăng kí server

Cũng giống như bài 3 chúng ta sử dụng hosting free đó là https://www.000webhost.com
(bạn nào đại gia thì mua hẳn 1 cái hosting xài cho sướng nhé – lúc mua nhớ bảo họ bán cho cái có giao diện quản trị là Cpanel)

Lên ý tưởng mô hình hệ thống web

Phải có chức năng đăng nhập
Phải đăng kí được tài khoản
Phải điều khiển và giám sát được trạng thái của 4 thiết bị
Phải có ảnh cho mỗi thiết bị cho sinh động
Phải hiển thị được nhiệt độ
Vẽ được biểu đồ nhiệt độ
Phải thông báo xem mạch có đang online không

Xây dựng cơ sở dữ liệu

Trong trang quản lí của 000webhost.com, chúng ta vào MySQL Database để tạo 1 cái database

Các bạn điền tên database các bạn muốn và tạo tài khoản quản trị database

Sau khi tạo xong thì thằng 000web nó tự nhét thêm cái id vớ vẩn vào tên database, thôi kệ chấp nhận vậy 🙁

Các bạn vào Quản lí và tiến hành vào PhpMyAdmin để thêm các bảng dữ liệu vào database

Các bạn click vào database mà mình vừa tạo ( ở đây database của mình tên là
id10455918_iot47)

Do database vừa tạo nên trống trơn chả có cái khỉ khổ gì sất :). Do dữ liệu trong database được lưu dưới dạng bảng nên mỗi hàng dữ liệu sẽ là mỗi tài khoản khác nhau, còn các cột dữ liệu sẽ lưu các giá trị như thông tin đăng nhập, tên của các thiết bị, ảnh thiết bị, nhiệt độ, trạng thái online, offline …

Các bạn ấn vào SQL để thực thi truy vấn tạo bảng cho nhanh. Sau có dán câu truy vấn tạo bảng dữ liệu có tên là “kh”

                CREATE TABLE `kh` (
                  `idkhachhang` int(10) unsigned NOT NULL AUTO_INCREMENT,
                  `API` varchar(10) NOT NULL,
                  `ten` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL,
                  `ngaytao` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL,
                  `email` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL,
                  `kichhoat` varchar(1) NOT NULL,
                  `taikhoan` varchar(50) NOT NULL,
                  `matkhau` varchar(50) NOT NULL,
                  `ten1` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL,
                  `ten2` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL,
                  `ten3` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL,
                  `ten4` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL,
                  `image1` varchar(255) NOT NULL,
                  `image2` varchar(255) NOT NULL,
                  `image3` varchar(255) NOT NULL,
                  `image4` varchar(255) NOT NULL,
                  `tt1` int(1) unsigned NOT NULL,
                  `tt2` int(1) unsigned NOT NULL,
                  `tt3` int(1) unsigned NOT NULL,
                  `tt4` int(1) unsigned NOT NULL,
                  `nhietdo25s` varchar(10) NOT NULL,
                  `nhietdo20s` varchar(10) NOT NULL,
                  `nhietdo15s` varchar(10) NOT NULL,
                  `nhietdo10s` varchar(10) NOT NULL,
                  `nhietdo5s` varchar(10) NOT NULL,
                  `nhietdo` varchar(10) NOT NULL,
                  `online` varchar(1) NOT NULL,
                  PRIMARY KEY (`idkhachhang`)
                ) ENGINE=MyISAM AUTO_INCREMENT=108 DEFAULT CHARSET=latin1;

CREATE TABLE `kh` (

`idkhachhang` int(10) unsigned NOT NULL AUTO_INCREMENT,

`API` varchar(10) NOT NULL,

`ten` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL,

`ngaytao` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL,

`email` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL,

`kichhoat` varchar(1) NOT NULL,

`taikhoan` varchar(50) NOT NULL,

`matkhau` varchar(50) NOT NULL,

`ten1` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL,

`ten2` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL,

`ten3` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL,

`ten4` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL,

`image1` varchar(255) NOT NULL,

`image2` varchar(255) NOT NULL,

`image3` varchar(255) NOT NULL,

`image4` varchar(255) NOT NULL,

`tt1` int(1) unsigned NOT NULL,

`tt2` int(1) unsigned NOT NULL,

`tt3` int(1) unsigned NOT NULL,

`tt4` int(1) unsigned NOT NULL,

`nhietdo25s` varchar(10) NOT NULL,

`nhietdo20s` varchar(10) NOT NULL,

`nhietdo15s` varchar(10) NOT NULL,

`nhietdo10s` varchar(10) NOT NULL,

`nhietdo5s` varchar(10) NOT NULL,

`nhietdo` varchar(10) NOT NULL,

`online` varchar(1) NOT NULL,

PRIMARY KEY (`idkhachhang`)

) ENGINE=MyISAM AUTO_INCREMENT=108 DEFAULT CHARSET=latin1;

Sau khi chạy truy vấn sau, chúng ta có 1 bảng rỗng với các cột dữ liệu sau:

Giải thích các cột dữ liệu:

idkhachang : là id độc nhất của mỗi tài khoản ( mỗi khách hàng)
API : chưa xài đến
ten : tên của khách hàn
ngaytao : ngày khách hàng đăng kí tài khoản
email : email của khách hàng
kichhoat : ví dụ hệ thống của bạn cần phí thí thì cột này để xác định tài khoản đã thanh toán tiền chưa
taikhoan: tài khoản đăng nhập
matkhau : mật khẩu đăng nhập
ten1 ten2 ten3 ten4 : tên hiển thị của các thiết bị
image1 image2 image3 image4 : hình ảnh hiển thị của các thiết bị
tt1 tt2 tt3 tt4 : trạng thái bật tắt của các thiết bị
nhietdo : nhiệt độ hiện tại
nhietdo25s nhietdo20s nhietdo 15s nhietdo10s nhietdo5s : lưu nhiệt độ của vài giây trước đó
online trạng thái online ofline của mạch ( 1=on, 0=off)

OK, chúng ta sẽ design xong database, bây giờ sẽ xây dựng chức năng đăng nhập và đăng kí nhé !

Xây dựng chức năng đăng nhập và đăng kí

Quay trở lại Dashboard vào mục Quản lí FIile, click vào Tải file lên để vào trình quản lí file của 000webhost. Toàn bộ file mà bản tải lên sẽ nằm trong thư mục pubblic_html

Viết file PHP đăng nhập

Vào new file , tạo 1 file tên là dangnhap.php

Chuột phải vào file vừa tạo -> Edit và chèn mã code cho trang đăng nhập

<?php
 $thongbao=NULL;
 $yname=NULL;
 $pw=NULL;
if(isset($_POST["ok"]))
{
 if(empty($_POST["tk"]) || empty($_POST["pass"]))
 {
    $thongbao="*Vui lòng nhập đủ thông tin";
 }
 else
 {
    $yname=$_POST["tk"];
    $pw=$_POST["pass"];
 }
 if($yname && $pw)
 {
    $pw=md5($pw);
    require_once("ketnoi.php");
    $trave=mysqli_query($conn,"select * from kh where taikhoan='$yname' and matkhau='$pw'");
    if(mysqli_num_rows($trave)==1)
    { 
        $data=mysqli_fetch_assoc($trave);
        setcookie("taikhoan","$yname",time() + 3000000);
        setcookie("matkhau","$pw",time() + 3000000);
        header("location:iot47.000webhostapp.com/");
    }
    else
    {
       $thongbao="*Sai tên tài khoản hoặc mật khẩu";
    }
 }
}
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Đăng nhập</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="khungdangnhap">
     <form action="dangnhap.php" method="post">
     <h1>Đăng nhập</h1>
     <input placeholder="Username" type="text" required="" name="tk">
     <input placeholder="Password" type="password" required="" name="pass">
     <input type="submit" value="OK" name="ok" id="bt_ok">
     <a href="nhapemail.php"><p style="color: #1abc9c;">Tạo tài khoản</p></a>
     <a href="quenmatkhau.php"><p style="color: #1abc9c;">Quên mật khẩu ?</p></a>
     <?php
       echo "<p>$thongbao</p>";
     ?>

     </form>
     <div id="baoloi">
     </div>
  </div>
  <div id="khoangtrong" style="height: 30px"></div>
</body>
</html>

<?php

$thongbao=NULL;

$yname=NULL;

$pw=NULL;

if(isset($_POST["ok"]))

{

if(empty($_POST["tk"]) || empty($_POST["pass"]))

{

$thongbao="*Vui lòng nhập đủ thông tin";

}

else

{

$yname=$_POST["tk"];

$pw=$_POST["pass"];

}

if($yname && $pw)

{

$pw=md5($pw);

require_once("ketnoi.php");

$trave=mysqli_query($conn,"select * from kh where taikhoan='$yname' and matkhau='$pw'");

if(mysqli_num_rows($trave)==1)

{

$data=mysqli_fetch_assoc($trave);

setcookie("taikhoan","$yname",time() + 3000000);

setcookie("matkhau","$pw",time() + 3000000);

header("location:iot47.000webhostapp.com/");

}

else

{

$thongbao="*Sai tên tài khoản hoặc mật khẩu";

}

<!doctype html>

<html>

<head>

</head>

<body>

<a href="nhapemail.php"><p style="color: #1abc9c;">Tạo tài khoản</p></a>

<?php

echo "<p>$thongbao</p>";

</form>

</div>

</body>

</html>

Bài này mình sẽ cập nhật dần vì nó rất dài

[IoT] Bài 2: Giao tiếp với module WiFi ESP8266 bằng tập lệnh AT

[ENC28J60] Bài 22: LWIP – Giao thức UDP với raw api

[ENC28J60] Bài 15: Giao thức DHCP - lấy IP động

[ENC28J60] Bài 7: Giao thức ARP ( phần 2)

Hoài Thu
16 Tháng Năm, 2020 tại 3:17 chiều

Anh cập nhật bài tiếp đi ạ, 1.5 tháng rồi :(( hóng lâu quá :((
- Đào Nguyện
  16 Tháng Năm, 2020 tại 8:38 chiều
  
  kaka
Khách
12 Tháng Mười, 2020 tại 3:06 chiều

có bài mới chưa anh ơi, em đang làm cái này nè, hay quá
nguyễn tiến sang.
22 Tháng Mười Một, 2020 tại 9:52 sáng

anh ơi, chắc anh cũng rất bận, hi vọng anh có thể đang bài hướng dẫn tiếp theo ạ. em có đọc hướng dẫn ở các trang khác đều thấy họ coppy lẫn nhau nọi dung khó hiểu , riêng của anh làm rất dễ hiểu, chi tiết! em cám ơn anh !
Khách
14 Tháng Một, 2021 tại 3:54 chiều

Hóng ad ra bài mới quá<3
Nguyên
25 Tháng Ba, 2021 tại 12:10 sáng

A ra bài tiếp phần này đi a dễ hiểu <3

Tự học IoT, Lập trình nhúng

Blog chia sẻ kiến thức IoT, lập trình vi điều khiển, thiết kế mạch điện tử