FC6P01 PROJECT

FINAL REPORT

ECOMMERCE WEBSITE

NAME: AHMED ALI

ID NUMBER: 15037511

DATE: SUNDAY, 15 AUGUST 2021

FIRST SUPERVISOR: DR. QUAN DANG

SECOND SUPERVISOR: ADD YOUR SECOND MARKER’S NAME HERE

TABLE OF CONTENTS

1
Abstract.............................................................................................................................3
Introduction: project background, motivation, aim & objectives........................................4
Scope............................................................................................................................................4
Intended audience........................................................................................................................4
Project plan and implementation.......................................................................................5
Background Reseach..........................................................................................................5
System analysis..................................................................................................................6
Requirement Analysis...................................................................................................................6
Front-End Requirement...................................................................................................................................6
Backend Requirements.................................................................................................................8
Software System design.....................................................................................................9
Software development life cycle...................................................................................................9
Planning...........................................................................................................................................................9
Implementation...............................................................................................................................................9
Testing.............................................................................................................................................................9
Documentation................................................................................................................................................9
Deployment and maintenance........................................................................................................................9
Maintaining...................................................................................................................................................10
Waterfall Model............................................................................................................................................10
Incremental model........................................................................................................................................10
Introduction................................................................................................................................10
Database....................................................................................................................................10
Entity Relationship.....................................................................................................................10
Functional Decomposition Diagram............................................................................................11
External design...........................................................................................................................11
Web interface................................................................................................................................................11
Navigation..................................................................................................................................12
Application Form...........................................................................................................................................12

4. Implementation...........................................................................................................13
Introduction................................................................................................................................13
Database....................................................................................................................................13
Web Interface.............................................................................................................................13
Layout............................................................................................................................................................13
Banner...........................................................................................................................................................14
Navigation.....................................................................................................................................................14
Graphic and colour........................................................................................................................................14
CSS.................................................................................................................................................................14
Application Form / Sign in page....................................................................................................................15
Login/ Adding product to the cart.................................................................................................................15
Profile page...................................................................................................................................................15

Testing.............................................................................................................................15

2
 Black And White Box Testing......................................................................................................16
SYSTEM TESTING...........................................................................................................................................17

Evaluation........................................................................................................................18
Introduction................................................................................................................................18
Project meeting and Objective......................................................................................................................18
Evaluating Software Development Methodology with appropriate methods.............................................18

Conclusion.......................................................................................................................19
Appendix.........................................................................................................................20

ABSTRACT

3
E-commerce which stands for Electronic Commerce is a structural way of doing business through the

computer. Whether as a customer or a seller. In this case (Computer Aid UK) as a seller, it is very

crucial to have a website which not only helps to gain more customers in the future but will also give

the organisation a clue or pattern that allows the organisation to see which items to sell. Therefore, the

intention of this project is to increase customers for the client by creating an ecommerce website that

allows the requested client to sell products whilst getting more customers.

This ecommerce website that will be implemented is not just for the benefit of the client but it also

benefits the customers significantly as it provides dynamic functionalities such as Category Based

Product List, Customer Profile Order Tracking and Brands as most of the client focus is on brand

loyalties and this data provides more beneficial insight for them. These functionalities allow the

customers to choose the preferred category, the preferred brands and store their details for future

visits. This helps to both narrow it down their search and compare brands while retaining the ability to

revisit purchased products. In addition to this, there are several functionalities of interest to the client

such as order history for every customer. Furthermore, it also allows the customer to update or cancel

their order via the order updating and cancelling functionality.

Finally, I intend to implement a type of product that allows the client to have access to promotion,

inventory and shipping information online in order to make intelligent purchase decisions. Also, this

software allows this client to manage his company’s website anytime through the administrator

feature of a Website Management System (WMS) and to create an unlimited website pages and

product categories.

Lastly this product (E commerce website) incorporates a secure shopping cart system with real-time

tax and shipping calculation, a payment gateway for real-time credit card processing (PayPal) and

promotion features such as free shipping or free gifts. From this project, I hope to build a complete

ecommerce website for this client.

INTRODUCTION: PROJECT BACKGROUND, MOTIVATION,

AIM & OBJECTIVE

4
This e-commerce project highlights the complete details of the entire website which includes the

development cycle as well as testing methods needed to implement the delivery of the system. Also,

this report focuses on the development of the software lifecycle for this complete website.

BACKGROUND, MOTIVATION AND AIM

The scope of this project is to design and develop a professional e-commerce website for Muhammed

Athar who is the client. This project is created because the client mentioned, Mr Athar, requested it. In

