SIT774 Web Technologies and Development
9.2C: Create a Response Page
Tasks
You are provided with an online form that implements a simple Online Order Form
for our fictitious dKin Pizza company. An example of the empty order form is
shown in the screenshot below:
2022/T1
Task 9.2C
First name
dKin Pizza Order Form
Thank you for choosing dkin Pizza! Please fill in the customer & pizza order details blelow.
Customer Details
Mark
Delivery Address
localhost:3000/order.html
123 Apple St
City
Geelong
Email address
your@email.address
Pizza Selection
Select your
pizza:
Select a size:
Special
requests:
Please select a pizza type....
Last name
Smith
Submit
State
Choose...
Mobile number
04XX XXXX
O Extra-Large Large O Medium O Small
Postcode
◆ 3216
Number of
pizzas:
O Extra Cheese O Roasted Garlic Thick Crust No Chilli
oo
Reset
1
0
x
Task 9.2C
Incognito ⠀
Task9.2.1 Example form layout
Again, to assist, the HTML source code for this order page is found on the
Ontrack website, in the task 9.2℃ through the Resources link found in the
1/4 SIT774 Web Technologies and Development
bottom right-hand corner of the page.
You are required to implement the express server code to process the content of
the submitted pizza order form and to return a formatted response. This would be
implemented in Node.js application program (i.e., a index.js file).
When the order form is completed by the user it can then be submitted to the
server for processing, using the inbuilt form submit mechanism to the route (API)
address /order through a POST request.
A sample of a completed pizza order (form) is shown below:
←
2022/T1
Task 9.2C
→ C Ⓒ localhost:3000/order.html
dKin Pizza Order Form
Thank you for choosing dkin Pizza! Please fill in the customer & pizza order details blelow.
Customer Details
First name
Anna
Delivery Address
331 Seawater Drive
City
Torquay
Email address
fishprincess74@gmail.com
Pizza Selection
Select your
pizza:
Select a size:
Special
requests:
Marinara Pizza
Last name
Kelp
Submit
State
VIC
Mobile number
0411223344
O Extra-Large O Large Medium O Small
◆
Postcode
3228
Number of
pizzas:
✔ Extra Cheese Roasted Garlic O Thick Crust ✔ No Chilli
Reset
2
Task 9.2C
Incognito
x
Task9.2.2 Example completed form
The Node.js application program should process the data submitted in the form
2/4 SIT774 Web Technologies and Development
(extracting the relevant fields form the request.body message) and return a
formatted response similar that shown in the screenshot below:
Hints
Task 9.1P
localhost:3000/order
2022/T1
Order Confirmation
Thank you for your order received on: Wed Sep 08 2021 13:49:07 GMT+1000 (Australian
Eastern Standard Time)
Pizza Details
• 2 x Medium Marinara Pizza [Options: Extra Cheese, No Chilli]
Customer Details
• Customer: Anna Kelp
• Address: 331 Seawater Drive, Torquay, VIC, 3228
• Contact mobile: 0411223344
• Contact email: fishprincess74@gmail.com
Estimated Delivery Time
Delivery expected by 2:34:07 PM (9/8/2021) -- or the pizza is free!
To return to the previous page to order another pizza, please click here: RETURN
0
oo Incognito
X
:
Task 9.2C
Task9.2.3 Example survey response
NOTE: The processing of the form should include:
1. The current date/time the order was received.
2. The expected delivery time of the pizza (simply 45 minutes added to
the current time).
Some things to consider in completing this task:
• The response page shown in here uses Bootstrap formatting, although you can
use plain HTML/text responses if you wish.
• In the server code, with the handling the POST request for the form, set a local
variable to be the current Date object, (i.e., orderDate). Then when calculating
the new delivery time (45 minutes in the future), create a new Date object and
set it with the following function (which you can add to your index.js file):
3/4 SIT774 Web Technologies and Development
function addMinutes (date, minutes) {
return new Date(date.getTime() + minutes*60000);
}
This could be called with: js
deliveryTime
=
let orderDate = new Date();
addMinutes ( orderDate, 45 );
• To display the date/time as a string (in the two formats shown in the
screenshot above), look at the Date object methods date.tostring() and
date.toLocaleDateString(). References on these methods can be found here:
• https://developer.mozilla.org/en-
2022/T1
US/docs/Web/JavaScript/Reference/Global_Objects/Date
• https://www.w3schools.com/jsref/jsref_tolocaledatestring.asp
• https://developer.mozilla.org/en-
What will you submit?
You should submit:
let
US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
Task 9.2C
• Source code of the Node.js file (i.e., the index.js file).
• Screenshot of the browser window showing the form web page with entered
customer and pizza data.
• Screenshot of the browser window showing response message after the
"Submit" button is clicked.
4/4
