LOMBA KOMPETENSI SISWA

SEKOLAH MENENGAH KEJURUAN

TINGKAT PROVINSI JAWA BARAT
TAHUN TAHUN 2021

NASKAH SOAL
(Terbuka / Tertutup)

Bidang Lomba
Teknik Desain Laman
(Web Technologies)

PEMERINTAH DAERAH PROVINSI JAWA BARAT

DINAS PENDIDIKAN
Jl. Dr. Radjiman No. 6 Telp. (022) 4264813 Fax. (022) 4264881
Wisselbord (022) 4264944, 4264957, 4264973
Bandung ( 40171 )
 MODUL I

MODUL : UI/UX DESIGN

WAKTU : 90 Menit ( 1 Jam 30 m)

TOOLS & SOFTWARE : Figma, Canva, Freelogodesign (software editing images lainnya)

Deskripsi Singkat

Pada Tahun 2018, Pa Agus mempunyai sebuah website katalog elektronik yang menjual berbagai jenis
produk dari Brand Apple. Namun ditahun 2020 mulai mengalami penurunan pembelian dan Pa Agus
berencana ingin membuat sebuah toko online / e-commerce yang baru untuk tokonya tersebut.

Adapun toko online yang diinginkannya yaitu pengunjung bisa membeli barangnya dan bisa melihat berbagai
macam pilihan produk, seperti produk terbaru, produk terlaris, produk pilihan dan lain-lain serta Pa Agus
ingin menampilkan iklan didalam toko onlinenya tersebut.

Tidak hanya itu, Pa Agus ingin mempunyai sebuah toko online yang kekinian dengan design yang lebih
modern, fresh dan clean.

Maka dari itu, Pa Agus ingin mencari seorang UI/UX Designer yang bisa membuat redesign website
katalognya dengan tidak menghilangkan informasi yang sudah ada pada website katalognya yang dulu.

Berikut adalah website katalog Pa Agus

 MODUL II

MODUL : RESPONSIVE WEB DESIGN

WAKTU : 120 Menit ( 2 Jam )

TOOLS & SOFTWARE : Visual Studio Code, Web Browser, Bootstrap 5.0.2, (plugin/javascript library
lainnya)

Deskripsi Singkat

Pada Tahun 2021, Pa Yuli membutuhkan seorang Web Designer yang bisa membantunya dalam membuat
sebuah website. Sebelumnya Pa Yuli sudah pernah dibantu dibuatkan tampilan web design oleh temannya
namun sampai saat ini belum ada yang bisa membantu mengubah tampilan design tersebut kedalam bentuk
format HTML.

Pa Yuli diberitahu oleh temannya untuk mencari profesional web designer yang bisa membantu
mewujudkan designnya dengan menggunakan sebuah css framework bernama bootstrap supaya tampilan
yang dihasilkan lebih bagus dan bisa menyesuaikan diberbagai device seperti tablet dan mobilephone karena
sudah responsive web design.

Namun Pa Yuli menginginkan tampilan design yang lebih baru dan kekinian dari tampilan websitenya yang
sekarang, sehingga anda sebagai profesional web designer diperbolehkan untuk melakukan improvement
terhadap referensi design yang ada. Adapun produk yang Pa Yuli buat adalah produk elektronik seperti
laptop, hp, smart tv dan lain-lain dari berbagai merk.

Berikut adalah referensi tampilan website Pa Yuli

 MODUL III

MODUL : MODUL FRONTEND

WAKTU : 90 Menit ( 1 Jam 30 m )

TOOLS & SOFTWARE : Visual Studio Code, Web Browser, Vuejs (plugin/javascript library lainnya)

Deskripsi Singkat

Untuk modul frontend kali ini, anda ditugaskan membuat beberapa halaman untuk user/visitor
website anda.

Adapun halaman yang harus dibuat adalah sebagai berikut;

1. Homepage (dari modul sebelumnya)
2. Kategori/List Produk
3. Detail Page (detail produk)
4. Cart Page (keranjang belanja)
5. Summary Page (ringkasan belanja/muncul tulisan terima kasih dan no order referensi)
6. Search Page
7. Login & Register Page

Silahkan anda bisa melakukan improvement UI/UX design jika diperlukan namun halaman utama
tersebut harus ada.
 MODUL IV

MODUL : MODUL BACKEND

WAKTU : 120 Menit ( 2 Jam )

TOOLS & SOFTWARE : Visual Studio Code, Web Browser, Laravel 8 (plus extension
autocomplete,liveshare) dan Template AdminLTE 3

Deskripsi Singkat

Untuk modul backend kali ini, anda ditugaskan menyelesaikan fungsi dan alur pemesanan untuk
customer serta manajemen toko seperti (kelola produk, kelola kategori, dan kelola pemesanan) di
halaman admin.

Terdapat 2 roles user pada toko online yang akan dibangun, yaitu Administrator dan Customer.

Administrator bertugas untuk mengelola data produk dan melihat transaksi. Untuk bisa masuk ke
halaman admin, administrator harus melakukan proses login dengan menginputkan email dan
password.

Setelah berhasil login, terdapat menu untuk mengelola produk (CRUD Sistem) dan melihat transaksi
yang masuk dan detail transaksi.

Kemudian untuk Customer, bisa melihat list/daftar produk yang dijual, detail produk, dan
melakukan pencarian produk yang ingin dibeli dengan menginputkan nama produknya. Untuk
melakukan transaksi pembelian, customer harus melakukan register dan login terlebih dahulu.

Pada halaman detail produk, terdapat tombol “Beli” yang ketika di klik akan masuk ke halaman list
keranjang belanja.

Setelah itu, Customer bisa melakukan checkout pemesanan yang menandakan bahwa customer
tersebut sudah selesai melakukan transaksi.

Pada halaman checkout akan terdapat informasi seperti kode transaksi dengan format
INV/TAHUN/BULAN/TANGGAL/3 DIGIT KODE UNIK (contoh: INV/201231001,…. INV….002, dst),
data customer dan list produk yang sudah dipesan.

Berikut adalah Skema Database yang digunakan:

 MODUL V

MODUL : MODUL HOSTING

WAKTU : 30 Menit ( ½ jam )

TOOLS & SOFTWARE : FileZilla FTP Client, Winscp, Web Browser, 000webhost/hosting yang disediakan
panitia

Deskripsi Singkat

Untuk modul hosting kali ini, anda ditugaskan untuk melakukan konfigurasi website pada server
hosting yang sudah ditentukan oleh juri.

Adapun tahapan yang harus ada lakukan adalah sebagai berikut;

1. Mengupload file website ke server hosting
2. Melakukan Export/import database .sql file kedalam server hosting
3. Melakukan konfigurasi koneksi ke database server hosting
4. Melakukan pengecekan ke alamat domain server hosting.

Berikut adalah salah satu layanan free hosting yang banyak digunakan oleh oleh user.

https://www.000webhost.com