KISI KISI

LOMBA KOMPETENSI SISWA SMK

TINGKAT PROVINSI KALIMANTAN SELATAN
TAHUN 2018

BIDANG LOMBA :
WEB DESIGN & DEVELOPMENT

DINAS PENDIDIKAN DAN KEBUDAYAAN

PROVINSI KALIMANTAN SELATAN
Jl. Darma Praja II No. 1 Trikora Banjarbaru
KISI – KISI LKS PROVINSI KALSEL 2018 BIDANG WEB DESIGN &
DEVELOPMENT

CLIENT SIDE

1.1 Contents

This Test Project proposal consists of the following documentation/files:

1. ASC2018_TP_CLIENT_SIDE_EN.PDF
2. ASC2018_TP_CLIENT_SIDE_MEDIA.ZIP – Media Files

1.2 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 Star Battle.

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

1600x900 pixels. But, if game is open in a big screen, the game must be in the center of the
screen (horizontally and vertically).

1.3 Description of project and tasks

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 using JavaScript
that allows the game to work correctly in different web browsers, following the requirements
described below.

Star Battle game uses elements described below:

 1. Main spaceship: Element that is controlled by the player.
2. Planets in background: Elements that move from right to left to give the impression of movement of
the spaceship in the space.
3. Enemy spaceships: Elements that player needs to destroy to get points.
4. Asteroids: Elements that player needs to destroy to get points.
5. Friendly spaceships: Elements that player shouldn’t destroy or player will lose points.
6. Fuel icon: Elements that player needs to collect to increment the fuel level.
7. Fuel Counter: Element that shows how much fuel is available. It must be a number and a graphical
element and it should be animated when the fuel is decreasing and when the user gets more fuel.
8. Score Counter: Elements that shows how many points the user got destroying asteroids and enemy’s
spaceships.
9. Timer: Element that shows how much time the spaceship is flying.
10. Logo: Add the provided logo in the game.
11. Shot: Shot by the ships.

FIRST 2.5 HOURS – DESIGN AND INITIAL LAYOUT:

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

1.1. Game Instructions: The first screen of the game presents the instructions to the user
and the “Start Game” button. The instructions for the game are included in the media
files.
1.2. Game board layout: This design must present all 15 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, name, score and time in this order, with the table
is presented the “Start Game” 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 “Start Game”. The instructions must be
presented in an animated way.
XX is your workstation number.

3. “Start Game” buttons must have active and hover effects. The background of the buttons in
hover state must be: #241D4F. The active state must follow the example called ripple which
is provided in the media files.

4. You should draw the elements described below to be included in your design. Create the
elements that represent the same visual style.
4.1. Main spaceship (controlled by player)
4.2. Timer Icon
4.3. Fuel counter
4.4. Fuel icon
 5. The HTML and CSS code must be valid in the W3C standards for HTML 5 and CSS 3 rules.

FINAL 2.5 HOURS – GAME FUNCTIONALITIES:

1. Pressing the “Start Game” button in the initial screen, starts the game. The planets should
be animated and move from right to left to give the impression of movement of the
spaceship in the space. The timer starts from zero and displays the time in seconds that the
spaceship is in movement. The fuel counter starts to decrease, one point per second. When
the game starts, there are 20 points of fuel (20 seconds). The max capacity of fuel is 40
points (40 seconds of flight). The score starts with zero points.

2. The spaceship fires when the user presses space bar, the user cannot keep pressing the space
bar to fire many times sequentially, i.e. only one shoot for each space bar pressing.

3. The shot of the main spaceship can destroy just one target. The shot cannot pass through
one target and hit other elements.

4. The spaceship must follow the cursor whenever cursor in the game canvas.

5. During flight, the spaceship needs to destroy the enemy spaceships and asteroids that are
presented in space. If the spaceship collides with an asteroid element or a spaceship
element, that element is destroyed and the fuel must decrease by 10 points.

6. The spaceships and asteroids needs to be presented in random position and in an animated
way, flying from right to left.

7. The enemy spaceships must shoot (from right to left). The player must dodge these shots;
otherwise, if the player is hit by a shot, the fuel counter should decrease by 10 points.

8. The enemy spaceships are destroyed by one shot. Each enemy spaceship destroyed
increases the score counter by 5 points. If the user destroys a friendly spaceship the score
counter is decreased by 10 points.

