BAB 1

User Interface Aplikasi Web Stateful dan

Pengamanan Data Pada Aplikasi Web

A. User Interface Basis Data pada Halaman Web

User Interface mencakup perangkat keras dan perangkat lunak. User Interface hadir
untuk berbagai sistem dan menyediakan cara input di mana pengguna dapat
memanipulasi sebuah sistem dan output di mana sistem menunjukkan efek dari
manipulasi pengguna. User interface (UI) dalam teknologi informasi identik dengan
segala sesuatu yang dirancang menjadi sebuah perangkat informasi sehingga seseorang
dapat melakukan sebuah interaksi dengan komputer dengan mudah dan sederhana. Media
yang dapat digunakan pengguna untuk berinteraksi dengan aplikasi atau situs web di
antaranya dapat berupa tampilan layar, keyboard, mouse, dan penampilan desktop.

Gambar 1.2 User Interface

1. Konsep User Interface dalam Program Aplikasi

Mengonsep user interface yang tepat bukan perkara yang mudah dilakukan, sebab
terdapat banyak aspek yang perlu diperhatikan. User interface akan mengacu pada
beragam aplikasi teknologi mulai dari electronic display, software aplikasi komputer,
aplikasi web, aplikasi mobile, hingga aplikasi informasi publik. Aplikasi informasi publik
identik dengan peralatan sistem informasi publik yang dirancang sedemikian rupa yang
ditujukan untuk beragam kondisi user, baik secara usia, gender, latar belakang kultural,
tingkat pemahaman, pendidikan, maupun kondisi keterbatasan fisik yang berbeda.

a. Kualitas Desain User Interface

Desain user interface (UI) atau rekayasa antarmuka pengguna adalah desain dari
user interface untuk mesin dan perangkat lunak, seperti komputer, peralatan rumah,
perangkat mobile, dan perangkat elektronik lainnya, yang fokus memaksimalkan
kegunaan dan pengalaman pengguna. Tujuan dari desain antarmuka pengguna adalah
membuat interaksi pengguna yang sederhana dan seefisien mungkin, dalam hal
mencapai tujuan pengguna. Kualitas yang diperhatikan dalam desain user interface
pada tabel berikut.
Tabel 1.1 Kualitas yang Diperhatikan dalam Desain User Interface

No. Kualitas Keterangan

1. Concision Membuat Antarmuka yang hebat adalah untuk
membuatnya ringkas dan jelas pada saat yang sama.
2. Kejelasan interface Menghindari ambiguitas dengan membuat segalanya
jelas melalui Bahasa, aliran, hierarki dan metafora
untuk elemen visual.
3. Familiarity Unsur-unsur tertentu dalam kehidupan sehari-hari
masih sangat lekat pada pengguna. Metafora
kehidupan nyata dapat digunakan untuk memudahkan
pengguna dalam menggunakan interface.
4. Estetika Membuat interface terlihat bagus akan membuat
waktu pengguna senang dan nyaman dalam
menggunakan interface.
5. Responsiveness Antarmuka harus bisa memberikan umpan balik yang
baik kepada pengguna tentang apa yang terjadi dan
apakah masukan pengguna sedang berhasil diproses.
6. Consistency Menjaga interface menjadi konsisten di seluruh
aplikasi adalah suatu hal yang penting karena
 memungkinkan pengguna untuk mengenali pola
penggunaan.
7. Forgiveness Sebuah interface yang baik tidak harus menghukum
pengguna atas kesalahan mereka lakukan, akan tetapi
seharusnya menyediakan sarana untuk memperbaiki
kesalahan tersebut.
8. Efficiency Time Interface yang baik harus bisa membuat pengguna
lebih produktif melalui jalan pintas dan desain yang
baik.

b. Tipe-Tipe User Interface

Sementara itu, tipe-tipe user interface dapat dilihat pada table 1.2 berikut.
Tabel 1.2 Tipe User Interface

No. Jenis Keteranga

1. Graphical User Saat ini, interface yang banyak digunakan dalam
Interface (GUI) software adalah GUI (Graphical User Interface)
2. Command-Line Command-Line Interface (CLI) adalah tipe
Interface (CLI) antarmuka dimana pengguna berinteraksi dengan
system operasi melalui text terminal. CLI adalah
sebuah bentuk antarmuka antara system operasi dan
pemakai dimana pemakai mengetikkan perintah-
perintah dengan menggunakan perintah dalam bentuk
teks dan sebuah metode untuk memasukinya.
3. Touchscreens Menerima masukan dengan sentuhan jari.
4. Gesture interfaces UI Grafis yang menerima input dalam bentuk
Gerakan tangan atau Gerakan mouse sketsa dengan
mouse komputer.
5. Direct manipulation Antarmuka pengguna yang memungkinkan pengguna
interface untuk memanipulasi objek yang disajikan kepada
mereka.
 6. Search Interface Sebuah kotak pencarian situs ditampilkan serta
merepresentasikan visual dari hasil pencarian.
7. Voice User interface Komponen yang menerima masukan dan memberikan
output dengan menghasilkan perintah suara. Input
pengguna dibuat dengan menekan tombola atau
menanggapi secara lisan antar muka.
8. Natural-language Digunakan pada mesin pencarian dan pada halaman
interfaces Web. Jenis penggunaan adalah dalam bentuk
pertanyaan dan menunggu tanggapan.

c. Teknik User Interface

Ada tiga teknik antarmuka (interface), yaitu Linguistic styles, Key modal styles, dan
Direct manipulation styles. 1) Teknik Linguistic Styles
1) Teknik Linguistic Styles
Linguistic styles identik dengan penyampaian "aksi" melalui bahasa yang
dimengerti oleh komputer. Beberapa ciri teknik jenis ini, seperti menggunakan
bahasa yang dimengerti oleh komputer sebagai bagian kecil dari bahasa manusia,
memasukkan aksi melalui papan ketik alfabet yang ditulis atau diketik, serta
adanya aturan penulisan (syntax) dan semantic untuk menyatakan perintah.
2) Teknik Key Modals Styles
Key modals style identik dengan penyampaian aksi melalui penekanan
tombol-tombol yang diprogram sebelumnya untuk menjalankan fungsi-fungsi.
Beberapa ciri teknik jenis ini, seperti menggunakan instruksi langkah demi
langkah, input aksi melalui tombol fungsi atau tombol alfabet, serta digunakan
dalam sistem berjalan.
3) Teknik Direct Manipulation Style
Direct manipulation style identik dengan penyampaian perintah melalui
manipulasi objek tertentu. Beberapa ciri teknik jenis ini, seperti ditampilkannya
penunjuk untuk memanipulasi objek, ditampilkannya objek untuk interaksi
pengguna, respons seketika
 Gambar 1.3 Teknik User Interface

2. Rancang Bangun User Interface

Standar desain user interface telah dikembangkan sejak tahun 1980-an untuk
menentukan kegunaan dari produk perangkat lunak. Salah satu basis struktural telah
menjadi model referensi antarmuka IFIP. Model ini mengusulkan empat dimensi untuk
struktur antarmuka pengguna dalam lingkup input/output dimensi, dialog dimensi,
dimensi teknis atau fungsional, serta dimensi organisasi. Model ini sangat memengaruhi
perkembangan standar internasional ISO 9241 yang menjelaskan persyaratan desain
antarmuka untuk kegunaan terentu. Desain grafis dan tipografi digunakan untuk
mendukung kegunaannya, memengaruhi cara pengguna melakukan interaksi tertentu dan
meningkatkan daya tarik estetika desain. Desain estetika dapat meningkatkan atau
mengurangi kemampuan pengguna untuk menggunakan fungsi antarmuka.

a. Memilih Interface Elements

Melakukan hal ini akan membantu penyelesaian tugas, efisiensi, dan
menambah kepuasan user. Ada kalanya beberapa elemen sekaligus sesuai untuk
display konten. Ketika hal tersebut terjadi, perlu mempertimbangkan penggunaan
trade-off. Berikut ini beberapa bentuk elemen interface.
 1) Komponen navigasi yang terdiri atas breadcrumb, slider, kolom pencarian,
pagination, slider, tag, dan icons
2) Input control yang terdiri atas tombol, teks field, checkbox, radio button,
daftar dropdown, daftar kotak, toggles, dan date field
3) Containers yang salah satunya adalah accordion
4) Komponen informasi yang terdiri atas tooltips, ikon, progress bar, notifikasi,
kotak pesan, dan modal window

