代做CO3098/CO7098、代写JSON, Bootstrap, AJAX、代做Java设计、代写Java

日期：2018-11-30 10:23

CO3098/CO7098

Coursework 3

Mini Web Project - Genealogy Explorer

Important Dates:

Handed out: 28-Nov-2018

Deadline: 6-Jan-2019 at 23:59 GMT

The deadline is strict and will not be changed. Please ensure that you submit your work in time.

This coursework counts as 22% of your final mark.

Please read guidelines on plagiarism in the study guide and course documentation.

This coursework requires knowledge about REST Web Service, JSON, Bootstrap, AJAX and the

Web MVC framework.

Learning outcome:

Use a web MVC framework to create web applications.

Demonstrate the understanding of technologies behind Web Service

Coursework Description

Your task is to develop the Genealogy Explorer (GE), an online tool for building a family tree and tracking

ancestry. This piece of coursework consists of two parts – Part 1 (RESTful Service) and Part 2 (Web

Interface). You will need to develop a RESTful web service back-end for searching and editing genealogy

records, and to design a web interface for creating and browsing these data.

You may start your work from Part 1 or Part 2 first as you wish. Java domain class templates and a SQL file

is provided on Blackboard (see Appendix). You may choose to use them for implementation, and you are

allowed to make any changes to them.

Part 1: RESTful Web Service [40 marks]

GE allows users to create and edit a family tree. Your tasks in Part 1 are to implement the following REST

Web Service methods (a), (b), (c), (d) and (e).

(a) Adding a person [10 marks]

(1) GET /GE/person/add?key=3&name=RichardIII&dob=14830626&m=1&f=2&g=male

Submit a GET request to this URI to add a person to the database.

Parameter:

key : the unique key of the person (*)

name : full name of the person (*)

m : the person’s mother’s key

f : the person’s father’s key

dob : the person’s date of birth (e.g. 19921210 – December 10th 1992)

g : the person’s gender

* Required fields

(2) POST /GE/person/addJSON

JSON request

{

"key": "1",

"name": "RichardIII",

"dob": "14830626",

"gender": "male"

"m": "2",

"f": "3"

}

Successful response in JSON

{"result": "true"}

Unsuccessful response in JSON

{

"result": "false",

"message": "person id already exists (or m/f id does not exist)"

}

Add a new person to the database. This request returns true if the operation is successful, otherwise false

is returned. (e.g. a person with the provided id already exists; one of the parent ids does not exist)

Consider the following HTTP GET requests:

GET /GE/person/add?key=1&name=King%20George%20VI

GET /GE/person/add?key=2&name=Queen%20Elizabeth

GET /GE/person/add?key=3&name=Queen%20Elizabeth%20II&m=2&f=1

GET /GE/person/add?key=5&name=Prince%20Philip%20Duke%20of%20Edinburgh

GET /GE/person/add?key=4&name=Princess%20Margaret&m=2&f=1

GET /GE/person/add?key=6&name=Prince%20Charles&m=3&f=5

GET /GE/person/add?key=7&name=Princess%20Diana

GET /GE/person/add?key=8&name=Prince%20William&m=7&f=6

GET /GE/person/add?key=9&name=Prince%20Harry&m=7&f=6

GET /GE/person/add?key=10&name=Catherine%20Duchess20%of20%Cambridge

GET /GE/person/add?key=11&name=Prince%20George&m=10&f=8

The family tree structure below will be created (Note that spaces in URLs are encoded as %20; optional

arguments are omitted)

Figure (1) Example - Royal Family Tree

It is also possible to add multiple persons at the same time by posting a JSON array to addJSON. For

example, the following JSON will add two people to the database:

{

"list":[

{

"key":"12",

"name":"Princess Charlotte",

"dob":"20150502",

"gender":"female",

"m":"10",

"f":"8"

},

{

"key":"13",

"name":"Prince Louis",

"dob":"14830626",

"gender":"male",

"m":"10",

"f":"8"

}

]

}

