CSYM019: Internet Programming

Assignment Brief
Date of Issue: 31st March 2023 Last Date for 2nd June 2023, 23:59
Submission:
Module Tutor: Dr Muawya Eldaw

Submission Guidelines – Please read carefully

1. The University of Northampton’s Policy on Plagiarism & Mitigating Circumstances will be

strictly implemented.

2. This is not a group project, by submitting this assignment you are asserting that this
submission is entirely your own individual work. You may discuss the assignment with other
students but any code written should be your own. Sharing your work with another student,
or submitting code that was written by someone else may be deemed academic misconduct.

3. If you have used any code that you did not write you must:
a) Correctly reference the code in the report (use Harvard referencing style)
b) In your report, clearly document which lines of code you used, where you used them
and what they are used for.

4. You must supply all four items of assessment and upload them to the correct submission
points (see the section Submission Procedure).
a) Source code (zip file). The marker must be able to download and run your code.
Do not include your video in your zip file.
b) Source code explanation word documents (uploaded to Turnitin).
c) A link to a private Github repository.
d) Video demonstration

Please make sure you double check all submissions. It is your responsibility as a
student to ensure these guidelines have been met. Failure to follow the
submission guidelines may result in a capped grade of F. Please note that if
you fail to submit any of the parts a, b, c or d, your assignment will be awarded
a fail grade F.

5. The module tutor reserves the right to invite you for a viva-voce to discuss your
submission. Failure to give a convincing viva-voce will result in a grade of F.
 Internet Programming (CSYM019)
Assignment Brief - 2022/23

Introduction:

This assignment accounts for 100% of the module marks. It covers the bulk of the materials
covered in the course.

Outline:

The University of Northampton website. uses the same format for all of its courses. Analyse
a few of the courses (e.g. Sport Rehabilitation and Conditioning BSc (Hons), Games Design
BA (Hons), Molecular Bioscience MSc, etc). Make a note of what data is included in a
course and the way the course data is structured. It may help to represent the data as a tree
diagram.

You will create two small-scale course information applications. In your first application,
you will create a live list of courses, where you will build a JSON data file capable of holding
course data. You will then use javascript to extract data from your JSON data file, and to
process and display the data in HTML format. In your second application, you will create a
an interactive application using PHP, Javascript, HTML, CSS and MySQL, that allows a user
to build a customisable report based on course data stored on a web server.

Assignment Specifications:

Task 1 – Create a Live List of Courses With JSON and AJAX (50%)

A) JSON:

Create a JSON file (course.json) with a structure capable of holding course data for courses
from The University of Northampton website. The file should be capable of holding the
course data which include Course Details, Entry Requirements, Fees and Funding, as well
as all other relevant data.

Note that the fees should be displayed in one of three currencies: UK Pound, Euro or US
Dollar. Use the going conversion rates from Pound to Euro or from Pound to Dollar to work
out the fees in Euro and in Dollar respectively. The list of courses should include the fees
information in one of the three currencies, depending on the user’s currency preference.

When you have completed your JSON structure, add at least 10 courses of test data (i.e. 10
courses from the University of Northampton website). This should include 5 courses for the
undergraduate, and 5 courses for the postgraduates. Each course must be selected from a
different subject area, e.g. Biological Sciences, Business Management and
Entrepreneurship, Computer Science, etc.

B) JSON Schema:

Create a JSON schema (courseschema.json) against which course data from the file
(course.json) can be validated. The schema should enforce realistic data types and
restrictions for each data element.

Add course data for several courses to the file (course.json). The data you add should
validate against the schema provided in the file (courseschema.json).
 Internet Programming (CSYM019)
Assignment Brief - 2022/23

C) Javascript and HTML:

Create a script (course.js) that will extract data from the file (course.json), and insert it in a
HTML page (course.html) in table format. The data should automatically update at a realistic
pre-set interval. This should be achieved using a setTimeout method. There should be NO
DELAY in loading the data when the page is first opened. The produced HTML should be
formatted, including page layout, to professional standard using CSS.

Also, include a course icon for each reported course. You can use a suitable icon from those
used for the subject areas which can be found on the university courses page
(https://www.northampton.ac.uk/courses/). Alternatively, you can use your own icon – note
any icon used must be in png format (the icon file must have a .png extension).

D) Code Explanation:

Copy your code to a Word document. Annotate each line of the code with a full explanation
of what the code does. This includes variables, methods, structural constructs (e.g.
conditionals), etc.

Sources of all code and code snippets must be correctly cited/referenced. Use javascript
commenting style to include the citations in your code explanation. Failure to do so will result
in the element being awarded zero mark.

Example:

Iterates over items in an array, using a function to access both the current data element and
its index.

var txt = ""; // variable used for holding the final result (Eldaw M, 2019)
var numbers = [45, 4, 9, 16, 25]; // this is an array that holds the data – the numbers – to be
processed.
numbers.forEach(myFunction); // The forEach() method calls a function (a callback function) once for
each array element.

