0%
Loading...

Đồ án IoT Webserver- ESP8266/ESP32 gửi dữ liệu lên database giao thức HTTP POST, hiển thị ra trình duyệt web với MySQL và PHP.

Time: 22:54 17/03/2024 | Cao Văn Vinh

---------------------------------

Xin chào mọi người, lại là mình, Vinh đây!! Bài viết ngày hôm này sẽ là một bài viết rất hay & rất nhiều bạn yêu cầu mình chia sẻ vấn đề này. Hôm nay mình sẽ chia sẻ cách để ESP8266/ESP32 gửi dữ liệu lên Cloud, cụ thể là database phpadmin, sau đó hiển thị ra trình duyệt Web của tất cả các thiết bị có kết nối internet như laptop, tablet, smartphone,...

Khi nắm được kĩ thuật này, chúng ta có thể gửi một dữ liệu bất kỳ và hiển thị một cách trực quan lên trình duyệt web từ bất cứ đâu có kết nối internet trên thế giới, rất phù hợp với các dự án IoT hiện tài mà người đi làm hay sinh viên đều nên nắm bắt.

XIN HÃY ĐỌC! Trong bài viết này, mình sẽ sử dụng kỹ thuật POST, kỹ thuật GET mình sẽ dùng ở bài viết sau. Còn dùng như thế nào, ý nghĩa như thế nào mình sẽ giải thích ở bên dưới. Đồng thời, ở bài viết này, mình chỉ mới sử dụng hiển thị lên web bằng kỹ thuật load lại trang để cập nhật dữ liệu. Để dữ liệu từ reset lại mà không cần load trang, mình sẽ bàn kỹ thuật AJAX ở bài viết sau. Chúng ta đi từ cơ bản đến nâng cao cho dễ hiểu nhé!

Bài hướng dẫn này giúp các bạn thực hiện được các nội dung chính sau:
• Lập trình ESP32/ESP8266 để gửi dữ liệu lên database qua HTTP
• Tạo cơ sở dữ liệu SQL
• Giải thích về kỹ thuật POST và GET
• Viết code php để gửi dữ liệu lên cơ sở dữ liệu
• Viết code php để lấy thông tin từ database.

Để thực hiện đồ án này, bạn cần chuẩn bị vừa thứ sau:
• Phần mềm lập trình Arduino IDE hoặc Platform, trong bài viết này mình dùng Arduino IDE để các bạn dễ hiểu hơn nhé
• Phần mềm Sublime Text hoặc Visual Studio Code hoặc bất kỳ phần mềm nào để các bạn code PHP được
• XAMPP: Trong dự án này, mình chỉ mới hướng dẫn các bạn chạy trên localhost. Nói nôn na dễ hiểu như thế này, web các bạn viết trước khi nó có tên miền để người ta truy cập vào thì thường các lập trình viên sẽ chạy CODE trên máy họ trước. Môi trường chạy code đó gọi là localhost, nghĩa là lấy chính máy tính bạn làm máy chủ. Và khi muốn chạy code PHP thì sẽ dùng XAMPP để tạo môi trường lập trình, các bạn có thể chạy code ở đó vì nó có hỗ trợ MySQL, Apache,... Nếu bạn chưa cài phần mềm thì lên mạng download xuống và cài đặt nhé!
• Quan trọng nhất! Bạn chuẩn bị một con MBE280, cảm biến này để đọc nhiệt độ, độ ẩm, áp suất giao tiếp I2C. Cùng với đó là một con ESP32/ESP8266 bất kỳ. Mình sẽ hướng dẫn 2 con luôn!

Bước 1: Khởi động XAMPP, thiết lập cơ sở dữ liệu

Bạn tải phần mềm về, khởi động phần mềm và bật Apache và mySQL như hình nhé!

Tiếp theo vào phpAdmin bằng cách nhấn vào nút Admin bên cạnh mySQL

Bạn tạo một bảng mới bằng cách nhấn New -> nhập tên bảng, ở đây mình đặt tên là example_esp_dat, bạn chú ý tên bảng vì xíu code PHP bạn cũng sẽ dùng tên bảng này để giao tiếp với database!

Sau khi tạo bảng có tên example_esp_dat, bạn nhấn vào bảng đó và tiến hành nhập code để tạo các cột, hàng trong bảng!

Chép đoạn code SQL sau và nhập vào, mục đích là để tạo bảng trong phpadmin


CREATE TABLE SensorData (
    id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    sensor VARCHAR(30) NOT NULL,
    location VARCHAR(30) NOT NULL,
    value1 VARCHAR(10),
    value2 VARCHAR(10),
    value3 VARCHAR(10),
    reading_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
)

