II.1.

4Graphical UserInterface (GUI)

GUI

merupakan

salah

satu

bentuk

pengembangan

dariuserinterface.

Setelahmengalami perkembangan yang pesat, GUI sekarang menjadi salah satu

faktor penting dalam mendisain sebuah aplikasi atau sistem operasi.

Beberapa definisiGraphical UserInterface (GUI) adalah sebagai berikut :

1. Definisi GUI pada buku "Decision Support Sistem", karangan E. Turban
(1995):Graphical

UserInterface

(GUI)

merupakan

sisteminterface

yangmemberikan penggunanya kendali langsung atas objek-objek yang

tampak. Pada GUI, manipulasi informasi dengan mengganti baris-baris
perintah padasource code dipermudah oleh aksi pengguna dan tampilan
pada objek GUI. Pengguna hanya perlu menunjuk atau mengarahkan
pada tampilan visual untuk berinteraksi dengan komputer.
2. Definisi GUI oleh ATIS Committee T1A1 : Sebuah keadaan atau program
pada komputer yang menampilkan atau memfasilitasi tampilan pilihan
yang terdapat pada layar, biasanya dalam bentuk ikon (simbol gambar)
atau menu (daftar karakter alfanumerik) sebagai sarana yang dapat
digunakan oleh pengguna komputer untuk memberikan perintah. Pilihan
dipilih

dengan

menggunakan

perangkat

keras

(misalnya

mouse

ataukeyboard) yang kemudian menggerakkan kursor ke atas ikon atau

menu yang dipilih. Aplikasi yang direpresentasikan oleh ikon atau menu
tersebut kemudian dapat dipilih.
3. Definisi GUI oleh WordNet 2.0 : Sebuahuserinterface yang berdasarkan
bukan pada teks, tetapi pada tampilan grafis (ikon dan gambar);
menggunakan mouse dan keyboard sebagai divais masukan.
4. Definisi GUI oleh The New OXxford Dictionary of English : Sebuah metode
visual untuk berinteraksi dengan komputer menggunakan komponen seperti
jendela, ikon dan menu digunakan oleh kebanyakan system operasi
modern.

II.1.5 Representasi GUI

Komponen penyusun GUI dapat dijelaskan dalam representasi GUI.

Representasi suatu GUI merupakan penjelasan terhadap hal-hal yang menyusun

atau berkaitan dengan suatu GUI. Representasi GUI dibagi ke dalam enam bagian
besar, yaitu object and properties, event, component, event-flow graph,
integration tree, dan event classification.

a. Objects and Properties

GUI merupakan kumpulan dari sejumlah objek dengan karakteristik (property)
tertentu. Contoh dari objek antara lain label, tulisan, tombol, gambar, dan lainlain. Karakteristik merupakan ciri yang membedakan objek yang satu dengan
yang lain. Contoh karakteristik antara lain warna, warna latar, jenis huruf, judul,
dan lain-lain. Dari kumpulan objek dan karakteristik pada GUI, dapat dilihat state
GUI tersebut pada saat tertentu. State pada GUI selalu berubah-ubah, sehingga
pada GUI dapat terdapat beberapa state yang bisa dicapai apabila suatu keadaan
sedang berlangsung. State seperti ini disebut reachable state.
b. Event
Event merupakan fungsi dari suatu state ke state yang lain. Dua event atau lebih
pada GUI dapat digabungkan sehingga diperoleh apa yang disebut event
sequence. Event sequence sendiri terbagi menjadi dua, yaitu legal event sequence
dan illegal event sequence. Legal event sequence merupakan keadaan dimana
suatu event dapat segera dilakukan setelah event yang lainselesai dilakukan.
Sedangkan illegal event sequence merupakan keadaan dimana suatu event tidak
dapat dilakukan pada saat suatu event lain selesai dilakukan.
c. Components
GUI terdiri dari modal jendela dan modeles jendela dan secara hierarkimenyusun
tampilan utama sebuah GUI. Jendela modal merupakan jendela yang setelah
tampil akan membatasi fokus interaksi event yang dapat dilakukan pada GUI.
Sedangkan jendela modeles merupakan jendela yang setelah tampil tidak
membatasi interaksi event yang ada pada GUI. Kumpulan event yang terjadi di
dalam sebuah jendela modal kemudian membentuk komponen dari sebuah GUI.
d. Event-flow Graph
Komponen GUI dapat direpresentasikan dalam bentuk flow graph. Event-flow
graph merupakan gambaran dari semua interaksi yang mungkin dari event-event

yang ada pada suatu komponen.

e.. Integration Tree
Diagram integrasi (integration tree) merupakan diagram yang menggambarkan
interaksi antara komponen pada GUI.
f. Event Classification
Event classification dikelompokan menjadi beberapa bagian sebagai berikut :

