Higher Nationals in Computing

WEBG301: WEB Project

ASSIGNMENT

Learner’s name: Le Tan Nghia

Team name: Electronic device store

Class: GCS0905C
Subject code: WEBG301
Assessor name: PHAN MINH TAM

Assignment due: 1 5 / 0 8 / 2 0 2 2 Assignment submitted: 1 5 / 0 8 / 2 0 2 2

 ASSIGNMENT FRONT SHEET

Qualification BTEC Level 5 HND Diploma in Computing

Unit number and title WEBG301: WEB Project

Submission date 15/08/2022 Date Received 1st submission

Re-submission Date 18/08/2022 Date Received 2nd submission

1. Đào Trường Vĩ 1. GCS210514

2. Bùi Minh Dũng 2. GCS210635
Student Name Student ID
3. Lê Tấn Nghĩa 3. GCS200608
4. Tạ Ngọc Lâm 4. GCS210484

Class GCS0905C Assessor name Phan Minh Tam

Student declaration
I certify that the assignment submission is entirely my own work and I fully understand the consequences of plagiarism. I understand that
making a false declaration is a form of malpractice.

Student’s signature

Grading grid
P M D
 Summative Feedback:  Resubmission Feedback:

Grade: Assessor Signature: Date:

Signature & Date:

 Table of Contents
Table of Contents
WEBG301: WEB Project ASSIGNMENT ........................................................................................................... 1
Chapter 1: .................................................................................................................................................... 4
Introduction ................................................................................................................................................. 4
1. Background information: ...................................................................................................................... 4
2. Project aim and objectives: ................................................................................................................... 4
Chapter 2: .................................................................................................................................................... 5
Literature Review ......................................................................................................................................... 5
1. Introduction: ........................................................................................................................................ 5
2. SDLC model: ......................................................................................................................................... 5
2.1. Introduction to SDLC:..................................................................................................................... 5
2.2. Type of SDLC: ................................................................................................................................ 6
2.3. SDLC applied in project: ................................................................................................................. 6
3. MVC architecture: ................................................................................................................................. 8
3.1. Model: .......................................................................................................................................... 9
3.2. View:............................................................................................................................................. 9
3.3. Controller: ................................................................................................................................... 10
3.4. Characteristic: ............................................................................................................................. 10
3.5. Benefits: ...................................................................................................................................... 10
3.5.1. Accelerated Development Process: ....................................................................................... 10
3.5.2. Create Multiple View Components for Your Model: .............................................................. 10
3.5.3. Supports Asynchronous Method Invocation (AMI): ............................................................... 11
3.5.4. Changes Don't Affect the Whole Model: ............................................................................... 11
3.5.5. Data Is Returned Without Formatting by the MVC Model: ..................................................... 11
3.5.6. Perfect for Large-Scale Web Application Development: ......................................................... 11
4. PHP Frameworks: ................................................................................................................................ 11
4.1. What is PHP framework? ............................................................................................................. 11
4.2. Why use a PHP Framework? ........................................................................................................ 12
4.2.1. Faster development: ............................................................................................................ 12
4.2.2. Less code to write: ............................................................................................................... 12
4.2.3. Libraries for common tasks: .................................................................................................. 12
Page |1
 4.2.4. Follow good coding practices: ............................................................................................... 13
4.2.5. More secure than writing your own apps: ............................................................................. 13
4.2.6. Better teamwork: ................................................................................................................. 13
4.2.7. Easier to Maintain: ............................................................................................................... 13
5. Common PHP Frameworks: ................................................................................................................. 13
5.1. Laravel: ....................................................................................................................................... 13
5.2. Symfony ...................................................................................................................................... 14
5.3. CodeIgniter ................................................................................................................................. 14
5.4. Zend framework .......................................................................................................................... 15
5.5. CakePHP:..................................................................................................................................... 15
5.6. Phalcon: ...................................................................................................................................... 15
5.7. PHP framework used in project: ................................................................................................... 15
6. Database ............................................................................................................................................ 17
7. Techniques and Tools .......................................................................................................................... 18
Chapter 3: .................................................................................................................................................. 19
Requirements Analysis ............................................................................................................................... 19
1. User’s requirements............................................................................................................................ 19
1.1. Functional requirements ................................................................................................................. 19
1.1.1. Customer roles: .................................................................................................................... 19
1.1.2. Admin roles: ........................................................................................................................ 19
1.1.3. Non-Functional requirements ............................................................................................... 19
2. Use case diagram ................................................................................................................................ 20
2.1. Use case .......................................................................................................................................... 22
2.2. Use Case specification ..................................................................................................................... 22
2.2.1. UC-1..................................................................................................................................... 22
2.2.2. UC-2..................................................................................................................................... 22
2.2.3. UC-3..................................................................................................................................... 23
2.2.4. UC-4..................................................................................................................................... 24
3. Gantt chart ......................................................................................................................................... 25
Chapter 4: .................................................................................................................................................. 27
Design........................................................................................................................................................ 27
1. Site map: ............................................................................................................................................ 27
2. Database design.................................................................................................................................. 29
2.1. Database diagram........................................................................................................................ 29
Page |2
 2.2. Data dictionary ............................................................................................................................ 29
