SOAL LATIHAN

DESKRIPSI TEKNIS

Web Design and

Development
DOKUMEN LKS SMK
TINGKAT NASIONAL XXVII TAHUN 2019

LOMBA KOMPETENSI SISWA SEKOLAH MENENGAH KEJURUAN

TINGKAT NASIONAL XXVII
TAHUN 2019
1. Client Side

1.1. Introduction
In recent years, the internet has become an integral part of our
daily lives, enabling the dissemination of information in an
inexhaustible source of content and interaction. Every day the use
of games has gained a prominent role in this universe, allowing
millions of people to get access to fun and entertainment quickly
and free.

Thinking about these concepts, you decided to develop a small

game that works in the most common web browsers and that
makes it possible to spread your talent in the skill of web design
and development. The game will be called Brick Breaker.

You should design the game, develop the layout using HTML and
CSS and develop client-side programming using JavaScript and its
open source libraries. Some media files are available to you in a zip
file. You can create more media and modify anything in the media if
you want.

To be used in different resolutions your game needs to be

developed in a resolution with 480x800 pixels. But, if game is open
in a big screen, the game must be in the center of the screen
(horizontally and vertically).

1.2. Project Description

This is a module of 5 hours. Your first 2.5 hours must be used to
create the design of the game in three PNG images and the initial
layout using HTML/CSS. Your layout should follow the design that you
created. The final 2.5 hours you will create the functionality of game

Sistematika Tata Letak Dokumen LKS SMK Tahun 2019

2
using JavaScript that allows the game to work correctly in different
web browsers, following the requirements described below.
Brick Breaker game uses elements described below:
1) Player pad: Element that is controlled by the player.
2) Ball: Element that is bouncing around the screen and
destroying brick.
3) Standard Brick: Elements that can be destroyed by the ball.
4) Top Steel Brick: Elements that can be destroyed by the ball
only from it’s bottom.
5) Bottom Steel Brick: Elements that can be destroyed by the ball
only from it’s top.
6) 5 Ball Brick: Elements that can be destroyed by the ball and
spawn 5 ball each in different direction.
7) Power Brick: Elements that can be destroyed by the ball and
double ball damage for 10 seconds.
8) Bomb Brick: Elements that can be destroyed by the ball and
deal damage to all adjacent brick.
9) Logo: Add provided logo to the background screen.
10) Score Count: Element that shows current player score.
11) Round Count: Element that show the current round number.
12) Pause Button: Element to pause the game.
13) Sound Button: Element to mute/unmute sound.

1.2.1. First 2.5 Hours – Design And Initial Layout

1. Deliver at least 3 PNG image files that present:

1.1. Main Menu: The first screen of the game presents part of
instructions to the user and the “Play” button. The background
of the screen must show how the game looks like. The
instructions for the game are included in the media files.
1.2. Game board layout: This design must present all 9 elements
described above in the game screen.
1.3. Ranking Table presentation: This design must present the logo
of game and ranking with the following columns: position,
Sistematika Tata Letak Dokumen LKS SMK Tahun 2019
3
 name, score and round in this order, with the table is presented
the “Play” button.

2. Develop the initial markup (HTML + CSS) of your game application.