addition, there is a big growth in the number of customers who are shopping online for items such as

mobile covers, laptop covers, etc. As result of this, there is a need to create websites that cater to

online shoppers especially for those seeking to buy mobile covers. Using various methodologies, this

project report will explain in depth the necessary steps that must be taken in order to build a

functional website.

This particular website will allow customers to shop online especially for mobile covers, accessories

and laptops. This website contains a variety of features which aids the customers to find their desired

items ranging from a Customer Profile Account to an easy to use Navigation Menu.

As far as the payment of the website is concerned, it will use PayPal to process the transaction. As

soon as the customer selects an item, or they add items to purchase to the basket, they are redirected to

a PayPal’s page to complete the transaction.

OBJECTIVE

The objective of this project is to reach the target customers for my client Mr Azhar who are based

mainly online.

PROJECT PLAN AND IMPLEMENTATION

5
Figure(1)

The initial plan for the project is to create the database which helps to create the backend of the

software. Backend is very important as it maintains the backbone of the internal process.

The database contains five tables including user information for logging in the site and product table

for purchasing purposes. In addition, brand and category table fetches data direct from the database

using PHP with JavaScript library using JQuery.

Afterwards, the plan is to proceed by implementing the backend using PHP with MySQL. PHP code

helps to extract the database from the PHPMYADMIN feature.

In the Front-End, the graphical interface is displayed in order to attract customers. It is also plays

important role as the plan is to create both static and dynamic pages such as a user page and all

product page.

BACKGROUND RESEACH

6
The use of online application has become a significant trend in the world of business. E-commerce

provides a dynamic opportunity towards purchasing products conveniently. A study focused the

experience of online customers’ by monitoring online shopping services has provided significant

feedback regarding the technology that have contributed to a positive visit. A variety of programming

technologies such as HTML, CSS3, PHP, JAVA, JavaScript, DATABASE and social media has

helped improve creating positive customer shopping experiences for companies.

These technologies which have provided companies the chance to attract customers are essential.

However, besides the clear advantages, there are also disadvantages. PHP, which is known as a

Hypertext Pre-processor, is a programming language especially for server site that is mainly created

for the development of a website. It is also generally used for programming dynamic pages. It has

numerous advantages which has led it to be arguably the best programming language for developing

websites. This application can run on several platforms including Mac, Linux, and Windows. The

benefit of using this programming language is there is little need to worry about the operating system

that the user is working on because the code will run properly and smoothly irrespective of the

operating system as long there are no bugs. Another advantage of PHP is that it has the ability to

connect to a database with build-in modules. In other words, because most websites require a database

using PHP is more convenient. As far as its disadvantages are concerns, it is very difficult to program

huge applications and implicit conversion which could lead to bugs that are unexpected.

When it comes to extending functionality in websites, JavaScript is one of the most effective

languages used. JavaScript is executed on the client site which means the code is executed on the

user’s processor instead of the web server as a result saving bandwidth on the web’s server. In

addition, this language is relatively easy to learn and contains syntax that is close to English. It uses

DOM module which gives plenty of pre-written functionality to the different objects on pages making

it easier to develop a script to manage a custom situation. It is relatively fast to the Back-End of the

client. It also helps to extend functionality to the web page by using a third-party add-on known as

7
Greasemonkey. This enables the developers of JavaScript to write snippets of JavaScript to extend

functionality by executing on the desired web pages.

As far as its disadvantage is concerned, JavaScript has a minor disadvantage in relation to security

issues. It can be exploited for malicious purposes in some cases if the code is executed on the

customer’s computer. For this reason, most of the users tend to disable JavaScript.

A successful online shopping management system includes improving brand image and promoting

customer satisfaction. A variety of studies have examined the effect of positive online customer

experiences by studying information systems and marketing theories. It showed that E-commerce

companies benefited massively from a positive customer experience. They made use of the flow

theory on a customer experience and produced a framework for it. The conclusion was that in order to

have a positive online experience, the customer should focus entirely on the website and enjoy doing

so.

SYSTEM ANALYSIS

REQUIREMENT ANALYSIS

In this section, the requirement of the software will be discussed based on the methodology that was

implemented by analysing both the Front-End and the Back-End requirement.

8
 FRONT-END REQUIREMENT

Homepage

The homepage should have the website Logo and a slideshow that is incorporated with the Home

Page View List of the most recent chosen items accessible in the webpage. For example, it should list

the Item Title and Item Image. A Navbar that contains the Login and Sign Up buttons will redirect to