3. Wireframe design: .............................................................................................................................. 30
Chapter 5: .................................................................................................................................................. 38
Implementation ......................................................................................................................................... 38
1. Application screenshots: ..................................................................................................................... 38
1.1. Home: ......................................................................................................................................... 38
1.2. Product display:........................................................................................................................... 38
1.3. Product detail: ............................................................................................................................. 39
1.4. Log in/Log out: ............................................................................................................................ 40
1.5. Cart: ............................................................................................................................................ 41
1.6. Search page: ................................................................................................................................ 41
1.7. Customer profile:......................................................................................................................... 42
1.8. Administrator login:..................................................................................................................... 42
1.9. Administrator dashboard: ............................................................................................................ 43
1.10. Product management: ............................................................................................................. 44
1.11. Admin management: ............................................................................................................... 44
2. Sample source code ............................................................................................................................ 44
2.1. General login function: ................................................................................................................ 44
2.2. Register function: ........................................................................................................................ 46
2.3. Edit customer profile: .................................................................................................................. 47
2.4. Search function: .......................................................................................................................... 48
2.5. Sort function: .............................................................................................................................. 49
2.6. Add to cart function:.................................................................................................................... 51
2.7. Erasing a user: ............................................................................................................................. 53
3. GitHub Repository .............................................................................................................................. 54
Chapter 6: .................................................................................................................................................. 57
Conclusion ................................................................................................................................................. 57
1. What went well. ................................................................................................................................. 57
2. What did not go well. .......................................................................................................................... 57
3. Lessons learned and further improvements ......................................................................................... 57
REFERENCES ............................................................................................................................................... 58

Page |3
 Chapter 1:
Introduction

1. Background information:

Electronic device store is a recently opened store in the middle of downtown Chicago; the specialized
in selling high-end laptops to customers that can be used for a variety of purposes (e.g., gaming, office
work, study, graphic design, coding). Their current source of income is from customers going to the
store’s physical location and purchasing a device; because of this limitation, the want to broaden their
operation into selling their devices through the web. They have hired us from company ABC to build
them a website where they can market and sell their products.

2. Project aim and objectives:

The project aim is to create a website that will allow the store to display their products and sell these
items to the customer with ease. To do this, I have broken the scenario down and create these
objectives that must be accomplished:

 Find out what the need of the business and why they want to move onto an e-commerce
platform.

 Understand what the business wants to see in the product.

 Understand what the end users want to see in the product.

 Design, develop, and implement the product successfully.

 Conduct preliminary check on the overall satisfaction of the customers.

 Evaluate the performance of the system and make any changes that are deem necessary.

Page |4
 Chapter 2:
Literature Review
1. Introduction:

It is generally accepted that there are three basic lifecycle approaches to software development, the
waterfall approach, iterative development and component-based software engineering. This literature
review places Rapid Application Development in context as well as looking at some of reasons for the
evolution of methodologies
2. SDLC model:

2.1. Introduction to SDLC:

Software Development Life Cycle can be understood as the standard practices and guidelines into
building a product successfully and up to normal standard. For most models, it is divided into these six
following steps: Planning, Requirements, Design, Build, Document, Test, Deploy, Maintain. Some
project managers will combine, split, or omit steps, depending on the project’s scope. These are the
core components recommended for all software development projects.
SDLC is a way to measure and improve the development process. It allows a fine-grain analysis of each
step of the process. This, in turn, helps companies maximize efficiency at each stage. As computing
power increases, it places a higher demand on software and developers. Companies must reduce
costs, deliver software faster, and meet or exceed their customers’ needs. SDLC helps achieve these
goals by identifying inefficiencies and higher costs and fixing them to run smoothly.
In conclusion, by applying SDLC into the development process of a software you can:
 Ensure that the products were created with high standards.
 Maximize efficiency by having a clear and streamline development process.
 Satisfy customers demands and expectations.
 Reduce the number of faults that can occur in the development process.