This request returns true if all people are added successfully, otherwise the operation is cancelled and

false is returned.

(b) Deleting a person [5 marks]

GET /GE/person/delete/7

Delete a person with the given key (e.g. key=7) from the Genealogy database. The person's descendants

should NOT be deleted from the family tree. The request should return true if the operation is successful,

otherwise false is returned. For example, the above HTTP GET request should not delete key=8, 9,

10 or 11 in Figure (1).

Successful response in JSON

{"result": "true"}

Unsuccessful response in JSON

{

"result": "false",

"message": "key X does not exist"

}

(c) Getting information about a specific person [5 marks]

GET /GE/person/get/12

Return the information about a person with the given key in JSON:

Successful response in JSON

{

"key": "12",

"name": "Princess Charlotte",

"dob": "20150502",

"gender": "female",

"m": "10",

"f": "8"

}

Unsuccessful response in JSON

{

"result": "false",

"message": "key X does not exist"

}

(d) Finding someone’s ancestors [10 marks]

GET /GE/person/ancestors/6

Return the person’s direct-line ancestors (a direct-line ancestor is someone from whom you descend in a

direct line - parent to child, grandparent, great-grandparent etc.) as a JSON object. Given the family tree in

Figure 1, the GET request above should return all direct-line ancestors of the person (key=6) as a JSON

object:

{

"key":"6",

"parents":{

"m":{

"key":"3",

"parents":{

"m":{

"key":"2"

},

"f":{

"key":"1"

}

}

},

"f":{

"key":"5"

}

}

}

Unsuccessful response in JSON

{

"result": "false",

"message": "key X does not exist"

}

Note: You may include other attributes (e.g. name, gender etc) in the JSON response.

(e) Finding someone’s descendants [10 marks]

GET /GE/person/ancestors/7

Return all of the person’s lineal descendants (a lineal descendant is a blood relative in the direct line of

descent – the children, grandchildren, great-grandchildren, etc.) as a JSON object. Given the family tree in

Figure (1), the GET request above should return all descendants of the person (key=7) as a JSON object:

{

"key":"7",

"children":[

{

"key":"8",

"children":[

{

"key":"11"

}

]

},

{

"key":"9"

}

]

}

Part 2: Web Interface [60 marks]

Your task in Part 2 is to design and implement a web interface for creating and editing the Genealogy data.

You may use any Web Frameworks (MVC, MVP or MVVM) for implementation, including but not limited

to:

Spring MVC

ASP.NET MVC

Ruby On Rails

Laravel PHP

AngularJS

Django

Ember.js

The architecture and good coding practice will also be taken into account when allocating marks. The mark

for this piece of coursework will be capped at 65% if the solution does not use any web framework (Please

consult with the convenor first if the framework you intend to use is not listed here).

Your tasks in Part 2 are to implement a Web Interface for (f), (g) and (h)

(f) Browsing genealogy records [20 marks]

(g) Adding, deleting and editing persons from the family trees [20 marks]

(h) Searching descendants and ancestors [20 marks]

In addition to the functionality, the website responsiveness (page rendering on a variety of devices and

window or screen sizes) will be taken into account when allocating marks.

Marking Scheme & Rubrics

Part 1:

REST Service API testing process will be automated. Test cases will be provided for each REST controller

method (a), (b), (c), (d), (e) to check whether methods are behaving as they are expected. Marks will be

distributed according to test results.

Part 2:

N (0%)

No submission

F (0-40%)

Front-end HTML page exists, but the program fails to load or display any genealogy data. No listing

of records in a simple form (e.g. table). No front-end framework/CSS used.

An attempt was made but adding/deleting/editing functions are not functional.

Static web pages (or view) for searching descendants/ancestors exists but without any connection to

the database.

E (40-50%)

Basic HTML pages/view without any front-end framework/CSS; do not adopt a responsive design.

