Web Development Project: Interactive Pizza Ordering Website

This assignment solution details the creation of a functional pizza ordering website. The project includes an HTML home page with a link to the online shopping page, followed by an online pizza ordering page requiring user login. The website offers five pizza options, with detailed sauce and quantity selection. A shopping cart page allows users to review their orders, and a checkout page validates user input using JavaScript. Finally, a confirmation page displays the order details and total cost. The solution uses HTML for structure, potentially CSS for styling, and JavaScript for validation and interactive elements, demonstrating a comprehensive understanding of web development principles. The project also covers database interaction for storing user login credentials. The provided solution showcases the development of each page, from the initial homepage to the final confirmation page, along with the associated functionalities like login, cart management, and checkout procedures.

Running head: COMMUNICATION AND INFORMATION TECHNOLOGY
Communication and Information Technology
Name of the Student
Name of the University

1COMMUNICATION AND INFORMATION TECHNOLOGY
Table of Contents
1. HTML home page:......................................................................................................................2
2. Online Pizza Ordering Page:.......................................................................................................3
3. Detailed sauce and quantity page:...............................................................................................5
4. Shopping Cart page:....................................................................................................................6
5. Checkout page:............................................................................................................................8
6. Confirmation Page:....................................................................................................................14
Bibliography:.................................................................................................................................15

2COMMUNICATION AND INFORMATION TECHNOLOGY
1. HTML home page:
Figure 1: Home Page of Western Sydney Pizza Store
(Source: Created by Author)
The image in the middle of the page serves as the link to the online shopping page.

3COMMUNICATION AND INFORMATION TECHNOLOGY
2. Online Pizza Ordering Page:
Figure 2: Online Pizza Ordering Page before Login
(Source: Created by Author)
It has been assumed that the user has to login to purchase pizza. It is an extra effort for
making the website more functional. If the user clicks on the images of the pizza the page will be
redirected to login page.

4COMMUNICATION AND INFORMATION TECHNOLOGY
Figure 3: Login Page
(Source: Created by Author)
The login id and password is stored in the database of the pizzastore. If the password or
username is incorrect, the website will show a message.
Figure 4: Error Message in Login Process
(Source: Created by Author)
If the correct login id and password is inputted then the page will be redirected to the
shopping page. Now this page will have some changes in the menu. The website offers total five
pizzas like Supreme, Veggie, Hawaii, Meatlover and Four seasons.

5COMMUNICATION AND INFORMATION TECHNOLOGY
Figure 5: Online Pizza Ordering Page after Login
(Source: Created by Author)
As it can be seen the ‘cart’ and user name ‘Bill John’ will be seen in the page. If the
‘Logout: Bill John’ link is clicked then the user will logout of the website and the session will
destroy.
3. Detailed sauce and quantity page:
Suppose the image of supreme pizza is clicked then page will redirected to the ‘Detailed
sauce and quantity’ page.

6COMMUNICATION AND INFORMATION TECHNOLOGY
Figure 6: Detailed sauce and quantity
(Source: Created by Author)
On this page three sauces will be shown with their price. There is a separate button for
each of the pizzas. The user can choose only one sauce for a particular pizza. For getting another
sauce, the user has to buy another pizza. The user can select the amount of the pizzas that he/she
wants to buy in this page.
4. Shopping Cart page:
If the user clicks on the ‘Add this sauce to Pizza’ button, the user will be redirected to
shopping cart page. The user has to select at least 1 as the number of pizzas.

7COMMUNICATION AND INFORMATION TECHNOLOGY
Figure 7: Shopping Cart
(Source: Created by Author)
As the user will order pizza(s) the ‘cart’ in the menu will show how many pizzas have
been ordered so far. The user can go to shopping cart page buy clicking on this link.
Figure 8: Detailed sauce and quantity
(Source: Created by Author)
In this page the user can see the details of the order he has placed. The user can either buy
more pizzas or can check out. Suppose the user buys another pizza. The shopping cart will show
the list of pizzas, sauce, price and quantity.

8COMMUNICATION AND INFORMATION TECHNOLOGY
Figure 8: Shopping Cart with More Than One Order
(Source: Created by Author)
5. Checkout page:
If the user clicks on the checkout button then the user will be redirected to the checkout
page.

9COMMUNICATION AND INFORMATION TECHNOLOGY
Figure 9: Check Out Page
(Source: Created by Author)
In this page the user will see the total amount along with the order review. The user will
now input the name, phone number and email address in this page. The JavaScript has been used
for validating the input of the user.

10COMMUNICATION AND INFORMATION TECHNOLOGY
Figure 10: Given Name Validation
(Source: Created by Author)

11COMMUNICATION AND INFORMATION TECHNOLOGY
Figure 11: Last Name Validation
(Source: Created by Author)

12COMMUNICATION AND INFORMATION TECHNOLOGY
Figure 12: Contact Number Validation
(Source: Created by Author)

13COMMUNICATION AND INFORMATION TECHNOLOGY
Figure 13: Email Address Validation
(Source: Created by Author)
If the user wants to buy some more pizzas he/she can click on the ‘Continue Shopping’
link or can click on ‘Confirm’ button. Upon confirmation of order the page will redirect the user
to another page.

14COMMUNICATION AND INFORMATION TECHNOLOGY
6. Confirmation Page:
On the conformation page, the user input details along with a message ‘Order Confirmed’
will be shown. The page will also print the name of the User as inputted in the checkout page and
the total cost of the order. The user can now logout as and in order to make another order the
user has to login again.
Figure 14: Conformation Page with Total Cost of Order and User Input Details
(Source: Created by Author)

15COMMUNICATION AND INFORMATION TECHNOLOGY
Bibliography:
Crowther, R., Lennon, J., Blue, A., Wanish, G. and Heilmann, C., 2014. HTML5 in Action.
Manning.
Tam, A., 2017. Job Matching and Pushing Software System Final Report.