Projek Sistem Embedded Part 10: Insert Data into MySQL Database using PHP and Arduino IDE

11 min readApr 11, 2021

Halo semuanya,,,

Selamat datang kembali di kisah projek sistem embedded ku yang sudah masuk ditahap akhir. Untuk kalian yang baru bergabung, kalian bisa melihat kisah-kisah lainku pada link ini.

Sudah masuk part 10 yang akan membahas mengenai insert data into MySQL Database, aku banyak belajar mengenai ESP32, dan kali ini aku akan mendapatkan pelajaran baru lagi dengan komponen seperti berikut ini

ESP32 DevKit
Kabel Jumper (Male to Male)
BME280
Breadboard
Laptop/Komputer
Kabel USB
Hosting Server dan Domain
Database (phpMyAdmin)

Yap, kalau kalian lihat di komponen nomor 7 dan 8, percobaan kali ini akan dilakukan menggunakan sebuah hosting server beserta domainnya, dan akan terhubung dengan sebuah database yang kali ini akan menggunakan database phpMyAdmin.

Percobaan kali ini cukup unik karena kita tidak memulai dengan sebuah skema rangkaian, tetapi dengan sebuah tips.

Hosting server adalah jasa layanan internet yang menyediakan sumber daya peladen-peladen untuk disewakan sehingga memungkinkan organisasi atau individu menempatkan informasi di internet berupa HTTP, FTP, EMAIL, atau DNS. Kalau kalian cari di internet sangat banyak web yang dapat kalian gunakan sebagai hosting server ini, mulai dari yang gratis sampai yang berbayar.

Di projekku kali ini aku menggunakan hosting server 000webhost.com yang merupakan sebuah hosting server gratis. Sebenarnya kalian bisa menggunakan banyak cara seperti menggunakan hosting server secara bersama atau menggunakan hosting sever lainnya seperti yang bisa kalian lihat di panduan randomnerdtutorial.com yang ku ikuti.

— Tahap Awal: Preparing MySQL Database

Jika kalian ingin menggunakan 000webhost.com seperti yang kulakukan, kalian bisa mengikuti langkah-langkah berikut.

Setelah membuka web 000webhost.com, jika belum mepunyai akun, kalian akan diminta untuk membuat sebuah akun dan login kedalamnya
Kalian akan dihadapkan dengan tampilan seperti ini

Kalian bisa memilih “Let’s Create Some Magic”

3. Selanjutnya, setelah memilih “Let’s Create Some Magic”, kalian akan diberikan tampilan seperi berikut.

Disini, aku memilih “Other” dengan memilih tombol “Select”

4. Tahap berikutnya, kalian bisa memilih “upload your site” seperti gambar berikut.

5. Kalian akan dibukakan dua buah web, sebuah web untuk sebagai localhost, dan sebuah web yang akan memperlihatkan “My Sites” dengan tampilan seperti berikut.

Untuk foto kedua, kalian bisa memilih manage website pada bagian esp32-webhosting. Sehingga tampilannya akan seperti berikut.

Jika kalian sudah sampai pada bagian ini, kalian bisa memilih “Tools” pada bagian kiri dan akan menampilkan tampilan berikut

Pada bagian ini, kalian bisa memilih “Database Manager” untuk sampai ditahap menyambungkan pada sebuah database yang kali ini digunakan adalah phpMyAdmin, tampilannya seperti berikut

Selanjutnya, kalian akan diarahkan untuk membuat sebuah database dengan memilih “+ New Database”. Pastikan kalian menyimpan password yang diberikan ya

6. Setelah membuat database, kalian dapat memilih tombol “Manage” dan “PhpMyAdmin” seperti tampilan berikut.

7. Setelah memilih “PhpMyAdmin”, kalian akan langsung masuk ke sebuah tab baru yang mengarah pada database PhpMyAdmin tersebut seperti berikut

Kalau kalian sudah berada ditampilan seperti diatas, kalian bisa memilih database kalian seperti yang kulakukan yaitu memilih tombol “id16575695_webhosting”. Dan jika sudah memilih kalian bisa langsung memilih lagi SQL pada bagian atas dan melakukan proses query dengan memasukan query berikut.

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
)

Tampilannya seperti berikut.

Jangan lupa memilih tanda “Go” atau “Kirim” ya.

Tanda jika kalian sudah berhasil membuat database, jika kalian kembali memilih database kalian pada sebelah kiri, tampilan yang akan muncul seperti berikut.

Gambar 13

— Tahap Tengah: PHP Script HTTP POST — Insert Data in MySQL Database

Berlanjut ke tahap selanjutnya, yaitu memasukan data ke MySQL Database atau inti dari percobaan kita pada projek kali ini.