Page |5
 Figure 1: Standard for an SDLC model

2.2. Type of SDLC:

There are many types of SDLC models and each of them has their own usage. In this section I would
like to list out a few common ones:

 Waterfall model.

 Prototype model.

 Iterative model.

 Agile model.

 Spiral model

2.3. SDLC applied in project:

Adherence to a suitable life cycle is very important, for the successful completion of the project, this
makes the management easier.
Different Software Development Life Cycle models have their own Pros and Cons. The best model for
any Project can be determined by the factors like requirements (whether it is clear or unclear), system
complexity, size of the Project, cost, skill limitation, project length, and so on.
In this case, a small project with a decent amount of budget, serving crowded customers, and the key
is to keep it simple yet professional. That makes the Waterfall model the most suitable SDLC model for
this project, flowing steadily downwards like a waterfall through the steps of requirements analysis,
Page |6
design, implementation, testing validation, integration, and maintenance, easy to manage, well
defined phases.
In conclusion, waterfall model is the best for this project.
There are 6 steps that are involved in this model:

Figure 2: Waterfall model step

 1st – Requirements: This step usually involves finding out what the customers want, why they
want it, how they want it. In short, it is to find out what will happen during the rest of the
development process.

 2nd – Design: In this step, we will take all of the requirements gathered and create a layout on
what needs to be done. Who will work on the project? Who will create the UI? What software
will be used?

 3rd – Development: In this step, the developers will use the design created at the previous step
to guide them on what need to be done.

 4th – Testing: After the development is done, the product will be tested to ensure that it is up
to standard (e.g., QA testing).
Page |7
  5th – Deployment: After that, the entire system will be integrated into one complete product
and be delivered/deployed for the customers.

 6th – Maintenance: The products will be maintained and updated whenever the customers find
problems within the program.

These are the pros of waterfall model (Martin, 2022):

 The model is simple: each phase must be completed before the following stage can be
completed; this makes it very easy to use, understand, and manage.

 Good for smaller projects, which is especially good for this project.

 Waterfall created a lot of documentations during every stage of the process, which means the
customers usually feel satisfy with the product as a whole.

 Good for projects with little client involvement thereby speeding up project’s speed and
reducing complexity.

 Quality assurance is conducted after each stage.

These are the cons of waterfall model (Martin, 2022):

 Changes and error fixes can only be made during the development phases; if changes are
made, the entire process must be repeated from the start.

 Not suitable for projects that need customer involvement or constant changes.

 Documentations take a lot amount of time.

 Client’s feedbacks cannot be gained until the end of the project.

3. MVC architecture:

Model, View, and Controller are the three primary logical components that make up an application
according to the Model-View-Controller (MVC) architectural pattern. MVC is hence an abbreviation.
Each element of the architecture is designed to tackle a certain application development task. The
business logic layer and presentation layer are separated by MVC. Historically, it was used to desktop
graphical user interfaces (GUIs). MVC architecture in web technology is now widely used to create
Page |8
both online and mobile applications.

Figure 3: MVC architecture

The following are three crucial MVC parts:

 Model: It contains all the data and the logic that goes with it.

 View: Display information to the user or manage user interaction

 Controller: An intermediary between the Model and View components.

3.1. Model:

The model component houses the logic and data for the model. It represents any connected business
logic or data that is being moved across controller components. A Controller object, for instance, will
get the customer information from the database. It modifies data and either utilizes it to render the
same data or sends it back to the database.

It responds to the views' requests for updates as well as the controller's requests for updates.
Additionally, as it is the lowest level of the pattern, it is in charge of keeping data.

3.2. View:

A View represents how data is presented.

The information gathered from the model data is used to construct views. A view asks the model for

Page |9
information so that it can provide the user's output presentation.

The view also displays the data from tables, charts, and diagrams. Any customer view, for instance,
will have all the UI elements, such as text fields, drop-down menus, etc.

3.3. Controller:

The area of the program that manages user interaction is known as the Controller. The controller
interprets the user's mouse and keyboard inputs, causing the model and view to adjust as necessary.

The model receives orders from a controller to change its state (E.g., Saving a specific document).
Additionally, the controller issues directives to its associated view to modify its visual appearance.