b. Merancang Interface
Pada intinya, merancang interface adalah mengetahui sifat user, termasuk
pemahaman mereka, tujuan, skill, preferensi, dan kecenderungan pemilihan
elemen secara umum. Setelah mengetahui karakteristik dari user, terdapat
beberapa hal yang perlu dipertimbangkan ketika merancang interface sebagai
berikut.
1) Menciptakan konsistensi dan menggunakan elemen Ul umum
Dengan menggunakan elemen umum di UI, pengguna merasa lebih nyaman
dan mampu menyelesaikan sesuatu lebih cepat. Hal ini juga penting untuk
membuat suatu pola dalam bahasa, tata letak, dan desain di seluruh situs untuk
membantu memfasilitasi efisiensi. Setelah pengguna belajar cara melakukan
sesuatu, mereka harus mampu beradaptasi dan terbiasa dengan interface
tersebut di semua bagian site lainnya.
2) Menjaga antarmuka yang sederhana
Interface terbaik hampir tidak terlihat oleh pengguna. Mereka menghindari
elemen yang tidak perlu dan harus terstruktur dengan bahasa yang jelas pada
label dan di pesan interface.
3) Strategi menggunakan warna dan tekstur
Anda dapat mengarahkan perhatian user dari dan ke item tertentu
menggunakan warna, cahaya, kontras, dan tekstur untuk tujuan tertentu.
Gunakan tipografi untuk membuat penjernihan dan kejelasan. Hati-hati dalam
memilih metode untuk membentuk sebuah gambaran tertentu. Berbagai
ukuran, font, dan pengaturan teks yang tepat dapat membantu meningkatkan
scanability dan mudah dibaca user.
 4) Page layout harus dipertimbangkan berdasarkan suatu tujuan tertentu
Pertimbangkan spasi antara item pada halaman dan struktur halaman
berdasarkan kepentingan dan tujuan. Penempatan item yang terencana dapat
membantu menarik perhatian langsung ke bagian yang paling penting dari
informasi dan dapat membantu scanning dan mudah dibaca oleh user.
5) Pikirkan tentang default
Secara teliti, pikirkan dan antisipasi adanya user yang kebingungan saat tidak
sengaja mengutak-atik konfigurasi, Anda dapat membuat default yang
mengurangi kepanikan pada user.
6) Pastikan bahwa sistem berjalan sesuai dengan apa yang terjadi saat itu juga
Selalu menginformasikan pengguna Anda tentang (misalnya) lokasi, suatu
tindakan sistem, perubahan di negara bagian, atau kesalahan. Penggunaan
berbagai elemen UI untuk menginformasikan status terkini dapat bermanfaat
menambah informasi bagi user.

c. Tipe-tipe Interaksi Antarmuka (Interface)

