Cara Memvisualisasikan Pembacaan Data Sensor BMP180 menggunakan ESP32, PHP, dan MySQL Database

Selamat pagi kawan-kawan dunia maya saya. Masih di blog saya yang sepi ini, kita akan kembali mengulas mengenai Arduino ESP32. Tidak mencoba untuk menjadi pribadi yang melankolik, namun kelihatannya tulisan ini akan menjadi tulisan terakhir tentang Arduino. Namun, tidak menutup kemungkinan saya akan tetap aktif menulis namun saya sendiri belum tau tepatnya topik apa yang asyik untuk didiskusikan. Anyways, i want you to take me home, i’m fallin’ , eh kenapa malah jadi Pamungkas??

Jadi, kali ini kita akan mencoba untuk melakukan visualisasi data pembacaan sensor BMP180, namun serunya lagi kita akan memvisualisasikannya secara langsung di website. Asyik, ga? Asyik, ga? ASYIK LAH MASA ENGGA!!! Jadi, daripada lama-lama, gaspol aja ya kan, wak!

Untuk alat tempur yang akan kita gunakan, bisa langsung di cek list dibawah ini. Kalo kira-kira masih ada yang belum ada, bisa dibeli dulu, jangan maling nyak orang ya! Bisa juga pinjem punya kawan, sanak-saudara, tetangga, pacar (KALAU ADA, KALAU NGGA ADA JAN HALU!). Jadi ini sobat, alat dan bahannya :

1. Arduino ESP32 (masih setia dengan dia, e h, WEMOS MINI D1)
2. Breadboard
3. Laptop/PC
4. Kabel jumper beberapa juntai
5. Kabel MicroUSB
6. Sensor BMP180
7. Server Hosting (tidak harus berbayar, gratisan kayak aku jg kalem)
8. Database MySQL

ITU AJA YA WAK, enteng nya kan? BTW, aku masih pake hosting gratis dari 000webhost ya, jadi buat kelen yang masih belum ada budget buat beli hosting bisa register dulu ya. Untuk tutorial register ga aku sediakan karena kalo ga panjang kali. Sambil nunggu kawan-kawan kita yang masih beli barang yang belum lengkap di kede Uncle Ah Tong, cok la kelen baca skema dibawah ini biar agak ada persiapan sebelum mencoba. Mauliate godang buat lae RandomNerd yang udah berbagi buat kita semua.

Skema Diagram Flow Eksperimen

Kalau udah ready, yuk kita comeon, brookk!

1. Sebagai langkah pertama, kita akan mulai dengan membuka halaman website 000webhostnya. Kira-kira kek ginilah yang bakal muncul

Tampilan 000webhost abis kelar login

2. Kalau kau dah login, pilih lah website yang pen kau manage, pencet Manage baru proceed. Setelah itu kau klik vertical bar yang dikiri ada namanya Tools > Database Manager > New Database

Pilih New Database

3. Kalau gini yang muncul, isilah database name nya dengan esp_data sama username esp_board. Lain dari situ pun boleh asal kamu senang aku juga senang kok. eh kok tiba2 pake kamu ni wak? sori semua wak, tapi intinya itu bisa kau obah2 cuma ingat aja nanti kau sesuaikan ke langkah2 selanjutnya. LANJOT GAS REM BLONGG

Penampakan Create New Database

4. Abistu klik database yang kelen bikin pilih Manage > PhpMyAdmin. Setelahnya pastikan anda mengklik idXXXX_esp_data di vertical bar yang bagian kiri. Kalau udah dapat, pastekan la kode dibawah ini ya kawan.

Source code SQL

5. Kalau udah berhasil, nanti akan ada pesan tulisannya, “MySQL returned an empty result set (i.e. zero rows)” yang backgroundnya warna hijau. Kalau mau kroscek langsung bisa klik navbar atas yang namanya Structure. Untuk penampakannya bisa dilihat cam gambar dibawah ini ya sobatt.