3.4. Characteristic:

 Effortless and simple testability. The framework is highly tested, extendable, and pluggable.

 With full control over your HTML and URLs, the MVC pattern may be used to construct a web
application architecture.

 Utilize the functionalities already offered by ASP.NET, JSP, Django, etc.

 Model, View, and Controller all exhibit distinct logical separation. application task division into
business logic, input logic, and Ul logic.

 URL Routing for URLs That Are SEO-Friendly Strong URL mapping for easily understandable and
searchable URLs

 Test-Driven Development Supports (TDD)

3.5. Benefits:

3.5.1. Accelerated Development Process:

When a web application is being developed using an MVC design, one developer may focus on the
view component while the other can concentrate on the controller and generate business logic. As a
result, the MVC paradigm produces faster development speeds—up to three times faster—than
alternative development models.

3.5.2. Create Multiple View Components for Your Model:

The MVC design gives you the ability to create several view components for your model. As you can

P a g e | 10
see, there is a constant need for new methods to access web applications, therefore MVC architecture
is your one-stop shop for creating various view components. The MVC paradigm also minimizes code
duplication and divides the data and business logic from the presentation.

3.5.3. Supports Asynchronous Method Invocation (AMI):

There's no denying that MVC design and JavaScript Frameworks mesh nicely. As a result, MVC
applications may be used with PDF files, desktop widgets, and site-specific browsers. Asynchronous
method invocation (AMI), which aids developers in creating web apps that load quickly, is supported
by the MVC architecture.

3.5.4. Changes Don't Affect the Whole Model:

The user interface of your web application is updated more frequently than your underlying business
model or regulations. Optimizing the color, layouts, font family, font size, and adding more
compatibility for mobile devices and tablets are some of these. The model, view, and controller are
distinct components, as was already mentioned, making modifications to the MVC design quite
simple. Additionally, altering the model component won't have a negative impact on the architecture.

3.5.5. Data Is Returned Without Formatting by the MVC Model:

The same components may be used, called, and applied across a variety of interfaces. For instance,
HTML may be used to format data.

3.5.6. Perfect for Large-Scale Web Application Development:

MVC architecture works incredibly well for web designers that need total control over the behavior of
the program and for web apps that require the assistance of a large developer team.

4. PHP Frameworks:

4.1. What is PHP framework?

A PHP framework is a platform to assist in the creation of PHP web applications. PHP frameworks
provide code libraries for commonly used functions, cutting down on the amount of original code you
need to write.

P a g e | 11
 Figure 4: PHP frameworks

4.2. Why use a PHP Framework?

4.2.1. Faster development:

Because PHP frameworks have built-in libraries and tools, the time required for development is less.

For example, the CakePHP framework has the Bake command-line tool which can quickly create any
skeleton code that you need in your application.

4.2.2. Less code to write:

Using functions that are built-in to the framework means that you don’t need to write so much
original code.

4.2.3. Libraries for common tasks:

Many tasks that developers will need to do within web apps are common ones. Examples are form
validation, data sanitization, and CRUD operations (Create, Read, Update, and Delete). Rather than
having to write your own functions for these tasks, you can simply use the ones that are part of the
framework.

P a g e | 12
 4.2.4. Follow good coding practices:

PHP frameworks usually follow coding best practices. For example, they divide code neatly into a
number of directories according to function. They force you to organize code in a cleaner, neater, and
more maintainable way. Frameworks also have their own naming conventions for entities which you
should follow.

4.2.5. More secure than writing your own apps:

There are many PHP security threats including cross-site scripting, SQL injection attacks, and cross-site
request forgery. Unless you take the right steps to secure your code, your PHP web apps will be
vulnerable.

Using a PHP framework is not a substitute for writing secure code, but it minimizes the chance of
hacker exploits. Good frameworks have data sanitization built-in and defenses against the common
threats mentioned above.

4.2.6. Better teamwork:

Projects with multiple developers can go wrong if there isn’t clarity on:

 Documentation

 Design decisions

 Code standards

Using a framework sets clear ground rules for your project. Even if another developer isn’t familiar
with the framework, they should be able to quickly learn the ropes and work collaboratively.

4.2.7. Easier to Maintain:

PHP Frameworks encourage refactoring of code and promote DRY development (Don’t Repeat
Yourself). The resulting leaner codebase needs less maintenance. You also don’t have to worry about
maintaining the core framework, as that’s done for you by the developers.

5. Common PHP Frameworks:

5.1. Laravel:
P a g e | 13
 Figure 5: Laravel framework

