Test Project

Web Technologies
PHP and JavaScript Module

Submitted by:
Manuel Schaffner - CH (Lead Expert)
Siew Hwa Kang - SG
Volha Rabychyna - BY
Kevin Chong Shiuh Koong - TW
Ling Zhang - CN
Tsukasa Kamiyama - JP
Tanja Otte - DE
Zoltan Sisak - HU
Dalibor Dvorski - CA
Hassan Ibno El Fata - MA
Jaafar Almoadhen - BH

WSC2019_TP17_pre_EN_PHP_and_JS
Contents
Contents ............................................................................................................................................................ 2
Introduction ...................................................................................................................................................... 3
Description of project and tasks ..................................................................................................................... 3
Phase one............................................................................................................................................................................. 3
Phase two .......................................................................................................................................................................... 10
Notes ................................................................................................................................................................................. 15

Instructions to the Competitor ..................................................................................................................... 16

Equipment, machinery, installations, and materials required ................................................................... 17
Marking Scheme ............................................................................................................................................. 17

Date: 21.05.19 Version: 1.0

2 of 17
WSC2019_TP17_pre_EN_PHP_and_JS © WorldSkills International
Introduction
The agency responsible for the new Kazan exhibition complex needs a web application where the different event
organizers can promote the event and manage registrations of attendees, agenda, speakers, etc in a
standardized way.
Because this application will grow over time, the most important requirements are provided as automated tests
to be quickly repeatable.

Description of project and tasks

The project is split into two phases:
• Phase one (morning, 3hrs) for building the backend parts (admin interface and REST-API) using PHP
(framework) and database
• Phase two (afternoon, 3hrs) for building the frontend parts (visitor interface) using HTML/CSS/JS (framework)
and the REST-API created in phase one.

Phase one
• Use your database (dbYY_competitor_day2) and import the schema/dump provided
• Extend your database to be able to save
• Admin-users [insert data directly into db-table as specified below],
• Attendee login/profile [firstname, lastname, username, email, photo, linkedin-url, password-hash],
• Registrations of attendees to events including additional fields for registration_type [early_bird = 15% off
until T-30days | general | vip = 20% plus], registration_date, calculated_price, event rating [0:bad,
1:average, 2:excellent]. The validity (T-30days) of early_bird does not need to be validated.
• Create an admin interface (SSR) using the templates provided to
• Manage events (create, read, update),
• Create an attendee list and
• A rating report diagram for an event, showing the total number of ratings and the percentage of ratings
for 0/1/2-rating

Date: 21.05.19 Version: 1.0

3 of 17
WSC2019_TP17_pre_EN_PHP_and_JS © WorldSkills International
Date: 21.05.19 Version: 1.0
4 of 17
WSC2019_TP17_pre_EN_PHP_and_JS © WorldSkills International
Additional info for the backend/admin interface tests/specification:
Feature: B1 - Login and Logout as admin: As an admin i want to login / logout to the event admin platform so
that i can access the functionality

Scenario: B1a - Admin login ok

Given I'm on the "login" page
When I enter the specified username and password for admin
And press "login" button
Then I'm forwarded to the admin area
And username and "logout" button become visible
And page "Manage events" becomes visible

Scenario: B1b - Admin login fail

Given I'm on the "login" page
When I enter a wrong username and password for admin
And press "login" button
Then I stay on the "login" page
And I see an error message "User or password not correct"

Scenario: B1c - Admin logout

Given I'm logged in
When I press the "logout" button
Then I'm forwarded to the "login" page
And username and logout button and admin functions disappear

Date: 21.05.19 Version: 1.0

5 of 17
WSC2019_TP17_pre_EN_PHP_and_JS © WorldSkills International
Feature: B2 - Manage an event: As an admin i want to manage events so that events find visitors
Scenario: B2a - Show form for new event
Given I'm logged in
And I'm on the "Manage events" page
When I press "add event"
Then a form to enter event info appears

Scenario: B2b - Enter info for a new event - general

Given a form to enter event info is shown
When I enter info for the event (all fields required)
And I enter info for one or more sessions
And I press "save event"
Then the event is saved into the database
And a success message "Event successfully created" is shown

Scenario: B2c - Enter info for a new event - sessions

Given a form to enter event info is shown
When I press "add session"
Then a new line with input fields is added to the session table

Scenario: B2d - See existing event list

Given I'm on the "Manage events" page
Then I see a table with title, date, price info, buttons for attendee list and rating diagram (one row for each
event)
And a button to add a new event

Scenario: B2e - See existing event details

Given I'm on the "Manage events" page
When I click on an event title (in table row)
Then I see all event info including the sessions

Scenario: B2f - Edit existing event details

Given I see event details
When I click on "edit event"
And I edit the info
And I press "save event"
Then the event is saved into the database with the changed data
And a success message "Event successfully saved" is shown

