Cara Mudah Menampilkan Data Sensor Arduino Menggunakan MQTT ke dalam Website PHP

Menampilkan data arduino (sensor) ke Aplikasi Website menggunakan mqtt, websocket, dan PHP.

Cara Mudah Menampilkan Data Sensor Arduino Menggunakan MQTT ke dalam Website PHP

Halo semuanya! kalo kemarin Saya sudah membahas mengenai Konfigurasi ESP8266–01 dan Arduino Mega & Install dan Konfigurasi Broker MQTT (Mosquitto) pada Sistem Operasi Windows. Pada kesempatan kali ini saya akan membahas bagaimana cara menampilkan data sensor Arduino ke dalam website berbasis PHP.

Sedikit cerita, pengalaman saya saat ingin menampilkan data sensor ke website sangatlah rumit, dikarenakan tidak mendapatkan sumber informasi yang dapat membantu bagaimana cara menampilkannya. Sudah banyak mencoba dan melakukan sesuai tutorial yang didapat dari internet namun hasilnya selalu nihil, maka dari itu pada kesempatan kali ini saya akan memberikan tutorial mengenai Cara Mudah Menampilkan Data Sensor Arduino Menggunakan MQTT ke dalam Website PHP.

Pengantar

Kali ini ada beberapa software dan library javascript yang akan digunakan saat ingin menampilkan data sensor ke website, yaitu:

1. PHP : PHP (PHP: Hypertext Preprocessor) adalah sebuah bahasa pemrograman server side scripting yang bersifat open source.Sebagai sebuah scripting language, PHP menjalankan instruksi pemrograman saat proses runtime. Hasil dari instruksi tentu akan berbeda tergantung data yang diproses.PHP merupakan bahasa pemrograman server-side, maka script dari PHP nantinya akan diproses di server. Jenis server yang sering digunakan bersama dengan PHP antara lain Apache, Nginx, dan LiteSpeed.
2. MQTT seperti yang sudah kita bahas sebelumnnya, MQTT singkatan dari Message Queuing Telemetry Transport merupakan protokol komunikasi yang berjalan pada stack TCP/IP yang dirancang khusus untuk komunikasi machine to machine yang tidak memiliki alamat khusus. Maksud dari kata tidak memiliki alamat khusus ini seperti halnya sebuah arduino, raspi atau device lain yang tidak memiliki alamat khusus. Sistem kerja MQTT menerapkan Publish dan Subscribe data. Dan pada penerapannya, device akan terhubung pada sebuah Broker dan mempunyai suatu Topic tertentu.
3. Library Paho MQTT merupakan library untuk dapat menggunakan MQTT klien dan websocket pada website berbasis PHP. Library inimenyediakan kelas klien yang memungkinkan aplikasi terhubung ke broker MQTT untuk mempublikasikan pesan, dan untuk berlangganan topik dan menerima pesan yang dipublikasikan.
4. Library MQTTws31.js termasuk ke dalam library paho MQTT, namun untuk library ini digunakan sebagai Websocket, namun berbeda dengan websocket biasanya untuk library ini MQTT akan berjalan melalui Websocket yang bertujuan untuk browser memanfaatkan semua fitur MQTT.
5. Broker MQTT emqx.io merupakan public broker berbasis cloud yang dapat diakses secara gratis dan menyedialkan port untuk website berbasis HTTPS atau TLS (Transport Layer Security). Dapat ditemukan di Public MQTT 5 Broker | EMQ (emqx.com)

Hal yang perlu disiapkan

Pertama hal yang paling utama adalah rangkaian Arduino yang sudah terkonfigurasi dengan MQTT dan website yang sudah kalian buat. Jika sudah memiliki rangkaian Arduino yang sudah terkonfigurasi dengan MQTT maka kita akan konfigurasi website PHPnya.

Konfigurasi Library MQTTws

Memanggil Library MQTTws

Hal yang paling penting yaitu kita memanggil library untuk MQTTws, Saya menggunakan cdn untuk memnaggil library tersebut, dikarenakan mudah dan tidak perlu melakukan install pada file websitenya.

Selanjutnya yang perlu dilakukan adalah konfigurasi untuk hostname, port, dan topic yang sesuai dengan konfigurasi pada source coude Arduino. seperti berikut:

Konfigurasi MQTT over Websocket di Website

Konfigurasi MQTT di Arduino

Konfigurasi Topic MQTT di Arduino

Setelah sudah disamakan oleh source code Arduino selanjutnya adalah konfigurasi MQTT klien melalui websocket pada source code website yang tadi, lanjutkan seperti gambar dibawah ini:

Konfigurasi MQTT Klien Melalui Websocket Website PHP

Konfigurasi MQTT Klien Melalui Websocket Website PHP

Setelah konfigurasi MQTT Klien sudah selesai, langkah terakhir yaitu menampilkan value yang sudah dikirimkan menggunakan tag html, kali ini saya menggunakan tag html <textarea> seperti contoh dibawah ini:

Menampilkan data sensor pada Website PHP

Semua konfigurasi telah dilakukan dan data sensor sudah dapat tertampil pada website kita. Jika ingin melihat hasil akhirnya dapat ditonton pada video berikut:

Akhir Kata

Dengan begitu kita sudah dapat melakukan Menampilkan Data Sensor Arduino Menggunakan MQTT ke dalam Website PHP. bila terdapat kekurangan dalam penulisan saya mohon maaf, saya juga sangat terbuka dalam menerima kritik dan saran. Semoga tulisan ini dapat membantu teman-teman dalam memahami ilmu baru dan membantu mengatasi masalah untuk Menampilkan Data Sensor Arduino Menggunakan MQTT ke dalam Website PHP

Link Website: My Personal Website
Beli Source Code: Karyakarsa

see you in the next post~