IoT Webserver- ESP8266/ESP32 gửi dữ liệu lên Cloud, hiển thị ra trình duyệt web với MySQL và PHP

Bài viết này sẽ giới thiệu giải pháp để ESP8266/ESP32 gửi dữ liệu lên Cloud, 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ư tablet, smartphone, …Các bạn có thể xem qua kết quả ví dụ tôi làm Bảng giám sát nhiệt độ qua internet

Kĩ thuật sử dụng ở đây vẫn là PHP Script như bài IoT Webserver- gửi email tuy nhiên có sử dụng thêm MySQL.

Khi nắm được kĩ thuật này, chúng ta có thể nhận dữ liệu từ cảm biến và hiển thị một cách trực quan lên trình duyệt từ bất cứ đâu có kết nối internet, rất phù hợp với các dự án giám sát các tham số môi trường từ xa.

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 ESP8266/ESP32 với Arduino IDE
Đăng kí hosting PHP và tên miền- Tham khảo cách đăng kí
Sử dụng PHP để insert data vào cơ sở dữ liệu, hiển thị từ cơ sở dữ liệu ra trình duyệt

Đăng kí cài đặt hosting
Chuẩn bị cơ sở dữ liệu

Đăng nhập vào tài khoản hosting, tìm đến SQL

Trong giao diện SQL, chọn tạo bảng cơ sở dữ liệu

Database name: xxx
Username: xxx
Password: xxxxxxxx

Sau khi tạo xong, thực hiện chọn phpmyadmin để tiến hành tao các cột cơ sở dữ liệu bên trong

Trong giao diện của phpmyadmin, chọn SQL để thực hiện tạo bảng bằng mã sau:

** cập nhật: reading_time -> time_act

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),
    time_act TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
)

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),

time_act TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP

)

Bảng cơ sở dữ liệu gồm các trường sau:

+ ID- đây là khóa chính, đặt chế độ tự động tăng, kiểu số unsign int, độ dài 6

+ sensor: tên loại cảm biến, sẽ hiển thị theo tên cảm biến gửi lên từ ESP8266/ESP32

+ location: vị trí đặt cảm biến, hiển thị theo giá trị gửi lên từ ESP

+ value1, 2: giá trị cảm biến esp gửi lên

+ reading_time: timestamp nhận dc giá trị cảm biến

Sau khi xong, chọn GO và ta sẽ được bảng CSDL như sau:

3. Viết mã nguồn PHP trên host để insert data vào SQL

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"]);

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"]);

Đoạn code trên đây thực hiện việc nhận POST request từ ESP, sau đó tách các trường trong request để lấy giá trị. Các trường dữ liệu này có thể dễ dàng nhận ra trong phần bản tin POST tại mã nguồn của ESP8266 dưới đây :

String httpRequestData = "api_key=" + apiKeyValue + "&sensor=" + sensorName + "&location=" + sensorLocation + "&value1=1234" + "&value2=5678"+"";

1	String httpRequestData = "api_key=" + apiKeyValue + "&sensor=" + sensorName + "&location=" + sensorLocation + "&value1=1234" + "&value2=5678"+"";

Tạo file có tên esp_data.php trong phần file manager của hosting sau đó thêm mã nguồn đầy đủ cho phần nhận dữ liệu từ ESP:

** Cập nhật: Nếu các bạn có lỗi khi response 200 OK mà không có dữ liệu trong SQL ( chưa rõ nguyên nhân vì mình không bị) thì thử chuyển đổi từ POST về GET ( chú ý Trong trường hợp này, api_key sẽ ko còn tác dụng ) như ví dụ sau:

var_dump($_GET); // Cập nhật thêm dòng code này để hiển thi phản hồi các tham số nhận được về ESP8266

if ($_SERVER[“REQUEST_METHOD”] == “GET”) {

$api_key = test_input($_GET[“api_key”]);

if($api_key == $api_key_value) { $sensor = test_input($_GET[“sensor”]);

$location = test_input($_GET[“location”]);

$value1 = test_input($_GET[“value1”]);

$value2 = test_input($_GET[“value2”]);

}

<?php

$servername = "localhost";

// REPLACE with your Database name
$dbname = "xxxxx";
// REPLACE with Database user
$username = "xxxxx";
// REPLACE with Database user password
$password = "xxxx";

// Keep this API Key value to be compatible with the ESP32 code provided in the project page. 
// If you change this value, the ESP32 sketch needs to match
$api_key_value = "kjsjkhjdhfd";

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

date_default_timezone_set('Asia/Ho_Chi_Minh');
$time_act = date('Y-m-d H:i:s'); // use actual date() format displayed in your table.

var_dump($_POST); // ***********Cap nhat them dong nay de phan hoi ve ESP8266

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"]);
        
        
        // 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, time_act)
        VALUES ('" . $sensor . "', '" . $location . "', '" . $value1 . "', '" . $time_act . "')";
        
        if ($conn->query($sql) === TRUE) {
            echo "New record created successfully";
        } 
        else {
            echo "Error: " . $sql . "<br>" . $conn->error;
        }
    
        $conn->close();
    }
    else {
        echo "Wrong API Key provided.";
    }

}
else {
    echo "No data posted with HTTP POST.";
}