event yang tidak berfungsi menampilkan atau menutup jendela yang ada
o Restricted-focus event.
Event ini akan menyebabkan jendela modal ditampilkan.
o Unrestricted-focus event.
Event ini akan menyebabkan jendela modeles ditampilkan.
o Termination event.
o Event ini akan menutup jendela modal yang tampil.

event yang berfungsi untuk membuat beberapa pilihan event lain tersedia
yang umumnya digunakan untuk mengaktifkan menu yang mengandung
beberapa event lain.
o Menu-open event
Event ini digunakan untuk menampilkan menu. Perbedaan menu-open
event dengan restricted-focus event adalah restricted-focus event masih
harus ditutup setelah selesai.
o Sistem-interaction event
Event ini digunakan untuk berhubungan dengan perangkat lunak yang
mendasari GUI untuk melaksanakan suatu tindakan.

II.2.2 script HTML

Pada halaman web HTML dijadikan sebagai bahasa script dasar yang berjalan
bersama berbagai bahasa scripting pemrograman lainnya. Semua tag HTML
bersifat dinamis artinya kode HTML tidak dapat dijadikan sebagai file executable
program. Hal ini disebabkan HTML hanyalah sebuah bahasa scripting yang dapat
berjalan apabila dijalankan di dalam browser (mengakses web), browser-browser
yang mendukung HTML antara lain adalah opera, mozila firefox, internet

explorer, google chrome, dan lain-lain. Jadi pada saat ingin membuka halaman
yang berasal dari HTML anda dapat melihat bentuk pengkodeannya dengan cara
mengklik menu view lalu source, maka di sana akan ditampilkan semua tag
beserta isi dari halaman web tersebut.

Semua bahasa scripting berjalan di bawah web dapat didukung oleh HTML,
biasanya bahsa-bahasa tersebut melakukan embedded script pada tag-tag HTML.
Karena HTML hanyalah sebuah kode scripting dan bukan merupakan program
compiler maka dapat dituliskan semua kode-kode program dengan berbagai editor
seperti Makromedia Dream Wefer, Front Page, Home Side atau juga dapat
menggunakan note pad sebagai standar bawaan windows. Jika menggunakan
linux sebagai system operasi dapat digunakan NC edit, joe, vi sebagai editornya
ataupun kuanta pada GUI nya.

II.2.3 Web Interaksi

Berdasarkan interaksinya web dibagi menjadi dua jenis yaitu web statis dan web
dinamis. Web statis adalah web yang hanya menampilkan informasi kepada
pengunjung dan tidak mengizinkan pengunjung untuk melakukan apapun di
dalam website. Sedangkan web dinamis adalah web yang mengizinkan interaksi
dengan pengunjung. Untuk menciptakan halaman web dinamis dapat digunakan
formulir yang selanjutnya formlir tersebut akan dikirim menggunakan program
aplikasi web berbasis server side menuju databaseserver. Beberapa program
server side yang dimaksud antara lain PHP, ASP, PERL, dan lainnya. Dalam
website form digunakan sebagai media yang dimanfaatkan pengunjung untuk
mengirimkan permintaan ataupun pesan seperti pendaftaran online, email,
pencarian, dan lainnya.

Berikut adalah beberapa bentuk masukan form:

Input yaitu masukan yang berbentuk karakter yang dimasukkan langsung

menggunakan keyboard dngan jumlah yang tidak begitu banyak.

Password adalah bentuk kata yang dirahasiakan untuk menjaga

kerahasiaan data pemilik.

Radio button, menyediakan pilihan yang hanya mengizinkan user untuk

memilih satu pilihan dari pilihan yang ada seperti jenis kelamin.

text area,user diizinkan untuk memasukkan data yang banyak seperti

untuk penulisan pesan.

Tombol digunakan untuk melakukan perintah eksekusi dari komponen

yang dibuat sebelumnya. Tombol dibedakan menjadi tiga yaitu :
o Submit : digunakan untuk mengeksekusi komponen form menuju
halaman pada atribut action
o Reset : untuk mengosongakan data yang telah diisi sebelumnya
o Button : tombol yang memiliki alamat yang sesuai dengan yang
diinginkan

Secara standar bentuk form menggunakan tag<form> dan diakhiri dengan end
tag</form> dengan komponen yaitu,

Input

: digunakan untuk memasukkan komponen formulir

Action

:Atribut action yang berada di dalam tag form digunakan

untuk menentukan alamat di mana data dari komponen form akan

dikirimkan. Pengiriman ini umumnya dialamatkan pada halaman yang
berisi kode program aplikasi seperti PHP, ASP, dan lainnya.

Method : atribut yang digunakan untuk membedakan metoda

pengiriman data, di antaranya :
GET

: pengiriman data ke halaman lain yang tidak berhubungan

dengan halaman selanjutnya

POST : pengiriman data pada halaman lain yang selanjutnya dapat
diproses menuju halaman berikutnya ataupun pengiriman ke
database.
NAME : digunakan untuk memberi nama variabel padaformulir