[II2260 — Embedded System, 9th Project] Insert Data into MySQL Database using PHP and Arduino IDE
— Pengantar
Setelah menyelesaikan project kedelapan (ESP32 Web Server), selanjutnya kita akan membahas tentang cara input data pembacaan sensor BMP280 ke dalam database dan menampilkan datanya pada web server yang mana web server tersebut mengambil data pada database. Karena pembahasannya cukup panjang, maka lansung saja kita mulai!
— Komponen
Adapun komponen yang digunakan terbagi menjadi dua, yaitu perangkat lunak (software) dan perangkat keras (hardware).
Untuk hardware :
- Arduino IDE + breadboard + WiFi
- BMP280
- Kabel Jumper dan Kabel micro USB
- Laptop/PC
Untuk software :
- XAMPP
- Visual Studio Code atau IDE lainnya dan pastikan sudah terinstall PHP
— Hands-On
Adapun untuk Hands-On akan dibagi menjadi dua bagian, yaitu pembuatan database serta web server, dan pembacaan dan pengiriman data sensor.
— — Pembuatan Database dan Web Server
- Buka XAMPP yang sudah kalian install
- Silahkan tekan tombol Start pada module Apache dan MySQL
3. Silahkan kunjungi http://localhost/phpmyadmin/
4. Setelah itu silahkan buat database dan tabel baru, dalam kasus ini saya membuat database dengan nama ‘esp32database’ dan membuat tabel dengan nama ‘bmp280hafidz’ yang terdapat 5 kolom. Silahkan ikuti gambar di bawah ini untuk pembuatan tabel.
5. Setelah berhasil, silahkan kunjungi folder C:\Xampp\htdocs (disesuaikan dengan directory tempat kalian melakukan instalasi XAMPP)
6. Buatlah sebuah folder dengan nama disesuaikan, dalam kasus ini saya membuat folder bernama ‘esp32database’ dan buatlah 3 buah file php dengan nama config.php, connect.php, index.php (perlu diperhatikan bahwasanya file connect.php bisa kalian ubah sesuai preferensi kalian)
7. Untuk file config.php, silahkan salin code berikut
<?php
/*
$dbname = 'YOUR_DB_NAME';
$dbuser = 'YOUR_DB_USER';
$dbpass = 'YOUR_DB_PASSWORD';
$dbhost = 'localhost';
*/
// Pada kasus ini, konfigurasi yang saya gunakan yaitu :
$dbname = 'esp32database';
$dbuser = 'root';
$dbpass = '';
$dbhost = 'localhost';
?>8. Untuk file connect.php, silahkan salin code berikut
<html>
<body>
<?php
/*********
Hafidz Shidqi
Follow github https://github.com/hafidzyami
*********/
require 'config.php';
$connect = @mysqli_connect($dbhost,$dbuser,$dbpass,$dbname);
if(!$connect){
echo "Error: " . mysqli_connect_error();
exit();
}
echo "Connection Success";
$temperature = $_GET["temperature"];
$pressure = $_GET["pressure"];
$altitude = $_GET["altitude"];
$query = "INSERT INTO bmp280hafidz VALUES ('', '$temperature', '$pressure', '$altitude', '')";
$result = mysqli_query($connect,$query);
echo "Insertion Success";
?>
</body>
</html>9. Untuk file index.php, silahkan salin code berikut. Perlu diperhatikan bahwasanya saya menggunakan framework CSS yaitu Bootstrap v5 untuk memperbagus UI. Silahkan sesuaikan oleh preferensi kalian masing-masing
<?php
/*********
Hafidz Shidqi
Follow github https://github.com/hafidzyami
*********/
#connect ke sql
require 'config.php';
$db = @mysqli_connect($dbhost,$dbuser,$dbpass,$dbname);
#mengembalikan data berdasarkan query
function showData($query){
global $db;
$result = mysqli_query($db, $query);
$rows = [];
while($row = mysqli_fetch_assoc($result)){
$rows[] = $row;
}
return $rows;
}
$Data = showdata("SELECT * FROM bmp280hafidz");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h2 class="mt-4 mb-5 text-center">Daftar Data Sensor BMP280</h2>
<table class="table " >
<thead>
<tr class="table-primary table-bordered border-dark">
<th>No.</th>
<th>temperature (c)</th>
<th>pressure (hPa)</th>
<th>approx altitude</th>
<th>timestamp</th>
</tr>
</thead>
<tbody>
<?php foreach ($Data as $datum): ?>
<tr class="<?= $datum['id']%2 ==0 ? 'table-info' : '' ?>">
<th scope="row"><?= $datum["id"]?></th>
<td><?= $datum["temperature"]?></td>
<td><?= $datum["pressure"]?></td>
<td><?= $datum["altitude"]?></td>
<td><?= $datum["timestamp"]?></td>
</tr>
<?php endforeach;?>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
</body>
</html>— — Pembacaan dan Pengiriman Data Sensor BMP280
Setelah berhasil membuat database dan web server pada localhost, kita akan lanjut merangkai rangkaian yang nantinya web server bisa membaca dan menampilkan pembacaan sensor BMP280 dari database
Adapun langkah-langkahnya sebagai berikut :
- Pasang ESP32 dan BMP280 pada breadboard
- Sambungkan pin GND di ESP32 ke pin GND pada BMP280
- Sambungkan pin 3V3 di ESP32 ke pin VCC pada BMP280
- Sambungkan pin GPIO21 ke pin SDA di BMP280
- Sambungkan pin GPIO22 ke pin SCL di BMP280
6. Buka Arduino IDE kalian, salin dan upload code berikut
/*
Rui Santos
Complete project details at Complete project details at https://RandomNerdTutorials.com/esp32-http-get-post-arduino/
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.
*/
#include <WiFi.h>
#include <HTTPClient.h>
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BMP280.h>
#define SEALEVELPRESSURE_HPA (1013.25)
Adafruit_BMP280 BMP; // I2C
const char* ssid = "blabla";
const char* password = "blabla";
//Your Domain name with URL path or IP address with path
String serverName = "http://192.168.0.142/esp32database/connect.php";
void setup() {
Serial.begin(115200);
Serial.println(F("BMP280 test"));
bool status;
// default settings
// (you can also pass in a Wire library object like &Wire2)
status = BMP.begin(0x76);
if (!status) {
Serial.println("Could not find a valid BMP280 sensor, check wiring!");
while (1);
}
Serial.println("-- Default Test --");
Serial.println();
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());
Serial.println("Timer set to 5 seconds (timerDelay variable), it will take 5 seconds before publishing the first reading.");
}
void loop() {
//Check WiFi connection status
if(WiFi.status()== WL_CONNECTED){
HTTPClient http;
String serverPath = serverName + "?temperature=" + String(BMP.readTemperature()) + "&pressure=" + String(BMP.readPressure() / 100.0F)
+ "&altitude=" + String(BMP.readAltitude(SEALEVELPRESSURE_HPA));
// Your Domain name with URL path or IP address with path
http.begin(serverPath.c_str());
// If you need Node-RED/server authentication, insert user and password below
//http.setAuthorization("REPLACE_WITH_SERVER_USERNAME", "REPLACE_WITH_SERVER_PASSWORD");
// Send HTTP GET request
int httpResponseCode = http.GET();
if (httpResponseCode>0) {
Serial.print("HTTP Response code: ");
Serial.println(httpResponseCode);
String payload = http.getString();
Serial.println(payload);
}
else {
Serial.print("Error code: ");
Serial.println(httpResponseCode);
}
// Free resources
http.end();
}
else {
Serial.println("WiFi Disconnected");
}
delay(3000);
}Perlu diperhatikan bahwasanya kalian harus mengganti potongan code const char* ssid = "blabla" dan const char* password = "blabla" Gantilah nilai blabla dengan nama ssid kalian dan password dari ssid kalian.
Dan juga untuk String serverName = "IPAddress/FOLDER/FILE.php" silahkan ganti dengan IP Address kalian diikuti dengan nama folder yang telah kalian buat pada langkah keenam dan nama file pada langkah kedelapan pada bagian pembuatan database dan webserver
7. Selanjutnya, silahkan buka Serial Monitor dengan 115200 Baud, lalu perhatikan pesan yang tampil. Jika pesan yang tampil seperti gambar di bawah, maka tandanya kalian berhasil mengirimkan data ke database
8. Silahkan kunjungi http://localhost/phpmyadmin/ dan http://localhost/NAMA_FOLDER_KALIAN/, nama folder yang dimaksud ialah dapat dilihat pada langkah keenam pada bagian pembuatan database dan webserver, dalam kasus aku, aku membuka link berikut http://localhost/esp32database/
9. Silahkan refresh kedua page dan pastinya data pembacaan sensor akan terupdate setiap 3 detik pada keduanya (kalian bisa mengganti data terupdate setiap berapa detik pada potongan code delay(3000) pada langkah keenam di atas, 3000 menunjukkan 3000 milidetik = 3 detik)
Sekian yang bisa saya sampaikan, terima kasih sudah membaca tulisan ini dan selamat mencoba! Jika ada kendala bisa tuliskan di kolom komentar ya.