relevant page just by tapping on any button, the visitor should be able to easily navigate the

Homepage.

The website’s homepage should have an Item Display so it shows the following:

 Display Items

 By tapping on picture of the item, it will show data of item including availability of various

sizes if in stock

 A card with an image, price tag and button to add to cart

 It lists every single Related Product by card that has the Product name, size and picture.

 By tapping on the picture, the User will be redirected to the "Item Detail" Page.

Item detail Page

 Lists key information of the product:

-Product Title

-Product Image

-Features of the chose Product

View Cart

 Displays items added to the purchase with little item picture, subtotal, shipping sum which

connects to refresh and checkout buttons.

 Lists the updated shopping basket; if anything is acquired, it will update automatically

 Allows for item to be removed from the cart

Login

9
This segment enables the client to put his or her details into the site to create a profile and access

profile by using log-in information given when first registering as a user. The email given by user

will be verified and a secret key to login will be given to that email so a secure log-in is provided.

A user will be taken to a Registration page if they wish to sign-up to the website and create an

account. The user will be prompted to fill in all required fields ranging from entering their name to

address to submitting once they have completed the registration process.

After creating an account and successfully being verified, the users will have their username and

password confirmed. They should then update incomplete information or add extra information where

appropriate by clicking on the ‘My Account’ button.

Checkout page should acquire the following information as it processes payment:

 Proceeds to Shipping Details

 Views/Edits Shipping Details

 Selects Shipping Methods

 Proceeds to Billing Details

 Views Edits Billing Details

 View Total Order Summery, with Shipping and Billing Details

 Proceeds to Payment Details

 Pay Pal Payment Gateway Integration

BACKEND REQUIREMENTS

The Back-End of the site includes the Administrator Board. This is where the Administrator has the

authority to control the whole site and its contents.

Within the Back-End, there should be a Log-In function which provides access to the admin site

which is in this the PhpMyAdmin.

10
Client Management – This segment demonstrates the individual clients who registered for an account

on the site. The following should be accessible to the Administrator:

 View All Customers of the site

 Observe the number of visitors on the site

 Insert or remove customers

 Insert or remove content

 Item Attribute Management (i.e. size and colours).

 View All Product Attributes

 Edit/Delete Product Attribute

There should be a function called Item Management where the Administrator can see and modify all

the items that are on the site. This is important because the Administrator should have full control

over the site in order to take appropriate action to either include, remove or alter anything whether it is

product items or profiles.

Finally, there should be a Payment Management function which should allow the following;

 list all options for Shipping with the sum total in pounds sterling

 present selection for payment and shipping options

 Add/Edit/Delete Shipping Methods

SOFTWARE SYSTEM DESIGN

SOFTWARE DEVELOPMENT LIFE CYCLE

11
Application Software Development is a system process that is used widely by software developers to

describe the process of building an application. There are different types of approaches, but the one

considered to be the most efficient is the Waterfall Model due to its flexibility (REFERENCE).

PLANNING

Planning is the most important part of designing and building a website. This allows the developers to

plan the best language or environment that is suitable for building the website.

IMPLEMENTATION

The programmer starts writing the code based on the client requirement.

TESTING

This step is always done after the website is created as it involves finding major or minor bugs in the
code.

DOCUMENTATION

When the website is fully functional, it is important to record the steps for future reference including

writing the Application Programming Interface (API).

DEPLOYMENT

When the software is ready to be released deployment can take place.

MAINTENANCE

Software design maintenance is important in software design. Software design changes or adding of

new prerequisites to a design modification an take longer than the time expected to make the first

development of the product. There are various types of software modules and every organisation

follows these modules differently.

12
 WATERFALL MODEL

This model includes completing the primary stage totally before beginning the next stage. At the point

when each stage is finished effectively, it is checked whether the task is on track and whether it is

plausible to proceed, and this approach was used to build this website.

INTRODUCTION

The design section is one of the main stages of the Waterfall Model and reflects all the research

requirements necessary in order to develop the website (i.e. the software that will be utilised). This

stage will cover in depth how the main requirements of the website is going to be produced.

DATABASE

A set of databases were designed using normalisation technique in order to avoid repetition. The

database was designed based on the requirement of the system. It contains five tables including key

word search column of the database. The database also contains integrity constraints.

ENTITY RELATIONSHIP

The database designed for the E-commerce website contains a variety of different relationships. Every

entity in the table has a completely unique call, meaning, and sort. Selecting suitable names is vital,

specifically for querying a square. Similarly, every attribute of the database has a completely unique

