WEBG301 GCS190905 huynh trần anh khoa assignment

Higher Nationals in Computing

WEBG301: WEB Project
ASSIGNMENT

Name: Huỳnh Trần Anh Khoa
ID: GCS200252
Class: GCS0905C
Subject code: WEBG301
Assessor name: PHAN MINH TAM

Assignment due:

Assignment submitted:


ASSIGNMENT FRONT SHEET
Qualification

BTEC Level 5 HND Diploma in Computing

Unit number and title

WEBG301: WEB Project

Submission date

Aug 15th, 2022

Re-submission Date

Date Received 1st submission
Date Received 2nd submission

1. Nguyen Gia Huy

1. GCS200801

2. Tran Nhat Minh
Student Name

2. GCS190905
Student ID

3.

3. GCS200252

Huynh Tran Anh Khoa

4. GCS200396

4. Nguyen Phu Quang
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

HUY


 Summative Feedback:

Grade:
Signature & Date:

 Resubmission Feedback:

Assessor Signature:

Date:


Table of Contents
WEBG301: WEB Project ASSIGNMENT ................................................................................................ 1
Chapter 1: Introduction .............................................................................................................................. 1
1.

Background information .............................................................................................................. 1

2.

Project aim and objectives ............................................................................................................ 1

Chapter 2: Literature Review ..................................................................................................................... 2
1.

Introduction ................................................................................................................................... 2

2.

SDLC model ................................................................................................................................... 2
2.1.

Introduction to SDLC. ........................................................................................................... 2

2.2.

Type of SDLC ......................................................................................................................... 2

2.3.

SDCL applied in the project ................................................................................................. 5

3.

MVC architecture ......................................................................................................................... 5

4.

PHP Frameworks .......................................................................................................................... 7
4.1.

What is PHP Framework? .................................................................................................... 7

4.2.

Why use a PHP Framework?............................................................................................... 7

4.3.

Common PHP Frameworks .................................................................................................. 8

4.4.

PHP Framework is used in the project ................................................................................ 9

5.

Database ......................................................................................................................................... 9

6.

Techniques and Tools ................................................................................................................. 11

Chapter 3: Requirements Analysis ............................................................................................................. 1
1.

User’s requirements ...................................................................................................................... 1

2.

Use case diagram ........................................................................................................................... 1

2.1.

Use case ....................................................................................................................................... 1

2.2.

Use Case specification ............................................................................................................... 1

3.

Gantt chart ..................................................................................................................................... 1


Chapter 4: Design ....................................................................................................................................... 1
1.

Site map .......................................................................................................................................... 1

2.

Database design ............................................................................................................................. 1

3.

2.1.

Database diagram .................................................................................................................. 1

2.2.

Data dictionary ....................................................................................................................... 2

WireFrame design ......................................................................................................................... 5
3.1. User interface ............................................................................................................................. 5
3.2. Admin interface .......................................................................................................................... 7

Chapter 5: Implementation ....................................................................................................................... 11
1.

Application screenshots .............................................................................................................. 11

2.

Sample source code ..................................................................................................................... 19

3.

2.1.

View ....................................................................................................................................... 19

2.2.

Model ..................................................................................................................................... 20

2.3.

Controller.............................................................................................................................. 21

GitHub Repository ...................................................................................................................... 23

Chapter 6: Conclusion .............................................................................................................................. 24
1.

What went well. ........................................................................................................................... 24

2.

What did not go well? ................................................................................................................. 25

3.

Lessons learned and further improvements ............................................................................. 25

REFERENCES ......................................................................................................................................... 26


Chapter 1: Introduction
1. Background information
Our four-person team was given a job involving web design by the lecturer. We agreed on a topic for
"MotoBike-Shop" following a meeting and debate as a group. Following considerable deliberation, we
determined that our website would sell and showcase home furnishings-related goods.
Our website is a furniture sale and showcasing website. Customers may now buy furniture online thanks