9. The game permits negative scores.

10. The asteroids must be destroyed with two shots. Destroying each asteroid, the score is
increased by 10 points.

11. During the flight, the main spaceship needs to collect fuel icons by flying into them. Fuel
icons should be dropped in an animated way from the top of the screen in random
 horizontal position. For each fuel icon collected, the fuel counter is increased by 20 points.
One point gives 1 second of flight time.

12. During the flight, the user can pause by pressing ctrl+p on the keyboard. When the game is
paused, all interactions and sounds must be stopped. If user presses ctrl+p again, the game
continues from the moment that it was paused.

13. The planets in background need to present an animation to give the sensation of
movement. The planets must move with different speed, the bigger planets must move
faster than the smaller planets, creating a parallax effect. Include at least 5 different size
planets in the background.

14. If the fuel counter reaches zero, the game is over.

15. 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.

16. The user name, the time of flight and the score need to be persistent in the local machine
16.1. name: name of the user
16.2. time: number (integer) time in seconds
16.3. score: number (integer) of points earned during the flight

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

18. The ranking needs to be ordered by the score and for time elapsed in decreasing order. If
more than one user has the same score and the same time, they receive the same position
in the ranking.

19. To increase the game interaction, some sound effects need to be used:
19.1. background.mp3: used during the flight in loop;
19.2. destroyed.mp3: played when one spaceship (friendly or enemy) or asteroid is
destroyed;
19.3. shoot.mp3: played when the main spaceship shoots.
19.4. boom.mp3: sound effect of special power.
19.5. invisible.mp3: sound effect when in invisible mode.

20. Use your talent to increase the usability of the game as much as possible to permit a better
experience for the user.
21. To improve the accessibility of the game you must have options to increase/decrease the
font size in the screen for timer and score counter. Using ctrl+a to increase font size, using
ctrl+s to decease font size.

22. Using ctrl+m 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.

23. Using ctrl+(+) to increase volume, using ctrl+(-) to decease volume.

24. Special power to reset all existing item on the screen except own spaceship, planets, and
HUD (Heads Up Display). The special power will consume fuel by 20point. Cannot use special
power if fuel is lower than 20point. Can be activated by pressing ctrl+b. Suitable effect
should be displayed in the screen. After special power game will be back to normal.

25. Invisible power can be toggled via ctrl+i. Spaceship cannot be hit by anything except fuel.
Consume 1 more fuel per second (Total 2 fuel per second). Suitable effect should be applied
to spaceship.

26. Your game should work without JavaScript errors or messages shown in the browser
console.

27. 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

28. 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.

INSTRUCTIONS TO THE COMPETITOR

 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.

 Publish the finished design and source files on: http://competitorXX.asc.local/XX_client_side/design

 Publish the finished website on: http://competitorXX.asc.local/XX_client_side

 XX is workstation number.

 File names:
  Instructions: XX_instructions.png
 Game board: XX_game_board.png
 Ranking: XX_ranking.png
 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.

 Additional file names

 Instructions: XX_instructions_2.png, XX_instructions_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 …

 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.
Only one item per layer.

 Save the working game to the directory on the server named "XX_client_side". Be sure that your main
file is called index.html.

 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.
1.4 Marking Scheme SUMMARY
SECTION CRITERION JUDGEMENT MEASUREMENT TOTAL
MARKS MARKS
E1 Client Side General 0.50 0.75 1.25
E2 Client Side Design 0.25 1.00 1.25
E3 Client Side Welcome Screen 0.50 2.30 2.80
E4 Client Side Animation 1.00 0.50 1.50
E5 Client Side Ranking 0.20 0.70 0.90
E6 Client Side Code Quality 1.00 2.00 3.00
E7 Client Side Elements 0.55 1.50 2.05
F1 Client Side Fuels 1.30 0.80 2.10
F2 Client Side Game Constraints 0.50 1.95 2.45
F3 Client Side Game Scene 0 3.30 3.30
F4 Client Side Enemies 0 2.20 2.20
F5 Special Power 0.30 1.60 1.90
F6 Invisible power 0.30 1.00 1.30
F7 Client Side Final Design 0 2.50 2.50
F8 Client Side Game Over 0 2.50 2.50
F9 Client Side Game Quality 1.30 1.70 3.00

Total 7.70 26.30 34.00

