Jurusan Teknologi Informasi, Politeknik Negeri Malang
Mid Semester Examination - Web Design and Programming
Lecturer: Wilda Imama Sabilla
Date: October 29, 2021
A
Instructions :
1. Deadline submission : October 30, 2021. Time : 9 AM, PHT
2. File submission in .rar/zip format, file name: MID_Student-Name (max file size : 10 MB)
3. The .rar/.zip file consists of:
a. Project folder consists of files in html and css format, images or other files.
b. The PDF file contains of name and screenshots of each page. PDF name: MID_Student-
Name.pdf
4. Don't plagiarize, plagiarism results in the cancellation of the value.
QUESTION
The owner of a laundry wants to create a website that can be used by admins to check the price of laundry
transactions. This website consists of a Login page, a Home page, and a Price Check page.
Use HTML, CSS, and Javascript to make the website.
1. Login Page
To view the Home page, user must first login. There is a login form to enter the username and
password, and a login button.
Use Javascript to validate the form:
- If the username or password is empty, display the message "Must be filled".
- If the password is less than 8 characters, display the message "Password is at least 8 characters"
- If the username and password are filled in and the password is 8 digits or more, it will redirect to
the Home page.
2. Homepage
Home page is a page that contains a laundry profile. On this page there is a website banner image in
a slider format (Use JQuery).
3. Price Check Page
The Price Check page is used to count the prices based on weight, service, type, and membership.
Weight is the weight per kilo of the goods being laundered. The input entered is an integer not a
decimal (assuming rounding up).
There are three types of services, namely “Wash Dry”, “Wash and Ironing”, and “Ironing Only”
with a price per kilo is 1000 for wash dry, 1200 for wash and ironing, and 900 for ironing only.
For type, there are “Regular” and “Express” options.
- If the customer chooses regular, there is no additional transaction fee.
- But if customer chooses express, the additional fee given is 200 for each kilo.
Membership in the form of "Non Member" or "Member". If you become a member, you will be
given a 10% discount off the total transaction.
After clicking the CHECK button, the total price will be displayed as follows.
Example calculation:
- The wash dry price per kilo is 1000.
- With a weight of 2 kg then the price is 1000 x 2 = 2000
- Due to choosing express, there is an additional fee of 200 per kilo, so the additional cost is 200 x
2 = 400
- The total transaction is 2000 + 400 = 2400
- Because the customer is a member, there is a 10% discount, so the discount is 10% x 2400 = 240
- The total to be paid is = 2400 – 240 = 2160
4. There are 3 menus on this page.
The menu is a hyperlink that can open a particular page.
- Home will open the Home page
- Check Price will open the Check Price page
- Logout will open the Login page
5. Make an attractive design in this project using CSS. Create a unique company, different between
students
Jurusan Teknologi Informasi, Politeknik Negeri Malang
Mid Semester Examination - Web Design and Programming
Lecturer: Wilda Imama Sabilla
Date: October 29, 2021
B
Instructions :
1. Deadline submission : October 30, 2021. Time : 9 AM, PHT
2. File submission in .rar/zip format, file name: MID_Student-Name (max file size : 10 MB)
3. The .rar/.zip file consists of:
c. Project folder consists of files in html and css format, images or other files.
d. The PDF file contains of name and screenshots of each page. PDF name: MID_Student-
Name.pdf
4. Don't plagiarize, plagiarism results in the cancellation of the value.
QUESTION
A hotel wants to create a website that can be used by admins to calculate the cost of booking a room. This
website consists of a login page, a Home page, and a Price Check page.
Use HTML, CSS, and Javascript to work on making the website.
1. Login Page
To view the Home page, user must first login. There is a login form to enter the username and
password, and a login button.
Use Javascript to validate the form:
- If the username or password is empty, display the message "Must be filled".
- If the password is less than 5 characters, display the message "Password is at least 5 characters"
- If the username and password are filled in and the password is 8 digits or more, it will redirect to
the Home page.
2. Homepage
Home page is a page that contains hotel profiles. On this page there is a website banner image in a
slider format (Use JQuery).
3. Price Check Page
The Price Check page is used to see the price of booking based on the floor, room type, length of stay,
and the discount.
There are three types of rooms, namely standard which price is 5000, superior at 6000, and deluxe
at 7000.
Rental price = price by type * length of stay
If the floor of the room is between 1-5 then there is no additional price, if it is more than the 5th
floor there is an additional 1000 for the total rental price.
There are discounts, including:
- If the customer is a Member, get a 10% “Member” discount of the total rental price.
- If the customer is having a birthday, they will get a "Birthday Promo" and a discount of IDR
500
- If you don't have a discount then select "None".
- Discounts cannot be combined (must choose one)
After clicking the CHECK button, the total price will be displayed as follows.
Example calculation:
- Deluxe room price per day is 7000.
- By staying for 2 days, the price is 7000 x 2 = 14,000
- Due to choosing a 6th floor room, there is an additional fee 1000
- The total transaction is 14,000 + 1000 = 15,000
- Because it's customer birthday, there's a 500 discount
- The total to be paid is = 15,000 – 500 = 14,500
4. There are 3 menus on this page.
The menu is a hyperlink that can open a particular page.
- Home will open the Home page
- Check Price will open the Check Price page
- Logout will open the Login page
5. Make an attractive design in this project using CSS. Make a unique hotel, different between
students.
