Web arduino-OK

Arduino : Database MySQL + Ethernet Shield ENC28J60

Di artikel ini kita akan membahas suatu hal yang baru, yaitu mengenai pemograman, bagi yang belum mengetahui admin blog ini jurusannya informatika loh, postingannya aja ada yang berhubungan tentang mata kuliah informatika, walaupun cuman buat download materi aja sih, tanpa pembahasan materi langsung, saya harap tetap bermanfaat.

Kodingan yang akan kita bahas kali ini adalah tentang arduino dan sesuai judul saya lebih memfokuskan ke pembuatan database pada perangkat Ethernet yang menggunakan chip  ENC28J60. Hal ini dilatar belakangi karena belum ada ide judul lain sekaligus membantu sobat yang lagi kesulitan membuat database dengan chip Ethernet ENC28J60, kesusahan yang saya alami ada pada documentasi source codenya yang harus meraba-raba, diinternet kita hanya diberikan contoh program dari Ethernet ENC28J60, lalu untuk memahaminya kita harus mengindetifikasi kegunaan fungsi-fungsi kodingan yang ada didalamnya dengan bereksperimen, untuk memastikan sobat berkunjung ke tutorial yang tepat inilah bentuk perangkat ENC28J60 yang saya maksud.

Bahan-bahan yang perlu diperhatikan sebelum mengikuti tutorial ini adalah.

1. Komputer dengan OS windows.
2. Sudah install xampp, text editor(php, html, javascript), dan IDE arduino (klik kalau mau download).
3. Ethernet dengan chip ENC28J60.
4. Arduino board (diutakan yang UNO).
5. Kabel Jumper Male-Female.
6. Kabel LAN/UTP.
7. Kapel printer buat upload source code ke arduino.
8. Koneksi internet buat cari solusi(opsional).

Pertama utntuk mengoneksikan ke database tentunya terlebih dahulu kita harus menghubungkan ENC28J60 ke Arduino dengan aturan sambungan seperti gambar dibawah ini. Tanda panah merah yang saya taruh pada gambar dibawah merupakan tanda bahwa kolom Arduino Uno bisa diganti dengan nilai lain yang berwarna merah digambar, hal tersebut dilakukan jika Ethernet Shieldnya masih belum berfungsi setelah dikoneksikan ke komputer.

Masih belum jelas juga?? sobat bisa melihat video youtube dibawah ini.

 

Setelah merakit Ethernet ENC28J60 dengan Adruino, selanjutnya kita perlu mendownload library dari Ethernet ENC28J60 pada situs Jeelab.org, supaya library tersebut dikenali oleh aplikasi IDE adruino, ekstrak terlebih dahulu lalu letakkan folder ethernet tersebut di Document-> Arduino -> Library.

Cek terlebih dahulu apakah library tersebut terbaca oleh IDE arduino dikomputer sobat dengan membuka aplikasi IDE arduino lalu klik file-> example -> dan scrool ke bagian paling bawah yang merupakan kumpulan library tambahan, jika ada nama yang sama dengan nama folder yang baru dipindahkan tadi maka dalam tahap ini sobat sudah berhasil.

Sekarang waktunya untuk uji coba perangkat Ethernetnya, untuk itu siapkan contoh source codenya terlebih dahulu, kita akan menggunakan rbbb_server untuk contohnya, contoh ini juga akan menjadi source code yang akan kita modifikasi nantinya agar bisa terhubung ke database. Cara membukanya hampir sama dengan yang tadi, sobat tinggal mengarahkan ke library Ethernetnya dan pilih rbbb_server.

Setelah contoh rbbb_server terbuka maka source codenya akan persis dengan gambar dibawah ini, bisa sobat lihat digambar bahwa yang ditunjuk dengan panah merah tersebut adalah alamat yang akan di masukkan di alamat browser internet nantinya.

