KISI-KISI DAN SOAL LOMBA KOMPETENSI SISWA

SEKOLAH MENEGAH KEJURUAN (SMK)

TINGKAT PROVINSI JAWA BARAT
BIDANG WEB DESIGN
TAHUN 2018

A. Pendahuluan
Lomba LKS Web Design dan Development yang dilaksanakan merupakan satu kesatuan
utuh yang mengacu pada kemampuan teori maupun praktik dalam kemampuan desain
dan kemampuan pemrograman website.

Penilaian kompetisi menggunakan kriteria keterampilan yang dimiliki individu dengan

pengukuran dalam bentuk penilaian objektif (measurement) dan subjektif (judgment).

B. Spesifikasi / kriteria lomba

Ranah
No Jenis Soal Bobot Waktu
Kompetensi
1 Praktikum / Tugas Modul 100 10 jam Keterampilan
1. Desain Website (600 menit)
Modul 2. Layout & Client Side
Implementation
Modul 3. Server Side
Programming
2 Wawancara - 10-15 Pengetahuan
menit/peserta dan sikap

Soal praktikum terdiri dari 3 modul/keterampilan. Masing-masing modul terikat satu sama lain.
Berikut keterangan dari masing-masing modul/keterampilan:
1. Desain Website
Individu perlu mengetahui dan memahami:
 Masalah yang berkaitan dengan kognitif, sosial, budaya, teknologi, dan ekonomi
untuk desain website
 Pembuatan grafis untuk website yang sesuai dengan spesifikasi
 Keterampilan dalam perancangan website, komposisi warna serta tipografi.
 Penerapan prinsip-prinsip dan teknis penggunaan grafis untuk logo maupun layout
website
 Penerapan desain website yang sesuai dengan target pasar
(pengguna/audience)
  Penerapan websitedalam beragam devicesesuai dengan resolusi layar.
 Konsistensi dalam layout atau desain serta dapat mengikuti trend

Individu perlu mengetahui dan memahami:

 Membuat, menganalisis dan mengembangkan grafis yang informatif dan sesuai
dengan prinsip desain
 Membuat, memanipulasi dan mengoptimalkan grafis (akses internet)
 Menganalisis target pasar dan produk dalam website yang disampaikan
 Menentukan ide yang sesuai dengan target pasar
 Mempertimbangkan dampak setiap desain website yang dibuat
 Menggunakan elemen yang dibutuhkan dalam proses desain website
 Membuat desain responsive pada beberapa resolusi layar
 Membuat desain yang orisinal dan kreatif
 Transformasi ide menjadi desain yang estetik dan kreatif

2. Layout Design dan Client Side Implementation

Individu perlu mengetahui dan memahami:
 Menerapkan aksesibilitas kepada audience/pengguna dengan kebutuhan khusus
 Standar World Wide Web Consortium (W3C) untuk HTML5 dan CSS3
 Metode layout website dan struktur website
 Integrasi animasi dalam website
 Membuat struktur responsive desain dalam layout menggunakan HTML5 dan CSS3
 JavaScript
 Penerapan framework atau fitur dengan JavaScript

Individu harus dapat:

 Menerapkan keterampilan pemecahan masalah untuk mengakomodasi kelompok
dengan kebutuhan khusus
 Menggunakan CSS3 dengan cara yang efektif dan efisien untuk konsistensi antar web
browser
 Membuat halaman web yang konsisten pada berbagai perangkat dan perbedaan
resolusi layar
 Membuat website yang sesuai dengan standar W3C
 Menggunakan file modul 1 untuk membuat tampilan website
 3. Server Side Programming
 Individu perlu mengetahui dan memahami:
 Mengembangkan aplikasi dengan kode PHP
 Dapat menggunakan PHP Native atau memanfaatkan open source framework
(Laravel / Codeigniter) versi offline installer yang disediakan oleh juri
 Merancang pemodelan data dan mengimplementasikan database MySQL
 Membuat aplikasi web yang aman

Individu harus dapat:

 Mengembangkan desain query database dan layanan website sesuai dengan kebutuhan
 Memberikan solusi kebutuhan pada database
 Membuat SQL (Structured Query Language) dengan benar
 Melindungi terhadap gangguan keamanan

C. Soal Praktik (Bobot 100%)

Soal praktik terdiri dari 3 modul/keterampilan dalam bentuk sebuah kasus. Masing- masing
modul terikat satu sama lain. Berikut penjelasan dari masing-masing modul.

1. Modul 1 – Desain
Deskripsi: membuat sebuah desain layout homepage dan logo dari sebuah website
sesuai dengan kreativitas individu dengan menggunakan program editing. Desain harus
memperhatikan beberapa aspek seperti webpage style, warna, layout scheme, text,
images, animation dan user friendly interface. Halaman desain website dibuat
menggunakan photoshop dengan tiga jenis ukuran (1440x900px, 768x1024px,
320x480px)
Media yang disediakan berupa images, text, dan font type. (dapat ditambahkan sesuai
kebutuhan menggunakan flashdisk)
Total Nilai: 20 poin

