Paper ID: 163

Metode Pemrograman Frame pada Modul ENC28J60 untuk

Aplikasi miniwebserver AVR
Rizki Priya Pratama1), Panji Peksi Branjangan 2)
Teknik Mekatronika, Politeknik Kota Malang, Jalan Raya Tlowowaru no3
E-mail: 1)xrizkix2000@yahoo.com , 2)panchee_art10@yahoo.com

1,2)

Abstrak - Ethernet merupakan salah satu sistem

komunikasi data yang banyak digunakan pada saat
sekarang ini. Jaringan ethernet yang terhubung
internet memungkinkan bisa berkomunikasi dari jarak
jauh. Dengan sistem komunikasi ini, kita dapat
membuka dunia dengan berbagai aplikasi-aplikasi
baru. Pada mulanya ethernet hanya bisa dilakukan
pada komputer. Namun sekarang,
komunikasi
ethernet ini dapat dilakukan dengan IC yang lebih
hemat energi yaitu AVR dan ENC28j60. Sehingga,
aplikasi-aplikasi sederhana yang dulunya dikerjakan
komputer dapat dilakukan dengan alat ini. Salah satu
contohnya adalah mengendalikan lampu-lampu listrik
dari jarak jauh melalui internet. Pada penelitian
sebelumnya, web server yang dihasilkan dari AVR +
ENC28J60 hanya berisi tulisan-tulisan saja, sehingga
tampilan kurang menarik. Hal ini disebabkan karena
keterbatasan memori dari AVR dan ENC28j60.
Namun dengan metode pemrograman per frame
HTML, masalah ini dapat teratasi.
Kata kunci - AVR, ethernet, ENC28J60, webserver,
frame

1. PENDAHULUAN
Modul ENC28J60 merupakan modul yang banyak
sekali digunakan untuk aplikasi-aplikasi pemrograman
mikrokontroller yang berhubungan dengan aplikasi
ethernet atau internet. Modul ini banyak dijual di
pasaran dengan harga yang relatif terjangkau.
Dengan adanya modul ini, berbagai aplikasi yang
berhubungan dengan kendali atau kontrol melalui
jaringan dapat digunakan. Contohnya
untuk
mengendalikan lampu yang bisa diakses melalui
handphone, laptop, maupun alat elektronik lainnya
yang dilengkapi dengan aplikasi wireless. Sistem
pengendali tersebut dapat berbentuk web server atau
dalam bentuk perintah-perintah. Handphone, laptop,
maupun alat elektronik yang dapat mengakses web
tersebut dapat menghidup dan mematikan lampu.
Web server tersebut ditanam dalam sebuah IC yang

215

disebut AVR. Dengan menggunakan bahasa C,

peneliti ingin menggabungkan HTML dan Javascript
dalam sebuah web yang ditanam dalam memory
program AVR.
Pada
penelitian-penelitian
sebelumnya,
yang
menyangkut komunikasi data TCP /IP yang
menggunakan IC ENC28j60 ini, web yang
ditampilkan belum menggunakan pemrograman
javascrip, sehingga tampilan hanya text saja. Pada
penelitian ini, kami mencoba menyelesaikannya
dengan metode khusus, yaitu menggabungkan HTML
ini dengan Javascrip sehingga tampilannya dapat
dimodifikasi sesuai kehendak pemrogram.[1]
2. TINJAUAN PUSTAKA
2.1 Mikrokontroler Atmega32
Mikrokontroler adalah sebuah sistem komputer
fungsional dalam sebuah chip. Di dalamnya
terkandung sebuah inti prosesor, memori (sejumlah
kecil RAM, dan memori program), dan perlengkapan
input output. Mikrokontroler ini mempunyai masukan
dan keluaran serta kendali dengan program yang bisa
ditulis dan dihapus, cara kerja mikrokontroler
sebenarnya membaca dan menulis data.
AVR atau sebuah kependekan dari Alf and Vegards
Risc Processor merupakan chip mikrokontroler yang
diproduksi oleh Atmel. Atmega32 dapat beroperasi
pada kecepatan maksimal 16MHz.[2]
Arsitektur Atmega32

sebuah file virtual yang merupakan perintah. Dalam

kasus ini adalah switch on (=1) atau switch off (=0).
Switch on:
URL : http://192.168.1.201/?sw=pd1&a=1
Switch off:
URL : http://192.168.1.201/?sw=pd1&a=0

Gambar 1. IC dan pin-pin Atmega32

2.2 ENC28J60 Ethernet Controller

IC ENC28J60 merupakan Ethernet Controller yang
berdiri sendiri yang bisa berkomunikasi melalui
komunikasi SPI dengan mikrokontroller. IC (chips) ini
yang memungkinkan mikrokontroller bisa terhubung
dengan Ethernet LAN, sehingga bisa berkomunikasi
dengan perangkat network lain menggunakan protokol
TCP/IP yang nantinya menjadi sebuah web server
yang diakses dari komputer.[3]

