11. Pengontrolan Arduino Via Dababase Server
Bab ini membahas sebuah pendekatan yang dikontrol dari mana saja melalui browser, tidak harus dalam jaringan yang sama Dalam hal ini, alamat IP yang bersifat statis tidak diperlukan di Sisi Arduino.
1 1.1 Model Proyek Pengontrolan LED Menggunakan Database Server
Pengontrolan LED yang telah dibahas di beberapa bab di depan hanya dapat dilakukan dalam lingkungan jaringan yang sama. Jika dikehendaki untuk mengendalikan LED dari tempat mana saja, Anda perlu menggunakan alamat IP statis yang bersifat global. Namun, terkadang pemilikan alamat IP statis seperti ini menjadi suatu kendala tersendiri.
Rangkaian yang digunakan untuk mewujudkan percobaan ini adalah seperti yang dibahas di Subbab 6.3, yakni yang tercantum pada Gambar 6.11. Tentu saja, sebelumnya Anda perlu menumpukkan Ethernet Shield di atas papan Arduino.
11.2 Persiapan Tabel led
Seperti biasa, Anda bisa menggunakan HelioHost untuk melakukan percobaan ini. Anda bisa
menggunakan database iot yang telah dibahas pada Bab 5 untuk membuat tabel bernama led. Struktur tabel ini diperlihatkan di Tabel 11.1.
Tahap selanjutnya adalah memasukkan satu baris data pada tabel led. Caranya adalah seperti berikut.
- Klik pada tab Insert .
- Isikan seperti berikut:
- Klik pada tombol Go
Untuk melihat isi tabel led, silakan untuk mengeklik pada tab Browse . Hasilnya seperti berikut:
Data tersebut menyatakan bahwa LED dengan ID berupa 1 dalam keadaan mati.
11.3 Pembuatan Skrip PHP
Terdapat dua skrip PHP yang hendak diimplementasikan. Skrip pertama diberi nama bacastatus . php yang ditujukan untuk membaca status LED untuk LED ber-lD 1. Skrip kedua diberi nama ubahstatus. php yang ditujukan untuk mengubah status LED.
Berikut adalah isi skrip bacastatus . php:
<?php
include once (“koneksidb .php”) ;
$hasil mysqli_query ($dbc, “SELECT * FROM led WHERE led_id – 1”) ;
While ($baris =msql_fetch_row($hasil)){
$led_status = $baris [1];
print (“status led: $1 ed status\n”) ;
}
?>
Skrip ini digunakan untuk membaca data di tabel led yang field led id-nya bernilai 1. Selanjutnya, data led status dibaca dan nilainya diletakkan di variabel $ led status. Berikutnya, nilainya ditampilkan melalui: print (“status led: $1 ed status \ n”) ; Perintah ini akan menghasilkan baris dengan kemungkinannya berupa salah satu baris berikut:
led status: 0
led status: 1 GAMBAR 1 1.2
Hasil pemanggilan bacastatus .php ketika
led status di tabel led bernilai 0
diperlihatkan pada Gambar 11.3.
GAMBAR 1 1 .3
Hasil pemanggilan bacastatus .php
ketika led status di tabel led bernilai 1
Berikut adalah isi skrip ubahstatus . php:
Skrip ini membaca variabel POST bernama tombol, kemudian nilainya diletakkan di variabel $ tombol. Lalu, jika isi $ tombol berupa “Matikan LED”, variabel $ status diisi dengan 0 dan variabel $statusLED diisi dengan “OFF”. Untuk keadaan sebaliknya, variabel $status diisi dengan 1 dan variabel $statusLED diisi dengan “ON”.
Selanjutnya, nilai di $status digunakan untuk mengubah nilaifie/d led status pada tabel led.
Hal ini dikerjakan oleh pernyataan:
$hasil = mysgli_query ($dbc,
“UPDATE led SET led status = $status WHERE led id 1”) ;
Dalam hal ini, pernyataan SQL bernama UPDATE-Iah yang digunakan untuk memperbaharui isifield led status sesuai dengan isi variabel $status.
Jika data di tabel led berhasil diperbaharui, informasi status LED dikirimkan melalui:
print (“Status LED telah diubah men jadi $statusLED”) ;
Informasi inilah yang akan diterima pemakai yang telah mengeklik salah satu tombol di halaman web.
Pertama-tama, uji skrip ini untuk mengetahui bahwa tidak ada kode yang salah. Caranya, panggillah ubahstatus .php. Tentu saja, Anda harus menyesuaikan dengan nama domain Anda sendiri. Hasilnya diperlihatkan pada Gambar 11.4.
GAMBAR 1 1.4 Hasil pengujian skrip ubahstatus .php
GAMBAR 11.5 Tampilan ubahled.htm
Gambar 11.5 menunjukkan hasil pemanggilan skrip ubahled . htm. Jika tombol Hidupkan LED diklik, ubahstatus .php pun dipanggil, seperti yang terlihat pada Gambar 11.6. Gambar 11.7 memperlihatkan keadaan di phpMyAdmin sebelum dan sesudah tombol tersebut diklik.
GAMBAR 11.6 Hasil setelah tombol “Hidupkan LED” diklik
GAMBAR 11.7
Tombol “Hidupkan LED” mengubah status led dari 0 menjadi 1
Jika tombol Matikan LED diklik, ubahstatus . php pun dipanggil, seperti yang terlihat pada Gambar 11.8. Gambar 11.9 memperlihatkan keadaan di phpMyAdmin sebelum dan sesudah tombol tersebut diklik.
11.4 Pengenalan JavaScript, JQuery, dan Ajax
JavaScript adalah bahasa pemrograman berbentuk skrip yang biasa diletakkan bersama HTML untuk menangani aksi, contohnya jika sesuatu tombol diklik, kode dalam JavaScript dapat diatur akan dijalankan. Browser dengan sendirinya mendukung bahasa ini.
Kode JavaScript diletakkan di antara pasangan tag
<script type=”text/javascript”>
dan
< / script>
Jika kode diletakkan di file eksternal, penulisannya seperti berikut:
<script type=”text/javascript”
Src=”eksternal.js”>
< / script>
JQuery adalah suatu pustaka yang dapat diunduh secara gratis di:
www. jquery. com
Pustaka ini dibangun dengan menggunakan JavaScript dengan maksud untuk memudahkan pembuatan JavaScript. Hal itu diwujudkan dengan menyediakan sejumlah perintah yang ringkas sehingga pembuatan kode JavaScript dapat dilakukan dengan mudah, contohnya di JavaScript kadang kita menuliskan perintah seperti:
var elemen = document . getE1ementById (“citra”) ;
Kode tersebut dapat diringkas menjadi seperti berikut dengan menggunakan JQuery: var elemen — $ (“#citra”) ;
Agar kita bisa menggunakan jQuery, perlu disertakan kode semacam berikut pada dokumen HTML:
<script type=”text/javascript” src=”jquery-3.1.1. min. js>
</script>
Angka 3.1.1 menyatakan versi jQuery.
Gambar 11.10 memberikan ilustrasi mengenai
hal ini.
GAMBAR 1 1. 10 Ajax memungkinkan
Pembaruan terhadap bagian kecil dari halaman web
Jika kita ingin melewatkan data ke server dengan menggunakan metode POST, kita bisa menggunakan $ . aj ax ( ) . Contoh penggunaannya seperti berikut:
$.ajax({
url :”ubahstatus.php”,
type: “post”,
data: {tombol: “Mat i kan LED”} ,
success : function (data) {
$ ( ” # info”) . text (data) ;
},
error: function (xhr, status Text) {
$ (“# info”) . text (“Kesalahan: “ + status Text) ;
}
});
Kode di atas digunakan untuk memanggil skrip ubahstatus . php dengan metode POST. Data yang dilewatkan berupa tombol dengan nilai berupa “Matikan LED”. Adapun
function (data) {
$ ( ” # info”) . text (data) ;
}
yang terletak sesudah success, menentukan fungsi yang dijalankan sekiranya web server memberikan tanggapan tanpa ada suatu kesalahan. Dalam hal ini, pernyataan
$ ( “{info”) . text (data) ;
membuat elemen HTML yang memiliki ID berupa “info” akan diisi dengan teks yang terdapat di data. Perlu diketahui, data adalah hasil tanggapan dari web server. Jika terjadi sesuatu kesalahan, fungsi yang terletak sesudah error akan dijalankan.
Sebelum mempraktikkan penggunaan jQuery, unggahkan pustaka JQuery ke web server terlebih dahulu. Pada contoh ini,file jquery—3.1.1.min.js yang perlu diunggah ke folder public_html. Selanjutnya, Anda bisa mengunggah skrip berikut:
Pada skrip ini,
<script type=”text/javascript”
Src=”jquary-3.1.1min.js” >
</script>
menyatakan bahwa file jquery-3.1.1.min.js, yang sebenarnya adalah kode JavaScript, digunakan. File ini berada di web server. Adapun
<script type=”text/javascript”>
$ (document) . ready (function ( ) {
$ (“#tombol-off”). click (function ( ) {
$ (“#info”) . text (“Tunggu…”) ;
$.ajax({
url: “ubahstatus .php”,
type: “post”,
data: {tombol: “Matikan LED”),
success: function (data) {
$ ( “{info”) . text (data) ;
},
error: function (xhr, statusText, ) {
$ ( ” # info”) . text (“Kesalahan : “ +
statusText) ;
}
});
}),
$ (“#tombol-on”.clik(function() {
$(“#info”).text(“Tunggu…”);
$.ajax({
url: “ubahstatus .php” ,
type: “post” ,
data: {tombol: “Hidupkan LED”},
success: function (data) {
$ (“#info”) . text (data) ;
},
error: function (xhr, statusText) {
$ (“#info”) . text (“Kesalahan: “ +
statusText) ;
}
});
});
});
menyatakan kode JavaScript yang ditulis secara langsung dalam file HTML. Dalam hal ini,
$ (document) . ready (function ( )
…
});
menyatakan bahwa kalau seluruh dokumen HTML telah selesai dimuat, kode fungsi yang berada di antara { dan } akan dijalankan. Di dalam bagian ini terdapat dua definisi fungsi yang mengatur tindakan
“klik” pada tombol yang ber-lD “tombol-off” dan “tombol-on”. Kedua tombol yang dimaksud adalah:
<button id=”tombol-off”>Matikan LED</button>
<button id=”tomb01—on”>Hidupkan LED</button>
Nilai atribut id itulah yang dinyatakan dalam $ (“#tombol-off”) dan $ (“tombol-on”). Kode berikut Inilah yang mengatur tindakan kalau tombol ber-lD “tombol-off” diklik pemakai.
$ (#tombol-off”).. click (function ( ) {
$ ( ” # info”) . text (“Tunggu….”);
$.ajax({
url: “ubahstatus .php” ,
type: “post”, data: {tombol: “Matikan LED”} , success: function (data) {
$ ( “*info”) . text (data) ;
},
error: function (xhr, status Text, ) {
$ ( ” # info”) . text (“Kesalahan: : “+
statusText) ;
}
});
Pertama-tama, pernyataan berikut dijalankan:
$ (“#info”) . text (“Tunggu… “)
Pernyataan ini digunakan untuk menampilkan teks “Tunggu…” pada elemen ber-lD “info”, yakni:
<div id=”info”></div>
Untuk mengujinya, anda bisa mengetikan :
Ardugama.site88.net/ubahled.htm
Hasilnya diperlihatkan pada Gambar 11.11.
“Tunggu…” (Gambar 11.13).
Jika tombol Matikan LED diklik, akan muncul LED” diklik tulisan “Tunggu ” Selanjutnya, setelah ada tanggapan dari web server, tulisan yang berasal dari web serverditampilkan menggantikan tulisan “Tunggu…” (Gambar 11.14).
11.5 Pembuatan Sketsa di Sisi Arduino
Tahap terakhir yang perlu diwujudkan adalah membuat sketsa di Sisi Arduino yang bertujuan untuk memantau status LED di database dan menerjemahkan ke pengaturan terhadap LED.
Pada sketsa ini, permintaan ke server dilakukan melalui:
www.println (“GET /bacastatus .php HTTP/l . 1”) ;
www . print (“Host:”);
www.println (server) ;
www.println(“Content-Type: text/plain”) ;
www . println ( ) ;
Skrip yang diminta oleh Arduino adalah bacastatus . php. Selanjutnya, proses untuk mengontrol LED berdasarkan tanggapan dari server dilakukan melalui pemanggilan:
prosesLed ( ) ;
Di fungsi prosesLed ( ) inilah dilakukan pengendalian LED dengan membaca nilai yang terletak sesudah substring “status_led:”. Pertama-tama yang dilakukan adalah mencari posisi SUbstring tersebut. Hal ini dilaksanakan dengan menggunakan:
int posisi = tanggapan. indexOf (“status led:”) ;
Jika substring ditemukan, nilai posisi akan berupa bilangan lebih dari -1. Itulah sebabnya terdapat kode:
if (posisi > —1)
Untuk membaca karakter yang terletak sesudah substring “status_led:”, diperlukan perintah seperti berikut:
char karakter —— tanggapan [posisi + 11] ;
Dalam hal ini, karakter akan berisi karakter O atau 1. Jika karakter berupa ‘0’, pernyataan berikut dijalankan:
digitalWrite (PIN LED KONTROL, LOW) ;
Pernyataan ini membuat LED padam. Sebaliknya, jika karakter berisi ‘1’, pernyataan berikut dijalankan:
digitalWrite (PIN LED KONTROL, HIGH) ;
Pernyataan ini membuat LED menyala.
11.6 Pengembangan untuk LED Lebih dari Satu
Contoh yang dibahas di atas sangat sederhana mengingat hanya satu LED yang dikontrol. Jika LED yang dikontrol lebih dari satu, tentu saja kode yang diperlukan tidak sesederhana seperti itu. Sebab, Anda juga harus mencatat LED yang dikontrol beserta statusnya. Oleh karena itu, database yang dibuat tidak lagi sesederhana seperti pada contoh.
Untuk pengembangan lebih lanjut, silakan untuk mewujudkan gagasan Anda. Hal ini merupakan suatu tantangan yang menarik.
11.7 Isu Keamanan
Skrip seperti ubahled . htm dapat dijalankan oleh siapa saja. Hal seperti ini tentu saja perlu dihindari dalam praktik nyata. Oleh karena itu, skrip ini dapat ditulis dengan menggunakan PHP dan dilengkapi dengan autentikasi, contohnya Anda bisa menggunakan sesi dan menerapkan password. Buku ini tidak membahas masalah ini. Namun, jika Anda ingin mengimplementasikannya, Anda bisa membaca buku penulis yang berjudul “Dasar Pemrograman Web Dinamis Menggunakan PHP”.