2. Modul 2 – Layouting Design & Client Side Implementation

Deskripsi: Membuat halaman website dengan HTML5, CSS3, JQuery / Vue sesuai dengan
rancangan desain pada modul 1.
Media yang disediakan berupa JavaScript (JQuery / Vue) Total Nilai:
30 poin

3. Modul 3 – Server Side Programming

Deskripsi: Membuat aplikasi web interaktif yang sesuai pada modul 2 dengan
menggunakan server side PHP atau dapat menggunakan Framework Laravel/Code
 Igniter dan MySQL. Fungsionalitas dasar dalam web meliputi login, logout, sistem
administrator add, edit, delete data dan searching data.
Media yang disediakan berupa PHP Framework Total
Nilai: 50 poin

D. Kelengkapan Fasilitas
1. Komputer yang digunakan adalah Intel Core i5 Processor dengan kelengkapan minimal:
memori 2GB, HD 120GB, DVD RW, Monitor 14”, Mouse pad, keyboard (lihat tabel 1)
2. Berbagai software yang disediakan (lihat tabel 2)

Masing-masing peserta harus mencoba terlebih dahulu perangkat yang digunakan beserta
kelengkapannya, karena kesalahan apapun (gangguan hardware/software/hang) yang terjadi
selama perlombaan tidak akan ada penambahan waktu.

Tabel 1
NO NAMA ALAT DAN BAHAN BANYAKNYA KETERANGAN
1 Komputer untuk peserta dengan 1 unit / peserta Panitia
spesifikasi minimal
 Intel Core i7 + Driver
 Memori 8 GB
 Harddisk 120 GB
 DVD RW
Monitor 21”
Mouse
2 Komputer juri spesifikasi sama dengan 3 unit Panitia
peserta
DVD Blank 100 keping Seluruh Peserta
Notebook dan Printer untuk sekretariat 1 Set Panitia
ATK 1 Set Panitia
 Tabel 2. Daftar Software pada Komputer
No Nama Program
1 Microsoft Windows 7/8/10
2 XAMPP 5.6.11, link download :
https://www.apachefriends.org/index.html Ekstensi yang dibuka untuk lomba :
- OpenSSL PHP Extension
- Mbstring PHP Extension
- Tokenizer PHP Extension - Reflection extension
- PCRE extension
- SPL extension
- Ctype extension
- MBString extension
- Intl extension >= 1.0.2
- ICU version >= 49
- Fileinfo extension
- DOM extension
- PDO extension
- PDO SQLite extension
- PDO MySQL extension
- GD PHP extension with FreeType support
- ImageMagick PHP extension with PNG support
3 Adobe Dreamweaver, Photoshop, Illustrator (CC Edition 2015 atau CS6)
4 PHPStorm 2016.2.1 – trial edition, link download :
https://www.jetbrains.com/phpstorm/download/#section=windows-
version
5 Brackets, link download : http://brackets.io/
6 Sublime v2, link download : http://www.sublimetext.com/2
7 Composer, link download : https://getcomposer.org/download/
8 Nodejs v0.12.7, link download : https://nodejs.org/download/
9 Microsoft Office
10 Firefox Developer Edition,link download : https://www.mozilla.org/en-
US/firefox/developer/
11 Google Chrome (newest), link download :
https://support.google.com/chrome/answer/95346?hl=en
12 SQLYog/WebYog, link download :
https://www.webyog.com/product/downloads
13 MySQL Workbench, link download :
http://dev.mysql.com/downloads/workbench/
 14 7zip, link download : http://www.7-zip.org/download.html
15 Atom IDE, link download : https://atom.io/
16 Notepad++, link download :
https://notepad-plus-plus.org/download/v7.1.html
17 Sublime Autocomplete plugin, link :
https://packagecontrol.io/packages/All%20Autocomplete

E. Penutup
Hal-hal yang belum tercantum dalam kisi-kisi akan diinformasikan pada waktu rapat teknis
(technical meeting)
 DRAFT SOAL LKS
TINGKAT PROVINSI JAWA BARAT
BIDANG LOMBA : WEB DESIGN
"Buatlah website e-Business yang berisi tentang sebuah toko online yang ingin menjual
produknya dengan metode pembayaran melalui ATM dan pengiriman barang melalui kantor
pos. Toko tersebut menginginkan adanya transaksi penjualan dan pembayaran atas produk
yang dijualnya."

RUANG LINGKUP
Berikut adalah ruang lingkup yang digunakan dalam pembuatan website:

1. Jenis produk diambil dari Microsoft Office Clipt Art, minimal 10