5.2. Symfony

Figure 6: Symphony framework

5.3. CodeIgniter

Figure 7: CodeIgniter framework

P a g e | 14
 5.4. Zend framework

Figure 8: Zend framework

5.5. CakePHP:

Figure 9: CakePHP framework

5.6. Phalcon:

Figure 10: Phalcon framework

5.7. PHP framework used in project:

For this project, we decided to use Laravel as “The PHP Framework for Web Artisans.” It was

P a g e | 15
developed by Taylor Otwell, who wanted a framework with elements that CodeIgniter didn’t have,
such as user authentication.

Figure 11: Laravel framework

Benefits of Laravel (Latitude Technolab, 2021):

 Framework is constantly updated allowing users to utilize the most up-to-date functions and
libraries.

 Laravel has many functions already built-in making the development much easier on
newcomers. For example, it has register, login, password reset already created and is waiting
to be used.

 Laravel has an extensive history of documentations on every version change and update
making it very friendly to both newcomer and experts.

 Because Laravel has many built-in functions and simplify method, it dramatically reduces
development time.

 The framework itself has a tool called ‘Artisan’ which handle menial tasks like managing
database; it is also great for building up MVC architecture.

 Users can use the framework to migrate data from one database to another.

Disadvantages of Laravel (Latitude Technolab, 2021):

P a g e | 16
  There are not many built-in supports that come with the original Laravel package. Therefore, to
make the development easier, it is necessary to install additional plugins and tools.

 PHP has many inherent problems when version is upgraded, and by proxy, so does Laravel; this
may cause developers to have to fix their code every time a new update arrives.

 Because the difference in utilities that Laravel provides, which is very different if one were to
used PHP without it, developers might need some time to get used to the framework.

6. Database

MySQL is an Oracle-backed open-source relational database management system (RDBMS) based on

Structured Query Language (SQL). MySQL runs on virtually all platforms, including Linux, UNIX and
Windows. Although it can be used in a wide range of applications, MySQL is most often associated
with web applications and online publishing.

We decided that MySQL is the most optimal choice for the project for its high performance, reliable
database management, easy to use and install, flexibility, simplicity.
Pros of MySQL (Ganesan, 2021):
 The database is fast, portable, and secure.
 The database is open-source.
 Database can be scaled up on demand.
 Many tools to operate on (creating schema, comprehensive symbols).

P a g e | 17
  24/7 uptime.
Cons of MySQL:
 Users need to have prior knowledge to operate the database efficiently.
 Large database can encounter stability issues.
 Quite restricted in term of setting up complex business needs.
 Database needs extra add-on to fully work.
7. Techniques and Tools

Tools that were used in the making of this project:

 Visual Studio Code
 XAMPP Control Panel
 MySQL workbench
 Terminal.
 Docker desktop.
 Visual Studio Code server x64.

P a g e | 18
 Chapter 3:
Requirements Analysis
1. User’s requirements
1.1. Functional requirements

1.1.1. Customer roles:

 There is a home page to inform the customers about the website and what it does. It will also
contain miscellaneous items, such as newsletter sign up, contact info, and so on.

 The customers will be presented with a variety of products when going from the home to
storefront page.

 The customers can search for products (i.e., by name, brand) using a search tool without
logging in.

 The customers can register their own account and log in them.

 The customers can add product into their shopping cart (only when logged in).

1.1.2. Admin roles:

 There is a separate access for system administrators to manage the website; to access this, the
administrators are required to log into their account.
 The administrator can manage products on the site.
 The administrator can manage customers on the site.
 The administrator can manage administrators on the site.
 The administrator can manage carts of customers.
 The administrators should be able to generate reports about the website (e.g., how many users
there are, how many products there are on the site).

1.1.3. Non-Functional requirements

 Site is easy to use and navigate.
 Input must be validated and proper errors must be shown.
 Administrator side of the webpage must have security.

P a g e | 19
 Site’s loading and respond time must be fast.
 User can access the site on their phone.
 Site is reliable and have little downtime.
2. Use case diagram

P a g e | 20
 Figure 12: Use case diagram

P a g e | 21
 2.1. Use case

Use case can be understood as a detailed description on how the end user of a system can interact
with it, and how the elements in the system may interact with each other and the end users (Daly,
N 2022). Use case helps those in the development project how things will interact on each other
(success, failure, interruption).
2.2. Use Case specification Comment [BS1]: Redesign uc spec. Change
actor and use case name. The object of UC spec is
supposed to be the function chu khong phai la giao
2.2.1. UC-1 viec cho ai lam

