CMT120 - Coursework "Web Application Development"

Cardiff School of Computer Science and Informatics

Coursework Assessment Pro-forma

Module Code: CMT120

Module Title: Fundamentals of Programming

Lecturers: Dr Natasha Edwards, Dr Martin Chorley, Dr Federico Liberatore (module leader)

Assessment Title: Web Application Development

Assessment Number: 2

Date Set: 21st January 2021

Submission Date and Time: by 9:30 am on Thursday, 25th February 2021 (PGT Spring Teaching Week 1)

Return Date: by 25th March 2021

This assignment is worth 70% of the total marks available for this module. If coursework is submitted late (and where there are no extenuating circumstances):

1. If the assessment is submitted no later than 24 hours after the deadline, the mark for the assessment will be capped at the minimum pass mark.

2. If the assessment is submitted more than 24 hours after the deadline, a mark of 0 will be given for the assessment.

Your submission must include the official Coursework Submission Cover sheet, which can be found here:

https://docs.cs.cf.ac.uk/downloads/coursework/Coversheet.pdf

Submission Instructions

You will need to submit your coursework to THREE locations: 1. Learning Central; 2. GitLab; 3. OpenShift.

More specifically:

1. Submission to Learning Central

No.	Description		Type	Name
1.1	Cover sheet	Compulsory	One PDF (.pdf) file	STUDENT_NO_coversheet.pdf*
1.2	Website files in a single zip file	Compulsory	One ZIP (.zip) file	STUDENT_NO_website.zip *
1.3	Plain README text file	Compulsory	One .txt file	STUDENT_NO_README.txt *

* replace STUDENT_NO with your Student Number without the leading 'c', e.g. 1234567, and not c1234567

The following files need to be submitted via Learning Central:

‣   For 1.2 "Website files in a single zip file" above:

✴ This must be a single .zip archive that includes the complete source code of your website, with the same structure as needed for deployment on OpenShift server, including all required assets such as images, requirements/ dependencies, etc. This .zip archive, however, should not have any git, virtual environment or bytecode files or folders, e.g. .git folder or .pyc files.

‣   For 1.3 above your " Plain README text file" must include:

i. URL of your website on the OpenShift server;

ii. Your Student Number;

iii. full (40 characters) CHECKSUM of your last commit you performed on your repository on GitLab. This will be used to check the timestamp of the latest commit/ changes in your repository. Note: no changes are allowed after the submission deadline! Non compliance with this requirement, i.e. working on the coursework after the deadline, may be penalised and may result in capping the mark at the pass rate (for the work submitted < 24 hrs late) or an award of zero marks (> 24 hrs late submission).

➡ Instructions on how to access the checksum of your last commit on GitLab are found in Appendix A.

✓ A template of README.txt file is available on Learning Central.