Setelah itu pastikan arduino sobat sudah terhubung dengan komputer menggunakan media kabel printer yang sudah kita siapkan tadi, dan portnya sudah dipilih/dicentang, hal-hal kecil seperti ini bagi para programer jangan dilupakan karena bisa pusing sendiri. untuk memilih port sobat pilih menu di atas Tools -> Port, atau lihat gambar dibawah ini, jika semua sudah, klik upload.

Sekarang tinggal menghubungkan Ethernet ENC28J60 ke komputer dengan menggunakan kabel LAN/UTP, jangan senang dulu, karena kita tidak menggunakan DHCP maka harus mensetting Ip Address secara manual di pengaturan windows.

Cari setingan network seperti diatas, lalu klik Ethenet -> Properties

Cari tulisan internet Protocol Version 4 (TCP/IPv4) lalu klik properties, lalu akan muncul seperti gambar dibawah ini.

Setelah itu jangan lupa terlebih dahulu pilih Use the following IP Address untuk bisa mengedit ip address, isi IP address dengan 192.168.1.n dan Subnet mask 255.255.255.0, untuk n bisa diganti dengan angka 1 sampai 255 kecuali 203 karena kalau kita ingat-ingat 203 adalah alamat server yang terdapat pada source code arduino diatas, ketikkan alamat server(192.168.1.203) pada url browser sobat.

Jika berhasil maka akan tampil seperti gambar diatas, selanjutnya kita akan membahas pembuatan databasenya, dari source code rbbb_server di modifikasi lagi dan digabung dengan sensor-sensor lainnya menjadi seperti gambar dibawah ini.



Source code diatas cukup panjang, tetapi karena kita membahas databasenya saja maka kita akan membahas pada function homepagenya saja.

Jika sobat pernah belajar html, javascript pasti akan lebih banyak mengerti dari source code yang ditampilkan diatas, jika belum mohon maaf di tutorial ini kita tidak akan menjelaskannya secara lengkap.

Dari gambar yang ditampilkan terlihat bahwa ada nilai yang sudah saya tandai yaitu a, b, dan nilaiLDR. Jika sobat sudah belajar bahasa pemograman c++ maka akan mengetahui aturan pengisian ini, $D adalah tanda untuk variable bilangan bulat yang akan dimasukkan/ditampilkan sedangkan untuk variable yang akan digunakan akan di kenalkan diakhirnya.

Aturan pengenalan variable sama dengan c++ yaitu dengan menyusunnya sesuai urutan, jika dilihat pada gambar dan source code dibaca dari kiri kekanan maka urutan yg saya beri tanda(warna merah) sesuai dengan urutan variable pada akhir code string html. Sekarang terserah sobat memodifikasi html dan variable yang diperlukan pada project sobat masing-masing.

CATATAN
Sebelum melanjutkan ke penjelasan selanjutnya, sebaiknya sobat menghidupkan XAMPP Apache dan Mysql terlebih dahulu, karena semua source code dibawah ini akan diakses melalui media server. dan semua file source code harus diletakkan pada xampp->htcdocs.

Selanjutnya kita akan membahas metode input data ke database yang saya gunakan yaitu menggunakan javascript, dari gambar sebelumnya telah terdapat "<script src='http://localhost/mikro/database.js'></script>" yang memanggil script yang terlihat dibawah ini .

Dalam pemograman web, metode diatas bernama ajax(Asynchronous JavaScript and XMLHTTP) yang berfungsi untuk mengambil/mengirim data ke suatu halaman web yang berbeda tanpa melakukan reload page. Untuk memakai source code ajax ini saya menggunakan jquery, jadi jika sobat memakai source code diatas sebagai referensi jangan lupa juga menyertakan script jquerynya juga.
Membahas sedikit tentang source code diatas

• $(‘.temp’) = menunjuk class temp pada html.
• data(‘suhu’)= mengambil data data-suhu pada html
• url: 'http://localhost/mikro/index3.php= alamat halaman yang ingin dikirimkan data.
• ‘temp’ : e=data yang dikirim ke halaman lain, an nanti bida diakses dalam bentuk indeks array.