SERVER SIDE

INTRODUCTION
“Tuk Tuk Tour” is a local startup company. They would like to create a website that could help
users to get itinerary to reach their destination place by schedule. They would like to create a
website that could help users to get itinerary to reach their destination place by schedule. Tuk
Tuk Tour is an on-demand hop on hop off in a tuk tuk around Bangkok Old Town prime
attractions (Rattanakosin, Khao San, Dusit, China Town, and Phahurat areas). You pay once
upfront to hop on hop off all day (8:30AM-6PM) between designated meeting points by using
our website to call a tuk tuk to each point at their convenience. The user can set their start and
end place, then the system will find the fastest route(s) between the two given stations
depending on the lines running. The self-guided website also contains helpful information of
nearby attractions and local restaurants.
 1.5 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
“Tuk Tuk Tour” 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:
1. Authentication
a. Login (v1/auth/login)
Description: For client to get login token via username and password
Request method: POST
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 sha1 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)
Description: For server to invalid the user’s token
Request method: GET
Header: authorization bearer token
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

2. Place
a. All Places (v1/place)
Description: For client to list all places in the database (include user’s search history indexed
based on the frequency)
Request method: GET
Header: authorization bearer token
Response result:
- Body:
o All data on array; consists of id, name, type, latitude, longitude, x, y,
image_path, description, open_time, close_time.
- Response status: 200
- If unauthorized user access it, data:
o Message: Unauthorized user
o Response status: 401
b. Find Place (v1/place/{ID}))
Description: For client to fetch one place object via place ID.
Request method: GET
Header: authorization bearer token
Response result:
- Body:
o object; property consists of name, type, x, y, image_path, open_time, close_time,
description, num_searches
- Response status: 200

c. Create place (v1/place), only admin can access this API

Description: For client to create a new place object. Image file from client must be uploaded
to server. You can use form data to upload an image. You must use library Poi.php from
media file to calculate x, y from latitude and longitude
Request method: POST
Header: authorization bearer token
Request parameter:
- Body:
o name
o type
o latitude
o longitude
o image
o open_time
o close_time
o [description]
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. Update place (v1/place/{ID}), only admin can access this API
Description: For client to update an existing place object via given place ID. If an image file is
provided, it must be uploaded to server, old related image (if any) must be deleted. (Use
library Poi.php to calculate x, y from latitude and longitude)
Request method: POST
Header: authorization bearer token
Request parameter:
- Body:
o [name]
o [type]
o [latitude]
o [longitude]
o [image]
o [open_time]
o [close_time]
o [description]
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

e. Delete place (v1/place/{ID}), only admin can access this API

Description: A request to delete a place object via given place ID. Related image and
schedule (if any) must be deleted
Request method: DELETE
Header: authorization bearer token
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
- If unauthorized user access it, data:
o Message: Unauthorized user
o Response status: 401
3. Schedule
a. All Schedules (v1/schedule), only admin can access this API
Description: For client to list all schedules in the database
Request method: GET
Header: authorization bearer token
Response result:
body:
o All data on array; Each element consists of: line, from_place (name), to_place (name),
departure_time, arrival_time, distance, speed, status.
o Response status: 200
- If unauthorized user access it, data:
o Message: Unauthorized user
o Response status: 401

b. Create schedule (v1/schedule), only admin can access this API

Description: For client to create a schedule in database. A schedule describes when and
where attractions and local restaurants and departs from one stop and arrive at the next
stop.
Request method: POST
Header: authorization bearer token
Request parameter:
- Body:
Object: consisting of line, from_place_id, to_place_id, departure_time, arrival_time,
distance, speed (arrival_time must be after departure_time; the times must be in range:
08:30AM – 06:00PM)
Response result:
- If success,
o header: response status: 200
o body: message: create success
- If failed,
o header: response status: 422
o body: message: Data cannot be processed
- If unauthorized user access it,
o header: response status: 401
o body: message: Unauthorized user

c. Update schedule (v1/ schedule /{ID}), only admin can access this API
Description: For client to update an existing schedule object via given schedule ID.
Request method: POST
Header: authorization bearer token
Request parameter:
- Body:
o [line]
o [from_place_id]
o [to_place_id]
o [departure_time]
o [arrival_time]
o [distance]
o [speed]
 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