identifier (primary key) that is important in order to place a query in a variety of tables. Three

relationship methods are produced such as on-to-one, one-to-many or many-to-many.

13
 Figure(1)

FUNCTIONAL DECOMPOSITION DIAGRAM

Functional Decomposing is a way of demonstrating the best way of analysing the design structure. Its

purpose is to display and breakdown the entire system structure from a complex level to a basic level.

The following diagram displays the structure.

Figure(2)

14
 EXTERNAL DESIGN

WEB INTERFACE

The proposed plan for the framework interface has fused in excess of five highlights for interface

configuration, as discussed about in the report for the interface design. The Layout of the site pages

will use PHP and CSS(Bootstrap) programming languages, because of their wide consistency with the

present web design. PHP will give dynamic page content, perform CRUD actions (Create, Read,

Update, Delete). The web interface selected for the website, will be assembled using the standard

show display (800x600) pixel screen. A full accumulation of the interface outlines considered, can be

found in Figure 3.

(figure 3)

NAVIGATION

Navigation plays an important role in website design as it captures the user’s attention immediately.

This function must contain a clear text and a dynamic structure showing where the user is, how to

navigate, etc.

APPLICATION FORM

This section of the website will be situated in the customer page banner on the menu through the

“Drop Down Menu” link. The design of the signup form will be built using PHP and CSS(Bootstrap)

for optimum impact. Moreover, customer-side field legitimacy checks will be utilized to guarantee all

the provided data is correct as determined. On completing the form, the client will click on the submit

button. The form will then be sent via email to an assigned address provided by the proprietor which

in this case is Mr Azhar.

4. IMPLEMENTATION

15
 INTRODUCTION

This stage is the implementation stage which is the next phase of the Waterfall Model’s development

life cycle. The main objective of this phase is to use the design from the previous chapter and

implement them into a ready system. This will be displayed using screen shots, minor source code and

if required a short description of how the requirement was fulfilled. In addition, the new changes were

made while implementing the system from the original design.

DATABASE

The table schemas as illustrated in the design stage, contains 5 tables. The initial table is the User

information which contains user id as an integer and Varchar data type for the rest of the user

information (name, email, password, mobile and adress1 and 2). The second table on the database

schema is the Product table which contains the product id as an integer and product category which is

also an integer as well as Product Brand which also uses an integer for date type. The only attribute of

the table that has varchar as a data type is Product Title. The remaining attributes of the table are text

and will use text as a data type. This includes Product Keyword which allows the customer to browse

through the website. The third table of the database schema is the Category table which allows a User

to narrow the search of the products. This table contains only two attributes which are category id as

an integer and title as varchar data type.

The Cart Table is the fourth table that was created, and it is the most important table above all as it

contains some information about other tables such as Product Table and User Table (including cart id,

product title, product image, quantity, price and total amount). The final table of the database schema

is the Brand Table which helps the customer to organise their search by their preferred brand. This

table contains only brand id which is an integer and brand title which is varchar data type.

WEB INTERFACE

16
After receiving a feedback from the client on the early design for the website, a review was

undertaken with respect to the construction of the early design of the website. Modifications were

made and as result the following screenshot was taken.

Figure 10-screen shot of the implemented design

LAYOUT

The layout of this website was created using a combination of PHP with HTML inside and bootstrap

for the CSS. As a result of the changes, the screenshot above shows the final layout.

BANNER

The banner of the website application was altered using the following style.

style="background-color: #141414"

figure 13

NAVIGATION

The Navbar Menu was built utilizing divisions and every menu connected is isolated in line with

requirement for the website. At the point when the client drifts their mouse cursor over the link, the

colour changes to a darker shade as though it is disappearing. Similarly, white content was utilized on

a blue and black foundation to give an adequate level of differentiation. The NavBar contains five

links to the accompanying pages. The 'Home' and 'Product' links redirect to the same page. The

'Brand' link is an option in a drop-down menu as is the 'Category' link.

On the left side of the Navbar Menu, there is a 'Cart' link which is a drop-down menu as it allows to

display the number of products that is in the cart. The next links on the NavBar menu on the left side

are 'Sign In ‘which is a drop-down form and 'Sign up' link redirects to another page that requires the

User to fill in a form.

17
 GRAPHIC AND COLOUR

The graphic design of the website is well structured. A slide show was implemented below the banner

to make the appearance dynamic. The colour and its slideshow were selected according to the

Nielsen’s Heuristics which emphasizes user interface design. Below the slide show, an image from

the product was inserted and the background colour selected was blue, the colour selected for the

