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 A.

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 FRONT SHEET

Qualification BTEC Level 5 HND Diploma in Computing

Unit number and title WEBG301: WEB Project

Submission date Aug 15th, 2022 Date Received 1st submission

Re-submission Date Date Received 2nd submission

Student Name

1 Nguyen Gia Huy

2 Tran Nhat Minh

3 Huynh Tran Anh Khoa

 Summative Feedback:  Resubmission Feedback:

Grade: Assessor Signature: Date:

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

Chapter 4: Design 1

1 Site map 1

2 Database design 1

2.1 Database diagram 1

2.2 Data dictionary 2

3 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

2.1 View 19

2.2 Model 20

2.3 Controller 21

3 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?

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

The Waterfall Paradigm is a sequential model for software development that separates it into defined 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

pre-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

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

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

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

• The model, controller, and views may all

be worked on concurrently by many

developers

• MVC enables the logical grouping of

related controller operations

Additionally, views for certain models are

• Models may view things from different

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

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

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

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

functions, clients or application programs can communicate with the database server (MySQL)

6 Techniques and Tools

Database management virtual machine

VS CODE Write the source code of the system

WebPHP Font-end design for the system

PHPstorm Write the source code of the database

MySQL

WorkbenGitHubch

Write the source code of the database Share code, exchange to find programming direction HTML 5

Technique

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

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,

Chapter 3: Requirements Analysis

1 User’s requirements

Non-functional

Customer or Admin Roles

Explanation

I want to use a website that has an

appealing appearance and feel since I

am a consumer The website's text,

graphics, and other content should all

be understandable and crystal clear

Non-functional Customer

Roles

This is really significant since it affects how website users feel about their experiences A website that is appealing, accessible, intuitive, and easy to use may improve user experience and draw in more visitors

I want my program to encrypt the login

credentials when a new user is created

as the operation manager in order to

protect everyone's information

Non-functional Admin Roles This feature is a crucial development for cyber security The encrypted

data would shield the system against brute force attacks for hundreds of years if a hacker managed to sneak past the firewall and gain access

If I request a purchase as a customer, I

want the website to take me to the login

Non-functional Customer

Roles

Each shopping cart has a specific customer profile attached to it Therefore, the user must first log in with a customer account before

request page if I'm not currently signed

in and directly to the checkout page if I

am

Non-functional adding an item to the cart The user should visit the checkout page after

signing in, and the checkout page should update the basket that the user has added the appropriate goods to

I want to be a customer; hence I want

the website to accept payments in a

variety of ways, such COD, credit card,

debit card, or e-wallet

Non-functional Customer

Roles

To guarantee that it is accessible to as many clients as possible, the website must be updated with a choice of payment options Payment information has to be updated because each client uses a different payment method depending on their demands on their own profile and require extreme security

As a consumer, I want a receipt to be

generated based on the items in my cart

and the details in my account when I

click the "Checkout" button

Non-functional Customer

Roles

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

When I sign up for a new account, as a

customer, I want to be able to access it

I want to be able to run "Controller" on

different database data without having

Functional 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

administrator

for programming knowledge and run the risk of a human error 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

and logout button so that as an admin, I

can't access it without logging in

Functional Admin Roles This feature would make it easier for administrators to access the

administrative features from the homepage

In addition to the delete, update, insert,

and choose options, I as an admin also

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

Functional Admin Roles This feature aids the administrator in conducting thorough administration

of the user interface and product information

I want some information about a

product to show when my mouse is over

an image of it

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

products; adding this feature would allow users to learn more about the products without overcrowding the page with text and detracting from the website's aesthetics

2 Use case diagram

2.1 Use case

2.2 Use Case specification

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

● 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

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

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

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

● 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

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

● 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

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

● When completing this function, the user's device must be connected to the internet

Post-Condition: The user successfully clicks "Cart" on the navigation bar This function page is

redirected by the system

Basic Flow:

● The user navigates to the "Cart" function page

● The "Cart" page allows users to examine information and product quantities

● Users can access the application through the system

Exception: When the user picks the cancel instruction and then "Cart," the Use Case is terminated

2.2.6 UC-6

Use case Decription: Before placing a purchase, consumers may verify the product, the quantity of the

product, the total price they must pay, and the discount code on this page

Actor: User

Trigger:

Type:

Pre-Condition:

● On the navigation bar, the user selects "Checkout."

● To be able to deploy the functionality, a previously specified product must be used

● When completing this function, the user's device must be connected to the internet

Post-Condition: The user successfully clicks "About us" on the navigation bar This function page is

redirected by the system

Basic Flow:

● The user navigates to the "Checkout" function page

● At the Checkout page, enter the user's personal information such as Mail, Name, and Address, etc

● Users verify the amount, price, discount code on the "Checkout" page

● Users can access the application through the system

Exception: When the user picks the cancel instruction and then "Checkout," the Use Case is terminated