CST 2120 – Web Applications and Databases – Coursework 3 – Single Page Web Application

Coursework 3: Single Page Web Application

1. Summary
Version: 1.0
Individual project
Weighting: 20% of overall mark
Deadline for project proposal: 16:00 Friday 5th March 2021 (end of Week 20)
Deadline for final submission: 16:00 Friday 16th April 2021 (end of Week 24)

2. Key Points
• You select a single page web application that you want to build!
• It cannot be an e-commerce website or a client-side JavaScript game.
• It could be a website for social networking, photo sharing, file sharing, online game playing, email,
document editing, recipe sharing, etc. Come up with your own ideas!
• The website should not take money from the users.
• The front end of the website must have a single HTML page. JavaScript will change parts of the page in
response to user input.
• The front end must be written in HTML, CSS and JavaScript. You cannot write an app.
• You must use JavaScript running on Node.js on the server. No marks are available for functionality that is
implemented in PHP.
• The front end of the website must communicate with the back end using AJAX or WebSockets.
• After the single HTML page has loaded only JSON formatted data can be exchanged between client and
server.
• Most third party libraries and frameworks are fine. It is not fine to use a third party library or framework
that does most of the work for you. You should discuss a third party library or framework with your
laboratory tutor before using it in your project.
• You must use a SQL database to store data for the website. You cannot use a NoSQL database, such as
MongoDB. MySQL/MariaDB are the recommended databases. If you want to use a different SQL database
you should discuss it with your laboratory teacher.
• Cross-browser compatibility is not required – you only need to demonstrate your website on a single
browser.
• The final submission of your project will only receive a mark if your submission includes a video
demonstration.

3. What Needs to be Submitted:

3.1 Project Proposal (Deadline: 16:00 Friday 5th March 2021)
Submit a short document that contains:
• Brief description of the proposed website.
• Diagram showing the database design.
• Wireframe sketches of the website or screenshots of early prototypes.
We will use the project proposal to give you feedback about your idea and help you realize it in the time available.
You can reuse material from the project proposal in the final project submission.
Submit a Word or PDF version of the project proposal using the link in the Coursework 3 section of the course
website. Your proposal must be in Word or PDF format.
The project proposal will be marked online. It is worth 10% of the mark for Coursework 3.

1
CST 2120 – Web Applications and Databases – Coursework 3 – Single Page Web Application

3.2 Final Submission (Deadline: 16:00 Friday 16th April 2021)

Submit a zip file that contains:
1. Project report. This must be in Word or PDF format. It should contain:
• Brief description of project.
• Screenshots of the front end of the website.
• Diagram of final database design.
2. Website code. HTML, CSS, JavaScript and images for the front and back end of the website.
3. Database dump. Dump of the database and data using mysqldump or a similar tool. No marks will be
awarded for a copy of the raw database files – your dump must be readable in a text editor.
4. Video demonstration. Video demonstrations are mandatory for the final submission. I strongly recommend
that you watch the talk on recording video demonstrations on the course website.

Upload the zip file using the link in the Coursework 3 section of the course website.

The final submission of Coursework 3 will only receive a mark if you include a video demonstration.

The final submission is worth 90% of the mark for Coursework 3.

4. Technology
The functionality of this website is up to you.
It must be implemented using the following technology:
• The front end must be written in HTML, CSS and JavaScript. You cannot use JavaFX or write an app.
• The front end must consist of a single HTML page. JavaScript will be used to change the contents of this
page.
• The single HTML page can be sent from the server once when the website loads. Once the single page has
loaded no HTML can be sent between client and server.
• The server-side functionality must be implemented using JavaScript running on Node.js.
• JavaScript on the front end must communicate with the back end using AJAX or WebSockets.
• Client and server JavaScript must exchange data in JSON format.
• Data must be stored in a SQL database. You cannot use a NoSQL database, such as MongoDB. MySQL and
MariaDB are the recommended databases; other SQL databases are also allowed.
Marks will only be awarded for websites that follow these rules.

5. Formative Feedback
Formative assessments do not directly contribute to the overall module mark but they do provide an important
opportunity to receive feedback on your learning. They provide an opportunity to evaluate and reflect on your
understanding of what you have learnt. They also help your tutors identify what further support and guidance can be
given to improve your grade.

We are happy to give you feedback about Coursework 3 in the labs and can give feedback about drafts of
Coursework 3 that are sent to us more than one week prior to the deadline.

2
CST 2120 – Web Applications and Databases – Coursework 3 – Single Page Web Application

6. Late Submission
We are very unlikely to give extensions to coursework and very unlikely to accept excuses. So we strongly
recommend that you hand coursework in on time.

Contact the module leader before the deadline if you run into problems. Zero marks are likely to be awarded for
late coursework.

7. Extenuating Circumstances
If you have personal problems that interfere with your studies, you can apply for extra time to complete coursework
without a mark penalty. You have to provide appropriate documentary evidence. More information here:
https://unihub.mdx.ac.uk/your-study/assessment-and-regulations/extenuating-circumstances.

You must let the module leader know if you have been granted an extension.

8. Plagiarism
Plagiarism is a serious academic offence. Students that submit identical projects will be reported to the university. If
they are found guilty, they will have to resubmit their work, their marks could be capped or they could fail the
module.