6. Karna udah berhasil bikin tabelnya, kita bakal bikin backend nya yak ges. Kita bakal bikin script PHP untuk ngepost data nya ges. Untuk kodenya bisa langsung dicek dibawah ini ya, wal. Sante aja ini tinggal di copy-paste karena udah lolos uji ITB-IPB. XIXIXIXI NGAKAK ABIESZ PAK,,,,

Caranya tuh balik lagi ke laman awal yang pas kita bikin database. Baru pilih Tools > File Manager. Abistu unggah file dibawah ini yak. Kira-kira pas mau upload kek ginilah bentukannya beb.

Halaman unggah file PHP

Nanti bakal diredirect ke halaman baru, baru pilih public_html. Baru cek navbar atas klik gambar awan yang ada dicucuk panah ke atas. Nanti bakal muncul kek dibawah ini, baru langsung aja upload file dibawah ini. Untuk penamaan filenya bisa dibikin post-data.php

Halaman unggah file

Source code post-data.php

Untuk perhatian aja, di line 15–20 harap diganti sesuai identitas kredensial database anda yak, wal!

// 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”;

Oke, karena udah kelar bikin method post-data nya. Kita sekarang bakal bikin method buat ngevisualisasi data. Untuk cara-caranya masih sama kek diatas ya. Untuk kodenya bisa copas kode dibawah ini. Kodenya bisa dinamakan esp-chart.php ya ges yak.

Source code esp-chart.php

Penampakan file yang sudah siap diupload

Sekali lagi untuk mengingatkan wal, jadi di line 16–21 bisa dikondisikan ya sob dengan kredensial informasi database anda ya.

// 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”;

Jika ingin memastikan kedua file terunggah dengan baik, bisa dicek langsung kok. Misal untuk yang file post-data bisa dicek di alamat ini. (KLIK DISINI VERSI AWAK)

BARBUK untuk file post-data

http://namawebsite.000webhostapp.com/post-data.php

Kalo yang ini, untuk yang esp-chart.php (KLIK DISINI VERSI AWAK)

BARBUK file esp-chart.php

http://namawebsite.000webhostapp.com/esp-chart.php

Nah abistu, kita tinggal mensinkronasikannya dengan ESP32. Seperti biasa, untuk konfigurasi pin BMP180 nya bisa disesuaikan dengan ini dibawah ini.

• GND — GND
• VCC — VIN
• SDA — GPIO 21
• SCL — GPIO 22

Nah kalau udah aman rakit-rakitannya, bisa langsung aja copas kode dibawah ini. Kode ini hanya berlaku buat yang make sensor BMP180 ya ges.

Source Code esp32_visualData.ino

Baru abistu langsung aja compile kode nya. DIJAMIN no error dan 100% WORK ya gengs. Buat yang berhasil harusnya bakal muncul kayak gini di serial Monitornya. Jangan lupa set Serial Monitornya ke 115200 baud ya.

Serial Monitor ESP32

Nah karena, udah berhasil bekerja dari ESP32 nya, cuss langsung aja kita cek websitenya. Untuk website saya bisa dicek DISINI atau kalau untuk templatenya

http://websiteanda.000webhostapp.com/esp-chart.php

DAN, beginilah hasil yang harusnya anda dapatkan!!!

Schenshoot hasil visualisasi data

Oke gas, tengkyu buat perhatian dan support kalian selama ini. Makasih buat kebersamaa kita selama hampir 5 bulan ini. Nantikan tulisan-tulisan saya tidak kalah keren selanjutnya. MANTAAPPPP

Buat temen2 yang muslim tetap semangat puasanya yak dan buat kita semua jangan lupa buat STAY SAFE and STAY HEALTHY gengs. Karena mencegah lebih baik daripada mengobaati, buat tmn2 yang ga punya urgensi buat keluar ditahan dlu ya ges biar wabah covid-19 nya cepat kelarrr. Jangan lupa pake masker bila berpergian, JAGA JARAK terutama dalam kerumunan, dan patuhi prokes dimanapun yak. Thankyou and byebyeeeee.

Ikan hiu makan tomat,

See you sobaatt!!!