Web Development Module: Mobile Web App Project for Building Supplies

This web development project involves designing and implementing a mobile web application for a building supply company. The application allows customers to purchase goods online, while also providing functionalities for company employees. Key features include different user account types (customer, system admin, staff member, delivery department), product catalogs, order management, and shipping management. The project requires the use of jQuery Mobile for a good user experience on smartphones. It also includes user authentication with password hashing and CAPTCHA, client-side input validation, and session management. Additional features for a higher grade include jQuery autocomplete for product search and PDF generation for order packing slips. Deliverables include mobile app code, wireframes, and database scripts. The project emphasizes planning, database structure, and code quality. The assignment is graded based on various criteria, including the implementation of different user accounts, validation, session management, jQuery Mobile, and the functionalities of each user role. For a higher grade, students must implement additional features like autocomplete and PDF generation. The final submission must include all required files zipped into a single file.

Web Development
Module Title: Web Development
Assignment Type: Main Assignment
Project Title: Design and Implement a Mobile Web Application
Project Date: 20th October 2016
Assignment Compiler:
Weighting: Marked out of 100, worth 30%
Due Date: 4 December 2016
Method of Submission: Moodle uploader on course page
Feedback Method: Provided once graded through Moodle Feedback
Assignment Introduction
A company that sells building supplies has contacted you and asked you to develop a mobile web
application to allow customers to purchase goods online. Currently the company is working in a paper
based format and often has issues keeping track of inventory and distribution.
Design and implement a web based application for the company to allow customers to login and purchase
items that are for sale. In addition to this employees of the company should be able to view products
available, add products and manage shipping for each customer.
The company has specified that they wish this to be done using a web based app solution (jQuery
Mobile), allowing users of smartphones and iPhones to have a good experience when viewing products
and placing orders.
User Accounts
As the system will be used by a number of different people, different user account types must be created.
Depending on the account type, different options in the system will be available to them. This can be done
by redirecting the user to the correct page once logged in.
● Customer - A customer should be able to log into the system and select a number of items to
purchase. Once they have added the items to their cart, they should then be brought to an “Order
Complete” page, logging details of their order in a database and providing a unique ID number for
their order.
● System Admin - The system admin should be able to view all of the user accounts in the system
and view a list of usernames and passwords associated to each user.
● Staff Member - A staff member should be able to add new products into the database, view a list
of all products currently in the system and modify any of the information for each of the products.
● Delivery Department - The delivery department should be able to view all of the orders that are
placed in the system, and print out order packing slips which provides information about the
user’s address and the products that are being shipped to them.

System Requirements
● When users open the application on their smartphone, they should be greeted with two main
options, register on the system for a new account or to login to the system with an existing
account.
● All of the pages which the user is viewing should always be validated to ensure that a user is not
on a page without having a validated account.
● After a customer has logged into the system, they should be presented with four main options.
1. View the current products available in the system
2. View orders which the user has currently made in the system, providing details of the
order and the current status of the order shipping.
3. Edit account information. All of the basic information about the user should be logged
including their name, email address, telephone number and current address that all of the
products will be shipped to.
4. Logout of the system, invalidating the current session.
● Storing passwords in plain text is a security issue that should be avoided. When users register for
a new account, the password that they enter should be hashed and salted.
● All input fields should be validated using client side validation, checking for length and blank
values.
● After any user has logged in, a session should be started storing their username and a token to
ensure that the current session is valid
● After a user has finished with the system, an option should exist to logout and destroy the current
session.
● As the company is sensitive to automated attacks, a CAPTCHA should be added onto the login
page to ensure that automated bots cannot login.
● Wireframes for the system must be developed, to ensure that the client will sign off on the overall
structure of the program before the development process is started.
● The database structure should be designed and implemented ensuring that each record can be
easily identified if a single order needs to be referenced or deleted.
Customer Account Options

If the user chooses to view the products in the system, two main options should be provided to them, the
first is a list of products that is dynamically generated from the system, outputting the id, name and price
of the product. If the user chooses to click on one of the product names, then a “View Product” page
should then open which provides information in detail about that product, including the detailed
description for the product.
A user can add products that they wish to purchase by adding them into their Cart, which is stored in their
own session. This session data is then stored to a database when the order is complete.
Delivery Account Options
The company has two members of staff which are employed to deal with the packaging and delivery in
the business. The delivery staff should have the ability to view the current orders in the system which
have not yet been shipped.
The delivery staff should have the ability to select an order in the system and then change the status of
the order to “Shipped” in the system. During this process the user needs the ability to select the order in
the system and generate a Packaging Slip which contains information about what products are in the
order and the full delivery address that will be added to the order. This should be opened on a separate
page allowing it to be printed by the delivery staff.
Admin Account
The admin account is designed for the system administrator of the application. This account should
provide the administrator the ability to edit any of the users in the system, change the type of account they
currently have and also reset their password back to 123455678 if they have been locked out of the
system.
Additional Points For Higher Grade
In addition to the basic implementation in the system, for a higher grade, additional modifications must be
made to the base implementation of the system.
● The user should also have an option that will provide a list of products in a single text box which
is populated using data in the database dynamically. This should be created using the jQuery
autocomplete solution.
● Instead of generating a simple HTML page that can be printed, the system should implement a
PDF generation tools using PHP which allows the regular order to be converted into a PDF and
downloaded by the delivery staff.
Note

Planning is the key to this assignment, do not jump into the development process straight away. Ensure
you think about the different pages that are needed and what the database structure will look like. After
this has been completed, then you should start development.
Deliverables
● Mobile app code
● Wireframes for the application
● Database CREATE and INSERT code
All files must be zipped up as single file and uploaded to Moodle before the deadline. No late submissions
will be accepted. All code that is created MUST BE YOUR OWN CODE this is an individual assignment,
not a group assignment.
Sample Products
Below is a list of products which the user can choose to purchase from the company. It is important that
all of this information is correctly stored in the database.
ID Name Description Price
644 Hammer One BlackSpur
Hammer
2.90
2311 Sand One 25KG bag of sand 5.10
244 Cement 25KG bag of cement 5.20
233 Copper Pipe 25FT of copper pipe ½
inch
45.00
8665 Bathroom sink One complete
bathroom ink
250.00

Marking Scheme
This assignment is broken into three grade categories, pass, merit and distinction. Elements of the
assignment which are more difficult will merit a distinction grade.
Description Grade
4 different user account types working and each has their own dashboard
once logged in. Each dashboard view must be unique to the user account
type
1
Validation of all input fields, providing correct error messages if input is not
valid
1
Session started when a user login to the system and destroyed when the
user logs out of the system
2
Correct implementation of jQuery Mobile 2
Customer can place orders by adding items to their cart from a
dynamically generated list of products from the database
4
Staff can insert new products into the product database 2
Staff can edit existing products in the database 2
Delivery staff can view the current orders which need to be shipped and
can change the status of an order to “Shipped”
2
Delivery staff can view the packing slip for the current order 2
Password hashing for all passwords that are stored in the database.
During login, the passwords entered by the user are also validated against
the hash.
2
CAPTCHA added successfully to login page 2
jQuery autocomplete that is dynamically populated when searching for a
product
2
PDF based generation of order packing slips 6