DivisionofAppliedScienceandTechnology,CommunityCollegeofCityUniversity
AST20201 Web Programming
1
AST20201 Web Programming
Group Project
A. Objectives
By working on this project, a number of Course Intended Learning Outcomes would be
achieved, particularly on the last item.
Apply HTML5 and Java Enterprise Technology to e-Business applications;
Create interactive Web using JavaServer Pages and an appropriate database server;
Manage Java Servlet and Filter concepts on advanced Web application development;
Apply appropriate technology to handle Web application security;
Evaluate Java-based Content Management Systems for building Web-based Enterprise
Resource Planning (ERP) application.
B. Overview of Technologies Being Used
- Use HTML5, CSS3, JavaScript or JQuery and Ajax for client programming;
- Use Java servlets, JavaServer Pages (JSP) for server-side programming;
- Use JavaBeans for session management
- Use JDBC to connect to some SQL database server (presumably MySQL)
- … and more, say, if you use an MVC framework like Spring or JSF (JavaServer Faces)
C. Introduction
Amazon, eBay, Taobao are online shopping giants that we knew very well. Take Taobao as an
example for discussion. It is not a single e-shop but an e-commerce platform provider. It
provides a platform or content management system (CMS) for sellers to publish and manage
their shops on Taobao. Now, your role is much like Taobao – an e-commerce platform provider,
which provides two kinds of user interfaces: - Seller interface
- Buyer interface
You should evaluate some open-source e-Commerce platforms like the examples in the
following links and then implement a prototype of an e-Commerce solution.
https://selfstartr.com/open-s…
https://blog.capterra.com/bes…
When creating your prototype, you have to design your database and the GUI in web page
format to support both seller and buyer activities.
There are actually two more interrelated platforms or external interfaces gluing the entire ecommerce
platform:
Shipping (goods delivery) and
Payment gateways for monetary settlement
But these two external interfaces are beyond our control or outside the scope of this project;
you can simply ignore them all, and assume the data about goods delivery and payment are
stored in the database of the e-commerce web application.
DivisionofAppliedScienceandTechnology,CommunityCollegeofCityUniversity
AST20201 Web Programming
2
D. Basic Functional Requirements
For Customers (Buyers): - Browse the products (suggestion: use thumbnails on a photo grid view).
- Click on the product (thumbnail) to view the product’s detailed information.
- Search a product in a search bar by keyword.
- Log in the shopping site
- Add shopped items to shopping cart (the system maintains a user session)
- Check out the cart, and get a receipt of the transaction.
- Comment on the purchased products.
For Shops (Sellers): - Log in the system and perform administration of the shop and their products.
- CRUD (Create, Read, Update, Delete) for each product, e.g. update the description or the
stock of a particular product. - Read the purchase orders posted by customers
For the e-Commerce Platform Administrator: - Has basic control like product category management.
- CRUD for shops
E. User Interfaces
The buyer interface is much like any online shopping malls. You can search a product by
keyword or look up via a category index. Products are generally displayed in a photo grid with
price, product title and/or a brief description. One advanced feature is to let buyers leave
comments on a product after receiving and using it.
DivisionofAppliedScienceandTechnology,CommunityCollegeofCityUniversity
AST20201 Web Programming
3
The seller interface is an administrative webpage that can be used to create a new shop and the
products to be sold under it. This part is much like a Content Management System (CMS).
Perhaps not every piece of data can be managed through this interface, but it should be able to
manage the list of products, and the details of each product, including the photos associated
with a product.
Responsive Web Design is one aspect we would look at when judging the design of your web
application. Your website layout should be able to adapt to the screen sizes of different devices
(desktop PCs, tablets and smartphones) for achieving the best user experience.
When doing HTTP post or get, the use of AJAX for partial HTML update instead of full page
reloading is another thing that determines the quality of your prototype.
F. Code Implementation
Important: To match with our course intended learning outcomes, there is one rule to
observe: for the server-side programming, you are required to use Java EE (servlets, JSP)
instead of PHP or other languages like .NET.
You are highly encouraged to use GitHub to perform source version control of your web
application.
Notes on Software Development Tools
IDE: You are supposed to use Netbeans or Eclipse to develop your web prototype. If you opt
for other IDEs, then your marker has to install the IDE in order to open your web project, and
this will complicate the marking.
Web Application Server (Servlet Container): Please choose either Oracle GlassFish or
Apache Tomcat. Both of them have been bundled with Netbeans. Other choices are excluded.
If you would attempt the bonus part (real web server deployment), then you may better use
Tomcat for your testing, so you can easily deploy the web application later to some free hosting
services like Redhat’s OpenShift or Amazon’s AWS Beanstalk. You also need to give up using
EJB (Enterprise JavaBeans) because Tomcat is not an EJB container while GlassFish is. EJB
is out of our syllabus and we expect that you won’t use it.
Database Server: Please stick to the only choice – MySQL Community Server – for simplicity
of our marking.
Third-party Plugins/Libraries: We would like to assess your web programming skills using
Java servlets, JSP, JavaScript, jQuery, HTML, and CSS in this project. If you have incorporated
any third-party UI controls like jQuery plugins, you MUST state or acknowledge them clearly
in the report. Depending on the complexity of using the plugins, we might regard these as your
integration effort rather than programming effort. On the other hand, when writing JSP pages
say, feel free to use JSTL (JSP Standard Tag Library), which is not regarded third-party but
official, and your effort of using it is counted towards programming effort.
DivisionofAppliedScienceandTechnology,CommunityCollegeofCityUniversity
AST20201 Web Programming
4
Application Frameworks:
It is quite common nowadays for web developers to adopt third-party application frameworks
for rapid application development. For CSS, feel free to use any frameworks like Bootstrap,
Materialize, Foundation, W3.CSS, etc. For client-side JavaScript frameworks, there are a glut
of choices: AngularJS, Knockout, React, Vue, Ember, and many others. Using their APIs is
much like learning another programming language. For simplicity and aligning with our
syllabus better, we still recommend using the jQuery library alone, but you are still granted the
freedom to use these other JS frameworks. For server-side frameworks, since our requirement
is to use Java EE, you might choose to use a Java-based MVC framework, presumably Spring
MVC for our easier marking. Some advanced features like using the Hibernate framework or
EJB (Enterprise JavaBeans) implementations for object persistence is not required and not
recommended in this project as this complicates our marking too much.
G. Testing Data
You need to generate your own testing data. This web application that you are going to build
is just a prototype for proof of concept mainly. Therefore, you don’t need to care too much
about whether the categories are products are wide enough. You may feel free to pick only a
handful of categories of goods to sell, e.g. fashion, electronic devices, furniture, toys, and
prepare around 10 products under each category. You can capture some product information
and product images from Amazon, eBay or Taobao to be your testing data (indeed, Amazon
provides Web APIs for the public to download their product data). This will make your
prototype look more real-life, and save your time of writing up product descriptions, and
drawing pictures or taking photos for your products.
H. Deployment to the Internet (Optional Bonus Part)
We expect team-based demonstration of your web prototype in Week 14 on a local server
environment – likely your laptop PC with application and database servers installed. But we
encourage you to gain real experience of web application deployment by launching your
prototype to some web server accessible on the Internet. We will reward extra bonus marks if
you do so. One possible way is to convert your home desktop PC into a Web server (if your
home IP is static or if you apply some dynamic DNS service). Another way is to try some
public Web hosting services; choices that are free of charge and useful for our project are:
OpenShift by Red Hat provides free plan to work with JSP, Java servlets, and Spring
framework. It seems to support launching a MySQL instance as well. This is the most
suitable for deploying your project.
Amazon’s AWS Elastic Beanstalk provides service for deploying and scaling web
applications and services developed with Java. They use Apache Tomcat as the web
application container. You can apply a free account for trial. So, it looks suitable for this
project too. Another choice is to use Amazon EC2. A virtual machine instance in cloud
will be given to you, and you can connect to the machine via SSH. Normally, you will be
given a Linux environment. Then you may install and customize everything like Tomcat,
MySQL server and other software by yourself there (some guidelines are here) – this gives
you the most freedom at the cost of environment setup efforts.
Heroku | Cloud Application Platform also offers free plan which you can try
DivisionofAppliedScienceandTechnology,CommunityCollegeofCityUniversity
AST20201 Web Programming
5
Google App Engine also supports Java. To learn more, you may go through this tutorial.
For Google App Engine, setting it up to use MySQL is very hard; Google wants you to
use its Cloud SQL. You can get a free trial, but it seems to ask for your credit card number
in order to let you register as a user.
I. Technical Report
About 10 to 20 pages (but no specific limitations). Content may include: - Cover page with group id and group member names
- Labor division and overall contribution per member in percentage (very important)
- Introduction of the project or your website
- Database design, e.g. presenting an ER diagram
- Listing the functional requirements that you have implemented
- Activity or sequence diagrams (UML)
- Description of your implementation, e.g. what technologies you used for each part, some
very high-level code walkthroughs on major functionality, citation of any 3-rd party
plugins, tools, frameworks, … - Screenshots of your web prototype (presented in a logical navigation flow)
- List of References (books, online articles, …)
J. Prototype Demonstration
Every team will be given at most 15 minutes (Q&A time included) to present and demonstrate
their web prototype in front of the class. You may use a short PowerPoint slide to introduce
your team and the design of your prototype, but this is optional and to be brief. The key is to
demonstrate your implemented website interactively.
K. Deliverables and Submission
The deadline for submission of your group project is by the end of Week 14. You have to
submit a zip file that contains the following deliverables: - Your Netbeans or Eclipse project directory, which contains
a. All the source files: .jsp, .java, .html, .css;
b. Configuration files: web.xml, project settings, …
c. Resource files: images, videos (if any), audios (if any);
d. Your exported database (both schemas and data) in form of a SQL script
(Refer to this page to learn how to export);
e. Binaries of all 3-party libraries or plugins that you have adopted.
f. A readme text file, which documents
i. the URL of your deployed web site (if any)
ii. installation methods of 3-party libraries or custom configuration needed (if any) - Your technical report
- Your presentation PowerPoint (if any)
DivisionofAppliedScienceandTechnology,CommunityCollegeofCityUniversity
AST20201 Web Programming
6
L. Marking Scheme and Rubrics
Note: The total marks including bonus points will be capped as 100% (equivalent to 20%
course-level marks).
Refer also to the following rubrics to know more about how your prototype being demonstrated
will be assessed for assessment items 1 to 3.
- We said that interface with a payment gateway is skipped in this project because it is hard to find one that is
free for experiments. But you can try PayPal Sandbox, which is free, if you’d implement it for completeness.
Graded items Weighting
UI/UX Design and Stuffing for Your Web - Your website layout, hierarchy of navigation, links, information put in the
web, graphics, and styling
20%
Coding and Implementation - Client-side Development
Functionality: - Input validation
- Partial update of the page via Ajax calls
- Implementation of Responsive Web Design (RWD) – adapt to screen sizes
using fluid grids, media queries and flexible images or media
(Technologies involved: HTML5, CSS3, JavaScript or JQuery)
20% - Server-side Development
- Browsing and searching on the shopping site
- HTTP session, shopping cart, place orders, post comments on products
- CRUD operations for shops, product categories, and products
(Technologies involved: Java servlets, JSP, JavaBeans, JDBC)
30% - Database implementation 10%
Report and Demonstration - Technical report summarizing your team’s project work 10%
- Oral presentation/demo (to be done at week 14) 10%
Bonus Part - Deployment to a real web server environment +10% (max)
- Adopting an MVC design pattern or an MVC framework +10% (max)
- Any additional functional features, e.g. integration with social networks,
calling some external Web services like Google Map, PayPal API*
, …
+10% (max)
Total: 100%
DivisionofAppliedScienceandTechnology,CommunityCollegeofCityUniversity
AST20201 Web Programming
7
Rubric for Assessment Item 1 (UI/UX Design and Stuffing for Your Web)
Beginning Developing Accomplished Exemplary
Layout/Design The pages are
unattractive. Text
is difficult to read.
The backgrounds
are distracting.
The pages appear
“busy”or“boring”.
Text may be
difficult to read.
The backgrounds
are somewhat
distracting.
The pages are eyecatching
and
attractive. Text is
easy to read. The
backgrounds are
subtle and
appropriate.
The pages are well
organized with
tables. Text spacing
and alignment make
reading easy. The
backgrounds
enhance the page.
Graphics There are no
photos, icons or clip
art or they are
inappropriate or of
low quality.
Photos are blurry or
fuzzy; icons and
clip art do not“fit”
with the topic. Too
many pictures make
the download time
slow.
Photos, icons, and
clip art are
appropriate, of high
quality, and
download fairly
quickly.
Photos, icons, and
clip art are used
creatively and may
follow a theme.
Information Information is
poorly written,
inaccurate, or
incomplete.
Information could
be better written
and too much
information is given
in each section.
Information is well
written and
interesting to read
and is presented in
short sections.
Information is
creatively written
and cleverly
presented.
Navigation/Links The user may
become lost or links
may be missing or
not working.
The user may
become confused
when navigating
between pages.
Some links may not
work.
Links are consistent
and easy to find so
that the user can
easily navigate back
and forth through
pages.
Links are created
with images and
icons to enhance
the text links.
Rubric for Assessment Item 2 (Client-side Development)
Beginning Developing Accomplished Exemplary
Client-side
Functionality
(Response and
Ajax-based)
The visual design is
of a poor standard
and can only be
viewed in one
viewport, with
many issues
present. The
navigation system
is poor and
interactions provide
a poor experience
overall. Ajax is not
used.
The visual design is
of a satisfactory
standard and
responsive across
two viewports, with
some issues
present. The
navigation system
is appropriate and
interactions provide
a satisfactory
experience overall.
Ajax is not used, or
used but resulting
some issues.
The visual design is
of a good standard
and responsive
across multiple
viewports, with
some minor issues.
The navigation
system is
appropriate and
interactions provide
a good experience
overall. Ajax is
used for partial
update, but
sometimes
reloading the full
page.
The visual design is
highly professional
and responsive
across multiple
viewports. A
responsive
navigation is
incorporated and
thought has been
put into how the
user interacts with
application to
provide an excellent
experience. Ajax is
used intensively
instead of reloading
the full page often.
Client-side
Development
Quality
(HTML / CSS /
JS / jQuery)
HTML, CSS render
inappropriately in
the browser. Event
handling gets to be
wrong.
HTML and CSS
sometimes cause
issues when
rendering in the
browser.
HTML, CSS and JS
code are mostly
well written and
partially
documented.
HTML, CSS, and
JS code are all well
written and fully
documented.
DivisionofAppliedScienceandTechnology,CommunityCollegeofCityUniversity
AST20201 Web Programming
8
Rubric for Assessment Item 3 (Server-side Development)
Beginning Developing Accomplished Exemplary
Server-side
Functionality
(Browse /
Search / Order /
Comment /
User session
(shopping cart) /
CRUD for admin
of DB objects)
Minimal effort.
Both buyer and
seller
functionalities do
not work well.
Buyer can browse
and sellers can post
products.
Transactions can be
placed.
Buyer can browse
and search for
products; sellers
can perform CRUD
on products.
Platform admin can
perform CRUD on
product categories.
Transactions can be
placed.
Buyer can browse
and search for
products; user
session and
shopping cart are
working; sellers can
perform CRUD on
products. Platform
admin can perform
CRUD on product
categories.
Transactions can be
placed.
Server-side
Development
(JSP / Servlets /
JavaBeans)
The Web app works
with a number of
errors. An attempt
is made at one
client server
interaction, which
will partially work.
Code could be
better written.
The Web app works
with a few errors,
and demonstrates at
least one client
server interaction.
Code is mostly
written correctly,
but a few minor
issues are visible
when it runs.
The Web app works
with only minor
errors, and
demonstrates
multiple client
server interactions.
Code is written and
organised
appropriately and is
mostly commented.
The Web app works
without any major
errors†
, and
demonstrates
multiple client
server interactions
appropriate to the
scenario. Code is
written and
organised
professionally and
is fully commented.