PERTEMUAN 3

MERANCANG DAN MEMBANGUN WEB

TAHAPAN DALAM MERANCANG WEB

Tahapan dalam merancang web menggunakan Model

SDLC Waterfall menyediakan pendekatan alur secara

terurut mulai dari analisis, desain, pengodean, pengujian,

dan tahap pendukung (support).

Gambar 3.2 Ilustrasi Model Waterfall

TAHAPAN DALAM MERANCANG WEB

(Lanjutan)Tahapan dalam merancang Web menggunakan Model Waterfall

sebagai berikut :

1. Analisis Kebutuhan

Analisis kebutuhan merupakan proses pengumpulan kebutuhan

yang dilakukan secara intensif untuk menentukan spesifikasi web

agar dapat dipahami oleh pengguna.

2. Desain Perangkat Lunak

- Desain Antar Muka

- Desain Basis Data

- Desain Struktur Navigasi

3. Pembuatan Kode Program (Implementasi)

4. Pengujian (Testing)

5. Pendukung (Support) atau Pemeliharaan (Maintenance)

Analisis Kebutuhan

Secara singkat terdapat 7 jenis kebutuhan (Requirements Types)

dalam pengembangan Web sebagai berikut :

1. Functional Requirements

Menentukan kemampuan dan layanan dari web yang

ditawarkan. Misalnya dalam Aplikasi Perbankan Online

(Internet Banking) terdapat fasilitas transfer uang.

2. Content Requirements

Menentukan isi aplikasi web atau konten yang terdapat

dalam web yang dibuat.

3. Quality Requirements

Menentukan tingkat kualitas layanan dan kemampuan dalam

hal-hal penting seperti keamanan, kinerja, manfaat dan

kegunaan dari web.

Analisis Kebutuhan (Lanjutan)

4. System Environment Requirements

Menentukan bagaimana aplikasi web dapat diterima oleh

masyarakat. Jika aplikasi web “ubiquitous” berarti harus

menyediakan layanan yang dapat dikustomisasi oleh

usernya, kapanpun, dimanapun, dan untuk perangkat

apapun.

5. User Interface Requirements

Menentukan kemudahan dari penggunaan web oleh

pengguna meliputi aspek penting yang meliputi struktur

navigasi dan user interface.

Analisis Kebutuhan (Lanjutan)

6. Evolution Requirements

Menentukan kemampuan web sesuai dengan evolusi yang

berlangsung dengan melakukan peningkatan. Web harus

dirancang up-to-date mengikuti perkembangan zaman.

7. Project Constraint

Menentukan kendala yang mungkin dihadapi dalam

pengembangan web seperti anggaran dan jadwan,

keterbatasan teknik, pemeliharaan web, pengembangan

teknologi, aturan pemerintah, dan aspek budaya.

Desain Perangkat Lunak

Desain perangkat lunak adalah proses multilangkah yang fokus

pada pernacangan web meliputi :

- Desain Antar Muka

- Desain Basis Data

- Desain Struktur Navigasi

- Desain Antar Muka

Representasi antar muka atau spesifikasi rancangan tampilan

web. Desain web terdiri dari 2 bagian yaitu desain front-end

dan desain back-end. Bagian front-end adalah tampilan web

yang dilihat oleh pengunjung ataupun member. Sedangkan

bagian back-end adalah tampilan administrator web dalam

mengelola konten web, keamanan web dan konektivitas dari

situs ke server.

Desain Perangkat Lunak (Lanjutan)

- Desain Basis Data

Salah satu pemodelan basis data relational dapat dibuat

dengan menggunakan ERD (Entity Relationship Diagram)

yang bertujuan untuk menggambarkan data yang berelasi

pada sebuah database.

- Desain Struktur Navigasi untuk menggambarkan struktur

atau alur dari suatu web.

Struktur navigasi adalah :

Desain Perangkat Lunak (Lanjutan)

Struktur Navigasi adalah alur dari suatu program yang

merupakan rancangan hubungan (rantai kerja) dari

