LAPORAN UAS PEMROGRAMAN VISUAL

DOSEN PENGAMPU MATA KULIAH : Ahmad Baihaqi, M.Kom

Disusun oleh

Anas Tasia 2013020123

Ika Maria Daniati 2013020085
Ricky Agung Sumiranto 2013020101

PROGAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNIK

UNIVERSITAS NUSANTARA PGRI KEDIRI

KEDIRI

2023
 DAFTAR ISI

A LANGKAH PEMBUATAN DESAIN...............................................................................2

1 Sketch..............................................................................................................................2
2 Wireframe.......................................................................................................................3
3 Mockup...........................................................................................................................5
B KODE PROGRAM.............................................................................................................7
1 File header.js...................................................................................................................7
2 File content.js..................................................................................................................8
3 File man.js.....................................................................................................................10
4 File content2.js..............................................................................................................11
5 File sosialmedia.js.........................................................................................................12
6 File footer.js..................................................................................................................12
7 File main.js....................................................................................................................14
8 File index.js...................................................................................................................14
C 10 USABILITY HEURISTIC..........................................................................................15
1 Match Betweeen System and the Real World...............................................................15
2 Consistency and Standards............................................................................................15
3 Error Prevention............................................................................................................15
4 Recognition Rather than Recall....................................................................................15
5 Aesthetic and Minimalist Design..................................................................................16
6 Help User Recognize, diagnose, and Recovers from Error..........................................16
7 Help and Documentation...............................................................................................17

1
A LANGKAH PEMBUATAN DESAIN
1 Sketch

2
2 Wireframe

3
4
3 Mockup

5
B KODE PROGRAM
1 File header.js

6
File header.js digunakan untuk menampilkan menu pada header.

Kode di atas digunakan untuk membuat menu drop-down yang berisi tiga tautan yaitu
("Tentang Kami", "Tentang Aplikasi", dan "Hubungi Kami") yang muncul saat
pengguna menghover atau mengklik menu "Halaman".

Kode di atas digunakan untuk membuat menu drop-down yang berisi tiga tautan yaitu
("Laki-laki", "Wanita", dan "Anak") yang muncul saat pengguna menghover atau
mengklik menu "Produk".

Kode tersebut merupakan tautan dengan teks "Semua Produk". Atribut href diisi
dengan "#explore". Ketika pengguna mengklik tautan ini, halaman akan menggulir
(scroll) ke elemen dengan ID "explore".

7
2 File content.js

File content.js digunakan untuk menampilkan banner pada halaman web.

Untuk menampilkan banner pada sisi kiri yang berisi teks "Selamat Datang" dengan
ukuran lebar 6 kolom pada layout grid.

Untuk menampilkan banner pada baris pertama dan pada sisi kanan dengan kategori
"Wanita" dengan ukuran lebar 6 kolom pada layout grid.

8
Untuk enampilkan banner pada baris pertama dan pada sisi kanan dengan kategori
"Pria" dengan ukuran lebar 6 kolom pada layout grid.

Untuk menampilkan banner pada baris kedua dan pada sisi kanan dengan kategori
"Anak" dengan ukuran lebar 6 kolom pada layout grid.

Untuk menampilkan banner pada baris kedua dan pada sisi kanan dengan kategori
"Aksesoris" dengan ukuran lebar 6 kolom pada layout grid.

9
3 File man.js

File man.js digunakan untuk menampilkan produk yang sedang diskon. Pada file ini
menampilkan beberapa informasi produk yaitu gambar produk, nama produk, harga
dan rating.

Kode diatas digunakan untuk menampilkan produk diskon dalam bentuk slide
menggunakan class "carousel slide".

Kode di atas digunakan untuk menampilkan informasi produk pada card yang berada
di dalam slide.

10
4 File content2.js

File content2.js digunakan untuk menampilkan informasi toko.

Kode tersebut berfungsi untuk menampilkan teks yang berisi informasi toko.

5 File sosialmedia.js

File sosialmedia.js digunakan untuk menampilkan gambar dan link sosial media.

11
6 File footer.js

File footer.js digunakan untuk menampilkan beberapa informasi pada footer web.
Beberapa informasi yang dimuat di file footer.js antara lain informasi kontak toko,
form registrasi, menu aplikasi dan sebagainya.

Kode di atas digunakaan untuk membuat input field untuk registrasi akun, dimana
pengguna diharapkan untuk memasukkan alamat email yang valid sesuai dengan pola
yang ditentukan oleh atribut "pattern".

12
 Kode tersebut untuk menampilkan informasi informasi toko. Informasi yang
ditampilkan yaitu lokasi toko, nomor hp, website, jam operasional, email, dan sosial
media.
7 File main.js

File main.js berfungsi untuk menyusun dan menampilkan berbagai komponen dalam
satu halaman web. File main.js terdiri komponen-komponen yang diimpor dari file
terpisah dan disusun menjadi satu tampilan utuh.

8 File index.js

File index.js digunakan untuk menyambungkan komponen "App" ke elemen dengan

ID "root" pada halaman, dan mengaktifkan "Strict Mode" untuk mendeteksi masalah
selama pengembangan. Kemudian, aplikasi akan melacak kinerja dan mengirimkan
data kinerja tersebut setelah rendering.

13
C 10 USABILITY HEURISTIC
1 Match Betweeen System and the Real World

Simbol pesawat kertas pada tombol kirim ini secara umum menggambarkan tindakan
"mengirim" pesan atau data ke penerima.

2 Consistency and Standards

Gambar pada banner memiliki ukuran dan gaya yang sama. Gambar memiliki ukuran
yang sama antara baris kiri dan baris kanan. Serta semua gambar pada banner
memiliki gambar dengan gaya ketajaman yang sedikit memudar.

3 Error Prevention

Saat user memasukkan alamat email dengan format yang tidak sesai, maka akan
muncul peringatan untuk memasukkan email dengan format yang sesuai.

4 Recognition Rather than Recall

14
 Pada web Auto Smart terdapat menu yang diletakkan di bagian header dan footer.
Tujuan peletakkan menu tersebut yaitu untuk memudahkan user menagkses menu
tanpa harus kembali ke bagian header atau kembali ke bagian footer.

5 Aesthetic and Minimalist Design

Website Auto Smart memliki desain yang estetik dan minimalis. Salah satunya yaitu
pada bagian diatas, bagian tersebut hanya menampilkan informasi-informasi yang
penting saja.

6 Help User Recognize, diagnose, and Recovers from Error

Form registrasi memberikan pesan menganai informasi kesalahan yang dilakukan

user. Pesan tersebut muncul ketika user memasukkan email dengan format yang tidak
sesuai.

15
7 Help and Documentation

Web Auto Smart memberikan dokumentasi mengenai informasi toko. Dokumentasi

tersebut memuat beberap informasi misalnya tujuan, layanan yang diberikan, dan
sebagainya.

16