Pemrograman Web dan Perangkat Bergerak, Rekayasa Perangkat Lunak (RPL) XII

BAB 1
USER INTERFACE APLIKASI WEB STATEFUL DAN PENGAMANAN DATA PADA
APLIKASI WEB
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.
Kualitas yang perlu diperhatikan dalam desain user interface adalah concision,
kejelasan interface, familiarity, estetika, responsiveness, consistency, forgiveness,
efficiency time.
B. Tipe – tipe user interface
1. Graphical user interface (GUI) adalah tipe antarmuka yang digunakan oleh pengguna
untuk berinteraksi dengan sistem operasi melalui gambar – gambar grafik, ikon, dan
menggunakan perangkat penunjuk (pointing device) seperti mouse atau track ball.
Contoh GUI biasa digunakan pada sistem operasi windows.
2. Command-Line Interface (CLI) adalah tipe antarmunka dimana pengguna berinteraksi
dengan sistem operasi menggunakan text terminal.CLI adalah sebuah bentuk
antarmuka antara sistem operasi dan pemakain mengetikkan perintah-perintah dengan
menggunakan perintah dalam bentuk teks dan sebuah metode untuk memasukinya.
3. Touchscreen adalah tipe antarmuka yang menerima masukan berupa sentuhan jari.
4. Gesture interface adalah tipe antarmuka user interface grafis menerima input dalam
bentuk gerakan tangan atau gerakan mouse sketsa dengan mouse komputer.
5. Direct manipulation interface adalah tipe antarmuka pengguna yang memungkinkan
pengguna untuk memanipulasi objek yang disajikan kepada mereka.
6. Search interface adalah sebuah kotak pencarian situs ditampilkan serta
merepresentasikan visual dari hasil pencarian.
7. Voice user interface adalah tipe antarmuka dimana komponen yang menerima masukan
dan memberikan output dengan menghasilkan perintah suara. Input pengguna dibuat
dengan menekan tombol atau tombol dan menanggapi secara lisan ke antarmuka.

SMK Muhammadiyah 1 Sangatta, Meti Rasmini, S.Kom

 Pemrograman Web dan Perangkat Bergerak, Rekayasa Perangkat Lunak (RPL) XII

8. Natural-languange interface digunakan pada mesin pencari dan pada halaman web.
Jenis penggunaan adalah dalam bentuk pertanyaan dan menunggu tanggapan.
C. Teknik user interface
1. Teknik linguistic styles identik dengan penyampaian “aksi” melalui bahasa yang
dimengerti oleh komputer
2. Teknik key modals styles identik dengan penyampaian aksi melalui penekanan tombol
– tombol yang diprogram sebelumnya untuk menjalankan fungsi – fungsi.
3. Teknik direct manipulation style identik dengan penyampaian perintah melalui
manipulasi objek tertentu.
D. Memilih elemen interface
Beberapa elemen interface adalah :
1. Komponen navigasi yang terdiri atas broadcrumb, 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, pprogress bar, notifikasi, kotak
pesan, dan modal windows.
E. Merancang interface
Terdapat beberapa hal yang perlu dipertimbangkan ketika merancang interface sebagai
berikut :
1. Menciptakan konsistensi dan menggunakan elemen UI umum
2. Menjaga antarmuka yang sederhana
3. Strategi menggunakan warna dan tekstur
4. Page layout harus dipertimbangkan berdasarkan suatu tujuan tertentu
5. Pikirkan tentang default
6. Pastikan bahwa sistem berjalan sesuai dengan apa yang terjadi saat ini juga
F. Tipe – tipe interaksi antarmuka (interface)
1. Command line interface (CLI) user memberikan instruksi secara langsung kepada
komputer dengan teks

SMK Muhammadiyah 1 Sangatta, Meti Rasmini, S.Kom

 Pemrograman Web dan Perangkat Bergerak, Rekayasa Perangkat Lunak (RPL) XII