2. Pelaku dari website terdiri dari admin toko, pembeli dan pengunjung biasa
3. Admin toko bertanggungjawab atas produk yang dijualnya beserta dengan seluruh
komponen yang ada di dalam website
4. Pembeli bertanggungjawab atas barang yang dipesan dan dibelinya
5. Pengunjung biasa dapat mencari produk-produk yang dijual
6. Pembeli harus melakukan login terlebih dahulu sebelum melakukan transaksi
pembelian
7. Semua pembayaran melalui ATM. Namun pembeli dapat memilih bank yang akan
digunakan untuk pembayaran
8. Transaksi dinyatakan selesai apabila penjual telah mengkonfirmasi struk
pembayaran dari pembeli
9. Admin toko akan menginput kode pengiriman barang sebagai bukti bahwa barang
telah dikirim. Namun proses tracking dilakukan langsung melalui website kantor
pos
10. Jumlah stok produk akan berkurang apabila admin telah mengkonfirmasi struk
pembayaran dan apabila terdapat pemesanan oleh pembeli. Khusus untuk produk
yang dipesan, jumlah sotk produk akan kembali bertambah apabila pesanan
dibatalkan oleh pembeli.
11. Pesanan akan batal apabila pembeli membatalkan pesanan atau apabila dalam
waktu lima menit pembeli tidak melakukan proses pembayaran
12. Isi dari website akan dijelaskan detail pada point "detail soal"

DETAIL SOAL
Website yang dibuat harus mengandung aspek berikut:

1. Home Page, menu bagi semua pengunjung website terdiri dari:

a. Banner, mengandung nama toko, tata warna menarik (W)
b. Site Navigation (W)
c. Promo produk terbaru atau terlaris (W) berupa animasi (O)
d. Total item belanja (W)
 e. Kotak pencarian produk (W)
f. Sign In member (W)
g. Contact Persons (W)
h. Panduan Beanja (W)
2. Menu Produk, menu bagi semua pengunjung website untuk melakukan aktivitas
berikut:
a. Mencari produk berdasarkan nama barang dan harga (W)
b. Melihat detail produk (harga, gambar, warna, size dan spesifikasi barang
lainya) (W) c
c. Melihat status produk (ready stock / tidak) (W)
d. Menambahkan produk ke keranjang belanja (W)
e. Mengshare produk ke sosial media (W)
f. Review Produk (O)
3. Menu Member, menu bagi pembeli untuk melakukan aktivitas berikut:

a. Pendaftaran member.
Form registrasi terdiri dari:
1. Nama (W): Text Box
2. Email (W): TextBox
3. Alamat Rumah (W): textbox
4. Provinsi (W): dropdown
5. No Telp (W): textbox
6. Password (W): textbox
7. Text Capcha (O): textbox

b. Validasi untuk masing-masing inputan (W):

1. Mengubah profile member (W)
2. Menentukan pembayaran atas barang yang dibeli (W)
3. Mengkonfirmasi pembayaran: Upload struk pembayaran (W)
4. Melihat status barang yang dipesan (W)
5. Membatalkan pesanan (W), hanya untuk pesanan yang belum dibayar

4. Menu Admin, menu bagi admin toko untuk melakukan aktivitas berikut:
a. Menginput produk
Form Produk terdiri dari:
a. Nama produk (W)
b. Gambar produk (W)
c. Warna Produk (W)
d. Harga produk (W)
e. Merk (W)
 f. Spesifikasi lain (O)
g. jumlah produk (W)
h. Sisa Produk (W)

Validasi untuk masing-masing inputan:

a. Mengubah produk (W)
b. Menghapus produk (W), produk bisa dihapus ketika tidak sedang
berlangsung transaksi terhadap produk tersebut
c. Melihat status produk yang terjual (W)dengan format tampilan
minimal:
No | Nama Produk | Jumlah Stock | Sisa)
d. menyetujui konfirmasi pembayaran dari member (W)
e. Menginput kode pengiriman produk (W)
f. Membatalkan pesanan pembeli (W)
g. Mengubah profile member kecuali password (W)
5. Footer, berisi: informasi legal dan copy right website (W)
6. Enkripsi Password dn Request Query String (W)
7. Font dan Warna digunakan harus konsisten (W)
8. Page Layout menggunakan CSS (W)
9. Layout harus kompatibel di Chrome, IE dan Mozilla (W)
10. Semua menu harus tersambung dengan halamannya (tidak boleh ada brokenlink)
(W)
11. Menggunakan session untuk Sign In dan Sign Out (W)

TARGET PEKERJAAN

HARI TARGET ALOKASI WAKTU

Day 1, 1. Halaman Home Page 7 Jam
17 Oktober 2018 2. Halaman Admin
3. Halaman Produk
4. Footer

Day 2, 1. Halaman pembeli 3 Jam

18 Oktober 2018 2. Enkripsi