to this technology. The system provides customers with complete product details, including the maker,
brand, and cost. Users of the system must register by providing personal data. After signing up, the user
may use the system by logging in with his username and password. The customer may select a product
and put it in their shopping basket. Payments can be made by users with a Visa card, cash, or an electronic
wallet, for instance. Users may locate furniture based on each company's collections, and they may learn
more about the subject of furniture through the "Blog." To reply to client queries, we have a separate page
that provides our contact information. To attract customers, we also provide certain special coupons.
When a customer makes a purchase, they may also track the status of their order and the delivery fee.
Graphical user interface that works well. Users may check the features of each product and compare them
to choose a better product.
2. Project aim and objectives
The primary purpose of the project is to develop a software package that allows the sale and
administration of home furnishings items. This has been divided into six major objectives, which are as
follows:
•

Allows companies to show and sell furniture-related items.

The system's implementation.
•

Manage product details such as brand, quantity, and status...

•

Product data statistical analysis

•

Order management

•

Evaluate the new system's performance. Does it offer a better purchasing and order management
experience?

Page |1


Chapter 2: Literature Review
1. Introduction
There are several software lifecycle development models available today, with three typical SDLC
techniques being the waterfall methodology, iterative development, and component-based software
engineering. In this study, our team will explain the techniques as well as discuss some of the reasons
for their creation.

2. SDLC model
2.1.

Introduction to SDLC.

The Software Development Life Cycle (SDLC) model is a conceptual framework for project management
that delineates each stage of a software development project, from planning to maintenance. This
process is tied to several models, each of which includes a variety of duties and actions.
It typically consists of six steps: ideation and planning, requirements collecting, design and prototyping,
software development, testing and integration, implementation and deployment, and operation and
maintenance.
Depending on the size of the project, some project managers may combine, divide, or omit processes.

2.2.

Type of SDLC

2.2.1. Waterfall Model
Page |2


The Waterfall Paradigm is a sequential model for software development that separates it into predefined phases. Each phase must be completed before moving on to the next, with no gaps between
them. Each phase is meant to accomplish a particular activity during the SDLC phase. Winston Royce
first debuted it in 1970.

2.2.2. Agile model
The agile SDLC model is a combination of iterative and incremental processes focusly on
customer satisfaction by rapidly delivering a working software product. In this model, every
process are being cut down to small builds.
Cross-functional teams are required to be working simultaneously on various areas such as:
Planning, analysis, design, coding, unit, and acceptance testing. At the end of the process, a
working product will be displayed to the customer and stakeholders

Page |3


2.2.3. Spiral
The Spiral Model is a risk-based approach to software development. It is a hybrid of the waterfall and
iterative approaches. The Spiral Model assists in adopting software development aspects from several
process models for software projects based on unique risk patterns, resulting in an efficient
development process.
In the SDLC Spiral model, the development process begins with a limited set of requirements and
progresses through each development phase for those needs. Until the program is ready for
production, the software engineering team adds functionality for the new demand in ever-increasing

spirals. Spiral Model is illustrated in the diagram below:

Page |4


2.2.4. Prototyping model

The Prototyping Model is one of the most popularly used Software Development Life Cycle
Models (SDLC models). This model is used when the customers do not know the exact project
requirements beforehand. In this model, a prototype of the end product is first developed,
tested and refined as per customer feedback repeatedly till a final acceptable prototype is
achieved which forms the basis for developing the final product.

2.3.

SDCL applied in the project

Our team chose to use the waterfall mode because this is a small project with few complicated
functions.
The reason why our team chose this model is that:
• This model is appropriate for a small group of individuals.
• Easily collects, records, and organizes work.
• Easily creates shared goals for the planning and documentation stages.
•Timelines and deadlines that are clearly stated.

3. MVC architecture
A data model, presentation information, and control information are required for an
application to follow the Model View Controller (MVC) architectural pattern. Each of them
must be separated into separate things in accordance with the pattern.
MVC is more of an architectural pattern than a complete program. The UI/interaction layer of

an application is a key focus of MVC. You will still require a business logic layer, maybe a
service layer, and a data access layer.

Page |5