/*
The function below concatenates the current array index and the element at that index to a variable
named ‘txt'
*/
function myFunction(value, index, array) {
txt = txt + index + ": " + value + "<br>"; // concatenating the numbers in a string and saving that to
txt.
}

console.log(txt); //writes the string, contained in the variable ‘txt’, to the console.

References:
Eldaw M. (2019), How to add comments and citation in code explanation, CSYM019 UoN,

Save your Word document as task1-code-explanation.docx.

 Internet Programming (CSYM019)
Assignment Brief - 2022/23

E) Source Code:

Your finished application should contain the following files:

course.html
course.js
course.json
courseschema.json
course.css

Copy your application files into a one folder. Name the folder (Task1). Submit the folder
along with task1-code-explanation.docx to the assignment point in the NILE page (see the
section Submission Procedure). Failure to submit your files in NILE will mean that your
assignment may be awarded 0% for Task1.

F) Version Control:

Version control, using GitHub, is a part of the overall mark for this assignment. This is a
‘core’ web development skill. You will demonstrate that you have a working knowledge and
consistent ability using a version control system.

Create a new PRIVATE repository on your Github account. Name this new repository
(csym019_assignment_2023). Clone the repository to a suitable location on your computer.

Create a folder/directory named (Task1). Save/copy all the source code files
(.html, .css, .js, .json) created for the this task (Task1) into the folder. Add the folder, and all
the files in it, to the local git repository. Push the files in local repository to the private
repository on Github.

You must regularly push the files to your PRIVATE repository throughout the development of
your assignment solution. You must include meaningful commit messages every time you
commit to your local repository.

You MUST NOT push the assignment files to a public repository.

 Internet Programming (CSYM019)
Assignment Brief - 2022/23

Task 2 – Create a Course Report With PHP, Javascript, HTML, SQL and CSS (50%):

A) Description:

You are a back-end developer working for web development agency. One of your clients
wants to be able to set up a simple analytical report based on the course data from the
University of Northampton website, namely the test data you used in Task1.

A member of the company should be able to select any of the courses to include in the
report. The member of staff, who is responsible of generating the report, does not
understand HTML or PHP and should be able to select any of the courses through a web
based interface. S/he should be able to add new course data as well as remove any stored
data.

B) The Application:

You have been given some HTML/CSS as the design for the site. This was done by
someone else in your company and already signed off by the client, you must use this as the
layout for the website, though you can make changes to the HTML and CSS if you need to.
In addition to selecting any of courses to include in the report, a key feature of the web
interface is to allow the member of staff, responsible of generating the report, to add new
course data as well as updating and deleting any stored data.

It is recommended that you consider the concepts you learned in the Databases module
while designing the storage mechanism for the data.

B.1.) Data Entry:

Your application must include the following features/functions:

B.1.1) Allow the user to enter new course data using the web interface (provided). The
interface provided is incomplete - you must develop the interface so that all course data
items can be entered into the system (see the University of Northampton website for what
course data items to include in the interface).

B.1.2) All course data must be stored in a database that resides on a web server.

B.1.3) Data must be entered or removed from the storage database using PHP and SQL.

B.2.) course Report:

When the course Report is selected from the menu of the provided web interface, The
following requirements should apply:

B.2.1) All course data stored in the database should be displayed in a HTML table. Each row
in the table should show information for one of the courses. The table rows should be
ordered in ascending order on the basis of the course title/name. The first column from the
 Internet Programming (CSYM019)
Assignment Brief - 2022/23

left of the table must show a tick box for each row. The user should be able to select any of
the courses, to include in the report, using the corresponding tick box – i.e. the tick box
associated with the row showing the target course information. The user must also be able
to select all courses using the tick box on the first cell of the HTML table – i.e. the cell on the
same row of the table headings.

B.2.2) Upon the user clicking on the Generate Report button, a report page showing all
selected courses should be displayed. This page must show the following:

I) Each course information must be displayed using a HTML table.

II) A pie chart showing the individual modules studied in the course. Each module
should be allocated a proportion of the chart based on the amount of credits it
weighs. The chart should be displayed below the table containing the course data. It
must be developed using the Chartjs library.

III) In the case of multiple courses been selected by the user, an additional bar chart
comparing all selected courses should be displayed at the end of the report. Each
course should have all its module shown as bars grouped next to one another. Each
module should appear on the chart based on the amount of credits it weighs. The bar
chart must only be displayed when more than one course is chosen.

B.3.) Secure Application:

Only authorised users should be able to use the application. To enforce this, the application
must have a login page that present the user with the option to enter their username and
password to access any of the features of the application. The provided interface does not
include a login page – you must create one.

B.4.) Testing Table:

You should provide documentation about how you tested the website/application. This
documentation can be a section in the Code Explanation (see section ‘C’ later in this brief).
Please use the same course data used in Task1 to test your Task2 application. This test
data provides enough information for someone else to repeat the test exactly as you did and
get the same result. You must provide a copy of the data you used to test your application.
You can copy this data from your database using mysqldump command. The details on
how to use mysqldump can be found through the web link:

https://dev.mysql.com/doc/refman/5.7/en/mysqldump-sql-format.html