function test_input($data) {
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;
}

<?php

$servername = "localhost";

// REPLACE with your Database name

$dbname = "xxxxx";

// REPLACE with Database user

$username = "xxxxx";

// REPLACE with Database user password

$password = "xxxx";

// Keep this API Key value to be compatible with the ESP32 code provided in the project page.

// If you change this value, the ESP32 sketch needs to match

$api_key_value = "kjsjkhjdhfd";

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

date_default_timezone_set('Asia/Ho_Chi_Minh');

$time_act = date('Y-m-d H:i:s'); // use actual date() format displayed in your table.

var_dump($_POST); // ***********Cap nhat them dong nay de phan hoi ve ESP8266

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"]);

// 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, time_act)

VALUES ('" . $sensor . "', '" . $location . "', '" . $value1 . "', '" . $time_act . "')";

if ($conn->query($sql) === TRUE) {

echo "New record created successfully";

}

else {

echo "Error: " . $sql . "<br>" . $conn->error;

}

$conn->close();

}

else {

echo "Wrong API Key provided.";

}

else {

echo "No data posted with HTTP POST.";

}

function test_input($data) {

$data = trim($data);

$data = stripslashes($data);

$data = htmlspecialchars($data);

return $data;

}

4. Viết mã nguồn lấy giá trị từ MySQL để hiển thị ra trình duyệt Web

Tạo file mới tên index.php

** Cập nhật: reading_time -> time_act

<!DOCTYPE html>
<html><body>
<?php

$servername = "localhost";

// REPLACE with your Database name
$dbname = "xxxx";
// REPLACE with Database user
$username = "xxxx";
// REPLACE with Database user password
$password = "xxxx";

// 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, reading_time FROM SensorData ORDER BY id DESC";

echo '<table cellspacing="5" cellpadding="5">
      <tr> 
        <td>ID</td> 
        <td>Cảm biến</td> 
        <td>Vị trí</td> 
        <td>Nhiệt độ 1</td> 
        <td>Nhiệt độ 2</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_reading_time = $row["time_act"];
        // Uncomment to set timezone to - 1 hour (you can change 1 to any number)
        //$row_reading_time = date("Y-m-d H:i:s", strtotime("$row_reading_time - 1 hours"));
      
        // Uncomment to set timezone to + 4 hours (you can change 4 to any number)
        //$row_reading_time = date("Y-m-d H:i:s", strtotime("$row_reading_time + 4 hours"));
      
        echo '<tr> 
                <td>' . $row_id . '</td> 
                <td>' . $row_sensor . '</td> 
                <td>' . $row_location . '</td> 
                <td>' . $row_value1 . '</td> 
                <td>' . $row_value2 . '</td>
                <td>' . $row_reading_time . '</td> 
              </tr>';
    }
    $result->free();
}

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

<!DOCTYPE html>

<?php

$servername = "localhost";

// REPLACE with your Database name

$dbname = "xxxx";

// REPLACE with Database user

$username = "xxxx";

// REPLACE with Database user password

$password = "xxxx";

// 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, reading_time FROM SensorData ORDER BY id DESC";

echo '<table cellspacing="5" cellpadding="5">

<tr>

<td>Nhiệt độ 1</td>

<td>Nhiệt độ 2</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_reading_time = $row["time_act"];

// Uncomment to set timezone to - 1 hour (you can change 1 to any number)

//$row_reading_time = date("Y-m-d H:i:s", strtotime("$row_reading_time - 1 hours"));

// Uncomment to set timezone to + 4 hours (you can change 4 to any number)

//$row_reading_time = date("Y-m-d H:i:s", strtotime("$row_reading_time + 4 hours"));

echo '<tr>

<td>' . $row_sensor . '</td>

<td>' . $row_location . '</td>

<td>' . $row_value1 . '</td>

<td>' . $row_value2 . '</td>

<td>' . $row_reading_time . '</td>

</tr>';

}

$result->free();

}

$conn->close();

</table>

</body>

</html>

Sau khi tạo xong, thực hiện truy cập địa chỉ Web ta sẽ thấy giao diện như sau:

5. Viết mã nguồn cho ESP8266/ESP32 để thực hiện gửi dữ liệu lên Cloud *** lưu ý code này admin đã cập nhật lại và có sử dụng cảm biến DS18B20 để lấy data test cho serrver***

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

#include <OneWire.h>
#include <DallasTemperature.h>

// Replace with your network credentials
const char* ssid     = "***";
const char* password = "***";

// REPLACE with your Domain name and URL path or IP address with path
const char* serverName = "http://iot.luuvachiase.net/esp_data.php";

const int oneWireBus = 4;
// Keep this API Key value to be compatible with the PHP code provided in the project page. 
// If you change the apiKeyValue value, the PHP file /post-esp-data.php also needs to have the same key 
String apiKeyValue = "kjsjkhjdhfd";

String sensorName = "temperature";
String sensorLocation = "home";
int sensorPin = A0;
int sensorValue = 0;  

OneWire oneWire(oneWireBus);
DallasTemperature sensors(&oneWire);
void setup() {
    pinMode(16, OUTPUT);
    pinMode(2, OUTPUT);
    digitalWrite(16, HIGH);
  Serial.begin(115200);

  // Start the DS18B20 sensor
  sensors.begin();
  
  WiFi.begin(ssid, password);
  Serial.println("Connecting");
  while(WiFi.status() != WL_CONNECTED) { 
    digitalWrite(2, LOW);
    delay(250);
    Serial.print(".");
    digitalWrite(2, HIGH); 
    delay(250);
  }
  Serial.println("");
  Serial.print("Connected to WiFi network with IP Address: ");
  Serial.println(WiFi.localIP());


}

void loop() {
  //Check WiFi connection status
  if(WiFi.status()== WL_CONNECTED){
    
    digitalWrite(16, LOW); 
    HTTPClient http;
    
     sensors.requestTemperatures(); 
     float temperatureC = sensors.getTempCByIndex(0);
    // Your Domain name with URL path or IP address with path
    http.begin(serverName);
    
    // Specify content-type header
    http.addHeader("Content-Type", "application/x-www-form-urlencoded");
    
    // Prepare your HTTP POST request data
    String httpRequestData = "api_key=" + apiKeyValue + "&sensor=" + sensorName
                          + "&location=" + sensorLocation + "&value1=" +temperatureC
                          + "&value2=5678"+"";
    Serial.print("httpRequestData: ");
    Serial.println(httpRequestData);
    
    // Send HTTP POST request

  
    int httpResponseCode = http.POST(httpRequestData);

     String payload = http.getString(); 
        
    if (httpResponseCode>0) {
      Serial.print("HTTP Response code: ");
      Serial.println(httpResponseCode);
      Serial.println(payload);  
    }
    else {
      Serial.print("Error code: ");
      Serial.println(httpResponseCode);
    }
    // Free resources
    http.end();
//Send an HTTP POST request every 60 seconds
    delay(60000); 
  }
  else {
    Serial.println("WiFi Disconnected");
    digitalWrite(2, LOW);
    delay(250);
    Serial.print(".");
    digitalWrite(2, HIGH); 
    delay(250);
  }
  
   
}

100

101

102

103

104

105

106

107

108

109

110

#ifdef ESP32

#include <WiFi.h>

#include <HTTPClient.h>

#else

#include <ESP8266WiFi.h>

#include <ESP8266HTTPClient.h>

#include <WiFiClient.h>

#endif

#include <OneWire.h>

#include <DallasTemperature.h>

// Replace with your network credentials

const char* ssid = "***";

const char* password = "***";

// REPLACE with your Domain name and URL path or IP address with path

const char* serverName = "http://iot.luuvachiase.net/esp_data.php";

const int oneWireBus = 4;

// Keep this API Key value to be compatible with the PHP code provided in the project page.

// If you change the apiKeyValue value, the PHP file /post-esp-data.php also needs to have the same key

String apiKeyValue = "kjsjkhjdhfd";

String sensorName = "temperature";

String sensorLocation = "home";

int sensorPin = A0;

int sensorValue = 0;

OneWire oneWire(oneWireBus);

DallasTemperature sensors(&oneWire);

void setup() {

pinMode(16, OUTPUT);

pinMode(2, OUTPUT);

digitalWrite(16, HIGH);

Serial.begin(115200);

// Start the DS18B20 sensor

sensors.begin();

WiFi.begin(ssid, password);

Serial.println("Connecting");

while(WiFi.status() != WL_CONNECTED) {

digitalWrite(2, LOW);

delay(250);

Serial.print(".");

digitalWrite(2, HIGH);

delay(250);

}

Serial.println("");

Serial.print("Connected to WiFi network with IP Address: ");

Serial.println(WiFi.localIP());

}