d. Delete schedule (v1/schedule/{ID}), only admin can access this API

Description: A request to delete an existing schedule via given schedule ID.
Request method: DELETE
Header: authorization bearer token
Response result:
- If success,
o header: response status: 200
o body: message: delete success
- If unauthorized user access it,
o header: response status: 401
o body: message: Unauthorized user

4. Route
a. Route Search (v1/route/search/{FROM_PLACE_ID}/{TO_PLACE_ID}/[DEPARTURE_TIME]
Description: A request to fetch multiple route suggestions to depart from a given stop
(departure/source) and arrive at another stop (destination/target). By default, the search
uses current server time. It also allows an optional departure time to override the default
server time.
The search should search the routes that depart from the given place at specific time and
arrive the destination place, sorting by the earliest arrival time and limited to 5 routes result.
Only return available schedules.
Request method: GET
Header: authorization bearer token
Response result:
- If success, data:
o Array of routes. Each route contains :
 Number of history selection of this route.
 Array of schedules:
 id
 line
 departure_time
 arrival_time
 travel_time
 from_place; consist of id, name, type, longitude, latitude, x, y, open_time,
close_time, description, image_path
 to_place; consist of id, name, type, longitude, latitude, x, y, open_time,
close_time, description, image_path
 o Response status: 200
- If failed, data:
o Message: Unauthorized user
o Response status: 401
b. Store Route Selection History (v1/route/selection)
Description: For client to save a user selected route into the system.
Request method: POST
Header: authorization bearer token
Request parameter:
- Body:
o from_place_id
o to_place_id
o schedule_id, array of schedule_id for the route
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
Notes:
 [key/item] with bracket [] is optional. Item with braces {} is mandatory.
 The path will be prepended with your directory “XX_server_a” which will give http://
http://competitorXX.asc.local/XX_server_a/api/v1/<services>, where XX is your
country code.
 HTTP method tunneling via _method is allowed.
 The API needs to be implemented as specified, but you can add optional fields.

TESTING

You should use the JSON file “Sample_ServerSide_A.postman_collection.json” provided to test

the API using POSTMAN Chrome Extension. Please see the description in each test for usage
(eg. Change <server>, <XX>, basic auth, etc.).
The system should handle input of data and responses should follow the above specification.

DATABASE
The database (to be normalized to third normal form and using reference constraints where
appropriate), create at least the default tables, specified as follows (data provided in CSV):

II. Front End

On the front-end there will be some functionality that is required by “Tuk Tuk Tour”.
Create a front-end website for this company by using the provided single page template that is
already prepared by the designer. Create all the functionalities for the page with communication with
the backend web services API.
Website components that have been provided are:
1. Search Route
Functionalities:
a. Selecting from place and to place
 Fetch the list of places from the service. Sorted alphabetically by default. Places used
by this user (if logged in) will be at top of list (based on frequency).
 Selection with using auto complete (from database, not from browser history) for the
from (source) and to (target) place. Auto complete will be filled based on user’s
history, every time user use this application then the system will save the data
(from/source and to/target).
b. Input departure time
 Contain hour and minute. This is an optional field, doesn’t required to be filled.
c. Searching routes
 Search the routes by using the departure time (optional), from (source) and to (target)
input.

2. Routes List
After a user search the routes, then this component will show:
Search results on the left, schedules for this route will appear. By default, the search uses the
current server time if user didn’t fill in departure time before. If the user fills in departure time, then
the search uses the given departure time.
As same as the API specification describes: The search should search the routes that depart
from the given place at specific time and arrive to the destination place, sorting by the earliest
arrival time and limited to 5 routes result.
The list of schedule from the result, consist of:
1. Numbering.
2. Time Schedule (Departure time at from place, Arrival time at to place).
3. Total travel time
4. Number of attractions and local restaurants of route
5. Number of selection on this routes by all users (more on that later in 4. Search history).
 This is the example scenario for search results, assuming from A to B that departs at 13:00:
 A to B => departure time -> 13:00:00 arrival time -> 13:14:00
Line 3, Line 4, 14 minutes, 3 attractions and 2 local restaurants
 A to B => departure time -> 13:02:00 arrival time -> 13:22:00
Line 2, 22 minutes, 1 attractions and 1 local restaurants
 A to B => departure time -> 13:01:00 arrival time -> 13:35:00
Line 2, Line 1, Line 5, 36 minutes, 1 attractions and 5 local restaurants

3. Map View
The right side of the layout will show the map. Place coordinate will contain:
a. There will be dot and place’s name on map for each place based on the database
records. Different dot color for each type of place (attractions, restaurants, closed places
are calculated by client time).
b. If user clicks one of the dot, a floating box will be appeared near the dot. On floating box
there will be a picture of the place, name of place and the short description about it. The
box will be dismissed if user clicks the other area.
c. Show working delete button in a floating box if user is admin.
d. Show a clearly visible dot (different from the normal place) on map for departure (from)
place and destination (to) place.
e. If user clicks the route on the result list, the route is shown on the map. The route is
shown with animation. Animation will replay if the route is click again.
f. Each line should have a different color when drawing on the map.
g. Show the legend for each line: different color for each line.

4. Route(s) selection history

The system stores all the routes that all user selected.
a. Whenever a user clicks on the route in the result list, this route is stored in the database.
b. The system stores all user’s selection.
c. When a route shows in the result list, the total number of selection on the same route
shows. Same route means the same from place, to place and list of schedules regardless
of departure time filled by user.

5. User Authentication
Functionalities:
a. Login and logout should happen on the same page without redirect/refresh/reload page.
b. Login
 Show the login modal, after user click login link.
 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.

6. Admin Menu
Admin menu should only be shown after user login that has an admin role. Admin functionalities
(all information, optional/require fields are the same as related API) :
a. Place
 List place
 Create place
 Update place
 Delete place

b. Schedule
 List schedule
 Create schedule
 Update schedule
 Delete schedule

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 other 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.
 Monitor screen size should not affect any function on the client side. (working on 1920px, 1024px and
480px width)
 1.6 Instructions to the Competitor

Save the files of your application in directory on the server called "XX_server_a" for the first
phase and "XX_server_b" for the second phase, where XX is your workstation number.

Files to be collected for the first phase on the server:

- Web service (XX_server_a)

- ERD screen shot named “XX_ERD.png” in “db-dump” folder inside of XX_server_a
- Database dump named “XX_database.sql” in “db-dump” folder inside of XX_server_a
Files to be collected for the second phase on the server:

- Front-end website (XX_server_b)

- Front-end website project files as inside folder XX_server_b. You should ZIP all front-end
development project files and name it XX_server_b.zip.
- “access.txt” on the front-end root(http://competitorXX.asc.localXX_server_b) to give
information about the link/URL that should be accessed to mark the front-end.

Web service will be marked in Postman Chrome Extension.

Front-end will be marked in Google Chrome.

1.7 Marking Scheme SUMMARY

SECTION CRITERION JUDGEMENT MEASUREMENT TOTAL

MARKS MARKS
C1 Server Side API General 1.00 0.50 2.00
C2 Server Side DB setup 0 1.00 1.00
C3 Server Side Database and Auth 0.75 1.50 2.75
C4 Server Side API Places 0 1.50 1.50
C5 Server Side API Places Operation 0 2.75 2.75
C6 Server Side API Schedule 0 3.25 3.25
C7 Server Side API Route 0 2.50 2.50
D1 Server Side Client General 1.00 1.00 2.00
D2 Server Side Website design 1.50 0 1.50
D3 Server Side Interaction and Auth 1.00 3.25 4.25
D4 Server Side Search route 0 2.00 2.00
D5 Server Side Map view 0 4.00 4.00
D6 Server Side Admin menu 0 2.00 2.00
D7 Server Side Admin Places 0 1.50 1.50
Total 5.25 26.75 32.00
CMS

1.1 Introduction
Thailand Food Guides is a brandnew 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.

1.1.1 Description of project and tasks

This module requires you to implement your skill of website design, website layouting,
client-side scripting and server-side scripting using Wordpress, the most popular Content
Management System. You have to develop a new fresh theme called
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 admin area. 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.

Website Design Details

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: 1920px,
Tablet: 1024px,
Mobile: 480px.

For each mockup for desktop, tablet, mobile. You must divide component into minimum
5 layers. 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: Desktop_ThailandFoodGuides.png,
Tablet_ThailandFoodGuides.png and Mobile_ThailandFoodGuides.png. The sources
have to be saved as *.psd or *.ai.

Don’t forget to add the design you create to the overview provided to make it easier for
the company to see your design. In this overview, you only need to present the design of
the main page. You should save the overview file as:
Overview_ThailandFoodGuides.png.

The main page template:

The main page template includes

 Image banner
 Food recipes posts
 Photo Album
 Food blog posts
 Footer with copyright and social media links with icons
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. Make sure the result of
the recipe search is limited to 7 recipes per page.

Footer must be implemented in all posts and pages and must contain the list of at most
5 popular recipes in the website based on likes, and 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 post, the
featured image is optional, make sure the design won’t damage the design if a post
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.
User can like the food recipes they currently read. Each user can only like a recipe once.
Guest cannot like and cannot see like button but can see number of likes.

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 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.

TECHNIQUE
The website shouldn’t produce any weird result when scaling the browser window
between 1920px and 480px. 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.

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 area 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 area 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 ingredient should contain 3 additional field (calorie, fat and carbohydrate).

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.

You have follow the style guide layout template.

The style guide must be saved as: Style_Guide.png.

CMS Details

For security reason, users need to have certain roles in order to access the features.
There should be at least 4 default users for the Wordpress with their own access of
admin area features:
1. User: Able to submit a new draft for the blog post
 Username: user01 and user02
 Password: userpassword
 Role: User
2. Moderator: Able to accept/reject a new blog post created by user and publish
blog post on his own
 Username: moderator01
 Password: moderatortest
 Role: Moderator
3. Admin: Able to do everything without limitation
 Username: admin01
 Password: adminhaha
 Role: Administrator

Multilanguage
The website should be able to support 2 languages (Thai and English) using Polylang or
WP-Multilang Plugin. There should be a component for user to switch language.

Security Settings

For this website, you are asked to tweak Wordfence security settings.
1. Firewall must be enabled if available.
2. User will be locked if they failed to login at least 10 times
3. User will be locked if they use the forgot password 5 times.
4. Lock duration must be 1 hour.
5. Block fake google crawlers.
SEO Settings

For this website, you are asked to tweak All in one SEO plugin settings to make your
website more visible in the search engine from the provided SEO plugin.

1. Enable SEO for all post types available in the website.

2. Enable show column labels for all post types available in the website.
3. The 404 page must not appear in the search engine using no index.
4. Keywords attribute in meta tag must be enabled throughout the site
5. Make sure that categories are always added to the keywords.

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 admin
area, and then it need to provide a button to show all images in 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. The photo albums also
need to include several animations to make it attractive. The animations can be added
in every aspect of the photo album.
 1.2 Instructions to the Competitor
Publish the finished design and source files on:
http://competitorXX.asc.local/XX_cms/design
Publish the finished website on: http://competitorXX.asc.local/XX_cms
XX is workstation number.

1.3 Files PROVIDED

ITEM DESCRIPTION
Dummy Text Dummy text for website content
Ingredient data Provided as xlsx file
Images Food Images
jQuery jQuery core.
Logos Available logos
Wordpress Plugins Plugins for custom fields, multilanguage, page builder,
SEO, security and social media
Wordpress-4.9.7 Wordpress CMS Core
blankslate.4.0.4 Wordpress theme
Overview A PSD
Style_Guide_Template A Style guide template
1.4 Marking Scheme SUMMARY

SECTION CRITERION JUDGEMENT MEASUREMENT TOTAL

MARKS MARKS
A1 CMS Style Guide 2.00 1.00 3.00
A2 CMS Designs 2.50 1.00 3.50
A3 CMS Elements 2.00 1.00 3.00
B1 CMS Layout Builder & 1.00 3.00 4.00
Photo Album
B2 CMS Main Page 0.50 5.00 5.50
B3 CMS Theme 0.00 4.00 4.00
B4 CMS Admin Area & 1.00 3.00 4.00
Plugins
B5 CMS Functionality 0.00 3.00 3.00
B6 CMS Responsive Design 4.00 0 4.00
Total 13.00 21.00 34.00
 A. Peserta WAJIB HANYA menggunakan software yang ditentukan

Software Download Link

Laravel 5.7 Framework https://laravel.com/
Adobe Creative Cloud
Microsoft Office 2016
Firefox Developer
Edition
Google Chrome
7 ZIP

MySQL Workbench https://dev.mysql.com/downloads/file/?id=479196

Atom https://atom.io/download/windows_x64
Notepad ++ https://notepad-plus-plus.org/repository/7.x/7.5.8/npp.7.5.8.Installer.exe
Sublime Text 3 https://download.sublimetext.com/Sublime%20Text%20Build%203176%20x64%20Setup.exe
PhpStorm https://www.jetbrains.com/phpstorm/download/download-thanks.html?platform=windows
Webstorm https://www.jetbrains.com/webstorm/download/download-thanks.html?platform=windows
VSCode https://code.visualstudio.com/

Postman https://www.getpostman.com/download?platform=win64
NodeJS 8.12.0 LTS https://nodejs.org/dist/v8.12.0/node-v8.12.0-x64.msi
XAMPP 7.2.10 https://www.apachefriends.org/xampp-files/7.2.10/xampp-win32-7.2.10-0-VC15-installer.exe
(minimum)

Wordpress snippet https://marketplace.visualstudio.com/items?itemName=tungvn.wordpress-snippet

extension for VSCode
Wordpress snippet https://packagecontrol.io/packages/WordPress%20Snippets
extension for Sublime
Text

FTP Tools (with FTP Server) Download Link

PuTTY https://the.earth.li/~sgtatham/putty/latest/w32/putty.exe
Sftp extension for Sublime Text https://packagecontrol.io/packages/SFTP
Sftp extension for VSCode https://marketplace.visualstudio.com/items?itemName=liximomo.sftp

Tidak diperbolehkan menggunakan software diluar yang telah ditentukan

B. Peserta WAJIB membawa perangkat
1. Laptop - intel Core i5, RAM 8Gb, HDD 120Gb, VGA Card (2GB).
2. Laptop di bawa peserta masing-masing
3. Processor maksimum core i5 dan ram maksimum 8 Gigabyte, apabila speasifikasi
laptop yang di bawa peserta melebihi ketentuan maka panitia berhak menolak laptop
peserta.
4. Apabila laptop processor dan ram di bawah ketentuan poin 1 maka menjadi resiko dari
peserta.
A. Tata Tertib Lomba
1. Peserta hadir di tempat lomba 30 menit sebelum acara dimulai, dan mengisi daftar hadir
yang telah disediakan panitia. Bagi yang terlambat harus mendapat izin masuk dari panitia.
2. Peserta yang tidak hadir sesuai dengan jadwal, dan atau melebihi 45 menit dari jadwal
yang ditentukan dianggap mengundurkan diri.
3. Penentuan nomor peserta dilakukan melalui undian, bagi peserta yang tidak mengikuti
technical meeting, nomor undian ditentukan oleh panitia.
4. Peserta lomba menempati/ menggunakan peralatan lomba sesuai hasil undi;
5. Peserta tidak dapat melanjutkan lomba dikarenakan sakit atau hal-hal lain, maka dianggap
gugur/ mengundurkan diri;
6. Peserta tidak dibenarkan berkonsultasi atau mendapat pengarahan teknis tentang
pekerjaan (job) pada waktu kegiatan berlangsung dari pembimbing masing-masing kecuali
dari tim juri;
7. Kegagalan/ keterlambatan pekerjaan tidak diberikan toleransi (misalnya karena lupa
pekerjaan belum di-save);
8. Peserta lomba wajib melakukan pemeriksaan peralatan dan kebersihan lingkungan kerja;
9. Kerusakan peralatan (hardware/software) akibat kesalahan prosedur yang dilakukan
peserta, menjadi tanggung jawab peserta itu sendiri;
10. Tidak dibenarkan menggunakan software di luar ketentuan yang ada, termasuk
penggunaan internet;
11. Pembimbing tidak dibenarkan masuk ke ruang lomba atau menghubungi peserta baik
langsung maupun alat komunikasi pada saat lomba berlangsung dengan alasan apapun;
12. Tidak diperbolehkan membawa/menggunakan buku/catatan, internet, Flash disk/ USB
Stick, Handphone/tablet dan benda sejenis dalam lokasi lomba.
13. Ketentuan lain yang belum tercantum dalam tata tertib ini diputuskan oleh kebijakan Tim
juri (ditentukan kemudian sesuai kebutuhan);
14. Pelanggaran terhadap tata tertib ini akan diberikan sanksi berupa teguran sampai berupa
pemberhentian sebagai peserta.