ESP-32 Tutorial: MySQL Database
Bagaimana cara menghubungkan ESP-32 dengan database lalu menampilkan isi database dalam website?Simak pembahasan berikut ini!
Halo teman-teman semua! Kembali lagi di serial tutorial ESP-32. Kali ini, saya ingin mencoba untuk menghubungkan ESP-32 dengan database. Secara garis besar, pada kesempatan ini saya akan membuat website saya terlebih dahulu dilengkapi dengan MySQL Databse, menghubungkannya dengan ESP-32 saya, kemudian mengisi database tersebut dengan hasil pembacaan sensor BME-280. Hasil pembacaan yang disimpan dalam database ini nantinya juga akan ditampilkan pada website yang sudah diinisiasi tersebut.
Perlu teman-teman perhatikan bahwa dalam membuat website, tentunya kita memerlukan hosting dan banyak hosting yang berbayar. Oleh karena itu, pada tutorial kali ini saya akan mencoba menggunakan 000webhost.com, sebuah provider hosting yang gratis dan mudah digunakan.
Tanpa basa-basi lagi, mari kita bahas lebih dalam projek kali ini!
Daftar Komponen dan Perangkat
Dalam projek kali ini, saya akan menggunakan komponen-komponen berikut ini:
1. ESP-32 DOIT DEVKIT K1 Board
2. Sensor BME-280
3. Breadboard
4. Jumper Wires
Komponen-komponen tersebut tentunya sudah tidak asing lagi bagi teman-teman semua. Namun sebagai pengingat, kita akan menggunakan ESP-32 sebagai ‘otak’ utama dari projek kita, BME280 sebagai sensor untuk membaca keadaan lingkungan kita(suhu,ketinggian,kelembapan dan tekanan), breadboard sebagai tempat untuk komponen-komponen kita berhubungan dan jumper wires berguna untuk menghubungkan komponen-komponen tersebut
Skema Perangkat
Berikut ini merupakan skema perangkat pada projek kali ini
Bila teman-teman perhatikan kembali, skema ini tidak memiliki perbedaan dengan skema projek pada saat kita melakukan modul sensor eksternal dan hal tersebut benar adanya. Hanya saja, yang akan menjadi pembeda adalah kita akan menggunakan jaringan Wi-Fi untuk menghubungkan ESP-32 dan BME280 dengan laptop, dimana pada kasus kemarin kita menghubungkannya dengan kabel. Selain itu, saya akan menggunakan layar laptop sebagai media penampilan hasil pembacaan dan tidak menggunakan media display eksternal lainnya.
Setup Website
Sebelum masuk kedalam list program, ada baiknya saya menjelaskan terlebih dahulu cara melakukan setup website menggunakan 000webhost.com. Berikut ini langkah-langkah yang perlu teman-teman lakukan
- Masuk kedalam website 000webhost.com dan melakukan login
Berikut merupakan tampilan website pertama. Setelah itu teman-teman perlu melakukan sign-in dan kemudian website akan meredirect teman-teman ke page selanjutnya
2. Membuat website/melakukan manage website
Setelah teman-teman berhasil login, maka berikut ini merupakan tampilan utamanya. Teman-teman perlu melakukan create new site untuk membuat nama website yang teman-teman akan gunakan(nama bebas) dan apabila sudah, maka teman-teman perlu meng-click tulisan manage website seperti yang terlihat pada card paling kiri dan kemudian teman-teman dapat melanjutkan ke tahapan selanjutnya
3. Masuk ke halaman utama website teman-teman dan membukan “Database Manager”
Berikut ini merupakan tampilan dari page selanjutnya apabila teman-teman sudah menge-click manage website. Di bagian kiri, teman-teman akan melihat tombol “tools” dan silahkan teman-teman click tombol tersebut. Apabila sudah, maka teman-teman akan menemukan tombol “Database Manager” dan teman-teman perlu mengeclicknya kembali untuk melanjutkan ke tahap selanjutnya
4. Membuat database dan membuka phpmyadmin
Setelah membuka database manager, maka teman-teman seharusnya berhasil membuka page ini dan tampilannya masih kosong. Oleh karena itu teman-teman perlu membuat database baru dengan menge-click “+New Database”. Dari sini teman-teman akan diminta untuk membuat nama database, username database dan passwordnya. Dalam konteks password, pihak 000webhost.com menyediakan fitur random, tetapi pastikan dalam password tersebut tidak ada simbol “$” karena akan menjadi masalah pada tahap berikutnya. Setelah berhasil, maka teman-teman perlu membuka phpmyadmin seperti gambar diatas untuk melanjutkan ke tahap berikutnya
5. Mengatur phpmyadmin dan membuat table SQL baru
Berikut ini merupakan tampilan dari phpmyadmin. Teman-teman terlebih dahulu perlu mengeclick database yang sudah teman-teman buat pada bagian kiri web tersebut(atau dibawah tulisan phpMyAdmin). Setelah mengeclick tombol tersebut, maka teman-teman akan masuk ke database baru dan teman-teman perlu mengeclick tombol “SQL” yang ada pada database tersebut. Berikut ini merupakan contohnya
Pada tahap ini, teman-teman silahkan melakukan copy paste kode dibawah ini
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
)Setelah itu teman-teman dapat menekan tombol “Go” dan apabila sukses, maka teman-teman berhasil membuat table SQL yang akan menyimpan data-data hasil pembacaan BME-280 nanti
6. Kembali ke halaman 000webhost.com dan membuka file manager
Setelah phpmyadmin teman-teman sudah selesai, maka teman-teman dapat kembali ke halaman website teman-teman, kemudian kembali mengeclick tombol “tools” dan kali ini pilih tombol “file manager”. Tampilannya akan sama seperti gambar diatas dan teman-teman perlu mengeclick tombol “Upload Files” yang ada di tengah-tengah page tersebut.
7. Mengatur file manager dan membuka website hasil pembacaan
Berikut ini merupakan tampilan utama dari “File Manager” tersebut. Meskipun sedikit tidak terlihat, teman-teman perlu membuka file “public_html” dan setelah membuka file tersebut, berikut ini merupakan tampilan websitenya
Pada tampilan teman-teman seharusnya masih belom ada file apa-apa selain .htaccess . Oleh karena itu teman-teman perlu membuat 2 file baru menggunakan logo yg ada di kanan atas website. Berikut ini merupakan nama file dan isi dari masing-masing file tersebut
a. post-esp-data.php
<?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;
}b. esp-data.php
<!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 masing-masing code, teman-teman perlu mengganti nama database, username database dan password database teman-teman. Hal tersebut dapat dilihat pada bagian 000webhost.com website teman-teman pada bagian berikut ini
Setelah teman memasukkan file tersebut pada file manager dan menyimpannya, maka teman-teman dapat membuka website teman-teman dengan “namaweb”.000webhostapp.com. Sebagai contoh, pada website saya, saya menamainya dengan embeded-feihan, maka website yang akan saya buka adalah embeded-feihan.000webhostapp.com. Apabila berhasil, maka berikut ini merupakan tampilan utama dari website tersebut
Untuk melihat hasil pembacaan teman-teman, teman-teman dapat melakukan penambahan “/esp-data.php” pada akhir website teman-teman. Sebagai contoh, dalam website saya maka hasil akhirnya adalah “embeded-feihan.000webhostapp.com/esp-data.php”. Dan tampilan yang muncul adalah sebagai berikut
Apabila tampilan tersebut sudah muncul, brarti teman-teman sudah berhasil melakukan pengaturan pada website dan kita dalam memulai program pada ESP-32.
List Program
Berikut ini merupakan program yang saya gunakan:
/*
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 = “NAMAWIFI”;
const char* password = “PASSWORD”;// REPLACE with your Domain name and URL path or IP address with path
const char* serverName = “NAMAWEBSITE/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 SPIvoid 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(2000);
}
Pada program ini, seperti biasanya akan saya bagi menjadi 3 bagian, yaitu inisiasi/konstanta, void setup dan void loop. Pada bagian inisiasi/konstanta, program akan mempersiapkan modul-modul yang akan digunakan pada void setup dan void loop, seperti modul Wi-Fi dan BME-280. Setelah itu, diciptakan sebuah konstanta yang akan menyimpan nama server yang akan kita sambungkan pada bagian void loop nanti.
Pada bagian void setup, program akan menghubungkan ESP-32 dengan Wi-Fi yang kita gunakan serta menghubungkan ESP-32 dengan sensor BME-280. Apabila terjadi kegagalan pada salah satu perangkat, maka program akan masuk kedalam kondisi infinite loop sehingga program tidak dapat melanjutkan pekerjaannya.
Pada void loop, program akan membaca status Wi-Fi kembali. Apabila masih terhubung, maka program akan mengirimkan hasil pembacaan BME-280 ke dalam database dengan method POST yang dimiliki oleh HTTP. Dengan method tersebut, maka data akan diterima dan disimpan dalam database yang sudah kita buat sebelumnya. Proses ini akan dilakukan terus menerus dengan waktu delay update ke database sesuai dengan delay yang tertulis pada bagian bawah program. (Pada kode yang saya gunakan, saya memasang waktu untuk update kedalam database setiap 2 detik).
Demo Modul
Berikut ini merupakan hasil percobaan dari projek database kali ini
Analisis
Selamat teman-teman sudah membaca hingga titik ini! Tentunya teman-teman memiliki banyak pertanyaan kenapa program tersebut dapat berjalan dan bagaimana cara hasil pembacaan tersebut dapat ditampilkan di website. Oleh karena itu mari kita bahas satu per satu bagian dalam projek ini
Terdapat 3 bagian utama yang akan saya bahas, yaitu post-esp-data.php, esp-data.php dan program ESP-32 itu sendiri. Pertama-tama saya akan membahas post-esp-data.php. Pada program yang dituliskan dalam bahasa php ini, program akan mengecheck data dari server. Apabila server melakukan methode POST, maka akan dicacah nilai-nilai yang diterima oleh program menjadi bagian-bagian lebih kecil(menjadi sensor, location, value1, value2, value3) kemudian menyimpannya dalam dalam table SQL yang sudah kita buat sebelumnya. Proses ini akan berlaku terus menerus selama server melakukan method POST kedalam program ini.
Kemudian masuk kedalam bagian esp-data.php. Pada bagian ini, program akan berusaha membaca/mengakses query hasil pembacaan yang sebelumnya sudah disimpan dalam database oleh post-esp-data.php. Data ini kemudian akan dimasukkan kedalam konstanta masing-masing dan ditampilkan dalam sebuah website dalam format table(Hal ini bisa teman-teman liat dari bahasa HTML yang memiliki tr untuk membuat baris baru dalam table dan td untuk mengisi kolom)
Terakhir, bagian program ESP-32. Pada bagian ini program akan menghubungkan ESP-32 dengan Wi-Fi dan server yang akan kita gunakan. Setelah terhubung dengan baik, maka ESP-32 akan mengirimkan hasil pembacaan dari BME-280 ke dalam server dengan method POST. Proses ini akan dilakukan secara terus menerus dengan delay yang disesuaikan oleh kita.
Oleh karenanya, secara runtut berikut ini merupakan cara/alur kerja program kita
1. ESP-32 menghubungkan dirinya dengan Wi-Fi dan server
2. ESP-32 mengirimkan data pembacaan BME-280 ke dalam server menggunakan method POST
3. Server mendapatkan method POST dalam dirinya
4. Post-esp-data.php membaca bahwa ada method POST di dalam server kemudian membacanya
5. Post-esp-data.php mengolah data tersebut, mencacahnya dan memasukkannya kedalam table/database SQL
6. Saat esp-data.php dibuka, maka ia akan membaca hasil pembacaan yang sudah disimpan dalam table/database SQL
7. esp-data.php menampilkan pembacaan tersebut ke dalam website dalam format HTML
8. Proses akan diulangi secara terus menerus
Dengan penjelasan singkat tersebut, saya berharap teman-teman dapat lebih memahami bagaimana cara kerja dari projek ini. Tentunya projek ini merupakan projek yang cukup rumit dan saya memiliki beberapa kendala dalam mengerjakannya.
Kendala yang pertama adalah cara membuat website yang rumit. Pada awalnya, saya tidak dapat mengerjakan projek ini karena tidak mengetahui cara membuat/setup website dengan hostingan gratis yang dapat dipakai dan disambungkan dengan ESP-32. Namun setelah saya menanyakan caranya kepada teman saya, akhirnya saya dapat membuat dan melanjutkan projek ini
Kendala yang kedua adalah password database yang salah format. Apabila teman-teman perhatikan, file pada esp-data dan post-esp-data merupakan file dengan format php, dimana tanda “$” merupakan tanda yang penting untuk membaca suatu nilai. Pada awalnya, password database saya memiliki tanda tersebut sehingga program membaca seolah-olah password saya terpotong dan digantikan oleh suatu nilai, sehingga saya tidak bisa mengakses file esp-data.php pada website awalnya. Namun setelah menyadari hal tersebut, akhirnya saya mengganti password saya dan akhirnya website dapat berjalan dengan baik
Kendala yang ketiga dan merupakan kendala yang berulang-ulang tentunya adalah masalah BME-280 dan ESP-32. Apabila teman-teman membaca blog saya pada pekan lalu, tentunya teman-teman dapat menyadari bahwa BME-280 dan ESP-32 saya tidak dapat terhubung ketika kedua komponen tersebut diletakkan pada breadboard dan ESP-32 harus diletakkan secara terpisah. Pada kasus kali ini, hal tersebut tidak dapat berjalan sehingga saya malah harus kembali memasangkan ESP-32 ke dalam breadboard terlebih dahulu dan barulah ESP-32 dapat terhubung dengan BME-280. Meskipun kendala ini merupakan kendala yang berulang, saya tetap bersyukur bahwa akhirnya projek ini dapat dikerjakan dan tidak terjadi kerusakan pada komponen-komponen yang saya miliki
Kesimpulan
Menurut saya, projek ini merupakan projek yang paling rumit dan menantang. Tidak hanya kita menggabungkan projek Wi-Fi dan sensor eksternal, saya juga belajar untuk membuat website dengan databasenya sendiri serta menggunakan hosting-an gratis. Meskipun terjadi loncatan yang cukup besar dan memiliki tingkat kesulitan yang lumayan sulit, saya bersyukur karena tetap dapat menyelesaikan projek ini dengan bantuan teman-teman saya. Semoga teman-teman juga dapat mempraktekan projek ini dengan baik dan hasil yang memuaskan :)
