Академический Документы
Профессиональный Документы
Культура Документы
BIDANG LOMBA :
WEB DESIGN & DEVELOPMENT
CLIENT SIDE
1.1 Contents
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.
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.
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.
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.
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.
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.
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.
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.
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
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. 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
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
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):
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.
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.
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.
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.
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.
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.
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.
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.
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.
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)