product background was white and a background image was inserted for the entire website.

CSS

The style of the website included the use of Bootstrap as a library yet additional Cascading Style

Sheets or CSS were used in order to make the website more dynamic, in particular the footer banner.

#footer {
background: #141414 !important;
}
#footer h5{
padding-left: 10px;
border-left: 3px solid #eeeeee;
padding-bottom: 6px;
margin-bottom: 20px;
color:#ffffff;
}
#footer a {
color: #ffffff;
text-decoration: none !important;
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
#footer ul.social li{
padding: 3px 0;
}

Figure 14

In order for the CSS to take effect, a reference to the CSS must be announced at the bottom of the

page, so HTML perceives that this style is being used. What's more, a tag referencing that specific

style must be incorporated into the PHP record, as shown in figure15.

<section id="footer">
<div class="container">
<div class="row text-center text-xs-center text-sm-left text-md-left">
<div class="col-xs-12 col-sm-4 col-md-4">

18
figure15

APPLICATION FORM / SIGN IN PAGE

The application frame utilized by potential customers to buy products, can be accessed by means of

the NavBar. The general shape, content fields and field marks were designed utilizing CSS, which

will permit a similar frame arrangement to be utilized for the 'Application Form' page in the restricted

Members Zone. The process was for the User to complete the form and click the submit button in

order to become a member. The User will then be redirected to the Members’ Zone. Afterword, the

logged in customer can buy product(s) by adding it to the cart and proceeding to the checkout page.

LOGIN/ ADDING PRODUCT TO THE CART

To access the profile page or to add an item to the cart, a client must gain a valid username and secret

password provided upon registering through the sign-up page. This component was actualized

utilizing programming languages PHP and JavaScript which accesses the database utilizing SQL.

PROFILE PAGE

The profile page contains the registered details including the details of the products that the customer

intended to buy. This page allows access for the registered customer to add products on the cart and to

proceed to the checkout page from there using PayPal to process the payment.

TESTING

Testing is the second last phase of the Waterfall Model, and ought to initiate after the usage stage. Be

that as it may, because of the reception of the iterative input approach, this stage has been actualized

giving time to return to any phases of advancement cycle keeping in mind the end goal to roll out

improvements previously organization. As expressed in the methodology, client inclusion all through

the advancement of the framework is an imperative factor, basic to deciding the accomplishment of an

19
undertaking. However, clients turn into the most required amid the testing period of the advancement

procedure when they are more active testing the framework. The reason for testing is to build up

whether the necessities, points and determinations have been met, satisfying the host organization's

desires. Regardless of these more large-scale explanations behind testing, the essential utilization of

testing is to set up whether issues, for example, ease of use and interface plan and usefulness have

been accomplished. Ease of use specialists express that there are three kinds of ease of use testing;

convenience examinations, gather walkthroughs and client testing. Thus, I will centre around the ease

of use investigation and client testing strategies to strengthen the outcomes returned.

BLACK AND WHITE BOX TESTING

White Box Testing is mostly performed by code engineers who are familiar with the code and the

function that every line of code is supposed perform because they possess the knowledge of the

specific programming language whereas the Black Box Testing is mostly done by an engineer who is

not familiar with the code and does not possess the knowledge of the programming language.

White Box Testing is mainly used in lower level testing such as Unit Testing . In contrast with Black

Box Testing which is applied to a higher level of testing since the tester does not know what to expect

from results (i.e. such as System Testing and Acceptance Testing). In this test plan, both test cases

will be carried out.

UNIT TESTING

This test is based on testing the source code in order to ensure that the main functions of the code are

fit for use including the Back-End Database.

The main functions that are going to be checked are the Checkout function, Cart function, Homepage

Banner function, Product and Category dropdown function.

20
<div class="navbar navbar-default navbar-fixed-top" style="background-color: #141414">

<div class="container">

<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed" data-

toggle="collapse" data-target="#collapse" aria-expanded="false">

<span class="sr-only">navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

This screenshot below shows the source code of the NavBar of all the pages on the website. The

expected result of this source code application is to produce a Menu Bar that holds all the Navigation

links of the website including Sign-in and Sign-up as well as the Product list dropdown menu.

As you can see the screenshot on figure(3) is the result of the previous code written as it was

expected.

SYSTEM TESTING

In this test, a complete test of the software will be carried out which is end-to-end testing of

application before the software is deployed live.

This website is an ecommerce website, which should allow customers to purchase the desired

products successfully by adding item or items to the Cart before proceeding to the Checkout page.

When a user visits the website and intends to buy a product, the user should Sign-Up before adding

