Session: 2023-2024 Semester: 2

Module number: 4525CSQR

Module title: Introduction to Web Development

Type of Report-
coursework AS1
Activity

Module Leader: Dr. Hafeez Ur Rehman

Coursework Title: Assessment 1 of 2: Design of a Web Application

Module Name: Introduction to Web Development

Module Code: 4525CSQR
Level: 4
Credit Rating: 20

Weighting: 50%
Maximum mark available: 100

Lecturer: Dr. Hafeez Ur Rehman

Contact: If you have any issues with this coursework you may contact your lecturer.
Contact details are:
Email: [email protected]
Room: Second floor

Hand-out Date: February 22nd 2024 at 12:00PM

Hand-in Date: March 19th 2024 at 12:00PM
Hand-in Method: Online Submission via Canvas Assignment Handler.

Feedback Method: Summative Feedback via electronic document to student’s e-mail.

Programmes:

BSc (Hons) – Level 4 – Core Module

Introduction
You are required to research core technologies used in Web development and document the
design of a web application which will be using a PHP back-end with a modern HTML5/CSS3 and
JavaScriptfront-end, targeting the current version of the Google Chrome web browser.

This work is to be completed individually.

Document title 4222COMP

Revision 1.0
Date 14/12/2022
Author AZ
Learning Outcomes to be assessed
1. Evaluate client-side technologies for use in developing a website.
2. Explain server-side processing in relation to the development of a website.
5. Compare common internet communication protocols used by websites.

❖ Detail of the task

In this assignment, you are required to write a technical design report which documents the
design of a dynamic web application.

The technological and functional requirements relate to the development of a Smartphone/Tablet

Recommendation Site. The design for the application needs to support content for ONE
PARTICULAR SMARTPHONE/TABLET OPERATING SYSTEM (you may choose between
ANDROID or iOS) that provides useful information about the operating system itself and a set of
recommended smartphone/tablets (referred to as ‘device’ from now on). You should also present
additional content that is relevant to each device, such as providing a personal recommendation
score.

Your application is expected to provide content on at least THREE individual devices available on
any operating system.

The specification for the application you are designing is detailed in the Application Requirements
section later in this specification.

You are not allowed to use generative AI to do any part of this coursework.

❖ Detail of the Submission

There is ONE PART to this assignment:

PART 1: TECHNICAL DESIGN REPORT.

This task involves the documentation of the design of the web application that will fulfil the
functional requirements specified in the Detail of the Task section above. The document itself
should be writtenin Microsoft Word and supported by diagrams and screenshots.

You should use Computer-Aided Software Engineering (CASE) tools such as Microsoft Visio to
construct industry-standard diagrams that describe:

• The interactions between the client and server.

• The data requirements of the application.
• The structure of the web application as an interacting set of server-side web pages.
• The layout of the pages which the application comprises.

It is suggested that you use a combination of Unified Modelling Language (UML) Diagrams and
Document 4222COMP
WebDesign Diagram Types such as Wireframes and Site Maps to title
Revision
support your answer.
1.0
Date 14/12/2022
You are also expected to do background research into the Author AZ underpins
Internet Protocol Suite that
the technologies used to develop the application (as described in Assignment 1 and in the
Application Requirements section below) and to research PHP techniques that are used in web
development.

Section 1: Background Research

This section of the report will require you to research into two technical areas related to
networking and web development respectively. For both sections, you should provide a
technical analysis, covering the topics defined below. You should justify your analysis with
reference to textbooks, online articles from respected sources, using either Harvard or IEEE
referencing – you may use any of the resources that have been made available to you on
Canvas to help you.

Unless explicitly quoting a source, the analysis should be in YOUR OWN words – failure to
adequately reference or using descriptions verbatim could potentially lead to academic
misconduct due to plagiarism. You MAY use diagrams from these resources (with an
appropriate reference) to support your answer.