Use case name: Login for customer ID: UC-1 Priority: High
Actor: Customers
Descriptinon: When using the website, the user will have the option to create an account and
login using it.
Precondition:
1. The website is up and running.
2. The user has already created an account.
3. The user has an internet connection.
Normal course:
1. The user enters the website URL.
2. The user hits the log in button.
3. The users enters their login credential.
4. The user is directed to the product display page.
Postconditions:
1.The user is logged in.
2. The user can add item to cart.
3. The user is greeted with a welcome message
Exception:
1. Login credential is wrong.
2. The user hasn’t created an account
Figure 13: 1st use case

2.2.2. UC-2
P a g e | 22
Use case name: User adding item to their cart ID: UC-2 Priority: High
Actor: Customer
Descriptinon: When viewing the website, the user can choose to add item in their cart for later
viewing.
Precondition:
1. The user is already in the site.
2. User is already logged in.
Normal course:
1. User clicks on the products page to view product.
2. User clicks on a specific product.
3. User clicks on the 'add to cart' button.
4. User is informed that the procedure was successful.
Postconditions:
1. There is an item in the cart of the customer
Exception:
1. User choosing to art an item to cart with an inapporiate amount.
2. The system is down.

Figure 14: 2nd use case

2.2.3. UC-3

P a g e | 23
Use case name: Managing a customer cart ID: UC-3 Priority: High
Actor: Administrator
Descriptinon: As a adminisrtator, you can choose to view the carts of customers on the site.
Precondition:
1.user has already logged in.
2. The customers has a cart and some items in the cart.
Normal course:
1. Admin logged in and directed to the dashboard.
2. Admin clicks the 'cart management' tab.
3. Admin is showned the cart of customer.
4. Admin clicks on the 'View' button.
5. Admin is showned the details of a customer cart.
Postconditions:
1. Items in the cart of a customer is showned.

Exception:
1. Users have no item to show.
2. There is no cart yet.

Figure 15: 3rd use case

2.2.4. UC-4

P a g e | 24
Use case name: Searching for an item ID: UC-4 Priority: High
Actor: Customer
Descriptinon: Instead of browsing the site, the user can choose to search for a specific product on
the site.
Precondition:
1. There are items on the database.
2. User is already on the site
Normal course:
1. User hit the search icon and is showned the search webpage.
2. User enter a search term into the search bar.
3. User hit the search button.
4. User is presented with the right item.
Postconditions:
1. User is presented with the right item.

Exception:
1. The search return no item.
2. User choose to return to the previous page.

Figure 16: 4th use case

3. Gantt chart

P a g e | 25
 Figure 17: GANTT chart

P a g e | 26
 Chapter 4:
Design
1. Site map:

P a g e | 27
 Figure 18: Site map

P a g e | 28
2. Database design
2.1. Database diagram

Figure 19: Database diagram

2.2. Data dictionary

Table name Fields Data type Constraint
producerID Int Primary key, auto increment
producers
producerName varchar(30) Not null, unique
producerID varchar(5) Primary key, not null
producerName varchar(30) Not null
productPrice Int Not null
products productDetails varchar(3000) Null
productImage1 varchar(40) Not null
productImage2 varchar(40) Null
productImage3 varchar(40) Null

P a g e | 29
 producerID Int Foreign key, not null
customerID Int Primary key, auto increment
customerUsername varchar(50) Not null
customers customerPassword varchar(90) Not null
customerPhone varchar(20) Not null
customerEmail varchar(30) Null
adminID Int Primary key, auto increment
admins adminUsername varchar(50) Not null
adminPassword varchar(30) Not null
adminEmail varchar(30) Not null
cartID Int Primary key, auto increment
paymentMethod varchar(20) Not null
carts deliveryAddress varchar(60) Null
deliveryInstruction varchar(100) Null
customerID Int Foreign key, not null
itemOrder Int Primary key, auto increment
cartOrders productID varchar(5) Foreign key, not null
productAmount Int Not null
cartID Int Foreign key, not null
Figure 20: Data dictionary

3. Wireframe design:

P a g e | 30
Figure 21: Home page wireframe

P a g e | 31
Figure 22: Product display wireframe

P a g e | 32
Figure 23: Product detail wireframe

P a g e | 33
Figure 24: Cart display wireframe

Figure 25: Sign in wireframe

P a g e | 34
 Figure 26: Sign up wireframe