products into the Cart.

Afterwards, the User will click the Sign-Up button on the Menu Bar and it will direct to the

registration form page as shown below.

21
As soon as the User fills in the form in the correct format, the User will become a Member. However,

if the form is filled in correctly, an Error Message will be displayed on the top of the form or it should

display an Error Message at the top of the form.

Once the User has successfully signed in, the User will click on the Sign-in Dropdown menu then he

or she will be redirected to the Members’ Homepage with a small message “HI (Name)” as shown

below.

Furthermore, the User will try to add Products on the Cart and the expected result is to accept that

action.

From here the User expects to see his/her Product(s) before he/her proceeds to the Checkout page in

either via the Homepage or by going to the actual Cart page.

From this point, if the customer clicks on the Checkout button, it should redirect to the PayPal page

where the payment is processed.

22
As the figures above confirm, the payment process displays the results that were expected and the

system functioned as it was designed to do. Therefore, the website is ready to be deployed live and the

service is ready to be launched in the marketplace.

EVALUATION

INTRODUCTION

23
This section will discuss the function of the overall website and will determine whether or not the

website can be considered successful. Successful will mean that it is fully functional and works as

intended. Furthermore, this section will discuss the process of the project from the meeting and

objective stage to the User requirements stage to the visibility targets stage. It will also assess the

methodology that was used and the implementation process including the testing process. Finally, this

section will recommend possible improvement that can be made.

PROJECT MEETING AND OBJECTIVE

In order to achieve the appropriate aim of the project, the following objectives were accepted to

supply an overview of the main project requirements. The project goal that was illustrated in this

report contributed to the life cycle system development and the full implementation of both Front-End

and Back-End implementation.

EVALUATING SOFTWARE DEVELOPMENT METHODOLOGY WITH

APPROPRIATE METHODS

Once the problem of what type of projects to design was established and the project specification

became clear, research based on various software was conducted to determine which methodology

was fit for the project. Five factors were chosen that were deemed necessary in producing a

appropriate structure for developing the website architecture. After careful consideration, the

Waterfall Model approach was chosen for the ultimate design.

Self-Reflection

During the development of this website, I have learned a variety of different programming languages.

In particular, I have learned how PHP helps the developers to create dynamic webpages. In addition,

since it is a Server-Side Script Language, it is convenient to develop a database website such as a

ecommerce or even a dating site. Also, this language can be developed using different types of

frameworks such as Laravel.

Furthermore, while working on this project, I was also developing my mastery of the language.

24
 CONCLUSION

The purpose of this project was to research and find the right software for my client that fulfils his

commercial requirements. The client required this e-commerce site in order to build on his existing

business and expand his services beyond offering mobile covers to customers located in London only.

In addition to the overall project design, special consideration was given to how the design of the

software was implemented from the Back-End to the Interface design from the Front-End.

Furthermore, good time-management was essential in order to successfully complete this project.

Significant consideration was given to which programming languages would be best employed to

complete this project. The programming languages chosen were PHP and jQuery along with CSS in

order to deliver the software that the client required for his business. The criteria utilised in the

selection of which programming languages to use were usability of the software and the best design to

produce a positive customer experience. Furthermore, the project covered how the main requirement

of the software was implemented both in the Back-End and Front-End. In the Front-End, five factors

were discussed that would make the website easier to navigate in terms of user requirements. In the

Back-End, MySQL and PhpMyAdmin were discussed that would fulfil the software admin

requirements. In addition to the project design, the project also covered how the Waterfall Model

development life cycle was implemented in the software by following all the stages ranging from

planning to testing. In the database design section, the implementation process was covered using the

entity relationships (i.e. one-to-one, one-to-many, many-to-many).

Furthermore, a Functional Decomposing diagram for the website was produced during the

development of this project as it outlined the structure of the entire application software step by step.

Then the web interface design ranging from the navigation to the graphics and colours were discussed

including the initial diagram of the website.

In conclusion, the implementation of the designs including various diagrams which provided the

evidence of the way it was implemented were discussed with figures and modification that were made

to the original design. In addition, various tests were carried out such as Unit Testing and System

25
Testing (White and Black Box Testing respectively) to ensure the usability of the software

application.

APPENDIX

<?php

session_start();

include "db.php";