We recognize that there is often a blurry line between copying and collaboration. People work together and help
each other to solve problems and apply the solutions to their own projects. We strongly encourage this kind of
collaboration. But it is not acceptable for students to collaborate on a project which they submit as individual work.
To penalize this, the mark for near-identical projects will be divided between the projects. So suppose a project gets
a mark of 60% and near-identical versions are handed in by 3 people. Each person will get 20%, instead of 60%. This
only applies to the marks for the parts of the project that are identical.

We are not going to police this and make detailed investigations. So if you allow your project to be copied, you will
be as liable for plagiarism as the person who submits it as their own work. Both the original and the copy will receive
zero or reduced marks.

Links to the relevant University regulations and additional support resources can be found here:
• Academic Integrity Awareness Course: https://mdx.mrooms.net/mod/lesson/view.php?id=877307. (You will
have to log into to MyUniHub and then MyLearning to access the course)
• Section F: Infringement of Assessment Regulations/Academic Misconduct: https://www.mdx.ac.uk/about-
us/policies/university-regulations.
• Referencing & Plagiarism: Suspected of plagiarism?:
http://libguides.mdx.ac.uk/c.php?g=322119&p=2155601.
• Referencing and avoiding plagiarism: http://unihub.mdx.ac.uk/your-study/learning-enhancement-
team/online-resources/referencing-and-avoiding-plagiarism.

The MDXSU Advice Service offers free and independent support face-to-face in making an appeal, complaint or
responding to any allegations of academic or non-academic misconduct. https://www.mdxsu.com/advice.

9. Assessment Methods
9.1 Project Proposal
We will read your project proposal and give you feedback online and in the labs.

3
CST 2120 – Web Applications and Databases – Coursework 3 – Single Page Web Application

9.2 Final Submission

We will look at the code, read your report and view your video demonstration. Zero marks will be awarded for a
final submission of Coursework 3 without a video demonstration. I strongly recommend that you watch the talk on
recording video demonstrations on the course website.

The project will be given a mark out of 100. This will be scaled down to a mark between 0 and 20 that corresponds to
20% of the overall mark for the module.

10. Assessment Criteria

Feature Deadline Marks

Project proposal. A short description of 16:00 5/3/21 2 marks. Description of functionality of website.
the project that includes wireframes of 2 marks. Database design.
the design or screenshots of an early
2 marks. Wireframes or screenshots of website.
prototype.
4 marks. Proposal quality. Is it clearly written?
Do the wireframes clearly show the website
design?

Front end. A single HTML page 16:00 16/4/21 10 marks. Attractiveness and usability. Is the
implemented in HTML, CSS and front end well designed and attractive? Has
JavaScript. thought been given to usability?
No marks are available for websites with
multiple pages.

Data storage. Stores data for the website 16:00 16/4/21 5 marks. Data is successfully stored and
in SQL database. retrieved to/from a SQL database.
No marks are available for storage with 5 marks. These marks are for the complexity of
a NoSQL database, such as MongoDB. the data storage and retrieval. For example, use
of multiple tables that have foreign key
relationships.

Server-side functionality with Node.js. 16:00 16/4/21 7 marks. Successful use of JavaScript running on
JavaScript running on Node.js should be Node.js to deliver functionality of website.
used for all of the website’s server-side 8 marks. JSON formatted data exchanged
functionality. between client and server using AJAX or
No marks are available for server-side WebSockets (4 marks server to client; 4 marks
scripts written in PHP or for functionality client to server).
that requires multiple HTML pages or
the sending of HTML data after the page
has loaded.

Complexity of website functionality. 16:00 16/4/21 25 marks. A website that has a substantial
Higher marks will be given for more amount of functionality implemented using
complex projects. For example, a fully- JavaScript/Node.js will get a high mark for
featured social networking site or photo- complexity. Some of the complexity can be
sharing site would receive high marks for implemented by client-side JavaScript.
complexity.
No marks are available for server-side

4
CST 2120 – Web Applications and Databases – Coursework 3 – Single Page Web Application

scripts written in PHP or for functionality

that requires multiple HTML pages or
the sending of HTML data after the page
has loaded.

JavaScript code quality. For example, 16:00 16/4/21 5 marks. JavaScript code quality.
comments, layout, organization into
folders, etc. Marks will be deducted for
unused files and for commented-out
code.

Testing. The results of the tests must be 16:00 16/4/21 5 marks. HTML and CSS validation. Full marks
documented in your project report. will be awarded for complete coverage of the
You must test your website code and website.
this code must pass the tests. Marks will 5 marks. Front-end functional testing using
be halved for failed tests. Selenium (1 mark per test).
5 marks. JavaScript unit tests (1 mark per test).

Database dump. Dump of the database 16:00 16/4/21 5 marks. Dump of database.
and data using mysqldump or a similar
tool. No marks will be awarded for a copy
of the raw database files – your dump
must be readable in a text editor.

Project report. Brief description of the 16:00 16/4/21 1.5 marks. Screenshot(s) of all of the website’s
project and screenshots of the final front page(s).
end of the website. 1.5 marks. Diagram showing database design.
Do not include screenshots of code, the This must match the final database.
command line or Dreamweaver, 2 marks. Content of report. Does it clearly
NetBeans, etc. describe the project?