void loop() {

//Check WiFi connection status

if(WiFi.status()== WL_CONNECTED){

digitalWrite(16, LOW);

HTTPClient http;

sensors.requestTemperatures();

float temperatureC = sensors.getTempCByIndex(0);

// Your Domain name with URL path or IP address with path

http.begin(serverName);

// Specify content-type header

http.addHeader("Content-Type", "application/x-www-form-urlencoded");

// Prepare your HTTP POST request data

String httpRequestData = "api_key=" + apiKeyValue + "&sensor=" + sensorName

+ "&location=" + sensorLocation + "&value1=" +temperatureC

+ "&value2=5678"+"";

Serial.print("httpRequestData: ");

Serial.println(httpRequestData);

// Send HTTP POST request

int httpResponseCode = http.POST(httpRequestData);

String payload = http.getString();

if (httpResponseCode>0) {

Serial.print("HTTP Response code: ");

Serial.println(httpResponseCode);

Serial.println(payload);

}

else {

Serial.print("Error code: ");

Serial.println(httpResponseCode);

}

// Free resources

http.end();

//Send an HTTP POST request every 60 seconds

delay(60000);

}

else {

Serial.println("WiFi Disconnected");

digitalWrite(2, LOW);

delay(250);

Serial.print(".");

digitalWrite(2, HIGH);

delay(250);

}

*** cập nhật: mã nguồn cho ESP8266 được cập nhật thêm phần hiển thị phản hồi của server về ESP, giúp các bạn biết mình gửi request đến có được server xử lý thành công hay không

Các bạn chú ý: array(5) chính là hiển thị các giá trị mà server nhận được từ POST REQUEST của các bạn, dòng cuối cùng thông báo data đã được cập nhật vào SQL ok chưa, cung cấp nhiều thông tin hơn response code=200 như trước.

Nếu bạn nào chuyển sang GET thì dùng code mình update dưới đây nhé*

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

#include <OneWire.h>
#include <DallasTemperature.h>

// Replace with your network credentials
const char* ssid     = "xxx";
const char* password = "xxx";

// REPLACE with your Domain name and URL path or IP address with path
const char* serverName = "http://iot.luuvachiase.net/esp_data.php";

const int oneWireBus = 4;
// Keep this API Key value to be compatible with the PHP code provided in the project page. 
// If you change the apiKeyValue value, the PHP file /post-esp-data.php also needs to have the same key 
String apiKeyValue = "kjsjkhjdhfd";

String sensorName = "temperature";
String sensorLocation = "home";
int sensorPin = A0;
int sensorValue = 0;  

OneWire oneWire(oneWireBus);
DallasTemperature sensors(&oneWire);
void setup() {
    pinMode(16, OUTPUT);
    pinMode(2, OUTPUT);
    digitalWrite(16, HIGH);
  Serial.begin(115200);

  // Start the DS18B20 sensor
  sensors.begin();
  
  WiFi.begin(ssid, password);
  Serial.println("Connecting");
  while(WiFi.status() != WL_CONNECTED) { 
    digitalWrite(2, LOW);
    delay(250);
    Serial.print(".");
    digitalWrite(2, HIGH); 
    delay(250);
  }
  Serial.println("");
  Serial.print("Connected to WiFi network with IP Address: ");
  Serial.println(WiFi.localIP());


}

void loop() {
  //Check WiFi connection status
  if(WiFi.status()== WL_CONNECTED){
    
    digitalWrite(16, LOW); 
    HTTPClient http;
    
     sensors.requestTemperatures(); 
     float temperatureC = sensors.getTempCByIndex(0);
    // Your Domain name with URL path or IP address with path
    //http.begin(serverName);
    
    // Specify content-type header
    http.addHeader("Content-Type", "application/x-www-form-urlencoded");
    
    // Prepare your HTTP GET request data
    String httpRequestData = "http://iot.luuvachiase.net/esp_data.php?api_key=" + apiKeyValue + "&sensor=" + sensorName
                          + "&location=" + sensorLocation + "&value1=" +temperatureC
                          + "&value2=5678"+"";
    Serial.print("httpRequestData: ");
    Serial.println(httpRequestData);
    
    // Send HTTP GET request

    http.begin(httpRequestData);
    int httpResponseCode = http.GET();

     String payload = http.getString(); 
        
    if (httpResponseCode>0) {
      Serial.print("HTTP Response code: ");
      Serial.println(httpResponseCode);
      Serial.println(payload);  
    }
    else {
      Serial.print("Error code: ");
      Serial.println(httpResponseCode);
    }
    // Free resources
    http.end();
//Send an HTTP POST request every 60 seconds
    delay(60000); 
  }
  else {
    Serial.println("WiFi Disconnected");
    digitalWrite(2, LOW);
    delay(250);
    Serial.print(".");
    digitalWrite(2, HIGH); 
    delay(250);
  }
  
   
}

100

101

102

103

104

105

106

107

108

109

110

#ifdef ESP32

#include <WiFi.h>

#include <HTTPClient.h>

#else

#include <ESP8266WiFi.h>

#include <ESP8266HTTPClient.h>

#include <WiFiClient.h>

#endif

#include <OneWire.h>

#include <DallasTemperature.h>

// Replace with your network credentials

const char* ssid = "xxx";

const char* password = "xxx";

// REPLACE with your Domain name and URL path or IP address with path

const char* serverName = "http://iot.luuvachiase.net/esp_data.php";

const int oneWireBus = 4;

// Keep this API Key value to be compatible with the PHP code provided in the project page.

// If you change the apiKeyValue value, the PHP file /post-esp-data.php also needs to have the same key

String apiKeyValue = "kjsjkhjdhfd";

String sensorName = "temperature";

String sensorLocation = "home";

int sensorPin = A0;

int sensorValue = 0;

OneWire oneWire(oneWireBus);

DallasTemperature sensors(&oneWire);

void setup() {

pinMode(16, OUTPUT);

pinMode(2, OUTPUT);

digitalWrite(16, HIGH);

Serial.begin(115200);

// Start the DS18B20 sensor

sensors.begin();

WiFi.begin(ssid, password);

Serial.println("Connecting");

while(WiFi.status() != WL_CONNECTED) {

digitalWrite(2, LOW);

delay(250);

Serial.print(".");

digitalWrite(2, HIGH);

delay(250);

}

Serial.println("");

Serial.print("Connected to WiFi network with IP Address: ");

Serial.println(WiFi.localIP());

}

void loop() {

//Check WiFi connection status

if(WiFi.status()== WL_CONNECTED){

digitalWrite(16, LOW);

HTTPClient http;

sensors.requestTemperatures();

float temperatureC = sensors.getTempCByIndex(0);

// Your Domain name with URL path or IP address with path

//http.begin(serverName);

// Specify content-type header

http.addHeader("Content-Type", "application/x-www-form-urlencoded");

// Prepare your HTTP GET request data

String httpRequestData = "http://iot.luuvachiase.net/esp_data.php?api_key=" + apiKeyValue + "&sensor=" + sensorName

+ "&location=" + sensorLocation + "&value1=" +temperatureC

+ "&value2=5678"+"";

Serial.print("httpRequestData: ");

Serial.println(httpRequestData);

// Send HTTP GET request

http.begin(httpRequestData);

int httpResponseCode = http.GET();

String payload = http.getString();

if (httpResponseCode>0) {

Serial.print("HTTP Response code: ");

Serial.println(httpResponseCode);

Serial.println(payload);

}

else {

Serial.print("Error code: ");

Serial.println(httpResponseCode);

}

// Free resources

http.end();

//Send an HTTP POST request every 60 seconds

delay(60000);

}

else {

Serial.println("WiFi Disconnected");

digitalWrite(2, LOW);

delay(250);

Serial.print(".");

digitalWrite(2, HIGH);

delay(250);

}

Sau khi biên dịch và nạp mã nguồn vào ESP8266, mở Serial Terminal lên quan sát quá trình thực thi lệnh của ESP, nếu nhận dc bản tin 200 OK là thành công kết nối đến server

Lúc này, chạy lại trang web một lần nữa để kiểm tra kết quả hiển thị giá trị cảm biến

Trên đây là giao diện hiển thị giá trị cảm biến theo thời gian, chu kì 30s update 1 lần, các bạn có thể tự chỉnh tham số này. Ngoài ra do đây là ví dụ minh họa, nên không có giá trị cảm biến thật mà chỉ là các giá tri gán sẵn, các bạn tự phát triển thêm theo mục đích của mình.

Các bạn có thể dùng luôn ESP để gửi đến URL server mình tạo ở trên để test nhé. (Đã cập nhật server mới)
URL:http://iot.luuvachiase.net/esp_data.php
Giao diện sử dụng hightchart hiển thị dữ liệu

URL: http://iot.luuvachiase.net

Bài tiếp theo chúng ta sẽ thực hiện điều khiển từ Server ngược lại cho ESP8266/ESP32
(2023 update) Các bạn có thể lựa chọn sử dụng giao thức MQTT, và sử dụng giao diện này để theo dõi và điều khiển thời gian thực nhé. Link demo ở đây.
Mọi hỗ trợ, trao đổi các bạn có thể comment dưới bài viết. Thanks!

Nguồn tham khảo:

https://randomnerdtutorials.com/esp32-esp8266-mysql-database-php/
https://techtutorialsx.com/2016/07/21/esp8266-post-requests/

Số lượt xem: 5,715

Comments 64

Pingback: IoT PHP Server for ESP8266/ESP32 - Lưu và chia sẻ kiến thức robocon, IoT, Embedded...
Pingback: Giám sát nhiệt độ sử dụng cảm biến DS18b20 và ESP8266 hiển thị bằng biểu đồ với Highcharts và MySQL - Lưu và chia sẻ kiến thức robocon, IoT, Embedded...
Minh says:

3 years ago

Chào ad mình đã nạp code và trả lại HTTP Response code: 200, nhưng trên sql database mình lại không nhận được thông số ad giúp mình với

- admin says:
  
  3 years ago
  
  Bạn gửi mã nguồn đã làm vài email mình xem cho.
  
  - Minh says:
    
    3 years ago
    
    Ad cho mình xin email với ạ
    
    - admin says:
      
      3 years ago
      
      ngoctuansqtt@gmail.com
      
  - Dư says:
    
    3 years ago
    
    bạn khác phục được chưa chỉ mình với?
    
Dư says:

3 years ago

Chào AD mình đã làm như vậy nhưng Database không nhận được dữ liệu

Dư says:

3 years ago

Mình cũng bị giống vậy! giúp mình với AD ơi?

Dư says:

3 years ago

mình nạp code trên esp đã nhận ddc 200 nhưng trên database không nhận được giữ liệu. AD giúp mình với!

- admin says:
  
  3 years ago
  
  Bạn làm theo với bản cập nhật nhé!
  
ESP says:

3 years ago

Trước khi admin xác định được lỗi, các bạn hãy tạm thời khắc phục bằng cách chuyển phương thức giao tiếp về GET thay vì POST trong file esp_data.php và file arduino nhé.

- nguyễn văn đinh says:
  
  3 years ago
  
  bạn nào làm được rồi chỉ mình với
  
  - admin says:
    
    3 years ago
    
    Bạn đọc lại bài cập nhật xem nhé!
    
admin says:

3 years ago

***Chào các bạn, mình đã kiểm tra lại, tất cả đều chạy bình thường, ít nhất là khi mình quyết định chuyển sang server mới. Các bạn có thể test với server địa chỉ sau: http://iot.luuvachiase.net/esp_data.php , link giao diện: http://iot.luuvachiase.net
*** Có một số cập nhật trong bài viết các bạn có thể xem lại: phần mã nguồn tạo SQL , phần code arduino update thêm phần hiển thị thông tin từ server về.
*** Trường hợp cuối cùng, các bạn thay phương thức request từ POST->GET sẽ hoạt động bình thường, nhưng phần api_key sẽ không có tác dụng nữa vì nó xuất hiện dạng clear text trên thanh trình duyệt rồi.

Chiến says:

3 years ago

ad ơi giúp mình với mình bị lỗi khi ấn go tạo bảng cơ sở dữ liệu
Lỗi: Access denied for user ‘id13309928_iot’@’%’ to database ‘information_schema’

- admin says:
  
  3 years ago
  
  Cái này do quyền truy cập database của bạn thôi
  
Chiến says:

3 years ago

Admin giúp mình với chuyển sang GET thì bị lỗi này: no matching function for call to ‘HTTPClient::GET(String&)’

- admin says:
  
  3 years ago
  
  Mình đã đưa code chạy với GET lên rồi nhé, bạn tham khảo, sorry vì mình chưa check kĩ function.
  
  - Chiến says:
    
    3 years ago
    
    Cảm ơn admin mình đã chạy được rồi ạ
    
Nguyễn Quang Chiến says:

3 years ago

admin có thể update sơ đồ kết nối phần cứng lên để cho mình hiểu đoạn code hơn được không ạ. mình cảm ơn

- admin says:
  
  3 years ago
  
  Sơ đồ phần cứng nào bạn nhỉ? Nếu là DS18B20 thì mình đã nói sơ đồ kết nối chân trong bài https://luuvachiase.net/index.php/2019/12/20/giam-sat-nhiet-do-su-dung-cam-bien-ds18b20-va-esp8266-hien-thi-bang-bieu-do-voi-highcharts-va-mysql/
  
  - Nguyễn Quang Chiến says:
    
    3 years ago
    
    oke ad mình thấy rồi
    
Dư says:

3 years ago

khi mình gửi dữ liệu lên trên serial hiển thị lỗi error code: -1 và không có dữ liệu trên database a? mong ad giúp đỡ

- Anh says:
  
  3 years ago
  
  Chào bạn, mình cũng bị lỗi gióng bạn và chưa fix được. Bạn đã fix được lỗi này chưa ạ?
  
- Dũng says:
  
  2 years ago
  
  Ai khắc phục được lỗi này chưa ạ
  
manh says:

3 years ago

Rất hữu ích

Manh says:

3 years ago

Anh ơi em muốn sửa thành con DHT11 thì sửa code chỗ con esp8266 như thế nào hả anh.
Email của em là: lemanhddt@gmail.com

Du says:

3 years ago

ad cho mình hỏi làm sao để hiển thị giờ phút giây khi rê chuột tới điểm đó ạ?

- admin says:
  
  3 years ago
  
  Cái đó là tính năng có sẵn của highchart nhé bạn!
  
Tiến Đạt says:

3 years ago

Cho em hỏi là em bị lỗi về cái API Key thì sửa sao ạ

Tiến Đạt says:

3 years ago

em lúc gửi lên bị lỗi vậy là sao ạ?
Error: INSERT INTO SensorData (sensor, location, value1)
VALUES (‘temperature’, ‘home’, ‘29.00’,’5678′)
Column count doesn’t

Võ Long Vương says:

3 years ago

Bạn ơi. Mình đã thử rất nhiều cách từ 3 hôm nay. Đều nhận được kết quả
HTTP Response code: 301
301 Moved Permanently

Thực sự mình không biết phải làm gì nữa, rất nản. tra google thì hiểu kiểu như đây là thông báo trang web hiện tại đã được chuyển rời tới địa chỉ mới. là sao :((

- Võ Long Vương says:
  
  3 years ago
  
  Mình dùng hosting và tên miền có trả phí. Thao tác tệp trên cpanel, chứ ko dùng 000webhost
  
- admin says:
  
  3 years ago
  
  Cái này liên quan đến host của bạn rồi, mình không rõ được. Bạn thử kiếm cái host free nào đó test code của mình có chạy dc ko.
  
  - Võ Long Vương says:
    
    2 years ago
    
    Mình test host free chạy ok luôn. Còn host trả phí của mình ko biết khắc phục sao nữa, vẫn ko được hix. Dù sao cũng cảm ơn b nhé, rất nhiệt tình
    
Hoàng Trần says:

2 years ago

anh ơi em tạo database nhưng khi em chạy nó bị lỗi này anh có thể chỉ em cách sửa nó không ạ Access denied for user ‘id15894086_ai’@’%’ to database ‘information_schema’

- admin says:
  
  2 years ago
  
  Có vẻ như em đã tạo nhiều database thì phải, em xóa đi dùng 1 cái thôi, nó ko cấp quyền truy cập của user:id15894086_ai cho cái “information_schema”
  
  - Hoàng Trần says:
    
    2 years ago
    
    dạ anh ơi cho em hỏi lỗi này làm sao sửa nó ạ Warning: mysqli::__construct(): (HY000/1045): ProxySQL Error: Access denied for user ‘io’@’2a02:4780:bad:f00d::13’ (using password: YES) in /storage/ssd2/550/15926550/public_html/esp-data.php on line 15
    Connection failed: ProxySQL Error: Access denied for user ‘io’@’2a02:4780:bad:f00d::13’ (using password: YES)
    
    - Nguyễn Vũ says:
      
      1 year ago
      
      bạn sửa đc lỗi chưa? chỉ mình với
      
việt says:

2 years ago

sao em cài thư viện httpclient không nhận ạ

- admin says:
  
  2 years ago
  
  Em chọn đúng thư việc chưa, em lên Github tải dạng file nén về rồi thêm vào Arduino IDE
  
Nhựt says:

2 years ago

Chào bạn hiện tại mình có làm 1 project giám sát các thông số về môi trường và đưa các thông số lên webserver tạo sẵn, mình có tham khảo bài của bạn rất hay và mình đã làm theo nhưng vẫn ko đưa data lên dc bạn giúp mình với. Mình cảm ơn bạn rất nhiều!

- admin says:
  
  2 years ago
  
  Bạn có thể liên hệ qua email ngoctuansqtt@gmail.com, mình chưa biết được là bạn đã làm đến đâu.
  
Dũng says:

2 years ago

Ad cho em hỏi em làm theo GET nhưng lại gặp lỗi server không nhận được api_Key dẫn đến httpResponseCode luôn bằng -1 thì khắc phục sao ạ

- admin says:
  
  2 years ago
  
  Em hãy test bằng bản tin GET từ trình duyệt xem host của em có phản hồi đúng ko đã, nhiều khi do host của em dùng https nên nó sẽ không nhận được, nó không tự động chuyển.
  
  - Dũng says:
    
    2 years ago
    
    là sao em chưa hiểu lắm ạ. test kiểu gì anh chỉ giúp em với ạ. Nếu được thì anh check tin nhắn chờ trong fb em có nhắn anh ạ
    
  - Dũng says:
    
    2 years ago
    
    Em xài localhost với 000webhost như anh thôi chứ không khác gì hết ạ
    
  - Dũng says:
    
    2 years ago
    
    À em hiểu rồi ạ. vấn đề là do chỗ https. Có cách nào khắc phục không anh chứ xài 000webhost tạo web nó cứ ra https mà em không biết sửa. Anh giúp em với ạ
    
    - admin says:
      
      2 years ago
      
      cái đó có cho em tạo subdomain ko, em thử tạo một cái ví dụ cái domain: abcd.000webhost thì em tạo cái mới là sub.abcd.000webhost vì anh từng làm rồi nhưng ko nhớ lúc đó làm thế nào, chỉ biết hiện tại host của anh có một subdomain là iot.luuvachiase.net thì nó là http, trong khi luuvachiase.net là https.
      
      - Dũng says:
        
        2 years ago
        
        có chỗ chỉ ghi thêm 1 file code vài dòng bỏ vào thì tất cả thành http hết mà em chưa test lại xem có được không nữa. Lúc trước thấy có người làm không cần domain vẫn được với lại hình như không cho domain hay sao đó hoặc phải mua
Hoàng Trần says:

2 years ago

dạ anh ơi anh có thể sửa lỗi này giúp em được không ạ
Warning: mysqli::__construct(): (HY000/1045): ProxySQL Error: Access denied for user ‘IO’@’2a02:4780:bad:f00d::8’ (using password: YES) in /storage/ssd4/086/15894086/public_html/index.php on line 25
Connection failed: ProxySQL Error: Access denied for user ‘IO’@’2a02:4780:bad:f00d::8’ (using password: YES)

- Nguyễn Vũ says:
  
  1 year ago
  
  bạn sửa đc lỗi chưa vậy? Chỉ mình với
  
Trương Hữu Tài says:

2 years ago

Ad cho em xin sđt đc ko ạ. E cần rất gấp gấp ạ. Cảm ơn ad. Sđt của e là: 0888147853

- admin says:
  
  2 years ago
  
  sorry bạn, mình ko đưa số dt lên đây dc, bạn có thể liên hệ qua email ngoctuansqtt@gmail.com. Mình sẽ cố gắng giúp trong khả năng.
  
nguyên đào says:

2 years ago

ad ơi e kết nối với http://iot.luuvachiase.net/esp_data.php báo lỗi này e thử trên http free của e thì hiện dc trên database nhưng k hiển thị dc lên web thank ad!
Connection failed: Access denied for user ‘u443553469_tuan’@’localhost’ (using password: YES)

nguyên đào says:

2 years ago

a ơi a check mail giúp e với ạ e đã nhập dc data vào database nhưng k hiển thị được lên website e cảm ơn !

- leviet says:
  
  2 years ago
  
  bạn giống mình, tất cả đều ok chỉ còn bước ko hiển thị được lên trang web, bạn fix được thì phản hồi giúp mình nhé, cảm ơn bạn
  
  - admin says:
    
    2 years ago
    
    Bạn check “phần php index thiếu time atc nên k hiển thị “
    
    - leviet says:
      
      1 year ago
      
      em cảm ơn anh, em đã fix được
      
    - Tuấn Anh says:
      
      9 months ago
      
      Bác cho em xin đoạn code fix time_atc được không
      date_default_timezone_set(‘Asia/Ho_Chi_Minh’);
      $time_act = date(‘Y-m-d H:i:s’); // use actual date() format displayed in your table.
      
      // Create connection
      $conn = new mysqli($dbHost, $dbUser, $dbPasswrod, $dbDatabase);
      // Check connection
      if ($conn->connect_error) {
      die(“Connection failed: ” . $conn->connect_error);
      }
      
Tiến Dũng says:

1 year ago

Em có gửi mail cho anh rồi anh giúp em với ạ

Quân says:

1 year ago

Dữ liệu đã hiện thị trong database nhưng không hiển thị ra web được. Bạn nào biết hỗ trợ mình với

Tuấn Anh says:

9 months ago

admin vui lòng cho em hỏi chút. code để nạp cho esp bị lỗi : call to ‘HTTPClient::begin’ declared with attribute error: obsolete API, use ::begin(WiFiClient, url)
Ngay tại dòng : http.begin(httpRequestData);
lỗi này là do sai thư viện sao ạ, nếu sai mong ad có thể share cái thư viện của ad
Xin chân thành cảm ơn