联系方式

  • QQ:99515681
  • 邮箱:99515681@qq.com
  • 工作时间:8:00-23:00
  • 微信:codinghelp

您当前位置:首页 >> Java编程Java编程

日期:2021-04-24 11:31

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

1. Use HTML5, CSS3, JavaScript or JQuery and Ajax for client programming;

2. Use Java servlets, JavaServer Pages (JSP) for server-side programming;

3. Use JavaBeans for session management

4. Use JDBC to connect to some SQL database server (presumably MySQL)

5. … 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-source-ecommerce/

https://blog.capterra.com/best-free-open-source-ecommerce-software-solutions/

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):

1. Browse the products (suggestion: use thumbnails on a photo grid view).

2. Click on the product (thumbnail) to view the product’s detailed information.

3. Search a product in a search bar by keyword.

4. Log in the shopping site

5. Add shopped items to shopping cart (the system maintains a user session)

6. Check out the cart, and get a receipt of the transaction.

7. Comment on the purchased products.

For Shops (Sellers):

8. Log in the system and perform administration of the shop and their products.

9. CRUD (Create, Read, Update, Delete) for each product, e.g. update the description or the

stock of a particular product.

10. Read the purchase orders posted by customers

For the e-Commerce Platform Administrator:

11. Has basic control like product category management.

12. 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:

1. Cover page with group id and group member names

2. Labor division and overall contribution per member in percentage (very important)

3. Introduction of the project or your website

4. Database design, e.g. presenting an ER diagram

5. Listing the functional requirements that you have implemented

6. Activity or sequence diagrams (UML)

7. 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, …

8. Screenshots of your web prototype (presented in a logical navigation flow)

9. 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:

1. 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)

2. Your technical report

3. 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

1. Your website layout, hierarchy of navigation, links, information put in the

web, graphics, and styling

20%

Coding and Implementation

2. 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%

3. 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%

4. Database implementation 10%

Report and Demonstration

5. Technical report summarizing your team’s project work 10%

6. Oral presentation/demo (to be done at week 14) 10%

Bonus Part

7. Deployment to a real web server environment +10% (max)

8. Adopting an MVC design pattern or an MVC framework +10% (max)

9. 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.


? Your web app’s correctness will be checked; one example is about the correctness of updating the stock of a

product; suppose multiple clients are buying the same product concurrently, is its stock in the database deducted

correctly?


版权所有:编程辅导网 2020 All Rights Reserved 联系方式:QQ:99515681 电子信箱:99515681@qq.com
免责声明:本站部分内容从网络整理而来,只供参考!如有版权问题可联系本站删除。