Pemilihan tipe interaksi yang tepat dapat memberikan efek yang baik
terhadap dialog, di antaranya sebagai berikut. 1) Command Line Interface (CLI)
1) Command Line Interface (CLI)
Command Line Interface (CLI) merupakan bentuk dialog interaktif yang
pertama digunakan dan masih dipakai hingga saat ini. Dengan CLI, user
memberikan instruksi secara langsung kepada komputer menggunakan
tombol fungsi, karakter tunggal, serta command dalam bentuk singkat maupun
panjang. CLI memungkinkan user mengakses dengan cepat fungsi sistem dan
beberapa tools.
2) Menu
Pada menu-driven interface, sekumpulan opsi/pilihan yang tersedia bagi
user ditampilkan pada layar dan dapat dipilh dengan menggunakan mouse atau
tombol numerik maupun alfabetik. Pilihan pada menu harus
merepresentasikan arti dan dikelompokkan berdasarkan suatu kategori agar
mudah dikenali dan memudahkan user memilih sesuai dengan tugas yang akan
dilaksanakan.
3) Natural language
Natural language merupakan mekanisme komunikasi yang atraktif.
Umumnya, komputer tidak dapat mengerti instruksi yang dituliskan dalam
bahasa sehari-hari. Natural language dapat mengerti input tertulis (written
input) dan suara (speech input). Namun, masih ada kekurangan dalam hal
ambiguity (kerancuan) pada aspek sintaksis dan semantik.
4) Q/A & query dialogue
Q/A & query dialogue merupakan mekanisme sederhana untuk input pada
beberapa aplikasi. User diberikan serangkaian pertanyaan yang umumnya
dalam bentuk jawaban ya/tidak (Y/N), pilihan ganda, atau dalam bentuk kode,
dan dibimbing tahap demi tahap selama proses interaksi. Interface ini mudah
dipelajari, namun terbatas fungsinya.
5) Form-fills and spreadsheet
Form-fill utamanya digunakan untuk aplikasi pemasukan (data entry) dan
pencarian (data retrieval) data. Bentuk form-fill adalah berupa display yang
menyerupai selembar kertas dengan beberapa slot/field untuk diisi.
Spreadsheet adalah variasi dari form-fill. Spreadsheet terdiri atas sel yang
dapat berisi nilai atau formula.
6) WIMP interface (Windows, Icons, Menu, Pointers)
WIMP merupakan default interface untuk sebagian besar sistem komputer
interaktif yang digunakan saat ini terutama pada PC dan desktop workstation.
Window merupakan area layar yang berperilaku seperti terminal independent
dan berisi grafik atau teks yang dapat dipindahkan dan diubah ukurannya.
Icon merupakan sebuah gambar kecil yang digunakan untuk
merepresentasikan windows yang sedang berada dalam keadaan tertutup
(closed). Window dapat diaktifkan/diperbesar dengan mengeklik icon yang
bersangkutan. Menu adalah teknik interaksi yang umum digunakan bahkan
oleh sistem non-window sekalipun. Menu menampilkan pilihan operasi atau
layanan yang diberikan/ tersedia oleh sistem. Pointer merupakan komponen
yang penting dalam sistem WIMP karena interaksi pada sistem ini
memerlukan aktivitas menunjuk (pointing) dan memilih (selecting). User
 diberikan cursor pada layar yang dapat dikendalikan oleh peralatan input,
seperti mouse, joystick, ataupun trackball.

d. Bahssa dalam User Interface

Meskipun panduan user interface umumnya menyarankan agar ikon tidak
diberi tulisan supaya tetap mandiri dari bahasa, namun elemen user interface lain
seperti teks pada tombol, caption window, atau teks-teks singkat di sebelah kotak
input dan tombol pilihan semua menggunakan bahasa. Tanpa bahasa pun kadang
ikon bisa tidak jelas maknanya karena tidak semua lambang ikon bisa bersifat
universal. Tujuan sebuah user interface adalah mengomunikasikan fitur-fitur
sistem yang tersedia agar user mengerti dan dapat menggunakan sistem tersebut.
Dalam hal ini, penggunaan bahasa amat efektif untuk membantu pengertian
karena bahasa merupakan alat tertua yang dipakai orang untuk berkomunikasi
sehari-harinya. Praktis semua pengguna komputer dan interface dapat mengerti
tulisan. Lebih dari itu, dalam dunia desain situs web yang serba grafis, bahasa
sering menjadi sesuatu yang nomor dua daripada elemen-elemen interface
lainnya.

e. Tujuan Perancangan Antarmuka Pengguna (User Interface)

Tujuan dari perancangan natarmuka pengguna adalah merancang interface
yang efektif untuk system perangkat lunak. Saat ini interface yang banyak
digunakan dalam software adalah GUI ( Graphical User Interface). GUI
memberikan keuntungan sebagai berikut.
1) Gampang dipelajari oleh pengguna yang pengalaman dalam menggunakan
komputer cukup minim.
2) Berpindah dari satu layer ke layer tanpa kehilangan informasi dimungkinkan.
3) Akses penuh pada layar dengan segera untuk bebberapa macam
tuags/keperluan.
 Table 1.3 Beberapa Karakteristik GUI

No. Karakteristik Keterangan

1. Window Beberapa window dapat ditampilkan informasi-
informasi beberapa sekaligus pada layer
2. Icon Mewakili informasi yang beerbeda seperti icon untuk
file, icon folder atau icon untuk program tertentu
3. Menu Menawarkan perintah-perintah yang disusun dalam
menu tanpa harus mengetik.
4. Pointing Alat petunjuk seperti mouse untuk memilih pilihan
pada layar
5. Graphic Gambar yang dicampur dengan teks pada display
yang sama untuk menyajikan informasi

