UCDF1705ICT(SE)

Diploma in Information &

Communication Technology specializing in Software
Engineering

WEB DEVELOPMENT Student Name: Chia Yong Sheng

Student ID: TP046537
AAPP009-4-2-WDT
Restaurant Reservation Website Assignment
(REDO)
Table of Contents

Introduction...........................................................................................................................................2

Wireframe.............................................................................................................................................3

Navigational Structure...........................................................................................................................7

Flowchart...............................................................................................................................................8

Database Structure..............................................................................................................................13

Code Snippet & Explanation................................................................................................................14

User Manual........................................................................................................................................24

Conclusion...........................................................................................................................................28
Introduction

For every restaurant, they had to have a way to advertise so that customers can know of their
restaurant outside of just passing by their store signs on the way to work. This can be in the
form of advertisements in newspapers, reviews on Yelp, dedicated Facebook pages, or just
create your own website dedicated to the restaurant itself.
While this is not a new idea, computer technology has advanced from simple bulletin board
systems (BBS) to advanced HTML5 webpages. In this assignment, I shall create a website to
allow customers to directly book a reservation at a restaurant so that they only have to say
their name upon arrival.
Wireframe
1) index.html

Welcome to Our Homepage

*Image*

The first page the user sees upon visiting the website.

2) register.html

Registration Form

-----

-----

*Image*
3) login.html

Login

----
-
----
-

*Image*

4) default.html

Welcome to the
club
Please fill in your
contacts
----
-
----
----- qwerty@iop
-
----
- *Image*
---- ---- ----
- -
----- ----
-
----- dd/mm/yy
- ---- -----------.jpg
-
5) userhomepage.php

Welcome to User Homepage

*Image*

6) booking.html

Booking Form

-----

-----

----- dd-mm-yy

----- -- : -- --
*Image*
7) vbooking.php

Reservation
Database

8) view.php

Contacts
Database
Navigational Structure

Homepage
0.0
index.html

Registration Login
1.0 2.0
register.html login.html

Contact Input
2.1
default.html

User Homepage
2.2
userhomepage.php

Booking Form View Bookings View Contacts

2.2.1 2.2.2 2.2.3
booking.html vbooking.html view.php
Flowchart

Interface Decision
User visits
(1) Point
register.html

System
Action
Registration Form
Conditional
(1)
Branches
Reset all
User input username Sub-
fields to Description
and password (twice) flow
blank

Reset? Dialog 4
Yes
(1)
Jump Point

Error message Start or

No, submit info (2) End Point

1. Numbers in parentheses are

unique IDs
No 2. Only certain System Actions are
Password
Validated? shown
3. Numbers in circles are references
Yes to IDs

Registration Name: Registration

Confirmed (3)
Author: Chia Yong Sheng

Version: 1.0
4 Date: 15th November 2020

User registration that leads

straight to the login screen.
 User visits
login.html

Interface Decision
(1) Point
Login Form
4 (4)
System
Error message Action
User input credentials (5) Conditional
Branches

Sub-
Invalid input Description
flow
User

Yes Dialog 4
(1)
Jump Point

Login Start or
success (6) End Point

1) Numbers in parentheses are

unique IDs
Yes 2) Only certain System Actions are
shown
First time
3) Numbers in circles are references
Contact Form to IDs
No
(7)

User Homepage
8
(8)

View View No
Booking Logout
Booking Contact ?
s

Yes

Name: Login
User login. When login is 4
Author: Chia Yong Sheng
successful, leads to the user
homepage Version: 1.0

Date: 15th November 2020

 Interface Decision
(1) Point
User visits
booking.html

System
Action
Conditional
Reservation Form
Branches
(9)
Sub-
Reset all Description
flow
User inputs booking fields to
details blank
Dialog 4
Yes (1)
Reset? Jump Point

Start or
End Point
No, submit RESV

4) Numbers in parentheses are

unique IDs
5) Only certain System Actions are
RESV saved shown
into database 6) Numbers in circles are references
(3) to IDs

Name: Reservation
Done
Author: Chia Yong Sheng

Version: 1.0

Date: 15th November 2020

Client reservation form. When
the client makes a reservation,
their details are then
submitted to the database
 User visits
vbooking.php

Interface Decision
(1) Point

Displays all RESV’s made System

Edit RESV
so far Action
(11)
Conditional
Branches
Edit
RESV? Sub-
Description
flow

No
Dialog 4
(1)
Jump Point

Delete
Start or
RESV?
End Point

7) Numbers in parentheses are

unique IDs
8) Only certain System Actions are
No return to shown
home? 9) Numbers in circles are references
to IDs

Yes
Name: View Booking
Reservation (RESV) viewing Author: Chia Yong Sheng
8 table. Allows the client to
verify their reservations and Version: 1.0
edit/delete them as they wish. Date: 15th November 2020
 User visits
view.php Interface
Database Structure (1)
Decision
Point
users contacts booking
user_id (PK) id (PK) book_id (PK)
View RESV tables user_id
user_password contact_name
(10) System guest_num
user_role View contact contact_phone
user_last_login contact_email Action book_date
details (13)
contact_address book_time
Conditional
contact_gender input_dtetme
Branches
Displays the user’s contact_relationship
Edit contacts
contact details contact_dob
(14) Sub-
photo_path Description
flow
user_id
Yes
Edit Yes
RESV? RESV deleted Dialog 4
(12) (1)
Jump Point
No
Start or
End Point
Yes

No 10) Numbers in parentheses are

return to unique IDs
No home? 11) Only certain System Actions are
shown
12) Numbers in circles are
Yes references to IDs

8 Name: View Contacts

Author: Chia Yong Sheng

Version: 1.0

Client’s Contacts Table. Allows Date: 15th November 2020