When the address is accessed
(http://competitorXX.asc.local/XX_Client_Side) the game is
presented to the user with the game instructions and the button
“Play”. The instructions must be presented one by one in an
animated way.
XX is your workstation number.

3. “Play” buttons must have active and hover effects. The background
of the buttons in hover state must be: #241D4F. The active state
must be a slide effect with #656083 that is moving from the left to
the right.

4. You should draw all elements except logo to be included in your

design. Create the elements that represent the same visual style.

5. The HTML and CSS code must be valid in the W3C standards for
HTML 5 and CSS 3 rules.

1.2.2. Final 2.5 Hours – Game Functionalities

1. Pressing the “Play” button in the initial screen starts the game. The
game will generate brick randomly in a 4 rows and 9 column
configuration. In each configuration there must be exactly one of the
3 available power-up brick that cannot be placed in the side of the
groups. The player will be given 3 life at the start of the game.

2. At the start of the game, the ball will launch from the center of
player pad vertically to the top of the screen.

Sistematika Tata Letak Dokumen LKS SMK Tahun 2019

4
3. The ball will move around and reflected each time the ball hits
either the sides, the top of the screen, the brick, other ball or player
pad. Other than player pad, the ball needs to be reflected in the
same degree to the opposite direction of the incoming direction.

4. The ball cannot leave the screen except in the bottom of the screen.

5. All brick must be placed in the top area of the screen, and player
pad must be placed near the bottom of the screen.

6. Each brick will be destroyed after a ball hit it twice. The top steel
brick can only be damaged if the ball hit its top and the bottom steel
brick can only be damaged if the ball hit its bottom. Each destroyed
brick will increase the score progressively, the first destroyed brick
will give 1 score, and the next brick will give 2 score, and so on. The
given score will be reset to 1 each time the ball hit the player pad.

7. There is 5 ball brick that will spawn 5 new ball each in different
directions when destroyed.

8. There is power brick that will make all brick can be destroyed in one
hit and can also destroy steel brick in one hit from the steel parts for
10 seconds with matching indicator.

9. There is a bomb brick that will make all 8 adjacent brick destroyed
at once when destroyed.

10. Player can move the player pad by moving the mouse in the
direction they want. The player pad must follow the mouse
horizontal position on the screen.

Sistematika Tata Letak Dokumen LKS SMK Tahun 2019

5
11. When the ball hit player pad, the ball will be reflected according to
the place it hit. The player pad have 3 parts with equal widths: left,
center and right.

12. If the ball hit the center part, the ball will be reflected with equal
degree of opposing direction from the incoming direction (if the ball
come from the right in 30 degree angle and hit the center, it will
reflected at 30 degree angle to the right).

13. If the ball hit the left part, the reflected direction will be added 30
degree to the left and if the ball hit the right part, the reflected
direction will be added 30 degree to the right.

14. There is a round system that determine the difficulty of the game,
whenever all brick is destroyed the round will be added by 1. In the
first round, all brick is normal brick and brick with power up. In each
third round, add one row to the brick configuration. In other round,
add 5 steel brick to replace 5 normal brick.

15. When the last ball on the screen pass the player pad from the top of
the pad to the bottom of the pad. The player’s life will be decreased
by 1.

16. The game is over when either the player life is zero or player
successfully clear round 8.

17. During the game, the user can pause the game by clicking the
pause button, or by pressing the letter “p” on the keyboard. When
the game is paused, all interactions and sounds must be stopped. If
the user clicks the pause button again, or presses the letter “p”
again, the game continues from the moment that it was paused.

Sistematika Tata Letak Dokumen LKS SMK Tahun 2019

6
18. To make it easier to test the game, when the player type “invincible”
during 5 second period the player pad will expand to fill the width of
the screen, and when in the full pad state the player type “return”
the player pad will return to normal.

19. When the game is over, the animations, sounds, interactions and
the timer counter stops, the game will collect the name of the user
in a form field “Name”. The user fills the “Name” field and clicks the
button “Continue”. The “Continue” button should be disabled until
the user fills in the “Name” field.

20. The user name, the score and the round number need to be
persistent in the local machine
20.1. name: name of the user
20.2. score: number (integer) of points earned in a game
session
20.3. round number: number (integer) of brick group cleared

21. The game presents the user ranking to the user with the button
“Play” that permits restarting the game. Clicking in the “Play” button
the game instructions are presented to the user again.

22. The ranking needs to be ordered by the score in descending order

and round number in ascending order. If more than one user has
the same score and the same time, they receive the same position
in the ranking.

23. To increase the game interaction, some sound effects need to be

used:
23.1. background.mp3: used during the game;
23.2. destroyed.mp3: played when a brick is destroyed;
23.3. hit.mp3: played when the ball hit player pad or brick;

Sistematika Tata Letak Dokumen LKS SMK Tahun 2019

7
 24. Use your talent to increase the usability of the game as much as
possible to permit a better experience for the user.

25. There must be an option to disable/enable game sounds. If the

sound is disabled, none of sounds should be played. If sound is
enabled all sounds must be played.

26. Your game should remain at the same state if the page is
refreshed.

27. Your game should work without JavaScript errors or messages

shown in the browser console.

28. Maintain your HTML/CSS and JavaScript code organized and clean
to facilitate future maintenance. Use correct indentation and
comments. Use meaningful variable names and document your
code as much as possible so another developer would be able to
modify your work in the future

29. The game needs to work correctly in two browsers, Google Chrome
and Mozilla Firefox. The game requirements will be checked in
Google Chrome and compatibility will be checked in Mozilla Firefox.

1.3. Instructions To The Competitor

1. The media files are available in the ZIP file. You can modify the
supplied files and create new media files to ensure the correct
functionality and improve the application. You can use any supplied
JavaScript framework if you find it necessary.
2. Save your design files in a folder call "XX_Client_Side/XX_design"
where XX is your Workstation number.
3. File names:

 Instructions: XX_main_menu.png

Sistematika Tata Letak Dokumen LKS SMK Tahun 2019

8
  Game board: XX_game_board.png
 Ranking: XX_ranking.png

4. You should create additional images for each of the requested

resolution to highlight hidden elements, animations, interactions, or
any additional information that will assist in the presentation of the
game design.
5. Additional file names

 Instructions: XX_main_menu_2.png, XX_main_menu_3.png…

 Game board: XX_game_board_2.png, XX_game_board_3.png
 Ranking: XX_ranking.png, XX_ranking_2.png, XX_ranking_3.png.

6. Save any image source files to a folder named "XX_source" inside

the "XX_Client_Side/XX_design" folder. The source files are the
files that contain the layers, development files, ie .psd, .ai, .svg, .jpg.
7. Save the working game to the directory on the server named
"XX_Client_Side". Be sure that your main file is called index.html.
8. You are responsible for the time management in your development.
If you finalize some tasks you can continue to other tasks. The initial
2.5 hours only define what will be evaluated first.

2. CMS

2.1. Introduction
Thailand Food Guides is a brand new startup company that
wants to introduce Thailand cuisine around the world. The company
needs a new website to showcase a lot of recipes, ingredients and
blog posts about Thailand cuisine to the young people who access the
website.

2.2. Project Description

This module requires you to implement your skill of website
design, website layout, client-side scripting and server-side scripting
using WordPress, the most popular Content Management System.
You have to develop a new fresh theme called
Sistematika Tata Letak Dokumen LKS SMK Tahun 2019
9
Blankslate_Child_ThailandFoodGuides as a child theme. For a better
functionality of the website you will need to add some of the provided
or self-developed plugins.
The company wants the website to be able to manage a lot of
recipes, ingredients and blog posts from the dashboard. The website
also needs to accommodate several users and moderators that will
help contribute in creating content about Thailand cuisine. There will
be several plugins that is provided, you are expected to use them and
make your job easier.
To make sure your website is secure and can be seen by a lot
of people, you are expected to implement SEO and security plugin to
the website. The design must feel modern and fit the target audience
for Thailand Food Guides: Mostly teens both male and female.

2.2.1. Website Design Detail

You are required to the design of the website for the specified
resolutions in order to make your website responsive and can be
accessed by all devices:
Desktop: 1440px,
Tablet: 768px,
Mobile: 320px.
Don’t forget to add the design you create to the mockup provided to
make it easier for the company to see your design. In this mockup you
only need to present the design of the main page. For each design
except the mockup, you must divide each components into different
layer. You need to include both *.png as the result and *.psd or *.ai as
the sources of your desktop, tablet and mobile design.
You should save the mockup file as: Mockup_ThailandFoodGuides.*.
The mockup should be saved as *.png or *.psd or *.ai.
You should save the design file as: Desktop_ThailandFoodGuides.*,
Tablet_ThailandFoodGuides.* and Mobile_ThailandFoodGuides.*. The
designs should be saved as *.png and The sources should be saved as
*.psd or *.ai.
Sistematika Tata Letak Dokumen LKS SMK Tahun 2019
10
The main page template:
The main page template includes
1. Image banner
2. Food recipes posts
3. Food Image Gallery
4. Food blog posts
5. Footer with copyright and social media links

Navigation bar in the website must be fixed to the top of the window
when scrolled. The navigation bar must contain the company logo and
links to main page, recipe lists, blog posts, ingredients database and
search functionality for recipes.
Also, you have to implement a sidebar for the website which content
can be modified by admin in the dashboard. The sidebar will be used
mostly to present blog posts. Please remember that you must not add
search widget to the sidebar because it is already added in the
navigation bar. The sidebar must be added to all posts and pages.
Footer must be implemented in all posts and pages and must contain
the list of at most 5 popular recipes in the website, at least three social
media icons and copyrights with your country name in it.
You can add your own elements to enhance the design of the website.
The post content and post design should be appealing to attract users
to read the post. Adding animations can be a good way to attract users
to read the post. For each posts, the featured image is optional, make
sure the design won’t damage the design if a posts doesn’t contain
featured image.
The company also wants their website to display food recipes based on
the number of likes of the recipe so that users can make their own food
using the most popular recipe. Visitors can like the food recipes they
currently read. Each visitor can only like a recipe once.
The food recipe section should show the list of the recipes that was
added by the admin. It should be ordered based on the number of likes

Sistematika Tata Letak Dokumen LKS SMK Tahun 2019

11
of the recipe. The higher the number of the likes of the recipe, the
recipe will be shown first in the main page.
For each category (food recipe, food ingredients and food blog posts)
there must be a dedicated page that will show all the post in specific
category, so people can find posts that doesn’t appear in the main
page.

2.2.2. Technique
The website shouldn’t produce any weird result when scaling the
browser window between 1440px and 320px. The layout of the website
should be identical to your designs. You have to implement the
responsive design on the website. For a better standard of the SEO
support for the website, you should implement the HTML and CSS
based on the W3C standards.

The food blog post should always show at most the top four trending
post based on user view. User view amount should present in the food
blog table in the admin dashboard and in each blog post for the user to
see.

The food recipe post should always show at most the top four trending
post based on user likes. Recipe can be liked by users and it will affect
the order of listing of the recipe in the main page based on the like
numbers. The like amount of the recipe should also present in the food
recipe table in the admin dashboard and in each recipe post for the
user to see. Food recipe post should contain the ingredients that’s
needed by the recipe and can link to the ingredient post. All food blog
posts, food recipes posts, ingredient post can be commented by users
and all comment can be replied at most two levels deep. Each
ingredients should contain 3 additional field (calorie, fat and
carbohydrate).

Sistematika Tata Letak Dokumen LKS SMK Tahun 2019

12
In each category, all post must be listed using paging technique which
shows at most 7 posts per page in each category. Don’t forget to sort
the post using it’s creation time, which means newer post must appear
in front of the older post.
Because this page will be accessed by people all around the world, the
company wants you to implement the multilingual functionality on the
food blog post.

Style guide Details

Necessary elements for the style guide including colors, sizes,
and fonts
 Company Logo
 Color
 Buttons
 Main Title
 Sub Title
 Content Title
 Paragraph
 Navigation

For the sake of the good maintenance of the design and future
development, you are required to design a style guide for the future
web designer. Don’t forget to add comments and explanation to the
style guide to make sure that all of the elements provided will be used
in the right way.

The style guide must be saved as: Style_Guide.*. The style guide must
be saved as *.png and *.psd or *.ai.

CMS Details
For security reason, users need to have certain roles in order to access
the features. There should be 3 different users for the Wordpress with
their own access of dashboard features:

Sistematika Tata Letak Dokumen LKS SMK Tahun 2019

13
 1. User: Able to submit a new draft for the blog post
 Username: user
 Password: userx
 Role: User
2. Moderator: Able to accept/reject a new blog post created by user
and publish blog post on his own
 Username: moderator
 Password: moderatortest
 Role: Moderator
3. Admin: Able to do everything without limitation
 Username: admin
 Password: adminhaha
 Role: Administrator

Layout Builder

Use one of the provided layout builder plugins to enhance the

capability of your CMS. The layout builder must be able to create
different types of layout for the pages and posts in your CMS. Also the
layout builder must provide several types of widgets that can be used
to create beautiful content in your website easily. At the very least the
layout builder must be able to add widgets (text and image), add rows
and columns, save previously created layout or template and provide
some kind of live editor.

Photo Album (layout builder widget)

Create a photo album that can be used as a widget in the layout

builder. The widget must have the ability so that creator can choose or
add the images in the album and add description to each image. The
photo album need to be able to do two things, first it will show the
primary image and image description that is added by creator from the
dashboard, and then it need to provide a button to show all images in

Sistematika Tata Letak Dokumen LKS SMK Tahun 2019

14
 the photo album in which an image can be selected to be shown as the
new primary image. The design of the photo albums must match the
overall design of the website.

2.3. Instruction to Competitor

Publish the finished design and source files on:
http://competitorYY.wsad.local/XX_cms_module/design
Publish the finished website on:
http://competitorYY.wsad.local/XX_cms_module
XX is your country code. YY is workstation number.

3. Server Side

2.1. Introduction

2.2. Description of project and tasks

The description for the first phase of the project is listed below.
The first task is to create a restful web service API that can be used by
the front end to communicate the data.

I. Web Service
“Suka Koding” will provide the list of web services that need to be
created. Web service specification will contain the URL path of
web service, request method, requested parameter on URL,
requested parameter on body request, response result and
response status. Request and response on web service should
only contain JSON.

There are three roles/types of users: public, authenticated user

and admin.

These are the list of web service that requested by the company:

Sistematika Tata Letak Dokumen LKS SMK Tahun 2019

15
1. Authentication
a. Login (v1/auth/login)
Description: For client to get login token via username and
password
Request method: POST
Header: header authorization basic
Requested parameter:
- Body:
o Username
o password
Response result:
- If success,
o header: response status: 200
o body:
 token`: authorization token (to be valid until logout).
Token will be generated by the system from logged in
username with md5 encryption method
 Role (ADMIN / USER)
- If username/password not correct or empty,
o header: response status: 401
o body: message: invalid login
b. Logout (v1/auth/logout?token={AUTHORIZATION_TOKEN})
Description: For server to invalid the user’s token
Request method: GET
Header: header authorization basic
Response result:
- If success,
o header: response status: 200
o body:
 message: logout success
- If unauthorized user access it, data:
o Message: Unauthorized user
o Response status: 401

Sistematika Tata Letak Dokumen LKS SMK Tahun 2019

16
2. Proposals
a. All Proposals (v1/proposal?token={AUTHORIZATION_TOKEN})
Description: For client to list all proposal in the database
Request method: GET
Header: header authorization basic
Response result:
body:
o All data on array; consists of id, name, description, deadline,
time_needed, profit
 Name: project name
 Description: project description
 Deadline: Integer. Week of the year. Example: 8 January is
2. 23 January is 4.
 Time_needed: Integer of time needed in week(s).
 Profit: Decimal of project payment.
o Response status: 200
- If unauthorized user access it, data:
o Message: Unauthorized user
o Response status: 401
b. Find Proposals
(v1/proposal/{ID}?token={AUTHORIZATION_TOKEN}))
Description: For client to fetch one proposal object via proposal ID.
Request method: GET
Header: header authorization basic
Response result:
- body:
o object; property consists of id, name, description, deadline,
time_needed
o Response status: 200
c. Create Proposals
(v1/proposals?token={AUTHORIZATION_TOKEN}), only admin
can access this API
Description: For client to create a new proposal object.

Sistematika Tata Letak Dokumen LKS SMK Tahun 2019

17
 Request method: POST
Header: header authorization basic
Request parameter:
- Body:
o name
o [description]
o deadline
o time_needed
o profit
Response result:
- If success, body:
o Message: create success
o Response status: 200
- If failed, body:
o Message: Data cannot be processed
o Response status: 422
- If unauthorized user access it, body:
o Message: Unauthorized user
o Response status: 401
d. Delete proposal
(v1/proposal/{ID}?token={AUTHORIZATION_TOKEN}), only admin
can access this API
Description: A request to delete a proposal object via given
proposal ID.
Request method: DELETE
Header: header authorization basic
Response result:
- If success, body:
o Message: delete success
o Response status: 200
- If failed, body:
o Message: Data cannot be deleted
o Response status: 400

Sistematika Tata Letak Dokumen LKS SMK Tahun 2019

18
 - If unauthorized user access it, data:
o Message: Unauthorized user
o Response status: 401

e. Update proposal
(v1/proposal/{ID}?token={AUTHORIZATION_TOKEN}), only admin
can access this API
Description: For client to update an existing proposal object via
given proposal ID
Request method: POST
Header: header authorization basic
Request parameter:
- Body:
o [name]
o [description]
o [Deadline]
o [time_needed]
o [profit]
Response result:
- If success, body:
o Message: update success
o Response status: 200
- If failed, body:
o Message: Data cannot be updated
o Response status: 400
- If unauthorized user access it, body:
o Message: Unauthorized user
o Response status: 401

3. Suggestion
a. Give suggestion
(v1/suggestion?token={AUTHORIZATION_TOKEN}), admin and
user can access this API

Sistematika Tata Letak Dokumen LKS SMK Tahun 2019

19
Description: For client to get accepted proposal suggestions. Sorted
by working order.
Request method: GET

Example:
Current week of the year: 1
Current submitted proposals:
Name deadline time_needed profit
IDR
A 4 1 40,000,000
IDR
B 3 2 50,000,000
IDR
C 2 1 30,000,000
IDR
D 6 3 35,000,000

The accepted proposals are:

Finish
Name Time
C 2
A 3
D 6

With total profit: IDR 105.000.000

Response result:
body:
o All accepted proposals on array; consists of id, name,
description, deadline, time_needed, profit
o Response status: 200
- If unauthorized user access it, data:

Sistematika Tata Letak Dokumen LKS SMK Tahun 2019

20
 o Message: Unauthorized user
o Response status: 401

II. Front End

On the front-end there will be some functionality that is required by “Suka

Koding”. Create a front-end website for this company in single page
application. Create all the functionalities for the page with communication
with the backend web services API.

Website components that have been provided are:

Proposal Administration
Functionalities:
a. View all proposals
Only show name, deadline, time needed, and profit. Description
is not shown.
b. View detail of a proposal
Show all information about a proposal
c. Create a proposal (admin only)
d. Update a proposal (admin only)
e. Delete a proposal (admin only)

1. Proposals Suggestion
User can click a button to generate accepted project suggestions.
Show all information about accepted proposals, calculate and show the
total profit.

2. User Authentication
Functionalities:
a. Login and logout should happen on the same page without
redirect.
b. Login
 Show the login modal, after user click login link.

Sistematika Tata Letak Dokumen LKS SMK Tahun 2019

21
  On the login dialog there will be inputs for username and
password.
 After the user logged in, the login link will be changed to
logout link and the current username will be displayed
besides the logout link.
 There will be role for the two types of authenticated user: if
user is an admin the admin menu will be shown.
 The username entered, and token received, token will be kept
on the client for further requests, also after page refresh.
c. Logout
 The display is reset: login link is shown; username and
corresponding functionality disappear.

Notes

 Competitors should implement a minimum of one of the server-side and

client-side frameworks/libraries that are provided.
 The provided template design should be used, but it can be enhanced to
get better functionality for your site.
 Show error/feedback messages based on response from API.
 The specified database tables need to be implemented. More tables may
be added if needed. Provide a final SQL-dump and ERD screen as
specified below.
All API should fulfill all requirements as stated in the description. All prefix,
RESTful-URL and HTTP-Method from given API link should be
implemented correctly and not be changed. If needed, you may add
another API, besides all API that already mentioned in this document.
 Create the following users to login to the system:
▪ Admin with username: admin and password: adminpass,
▪ User1 with username: user1 and password: user1pass,
▪ User2 with username: user2 and password: user2pass
 Changes made in the data on the back-end server need to be propagated
to the frontend. The data should be dynamically shown.

Sistematika Tata Letak Dokumen LKS SMK Tahun 2019

22
Monitor screen size should not affect any function on the client side. (working
on 1440px, 768px and 320px width)

Sistematika Tata Letak Dokumen LKS SMK Tahun 2019

23