Perintah diatas untuk menghidupkan dan mematikan

PortD1. Perintah di atas harus didekodekan supaya
mikrokontroller dapat mengetahui port mana yang
diperintahkan. Dalam program main.c terdapat fungsi
int8_t analyse_get_url(char *str) yang bertugas untuk
mendekodekan perintah di atas.

Gambar 2. IC plus pin-pin ENC28J60

ENC28J60 memiliki konfigurasi standard agar dapat

berkomunikasi antara webserver dengan media yang
dikontrol menggunakan RJ45.[4]
3. HASIL DAN DISKUSI
Beberapa orang berfikir bahwa web server itu seperti
file server, yaitu komputer yang mengediakan gambar
dan dokumen untuk client / user. Namun pada
penelitian ini, web server yang dimaksud tidak seperti
hal di atas. Web server ini adalah suatu interface yang
menghubungkan lan dengan mikrokontroller AVR
sehingga pengguna dapat mengontrol motor, relay
atau untuk membaca sensor. Untuk keperluan ini kita
tidak perlu menggunakan halaman web yang besar.
Web yang ditampilkan akan berbentuk link untuk
menghidupkan dan mematikan alat. Untuk membuat
web tersebut, HTML menyediakan perintah URL <a
href= untuk link dan form untuk lebih interaktif
dengan mengimplementasikan folder atau file virtual.
Dengan URL ini, kita dapat mengimplementasikan

Sebagai contoh dibawah ini adalah URL

http://192.168.1.201/?sw=pd7&a=0,
yang
akan
didekodekan
dengan
fungsi
int8_t
analyse_get_url(char *str). Pada fungsi tersebut ada
perintah :
if( find_key_val(str,strbuf,STR_BUFFER_SIZE,"sw"))
digunakan untuk melihat ada tidak karakter sw. Jika
ada, maka diseleksi lagi ada tidaknya karakter p dan
d, dengan perintah
if (strbuf[0] != 'p')
dan
if (strbuf[1] != 'd')
Selanjutnya menyeleksi karakter angka
merupakan karakter ASCI [1,2,3,4,5,6,7] yang

yang

mempunyai nilai konversi bilangan hexadesimal

menjadi [0x30, 0x31, 0x32, 0x33, 0x34, 0x35, 0x36,
0x37]. Untuk mendapatkan nilai yang sesungguhnya,
nilai hexadesimal tersebut harus dikurangkan dengan
0x30 sehingga variabel port diisi angka desimal [0-7].
Kemudian diseleksi lagi apakah ada karakter a. Jika

216

ada, dilihat apakah bernilai 1 atau 0. jika a = 1

maka PORTD1 menyalah. Begitu pula sebaliknya.
Pada mikrokontroller AVR, tidak terdapat
sistem operasi. Yang berperan sebagai sistem operasi
adalah while(1){}. Pada saat itu, program akan looping
mengulang-ulang proses, tanpa ada batas.
Untuk pembuatan web, dibutuhkan bantuan
sebuah program ADOBE dreamweaver. Dengan
program dreamweaver ini, kita dapat mencoba
beberapa perintah-perintah HTML sederhana maupun
yang kompleks seperti javascript.
Dengan
javascript,
dimungkinkan
menggunakan fungsi ataupun procedure. Dengan
fasilitas ini, diharapkan programmer
dapat
mengurangi beberapa perintah yang sama menjadi
suatu fungsi atau procedure. Oleh karena itu, dengan
fungsi pada javascript, kita bisa menghemat berberapa
perintah pada frame utama. Instruksi yang digunakan
berulang-ulang dapat diringkas menjadi sebuah
instruksi pendek yang dipanggil seperti fungsi dalam
bahasa C. Tentu ini akan menghemat pemakaian byte
yang sangat terbatas pada AVR. Sebagai contoh
instruksi berikut.

Jika kode yang dituliskan sudah akan mencapai

kurang lebih 1300 karakter, maka tampilan webnya
tidak bisa dibuka. Itu disebabkan karena TCP / IP
stack pada IC ENC28j60 hanya menampung 1300
karakter saja, termasuk karakter yang tidak bisa dilihat
dan alamat IP, Mac Address.
Untuk membuat sebuah web yang bagus dan menarik,
diperlukan jumlah karakter yang tidak sedikit. Sintaks
yang dibuat pada dremweaver ini, tidak bisa langsung
dimasukkan semua. Kita harus mempunyai metode
khusus untuk mengatasi hal ini.
Seperti yang telah dijelaskan diatas bahwa karakter
yang ditampung pada satu frame hanya 1300 saja.
Namun, dengan suatu metoda, kita bisa memanggil
frame-frame yang lain dari frame utama. Isi dari
frame-frame tersebut adalah fungsi / procedure
javascript yang dapat dipanggil antar frame. Jika
karakter frame utama telah penuh, kita bisa
menggunakan frame yang 1. Jika frame 1 telah penuh,
kita bisa menggunakan frame yang kedua. Misal
fungsi_A terdapat pada frame 2, kita bisa memanggil
fungsi_A tersebut dari frame 1 atau frame utama.
Pada frame 1, terdapat kumpulan fungsi yang mana
fungsi tersebut dipanggil pada frame utama. Saat
kepasitas karakter frame 1 habis, fungsi-fungsi yang
lain dapat ditambahkan pada frame kedua.

