2.13 Karakteristik Perangkat Lunak Berbasis Web
2.13.3 Desain Perangkat Lunak Berbasis Web
Pada dasarnya desain atau perancangan untuk sistem informasi berbasis web dengan desain atau perancangan perangkat lunak tidak jauh berbeda hanya saja untuk desain sistem informasi berbasis web terdapat aktivitas pembuatan desain navigasi. Menurut Pressman:
“Perancangan adalah proses untuk mengaplikasikan berbagai macam
teknik dan prinsip untuk tujuan pendefinisian secara rinci perangkat
lunak, proses atau sistem agar dapat direalisasikan dalam bentuk fisik”.
[6]
Secara umum tujuan perancangan adalah sebagai berikut:
1. Untuk menghasilkan suatu model atau penggambaran dari suatu entitas yang
akan dibangun.
2. Untuk memenuhi kebutuhan pengguna perangkat lunak
3. Untuk memberikan gambaran yang jelas serta rancang bangun yang lengkap
kepada programmer dan ahli-ahli teknik lainnya yang terlibat.
2.13.3.1 Desain Isi
Desain isi yang dimaksudkan pada pengembangan sistem informasi berbasis web ini adalah untuk menggambarkan keadaan suatu sistem. Alat bantu
yang dapat digunakan dalam desain isi seperti Data Flow Diagram, Data
Dictionary atau kamus data dan Entity Relationship Diagram.
1. Data Flow Diagram (DFD)
Data Flow Diagram (DFD) merupakan perangkat (tools) analisis yang
menggambarkan aliran informasi dan transformasi yang diaplikasikan pada
saat data bergerak dari input menjadi output yang berhubungan satu sama
konteks diagram adalah diagram alir data yang menggambarkan seluruh elemen sistem sebagai sebuah proses tunggal dengan data masukan dan data keluaran yang ditunjukan dengan anak panah yang masuk dan keluar secara
berurutan. DFD level 0 merupakan diagram alir data yang pertama kali
dibentuk karena menggambarkan proses secara keseluruhan yang terjadi didalam perangkat lunak. Beberapa simbol yang digunakan dalam DFD adalah sebagai berikut:
a. Proses, adalah suatu kegiatan atau kerja yang dilakukan oleh orang,
mesin atau komputer. Berfungsi untuk mengolah suatu aliran data yang
masuk dan menghasilkan suatu output yang diinginkan.
b. Data flow (aliran data), menunjukan arus dari data yang bisa berupa
masukan untuk sistem atau hasil dari proses. Aliran data direpresentasikan dengan menggunakan anak panah yang menuju ke/dari proses.
c. Data store (penyimpanan data), merupakan simpanan data dari hasil
proses berupa suatu file atau database pada sistem komputer, arsip atau
catatan manual.
d. Entitas Eksternal/Terminator, merupakan batasan sistem yang
memisahkan kesatuan di lingkungan luar sistem bisa berupa orang,
organisasi, atau sistem lain yang dapat memberikan input atau
2. Data Dictionary (kamus data) Menurut Jogiyanto:
“Kamus data adalah katalog fakta-fakta tentang data dan kebutuhan-
kebutuhan informasi dari suatu sistem perangkat lunak”. [1]
Dengan menggunakan data, dapat mendefinisikan data yang mengalir dalam sistem dengan lengkap. Kamus data berisi tentang: nama data, bentuk data, arus data, dan keterangan. Kamus data dapat dijadikan alat komunikasi
antara pengembang perangkat lunak dengan customer sehingga antara
pengembang dan customer memiliki pemahaman yang umum mengenai
input, ouput, komponen penyimpan dan bahkan kalkulasi inter mediate.
3. Entity Relationship Diagram (ERD)
Entity Relationship Diagram (ERD) adalah sebuah alat bantu dalam
perancangan basis data yang digunakan untuk menggambarkan hubungan
antar penyimpanan atau data store yang terdapat pada Data Flow Diagram
(DFD) yang masing-masing dilengkapi dengan atribut-atribut yang
merepresentasikan sebuah fakta dari dunia nyata yang di tinjau. Entity
Relationship Diagram menggunakan sejumlah simbol untuk
menggambarkan struktur dan hubungan antar data. 2.13.3.2 Desain Arsitektur
Desain arsitektur pada perangkat lunak berbasis web berfokus pada
seluruh struktur hypermedia yang berasal dari seluruh struktur dan tampilan rinci
isi informasi yang akan disajikan sebagai bagian dari perangkat lunak berbasis web serta merepresentasikan hubungan kontrol antar modul. Desain arsitektur
akan mendefinisikan keterhubungan antara elemen-elemen struktural utama dalam perangkat lunak.
Spesifikasi sistem, model analisis, dan interaksi antar subsistem yang didefinisikan dalam model analisis dapat dijadikan dasar dalam kegiatan perancangan arsitektur tersebut. Desain arsitektur dapat dipilih dari empat struktur aplikasi web yang berbeda. Struktur aplikasi web yang dirumuskan oleh Pressman [6] adalah sebagai berikut:
1. Struktur linier
Struktur linier ditemukan ketika sebuah urutan interaksi dapat diramalkan.
Gambar 2.8 Struktur Linier
2. Struktur Grid
Struktur grid adalah sebuah pilihan arsitektur yang dapat digunakan ketika
isi aplikasi web dapat diorganisasikan menjadi dua atau lebih dimensi.
3. Struktur Hirarki
Pada struktur hirarki diajukan aliran kontrol hanya terus pada cabang vertikal dari hirarki.
Gambar 2.10 Struktur Hierarki
4. Struktur Jaringan atau Web Murni
Pada struktur ini di desain sehingga setiap halaman web dapat berinteraksi dengan halaman lainnya.
Gambar 2.11 Struktur Jaringan atau Web Murni
Hasil dari desain arsitektur sistem informasi berbasis web ini dapat berupa
bagan terstruktur (Structure Chart). Structure Chart digunakan untuk
mendefinisikan dan mengilustrasikan organisasi dari sistem informasi secara
berjenjang dalam bentuk modul dan submodul. Structure Chart juga menampilkan
demikian, Structure Chart dapat memberikan penjelasan yang lengkap dari sistem dipandang dari elemen data, elemen kontrol, modul, dan hubungan antar modulnya.
2.13.3.3 Desain Navigasi
Desainer harus mendefinisikan alur navigasi yang dapat digunakan oleh
pengguna untuk mengakses isi dan layanan dari perangkat lunak berbasis web.
Untuk membuat navigasi yang baik desainer harus: (1) mengidentifikasi semantik
dari navigasi untuk pengguna situs yang berbeda, dan (2) mendefinisikan
mekanisme (sintak) untuk memperoleh navigasi. Desainer perangkat lunak
berbasis web menciptakan sebuah navigasi yang dihubungkan dengan peran setiap pengguna yang berbeda.
2.13.3.4 Desain Interface
Desain interface atau desain antarmuka sangat diperlukan di dalam
aplikasi web. Desain yang kurang baik akan menyebabkan pengguna kecewa.
Desain interface menggambarkan bagaimana sebuah perangkat lunak
berkomunikasi dengan dirinya sendiri, dengan sistem yang berinteroperasi
dengannya, dan dengan manusia yang menggunakannya. Desain interface
mengimplikasikan aliran informasi (misal data dan atau kontrol). Oleh karena itu,
data flow diagram memberikan informasi yang dibutuhkan untuk desain interface.
Desain interface yang baik harus mencakup hal-hal berikut ini:
1. Navigasi dan Headbar, seharusnya didesain secara tetap dan harus tersedia
pada semua halaman yang disediakan bagi pengguna. Desain ini tidak
2. Keindahan atau kecantikan, sebaiknya menggunakan pewarnaan yang
menarik, baik pewarnaan huruf ataupun pewarnaan tata letak (layout) layar,
dan penggunaan bentuk huruf tetapi jangan sampai memperlambat akses tampilan informasi.
3. Navigasi harus jelas, tidak membingungkan pengguna bahkan bagi
pengguna pemula sehingga pengguna tidak bingung mencari layar untuk
menentukan bagaimana me-link ke isi atau jasa yang lainnya.