代做Web编程、代写Java程序语言、Java编程调试

日期：2021-05-28 10:41

Web Development

Assignment 2

Semester 1, 2021

DUE ON: 11:59 PM, Wednesday 26 May 2021

Assignment Worth: 25% of total marks

NB: Assignments will be accepted up to five (5) days late, but a penalty of 5% per day (or part of a day) late

will be imposed on either the team or the individual depending on the circumstances.

NB: This is an individual assignment. Students are referred to the school’s policy on plagiarism. A confirmed

case will incur zero mark to all the involved students.

NB about naming standard:

- All file names must be consistent with what is specified in the assignment instruction.

o For Task 2.1, please use the same name “booking” for all types of files for this task. For

example, booking.html, booking.php, booking.js.

o For Task 2.2, please use the same name “admin” for all types of files for this task. For

example, admin.html, admin.php, admin.js.

o For the MySql table creation command, please write in mysqlcommand.txt

1. Overview

The aim of this assignment is to develop a better understanding of building web applications using

simple Ajax techniques, PHP, and MySQL. It assumes that you are able to work with MySQL and

PHP on the server, as learned in the first part and Assignment One of this course, and that you

can develop an Ajax client interface using HTML and JavaScript, as learned in the second part of

this course.

For this assignment, you will need to create all the appropriate HTML, JavaScript, PHP files and

Database tables. You should save and test all your HTML and PHP files on cmslamp14.aut.ac.nz

server in a directory "/home/<your student ID>/public_html/assign2".

2. Assignment Tasks

The assignment is to develop a simple web-based taxi booking system called CabsOnline.

CabsOnline allows passengers to book taxi services from any of their internet connected

computers or mobile phones. The techniques you are going to use include the Ajax techniques

(JavaScript/HTML, XMLHttpRequest, CSS, and DOM), MySQL and PHP. For client-server

communication, you must use XMLHttpRequest object.

Two components (booking and admin) of such an online service that must be completed for this

assignment are specified in the following two sub-sections. Other components such as querying

service for drivers, monitoring services for customers, payment processing, detailed processing for

assigning taxi are not required in this assignment but you are free to extend for your fun later.

2.1 The Booking Component

This component is used to allow a passenger to put in a taxi booking request in Auckland and

surrounding areas.

1) On the client side, design an HTML page (booking.html) and a client-side program to take

inputs for a booking request, and pass them to server for processing (using XHR object). You

need to validate these inputs before sending them to the server:

? Customer Name (Text input type. Must set its name attribute to ”cname”: <input

type=”text” name=”cname”>. NOT NULL)

2

? Phone Number (Text input type. Must set its name attribute to ”phone”: <input

type=”text” name=”phone”>. NOT NULL). Phone number must be all numbers

with length between 10-12

? Unit Number (Text input type. Must set its name attribute to ”unumber”: <input

type=”text” name=”unumber”>. Optional)

? Street Number (Text input type. Must set its name attribute to ”snumber”: <input

type=”text” name=”snumber”>. Not Null)

? Street Name (Text input type. Must set its name attribute to ”stname”: <input

type=”text” name=”stname”>. NOT NULL)

? Suburb (Text input type. Must set its name attribute to ”sbname”: <input

type=”text” name=”sbname”>. Optional)

? Destination Suburb (Text input type. Must set its name attribute to ”dsbname”:

<input type=”text” name=”dsbname”>. Optional)1

? Pick-Up Date (text or date input type. Must set its name attribute ”date”. NOT NULL,

should initially contain the current date in dd/mm/yyyy format e.g. 01/05/2021. This

can be edited by the user.

? Pick-up Time (text or time input type. Must set its name attribute ”time”. NOT NULL,

should initially contain the current time in 24h format HH:MM format e.g. 18:30. This

can be edited by the user.

Please note that the pick-up date and time must not be earlier than current date

and time on the client machine.

2) On the server side, for each booking request, a server-side program is required to generate a

unique booking reference number, booking date/time and a status with initial value

“unassigned”, and add them together with customer’s inputs into the MySQL table. In

addition, it is also required to return confirmation information to the client.

3) Design and create a MySQL table for storing information of all requests. For each request, you

need to store the generated booking number, customer’s inputs, the generated booking

date/time, and the generated status.

4) On the client side, upon receiving the returned information from the server, the client-side

program needs to display the returned confirmation information “Thank you! Your booking

reference number is <bookingRefNo>. You will be picked up in front of your provided address

at <pickupTime> on <pickupDate>.” in the <div> element of booking.html. Note that the <div>

element must include a <p name=”reference”> element that uses the confirmation information

as its content.

2.2 The Admin Component

This component allows administrative people of CabsOnline to view those taxi booking requests

that need to be assigned as soon as possible and to assign taxi for a particular booking request.

Note that authentication is not required though it is necessary in the real application. If you provide

this function, you must provide the password and explain it in the readme document. The specific

functions of this component include:

1) Design an HTML page (admin.html) that takes two types of requests:

1

*** Note that it is not necessary to validate the genuineness of an address. But if you want to do that to make the

application more realistic, you can use google.maps.Geocoder() Web API. Please refer to Google Map API

online document or https://codepen.io/pavenuto/pen/dXkgEz on how to do that.

3

The first is to search booking requests and is realized by a single button to show pick-up

requests.

This search function has one text input field:

? Search Bookings (Text input type. Must set its name attribute to ”bsearch”:

<input type=”text” name=”bsearch”>. Optional). User can either input a

reference number or nothing:

i. If a reference number is input, then the booking record associated with this

reference number is returned by the server.

ii. If user input nothing (empty), then a list of bookings with a pick-up time within 2

hours from now is returned by the server (see below Item 3 for details).

? Search Button (button input type. Must set its name attribute to ”sbutton”: <input

type=”text” name=”sbutton”>).

The second is to assign taxi for a particular booking request (See Item 4 for details)

2) Once the button search booking is pressed, a client-side program issues a query request to

the server (using XHR object); once the button assign taxi is pressed, a client program

issues an assigning request to the server with a booking reference number.

3) On the server side, a server-side program responds differently for different types of

requests from the client:

a. For a request for showing pick-up requests, the server-side program executes a

query on the MySQL database for finding those “unassigned” booking requests

with a pick-up time within 2 hours from now only. For each found request, the

booking reference number, customer name, contact phone, pick-up suburb,

destination suburb, and pick-up date/time are required to return to the client.

b. For a request for assigning taxi, make an update to the MySQL database to change

the status of the booking request that matches the given booking reference number

from “unassigned” to “assigned”, and return confirmation information to the

client.

4) On the client side, for a request for showing pick-up requests, you display the returned

information in a <div class=”content”> area of the HTML page admin.html.

? Inside the div element is a <table> element with the following table header fields exactly

as follows: “booking reference number”, “customer name”, “phone”, “pick-up suburb”,

“destination suburb”, and “pick-up date/time”, “status”, “assign”.

? Each table row must contain one record. For each row, the “assign” field must contain a

button with name “assign”, and when its clicked, the “status” of this record needs to be

updated on both the database and the html page.

Submission Requirements

You should ensure that all files used for the assignment sit in a directory called “assign2” (use this

name exactly, it is case sensitive and no space between assign and 2) within your cmslamp14

account. The directory should contain no sub-directories (i.e., all files are placed directly under the

“assign2” directory).

The assignment should be submitted as an individual work using the Assignment 2 link in

Blackboard (inside the Assignments area)

Please compress all your html and PHP files as a zip file named “assignment_2.zip” to

submit via Blackboard submission link. You can submit more than once.

The files should include:

? two HTML files booking.html and admin.html;

4

? any JavaScript files that you use;

? any CSS files that you use;

? any PHP files that you use;

? a text file “mysqlcommand.txt” that includes the MySQL commands that you used to create

the database;

? a text file readme.txt that includes

o a list of all the files in the system;

o brief instructions on how to use the system.

For each submitted file, we require clear comments including student information, description of

the file, and description of each function defined in this file.

The MySQL database that you use should be constructed in your cmslamp14 account. After

submission, you are not allowed to change any of the submitted files in the assign2 directory on

your cmslamp14 account; time stamps will be checked.

Assignments that fail to follow "submission requirements" will NOT be assessed.

Notes:

Please remove your database login details from the files before submitting to Blackboard to avoid

potential privacy breach.

Following is a guideline that you may follow to submit your assignment:

1. Make your code working on cmslamp14 server in the folder ‘assign2’

2. Download the folder (including all the files in it) to your local machine

3. If any PHP file in the folder contains your password then please replace the password

string with an empty string in a text editor

4. Make a zip archive of this folder and submit through Blackboard ‘Assignments” area

* Make sure to test your program on the cmslamp14 server before your submission.

* If your assignment cannot run on cmslamp14, your result will be 0 marks for this assignment.

Marking Scheme

Work will be assessed based on the quality and presentation. The assignment will be marked out

of 100 and will contribute 25% towards assessment of this course.

Assessment item Marks

comment and readme.doc 10

Quality of code 5

Usability of user interface 5

2.1.1 10

2.1.2 10

2.1.3 15

2.1.4 10

2.2.1 10

2.2.2 15

2.2.3 10

Total 100