Diringkas menjadi instruksi seperti di bawah ini:

Script program yang telah kita buat tadi

dengan dreamwever, seperti gambar dibawah ini,
dapat diimplementasikan pada pemrograman AVR

Fungsi-fungsi ini dibuat dengan bahasa javascript.

Pembuatan nama fungsi tersebut, dibuat sesingkat
mungkin dan hanya pembuat program yang mengerti
maksudnya. Tujuannya adalah penghematan karakter.
Jika kapasitas frame 1 sudah mencapai batas, maka
penulisan program dilanjutkan pada frame 2.
Berikut ini gambar hubungan antar frame.

Tanda pada HTML, ditambahkan \ . Sehingga pada

pemrograman bahasa C di AVR menjadi :
plen=fill_tcp_data_p(buf,plen,PSTR("<div
style=\"width:400px\">"));

Gambar 3. Koneksi antara frame utama dengan frame-frame

yang lain.

plen=fill_tcp_data_p(buf,
plen,PSTR("<div style=\"backgroundcolor:#FFA500;\">"));
plen=fill_tcp_data_p(buf,plen,PSTR("<h1>Mini Web
Server AVR</h1></div>"));

217

Sebagai contoh pada frame utama, perintah yang kita

panggil adalah dwdiv_nbc(400,130).
Perintah ini terdapat pada frame 1, yaitu :

Keluarga, K. Mandi dan R. Makan berwarna hijau

bertanda bahwa sinyal dari AVR berlogika 1 untuk
mengaktifkan relay, sesuai dalam gambar 6.

function dwdiv_nbc(h,w){dw("<div
style=\"height:"+h+"px;width:"+w+"px;float:left;\"
>");}

Yang sebernanya, jika kita tulis dalam format HTML:

<div style="height: 400 px; width:130px ;float:left">
Dengan menulis dwdiv_nbc(400,130), kita bisa
menghemat pemakaian karaker yang dituliskan pada
frame utama. Sehingga, jika terjadi pemanggilan
fungsi ini berulang-ulang pada frame utama, karakter
yang kita ketikkan tidak banyak. Cukup dwdiv_nbc,
tidak perlu menulis semua sintaks HTML secara
penuh.

Gambar 6. Tampilan saat web berjalan dan dan frame 2

ditampilkan

4. Kesimpulan
Saat pengujian, program dapat dapat berjalan dengan
baik tampak seperti gambar dibawah ini. Web server
telah dapat ditampilkan pada browser mozila.
Web dapat menampilkan denah rumah sederhana.
Dengan menekan ctr + U, akan tampak script
program pada frame utama. Kemudian, tekan j1.js
akan muncul tampilan seperti dalam gambar 5.

Setelah melakukan pengujian dan analisa, maka dapat

diambil beberapa kesimpulan tentang sistem kerja dari
sistem yang telah dibuat, sebagai berikut ; IC
ENC28J60 merupakan salah satu IC lan yang murah
dan mudah digunakan untuk aplikasi-aplikasi
sederhana yang berhubungan dengan aplikasi ethernet.
Kapasitas dalam satu frame yang dapat ditampung
adalah 1300 karakter. Dengan metode pemrograman
frame ini, kapasitas ENC28J60 yang terbatas dapat
diatasi.
REFERENSI
[1] Priya Pratama, Rizki, 2012. Rancang Bangun Sistem
Otomatis pada Rumah dengan Miniwebserver
berbasis AVR, Laporan Penelitian, Program Studi
Teknik Mekatronika, Politeknik Kota Malang.
[2] _______________,
ATMEGA32
Data
Sheet,
ATMEL, 2008.
[3] _______________, ENC28J60 Data Sheet, Microchip,
2008.
[4] Socher, Guido, Using the tuxgraphics embedded web
server
to
control
scientific
equipment,
http://tuxgraphics.org/ electronics /200904/embeddedwebserver-equipment-control.shtml, (diakses tanggal
10 September 2012)

Gambar 4. Tampilan saat web berjalan dan frame utama

ditampilkan

Gambar 5. Tampilan saat web berjalan dan dan frame 1

(j1.js) ditampilkan

Jika di-klik R.Keluarga, K.Mandi dan R.Makan akan

tampak seperti pada gambar dibawah ini. Kolom R.

218