Hallo warrior ! Pada pertemuan ini kita akan coba membahas mengenai cara mengirim sebuah data sensor dari Nodemcu ESP8266 ke database MYSQL dan menampilkannya di database.
Dengan begini kamu dapat menyimpan seluruh data dari sensor dan menampilkannya langsung secara realtime di komputer yang sudah kamu siapkan.
Contents
Introduction
Perkembangan zaman yang begitu pesat memaksa kita untuk terus berpikir dan berinovasi akan teknologi yang tepat guna dan memberikan banyak manfaat kepada kita para manusia.
Salah satunya mungkin sebuah sistem yang dapat memberikan data secara realtime, guna memudahkan kita untuk memonitoring sistem irigasi atau tanaman yang kekurangan air dan butuh kita beri pupuk untuk kesuburannya.
Pada kesempatan ini kita akan coba melakukan sebuah percobaan dengan mengirimkan data dari sensor kelembaban tanah yang terhubung dengan esp8266 ke server yang sudah terinstall database mysql.
Dengan begitu nantinya esp8266 yang sudah terhubung ke server akan mengirimkan datanya melalui WiFi, lalu data tersebut akan diproses dan disimpan di database mysql. Data yang sudah tersimpan selanjutnya akan ditampilkan oleh webserver di komputer server maupun komputer lain yang terhubung ke server.
Server yang sudah kita siapkan disini merupakan sebuah komputer yang sudah terinstall layanan webserver (apache/nginx) dan juga database server (mysql/mariadb dan phpmyadmin).
Jika kita belum memilikinya, kita dapat menggunakan aplikasi XAMPP yang dapat memeberikan komputer kita layanan webserver dan juga database server tersebut. Untuk penjelasan dan installasi terkait XAMPP dapat kalian baca pada artikel yang sebelumnya saya buat.
Baca Artikel : Mengenal XAMPP dan Cara Installasi XAMPP (Webserver dan Database Server).
Setelah aplikasi XAMPP sudah kita installkan di komputer, nantinya kita akan menjalankan membuat database dan membuat aplikasi web sederhana untuk menampilkannya.
Persiapan
Berikut merupakan beberapa perangkat yang perlu kita persiapkan pada praktek ini, diantaranya adalah sebagai berikut :
- Nodemcu/ESP8266
- Sensor kelembaban tanah
- Komputer/Server yang sudah terinstall XAMPP
Rangkaian
Karena pada praktek ini kita menggunakan sensor kelembaban tanah, maka rangkaian yang kita pergunakan adalah sebagai berikut.
Membuat Database baru
Hal pertama yang perlu kita lakukan setelah setelah menginstall XAMPP dan menjalankan beberapa hal dasarnya ialah membuat database baru, buka phpmyadmin lalu buat sebuah database dengan nama dbwarriornux.
Setelah database berhasil dibuat, masuk kedalam tab SQL pada database tersebut lalu masukan script berikut untuk membuat sebuah table baru beserta isinya. Klik Go untuk melanjutkan.
CREATE TABLE datasensor (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
data INT(10),
`waktu` TIMESTAMP NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
)"
Setelah berhasil, maka hasilkan akan terlihat seperti dibawah ini. Terdapat 3 tabel baru sesuai yang sudah dibuat dalam script diatas.
Maka dengan begini database sudah berhasil kita siapkan, selanjutnya kita akan buat sebuah web sederhana untuk menerima data dan menampilkan isi dari database mysql.
Halaman Penerima Data
Pada bagian ini kita akan mebuat sebuah halaman web php sederhana untuk menerima data sensor yang dikirimkan oleh nodemcu esp8266.
Pertama buat direktori baru dengan nama web-warriornux di htdoc dalam direktori XAMPP, setelah itu buat file dengan nama write-data.php lalu isikan program dibawah ini. Setelah itu Simpan.
<?php
//Variabel database
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "dbwarriornux";
$conn = mysqli_connect("$servername", "$username", "$password","$dbname");
// Prepare the SQL statement
$result = mysqli_query ($conn,"INSERT INTO datasensor (data) VALUES ('".$_GET["data"]."')");
if (!$result)
{
die ('Invalid query: '.mysqli_error($conn));
}
?>Halaman Menampilkan Data
Selanjutnya setelah kita membuat halaman untuk menerima data, kita akan membuat halaman untuk menampilkan data yang sudah diterima dan disimpan di database mysql. Data yang ditampilkan nantinya akan berupa sebuah tabel sederhana.
Buat sebuah file baru dengan nama index.php didalam direktori web-warriornux, lalu isikan program berikut pada file tersebut.
<?php
require("koneksi.php"); // memanggil file koneksi.php untuk koneksi ke database
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="5">
</head>
<body>
<style>
#wntable {
border-collapse: collapse;
width: 50%;
}
#wntable td, #wntable th {
border: 1px solid #ddd;
padding: 8px;
}
#wntable tr:nth-child(even){background-color: #f2f2f2;}
#wntable tr:hover {background-color: #ddd;}
#wntable th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #00A8A9;
color: white;
}
</style>
<div id="cards" class="cards" align="center">
<h1> Data Sensor Kelembaban Warriornux</h1>
<table id="wntable">
<tr>
<th>No</th>
<th>Data</th>
<th>Waktu</th>
</tr>
<?php
$sql = mysqli_query($koneksi, "SELECT * FROM datasensor ORDER BY id DESC");
if(mysqli_num_rows($sql) == 0){
echo '<tr><td colspan="14">Data Tidak Ada.</td></tr>'; // jika tidak ada entri di database maka tampilkan 'Data Tidak Ada.'
}else{ // jika terdapat entri maka tampilkan datanya
$no = 1; // mewakili data dari nomor 1
while($row = mysqli_fetch_assoc($sql)){ // fetch query yang sesuai ke dalam array
echo '
<tr>
<td>'.$no.'</td>
<td>'.$row['data'].'</td>
<td>'.$row['waktu'].'</td>
</tr>
';
$no++; // mewakili data kedua dan seterusnya
}
}
?>
</table>
</div>
</body>
</html>Halaman Koneksi Database
Halaman yang kita buat sebelumnya adalah halaman untuk menampilkan saja, ada satu bagian yang berfungsi untuk menghubungkan halaman penampil data dengan database mysql yaitu yang akan kita buat sekarang.
Masih didalam direktory yang sebelumnya, buat sebuah file baru dengan nama koneksi.php lalu isikan dengan program berikut.
<?php
//Variabel database
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "dbwarriornux";
$koneksi = mysqli_connect($servername, $username, $password, $dbname); // menggunakan mysqli_connect
if(mysqli_connect_errno()){ // mengecek apakah koneksi database error
echo 'Gagal melakukan koneksi ke Database : '.mysqli_connect_error(); // pesan ketika koneksi database error
}
?>Sketch Program ESP8266
Setelah web sederhana untuk menerima dan menampilkan data sudah kita buat, sekarang giliran nodemcu esp8266 yang kita program. Silahkan modifikasi, compile dan upload program berikut dibawah ini.
/*
* Program From www.warriornux.com
*/
#include <ESP8266WiFi.h>
//Konfigurasi WiFi
const char *ssid = "warriornux.com";
const char *password = "c0c0d0tb4u";
//IP Address Server yang terpasang XAMPP
const char *host = "192.168.43.96";
void setup() {
Serial.begin(115200);
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.println("");
Serial.print("Connecting");
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
//Jika koneksi berhasil, maka akan muncul address di serial monitor
Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
}
int value = 0;
void loop() {
// Proses Pengiriman -----------------------------------------------------------
delay(1000);
++value;
// Membaca Sensor Analog -------------------------------------------------------
int datasensor=analogRead(A0);
Serial.println(datasensor);
Serial.print("connecting to ");
Serial.println(host);
// Mengirimkan ke alamat host dengan port 80 -----------------------------------
WiFiClient client;
const int httpPort = 80;
if (!client.connect(host, httpPort)) {
Serial.println("connection failed");
return;
}
// Isi Konten yang dikirim adalah alamat ip si esp -----------------------------
String url = "/web-warriornux/write-data.php?data=";
url += datasensor;
Serial.print("Requesting URL: ");
Serial.println(url);
// Mengirimkan Request ke Server -----------------------------------------------
client.print(String("GET ") + url + " HTTP/1.1\r\n" +
"Host: " + host + "\r\n" +
"Connection: close\r\n\r\n");
unsigned long timeout = millis();
while (client.available() == 0) {
if (millis() - timeout > 1000) {
Serial.println(">>> Client Timeout !");
client.stop();
return;
}
}
// Read all the lines of the reply from server and print them to Serial
while (client.available()) {
String line = client.readStringUntil('\r');
Serial.print(line);
}
Serial.println();
Serial.println("closing connection");
}Sesuaikan SSID dan Password dari Wifi yang kalian gunakan, pada bagian atas ada IP Address Server XAMPP yang merupakan alamat penerima data yang akan di transfer dari nodemcu.
Untuk mengetahui IP Address dari komputer kalian yang sudah terinstall XAMP, kalian dapat membuka cmd/command prompt di windows dan ketikan ipconfig. Atau jika kalian menggunakan linux bisa jalan kan ifconfig, maka disana akan terlihat IP yang kalian gunakan.
Hasil Percobaan
Setelah serangkain tahap demi tahap sudah kalian lakukan, sekarang kita coba lihat hasilnya. Jiak komunikasi dan pengiriman data berhasil dilakukan maka console arduino IDE akan terlihat seperti berikut.
Jika kita membuka dan melihat isi database didalam phpmyadmin, akan terlihat beberapa data yang sudah masuk seperti berikut.
Terakhir kita dapat lihat hasilnya di web sederhana yang sudah kita buat tadi, buka localhost lalu lihat datanya akan tampil seperti gambar berikut.
Dengan begini kita dapat melihat web sederhana menampilkan data dari sensor yang dikirimkan melalui nodemcu esp8266 dan tersimpan langsung di database mysql secara realtime.
Bagi kalian yang sudah memiliki basic sebagai developer mungkin dapat mengubah halaman penampil data mysql menjadi lebih menarik dan interaktif lagi, karena memang web penampil pada artikel ini terlihat cukup sederhana.
Kesimpulan
Setelah kita melakukan serangkaian percobaan diatas kita dapat menyimpulkan bahwa untuk membangun sebuah sistem pengiriman data yang realtime kita memerlukan penampung data yaitu database mysql.
Dan untuk menampilkan data tersebut kita membutuhkan web sederhana yang sudah terinstall di webserver dan terkoneksi langsung dengan database. Semua dapat dijalankan dengan aplikasi XAMPP sebagai host untuk webserver dan database server.
Sehingga nantinya nodemcu esp8266 dapat mengirimkan data sensornya ke server host yang sudah terinstall webserver dan juga database server.