Bạn sẽ thấy một bảng dữ liệu là SensorData được tạo ra! Các bạn có thể coi giải thích code ở video mình sẽ ra trên Youtube!

Bước 2: TÌM HIỂU VỀ KỸ THUẬT POST - GET TRONG PHP

Trong lập trình web, 2 phương thức GET và POST không có gì xa lạ. Tuy nhiên, khi nào dùng POST và khi nào dùng GET??? Chỉ biết là dùng cái nào thì cũng chạy được hết =)) Hy vọng bài viết này sẽ giúp các bạn hiểu rõ hơn về 2 khái niệm này và có cách sử dụng chúng sao cho phù hợp.

GET và POST là hai phương thức của giao thức HTTP, đều là gửi dữ liệu về server xử lí sau khi người dùng nhập thông tin vào form và thực hiện submit. Trước khi gửi thông tin, nó sẽ được mã hóa bằng cách sử dụng một giản đồ gọi là url encoding. Giản đồ này là các cặp name/value được kết hợp với các kí hiệu = và các kí hiệu khác nhau được ngăn cách bởi dấu &.

Nói nôn na, 2 kỹ thuật này để truyền dữ liệu qua lại. GET thì sẽ để lộ giá trị trên thanh địa chỉ, POST thì truyền ngầm, các bạn lên mạng coi video sẽ rất nhiều nhé!

Các bạn có thể truy cập vào bài viết sau để tìm hiểu về 2 phương thức này nhé!

Bước 3: VIẾT CODE TRUYỀN DỮ LIỆU LÊN DATABASE BẰNG PHƯƠNG THỨC POST

POST thường sẽ bảo mật hơn GET. Tuy nhiên việc truyền dữ liệu sẽ chậm hơn so với GET. Việc truyền dữ liệu bằng POST cần một chuỗi API gọi là khoá chung để có thể gửi - nhận. Trong bài viết này mình sẽ dùng kỹ thuật POST. Kỹ thuật GET mình sẽ làm ở bài viết sau!

Trong VS code, bạn tạo một file tên là post-esp-data.php, ở đây mình tạo như vậy còn bạn đặt tên như nào tuỳ bạn. Tuy nhiên tên file này cũng sẽ tái sử dụng nên bạn cũng nên nhớ kỹ!

LƯU Ý: Các bạn phải lưu file nào trong htdocs. Mình ví dụ cụ thể, bình thường khi cài xampp thì trong ổ C các bạn sẽ có folder tên là xampp, các bạn bấm vào C:/xampp/htdocs/ lúc này thì các bạn tạo một folder và lưu hết code trong folder đó. Ở đây mình đặt tên folder ví dụ là mbe và lưu code php trong folder này


<?php 
$servername = "localhost";
$dbname = "example_esp_dat";
$username = "root";
$password = "";

$api_key_value = "vinhcaodatabase";