beberapa area yang berbeda dan dapat membantu

mengorganisasikan seluruh elemen pembuatan Website.

Jenis-jenis struktur navigasi :

1. Linier

2. Non-Linier

3. Hirarki

4. Campuran (Composite)

Struktur Navigasi (Lanjutan)

1. Linier

Linier merupakan struktur yang hanya mempunyai

satu rangkaian cerita yang berurut. Struktur ini

menampilkan satu demi satu tampilan layar secara

berurut menurut urutannya dan tidak diperbolehkan

adanya percabangan. Tampilan yang dapat

ditampilkan adalah satu halaman sebelumnya atau

satu halaman sesudahnya.

Struktur Navigasi (Lanjutan)

2. Hirarki

Struktur hirarki merupakan suatu struktur yang

mengandalkan percabangan untuk menampilkan data

berdasarkan kriteria tertentu. Tampilan pada menu

pertama akan disebut sebagai master page, halaman

utama ke satu. Halaman utama ini akan mempunyai

halaman percabangan yang dikatakan slave page,

halaman pendukung. Jika salah satu halaman

pendukung diaktifkan, maka tampilan tersebut akan

bernama master page, halaman utama kedua. Pada

struktur navigasi ini tidak diperkenankan adanya

tampilan secara linier.

Struktur Navigasi (Lanjutan)

Struktur Navigasi (Lanjutan)

3. Non-Linier

Pada struktur nonlinier diperkenankan membuat struktur

navigasi bercabang, percabangan ini berbeda dengan

percabangan pada struktur hirarki. Pada percabangan

nonlinier walaupun terdapat banyak percabangan tetapi

tiap-tiap tampilan mempunyai kedudukan yang sama

tidak ada pada master page dan salve page.

Struktur Navigasi (Lanjutan)

4. Campuran

Struktur navigasi campuran merupakan gabungan dari

ketiga struktur sebelumnya. Struktur navigasi ini

banyak digunakan dalam pembuatan aplikasi

multimedia sebab dapat memberikan keinteraksian

yang lebih tinggi.

Pembuatan Kode Program (Implementasi)

Rancangan yang sudah dibuat seperti rancangan antar

muka, rancangan basis data, dan rancangan struktur

navigasi diimplementasikan ke perangkat lunak atau

pembuatan kode program.

- Rancangan antar muka diimplementasikan ke

perangkat lunak (software) editor web seperti

Dreamweaver.

- Rancangan basis data diimplementasikan ke web

server seperti apache untuk membuat database dan

tabel menggunakan phpmyadmin dengan perintah

SQL.

Pengujian (Testing)

Setelah implementasi desain atau rancangan web

dilakukan dengan pembuatan kode program, dilakukan

pengujian untuk mengetahui kepuasan pengguna atau

user terhadap web yang sudah dibuat.

Pengujian untuk validasi memiliki beberapa

pendekatan sebagai berikut :

1. Black-Box Testing

2. White-Box Testing

Pengujian di tahap ini hanyalah pengujian terhadap

jalannya konten web (pengujian perangkat lunak),

bukan pengujian keseluruhan dari sebuah web (Testing

di pertemuan 5)

Pengujian (Testing) (Lanjutan)

1. Black-Box Testing (Pengujian kotak hitam)

Yaitu menguji perangkat lunak dari segi spesifikasi

fungsional tanpa menguji desain dan kode program.

Pengujian dimaksudkan untuk mengetahui apakah fungsi-

fungsi, masukan, dan keluaran dari perangkat lunak sesuai

dengan spesifikasi yang dibutuhkan.

2. White-Box Testing (Pengujian kotak putih)

Yaitu menguji perangkat lunak dari segi desain dan kode

program apakah mampu menghasilkan fungsi-fungsi

masukan, dan keluaran yang sesuai dengan spesifikasi

kebutuhan. Pengujian kotak putih dilakukan dengan

memeriksa logika dari kode program. Seperti penggunaan

looping (pengulangan)