Scenario: B2g - Create an attendee list for an event

Given I'm on the "Manage events" page
When I press the button "create attendee list" on an event row
Then I see the event name and a list of all attendees for this event

Scenario: B2h - Create a rating report diagram

Given I'm on the "Manage events" page
When I press the button "rating diagram" on an event row
Then I see the event name, the total number of ratings for the event and pie chart with percentages for 0/1/2-
ratings

Date: 21.05.19 Version: 1.0

6 of 17
WSC2019_TP17_pre_EN_PHP_and_JS © WorldSkills International
• Create a RESTful API (http://competitorYY.wsad.local/api/v1/…) to
• Read events,
• Register the currently logged in attendee for an event,
• Show registered/attended events
• Rate an attended event,
• Create a login/profile for an attendee including a profile foto,
• Login and logut a attendee.
Additional info for the REST-API tests/specification - the body contains example data “someText” and numbers 1
-> adjust it to fit the requirements. The tests are referenced by its function name [-> test<scenario-id><text>]:
Feature: A1 - Read events: As a developer I want to read JSON event data from the event application so
that I can use it for display

Scenario: A1a - Read event info as logged in user

Request
URL: /api/v1/events?token={AUTHORIZATION_TOKEN}
Method: GET
Header:
Body: -
Response
If success [-> testA1aGetIndexLoggedIn]
Header: Response status: 200
Body: { "id": 1, "title": "someText", "description": "someText", "date": "2019-08-15", "time":
"08:00:00", "duration_days": 1, "location": "someText", "standard_price": 1, "capacity": 1, "sessions": {
"id": 1, "event_id": 1, "title": "someText", "room": "someText", "speaker": "someText" }}
If user not logged in [-> testA1aGetIndexUnauthorized]
Header: Response status: 401
Body: message: Unauthorized user

Feature: A2 - Manage registration: As a developer I want to send/read event registration data to/from the
event application for display/persisting

Date: 21.05.19 Version: 1.0

7 of 17
WSC2019_TP17_pre_EN_PHP_and_JS © WorldSkills International
Scenario: A2a - Register for event as logged in user
Request
URL: /api/v1/registrations?token={AUTHORIZATION_TOKEN}
Method: POST
Header:
Body: {"event_id":1,"registration_type":"early_bird"}
Response
If success
Header: Response status: 200
Body: message: Registration success
If user not logged in
Header: Response status: 401
Body: message: Unauthorized user
If event does not exist
Header: Response status: 404
Body: message: Not found

Scenario: A2b - Show registered events for logged in user

Request
URL: /api/v1/registrations?token={AUTHORIZATION_TOKEN}
Method: GET
Header:
Body: -
Response
If success
Header: Response status: 200
Body: { "id": 1, "event_id": 1, "user_id": 1, "registration_type": "early_bird", "registration_date":
"2019-05-08 16:11:41", "calculated_price": 1, "event_rating": 1|null }
If user not logged in
Header: Response status: 401
Body: message: Unauthorized user

Feature: A3 - Rate registered/attended events: As a developer I want to send event rating data to the event
application so that so that it is persisted

Date: 21.05.19 Version: 1.0

8 of 17
WSC2019_TP17_pre_EN_PHP_and_JS © WorldSkills International
Scenario: A3a - Rate a registered/attended event as logged in user
Request
URL: /api/v1/registrations/1?token={AUTHORIZATION_TOKEN}
Method: PUT
Header:
Body: {"event_rating":1}
Response
If success
Header: Response status: 200
Body: message: Rating success
If user not logged in
Header: Response status: 401
Body: message: Unauthorized user

Feature: A4 - Login and Logout as visitor: As a developer I want to login/logout a visitor so that i can
read/save data

Scenario: A4a - Visitor login

Request
URL: /api/v1/login
Method: POST
Header:
Body: <tbd: username, password>
Response
If success [-> testA4aCorrectLogin]
Header: Response status: 200
Body: token: {AUTHORIZATION_TOKEN} (md5 encrypted username, valid until logout)
If user login info not correct [-> testA4aInvalidPassword|Username|Request]
Header: Response status: 401
Body: message: Invalid login

Scenario: A4b - Visitor logout

Request
URL: /api/v1/logout?token={AUTHORIZATION_TOKEN}
Method: GET
Header:
Body: -
Response
If success [-> testA4bLogout]
Header: Response status: 200
Body: message: Logout success

Feature: A5 - Create new visitor profile/login: As a developer I want to create a visitor profile/login so that i
can use it for login

Date: 21.05.19 Version: 1.0

9 of 17
WSC2019_TP17_pre_EN_PHP_and_JS © WorldSkills International
Scenario: A5a - Visitor create profile
Request
URL: /api/v1/profile
Method: POST
Header:
Body:
{"firstname":"someText","lastname":"someText","username":"someText","email":"some@Text","passw
ord":"someText","linkedin_url":"someText","photo":formadata|base64|null}
Response
If success
Header: Response status: 200
Body: token: {AUTHORIZATION_TOKEN} (md5 encrypted username, valid until logout)
If user email already registered
Header: Response status: 422
Body: message: User email already registered
If event create error
Header: Response status: 422
Body: message: Data can not be processed
If user not logged in
Header: Response status: 401
Body: message: Unauthorized user

Phase two
Using the RESTful API (all data coming/going into database), create a frontend (SPA) for visitors/attendees to
browse information about the events, filter events by date-range (start date on/after), create a login/profile,
register fo an event, download an ical-file for a registered event, rate an registered/attended event.
Interaction should show error/feedback messages based on response from API where appropriate.
At this stage of the development, in order to browse events, it is necessary for a visitor to create a login/profile
first. At a later stage, events will be visible to public and when registering for an event, the visitor can use his
existing login or needs to create a new one first.
<yellow bubbles are to show name/class/id of elements for frontend-testing only>

Date: 21.05.19 Version: 1.0

10 of 17
WSC2019_TP17_pre_EN_PHP_and_JS © WorldSkills International
Date: 21.05.19 Version: 1.0
11 of 17
WSC2019_TP17_pre_EN_PHP_and_JS © WorldSkills International
Date: 21.05.19 Version: 1.0
12 of 17
WSC2019_TP17_pre_EN_PHP_and_JS © WorldSkills International
Additional info for the frontend interface tests/specification:
Feature: F1 - Login and logout as visitor - As a visitor I want to login so that I can see and register for events

Scenario: F1a - Visitor login ok

Given I am on "login" page
When entering correct visitor username and password
Then I am logged in
And "logout" button and username is shown, "login" link disappears
And "events" page is shown

Scenario: F1b - Visitor login fail

Given I am on "login" page
When entering correct username and password
Then I stay on the "login" page
And I see an error message "User or password not correct"

Scenario: F1c - Visitor logout ok

Given I'm logged in
When I press the "logout" button
Then I'm forwarded to the "login" page
And username and logout button and event functions disappear

Date: 21.05.19 Version: 1.0

13 of 17
WSC2019_TP17_pre_EN_PHP_and_JS © WorldSkills International
 Scenario: F1d - Visitor create profile/login ok
Given I have pressed "register" link on "login" page
And "create profile" page is shown
When I enter all required fields correctly (email is validated for @)
And I click "save profile"
Then the data is saved in the database
And "events" page is shown
And a success message is shown

Scenario: F1e - Visitor create profile/login fail

Given I have pressed "register" link on "login" page
And "create profile" page is shown
When I enter not all required fields correctly (email is validated for @)
And I click "save profile"
Then the data is not saved in the database
And I stay on "create profile" page
And a error message is shown (also when error from backend occurs)

Feature: F2 - Browse events - As a visitor I want to browse events so that I see interesting events

Scenario: F2a - Show event list

Given I'm logged in as visitor
Then I see a list of events

Scenario: F2b - Filter event list by start date

Given I'm logged in as visitor
When I select a date in the date filter
Then I see a list of events filtered to events starting on or after the selected date

Feature: F3 - Register for event - As a visitor I want to register for an event

Scenario: F3a - Register for event as regular user

Given I'm logged in as visitor
And I have pressed "go to registration" on an event
When I select registration type "standard" in the dropdown
Then the price shown is the same as on the event info

Scenario: F3b - Register for event as early bird

Given I'm logged in as visitor
And I have pressed "go to registration" on an event
When I select registration type "early bird" in the dropdown
Then the price shown is 15% less than on the event info

Scenario: F3c - Register for event as VIP

Given I'm logged in as visitor
And I have pressed "go to registration" on an event
When I select registration type "VIP" in the dropdown
Then the price shown is 20% more than on the event info

Date: 21.05.19 Version: 1.0

14 of 17
WSC2019_TP17_pre_EN_PHP_and_JS © WorldSkills International
 Scenario: F3d - Register for event - save
Given I'm on the "register for.." page
And I have selected a registration type
When I press "register for event" button
Then the registration is saved with the correct type in the database (price calculated based on type in
backend)

Feature: F4 - Manage event registrations - As a visitor I want to manage my event registrations

Scenario: F4a - Show event registrations

Given I'm logged in as visitor
When I click on the link "my events" on the main page
Then a table with the events I have registered for is shown

Scenario: F4b - Download ical

Given I'm on the "my events" page
When I click on the "ical" button
Then an ical-file download is shown
And the ical-file contains info for the respective event (date, time, event title)

Scenario: F4c - Rate event

Given I'm on the "my events" page
When I select a rating in the dropdown (can be done multiple times for each event)
Then the rating is saved in the backend

Notes
• When you are done with the first phase resp. after lunch you may continue with the second phase. For the
second phase you can use a fully working implementation of the first phase (API) using a specified url
(http://competitorYY.wsad.local/apimock/v1/).
[This does not apply for the pre TP – no API is provided here]
• Competitors must use one of the server-side and client-side frameworks/libraries that are provided.
• The provided template for the admin interface should be used. It can be enhanced to get better functionality
for your site. The visual design of the admin interface will not be assessed.
The design of the visitor interface can be based on the template of the admin interface. The visual design of
the visitor interface will be assessed: a simple, clean and attractive design is expected
• For the admin interface it is important to use the selectors (class, id) as provided in the template. For the
visitor interface it is important to use the selectors (class, id) as specified in the screen mockup (yellow
callouts).
• The specified database tables need to be implemented as provided. 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.
• Changes made in the data need to be propagated between frontend and backend in both directions.
• Create the following users to login to the system - they will be used for assessment:
Admin with username: adminuser1 and password: adminpass1
Attendee with username: attendee1 and password: attendee1pass
• For the rating report graphic, you can use one of the provided JS-libraries (Charts.js, D3.js)

Date: 21.05.19 Version: 1.0

15 of 17
WSC2019_TP17_pre_EN_PHP_and_JS © WorldSkills International
Instructions to the Competitor
Files to be collected after the first phase (morning) on the server:
• Web service (http://<hostname>/XX_JS-PHP_A/api/v1/..)
• Admin area (http://<hostname>/XX_JS-PHP_A/) - initially shows login page
• Folder inside webroot (XX_JS-PHP_A/)
• ERD screen shot named “XX_ERD.png” in “db-dump” folder inside of XX_JS-PHP_A
• Database dump named “XX_database.sql” in “db-dump” folder inside of XX_JS-PHP_A
Files to be collected after the second phase (afternoon) on the server:
• Front-end website (http://<hostname>/XX_JS-PHP_B/)
• Folder inside webroot (XX_JS-PHP_B/) - put all development files into XX_JS-PHP_B_dev.zip and leave only
files for production-use in this directory.
• If the front-end root (http://<hostname>/XX_JS-PHP_B) does not open the main page directly, have it open an
index.html with a link fto the main page for marking your front-end.
XX is your country code

Web Service / REST-API will be assessed with the automated test-framework provided. Additional data may
be used to test dynamic behavior.
It is recommended that you run the automated tests for REST-API after development locally or at least after
upload to the server. Instructions to setup and use tests for API: see README.md in tests_api-php.tar.gz.

The tests for frontend interaction (admin & visitor interface) are for reference/demo only, to collect feedback
if/how this could be used in future competition. Instructions to setup and use tests for backend/frontend-GUI
(optional): see README.md in tests_gui-ja.tar.gz.

Manual assessment of other parts will be done using Google Chrome.

Date: 21.05.19 Version: 1.0

16 of 17
WSC2019_TP17_pre_EN_PHP_and_JS © WorldSkills International
Equipment, machinery, installations, and materials
required
It is expected that all Test Projects can be done by Competitors based on the equipment and materials specified
in the Infrastructure List*.
If any equipment or material is required that is not listed in the Infrastructure List, then it has to be listed here (in
the table below - column headings may vary from skill to skill.)
WorldSkills International needs to approve any additional infrastructure requirements that are not listed in the
Infrastructure List. Column headings may vary from skill to skill.
* (Definition: the Infrastructure List lists the equipment, machinery, installations, and materials supplied by the
Compeition Organizer – it does not include tools and material to be supplied by Competitors and/or Experts)

ITEM DESCRIPTION

Media Files Contains:

- DB schema / dump
- template files for the admin-gui
- Charts.js & D3.js incl. Docu
- files for testing REST-API

Extra Media Files (optional / demo) - files for testing backend-admin-GUI

- files for testing frontend-GUI

Marking Scheme
Every Test Project must be accompanied by an associated marking scheme matching the assessment criteria as
given in the Technical Description (Marking Summary). For each of these criteria a detailed list of aspects to be
assessed must be defined (this would be a draft proposal that is discussed and finalised during preparation time
at the Competition).

SECTION CRITERION JUDG. MARKS MEAS. MARKS TOTAL

1 Work organization and 0 1 1
management

2 Communication and 1 1.75 2.75

interpersonal skills

3 Website Design 2 2 4

4 Layout 2 2

5 Front-end Development 2 8.75 10.75

6 Back-end Development 1.5 10 11.5

TOTAL 8.5 23.5 32

Date: 21.05.19 Version: 1.0

17 of 17
WSC2019_TP17_pre_EN_PHP_and_JS © WorldSkills International