Proses perulangan yang terjadi menjelaskan bahwa proses-proses tersebut

dilakukan hingga menghasilkan desain yang diinginkan. Desain harus bersifat user-
centered, artinya pengguna sangat terlibat dalam proses desain. Oleh karena itu, ada
proses evaluasi yang dilakukan oleh pengguna terhadap hasil desain sebagai berikut.

Bagan 1.1 Proses evaluasi yang dilakukan oleh pengguna terhadap hasil desain
3. Program User Interface Sederhana
Kunci dari sebuah desain antarmuka (user interface) website atau aplikasi yang
bagus atau menarik adalah kemudahan pengguna dalam menggunakannya. Informasi bisa
bersifat statis atau dinamis ketika disajikan, masing-masing baik dengan karakteristik
yang berbeda dan kebutuhan yang berbeda pula.

No. Karakteristik Keterangan

1. Static a. Disajikan dengan jenis huruf khusus yang
information mudah dibaca atau diberi highlight dengan
warna tertentu atau menggunakan icon yang
mewakili
b. Ditentukan saat awal sesi. Tidak berubah selama
sesi berjalan.
c. Bisa berupa informasi numeris atau teks Chart di
MS-Excel.
2. Dynamic a. Bisa berupa informasi numeris atau teks.
information Contoh: defragmentation, scanning virus, atau
download
b. Perubahan terjadi selama sesi berlangsung dan
perubahan harus dikomunikasikan/ditunjukkan
ke user

4. Aplikasi User Interface untuk Mengelola Basis Data

Database merupakan komponen dasar dari sebuah sistem informasi dan
pengembangan serta penggunaannya sebaiknya dipandang dari perspektif kebutuhan
yang lebih besar. Oleh karena itu, siklus hidup sebuah sistem informasi organisasi
berhubungan dengan siklus hidup sistem database yang mendukungnya. DBMS
(Database Management System) adalah sistem yang secara khusus dibuat untuk
memudahkan pemakai dalam mengelola basis data. Definisi lainnya, Database
Management System adalah software yang mengizinkan penggunanya untuk membuat,
mengakses, dan mengatur sebuah database.
a. Pengujian Aplikasi Web
Pengujian (testing) identik dengan instrumen penting dalam pengembangan
aplikasi web untuk mendapatkan produk yang berkualitas dan seperti yang
diharapkan oleh pengguna. Testing sebagai sebuah aktivitas untuk mengevaluasi
kualitas dari sebuah produk dan untuk memperbaiki produk dengan mengidentifikasi
kerusakan serta masalahnya. Kesalahan (error) terjadi jika hasil dari jalannya testing
tidak sama dengan hasil yang diharapkan. IEEE standar 610.12-1990 menyatakan
bahwa error identik dengan perbedaan antara nilai atau kondisi yang dihitung,
diobservasi, diukur dengan kenyataan, spesifikasi, dan kebenaran teori.
b. Level Testing
Testing dikatakan berhasil jika error terdeteksi, terutama jika berhasil
mendapatkan tambahan informasi mengenai masalah dari aplikasi. Testing yang
tidak menemukan kesalahan adalah “waste of time". Sasaran utama testing identik
dengan menemukan error, tetapi testing tidak mengarah ke perbaikan kualitas
walaupun error telah terdeteksi dan dihilangkan. Level testing dapat dilihat pada
tabel berikut

No. Level Testing Keterangan

1. Unit Test a. Merupakan pengujian unit terkecil, seperti Classes,
Web Pages, dan lain-lain
b. Pengujian yang berdiri sendiri
c. Pengujian dilakukan selama tahapan implementasi
2. Integration Tes Merupakan evaluasi interaksi unit terintegrasi yang dites
secara berbeda dan terpisah
3. System Test a. Merupakan testing yang komplet
b. Sistem yang terintegrasi
4. Acceptance Test a. Mengevaluasi sistem dalam organisasi dengan
bantuan klien yang berada dalam lingkungan system
b. Menggunakan kondisi dan data real
5. Beta Test Merupakan tes yang informal (tanpa rencana dan kasus)
yang mempercayakan pada kreativitas pengguna yang
potensial