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 Data Entity 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)