Pendukung (Support) atau

Pemeliharaan (Maintenance)Pendukung (Support) atau Pemeliharaan (Maintenance) dari

sebuah web dapat dilakukan dengan beberapa cara seperti

berikut ini :

1. Selalu melakukan update terhadap konten web,

menyesuaikan dengan informasi yang berubah atau

bertambah.

2. Melakukan pemeliharaan terhadap hardware dan software

yang digunakan, agar web dapat selalu berjalan dengan

baik.

3. Melakukan back-up database secara berkala untuk

menghindari hal-hal yang mengakibatkan kerusakan pada

web.

4. Melakukan evaluasi terhadap kritik dan saran dari

pengguna atau pengunjung web.

Contoh Rancangan Antar Muka

Halaman Login

Contoh Rancangan Antar Muka

Halaman Input Nilai Mahasiswa

Contoh Rancangan Basis DataEntity Relationship Diagram (ERD)

Contoh Rancangan Basis Data

Logical Relational Structure (LRS)

Contoh Rancangan Struktur Navigasi

Contoh Rancangan Implementasi

Kode Program

Contoh Pengujian (Black-Box Testing)

Soal Latihan

1. Bagian dari desain perangkat lunak adalah . . .

a. Desain Antar Muka dan Desain Sistem

b. Desain Basis Data dan Desain Antar Muka

c. Desain Sistem dan Desain Basis Data

d. Desain Struktur Navigasi dan Desain Sistem

e. Desain Program dan Desain Struktur Navigasi

2. Alur dari Model Waterfall secara terurut adalah . . .

a. Analysis – Code – Test – Design

b. Analysis – Code – Design – Test

c. Analysis – Design – Code – Test

d. Design – Code – Analysis – Test

e. Design – Analysis – Code – Test

Soal Latihan

2. Alur dari Model Waterfall secara terurut adalah . . .

a. Analysis – Code – Test – Design

b. Analysis – Code – Design – Test

c. Analysis – Design – Code – Test

d. Design – Code – Analysis – Test

e. Design – Analysis – Code – Test

3. Menentukan isi aplikasi web atau konten yang terdapat dalam

web yang dibuat merupakan kebutuhan :

a. Quality Requirements d. Functional Requirements

b. Evolution Requirements e. User Interface Requirements

c. Content Requirements

Soal Latihan

3. Menentukan isi aplikasi web atau konten yang terdapat dalam

web yang dibuat merupakan analisis kebutuhan . . .

a. Quality Requirements d. Functional Requirements

b. Evolution Requirements e. User Interface Requirements

c. Content Requirements

4. Menentukan tingkat kualitas layanan dan kemampuan dalam

hal-hal penting seperti keamanan, kinerja, manfaat dan

kegunaan dari web merupakan analisis kebutuhan . . .

a. Quality Requirements d. Functional Requirements

b. Evolution Requirements e. User Interface Requirements

c. Content Requirements

Soal Latihan

4. Menentukan tingkat kualitas layanan dan kemampuan dalam

hal-hal penting seperti keamanan, kinerja, manfaat dan

kegunaan dari web merupakan analisis kebutuhan . . .

a. Quality Requirements d. Functional Requirements

b. Evolution Requirements e. Project Constraint

c. Content Requirements

5. Struktur yang hanya mempunyai satu rangkaian cerita yang

berurut adalah struktur navigasi . . .

a. Campuran d. Linier

b. Hierarki e. Non Linier

c. Composite

Soal Latihan

5. Struktur yang hanya mempunyai satu rangkaian cerita yang

berurut adalah struktur navigasi . . .

a. Campuran d. Linier

b. Hierarki e. Non Linier

c. Composite

1. Bagian dari desain perangkat lunak adalah . . .

a. Desain Antar Muka dan Desain Sistem

b. Desain Basis Data dan Desain Antar Muka

c. Desain Sistem dan Desain Basis Data

d. Desain Struktur Navigasi dan Desain Sistem

e. Desain Program dan Desain Struktur Navigasi