2. Menu adalah sekumpulan opsi/piliha yang tersedia bagi user yang ditampilkan pada
layar dan daoat dipilih dengan menggunakan mouse atau tombol numerik maupun
alfabetik.
3. Natural languange
4. Q/A & Query dialogue dimana user diberikan serangkaian pertanyaan yang umumnya
dalam bentuk jawaban ya/tidak.
5. Form-fill and spreadsheet utamanya digunakan untuk aplikasi pemasukan (data entry)
dan oencarian data.
G. Tujuan perancangan antarmuka pengguna (user interface)
Tujuannya adalah untuk merancang interface yang efektif untuk sistem perangkat
lunak. Karakteristik GUI antara lain window, icon, menu, pointing dan graphic.
H. Karakteristik informasi
1. Static informastion disajikan dengan huruf khusus yang mudah dibaca atau diberi
highlight dengan warna tertentu, informasi ditentukan di awal dan tidak berubah selama
sesi berjalan
2. Dynamic information perubahan terjadi selama sesi berlangsung dan perubahan harus
dikomunikasikan / ditunjukkan ke user.
I. Aplikasi user interface untuk mengelola basis data
DBMS (database management system) adalah sistem yang secar khusus dibuat untuk
memudahkan pemakain dalam mengelola basis data.
1. Level testing
Berikut adalah level testing :
a. Unit test pengujian unit terkecil yang berdiri sendiri dan dilakukan selama tahap
implementasi
b. Integration test merupakan evaluasi interaksi unit terintegrasi yang dites secara
berbeda dan terpisah
c. System test merupakan testing yang komplet dan terintegrasi
d. Acceptance test adalah testing dengan mengevaluasi sistem dalam organisasi
dengan batuan klien yang berada dalam lingkungan sistem dengan menggunakan
kondisi dan data real

SMK Muhammadiyah 1 Sangatta, Meti Rasmini, S.Kom

 Pemrograman Web dan Perangkat Bergerak, Rekayasa Perangkat Lunak (RPL) XII

e. Beta test merupakan tes yang informal (tanpa rencana dan kasus) yang
mempercayakan pada kreativitas pengguna yang potensial.
J. Aplikasi website statefull
Website stateful adalah website yang mampu menyimpan data inputan user sehingga
data user tersebut dapat digunakan dilain waktu. Dalam PHP dikenal istilah session dan
cookies yang digunakan untuk menyimpan informasi pengguna. Session menyimpan data
disisi server dan cookies disisi klien. Session diaktifkan dengan perintah session_start(),
dan untuk menghapus session secara keseluruhan digunakan session_destroy().
Secara mendasar server hanya dapat menyimpan 20 cookies. Cookies terdapat 2 jenis
yaitu:
1. Non persistent cookies yang akan hilang sewaktu user menutup browser
2. Persistent cookies oleh siturs – situs portal, banner/media iklan situs dan lainnya yang
ingin tahu ketika user kembali mengunjungi site mereka.
K. Konsep kriptograpi
Ilmu kriptograpi adalah ilmu yang mempelajari tentang penyembunyian huruf atau
tulisan sehingga membuat tulisan tersebut tidak dapat dibaca oleh orang yang tidak
berkepentingan. Bagian kriptograpi :
1. Enkripsi : adalah proses dari mengubah pesan asli menjadi pesan sandi
2. Deskripsi : adalah proses dari mengubah pesan sandi menjadi pesan asli
Pesan asli biasa disebut plaintext, sedangkan yang sudah disandikan disebut ciphertext.
Dalam konsep plain text, teks dokumen dikategorikan menjadi rich text dan teks biasa. Jika
menggunakan PHP untuk enkripsi data maka dalam PHP sudah disediakan fungsi enkripsi
yang bisa dipakai yatu password_hash(), crypt(), md5(), hash(), sha1(), dan
base64_encode().

Berikut penjelasan enkripsi teks :

ASLI A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

SANDI G H I J K L M N O P Q R S T U V W X Y Z A B C D E F

DATA ASLI -> N A M A

DATA SANDI - > T G S G

SMK Muhammadiyah 1 Sangatta, Meti Rasmini, S.Kom