Model: The component that represents all the data-related logic that a user interacts with is called the
model. This might be supplementary data relating to business logic or the data being communicated
between the View and Controller components. For instance, a customer object will retrieve customer
information from a database, modify it, and either use it to render data or return it to the database.
View: The application's UI logic is handled by the View component. For instance, the Customer view will
have all of the UI elements, such as text boxes, dropdowns, and other controls, that the end user
interacts with.
Controllers: Operate as a bridge between the Model and View components, handling all business logic
and incoming requests, altering data using the Model, and interacting with the Views to generate the
result. The customer model is used to update the database, and the customer controller, for instance,
will manage all interactions and inputs from the customer view. Using the same controller, the customer
data will be shown.
Advantages
•

•

Disadvantages

The model, controller, and views may all

•

Framework navigation may be difficult

be worked on concurrently by many

since it provides new layers of

developers.

abstraction and requires users to follow

MVC enables the logical grouping of

MVC decomposition standards.
•

related controller operations.

It's becoming standard practice to

Additionally, views for certain models are

understand different technologies. MVC

organized.

developers need to be skilled in several
different technologies.
Page |6


•

Models may view things from different
angles.

4. PHP Frameworks
4.1.

What is PHP Framework?

A platform for developing PHP web applications is known as a PHP framework. PHP frameworks offer
libraries for frequently used functions, minimizing the amount of original code that programmers must
write from scratch.
A PHP framework serves as the fundamental building block for creating PHP web applications.
Frameworks are helpful because they quicken and standardize the application development process,
which reduces confusion about where to start.

4.2.

Why use a PHP Framework?

✓ PHP frameworks have a number of benefits over starting from scratch, including:
✓ Faster development - Because of the pre-existing libraries and tools, development is completed
much more quickly.
✓ Better performance - PHP frameworks help enterprises achieve their performance needs since
Page |7


they are carefully tested for quality and performance.
✓ Less code is needed - When framework functions are utilized, writing original code is not as
necessary.

✓ Libraries for common activities - Creating applications involves many repeated procedures, such
as data cleaning, validation, and CRUD operations. Frameworks make it possible to carry out
these simple actions by using built-in functionalities.
✓ Following best practices - PHP frameworks frequently follow best practices, such as adopting
correct naming conventions and arranging code in a neat and manageable way.
✓ More secure – Using PHP frameworks lowers the risk of threats like SQL injection and cross-site
scripting. In excellent PHP frameworks, built-in precautions defend against such common
dangers.
✓ Collaboration is possible because using frameworks creates clear project guidelines that are
simple for developers to adopt and collaborate on.
✓ Better maintainability: PHP frameworks help to create leaner, more maintainable code bases.
The framework's designers are also in charge of maintaining the main framework.
4.3.

Common PHP Frameworks

In order of popularity and capability to enable speedy application development, the following are
some of the top PHP frameworks:
1. Laravel
2. Symfony
3. CodeIgniter
4. Zend Framework / Laminas Project
5. Yii (Framework)
6. CakePHP

Page |8


7. Slim
8. Phalcon

9. FuelPHP
10. Fat-Free Framework

4.4.

PHP Framework is used in the project

For this project, our group decided to build the system using the Laravel framework. I selected Laravel
since it is the most well-liked free and open-source PHP framework:
•

Compared to other frameworks, it can securely and quickly manage complex applications.

•

Laravel includes several features that make it easier to configure and customize complex
applications, including support for the MVC architectural style, authentication, authorization,
encryption, hashing, password reset, data transfer, and many others.

•

The characteristics that make Laravel fast and secure are well recognized. Additionally, it is
extremely versatile and changes to reflect the most recent developments in web development.

5. Database

Page |9


Our group decided to build the system's database using MySQL for this project. The major reason I

went with MySQL is that it's an RDBMS (relational database management system), which means that
data is stored and displayed in the form of tables with rows and columns.
•

Because MySQL passwords are encrypted and it includes a robust data security layer to protect
sensitive data from hackers, it is more secure than other databases.

•

The MySQL website offers free download and usage of MySQL.

•

The great majority of operating systems, including Windows, Linux, NetWare, Novell, Solaris,
and other UNIX variants, are compatible with MySQL.