Figure 27: Admin home wireframe

P a g e | 35
Figure 28: Admin product management wireframe

P a g e | 36
Figure 29: Admin management wireframe

P a g e | 37
 Chapter 5:
Implementation
1. Application screenshots:

1.1. Home:

Figure 30: Home page

1.2. Product display:

P a g e | 38
 Figure 31: Product display

1.3. Product detail:

P a g e | 39
 Figure 32: Product detail

1.4. Log in/Log out:

Figure 33: Register page

P a g e | 40
 Figure 34: Sign in page

1.5. Cart:

Figure 35: Cart page

1.6. Search page:

P a g e | 41
 Figure 36: Search page

1.7. Customer profile:

Figure 37: Profile page

1.8. Administrator login:

P a g e | 42
 Figure 38: Administrator login page

1.9. Administrator dashboard:

Figure 39: Administrator home page

P a g e | 43
1.10. Product management:

Figure 40: Product management

1.11. Admin management:

Figure 41: Admin management

2. Sample source code

2.1. General login function:

P a g e | 44
 Figure 42: Login function of administrator

This source code takes the username and password in the login form and compare it to the database.

 If the authentication was successful, the user will be transported to the proper page; in this
case, they will be transported to the administrator home page.

 If the authentication was a failure, the user will be returned back to the login page and shown
the message “Incorrect password” or “Incorrect username”.

Figure 43: Failed login

P a g e | 45
 2.2. Register function:

Figure 44: Register function for customer

This source code contains two main parts:

 1st part: The login function requires the username of the customer to perform login function,
so each username must be different from each other. The first part prevents duplicate
username from being created.

P a g e | 46
 Figure 45: Duplicate username is not accepted

 The second part of the function, if valid, will inserted the new user information in the database
and allowed them to login into the system.

2.3. Edit customer profile:

Figure 46: Function for editing user profile

P a g e | 47
This function will take information the user entered from the form and insert it into the database.

Figure 47: Edit user's data

2.4. Search function:

Figure 48: Code for search function

This function will take whatever information the user inserted into the search bar and show the
information:

 If something is found, the correct data will be outputted to the screen.

P a g e | 48
 Figure 49: Search displaying item

 If nothing is found, the user will be redirected back to the search page.
2.5. Sort function:

P a g e | 49
 Figure 50: Sorting function for product display

This function will take whatever the option the user chooses and sort the page as stated. To do this,
the system used the function “orderBy” to give back the correct input.

P a g e | 50
 Figure 51: Price sorted from low to high

2.6. Add to cart function:

This function involved many functions working together to add items to cart:

 Part 1 – Creating a cart: When logging into the system, a user will not be assigned to a cart until
they decide to add an item to their cart. When an item is added, a cart will be created. It also
prevents people who hasn’t login from adding item to a non-existing cart.

Figure 52: Check for login and create cart

P a g e | 51
 Part 2 – Assigning a cart to a user: To assign a user a cart, the system needs to get the user ID
and search to see if that user already has a cart. If they don’t, the user will be assigned to a
new cart.

Figure 53: Create a cart if no cart is found

Figure 54: Search for a cart based on customerID

 Part 3 – Adding item to cart: After a cart is created (or if there is an existing one), the function
will start adding item to the cart. First thing it does is make sure the quantity is larger than 0; if
it isn’t larger than 0, the function will fail, and the user will be transported back to the main
page. If it is larger than 0, the item will be added to the cart.

P a g e | 52
 Figure 55: The entire function to add item to cart

2.7. Erasing a user:

Because of the way the system is set up, deleting a user will require the deletion of the cart that is
assigned to the user and all the items in it. Like the previous function, this one will require many
functions working together. To summarize this function: delete items in the cart -> delete the cart
-> delete the customer.

 1st part – Erasing a customer: When a customer hit the delete button in their profile, they will
call the function to erase the cart and the item in the cart before they can be erased
themselves. When the cart and items are erased, the session will be erased (to prevent error)
and the customer will be logged out.

Figure 56: Erasing a user

P a g e | 53
 2nd part – Erasing the cart: Before a cart can be erased, all of the items inside of it must be
deleted before the cart itself can be erased. It will call the deleteAllItem() to erase all item in
the cart before erasing itself.

Figure 57: Erasing cart

 3rd part – Erasing all item in the cart: The cart will give the deleteAllItem() function the
necessary cartID to erase all item within the cart.

Figure 58: Erasing item in the cart

3. GitHub Repository

