JAWABAN UAS REKAYASA WEB A

Disusun Oleh:
Yafi Shalihuddin (5190411532)

PROGRAM STUDI INFORMATIKA

FAKULTAS TEKNOLOGI INFORMASI DAN ELEKTRO
UNIVERSITAS TEKNOLOGI YOGYAKARTA
20121-2022
Berdasarkan proyek tugas akhir yang telah anda kumpulkan, berikan penjelasan dan analisis
mengenai:
1. (CP 2 : 20) Model dan proses rekayasa web yang anda terapkan!
Jawab :

- Requirement Gathering and analysis

Mengumpulkan kebutuhan secara lengkap kemudian dianalisis dan didefinisikan kebutuhan
yang harus dipenuhi oleh program yang akan dibangun. Fase ini harus dikerjakan secara
lengkap untuk bisa menghasilkan desain yang lengkap.

- Desain
Pada tahap ini pengembang akan menghasilkan sebuah sistem secara keseluruhan dan
menentukan alur perangkat lunak hingga algoritma yang detail.

- Implementasi
Pada tahapan ini terjadi proses dimana seluruh desain yang telah di rancang diubah menjadi
kode kode progam. Kode progam yang dihasilkan masih berupa modul-modul yang akan
diintregasikan menjadi sistem yang lengkap.

- Integration & Testing

Di tahap ini dilakukan penggabungan modul-modul yang sudah dibuat dan dilakukan
pengujian ini dilakukan untuk mengetahui apakah website yang dibuat telah sesuai dengan
desainnya dan fungsi pada website terdapat kesalahan atau tidak.

- Verifikasi
Tahap verifikasi adalah proses dimana klien atau pengguna menguji apakah sistem tersebut
telah sesuai dengan yang disetujui.

- Operation & Maintenance

Operation & Maintenance yaitu instalasi dan proses perbaikan sistem sesuai yang disetujui.

2. (CP 3 : 50)
a. Gambarkan desain interface untuk proyek sistem informasi berbasis web anda dengan
mengacu pada beberapa hal berikut ini:
• Layout (tata letak)
• Pemilihan skema warna
• Pemilihan jenis font
• Penggunaan media tambahan (animasi, video, audio)
• Tambahkan pertimbangan lainnya
Tambahkan juga penjelasan anda dengan mengacu pada poin-poin di atas!
Jawab :
- Layout (tata letak)

Pada layout di atas terdapat penggunaan Header yang di gunakan untuk kolom proses login,
daftar, dan halaman keranjang. Kemudian bagian bawah Header terdapat tata letak yang
digunakan untuk penggunaan Logo Produk, kolom pencaharian, dan menampilkan kontak
person. Kemudian terdapat juga penggunaan Navigation di bawah logo produk dengan model
dropdown. Kemudian dibawah navigasi terdapat halaman content yang menampilkan data
dari setiap produk yang akan di jual belikan. Terakhir bagian footer berisi tentang kontak,
alamat dan juga link link social media.

- Pemilihan skema warna

Untuk pemilihan warna yang di gunakan pada layout di atas ialah dengan menggunakan 4
warna dasar pertama kode warna #ffffff yaitu warna putih di gunakan untuk background
body dan sebagian digunakan untuk backgroung color tulisan di baian header, navigasi dan di
bagian footer. Kemudian penggunaan kode warna #333333 yaitu warna hitam digunakan
untuk warna background header dan footer. Kemudian penggunaan kode #fE9126 yaitu
warna Orange yang di gunakan untuk background navigation dan logo produk. Kemudian
kode warna #3399CCyaitu warna cyan biru digunakan pada background chart pada content
di bagian button untuk menampilkan detail produk dan dibagian star rating produk.

- Pemilihan jenis font

Untuk pemilihan jenis font yang di gunakan layout di atas menggunakan font sans serif
sebagai font utama.

- Penggunaan media tambahan (animasi, video, audio)

Pada website ini media tambahan adalah berupa gambar.

- Tambahkan pertimbangan lainnya

Elemen lain yang di tambahkan ialah sebuah tombol toTopHover yang berfungsi ketika
tombol ini di tekan maka secara otomatis halaman akan ter secrol ke paling atas.

b. Gambarkan dan jelaskan struktur WepApp yang menurut anda sederhana untuk di
implementasikan!
Jawab :
  Hierarki.
Struktur website tipe ini adalah yang paling umum dan disukai. Halaman-halaman
disusun dengan struktur seperti pohon. Parent page dengan informasi yang lebih
umum/luas berada di paling atas struktur. Parent page itu kemudian dikategorikan
menjadi beberapa child pages dengan informasi yang lebih detail.
 Linier.
Struktur website tipe sekuen adalah yang paling sederhana. Semua informasi disusun
secara linier. Bisa dari yang paling umum sampai yang paling spesifik. Bisa juga secara
alfabetik. Struktur ini cocok untuk website edukasi atau training.
 Matriks.
Struktur website tipe matriks menyediakan banyak link yang relevan untuk user. Dengan
berbagai kumpulan topik. User bebas memilih link atau page mana selanjutnya yang
ingin mereka kunjungi.
 Network.
Struktur website tipe ini lebih dinamis dibanding yang lain. Dengan struktur tipe ini, user
bisa bebas menentukan link atau page apa yang mereka ingin kunjungi selanjutnya. User
dapat memiliki pengalaman pencarian mereka sendiri dengan memanfaatkan fitur search.

3. (CP 4 : 30) Ambil salah satu halaman web dari aplikasi web yang anda buat, kemudian
lakukan pengujian HTML dan load testing, screenshot dan jelaskan hasil pengujiannya!
Jawab :
Pada hasil screenshot diatas telah dilakukan pengujian testing terhadap fungsi dari kolom
pencaharian dimana ketika saya mengetikan produk Samsung maka content content yang muncul
di produk hanyalah produk yang user ketikan di kolom pencaharian maka dari itu proses
pengujian ini saya kira sudah berhasil.