Listing of genealogy records in simple form, e.g. display all persons in a simple HTML table; formbased

adding, deleting and editing feature developed, but still not functioning properly.

Static HTML page and server-side code for searching partially implemented, but there are still major

issues. (e.g. failed to return any result, 500 internal server error)

D (50-60%)

Adopt responsive web design in the development, but there are major issues. (e.g. cannot navigate

the website through desktop/mobile)

Genealogy records are loaded and displayed in a static tree-like structure (e.g. HTML <ul>, <li> and

CSS); form-based adding, deleting and editing functions partially implemented; Use of JavaScript

for client-side validation;

Search function linked to the database and works to a certain extent; sometimes, the page crashes or

the results of searching are incorrect (e.g. does not include all descendants, wrong ancestor returned).

C (60-70%)

The adoption of responsive web design, basic browser resizing and cross-device compatibility

Genealogy records show in a static or interactive tree-like structure; adding, deleting and editing

functions are implemented. Ajax/jQuery is used in certain areas but limited, page reloading is still

required.

Search results are mostly correct; results are displayed in HTML (e.g. tables, <ul><li> etc.).

B (70-80%)

Genealogy records displayed as an interactive tree (e.g. GoJS genogram chart).

Ajax/jQuery is used in some core features so that the tree can be refreshed without reloading (users

are able to make any change to the family tree directly without postback)

Search function invokes the RESTful service implemented in Part 1.

The searching function passed all test cases, and results are displayed in HTML with pagination.

A (>80%)

Optimise website for mobile devices, supporting both the portrait and landscape view in a variety of

mobile devices with different screen sizes.

Secure RESTful Service with OAuth2 Tokens.

Genealogy records are visualised as an interactive tree.

Ajax/jQuery is used appropriately in most features.

The searching function passed all test cases.

Search results can be visualised using an interactive chart.

Overall Score

How your score will be calculated:

(Where p is the number of passed test cases, n is the total number of test cases, wi refers to the

weight for each test case)

Submission

Zip all files in a single zip file for submission:

o Your Dynamic Web project or Gradle/Maven project folder

o README.txt

o Your SQL schema and data, if applicable (Your_email_ID.sql)

The archive should be named CO3098_MiniWeb_email_id.zip or

CO7098_MiniWeb_email_id.zip (e.g. CO3098_MiniWeb_yh37.zip).

Note: Please contact the module convenor first if you choose to use .NET WCF or other frameworks for

Part 1 and 2. You need to submit the zip file via Blackboard and you are allowed to re-submit as many times

as you like before the deadline.

Anonymous marking

We operate an anonymous marking scheme. All submitted WAR files (or other project files) will be

deployed to Tomcat using anonymous fingerprinting generated by SHA256.

Appendix

1.1. You can use any CSS/JS library for showing the family tree. Here are some candidates:

HTML/CSS Family Tree

https://codepen.io/anon/pen/bdjMop

https://jsfiddle.net/r8nbd1wb/6/

dTree.js (Static JS Tree)

https://treehouse.gartner.io/ErikGartner/58e58be650453b6d49d7

GoJS (Interactive Genogram chart)

https://gojs.net/latest/samples/genogram.html

OAuth2 in Spring

https://projects.spring.io/spring-security-oauth/docs/oauth2.html

Pagination in Spring

https://ankushs92.github.io/tutorial/2016/05/03/pagination-with-spring-boot.html

https://examples.javacodegeeks.com/enterprise-java/spring/mvc/spring-mvc-pagination-example/

1.2. Persistence Frameworks

You may use GenealogyDB.sql provided on Blackboard, if you intend to write your own DAO classes in

conjunction with some ORM frameworks such as Hibernate for data persistence. You do not have to use

this file if you intend to use Spring JPA, NoSQL (e.g. Mongodb, Oracle Spatial Graph) or other persistence

frameworks.

1.3 Domain classes

You may use the Java domain classes provided for implementation. However, you may choose not to use

them.