ECM 1417: Web Development
Continuous Assessment
Diego Marmsoler
Submission date: Friday 27th March
For your continuous assessment you will develop a multi-user task management
application. You can get up to 100 marks for the assessment. The assessment is
worth 30% of the module mark. You need to submit your source code and any sup-
porting files via the electronic submission system at http://empslocal.ex.ac.uk/submit/1.
If you are using a local development environment keep in mind that you need
to deploy your final application to one of the blue servers which have PHP
version 5.4.16 installed. Thus, either install the same version for your local
development environment or deploy your application from time to time to
check if everything works as expected.
Moreover, note that on the server there is no mysqlnd installed. Thus, you
cannot use get result() for prepared statements. Instead you need to use
bind result().
In the following, I list the requirements of the application. For every require-
ment you can find the number of marks which you can get for implementing this
requirement.
1I will provide a document with detailed instructions on how to submit your work on the ELE
page.
1
1 Basic Requirements
20 marks
The application should provide the following functionality:
• Login for existing users.
• Registering a new user.
• Display all tasks.
• Add a new task.
• Edit a task.
• Delete a task.
For the purpose of this application, a task consists of:
• a name,
• a description,
• a due date, and
• a state which is either done or not done.
In the following, we describe the basic functions in more detail. Note that the
web application is required to run on different web browsers. Thus, to avoid any
problems you should stick to well-formed HTML.
Throughout this text I will provide some mock-up forms to give you an idea
of how a form should look like. However, this is only to provide you with a
rough direction and you are welcome to adapt it to your own preferences.
1.1 Login
The application should start with a login page where an existing user can login
by means of a username and password. Figure 1Login formfigure.1 shows a sketch
of such a page. To register new users, the page should also contain a link to a
corresponding registration page.
1.2 Registration
The registration page should allow a user to register a new username and password.
Figure 2Registration formfigure.2 depicts a possible layout of such a page.
2
Figure 1: Login form.
3
Figure 2: Registration form.
4
Figure 3: Display form.
1.3 Display List of Tasks
The application should allow to display a user’s task list. For each task, the state
of the task, its name and its due date must be displayed. In addition it should be
possible to edit or delete tasks or to add new tasks. Figure 3Display formfigure.3
displays a possible layout for the display page.
1.4 Edit
It should be possible to display the details of a task (including its description) and,
if necessary, to edit them. Figure 4Edit formfigure.4 shows a possible layout for an
edit form.
5
Figure 4: Edit form.
6
2 Styling Requirements
15 marks
Now that you got your basic application working, we are going to style it.
2.1 Basic Styling
Use CSS to add some basic styling to your application.
Keep in mind that I only require you to do basic styling. Thus, be careful
not to put too much effort into the styling of your pages.
2.2 Responsive Design
Use CSS’s responsive design support to provide an alternative layout for your
application if used on smaller displays, such as a mobile phone. Figure 5Login
formfigure.5 - Fig. 8Edit formfigure.8 display possible layouts for small screens
(Compare them with the corresponding layout for larger screens provided above).
7
Figure 5: Login form. Figure 6: Registration form.
Figure 7: Display form. Figure 8: Edit form.
8
3 User Requirements
15 marks
Use secure sessions to keep a user logged in when working with your application.
Add a button to the display form to let a user log off.
In addition, create two different themes for your web application (for example
a light and dark theme)2. Moreover, add a page where a user can set her/his
preference theme. Use cookies to store a user’s preferences and display the web
application using the correct theme.
2Again, keep the themes simple. It could just be different background colors, for example.
9
4 Security Requirements
15 marks
User passwords must be encrypted using additional salt and pepper. In addition,
the application must be resistant against Cross Site Scripting attacks and SQL
injections.
10
5 Requirements for Client Side Scripting
15 marks
Use client side scripting to increase the user experience. To this end, use JavaScript
to change the state of a task on the display page. Moreover, use AJAX to notify
the server about such changes and store them to the database.
11
6 Architecture Requirements
10 marks
Use the Model View Controller pattern to structure your application:
• Strictly separate programming code which accesses the database from code
which merely displays code.
• Use a front controller to rout requests to the correct page.
• Reuse views for different pages: for example use only one view for edit-
ing/adding a task.
12
Name method endpoint input output Exceptions
getTasks GET tasks.php n/a tasklist 405
getTask GET task.php/{id} n/a task 405,400,404
check PUT check.php/{id} user n/a, 405, 400, 404, 409
uncheck PUT uncheck.php/{id} user n/a 405, 400, 404, 401
addTask POST add.php taskinfo taskid 405, 400, 404, 409
Table 1: REST API of external project management system.
7 Web Service Requirements
10 marks
For the purpose of this assessment I prepared an external web service which provides
operations to import and manipulate tasks from an external application. In the
following you can find a description of the web service’s API as well as a description
of the requirement you should address.
7.1 Web Service API
The web service provides four operations to get a list of tasks, get details of a
certain task, and mark a task as done or not done. An external task also con-
tains information about which user has finished a certain task. The web service is
accessible at the following location: http://students.emps.ex.ac.uk/dm656/
The service’s REST API is described in Tab. 1REST API of external project
management systemtable.1. It lists the name of an operation, the method which
can be used to access it, the endpoint to address it, as well as input and output
parameters.
In the following we describe the service’s data format and error handling mech-
anism.
7.1.1 Data Formats
The service uses XML to encode the different types of data. Note that due dates
are always encoded in the form: YYYY-MM-DD HH:MM:SS
Tasklist A tasklist contains multiple tasks containing an identifier, name, and due
date, each. An example encoding of a tasklist is shown below:


1
Do Web Development Coursework
2020−03−27 23 : 5 9 : 5 9

13

2
Learn f o r exam
2020−01−24 19 : 5 4 : 0 9


Taskinfo Taskinformation contains a name, due date, and description. An exam-
ple encoding of a taskinformation is shown below:

Do Web Development Coursework
2020−03−27 23 : 5 9 : 5 9
Some i n i t i a l d e s c r i p t i o n

Task A task contains an identifier, name, due date, and description. An example
encoding is given below:

1
Do Web Development Coursework
2020−03−27 23 : 5 9 : 5 9
Some i n i t i a l d e s c r i p t i o n

Taskid A task identifier contains only an identifier for a task. An example encod-
ing of a task identifier is shown below:

1

User A user contains only an identifier. An example encoding of a user is shown
below:

1

14
Figure 9: Extended display form (large). Figure 10: Small.
7.1.2 Failure Handling
The service uses the following error messages:
400 Bad Request if an identifier (user or task) was passed to an operation which
is not a number.
401 Unauthorized if a user tries to uncheck a task which she/he did not originally
check.
404 Not Found if a task with a certain identifier does not exist.
405 Method Not Allowed if an operation is accessed using the wrong HTTP method.
409 Conflict if a user tries to mark a task as done which is already marked as done.
7.2 Import Requirement
Add a feature to your application which allows you to import tasks from the project
management platform using the web service described above. To this end, first add
a new button to the display form to open the import form (Fig. 9Extended display
form (large)figure.9 and Fig. 10Smallfigure.10).
This should bring up an import form such as the one depicted in Fig. 11Import
form (large)figure.11 and Fig. 12Smallfigure.12.
After selecting the tasks to be imported, a confirmation window, such as the
one displayed in Fig. 13Import form (large)figure.13 and Fig. 14Smallfigure.14,
should pop up to ask the user for confirmation. If the user agrees, the different
15
Figure 11: Import form (large). Figure 12: Small.
tasks should be imported using the web service’s API. Note that also the initial
description should be obtained when importing the tasks into the application3. If
a remote task is marked as done or not done, this information should be stored
in the local database and reflected in the database of the remote application, i.e.,
you need to change the external tasks state using the REST API4. If the task was
already done by someone else in the meantime, then you should notify the user
about this and delete the task from the local database.
7.3 Export Requirement
Modify the edit form to add a new export button such as depicted in Fig. 15Ex-
tended edit form (large)figure.15 and Fig. 16Smallfigure.16.
After clicking the export button, a confirmation window, such as the one dis-
played in Fig. 17Edit form (large)figure.17 and Fig. 18Smallfigure.18, should pop
up to ask the user for confirmation.
After confirming the export, the task should be added to the extenal system using
the REST API. Note that the task should still be available in your local system.
3You may need to add a new column to the task table which stores the remote taskid of a (remote)
task
4Note that this requires that you store the identifier of the external task with your local task.
16
Figure 13: Import form (large). Figure 14: Small.
Figure 15: Extended edit form (large). Figure 16: Small.
17
Figure 17: Edit form (large). Figure 18: Small.
18