CS5281 Internet Application Development (Sem B 2020-21) Assignment

Client side / Server side programming with HTML, CSS, JavaScript and PHP

Goal:

To design and implement a web-based application system with the use of HTML, CSS, JavaScript and PHP technologies.

Assignment Description:

•   Students can propose their own topic such as online restaurant/hotel booking system, online survey, online quiz, online bidding system. etc. (Students may refer to the appendix for topics in past years)

•   The client side is constructed with HTML and CSS, using JavaScript as the scripting language.

•   Before information is sent from client side to server side, JavaScript should be used to check for validity of data. (e.g. illegal characters, incorrect check-in / check-out dates…etc)

•   Apart from data validation, JavaScript can also be used for tasks like: animation, statistics, time management, message processing or cookie management.

•   The server side of system should be implemented with PHP (no JSP, ASP...etc.). In this assignment, students could ignore scalability issues and store information directly in text / binary files instead of using database.

•   Students might also use SQL if they prefer. However, in order to be fair to those without database background, there will be no special support from tutor / lab technicians and no special bonus favoring students who use SQL.

•   The PHP scripts should make use of form data, cookie/session, text/binary files, and a reasonable amount of array & string operations.

•   The system should work in mainstream browsers like Edge, Firefox and Chrome. (If special browser is needed, you may wish to demonstrate with your own notebook)

•   Students may host the web system using:

1.   Personal notebook, with Apache/PHP/database (or package like XAMPP) installed. (e.g. https://www.apachefriends.org/)

2.   Online free web hosting like 000webhost or InfinityFree (https://www.000webhost.com/), (https://infinityfree.net/)

3.   CS Lab network drive account (requires CityU VPN, can be accessed only within campus)

•   Students also have to submit the source files (PHP, HTML, CSS, …etc.) as a single zip file to Canvas after the final demonstration.

•   Bonus marks would be given if advanced techniques like AJAX are used whenever appropriate.

•   Students may also include optional report which briefly describe the design, architecture, system functions, with screen captures for explanation. (a short one within 10~15 pages is good enough)

Marking:

A grade (A..F) will be given according to the following criteria:

Effort....................................................................................................25 marks

   Does the system include all necessary/reasonable features? (registration, report generation, confirmation email…etc) a system with about 5 features should be good enough.

Design ..................................................................................................10 marks

   Is the system realistic?

   Is the system efficient?

   Is the system secure / fool-proof?

Correctness...........................................................................................12 marks

   Whether the system could handle incorrect input?

   Are the assumptions valid?

   Any errors/exceptions during demonstration?

XHTML Skill.......................................................................................10 marks

   Form design

   Syntax conformance (works in any browser?)

CSS Skill..............................................................................................8 marks

   Sufficient use of CSS?

   Consideration of media?

   High Usability? (e.g. using black text on dark background?)

Use of JavaScript .................................................................................15 marks

   Form data verification

   Cookie management

   Misc. feature (animation, popup message ...etc)

Use of PHP...........................................................................................20 marks

   File / Server-side information management

   Use of session, cookie

Report (bonus) .....................................................................................+ 5 max.

Advanced features like AJAX .............................................................+7 max.

Program-generated material (e.g. CSS generated by Dreamweaver, XHTML by MSWord…etc) and non-original material (e.g. public domain JavaScript toolkit for calendar / date picker, public domain Java Applet, work done in previous courses/semesters...etc.) could be used but will not be considered in grading.

If you have used public domain material, you have to specify it in your report, in the form of acknowledgement / reference.

To ensure a reasonable assessment, the final assignment mark may be adjusted slightly according to the overall performance of class.

Important dates:

• 11-Feb: Deadline for confirmation of formation & prelim topic.

(Wk 5 Thu)

• 18-Mar: First in-class demonstration of system (client side only). Students have to give a brief demonstration (within 5 minutes) on the interface and describe the overall function of the system. Appropriate comments and suggestion will be given to students.

(Wk9 Thu)

• 22-Apr: Final demonstration of the finished system.

(Wk13 Thu)

• 22-Apr: Deadline for submission of source code and (optional) report.

(Wk13 Thu)

Final Demonstration:

•   Each will be given 10 minutes for the final demonstration.

•   Students have to design and lead the demonstration by himself / herself. (The maker would not tell you what should be demonstrated). When the time is up (10 mins), the marker will move to the next . So let’s make sure that you could demonstrate all the important features within the time provided. (It is suggested that you write a checklist of what should be demonstrated before the demo session).

•   Late/Absence cases for demonstration will not be entertained.

•   There’s no need for all members to show up, but please make sure that there’s at least one member attending the demonstration. The overall mark will be halved if the no group member shows up in the demo; (zero if no source code submission is received).

•   To ensure smooth demonstration (in case something went wrong with the lab environment), you may also use your notebook computer for demonstration.

Appendix - Potential Project Topics from previous semesters

•   Hotel booking system

o   supporting features like: room searching, booking, history, cancellation and admin pages (e.g. list all bookings today)

•   Online food / pizza order and delivery system

o   supporting features like menu, sub-total calculation, order & payment, membership and admin pages (e.g. show the pending orders)

•   Online quiz system

o   supporting features like question/answer setting, student group control, data import/export (CSV), statistics, history and quizzes in different forms (MC with shuffling, short question...etc).

•   Different online sales systems (books, T-shirt, shoes, flowers, antiques...etc.)

o   supporting features like addition of new product (allows input of information like prize, quantity, photo...etc), stock control, shopping & shipment, history, user comments.

•   Online photo album / file / music sharing

o   supporting features like file/photo upload and delete, adding friends and groups, access rights management, messaging, posting tweets and admin pages (e.g. ban users)

•   Other topics

o   Restaurant reservation

o   Online taxi booking

o   Equipment booking system (within a company)

o   Online booking of tennis court

o   Car rental system

o   Library book management system

o   ...etc.