•

With MySQL, clients and servers can run on the same system or on other ones that are
connected through a local area network or the internet.

•

The distinctive storage engine design of MySQL makes it more efficient, affordable, and
trustworthy.

•

Views, triggers, and stored procedures are three tools that MySQL uses to boost developer
productivity.

•

MySQL is quite simple and easy to use. You can build and work with MySQL with just a basic
grasp of MySQL and a few straightforward SQL queries.

•

The client-server architecture underlies MySQL. To query data, save changes, and other
P a g e | 10


functions, clients or application programs can communicate with the database server (MySQL).
6. Techniques and Tools
Name

Tool or

used to

Techniques
XAMPP

Database management virtual machine

VS CODE

Write the source code of the system.

WebPHP

Font-end design for the system
Tool

PHPstorm

Write the source code of the database

MySQL

Write the source code of the database

WorkbenGitHubch

Share code, exchange to find programming direction

HTML 5

Programming languages used to design interfaces

CSS

Programming languages used to design interfaces

PHP

The programming language used to write the source code
for the features in the system

JavaScript

The programming language used to write the source code
Technique

for the features in the system

Laravel

Framework for programming support

Ajax

The programming language used to write the source code
for the features in the system to store the session

Bootstrap

Align your website to be compatible with different devices
such as smartphones, tablets,...

P a g e | 11


Chapter 3: Requirements Analysis

1. User’s requirements
User Story

Functional

or Customer or Explanation

Non-functional Admin Roles
I want to use a website that has an Non-functional Customer

This is really significant since it affects how website users feel about their

appealing appearance and feel since I

experiences. A website that is appealing, accessible, intuitive, and easy to

Roles

am a consumer. The website's text,

use may improve user experience and draw in more visitors.

graphics, and other content should all
be understandable and crystal clear.
I want my program to encrypt the login Non-functional Admin Roles

This feature is a crucial development for cyber security. The encrypted

credentials when a new user is created

data would shield the system against brute force attacks for hundreds of

as the operation manager in order to

years if a hacker managed to sneak past the firewall and gain access.

protect everyone's information.
If I request a purchase as a customer, I Non-functional Customer

Each shopping cart has a specific customer profile attached to it.

want the website to take me to the login

Therefore, the user must first log in with a customer account before

Page |1

Roles


request page if I'm not currently signed Non-functional

adding an item to the cart. The user should visit the checkout page after

in and directly to the checkout page if I

signing in, and the checkout page should update the basket that the user

am.

has added the appropriate goods to.

I want to be a customer; hence I want Non-functional Customer

To guarantee that it is accessible to as many clients as possible, the

the website to accept payments in a

website must be updated with a choice of payment options. Payment

Roles

variety of ways, such COD, credit card,

information has to be updated because each client uses a different

debit card, or e-wallet.

payment method depending on their demands. on their own profile and
require extreme security.

As a consumer, I want a receipt to be Non-functional Customer

This feature is a need for the website since it brings in money for the online

generated based on the items in my cart

Roles

store.

When I sign up for a new account, as a Functional

Customer

Instead of making the user waste time by visiting the login page and

customer, I want to be able to access it

Roles

inputting their information again, this feature improves their interaction

and the details in my account when I
click the "Checkout" button.

right away.

with the system.

I want to be able to run "Controller" on Functional
different database data without having

Page |2

Admin Roles

Administrators who are not programmers may now modify data on the
system without having to deal directly with the database, which would call


to interact with it directly as a system

for programming knowledge and run the risk of a human error.

administrator.

Additionally, incorporating "Controller" sites with UI makes it easier for
the administrator to complete the task while using them.

I want the admin page to have a login Functional

Admin Roles

and logout button so that as an admin, I

This feature would make it easier for administrators to access the
administrative features from the homepage.

can't access it without logging in.
In addition to the delete, update, insert, Functional

Admin Roles

and choose options, I as an admin also

This feature aids the administrator in conducting thorough administration
of the user interface and product information.