• 1.1: Networking Technical Report: HTTP Protocol: In this section, you should construct
a technical report describing the fundamental principles behind the HTTP Protocol. In
particular, you should cover the following topics for a complete answer:
o Definition of the Protocol Acronym and associated network layer.
o Illustration of Machine-to-Machine interactions using this protocol.
o How HTTP fits into the internet hourglass.
o How HTTP is used for Web communication.
o Describes HTTP as a Stateless protocol the impact this has.
o Technical Details of the two main Request methods of this protocol
o The purpose of status codes in the protocol
o Any other technical details that you feel are important to providing a detailed overview of
theprotocol

• 1.2: Web Technology Technical Report: Session Management in PHP: In this

section, you should write a technical report describing the fundamental principles of
Managing user sessions in PHP. In particular, you should cover the following topics for a
complete answer:
o Why we need to use Sessions – what limitation of HTML/HTTP are we overcoming?
o How is session data stored and how do we associate a particular user with a session.
o Description of how a session is started and maintained in a PHP web application.
o Description of how we can store data in a session and what are the common datatypes stored.
o Description of how we can read data and provide an example of where we might use this data.

You should use PHP code snippets, to help support your answer.

This section of the report is expected to be around 1000-2000 words in length,

however, this is neither a strict upper nor lower bound.

You should carefully study the Application Requirements / Specification before

attempting the following sections of the report.

Section 2: Server-side Design.

