LOMBA KOMPETENSI SISWA (LKS) SMK

TINGKAT KABUPATEN MUARA ENIM

SUMATERA SELATAN
TAHUN 2021
BIDANG LOMBA : WEB TECHNOLOGIES

DINAS PENDIDIKAN PROVINSI SUMATERA SELATAN

 NASKAH LOMBA KOMPETENSI SISWA (SMK)
TINGKATKABUPATEN MUARA ENIM TAHUN 2021

I. PENDAHULUAN
A. Nama Bidang Lomba
Web Technologies
B. Deskripsi Bidang Lomba
Sejalan dengan perkembangan dan penerapan teknologi internet, saat ini banyak sistem atau
aplikasi yang bergerak ke arah platform web. Hal ini membuat teknologi web mengalami
perkembangan yang cukup signifikan.Siswa dalam hal ini sebagai generasi yang akan
menerapkan dan mengembangkan teknologi tersebut di masa depan dituntut untuk selalu
aware dan update pada perkembangan teknologi tersebut.
Web Technologies mencakup berbagai keterampilan dan disiplin mulai dari proses produksi
sampai pemeliharaan situs web. Ini menuntut programmer web untuk memiliki keterampilan
yang beragam. Pada saat produksi situs/aplikasi web, programmer memahami konsep dan
cakupan system yang akan dikembangkan. Programmer kemudian harus bisa menerjemahkan
konsep tersebut ke dalam suatu desain web. Agar tampilan web bisa efektif dan
memaksimalkan kualitas interaksi dengan pengguna, maka seorang programmer perlu
menampilkan informasi dan komponen dalam suatu halaman dengan layout yang efektif.
Saat ini, arsitektur aplikasi web terbagi atas sisi server (server side) dan sisi client (client side).
Tiap sisi memiliki fungsi masing-masing, dan oleh karenanya juga memiliki komposisi teknologi
masing-masing.Dan programmer web juga dituntut untuk menguasai baik teknologi server side,
maupun teknologi client side. Programmer juga dituntut untuk mampu mengintegrasikan
library yang sudah ada untuk memaksimalkan fungsi web yang dikembangkan. Termasuk salah
satu kompetensi utama bagi pengembang web saat ini adalah menguasai penerapan CMS
(Content Management System). Beberapa ulasan di atas menggambarkan berbagai kompetensi
utama yang saat ini perlu dikuasai oleh seorang programmer web. Sehingga, kompetensi-
kompetensi tersebut dirasa perlu untuk diujikan pada lomba ini.

Perlombaan ini menganut sistem fair play, yakni berlomba pada batasan yang sudahdiketahui
sebelumnya, kemampuan yang dituntut adalah kemampuan bekerja dengancepat, tepat,
inovatif dan berhasil
II. RUANG LINGKUP LOMBA
Materi yang dilombakan pada LKS kali ini meliputi kemampuan desain website, layout website,
client side development,dan server side development. Detil prosentase penilaian dan waktu dari
tiap kemampuan diberikan dalam Tabel 1.

Tabel 1- Prosentase dan waktu tiap bidang lomba

No Bentuk Soal Bobot Waktu Ranah Kompetensi
1 Praktik/Tugas 100% 14 jam Keterampilan dan Sikap
Soal A: Desain Website 20 3 jam
Soal B: Layout Website 20 3 jam
Soal C: Server Side Development 40 5 jam
Soal D: Client Side Development 20 3 jam
2 Wawancara Pengetahuan,
Keterampilan dan Sikap

Soal praktek terdiri dari 4 modullain (mostly independent). Elemen-elemen kompetensi yang
dilombakan pada bidang lomba web technologies ini antara lain:

A. Desain Website
Individu harusmengetahui dan memahami:
• Masalah yang berkaitan dengan kognitif, social dan budaya untuk design Web.
• Cara membuat grafis untuk web dan design yang sesuai dengan spesifikasi.
• Mengikuti prinsip-prinsip dan pola design.
• Keterampilan yang diperlukan untuk merancang web dan memanfaatkan komposisiwarna
dan tipografi.
• Penerapan elemen design yang disesuaikan dengan pengguna.
• Penerapan desain website untuk beragam device sesuai dengan keterbatasaninternet dan
resolusi layar

Individu harusdapat:
 Membuat, menganalisa dan mengembangkan grafik yang dapat menyampaikaninformasi
dengan baik sesuai pemahaman komposisi hirarki, tipografi dan estetika.
 Membuat, memanipulasi dan mengoptimalkan resolusi gambar untuk tampilan Web.
 Menentukan sebuah ide yang paling sesuai dengan pengguna dan tema.
 Menggunakan semua elemen yang diperlukan untuk membuat design
 Membuat design responsif yang berfungsi dengan benar pada beberapa resolusilayar dan
/ atau perangkat
 Membuat sebuah design yang asli dan kreatif.
 Transform ide menjadi design estetis dan kreatif menggunakan software yangdisediakan
 Kisi-kisi:
• Membuat desain website yang responsif dengan menggunakan Adobe PhotoshopCS6 /
CC.
• Membuat icon atau aset-aset yang dibutuhkan dengan menggunakan AdobePhotoshop
CS6 / CC atau Adobe Illustrator CS6 / CC.

B. Layout Website
Individu perlu mengetahui dan memahami:
• Standar World Wide Web Consortium (W3C) untuk HTML dan CSS. Metode websitelayout
dan website structure.
• Web Accessibility Initiative (WAI)
• Mengidentifikasi aturan CSS yang tepat untuk mendapatkan hasil yang diinginkan
• Mengintegrasikan animasi, audio dan video dalam website.
• Menggunakan Javascript untuk fungsionalitas website
• Menggunakan CSS dengan cara yang paling efisien dan efektif untuk konsistensiantara
web browser

Individu harus dapat:

• Membuat halaman web yang konsisten dan berfungsi pada berbagai perangkat
danperbedaan resolusi layer.
• Membuat website yang sesuai dengan standar W3C saat ini (http://www.w3.org).
• Menggunakan CSS atau file eksternal lainnya untuk memodifikasi tampilan website.
• Membuat website secara interaktif menggunakan javascript dan jQuery sebagaipembantu
dalam menambah fungsionalitas

Kisi-kisi:
• Membuat halaman website dengan menggunakan HTML5 dan CSS3 sesuai denganstandar
W3C yang dapat diverifikasi lewat validator milik w3.org.
• Membuat desain halaman website yang responsif dengan menggunakan grid system dan
CSS3.
• Membuat animasi dengan menggunakan CSS3 dan Javascript.
• Membuat website interaktif dengan menggunakan Javascript dan JQuery

C. Server Side Development

 Individu perlu mengetahui dan memahami:
• PHP berorientasi objek
• Open source libraries dan framework
• Bagaimana merancang dan mengimplementasikan database dengan MySQL
• FTP (File Transfer Protocol) hubungan server dan klien dan perangkat lunak paket.
• Bagaimana mengelola pertukaran data antara server dan sistem client
• Pola perancangan perangkat lunak (misal: MVC (Model View Controller))
• Keamanan aplikasi web

Individu harus dapat:

• Memanipulasi data dengan memanfaatkan keterampilan pemrograman
• Melindungi website dari eksploitasi keamanan
• Mengintegrasikan dengan kode yang ada dengan API (Application Programming
Interface), library dan kerangka kerja

Kisi-kisi:
• Membuat backend API sebuah website menggunakan framework PHP Laravel.
• Membuat API sesuai dengan input dan format yang diberikan.
• Menggunakan Postman untuk melakukan pengecekan terhadap API yang dibuat.
• Membuat Frontend yang menerima dan mengirim data ke API dengan menggunakansalah
satu JS Framework berikut: ReactJS, AngularJS atau VueJS
• Menghubungkan Backend API dengan beberapa komponen HTML5 di Frontendseperti
Canvas, Form dan Komponen Halaman Website lainnya.

D. Client Side Development

Individu perlu mengetahui dan memahami:
• JavaScript
• Bagaimana mengintegrasikan perpustakaan, kerangka kerja dan sistem atau
fiturlainnyadengan JavaScript

Individu harus dapat:

• Membuat animasi dan fungsionalitas situs web untuk membantu dalam
kontekspenjelasan dan menambahkan daya tarik visual
• Membuat dan memperbarui kode JavaScript untuk meningkatkan fungsionalitas situsweb,
kegunaan dan estetika
 • Memanipulasi data dan media khusus dengan JavaScript
• Membuat kode JavaScript modular dan dapat digunakan kembali

Kisi-kisi:
• Membuat game dengan menggunakan fitur canvas di HTML5.
• Mendeteksi input melalui keyboard dan pointer mouse dengan menggunakanJavascript.
• Menampilkan dan menganimasikan gambar maupun sprite dalam canvas
HTML5menggunakan Javascript.
• Mendeteksi tabrakan yang terjadi antar objek dalam canvas.
• Memainkan suara musik latar maupun efek suara dengan menggunakan Javascript

III. PENILAIAN
A. Skor Maksimum
Tes Praktik (skor maksimal 100, bobot 100%)……...... N1
Perhitungan Nilai Tes N1:
Nilai Akhir (NA) = N1

B. Soal (Bobot Total 100%)

1. Modul A. Desain Website (Poin max 20)

Membuat sebuah design layout home page dan logo sebuah website sesuai
kreatifitaspeserta dengan menggunakan program editing image. Design harus
memperhatikan beberapa aspek seperti style, coloring, layout scheme, text, images,
animasi, dan user friendly interface. Media yang disediakan berupa images, text, dan font
type.

2. Modul B. Layout Website (Poin max 20)

Membuat sebuah website yang terintegrasi multimedia berupa animasi sesuai

denganrancangan yang telah ditentukan. Halaman website dibuat dengan HTML5, CSS dan
JQuery. Media yang disediakan berupa images, text, dan font type.
 3. Modul C. Server Side (Poin max 40)

Membuat aplikasi web interaktif sisi backend dengan menggunakan framework PHPLaravel
dan frontend dengan framework (ReactJS, AngularJS atau VueJS) serta MySQL yang
disediakan. Fungsionalitas dasar dalam web meliputi login, logout, system administrasi
add, update, delete dan searching.Media yang disediakan berupa halaman HTML dan
Images.

4. Modul D. Client Side (Game) (Poin max 20)

Membuat sebuah game yang interaktif dengan menggunakan JavaScript danmengolah data
serta kemampuan untuk manipilasi DOM . Media yang disediakan berupa Images

IV. KELENGKAPAN DAN FASILITAS

Spesifikasi peralatan yang digunakan oleh peserta lomba adalah:
a. PC yang digunakan adalah minimal sekelas Intel Core i5 dengan kelengkapan minimal: Memori
4GHz, Harddisk 120 GB, Monitor 15”, LAN Card, dan Driver.(lihat Tabel 2)
b. Software yang digunakan: (lihat Tabel 2).
c. Masing-masing peserta harus mencoba terlebih dahulu komputer yang akan digunakanbeserta
kelengkapan software yang ada, karena kemacetan, kesalahan atau error yangterjadi selama
perlombaan tidak akan diberikan tambahan waktu dan merupakanresiko peserta

Tabel 2–Daftar Alat dan Bahan

No. Nama Alat dan Bahaan Jumlah Keterangan
1. Personal Computer untuk peserta 1 unit PANITIA
dengan spesifikasi:
Intel core i5 2.2 GHz
Ethernet driver
Mouse Optical
Hardisk 500 GB
Standard Memory 4 GHz
Headset
Monitor 15"

2 Komputer untuk juri (spec sama 3 unit PANITIA

dengan peserta)

3 Printer untuk Sekretariat 1 unit PANITIA

4 ATK 1 paket PANITIA
5 Proyektor 1 unit/ruang. PANITIA
6 Wired/wireless network PANITIA

Tabel 3 – Daftar Software pada Komputer

No. Nama Software Keterangan
1. OS Windows 10
2 XAMPP for Windows 7.3.11 (PHP 7.3.11)
3 Adobe Dreamweaver, Photoshop, Illustrator (kalua
 bisa CC Edition 2015, atau CS 6)
4 Google Chrome dan Mozilla Firefox versi terbaru
5 JQuery V3.3.1
6 Bootstrap V4.1.3
7 Sublime Text Editor atau Notepad++
8 Brackets
9 PhpStorm
10 MySQL Workbench
11 FileZilla
12 Composer
13 NodeJS
14 Microsoft Office
15 Adobe Acrobat

Alat dan yang telah disedikan oleh panitia tidak dapat digantikan dengan alat dan bahan yang dibawa
oleh peserta. Alatyang disediakan oleh peserta ditunjukan pada Tabel 4.

Tabel 4 – Alat yang Dibawa oleh Peserta (Opsional)

No. Nama Software Keterangan
1. Headset No Wireless
2 Keyboard No Wireless
3 Mouse No Wireless

V. RENCANA JADWAL
Rencana jadwal (tentatif) kegiatan lomba selama 3 hari diberikan di Tabel 5.
Tabel 5 – Rencana Jadwal (tentatif)
Hari Ke- Jam Kegiatan
1 Menyesuaikan jadwal panitia Pembukaan
Menyesuaikan jadwal panitia Technical Meeting
2 08:00 - 08:30 Persiapan Lomba Hari ke-1
08:30 – 11:30 Lomba Modul A
11:30 – 12:30 ISHOMA
12:30 – 15:30 Lomba Modul B
15.30 – 16:00 ISHOMA
16.00 – 17:00 Penilaian Lomba Hari ke-1
3 08:00 – 08:30 Persiapan Lomba Hari ke-2
08:30 – 11:30 Lomba Modul C
11:30 – 12:30 ISHOMA
12:30 – 14:30 Lomba Modul C (lanjutan)
14:30 – 15:00 ISHOMA
15:00 – 18:00 Lomba Modul D
18:00 – 18:15 ISHOMA
18:15 – 19:00 Penilaian Lomba Hari ke-2
19.00 – 20:00 Pleno Juri
VI. TATA TERTIB LOMBA
Pembimbing diharapkan:
1. Mendampingi peserta pada saat ‘technical meeting’.
2. Mengisi daftar hadir yang disediakan Panitia.
3. Menjaga ketertiban dan ketenangan dalam pelaksanaan lomba.
4. Membantu peserta yang dibimbingnya apabila terjadi gangguan kesehatan.
5. Tidak membantu peserta pada saat lomba berlangsung

Peserta diharapkan:
1. Hanya satu orang yang menjadi peserta mewakili Kota/Kabupaten dengan SuratPenunjukkan
dari Dinas Pendidikan di Kota/Kabupaten. Tidak dibenarkan pesertadiganti pada saat tengah
lomba berlangsung.
2. Peserta harus hadir pada ‘technical meeting’.
3. Peserta harus sudah hadir 15 menit sebelum lomba dimulai, bagi yang terlambatharus
mendapat izin dari panitia dan tidak ada perpanjangan waktu.
4. Wajib mengisi daftar hadir pada saat setiap jenis lomba yang diadakan.
5. Penentuan nomor peserta dilakukan melalui undian, bagi peserta yang tidak
mengikuti technical meeting, nomor undian ditentukan oleh panitia.
6. Berpakaian kerja yang rapi.
7. Peserta lomba wajib menempati dan menggunakan peralatan lomba sesuai denganhasil undi.
8. Waktu istirahat (max 60 menit)/ditentukan sesuai situasi saat lomba.
9. Peserta tidak dapat melanjutkan lomba dikarenakan sakit atau hal-hal lain, makadianggap
gugur / mengundurkan diri.
10. Peserta tidak dibenarkan berkonsultasi atau mendapat pengarahan teknis tentangpekerjaan
(job) pada waktu kegiatan berlangsung dari pembimbing masing-masingkecuali dari tim juri.
11. Kegagalan/keterlambatan pekerjaan tidak diberikan toleransi (misalnya karena lupapekerjaan
belum di-save).
12. Peserta lomba wajib melakukan pemeriksaan peralatan dan kebersihan lingkungankerja.
13. Pemeriksaan peralatan dilakukan oleh peserta di depan juri dan panitia selama lebih kurang 60
menit sebelum perlombaan dimulai.
14. Kerusakan peralatan (hardware/software) akibat kesalahan prosedur yang dilakukan peserta,
menjadi tanggung jawab peserta itu sendiri.
15. Tidak dibenarkan menggunakan peralatan (hardware/software) di luar ketentuanyang ada
16. Pembimbing tidak dibenarkan masuk ke ruang lomba atau menghubungi peserta baiklangsung
maupun alat komunikasi pada saat lomba berlangsung dengan alasanapapun.
 17. Tidak diperbolehkan membawa buku/catatan/HP/flashdisk di ruang ujian.
18. Tidak diperbolehkan mengakses internet pada saat lomba berlangsung.
19. Untuk alasan kesehatan peserta diperbolehkan membawa makanan kecil danminuman ke
dalam ruang ujian.
20. Ketentuan lain yang belum tercantum dalam tata tertib ini diputuskan oleh kebijakan juri
(ditentukan kemudian sesuai kebutuhan)
21. Pelanggaran terhadap tata tertib ini akan diberikan sanksi berupa teguran sampaiberupa
pemberhentian sebagai peserta.

VII. PENUTUP
Hal-hal yang belum tercantum dalam lembar informasi ini akan diinformasikan pada waktu rapat
teknis (technical meeting)
 INSTRUCTIONS TO THE COMPETITOR
You do not need to implement all the tasks. There will be instruction on C1 to clarify which
tasks are selected to be implemented.

MARKING SCHEMESECTIONUDGEMENTARKS
A1 Design 0 4 4
A2 Layout 0 4 4
A3 Front-end 0 4 4
A4 Back-end 0 4 4
A5 CMS 0 4 4

CMS MODULE INTRODUCTION

You are a freelancer working in the field of Web Technologies and you have been asked to
develop the brand-new website for Kazan’s most beautiful museums. Your client has
heard that you are good at building content management system.

DESCRIPTION OF PROJECT AND TASKS

This module involves knowledge about website design, website layout techniques,
client- side scripting, and server-side scripting, all combined in one CMS project. You will
be using one of the most popular content management systems - WordPress.

Your job is to develop a website backed by content management system. Please create
your own theme as a child-theme of a given starter WordPress theme. Please name your
theme

MUARA ENIM TOURISM

The goal of this website is to present Trip & Travel in Muara Enim, with some selected trips
that contain extra news information. It also gives a list of upcoming events. The goal of this
website is to present an overview of all available Tour in Muara Enim and to give a list of
upcoming events, which could be of interest to all tourists visiting Muara Enim. The target
audience for this page are tourists visiting Muara Enim. This can be a wide range, therefore
you will define your interpretation of the target audience (based on “tourists visiting Muara
Enim”). Also please make sure you have the title and slogan deinfed in the content
management system.

The admin and editor need to have the possibility to add and modify every entry for
each Tour to either update existing information or add new museums to the list.
CONTENT MANAGEMENT SYSTEM

For administration tasks, we need two user profiles, Admin and Editor:

• The Admin user - access to the complete WordPress main dashboard.

o Username: admin
o Password: admin

• The Editor user – access as editor role in the CMS.

o Username: editor
o Password: editor

We want the CMS login page to be white-label. That means the login page should not show
the CMS default logo. The background should be a fullscreen museum photo from one of the
museums.
Also the login page should not include any “wp” wordings for white-label reasons.
Please make the backend admin URL as following: <host>/admin/

Managing Trip & Travels and pages

The client wants to be able to add, edit, update, delete tourism records. There are
selected tourisms to have custom tourism page.

Selected (highlighted) tourism

The client wants to highlight the following selected tourism. This list is static. In the future,
the client may want to add or remove tourism from the selected list. But this is not in the
current scope of work.

- Bedegung Waterfall
- Bemban Waterfall
- Curup Bali Waterfall
- Enim river rafting
- etc

For museum pages that are listed above, they have different layout than general pages. The
client would like to have large full-page background with the tourism photo. This photo is
selected by featured photo of the page.

Also, we need news posts from this specific tourism to be displayed in the page.

All other museums

For tourism pages that are not on the selected list, general page template is enough. There
is no need to show tourism specific news post in these tourism pages. This general page
should have a large photo banner as header. This photo is selected by featured photo of the
page.
News Blog Post
From time to time, there will be news from the website as well as from specific all
traveling. These blog posts should be categorized.

The client wants to show news posts from all categories in the home page. While in the
specific Trip & Travel page, the client wants to show news posts from only the category
for the travel.

Post Categories
- Site Updates
- Seasonal Events
- Each selected tourism

Pages and URL Strategy

Accessibility is very important to our website. We would like to lavarage different
levels of accessibility optimization.
URL level of accessibility

All tourism page should have its own URL permalink. For example, the page for museum
of national culture may have URL: <host>/museum-of-national-culture/ News posts
should have following URL structure:
• All news: <host>/news/
• News from a category: <host>/news/<category name>

Dashboard Configuration
The client wants to have At a Glance, Activity, Quick Draft in the dashboard. Please
configure these dashboard widgets and remove all others in the dashboard.

Contact Form
The client does not have budget to build a contact form right now. We choose to use free
static form to email service for the contact form. This is done by a static form with action
pointing to the following URL. Please configure to send the email to admin@example.com.
POST https://formspree.io/email@domain.tld
The form should have the following input field: name, email, content. You
may find a form example code in the media file.

Menus
The menu should stick to the top when scrolling down the page. The menu has the
following items.
- Home
- Tourism (Drop down menu)
- Seasonal Events (List posts from categories "Seasonal Events" from all tourism)
- Contact Us
- Login
 Front-end Requirement
You will need to create your own theme, based on the given starter themes. You will need
to implement the following elements for your web page:
- A footer with copyrights and social media links
o “Copyright © 2019 - All rights reserved” where the year should be the current year
dynamically based on server time.
o Footer plugins should be used for footer links to Twitter, Facebook and Instagram.
User is able to change the social links. Feel free to add and change as many elements as
you like, but the elements in the list need to be present and your design
should blend in with the given design.

The client does not like refreshing the whole page. Page transition should be loaded via
JavaScript with animated transition effect. (This does not apply to admin area)

Home Page Layout Columns strategy and mockup

The layout should be responsive for different screens including mobile and desktop. Home
page in desktop screen should have a multiple columns layout. Left half is the news
and right half is some kinds of cover and images.
Home page in mobile screen should have a top-down layout strategy. Each column take
the full width of the screen, except for the list of selected museum. They should have a
left and right 2 columns layout.

Further optimization tasks

The page needs to be optimized for search engines.
You can choose one of the provided plugins or implement your own SEO.
Remember to optimize certain parts of your website (e.g. urls, sitemap, ...).
Secure your page by installing and configuring a security plugin.
Note: If the plugin you would like to choose is broken or does not work as expected, you
need to choose another one or feel free to fix this plugin.

The page should follow the Web Content Accessibility Guide.

Publish the finished website on: http://localhost/XX_lks2021 XX is your competitor
number. Example http://localhost/01_lks2021
EQUIPMENT, MACHINERY, INSTALLATIONS, AND MATERIALS REQUIR