P a g e | 54
 Figure 59: GitHub

GitHub can be understood as a service that allows their customers to store and manage their data
through the cloud (Kinsta, 2022).
There are many benefits to using GitHub (Kinsta, 20220):

 Allows multiple individuals to work together in a cooperative way.

 Allows version controls to keep track of every step of the process.

 Allows users to roll back changes to the code base system.

 The service is free to the public.

This service is favored by many people because it allows collaboration. Every collaborator in the
project can work in the project at the same without having to worry much about conflict between
different version

Link to GitHub for this project: https://github.com/SamaelPaxton/WebProject.git

The project inside of GitHub:

P a g e | 55
 Figure 60: Project is uploaded and stored on GitHub

P a g e | 56
 Chapter 6:
Conclusion

1. What went well.

 The creation of the database was quick and created not much trouble.
 Designing website templates went rather smoothly.
 The creation of diagrams was easy.
 Everybody collaborated well.
 The creation of functions went rather smoothly.
 The project is completed with full satisfaction.
2. What did not go well.
 There was no central repository where everybody can collaborate causing confusion
and frustration when merging everybody codes together.
 The team was quite new to PHP and the Laravel framework causing delays and
frustration.
 The Laravel framework caused some troubles with how the database’s tables were
name.
 Oversight regarding the inputs of data into database causing us to modify the existing
tables.
 The team intended to implement API for login using social medias but was not
achievable due to many reasons.
3. Lessons learned and further improvements
 A central repository is needed above all else at the start of the project to ensure the full
utilization of collaboration.

 The team should put more thoughts into planning the project to reduce the number of
oversights and risks that we may encounter.

P a g e | 57
 REFERENCES
1. Prabhu, J (2019). MVC Architecture & Its Benefits in Web Application. [online] Available at:
https://techaffinity.com/blog/mvc-architecture-benefits-of-mvc/ [Accessed: 12/08/2022].

2. Martin, M (2022). MVC Framework. [online] Available at: https://www.guru99.com/mvc-

tutorial.html [Accessed: 12/08/2022].

3. Javapoint. SDLC Models. [online] Available at: https://www.javatpoint.com/software-

engineering-sdlc-models [Accessed: 10/08/2022].

4. Brotherton, C (2022). The Most Popular PHP Frameworks to Use in 2022. [online] Available at:
https://kinsta.com/blog/php-frameworks/ [Accessed: 11/08/2022].

5. McLean, M (2017). 8 Advantages of Using MySQL. [online] Available at: https://devops.com/8-

advantages-using-mysql/ [Accessed: 11/08/2022].

6. Moore, L (2018). MySQL. [online] Available at:

https://www.techtarget.com/searchoracle/definition/MySQL [Accessed: 11/08/2022].

7. Kinsta (2022). What Is GitHub? A Beginner’s Introduction to GitHub. [online] Available at:
https://kinsta.com/knowledgebase/what-is-github/ [Accessed: 14/08/2022].

8. Interviewbit (2022). Iterative Model – Software Engineering. [online] Available at:

https://www.interviewbit.com/blog/iterative-model/ [Accessed: 10/08/2022].

9. GeeksForGeeks (2022). Software Engineering | Agile Development Models. [online] Available

at: https://www.geeksforgeeks.org/software-engineering-agile-development-models/ [Accessed:
10/08/2022].

10. Martin, M (2022). Prototyping Model in Software Engineering: Methodology, Process,

Approach. [online] Available at: https://www.guru99.com/software-engineering-prototyping-
model.html [Accessed: 10/08/2022].

11. Martin, M (2022). SDLC (Software Development Life Cycle): What is, Phases & Models. [online]
Available at: https://www.guru99.com/software-development-life-cycle-tutorial.html
[Accessed: 10/08/2022].

12. Daly, N (2022). What Is A Use Case? [online] Available at: https://www.wrike.com/blog/what-
P a g e | 58
 is-a-use-case/ [Accessed: 13/08/2022].

13. Martin, M (2022). What is Waterfall Model in SDLC? Advantages and Disadvantages. [online]
Available at: https://www.guru99.com/what-is-sdlc-or-waterfall-model.html [Accessed:
15/08/2022].

14. Latitude Technolab (2021). Pros and Cons of Laravel PHP Framework 2021. [online] Available
at: https://latitudetechnolabs.medium.com/pros-and-cons-of-laravel-php-framework-2021-
e2027e22f2b8 [Accessed: 15/08/2022].

P a g e | 59