Seperti yang sudah kubilang di tahap sebelumnya, ketika kalian membuka “Manage Website” seperti gambar 3, kalian akan dihadapkan dengan 2 tab baru. Dimana 1 tab sudah dijelaskan pada tahap sebelumnya, dan tab berikutnya akan dijelaskan pada tahap ini. Tab yang kumaksud terletak pada gambar 4 atau kalian bisa lihat kembali gambar dibawah ini

Gambar diatas memperlihatkan sebuah penyimpanan yang bisa kalian akses disini jika kalian telah melakukan tahap awal dan kehilangan tab tersebut.

Selanjutnya, untuk memasukan data ke database kalian, kalian bisa memilih folder “public_html” yang terlihat pada gambar 14, dan melakukan add file didalamnya. Kalian akan mebuat 2 file yang berisi:

File yang bernama post-esp-data.php

Setelah melakukan add file pada folder public_html kalian bisa melakukan edit pada file tersebut dengan memilih gambar pensil yang terletak di bagian atas seperti gambar 14 dan menuliskan code berikut

<?php

/*
  Rui Santos
  Complete project details at https://RandomNerdTutorials.com/esp32-esp8266-mysql-database-php/
  
  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files.
  
  The above copyright notice and this permission notice shall be included in all
  copies or substantial portions of the Software.
*/

$servername = "localhost";

// REPLACE with your Database name
$dbname = "REPLACE_WITH_YOUR_DATABASE_NAME";
// REPLACE with Database user
$username = "REPLACE_WITH_YOUR_USERNAME";
// REPLACE with Database user password
$password = "REPLACE_WITH_YOUR_PASSWORD";

// 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 = "tPmAT5Ab3j7F9";

$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 "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;
}

Pada kode yang kuberikan, ada beberapa bagian yang harus kalian ganti yang sudah ku berikan tanda bold diatas atau dibawah ini.

// REPLACE with your Database name
$dbname = "REPLACE_WITH_YOUR_DATABASE_NAME";
// REPLACE with Database user
$username = "REPLACE_WITH_YOUR_USERNAME";
// REPLACE with Database user password
$password = "REPLACE_WITH_YOUR_PASSWORD";

Masih ingat bukan password database kalian?:)

id dan name database kalian bisa melihat kembali pada Tools → Manage Database atau seperti gambar 8.

2. File yang berjudul esp-data.php

Sama seperti sebelumnya, setelah melakukan add file pada folder public_html kalian bisa melakukan edit pada file tersebut dengan memilih gambar pensil yang terletak di bagian atas seperti gambar 14 dan menuliskan code berikut

<!DOCTYPE html>
<html><body>
<?php
/*
  Rui Santos
  Complete project details at https://RandomNerdTutorials.com/esp32-esp8266-mysql-database-php/
  
  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files.
  
  The above copyright notice and this permission notice shall be included in all
  copies or substantial portions of the Software.
*/

$servername = "localhost";

// REPLACE with your Database name
$dbname = "REPLACE_WITH_YOUR_DATABASE_NAME";
// REPLACE with Database user
$username = "REPLACE_WITH_YOUR_USERNAME";
// REPLACE with Database user password
$password = "REPLACE_WITH_YOUR_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>Value 1</td> 
        <td>Value 2</td>
        <td>Value 3</td> 
        <td>Timestamp</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"];
        // 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_value3 . '</td> 
                <td>' . $row_reading_time . '</td> 
              </tr>';
    }
    $result->free();
}

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

Pada kode yang kuberikan, ada beberapa bagian yang harus kalian ganti yang sudah ku berikan tanda bold diatas atau dibawah ini.

// REPLACE with your Database name
$dbname = "REPLACE_WITH_YOUR_DATABASE_NAME";
// REPLACE with Database user
$username = "REPLACE_WITH_YOUR_USERNAME";
// REPLACE with Database user password
$password = "REPLACE_WITH_YOUR_PASSWORD";

Masih ingat bukan password database kalian?:)

id dan name database kalian bisa melihat kembali pada Tools → Manage Database atau seperti gambar 8.

Sehingga pada folder public_html kalian akan ada tampilan seperti berikut

Untuk melakukan pengecekan apakah kode dapat berjalan atau tidak, diperlukan sebuah domain. Untuk di web kali ini, domain bisa didapatkan melalui tahapan Tools → Set Web Address → + Add domain → Point domain.

dan kalian bisa menggunakan web dibawah ini untuk mengecek kodenya

http://example-domain.com/esp-data.php
atau
http://example-domain.com/post-esp-data.php

example-domain diatas bisa kalian dapatkan dari point domain yang kalian lihat sebelumnya atau seperti warna biru pada gambar dibawah ini.

Dan jika kalian sudah menyelesaikan semuanya diatas, kita akan lanjut ke tahap selanjutnya

— Tahap Akhir: Pembuatan Rangkaian