Document title 4222COMP
• 2.1: Data Requirements Class Diagram: In this Revision
section, a partial conceptual
1.0 Class
Date 14/12/2022
Diagram of the application data is given. However, fields (attributes) andAZoperations
Author
(methods for each class are missing. You are asked to populate these classes with the
 necessary fields (attributes) AND their datatypes which will host the described in the
application requirements
/ specification data. You are not required to provide the methods for these classes.

Following is a short description of each class

o Device: the smartphones or tablets that are presented in the device
recommendationweb application
o User: the profile of registered to the web application users
o UserReview: the reviews submitted for devices by the registered users
o ExternalReview: reviews for external resources associated to devices
o Retailer: retailer related information about the devices

• 2.2: Examples of the Class Data

For the 5 classes provided in section 2.1, you should illustrate examples of data held in
each field you derived, by a typical instance of EACH class. You should provide at least
TWO examples in each case. A common way of doing this to use a table, where the fields
of the classes make up the columns, and the instances represent the rows.

• 2.3: Site Map: In this section, you should describe how the functionality of the application is
splitacross a set of PHP pages and the purpose of each page. You should also illustrate the
link structure of your site (how the pages are connected to each other, with examples of
the datathat is transmitted in the HTTP GET/POST Requests from one page to another
(if any)). The Conceptual Web Site template in Visio, with some annotation on connectors,
is suitable for this purpose.

Section 3: Client-side Design

• 3.1: Client-Side Logic Activity Diagram: Use an Activity diagram to show the workflow for
a user to perform the following task in your application:
o The user is setting their favourite device in their profile view. They are currently on
thehome page.

In sections 3.2 – 3.4, you are to use Wireframe design (using the tools specified in the Required
Document title 4222COMP
Resources section below) to present your design for the client-side
Revision of your web application.
1.0
Date 14/12/2022
• 3.2: Application Master Page: In this section, you should
Author present the layout ofAZ
the
commoninterface elements that are shared between the pages that comprise your
 application.
You should demonstrate the desktop version (assuming a 16:9 widescreen display is used).
• 3.3: Navigation Systems: In this section, you should present the navigation systems that
willbe used within your application. The navigation system should also show which pages
the UI controls point to.
• 3.4: Example Application Page Designs: In this section, you should present the layout
andstructure of the:
o The device details view (for one particular device)
o The ranking view.

Again, you are expected to use annotated wireframes for this design element.

Note: Sections 2 and 3 are expected to consist of between 15-20 pages,

but this is neither a strict upper or lower limit.
~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.~.

Supporting Information: Application Requirements / Specification

The web application you are writing the design specification for should provide the
following functionality to the user: You MUST produce: ONE technical design document
(stated above) that describes how this specification can be implemented as a dynamic web
application.

Application Pages

The application should provide at least the following application views (a view can be considered as
eithera page, or an aspect of a page):

• The home page view should provide a summary view of at least THREE of the devices available on
the site AND links to the description page (see below: operating system overview page) of your
chosen operating system AND links to the individual page for each individual device (see below:
individual deviceview).
• An individual device view for each of the recommended devices which presents information on
the device (e.g. name, manufacturer, release date, operating system etc). This view also displays
ALL the user contributed reviews associated with the device.
• A ranking view which presents a table of all devices, with key information, including your review
score and average user score.
• A operating system overview page, which presents important information about your chosen
operatingsystem. In this page, along with the presentation of the operating system, you should have
details of the difference between two versions of the operating system (e.g., differences between
Android 12 and Android 13)
• Each of the views/pages should be hyperlinked together with some form of master page/common
layout containing content that is present across all pages of the application, such as a global
navigation scheme – the layout of this navigation is up to you.

Functional Requirements:

Your web application should provide the following functionality to the user:
• Documenton
Provide a description, recommendation and supporting information title 4222COMP for
at least THREE DEVICES
Revision 1.0
anyoperating system. They can be any device that was been Date released before the hand-in
14/12/2022
deadline. Author AZ
• Each device should have the FOLLOWING CONTENT with it:
o An editorial recommendation (your own review) - this does not need to be more than a couple of
paragraphs.
o A recommendation score (out of 10) – the score you award is up to you – scores DO NOT need
to beunique across the devices.
o A key facts section which provides details about the device (e.g., manufacturer, when is it
released, operating system, memory size, CPU cores, Camera specifications, battery size,
weight, dimensions,etc.).
o Links to THREE OFFICIAL device reviews from an external review source (e.g. a magazine
review/newspaper review/smartphone review site such as GSMArena, AndroidCentral, etc).
o The site should also support USER REVIEWS; these are reviews posted by users of the site. If
there are no user reviews for a given device, this should be made clear to the user. The site
should not support anonymous reviews. This data should be gathered from logged in user (see
profile system) stored in a JSON file.
o The user reviews should provide a rating for the device out of 10.

• Each device should also have a consumer information section which:

o Displays Three Online Retailers that sell the device, including a price, retailer information and
directlink to the device on sale. You do not need to use the same retailer for all devices.
o The additional consumer information view should be part of the individual device view.

• The application should have a user profile system:

o As a minimum, the user should have to specify their username and password to log in.
o Users do not have to log in to view the content of the site, only to post reviews on devices.
o How the users post a review is up to you (could be a separate page or incorporated into one of
theother required pages).
o When logged in, the user’s name should be displayed. This should be present the whole time they
arelogged in, regardless of what part of the site they are on.
o ADDITIONAL MARKS will be awarded for:
▪ Storing information on the user (e-mail address, etc)
▪ Profile Specific information (e.g. allowing them to pick a favourite device from the list of
devicesor showing reviews they have made).

• The application should have a ranking system, which displays all devices as a table:
o You will also be awarded marks based on how informative and concise the table is (e.g.
yourchoice of columns) – as a minimum, it should include your Recommendation Score.
o Higher marks for being able to sort this table of information based on these categories and
theirrating.
o It is up to you how you determine the overall rating of a device based on the reviews.

• The application should have an operating system overview, presenting useful information about
yourchosen operating system.
o This could be technical information about the operating system, the history of the operating
system,current news related to the operating system, etc.
o You can use content from other sites and multi-media sources to help present this information.
o You should have details of the difference between two versions of the operating system.
o This page should be creatively presented and make use of different types of media (Text,
Images,Videos, Web APIs etc).

Document title 4222COMP

Revision 1.0
Date 14/12/2022
Author AZ
Required Resources

You have access to all the computer labs and software found within the Department; if physical
access is unavailable, the VPN offers the same suite of software. In addition, you may use any
supplementary equipment that you may own yourself. You will be expected to use the following
software packages to create your report:

• Microsoft Word
• Microsoft Visio
• A Wireframing Design Tool; such as
o the freely-available Pencil (http://pencil.evolus.vn/) or
o Free Trial of Balsamiq Desktop (https://balsamiq.com/)
• Google Chrome Developer Tools.
LJMU Students have free access to Microsoft Office 365 and Department of Computer
Sciencestudents have free access to Microsoft Visio
( https://canvas.ljmu.ac.uk/courses/43115/pages/home-use-software )

What you should hand in

This assignment has ONE deliverable that forms your complete submission.

DELIVERABLE 1: TECHNICAL DESIGN REPORT

Your design report should be submitted via the Turnitin Assignment Handler found under the
assignments section of the module’s Canvas site. The document should be uploaded in Word
(.docx) format. Diagrams and screenshots should be inserted into the report document in
PNG/JPEG/GIF format.

Marking Scheme/Assessment Criteria

Your submission will be summatively assessed using the following marking scheme:
% weighting for each
Assessment Criteria
problem part
Technical Design Report 100
Section 1: Background Research 20
1.1 Networking Technical Report: HTTP Protocol (10)
1.2 Web Technology Technical Report: Session Management in PHP (10)
Section 2: Server-Side Design 30
2.1 Data Requirements Class Diagram (10)
2.2 Examples of the Class Data (10)
2.3 Site Map (10)
Section 3: Client-Side Design 40
3.1 Client-Side Logic Activity Diagram (10)
3.2 Application Master Page (10)
3.3 Navigation Systems (10)
3.4 Example Application Page Designs (10)
Document Presentation (10)
TOTAL 100

Document title 4222COMP

Revision 1.0
Date 14/12/2022
Author AZ
Your overall mark is the sum of the weighted marks for each section.

Recommended reading
The following resources are recommended to assist you in the completion of the report
Many of the below are available as e-book resources which can be accessed for free – see the
module reading list for more details:
• Computer Networking: A Top-Down Approach (5th Edition); Kurose, James; Ross, Keith,
Pearson, 2009.
• Tatroe, Kevin, Lerdorf, Rasmus, & MacIntyre, Peter. (2013). Programming PHP (3rd ed.).
Sebastopol, CA: O’Reilly Media.
• Using UML: Software Engineering with objects and components; Stevens, Perdita; Pooley,
Rob, Addison-Wesley, 2006.
• https://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399

The weekly laboratory sessions covered design tasks that will help you understand the
software engineering practices you will have to perform in order to produce your design.

Extenuating Circumstances

If something serious happens that means that you will not be able to complete this assignment,
you need to contact the module leader as soon as possible. There are a number of things that
can be done to help, such as extensions, waivers and alternative assessments, but we can only
arrange this if you tell us. To ensure that the system is not abused, you will need to provide
some evidence of the problem.

More guidance is available at https://www.ljmu.ac.uk/about-us/public-information/student-

regulations/guidance-policy-and-process

Academic Misconduct

The University defines Academic Misconduct as ‘any case of deliberate, premeditated cheating,
collusion, plagiarism or falsification of information, in an attempt to deceive and gain an unfair
advantage in assessment’. This includes attempting to gain marks as part of a team without
making a contribution. The Faculty takes Academic Misconduct very seriously and any
suspected cases will be investigated through the University’s standard policy
(https://www.ljmu.ac.uk/about-us/public-information/student-regulations ). If you are found
guilty, you may be expelled from the University with no award.

It is your responsibility to ensure that you understand what constitutes Academic

Misconduct and to ensure that you do not break the rules. If you are unclear about what
is required, please ask.

For more information you are directed to following the University web pages:
• Information regarding academic misconduct: ( https://www.ljmu.ac.uk/about-us/public-
information/student-regulations/academic-misconduct ).

Document title 4222COMP

Revision 1.0
Date 14/12/2022
Author AZ
• Information on study skills: https://www.ljmu.ac.uk/microsites/library/skills-ljmu/academic-
study-skills
• Information regarding referencing: https://www.ljmu.ac.uk/microsites/library/skills-
ljmu/referencing-and-endnote

Document title 4222COMP

Revision 1.0
Date 14/12/2022
Author AZ