Cara kerja secara singkat adalah, setiap meload halaman maka script pada gambar diatas akan dijalankan, supaya berjalan sesuai rencana maka script harus diletakkan pada bagian bawah body agar saat script dijalankan bagian body yang ada diatasnya(yaitu berupa data) sudah terload dan bisa diambil datanya.

Url pada javascript ajax diatas menuju file index3.php maka kita kan membahasnnya sekarang, source code index3.php terlihat seperti gambar dibawah ini.

Langsung saja saya akan membahas sedikit bagian source code index3.php.

• date_default_timezone_set berguna untuk mengatur waktu lokal ke asia/jakarta.
• $tem=$_POST['temp'] = seperti yang sudah kita ketahui pada penjelasan bagian script ajax diatas, kita mengirim data dengan nama ’temp’ dengan type POST maka kita bisa mengambil nilainya dengan PHP dengan cara ini. 

Sampai sini kita sudah belajar bagaimana menyimpan data dari adruino ->ENC28J60-> database Mysql (laptop), sekarang kita akan belajar lagi untuk mengambil data dan menampilkannya dalam bentuk graphic dilayar, sobat bisa lihat tampilan akhirnya seperti gambar dibawah ini.

Dalam pengambilan data dari database saya membutuhkan 2 file php yang masing-masing bertugas mengambil data dari tabel yang berbeda, 1 file html, dan 1 file javascript, source code php yang pertama bisa dilihat pada gambar dibawah ini.

Penjelasan singkat source code:

• Baris 3 bertujuan untuk menginialisasi sebuah variable bertipe array;
• Pada baris 9 merupakan query yang bertujuan mengambil data berdasarkan tanggal dibuat dengan aturan data yang terbaru terlebih dahulu dan dibatasi hanya 122 data saja.
• Baris 12-14 mengisi array dengan data-data yang sudah kita dapatkan dari hasil eksekusi query baris 9.
• Baris 15 echo disini nantinya berfungsi sama dengan return yaitu mengembalikan nilai saat file php ini dipanggil, untuk memastikannya sobat bisa ganti echo dengan return, dan lihat hasilnya(saya belum coba).

Source code php yang kedua.

Karena hampir sama dengan sebelumnya jadi sepertinya tidak ada yang perlu dijelaskan lagi dari source code diatas, mari kita lanjutkan lagi dengan file javascript yang bertugas menampilkan grafik monitoring di browser.

Javascript diatas terlihat begitu panjang jadi saya akan membahas intinya saja, kode diatas bertujuan mengambil data bukan mengirim, ada 2 pengambilan data disana, karena kita sebelumnya membuat 2 file php, jadi pengambilan datanya juga 2 kali(dengan ajax). pengambilan data yang kedua berjalan saat pengambilan data yang pertama success terlihat dengan ditaruhnya ajax yg kedua didalam kurung kurawal { } success ajax pertama. 

Pada javascript ini fungsi akan dijalankan pada setiap 1000ms/1 detik sekali dengan cara menaruh fungsi-fungsi di dalam fungsi setInterval, yang bertujuan agar grafik yang ditampilkan selalu realtime/berjalan tanpa harus meload halaman, source code untuk menampilkan grafik tersebut ada pada success ajax yang kedua dan berakhir saat grafik di render pada baris 80, plugin grafik yang saya gunakan disini adalah canvasJS yang dokumentasinya bisa sobat baca disini.

Selesai sudah artikel cara membuat database dengan Ethernet Shield ENC28J60, mohon maaf karena artikelnya dirasa kurang begitu menjelaskan secara rinci source codenya, selain alasan saya malas menulisnya, ini bertujuan agar sobat bisa mengidentifikasi sendiri referensi source code yang saya berikan, harapan saya bisa memodifikasinya menjadi algoritma lain yang lebih baik lagi, dan jika berhasil jangan lupa berbagilah di kolom komentar agar semua orang yang memerlukan bisa terbantu. Sekian terima kasih...

Download Kodingan Lengkap