Setelah menggabungkan semuanya, di projek kali ini aku akan membuat pembacaan suhu menggunakan BME280. Rangkaiannya akan seperti ini

Dan code yang bisa kalian gunakan adalah seperti berikut.

/*
  Rui Santos
  Complete project details at https://RandomNerdTutorials.com/esp32-esp8266-mysql-database-php/
  
  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files.
  
  The above copyright notice and this permission notice shall be included in all
  copies or substantial portions of the Software.

*/

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

#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>

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

// REPLACE with your Domain name and URL path or IP address with path
const char* serverName = "http://example.com/post-esp-data.php";

// 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 = "tPmAT5Ab3j7F9";

String sensorName = "BME280";
String sensorLocation = "Office";

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

#define SEALEVELPRESSURE_HPA (1013.25)

Adafruit_BME280 bme;  // I2C
//Adafruit_BME280 bme(BME_CS);  // hardware SPI
//Adafruit_BME280 bme(BME_CS, BME_MOSI, BME_MISO, BME_SCK);  // software SPI

void setup() {
  Serial.begin(115200);
  
  WiFi.begin(ssid, password);
  Serial.println("Connecting");
  while(WiFi.status() != WL_CONNECTED) { 
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to WiFi network with IP Address: ");
  Serial.println(WiFi.localIP());

  // (you can also pass in a Wire library object like &Wire2)
  bool status = bme.begin(0x76);
  if (!status) {
    Serial.println("Could not find a valid BME280 sensor, check wiring or change I2C address!");
    while (1);
  }
}

void loop() {
  //Check WiFi connection status
  if(WiFi.status()== WL_CONNECTED){
    HTTPClient http;
    
    // 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=" + String(bme.readTemperature())
                          + "&value2=" + String(bme.readHumidity()) + "&value3=" + String(bme.readPressure()/100.0F) + "";
    Serial.print("httpRequestData: ");
    Serial.println(httpRequestData);
    
    // You can comment the httpRequestData variable above
    // then, use the httpRequestData variable below (for testing purposes without the BME280 sensor)
    //String httpRequestData = "api_key=tPmAT5Ab3j7F9&sensor=BME280&location=Office&value1=24.75&value2=49.54&value3=1005.14";

    // Send HTTP POST request
    int httpResponseCode = http.POST(httpRequestData);
     
    // If you need an HTTP request with a content type: text/plain
    //http.addHeader("Content-Type", "text/plain");
    //int httpResponseCode = http.POST("Hello, World!");
    
    // If you need an HTTP request with a content type: application/json, use the following:
    //http.addHeader("Content-Type", "application/json");
    //int httpResponseCode = http.POST("{\"value1\":\"19\",\"value2\":\"67\",\"value3\":\"78\"}");
        
    if (httpResponseCode>0) {
      Serial.print("HTTP Response code: ");
      Serial.println(httpResponseCode);
    }
    else {
      Serial.print("Error code: ");
      Serial.println(httpResponseCode);
    }
    // Free resources
    http.end();
  }
  else {
    Serial.println("WiFi Disconnected");
  }
  //Send an HTTP POST request every 30 seconds
  delay(3000);  
}

Dalam kode diatas, kalian harus mengganti beberapa hal seperti dibawah ini

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

// REPLACE with your Domain name and URL path or IP address with path
const char* serverName = "http://example.com/post-esp-data.php";

Untuk mendapatkan serverName kalian bisa menggunakan domain yang sudah di bahas diatas. Dan pada kode program diatas variabel mengenai API dapat diubah untuk memastikan keamanan kepemilikan. Dengan digunakannya sensor BME280 ini, perlu dibuat sebuah objek sensor dan terdapat juga persiapan request data dari HTTP Post berupa menampilkan message pada serial monitor terkait hasil pembacaan sensor.

Ketika request HTTP Post diberikan, digunakan fungsi Post untuk mengetahui response code. Jika response code ini lebih besar dari 0, artinya data tersimpan pada basis data dan dapat ditampilkan pada web page dan pengiriman request dilakukan setiap 30 detik.

Hasil yang akan didapatkan seperti berikut

Tampilan Database dan Serial Monitor setelah pembacaan sensor

Dan hasil web nya akan seperti berikut.

Sehingga dari percobaan kali ini, didapatkan berbagai pelajaran mengenai basis data, hosting server dan berbagai keamanan bagi sebuah basis data. Dan dalam percobaan kali ini, sedikit tips untuk kalian jangan lupa untuk mencatat seluruh password dan id serta username ya:)

Sekian percobaan pada projekku kali ini, semoga bisa bermanfaat untuk kalian semua dan sampai jumpa di projek selanjutnya. Have a nice day!!

Projek Sistem Embedded Part 10: Insert Data into MySQL Database using PHP and Arduino IDE

Written by Cindy Amandani