the client to verify their
contact details and edit them
as they wish.
Code Snippet & Explanation

1. index.html

The first landing page. Prompts the user to either register if they’re new, or
to login if they’re a returning user.

2. register.html

Prompts the user to input their preferred username and password for registration.
“Submit” will then link to register.php for database insertion.
“Reset” will reset all field to blank.
3. register.php

When the user submits their data for registration, it will be saved into the “users” database,
allowing the user to login in the next page.
(If the user’s password is not input identically in both password fields, an error will prompt
users to input their password again)
(If registration fails, an error will be displayed)

4. login.html

Prompts the user for their existing username and password.

“Submit” will link to login.php to verify the user and logs them into the website (see
login.php)
“Reset” will reset all fields to blank.
5. login.php

Connects to the “users” database, stores a new session cookie and verify the user’s login.
If successful:
a. New users will be redirected to default.html to fill in their contact info
b. Existing users will be redirected straight to userhomepage.php
If user input an invalid username or password, an error will prompt the user to try inputting
their username/password again.

6. default.html

Prompts the user for their contact info and profile picture to the restaurant should their
restaurant bookings require attention. (Links to insert.php for database insertion)
7. insert.php

Inserts the contact information and picture input in the previous page from the user to the
“contacts” database (if insertion fails, an error is displayed, following which the user is
returned to the previous page), then redirects to userhomepage.php.

8. userhomepage.php

The main page. From here, the user can choose to book a new reservation, view their existing
bookings, verify and/or modify their contact info, or logout of their session.
9. booking.html

Allows the user to input their booking details, including date/time of reservation.
a. “Submit” submits their reservation to the database via booking.php
b. “Reset” resets all fields to blank.

10. booking.php

Connects to the “booking” database and inserts the user’s reservations and time of insertion.
(Shows an error if insertion fails)
11. vbooking.php

Fetches data from the “booking” database to display the user’s reservations in a table.
Also displays an “Edit” (Leads to vedit.php) and “Delete” (Leads to vdelete.php) button next
to each row for the user to edit or delete their reservations

12. vedit.php

Fetches data from the “booking” database to be displayed in user-modifiable fields so that the
user can change their booking details. (selected in the previous screen by checking the first
field of the RESV info and matching it with the respective row containing said data in the
database)
“Submit” inserts the modified reservations into the database, overwriting the user’s existing
entry. (Redirects to vupdate.php)
“Reset” resets all fields to blank.
13. vupdate.php

Overwrites the “booking” database with modified RESV data from the previous page into
their respective rows. (Shows an error if insertion fails and boots the user back to the previous
page)

14. vdelete.php

When the user clicks on “Delete” next to the data they want to delete, it matches the first field
of the row with the “booking” database to selectively delete the aforementioned row, then the
user is returned to the previous page. (Should it fail, an error is displayed, and the user is
returned to the previous page)
15. view.php

Fetches contact info from the “contacts” database to be shown in a table.

An “Edit” button next to each row will take users to edit.php to edit their contact info.

16. edit.php

Fetches the user’s contact info from the “contacts” into a form for the user to modify.
(selected in the previous screen by checking the first field of the contact info and matching it
with the respective row containing said data in the database)
“Submit” overwrites the respective row with modified data from the user in this form.
“Reset” reset all fields to blank.
17. update.php

Overwrites the “contacts” database with modified contact info from the previous page into
their respective rows. (Shows an error if insertion fails)

18. logout.php
 Logs the user out of the website and destroys the locally stored session cookie.

19. conn.php

Used in several webpages that requires a connection to the database to insert, modify or delete
data.
(An error is displayed if connection is unsuccessful)
User Manual

1. When you first enter the website, you will be greeted with a welcome page prompting you to
either register (if you are new to this website) or login (should you have an existing account)

2. Should you choose to register, you are then greeted with a simple form asking for your
preferred username and password (itself must be input twice)

3. After you’ve successfully registered your name into the website, it then redirects you to the
login page where you input your username and password to log into the website. (First time
users may refer to the next step. If you are not, refer to step 5.)
4. Upon logging in for the first time, you are required to fill in your contact details for reference.
Click on “Submit” when you are done.

5. Upon successful login, you are then greeted with the User Homepage, where you will be able
to choose to book a new reservation (Step 5), view/edit/delete your existing reservations
(Step 6-8), view/edit your contact info, or logout from the website.

6. To book a reservation, you input your name, no. of guest, date and time of reservation.
7. Once submitted, you will be redirected to a table listing the reservation(s) you’ve made so far.
From here you can edit or delete your own reservations by clicking on the respective button
next to the row you want to edit/delete.

8. Should you choose to edit, you will be redirected to a form containing your pre-existing
booking. Just rewrite your booking details and press “Submit”.
9. Should you choose to delete your reservation(s) you can press “Delete” on the row that is
directly next to the reservation that you want to delete.

10. Once you are satisfied with your changes, you can press “Return to Home” to return to the
main screen.

11. In the “View Contacts” section, you can verify whether the contact details you have inputted
are up to date. If they aren’t, you then click “Edit” on the row next to your contact details to
edit them.

>
12. Here you can edit your contact information. Once you are satisfied with your modification,
press “Submit”.

13. Once you are satisfied with your reservation, you can then log out from the User Homepage
by clicking on “Logout”
Conclusion
No matter how small our business is, we need to build a web presence sooner or later. These days,
most tools used in making a website are free, and they can be easily found with a simple google
search without too much hassle. With the right tools and sufficient knowledge, anyone can build a
website and host it themselves. During the making of this assignment, I’ve learned about the
essentials of designing a website using HTML and CSS written using Atom, operating a MySQL
database and incorporating it into said website, all handily bundled together in a software suite called
Wampserver64. (How I solved this problem, and what did I learn?)