2. Submission to GitLab (https://gitlab.cs.cf.ac.uk/)

Share your GitLab repository with Martin Chorley and Natasha Edwards as follows:

‣   Go to: Settings > Members > Select members to invite

‣   search for Martin Chorley (user name: scm2mjc)

‣   Choose a role permission: Maintainer > Add to project ...

‣   Repeat for Natasha Edwards (user name: scmne), making sure the role permission as also set as Maintainer.

3. Submission to OpenShift (https://openshift.cs.cf.ac.uk/)

Deploy your website on OpenShift following the instructions given in the lab sheet and demonstrated in one of the practical sessions, and making sure this is completed by the deadline specified on the front page.

Rules, Restrictions and Further General Comments

-  Any deviations from the submission instructions above (including the number and types of files submitted) will result in the loss of marks, as specified above and 'Assessment Criteria and Marks Allocation' section of this document.

-  Staff reserve the right to invite students to a meeting to discuss coursework submission.

-  If you have extenuating circumstances that prevent you from submitting on time, you should follow the School’s Extenuating Circumstances procedure (see the Student Handbook for more detail - available on Leaning Central).

-  You are reminded of the need to comply with Cardiff University’s Student Guide to Academic Integrity. If you use any external resources, these need to be properly referenced (e.g. as in-line comments in your code). You should also read the School’s electronic coursework submission policy, available on Leaning Central.

Learning Outcomes Assessed

3.  Design and use relational databases

4.  Develop secure web applications

5.  Critically evaluate the role of security, quality and usability within software projects

Criteria for Assessment

Credit will be awarded against the criteria specified in 'Assessment Criteria and Marks Allocation' section of this document.

Feedback and suggestion for future learning

Feedback on your coursework will address the above criteria. Feedback and marks will be returned via Learning Central and/or email by the date specified on the first page.

This coursework develops a number of subject specific as well as core, transferable skills (e.g. time management). Feedback for this assessment can be used to improve your skills in professional web development, and might be useful for other modules, e.g. for your Dissertation if you decide to do a web-based project.

Assignment

INSTRUCTIONS

You are working as a freelance web developer, and need to develop and deploy a personal web blog, which showcases your competences and expertise (e.g. technical skills, previous work experience, etc. - the choice of what you want to cover it’s up to you, but make sure you cover a reasonable range of these). At least one of the posts should be a reflective post on security, quality and usability within software projects.

Your web blog should allow your visitors to browse through the posts (articles) you have published, get information about your competences and expertise, leave comments on your posts, and contact you using email and social media.

It is expected that you will develop this website by building on the Flask lab exercises completed as part of the module - using the code you worked on in the labs as a starting point for the blog is allowed (and encouraged!).

Structure and Functionality of the Website

Your website should have a number of pages to display content to visitors. Each web page should have:

-  header with navigation bar to enable the visitors to access all pages;

-  section that displays the main content, e.g. the most important or latest blog posts;

-  footer containing relevant links to additional information, e.g. contact details, privacy policy, disclaimer, etc.;

-  you can also include a side bar to display any information you think is relevant and makes your website more attractive and usable.

More particularly, your website’s organisation and functionality should be as follows:

1. Home page should allow visitors to:

• view most important or recent blog posts (up to you to decide which posts you want to display) in the main content section of the page;

• click on a post (either the post’s title or image) so that the visitor view detailed information about the selected post;

• access login or registration pages (see explanation of content and functionality of these pages later);

• see personalised greeting in the top navigation bar if they are logged in, e.g. a logged in customer will be greeted by their first name (e.g. ’Hello, Jane!’). The visitor, who is not registered or logged it will see ’Hello, Guest!’ message.

2. The individual blog post page should be used to display detailed information about a particular post, and allow the visitors to post comments. At least one of these posts should be a reflective post on security, quality and usability within software projects.

3. ’All posts’ page should display all posts that you have ever created, and it should:

• Allow the visitors to access any post they wish to view.

• Be able to sort the posts by ascending or descending date.

4. Registration page which should:

• Ask the visitors, who wish to register, to provide their first and last name, email address (which will they use to log in) and password.

• Perform a simple check that the visitor input their email address in the expected format, e.g. my_email@some_domain.com.

Note: this should be a simple check for the email address format - there is no need to check if this email address actually exists.

–  On successful registration the website should display a message to inform the user and redirect to home page.

–  If registration is unsuccessful, the user should be informed, and will not be redirected to any other page.

• Inform the visitor if the registration is successful; or display a meaningful error message if there is a problem with the registration.

5. Log in page which should:

• Enable a registered visitor to log in, and if successful, the visitor is redirected to the home page.

• Display an error message if there is a problem with a visitor’s login. NB: make sure that error messages do not jeopardise your website’s security.

• Allow a logged-in user to log out.

You might also want to develop more advanced functionality to earn additional marks:

• Search engine to allow the visitors to locate information on your website, e.g. to perform a search based on the posts’ titles or content;

• Ability for the user to rate each post, e.g. using ’like’ or ’star’ options. The ratings for each post should then be updated and displayed.

• Ability for the users to tag certain posts, after which a list of the tagged items is stored in the user’s account, and the user is able to access the list as well as delete certain tagged items from that list.

Website Quality

Overall, the website should be aesthetically pleasing, e.g. display an attractive banner with the website’s title, lay out the content in a nice tabular form, offer intuitive navigation, have consistent ‘look and feel’.

Technologies to be Used

In order to demonstrate your ability to use Flask micro web framework and other various web technologies introduced in the module, your web blog should use the following:

• Navigational menus with links to the different parts of the website (e.g. "go to home page", "view all posts", "register", "log in", etc.)

• Lists and table to display content appropriately.

• CSS style sheets, including an external CSS file to define the appearance of your web blog.

• Links to external web resources (i.e. via the anchor element), for example to your social media account(s).

• A MySQL database that maintains the content of the blog.

You should use JavaScript if/ when/ where appropriate, for example to provide feedback to the visitor when they successfully (or unsuccessfully) register or log in.

Important Conditions

• The software tools and technologies that are to be employed on the website are HTML, CSS, MySQL, JavaScript and Python/ Flask.

• Use of libraries, APIs, etc. is allowed, however, the final code must be authored by you. If you use external libraries, APIs, etc. you must provide an explanation of how and where these were used AND complete references in your code and in a separate file (e.g. README.md).

• Use of the code you developed when working on the lab exercises for this module is allowed.

• You must use School-based systems and servers. The use of external services is not allowed.

• There is no need to produce a user guide as it is assumed that the website interface will be self-explanatory.

Good luck!

                                                                                     

Appendix A: Checksum of your last commit (on GitLab)

To access the checksum of your last commit, go to the Project’s main page, and click on the button next to the 8-character text - see Fig. 1. This will copy the full checksum (i.e. 40 characters). Paste the copied text into your README file.

Figure 1: Accessing checksum of your last commit on GitLab

WEB BLOG COURSEWORK

ASSESSMENT CRITERIA AND MARKS ALLOCATION

Max Marks

Coursework Coversheet 1 (binary)

README.txt file      2

not submitted or major issues = 0,

minor issues(e.g. some information is missing)=1

Website files in a single zip file      1 (binary)

TOTAL FOR CORRECT SUBMISSION      4

Website Build and Deployment

The website has been successfully deployed on OpenShift     15 (binary)

binary mark: no=0, yes=15

TOTAL FOR WEBSITE DEPLOYMENT      15

Database implementation

All content is generated programatically,

i.e. pulled from the database, not ‘hardcoded’ manually      7 (binary)

Mark is binary here: no=0, yes=7

TOTAL FOR DATABASE IMPLEMENTATION      7

Functionality

1. Home page:

A selection of most important or recent blog posts is displayed,

... and each post’s title, description, and image(s) are shown      3

Website visitors can access an individual post

... by clicking on the post’s title or image      3

Visitors can perform a search based on the posts’ titles and/or content      3

Visitors can access login or registration pages      2 (binary)

Visitors can see personalised greeting (if logged in),

... or ’Hello, Guest’ (if not logged in or not registered)      2 (binary)

2. Individual post:

The page displays all details correctly (the post’s title, content, image(s)      3

Visitors are able to leave comments      2 (binary)

... and these are displayed correctly      2 (binary)

Visitors are able to rate a post      2 (binary)

... and the rating for the post is updated      2 (binary)

Visitors are able to tag a post      2 (binary)

... and the tag is stored in a list of tagged items in user account      2 (binary)

Visitors are able to delete a tagged post from the list      2 (binary)

3. All posts:

All posts are displayed (paging is acceptable)      2 (binary)

Visitors can sort out the posts by date:      2

no=0, minor issues=1 no issues=2

4. Registration:

Registration form is shown when the user arrives at the registration page      3

Help messages appear as the user steps through the input fields      2 (binary)

On valid user input:

... a user account is created      2 (binary)

... a confirmation message is displayed      2 (binary)

... the user is redirected to the home page      2 (binary)

Error messages are shown when the user incorrectly fills in the form      2 (binary)

5. Log in:

The user is able to log in      1 (binary)

The user is able to log out      1 (binary)

Error messages are shown when the user cannot log in (e.g. invalid input      2 (binary)

TOTAL FOR FUNCTIONALITY      51

Usability, presentation and content

Ease of navigation (how easy it is to access every page from every other page)      10

Consistency of the design and professionalism in visual presentation      10

Range of competences and expertise covered in the blog      3

TOTAL FOR USABILITY, PRESENTATION AND CONTENT      23

TOTAL MARKS for the COURSWORK (max)      100

MARKING GUIDE

Functionality

Excellent (3 marks)

• Functionality described in the instructions fully works. There are no detectable bugs. The system is robust under all circumstances.

Good (2 marks)

• Functionality described in the instructions mostly works. Some inconsequential bugs that do not substantially affect the operation of the website. The system remains stable during normal usage, but fails for exceptional cases (e.g. invalid input).

Poor (1 mark)

• Only partially functioning features. There are obvious bugs that substantially affect the operation of the website. The system behaves unpredictably during normal usage. Serious flaws in several functions. Persistent bugs affecting the functionality of the website.

None (0 marks)

• Not implemented or does not work at all.

Binary Marks

• A binary mark is given for functionality that has been successfully implemented. 0 marks are given if this functionality is not implemented or doesn’t work as intended. The number of marks for each is given along side this functionality.

Usability and presentation

Excellent (8-10 marks)

• Navigation is intuitive, consistent and self-explanatory, with clear navigational menus on all pages providing access to all other parts of the site without breaking the logic of operation. Navigation is personalised to a particular user (e.g. the website greats the user by her/ his name).

• All shopping and basket pages are informative, with professionally presented, logically and consistently laid out content; effective use of HTML and other ’display’ elements, with CSS control of styling.

Good (4-7 marks)

• Navigation is mostly intuitive, with a few limitations in ease of navigation or with use of menus and links, e.g. the user may need to re-enter some information once they left a page and came back.

• Reasonable presentation of content, although not yet of professional quality. Generally well laid out using CSS where appropriate but some limitations in overall coherence of design and use of space on page.

Poor (1-3 marks)

• Means of navigation are confusing. Using the shop is a chore.

• Inconsistent design across website with poor presentation: failure to employ CSS appro-priately to control presentation. Text is often difficult to read (e.g. poor colour contrast, obtrusive background patterns, text too small or unnecessarily too big).

None (0 marks)

• None, absent, not implemented, not applicable.

Content

Excellent (3 marks)

• An excellent range of competences and expertise are presented, including a reflective post on security, quality and usability. The content is of high quality.

Good (2 marks)

• The presented competences and expertise cover a good range, including a reflective post on security, quality and usability. The content needs some improvement.

Poor (1 mark)

• The presented competences and expertise cover is very limited; a reflective post on security, quality and usability is either missing or of poor quality. The content needs major improvement.

None(0 marks)

• None, absent, not implemented.