You must copy the table containing the course data from your database into a file
named, dump.sql

B.5.) Presentation:

Presentation of the application must be to professional standard.

Marks will be lost for poor usability, you should use select boxes/checkboxes/radio buttons in
place of text input where applicable and consider how user friendly the website is. Users
should never need to type in or remember numerical IDs, edit PHP files, manually adjust the
 Internet Programming (CSYM019)
Assignment Brief - 2022/23

URL, manually change the database, or re-type information that is already in the database.
It is up to you how you structure your application and you may extend it with additional
functionality that you think would be useful.
There are marks available for code quality, you should try to avoid repeated code and use
language tools to make maintenance easier.

C) Code Explanation:

Copy your code to a Word document. Annotate each line of the code with a full explanation
of what the code does. This includes variables, methods, structural constructs (e.g.
conditionals), etc.

You must include a section explaining how you tested the website/application. Name this
section ‘Application Testing’:

Save your Word document as task2-code-explanation.docx.

D) Source Code:

Copy your application files, including the file containing a copy of the data in your
database (dump.sql), into a one folder. Name the folder (Task2). Submit the folder along
with task2-code-explanation.docx to the assignment point in the NILE page (see the section
Submission Procedure). Failure to submit your files in NILE will mean that your
assignment may be awarded 0% for Task2.

F) Version Control:

Create a folder/directory named (Task2). Save/copy all the source code files
(.html, .css, .js, .json, .sql) created for the this task (Task2) into the folder. Add the folder,
and all the files in it, to the local git repository, which you created in Task1. Push the files in
local repository to the same Github private repository (csym019_assignment_2023) that you
created in Task1.
You must regularly push the files to your PRIVATE repository throughout the development.
You must include meaningful commit messages every time you commit to your local
repository.

You MUST NOT push the assignment files to a public repository.

Video Demonstration (for both Task1 and Task2):

In addition to the source code and the explanation of the code, you must submit a video
demo (URL) of your assignment. The demo should be about 15 minutes long (maximum:20
minutes) and should cover all of your work in a logical way. You should:
i) explain the implementation of each task covering the main fragments of your code.
ii) demo each application showing how it is intended to be utilised by the user.
Your voice needs to be clear for the marker to hear. It should also include a walk through of
 Internet Programming (CSYM019)
Assignment Brief - 2022/23

using the two applications and must demonstrate the key features. The module tutor
reserves the right to invite you for an online viva-voce. Poor demo/viva could negatively
influence other sections in the marking criteria.

Completing The Assignment:

This assignment must be completed and submitted electronically in the assignment point on
NILE - BEFORE the deadline for your class.

Begin your work early, as the assignment is a substantial task that requires planning and
effort to complete satisfactorily.

References

References of sources of all code and code snippets used in your code, must be included in
javascript comment style close to where you used the source in your code. For example, if
you use a login system tutorial you must explain where in your code the tutorial has been
used. You must also reference any libraries you use (e.g. Chart.js). Failure to do so will
result in the element being awarded 0% mark.

Getting Support:

Support for the assignment work will be available from your tutor until two weeks before the
assignment deadline.

Getting Feedback:

The assignment will be marked by your tutor and then second marked by another tutor. This
process can take up a number of weeks. Once all the required marking and second marking
has been completed, your grade and your feedback will be uploaded to NILE.

Backing up Files:

Always keep a back-up copy of all work submitted for assessment in case of unforeseen
submission problems.

Submission Procedure:

• E-Submission of documents through Turnitin on NILE as TWO separate WORD documents

- [Document 1 = task1-code-explanation.docx & Document 2 = task2-code-
explanation.docx]. To do this, go to the NILE site for this module and use the link labelled
‘Submit your work’.

• E-Submission of a single ZIP archive that contains two folders named: Task1 and Task2,
one for each task - each folder contains all the source code files (.json, .js, .html, .css) for
respective task – Task2 folder must include the test data from your Mysql database.
The archive must be named with your student ID, e.g. 12345678.zip where 12345678 is your
student ID. To do this, go to to the NILE site for this module and use the link labelled ‘Submit
your work’. Clicking on the link (Source Code Submission), will take you into the submission
 Internet Programming (CSYM019)
Assignment Brief - 2022/23

form, where you can upload your ZIP archive using the ‘Attach File’ button (Browse for Local
File). Finally, click the Submit button.

• Submit a link to your private Github repository. You must ensure that the link is
accessible to the marker.

• When submitting your video demonstration, use of Kaltura

(https://video.northampton.ac.uk/) is recommended. You must ensure that the video link
is accessible to the marker (do not set it to private access).

• Failure to follow the above submission guidelines may result in a capped or fail
grade.

Marking Criteria:

All deliverables (for both Task1 and Task2) MUST be submitted to achieve a passing
grade for this assignment.

The grade for this assignment will form 100% of the overall assignment grade for the
module. Marks are split according to the following scheme. In general, the following
criteria will act as a guide to what you should expect:
Internet Programming (CSYM019)
Assignment Brief - 2022/23