CSYM019 Internet Programming Assignment Brief 2026 | University of Northampton

CSYM019 Assignment Brief

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 written by someone else may constitute 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 parts a, b, c, or d, your assignment will be awarded a fail grade of 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.

Introduction

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

Outline

The University of Northampton website. uses the same format for all of its courses. 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 which data is included in a course and how the course data is structured. It may help to represent the data as a tree diagram.

You will create two small-scale applications for course information. In your first application, you will create a live list of courses and build a JSON data file to store course data. You will then use JavaScript to extract data from your JSON file, process it, and display it in HTML. In your second application, you will create 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 that can store course data for courses from the University of Northampton website. The file should be able to store the course data, including Course Details, Entry Requirements, Fees and Funding, and any other relevant information.

Note that the fees should be displayed in one of three currencies: UK Pound, Euro or USDollar. Use the current exchange 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 fee 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 undergraduates and 5 for 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).

C) JavaScript and HTML

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

Also, include a course icon for each reported course. You can use a suitable icon from the subject-area icons on the university courses page. Alternatively, you can use your own icon – note that 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 it does. This includes variables, methods, and structural constructs (e.g., conditionals).

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

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. for Each(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 my Function(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 citaon in code explanation, CSYM019 UoN

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

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 single folder. Name the folder (Task1). Submit the folder along with task1-code-explanation.docx to the assignment point on the NILE page (see the section “Submission Procedure”). Failure to submit your files in NILE will result in your assignment being awarded 0% for Task 1.

F) Version Control

Version control using GitHub is part of the overall mark for this assignment. This is a‘core’ web development skill. You will demonstrate a working knowledge and consistent ability to use 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 this task (Task1) into the folder. Add the folder and all its files to the local Git repository. Push the files in the 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.

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

A) Description

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

A company member should be able to select any course to include in their report. The staff member responsible for generating the report does not understand HTML or PHP and should be able to select any course 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 code as the site’s design. This was completed by someone else in your company and has already been signed off by the client. Please use this as the website layout; you can modify the HTML and CSS as needed.

In addition to selecting any courses to include in the report, a key feature of the web interface is that the member of staff responsible for generating the report can add new course data and update or delete any stored data.

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

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 is incomplete. Please develop it so 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 an HTML table. Each rowin the table should show information for one of the courses. The table rows should be ordered in ascending order by the course title/name. The first column from the 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 in the first cell of the HTML table – i.e., the cell in the same row as 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’s information must be displayed using an 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 number of credits it carries. The chart should be displayed below the table containing the course data. It must be developed using the Chart.js library.

III) In the case of multiple courses being selected by the user, an additional bar chart comparing all selected courses should be displayed at the end of the report. Each course should show all its modules as bars grouped together. Each module should appear on the chart according to the number of credits it carries. 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 presents the user with the option to enter their username and password to access any of the application’s features. 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 included as a section in the Code Explanation (see section ‘C’ later in this brief). Please use the same course data as in Task 1 to test your Task 2 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 the 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 filenamed,dump.sql

B.5.) Presentation:

Presentation of the application must be to a professional standard.

Please note that marks will be lost for poor usability. Please use select boxes/checkboxes/radio buttons instead of text input where applicable, and consider how user-friendly the website is. Users should never need to type or remember numerical IDs, edit PHP files, manually adjust the URL, manually change the database, or retype information already in the database.

It is up to you how you structure your application, and you may add additional functionality you think would be useful.

There are marks for code quality. Please 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 it does. This includes variables, methods, and structural constructs (e.g., conditionals).

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

Please copy your application files,  including the file containing a copy of the data in your database (dump.sql), into a single 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 result in your assignment being awarded 0% for Task 2.

F) Version Control

Create a folder/directory named (Task2). Save/copy all the source code files(.html, .css, .js, .json, .sql) created for this task (Task 2) into the folder. Add the folder and all its files to the local Git repository you created in Task 1. Push the files in the local repository to the same private GitHub repository (csym019_assignment_2023) that you created in Task 1.

Please 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 Task 1 and Task 2):

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:20minutes) and should logically cover all of your work. 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 walkthrough of using the two applications and demonstrate the key features. The module tutor reserves the right to invite you to 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.

Please start your work early; the assignment is substantial and will require planning and effort to complete satisfactorily.

References

References to 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, please 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 a 0% mark.

Getting Support:

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

Getting Feedback:

Your tutor will mark the assignment, and then it will be second-marked by another tutor. This process can take several weeks. Once all required marking and second marking are complete, your grade and feedback will be uploaded to NILE.

Backing up Files

Always keep a backup 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 the 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 the NILE site for this module and use the link labelled ‘Submit your work’. Clicking on the link (Source Code Submission) will take you to the submission form, where you can upload your ZIP archive using the ‘Attach File’ button (Browse for LocalFile). 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, the use of Kaltura is recommended. Please ensure 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 failing grade.

Hire a Professional Essay & Assignment Writer for completing your Academic Assessments

Flexible Rates Compatible With Everyone’s Budget

Order Now

Marking Criteria

All deliverables (for both Task1 and Task 2) 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: