11. Pengontrolan Arduino Via Database Server

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.

Solusi lain yang dapat dilakukan adalah dengan memanfaatkan database server. Gambar 11.1 menunjukkan model atas solusi ini. Prinsipnya, Arduino sebagai klien akan selalu memonitor nilaifield status di tabel led pada database server. Apabila status bernilai 1, LED akan dinyalakan. Apabila status bernilai O, LED dimatikan. Adapun di Sisi pemakai yang menggunakan browser, nilai status di tabel led dapat diatur melalui tombol.

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.

  1. Klik pada tab Insert .
  2. Isikan seperti berikut:

  1. 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

Untuk melakukan percobaan, panggillah bacastatus . php di browser. Tentu saja, Anda harus menyesuaikan dengan nama domain Anda sendiri. Hasilnya ditunjukkan pada Gambar 11.2. Cobalah untuk mengubah led—status di tabel led menjadi 1. Selanjutnya, jika bacastatus . php dipanggil akan diperoleh hasil seperti yang

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.

Untuk menguji ubahstatus . php agar dapat digunakan untuk memperbarui status LED, skrip ketiga bernama ubahled. htm yang menjadi antarmuka pemakai untuk mengendalikan LED, perlu dibuat. Isinya seperti berikut:

 

 

GAMBAR 1 1.4 Hasil pengujian skrip ubahstatus .php

 

Skrip HTML ini menyediakan formulir yang digunakan untuk mengirimkan data ke server. Metode yang digunakan adalah POST Kedua tombol berjenis “submit” yang akan membuat file yang disebutkan di action dipanggil kalau salah satu tombol diklik. Kedua tombol ini diberi nama yang sama, yakni tombol yang disebutkan dalam atribut name. Tombol inilah yang akan mengirimkan string “Matikan LED” atau “Hidupkan LED”.

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.

Asynchronous JavaScript and XML atau biasa disebut Ajax merupakan suatu pendekatan yang memungkinkan hanya bagian tertentu dari halaman web yang disegarkan tanpa mengubah tampilan bagian lainnya. Sebagai efeknya, dimungkinkan untuk memanggil skrip di web server ketika pemakai mengeklik suatu tombol dan sebagian besar tampilan di halaman web tetap dipertahankan. Ketika tanggapan dari web server diterima, hanya bagian kecil di halaman web yang diperbarui.

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>

Selanjutnya, ubahstatus php dijalankan dengan metode POST. Pemanggilan fungsi $. aj ax ( ) ini telah dijelaskandi depan. Hal serupa dikenakan pada tombol ber-lD “tombol on”

Untuk mengujinya, anda bisa mengetikan :

Ardugama.site88.net/ubahled.htm

Hasilnya diperlihatkan pada Gambar 11.11.

Jika tombol Hidupkan LED diklik, akan muncul tulisan “Tunggu..,” seperti terlihat pada Gambar 11.12. Selanjutnya, setelah ada tanggapan dari web server, tulisan yang berasal dari web server ditampilkan menggantikan tulisan

“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”.

 

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.