if(isset($_POST["category"])){

$category_query = "SELECT * FROM categories";

$run_query = mysqli_query($con,$category_query) or die(mysqli_error($con));

echo "

<div class='nave nave-pills nave-stacked'>

<li class='active'><a href='#'><h4>Categories</h4></a></li>

";

if(mysqli_num_rows($run_query) > 0){

while($row = mysqli_fetch_array($run_query)){
26
$cid = $row["cat_id"];

$cat_name = $row["cat_title"];
<?php

session_start();

if(isset($_SESSION["uid"])){

header("location:profile.php");

?>

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device.width, initial-scale=1, user-scalable=no">

<title>Athar Store</title>

<link rel="stylesheet" href="css/bootstrap.min.css"/>

<script src="js/jquery2.js"></script>

<script src="js/bootstrap.min.js"></script>

<script src="main.js"></script>

<style src="styl.css"></style>

</head>

<style>

body{

background-image: url(product_images/store.gif);
27
}
$(document).ready(function(){

cat();

brand();

product();

function cat(){

$.ajax({

url : "action.php",

method: "POST",

data : {category:1},

success : function(data){

$("#get_category").html(data);

})

function brand(){

$.ajax({

url : "action.php",

method: "POST",

data : {brand:1},

success : function(data){

$("#get_brand").html(data);

}) 28

}
<?php

session_start();

if(!isset($_SESSION["uid"])){

header("location:index.php");

$trx_id = $_GET["tx"];

$p_st = $_GET["st"];

$amt = $_GET["amt"];

$cc = $_GET["cc"];

$cm = $_GET["cm"];

$c_amt = $_COOKIE["ta"];

?>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Athar Store</title>

<link rel="stylesheet" href="css/bootstrap.min.css"/>

<script src="js/jquery2.js"></script>

<script src="js/bootstrap.min.js"></script>
29
<script src="main.js"></script>

<style>
<?php

session_start();

if(!isset($_SESSION["uid"])){

header("location:index.php");

?>

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device.width, initial-scale=1, user-scalable=no">

<title>Athar Store</title>

<link rel="stylesheet" href="css/bootstrap.min.css"/>

<script src="js/jquery2.js"></script>

<script src="js/bootstrap.min.js"></script>

<script src="main.js"></script>

</head>

<style>

body{

background-image: url(product_images/store.gif);

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

section {

padding: 60px 0;
30
}
#footer ul.social li a i {

margin-right: 5px;

font-size:25px;

-webkit-transition: .5s all ease;

-moz-transition: .5s all ease;

transition: .5s all ease;

#footer ul.social li:hover a i {

font-size:30px;

margin-top:-10px;

#footer ul.social li a,

#footer ul.quick-links li a{

color:#ffffff;

#footer ul.social li a:hover{

color:#eeeeee;

#footer ul.quick-links li{

padding: 3px 0;

-webkit-transition: .5s all ease;

-moz-transition: .5s all ease;

transition: .5s all ease;

31
<?php

include "db.php";

$f_name = $_POST["f_name"];

$l_name = $_POST["l_name"];

$email = $_POST['email'];

$password = $_POST['password'];

$repassword = $_POST['repassword'];

$mobile = $_POST['mobile'];

$address1 = $_POST['address1'];

$address2 = $_POST['address2'];

$name = "/^[A-Z][a-zA-Z ]+$/";

$emailValidation = "/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9]+(\.[a-z]{2,4})$/";

$number = "/^[0-9]+$/";

if(empty($f_name) || empty($l_name) || empty($email) || empty($password) || empty($repassword) ||

empty($mobile) || empty($address1) || empty($address2)){

echo "

<div class='alert alert-warning'>

<a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a><b>PLease Fill all fields..!

</b>

</div>

";

exit();

} else {

if(!preg_match($name,$f_name)){ 32
echo "
if($password != $repassword){

echo "

<div class='alert alert-warning'>

<a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a>

<b>password is not same</b>

</div>

";

if(!preg_match($number,$mobile)){

echo "

<div class='alert alert-warning'>

<a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a>

<b>Mobile number $mobile is not valid</b>

</div>

";

exit();

if(!(strlen($mobile) == 11)){

echo "

<div class='alert alert-warning'>

<a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a>

<b>Mobile number must be 10 digit</b>

</div>

";

exit();

//existing email address in our database

33 LIMIT 1" ;
$sql = "SELECT user_id FROM user_info WHERE email = '$email'

$check_query = mysqli_query($con,$sql);

$count_email = mysqli_num_rows($check_query);
<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Athar Store</title>

<link rel="stylesheet" href="css/bootstrap.min.css"/>

<script src="js/jquery2.js"></script>

<script src="js/bootstrap.min.js"></script>

<script src="main.js"></script>

</head>

<style>

body{

background-image: url(product_images/store.gif);

</style>

<body>

<div class="navbar navbar-default navbar-fixed-top" style="background-color: #141414">

<div class="container">

<div class="navbar-header">

<a href="#" class="navbar-brand">Athar Store</a>

</div>

<ul class="nave navbar-nave">

<li><a hrein-depthphp"></span>Home</a></li>

<li><a href="in-depth"></span>Product</a></li>

</ul>

</div>

</div>

<p><bra/></p>
34
<p><bra/></p>

<p><bra/></p>
<?php

session_start();

if(!isset($_SESSION["uid"])){

header("location:index.php");

?>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Athar Store</title>

<link rel="stylesheet" href="css/bootstrap.min.css"/>

<script src="js/jquery2.js"></script>

<script src="js/bootstrap.min.js"></script>

<script src="main.js"></script>

<style>

table tr td {padding:10px;}

body{

background-image: url(product_images/store.gif);

</style>

</head>

<body>

<div class="navbar navbar-default navbar-fixed-top"style="background-color: #141414">

<div class="container">

<div class="navbar-header">

<a href="#" class="navbar-brand">Athar Store</a>

35
 BIOGRAPHY

Ager, T., 2012. Black-Box Models of Computation. Black-Box Models of Computation in

Cryptology, pp.5–13.

Nérard, M.-P., 2013. Real Time Discharge-Discharge Models with SOPHIE. Modeling Software,
pp.165–176.

Cugola, G di Nitto, E fuggetta, , and Ghezze, C (1996) a Framework for formatizing Inconsistencies
and Deviation in Human-Centered System. ACM Transection on Software Engineering and
Methodology, 5(3): 191-230

Third International Conference on the Software Process: applying the software process: proceedings,
October 10-11, 1994, Reston, Virginia, n.d.

Poore, J. and Trammell, C. (1996). Cleanroom software engineering. Oxford, UK: Blackwell.

Wang, Q., Pfahl, D. and Raffo, D. (2007). Software Process Dynamics and Agility. Berlin: Springer.

Meloni, J. (2004). PHP 5. Boston, MA: Thomson Course Technology.

Ahmad, A. and Hawkins, L. (1996). Development of software to model AXAF-I image quality.

[Washington, DC]: [National Aeronautics and Space Administration].

Kemper, B. (n.d.). Software engineer.

Craig, R. and Jaskiel, S. (2002). Systematic software testing. Boston: Artech House.

Bonifácio, A. and Moura, A. (2017). Test suite completeness and black box testing. Software Testing,
Verification and Reliability, 27(1-2), p.e1626.

Farrell-Vinay, P. (2008). Manage software testing. Boca Raton: Auerbach Publications.

Myers, G., Badgett, T., Thomas, T. and Sandler, C. (2004). The art of software testing. Hoboken, N.J.:
John Wiley & Sons.

Mustafa, K. and Khan, R. (2007). Software testing concepts and practices. Oxford: Alpha Science
International.

36
 REFERENCE

Retrospectivewiki.org. (2018). Agile Retrospective Resource Wiki - Agile Retrospective Resource

Wiki. [online] Available at: http://retrospectivewiki.org/index.php?title=Main_Page [Accessed 20
May 2018].

Pdfs.semanticscholar.org. (2018). [online] Available at:

https://pdfs.semanticscholar.org/presentation/3220/95840e831d68d3da53fe68de49cd12c19e5b.pdf
[Accessed 20 May 2018].

Ieeeorg. 2018. Ieeeorg. [Online]. [20 May 2018]. Available

from:https://ieeexplore.ieee.org/abstract/document/497647

Wileycom. 2018. Wileycom. [Online]. [20 May 2018]. Available from:

https://onlinelibrary.wiley.com/doi/full/10.1002/stvr.224

eeeorg. 2018. Ieeeorg. [Online]. [25 May 2018]. Available from:

https://ieeexplore.ieee.org/abstract/document/2014/

Katayama, T. (2000). Support for the software process. [Piscataway, N.J.]: IEEE.

Johannes Sametinger, Software Engineering with Reusable Components - Page 151, Springer

Reference

International Software Testing Qualifications Board. (2015). What is Iterative model- advantages,

disadvantages and when to use it?. [online] Available at: http://istqbexamcertification.com/what-is-
iterative-model-advantages-disadvantages-and-when-to-use-it/ [Accessed 22 June. 2018 ].

Waterfall-model.com. (2018). Waterfall Model | Time, Tasks, and More.. [online] Available at:
http://www.waterfall-model.com [Accessed 25 May 2018].

37