$api_key= $sensor = $location = $value1 = $value2 = $value3 = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $api_key = test_input($_POST["api_key"]);
    if($api_key == $api_key_value) {
        $sensor = test_input($_POST["sensor"]);
        $location = test_input($_POST["location"]);
        $value1 = test_input($_POST["value1"]);
        $value2 = test_input($_POST["value2"]);
        $value3 = test_input($_POST["value3"]);
        
        // Create connection
        $conn = new mysqli($servername, $username, $password, $dbname);
        // Check connection
        if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
        } 
        
        $sql = "INSERT INTO SensorData (sensor, location, value1, value2, value3)
        VALUES ('" . $sensor . "', '" . $location . "', '" . $value1 . "', '" . $value2 . "', '" . $value3 . "')";
        
        if ($conn->query($sql) === TRUE) {
            echo "Tạo bảng ghi mới thành công!";
        } 
        else {
            echo "Error: " . $sql . "
" . $conn->error; } $conn->close(); } else { echo "Sai API KEY."; } } else { echo "No data posted with HTTP POST."; } function test_input($data) { $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); return $data; }

Mục đích đoạn code trên nhằm gửi dữ liệu từ cảm biến lên database, mà xíu code cho ESP chúng ta sẽ dùng tới. Còn về giải thích code, mình sẽ làm video giải thích riêng nhé!

Tiếp theo, mình sẽ code phần lấy dữ liệu từ database ra nhé! Mình đặt tên file là esp-data.php. Lưu ý cũng bỏ vào file trong mbe trong ổ C

Code cho esp-data.php:



<!DOCTYPE html>
<html><body>
<?php
$servername = "localhost";
$dbname = "example_esp_dat";
$username = "root";
$password = "";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "SELECT id, sensor, location, value1, value2, value3, reading_time FROM SensorData ORDER BY id DESC";

echo '<table cellspacing="5" cellpadding="5">
        <tr> 
        <td>ID</td> 
        <td>Sensor</td> 
        <td>Location</td> 
        <td>Nhiệt độ</td> 
        <td>Độ ẩm</td>
        <td>Áp suất</td> 
        <td>Thời gian</td> 
    </tr>';
 
if ($result = $conn->query($sql)) {
    while ($row = $result->fetch_assoc()) {
        $row_id = $row["id"];
        $row_sensor = $row["sensor"];
        $row_location = $row["location"];
        $row_value1 = $row["value1"];
        $row_value2 = $row["value2"]; 
        $row_value3 = $row["value3"]; 
        $row_reading_time = $row["reading_time"];

      
        echo '<tr> 
                <td>' . $row_id . ' 
                <td>' . $row_sensor . ' 
                <td>' . $row_location . ' 
                <td>' . $row_value1 . ' 
                <td>' . $row_value2 . '
                <td>' . $row_value3 . ' 
                <td>' . $row_reading_time . ' 
            </tr>';
    }
    $result->free();
}

$conn->close();
?> 
</table>
</body>
</html>

Bước 4: VIẾT CODE CHO ESP GIAO TIẾP BME280 VÀO HTTP POST

Sơ đồ kết nối BME280 với ESP32:

Sơ đồ kết nối BME280 với ESP8266:

Code cho ESP8266/ESP32:


#ifdef  ESP32
    #include <WiFi.h>
    #include <HTTPClient.h>
#else
    #include <ESP8266WiFi.h>
    #include <ESP8266HTTPClient.h>
    #include <WiFiClient.h>
#endif
#include <Wire.h>
#include <BME280I2C.h>


const char* ssid     = "Woori Coffee F2";
const char* password = "999999999";
const char* serverName = "https://vinhcaodatabase.com/esp32/post-esp-data.php";


String apiKeyValue = "vinhcaodatabase";

String sensorName = "BME280";
String sensorLocation = "Nhà Vinh";

/*#include <SPI.h>
#define BME_SCK 18
#define BME_MISO 19
#define BME_MOSI 23
#define BME_CS 5*/

BME280I2C bme;  
//Adafruit_BME280 bme(BME_CS);  // hardware SPI
//Adafruit_BME280 bme(BME_CS, BME_MOSI, BME_MISO, BME_SCK);  // software SPI
float temperature, Humidity, Pressure;
void setup() {
  Serial.begin(9600);
    Wire.begin();
  WiFi.begin(ssid, password);
  Serial.println("Connecting");
  while(WiFi.status() != WL_CONNECTED) { 
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("Ket noi Wifi Thanh Cong!!!");
  Serial.print("IP:");
  Serial.println(WiFi.localIP());

 
  while(!bme.begin())
  {
    Serial.println("Could not find BME280 sensor!");
    delay(1000);
  }

  switch(bme.chipModel())
  {
     case BME280::ChipModel_BME280:
       Serial.println("Found BME280 sensor! Success.");
       break;
     case BME280::ChipModel_BMP280:
       Serial.println("Found BMP280 sensor! No Humidity available.");
       break;
     default:
       Serial.println("Found UNKNOWN sensor! Error!");
  }
}

void loop() {
// temperature = random(0,50);
// Humidity = random(20,80);
// Pressure = random(20,80);
  //Check WiFi connection status
  printBME280Data(&Serial);
  if(WiFi.status()== WL_CONNECTED){
      WiFiClientSecure *client = new WiFiClientSecure;
      client->setInsecure(); //don't use SSL certificate
      HTTPClient https;
    
   
      https.begin(*client, serverName);


      https.addHeader("Content-Type", "application/x-www-form-urlencoded");
    
    // Prepare your HTTP POST request data
    // String httpRequestData = "api_key=" + apiKeyValue + "&sensor=" + sensorName
    //                       + "&location=" + sensorLocation + "&value1=" + String(bme.readTemperature())
    //                       + "&value2=" + String(bme.readHumidity()) + "&value3=" + String(bme.readPressure()/100.0F) + "";
      String httpRequestData = "api_key=" + apiKeyValue + "&sensor=" + sensorName
                          + "&location=" + sensorLocation + "&value1=" + String(temperature)
                          + "&value2=" + String(Humidity) + "&value3=" + String(Pressure) + "";
      Serial.print("httpRequestData: ");
      Serial.println(httpRequestData);
    

    // Send HTTP POST request
    int httpResponseCode = https.POST(httpRequestData);
     
    
    if (httpResponseCode>0) {
      Serial.print("HTTP Response code: ");
      Serial.println(httpResponseCode);
    }
    else {
      Serial.print("Error code: ");
      Serial.println(httpResponseCode);
    }

    https.end();
  }
  else {
    Serial.println("Mat ket noi WIFI");
  }

  delay(10000);  
}
void printBME280Data
(
   Stream* client
)
{
   float temp(NAN), hum(NAN), pres(NAN);

   BME280::TempUnit tempUnit(BME280::TempUnit_Celsius);
   BME280::PresUnit presUnit(BME280::PresUnit_Pa);

   bme.read(pres, temp, hum, tempUnit, presUnit);

   client->print("Temp: ");
   client->print(temp);


   client->print("°"+ String(tempUnit == BME280::TempUnit_Celsius ? 'C' :'F'));
     temperature = temp;
   client->print("\t\tHumidity: ");
   client->print(hum);
   client->print("% RH");
     Humidity = hum;

   client->print("\t\tPressure: ");
   client->print(pres);
   client->println("Pa");
   Pressure = pres;
   delay(1000);
}

Trong đoạn code cho ESP, bạn cần lưu ý thay đổi những thông số sau:


const char* ssid     = "Woori Coffee F2";
const char* password = "999999999";
const char* serverName = "https://vinhcaodatabase.com/esp32/post-esp-data.php";
String apiKeyValue = "vinhcaodatabase";

Bạn cần thay đổi ssid và password trùng với Wifi mà PC bạn đang kết nối vào. Đồng thời tại servername bạn lấy địa chỉ ip bằng cách vào cmd và gõ ipconfig

Các bạn để ý dòng IPv4 Address có địa chỉ IP là 192.168.1.9, chính vì thế bạn đổi Servername thành IP này giúp mình. Code demo của mình mình đang chạy trên website nên mình để domain, còn vì đang chạy trên localhost nên bạn lấy ip làm domain

Lúc này code sẽ thay đổi thành:


const char* ssid     = "Woori Coffee F2";
const char* password = "999999999";
const char* serverName = "https://192.168.1.9/mbe/post-esp-data.php";
String apiKeyValue = "vinhcaodatabase";

Trong đó, 192.168.1.9 là IP bạn vừa lấy, mbe là tên folder nằm trong htdocs mà mình đã nói các bạn tạo! Đồng thời bạn để ý apiKeyValue giúp mình. Ở đây mình đặt apiKeyValue là "vinhcaodatabase". Các bạn vào file post-esp-data.php thì cũng có một key tương tự như vậy. 2 key này phải trùng nhau để có thể truyền data đi được. Đó cũng chính là đặc điểm của phương thức POST HTTP!

Các bạn nạp code vào ESP32/ES8266. Ở code này mình đã khai báo cho hai em đầy đủ rồi, các bạn không cần lăng tăng về code này có sử dụng cho cả 2 con được không. Sau khi nạp code thành công, bạn vào Serial Monitor và xem ở Baud Rate 9600.

Nếu gửi dữ liệu thành công sẽ có mã HTTP Code là 200.

Các bạn tiến hành chạy file esp-data.php để xem dữ liệu nhé!

Các bạn tiến hành chạy file esp-data.php để xem dữ liệu nhé!

Vì ở code này mình chưa sử dụng kỹ thuật Ajax hay Code giao diện gì nên giao diện rất simple. Các bạn cần reset lại trang để coi dữ liệu được cập nhật như thế nào! Ở bài viết tiếp theo mình sẽ viết thêm kỹ thuật GET HTTP, cũng như Ajax và nhiều thứ hay ho nữa! Nếu bạn gặp lỗi khi thực hiện có thể liên hệ mình hỗ trợ nhé!

Và đừng quên, mình có hỗ trợ code đồ án thuê với các dự án liên quan tới vi xử lý (PIC, Arduino, Rapsberry Pi, ESP32/ESP8266). Hỗ trợ giao tiếp webserver, database. Hỗ trợ truyền dữ liệu không dây như Lora, RF.... Đặc biệt nhận thiết kế xe điều khiển, xe tự hành, xe tránh vật cản,... với giá hạt dẻ. Chi tiết liên hệ 0865700435 hoặc bất kỳ phương tiện nào nha!

Có thể bạn quan tâm


Instagram YouTube Discord Github Facebook Contact Phone
Check Internet Connection