want the administration page. If the
admin chooses not to display items in
the user interface, I also want options
that will prevent categories, brands,
suppliers, or products from appearing.
I want some information about a Functional

Admin Roles

The product index page's list of items would only include images of the

product to show when my mouse is over

products; adding this feature would allow users to learn more about the

an image of it.

products without overcrowding the page with text and detracting from the
website's aesthetics.

Page |3


2. Use case diagram
2.1.

Use case

2.2.

Use Case specification

Page |1


2.2.1. UC-1

User case name: User Sign up

ID: UC-1

Priority: High

The use case description is as follows: the user want to log into the system in order to access particular
features.
Actor: User
Trigger: The user intends to access the Home Furniture website.
Type:

Pre-Condition:
● Users who already have an account or who have recently joined for one
● Account holders have been granted access.
● When login in, the device user is already connected to the internet.
Normal Course:
● Users have access to Home Furniture.
● For their Home Furniture account, users choose a login method.
● The user accesses the Home Furniture account and selects the login command.
● The login information is successfully authenticated by the system, and the user is granted access
to the program.
● The system records successful logging in the Activity Log.

Page |2


Post- Condition:
● The user has successfully signed into the app.

● In the Activity Log, the system notes successful logging.
Exception:
● The system issues a warning after failing to confirm the login information.
● When a user chooses to cancel his or her login, the Use Case is terminated.
● To get the password, the user picks a command. Continue with Case
● Use Case continues when the user selects the account lock command.

2.2.2. UC-2
Use Case Name: About Us

ID: UC 2

Priority: High

Use Case Description: They want to be able to receive additional contact information from Home
Furniture for personal reasons, such as establishing a long-term purchase contract or purchasing a
significant number of piglets.
Actor: UserID
Trigger:
Type:

Pre-Condition:
● The user selects "About Us" from the navigation bar.
● Admin has given the system information about the shop.
● When signing in, the user's device is connected to the internet.
Page |3


Normal Course:
● The user navigates to the "About Us" function page.

● On the "About Us" page, users may find contact information.
● Users can utilize the system to access the application.
Post-Condition: The user successfully clicks "About us" on the navigation bar. This function page is
redirected by the system.
Exception: When the user picks the cancel instruction and then "About us," the Use Case is
terminated.
2.2.3. UC-3
User case name: Blog

ID: UC-3

Priority: High

Use Case Decription: As users, they want to learn more about the various types of furniture before making
a purchase decision or for personal reasons such as signing a long-term purchase contract or purchasing in
bulk.
Actor: User
Trigger:
Type:

Pre-Condition:
● The user selects "Blog" from the navigation bar.
● The system's product articles have been modified by admin.

Page |4


● When completing this function, the user's device must be connected to the internet.
Post-Condition: The user successfully clicks "Blog" on the navigation bar. This function page is redirected by
the system.

Basic Flow:
● The user navigates to the "Blog" functionality page.
● The "Blog" website allows users to read articles regarding the store's interior.
● Users can access the application through the system.
Exception: When the user picks the cancel command and then "Blog," Use Case is terminated.

2.2.4. UC-4
User case name: Detail

ID: UC-4

Priority: High

Use Case Decription: When consumers wish to look for information about furniture goods such as size,
price, features, and so on.
Actor: User
Trigger:
Type:

Pre-Condition:
● The user selects "Detail" from the photo of the furniture item.
● About the system, Admin has supplied thorough information on furniture goods.
Page |5


● When completing this function, the user's device must be connected to the internet.
Post-Condition: The user successfully clicks "Detail" on the navigation bar. This function page is
redirected by the system.
Basic Flow:
● The user navigates to the "Detail" page.

● On the "Detail" page, users may view specific information on furniture goods.
● Users can access the application through the system.
Exception:

2.2.5. UC-5
User case name: Cart

ID: UC-5

Priotity: High

Use Case Decription: When a user wishes to serve personal objectives, such as double-checking the
items and the amount of products presently in the basket before ordering things, this function is
employed.
Actor: User
Triggers:
Type:

Pre-Condition:
● The user selects "Cart" from the navigation bar.
Page |6