Nội Dung Bài Viết
Lập trình PHP.
Mình xin khái quát sơ lượt về mối quan hệ giữa các file.
Đầu tiên bạn muốn nhận giá trị cài đặt từ trang web về cho VDK thì bạn phải trỏ đến địa chỉ URL mà bạn muốn lấy. Trang này truy cập dữ liệu từ MySQL và chỉ xuất ra các giá trị cài đặt từ điều khiển bạn chỉ cần việc echo dữ liệu thôi (đừng có thêm bất kỳ đoạn HTML nào vào nhé, vì khi ta thực hiện lệnh AT+HTTPREAD thì nó sẽ đọc toàn bộ dữ liệu trả về từ trang web do vậy để hạn chế việc xử lý cũng như lưu trữ dữ liệu, nên trang này bạn đừng hiệu ứng gì cả). Dữ liệu của MySQL được cập nhật từ trang web điều khiển (trang này là trang giao diện người dùng).
Giống vậy này.
Khi bạn nhấn F12 để debug thì kết quả chỉ hiển thị như thế này thôi nhé.
Mình chỉ demo một đoạn code nhỏ, còn code đầy đủ thì bạn có thể tìm thấy trong bài trước nha.
Đoạn code này dùng trích dữ liệu từ MySQL và hiển thị các giá trị cài đặt như hình trên. Vì mình chạy giả lập bằng xampp nên địa chỉ server của mình là $servername = “localhost” (dấu $_tên biến là quy ước đặt biến trong PHP). $username = “root”; tức là người sử dụng ở đây mình sử dụng ở quyền Admin nên quyền sử dụng cao nhất là root. $password = “”; thường thì mình để trống vì chưa đẩy lên host nên không quan trọng tính bảo mật. $dbname = “K800”; là bảng dữ liệu mình tạo từ phpMyadmin (việc tạo cơ sở dữ liệu như thế nào bạn có thể xem video hướng dẫn sau link). Lưu ý tất cả các biến mình vừa liệt kê là đang dưới local nha, còn khi bạn đưa lên host thì bạn phải chuyển toàn bộ các biến này theo host mà bạn đã đẩy lên.
Cơ bản data mình sử dụng cho đoạn demo này như hình sau:
Khai báo xong xuôi rồi thì ta bắt đầu connect tới database thôi.
$conn = mysqli_connect ($servername, $username, $password, $dbname);
Tùy theo phiên bản php mà bạn đang sử dụng mà bạn có thể connect tới database bằng nhiều cách khác, nhưng thứ tự thì vẫn như nhau nhé!. Đoạn tiếp theo mình chỉ kiểm tra xem kết được với database không nếu không thì báo lỗi rồi xem nó là lỗi gì để debug.
Vấn đề quan trọng nằm ở tiếp theo. Bắt đầu truy vấn vào cơ sở dữ liệu, truy vấn vào bảng và từng cột trong bảng đó để lấy dữ liệu và xuất ra màn hình.
$sql = “SELECT Time From Shudler Where Value = ‘Hon‘ “;
Cú pháp của MySQL là như thế, ý nghĩa của đoạn trên là chọn cột Timer từ bản schudler ở cột Value bằng với ký tự ‘Hon’. Sau đó bắt đầu truy vấn bằng lệnh $result = $conn -> query($sql);. Câu lệnh tiếp theo để kiểm tra xem cột được chọn đó có trống hay không bằng lệnh (mysqli_num_rows($result)>0); .Cuối cùng ta thực hiện vòng lặp while và kiểm tra từ phần tử trong cột và xuất ra giá trị Timer ở cột value là ‘Hon‘ bằng lệnh. echo $row[“Time”].
Tương tự như vậy đối với các giá trị khác. Sau khi lấy xong các giá trị cần thiết thì các bạn cần phải ngắt kết nối với database nha $conn -> close(); Vì trong dự án của bạn có thể có nhiều trang web cùng trỏ đến một database, khi bạn kết nối mà không ngắt kết nối thì sẽ xảy tình trạng quá tải. Cũng giống như việc Load một trang web, thì bạn sẽ giử yêu bên phía server. Server nhận yêu cầu và gửi về trang web mà người dùng yêu cầu đồng thời server cũng ngắt kết nối bên phía người dùng.
Tiếp theo là đoạn code nhận giá trị từ VDK gửi lên web. Ở đây mình theo dõi trạng thái của động cơ bằng biến DC, mình sẽ gửi biến này lên trang web bằng phươngthức GET. Nhắc lại phương thức GET là lấy dữ liệu từ URL trực tiếp trên đường dẫn .
Test trước để bớt nhàm. bạn lập một trang một trang với tên dc.php với đoạn code như dưới hình rồi lập một database để hứng trạng thái của động cơ. cuối cùng gõ lệnh trực tiếp trên URL sau đó qua database xem kết quả.
Ok! test thành công rồi. Mình sẽ giải thích code, cơ bản đoạn code này không khác gì đoạn trước, nên mình sẽ giải thích một số điểm mới thôi. lệnh date_default_timezone_set(‘Asia/Hồ_Chí_Minh’); để chọn múi giờ. $time_now = getdate(); cập nhật giá trị thời gian, 2 lệnh phía sau để định dạng lại giá trị thời gian thôi.
$status = $_GET[“ĐC”] là câu lệnh quan trọng nhất nó lấy giá trị DC trên URL bằng phương thức GET và lưu vào biến status. Tiếp theo cũng là một đoạn quan trọng không kém lưu dữ liệu được cập nhật vào cơ sở dữ liệu.
$conn->query(“INSERT INTO engin (status, Time, Data) VALUES (‘$status‘, ‘$show_time‘, ‘$Show_date‘)”);
Cấu trúc của lệnh Insert trong MySQL , tức là chèn vào bản engin ở các cột status, Time, Data tương ứng với các giá trị $status, $show_time, $show_date. Xem hình phía trên để dễ hình dung.
Xong cái cốt lõi rồi, giờ ta đi xây dựng giao diện cho ngầu tí.
Nhưng trước hết là làm sao để trang điều khiển có thể gửi dữ liệu về cho vdk được, chuyện đó được giải quyết bằng đoạn code sau. Cũng không khác mấy gì các đoạn code trước, chỉ khác ở chỗ là phải UPDATE dữ liệu về cho MySQL thôi.
OK ! Để muốn xây dựng được giao diện đẹp thì phải cần dùng tới công cụ hỗ trợ, chứ 1 mình thằng HTML thì không làm ăn được gì. Cụ thể mình dùng BOOTSTRAP, JQUERY, JAVASCRIPT, AJAX… là các công cụ khá mạnh mẽ kèm theo gói thư viện hỗ trợ. Bạn có thể download các gói này về máy tính hoặc truy cập trực tiếp đến địa chỉ trang web. Lưu ý sẽ có một vài vấn đề về phiên bản giữa bootstrap và jquery nếu 2 phiên bản không tương thích khi gặp vấn đề này bạn cũng không nên xoắn. nhấn F12 và ngồi debug thôi hihi.
Mục cuối cùng có lẽ cũng khá hấp dẫn: Bạn nào muốn vẽ đồ thị thì tiếp tục đọc nha.
Ở đây mình hướng dẫn vẽ đồ thị bằng thư viện có sẵn Morris.Bar. Đầu tiên kết nối với MySQL lấy dữ liệu trước rồi truy cập đến dữ liệu muốn vẽ và lưu vào biến $chart_data cụ thể mình lấy 2 giá trị x là Value và Y là Time. Hàm substr($chart_data,0,-2) mục đích xóa đi 2 ký tự sau cùng (.”) trong chuỗi $chart_data. Lấy xong dữ liệu rồi ta vẽ thôi, vì đây là một đoạn TYPE SCRIPT nên mình phải đặt trong <script> nó mới hiểu. Đoạn code còn lại khá là tường mình rồi nên không giải thích thêm.
Bài viết các bạn có thể tham khảo thêm: