GROUP PROJECT

Qualification BTEC Level 5 HND Diploma in Computing

Unit number and title Semi Project

Submission date 20/04/2022 Date Received 1st submission

Re-submission Date Date Received 2nd submission

Quach Cong Tuan BHAF200014

Student Name Tran Anh Van Student ID BHAF200011

Pham Van Long BHAF200054

Class PBIT17101 Assessor name Ngo Thi Mai Loan

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 Quach Cong Tuan

Grade
❒ Summative Feedback: ❒ Resubmission Feedback:

Grade: Assessor Signature: Date:

Signature & Date:

2|Pag e
 TABLE OF CONTENTS
I. User Requirements ............................................................................................................................ 5
1. Functional and Non-Functional Requirements ............................................................................... 5
1.1. Functional Requirements ....................................................................................................... 5
1.2. Non-Functional Requirements ................................................................................................... 6
4.1. Operational ................................................................................................................................. 6
4.2. Performance ............................................................................................................................... 6
4.3. Security ....................................................................................................................................... 6
4.4. Political Culture ........................................................................................................................... 6
2. Use-Case diagram .......................................................................................................................... 7
3. Use case description ...................................................................................................................... 9
II. System Designs ................................................................................................................................ 15
1. Sitemap ........................................................................................................................................ 15
2. Entity Relationship Diagram (ERD) ............................................................................................... 15
2.1. ERD Documentation ............................................................................................................. 16
III. Implementation ........................................................................................................................... 19
1. Sample Source Code .................................................................................................................... 19
1.1. Project structure .................................................................................................................. 19
1.2. Project elements .................................................................................................................. 20
2. Web Screenshot ........................................................................................................................... 27
IV. Conclusion ................................................................................................................................... 32
1. Advantages of the website ........................................................................................................... 32
2. Disadvantages of the website ...................................................................................................... 32
3. Lesson Learnt ............................................................................................................................... 32
4. Future improvement .................................................................................................................... 33
V. Appendix.......................................................................................................................................... 33
1. Group member list ....................................................................................................................... 33
2. Task.............................................................................................................................................. 33
3. Link to GitHub .............................................................................................................................. 34

3|Pag e
 TABLE OF FIGURES
Figure 1 Project Structure: LARAVEL ........................................................................................................ 19
Figure 2 Model: Bill ................................................................................................................................. 20
Figure 3 Model: Cart ............................................................................................................................... 21
Figure 11 Controller: AdminController ................................................................................................... 22
Figure 14 Controller: loginController...................................................................................................... 23
Figure 16 Controller: Product-1 ............................................................................................................... 24
Figure 19 View: Login............................................................................................................................... 25
Figure 20 Route ....................................................................................................................................... 26
Figure 21 Web-Screenshot: Homepage (Index) ....................................................................................... 27
Figure 22 Web-Screenshot: Login ............................................................................................................ 27
Figure 23 Web-Screenshot: Signup .......................................................................................................... 28
Figure 24 Web-Screenshot: News ............................................................................................................ 28
Figure 25 Web-Screenshot: Product ........................................................................................................ 29
Figure 26 Web-Screenshot: Product Detail .............................................................................................. 29
Figure 27 Web-Screenshot: Cart .............................................................................................................. 30
Figure 28 Web-Screenshot: Admin | Dashboard ...................................................................................... 30
Figure 29 Web-Screenshot: Admin | User ............................................................................................... 31
Figure 30 Web-Screenshot: Admin | Product .......................................................................................... 31

4|Pag e
I. User Requirements
1. Functional and Non-Functional Requirements
1.1. Functional Requirements
1.1.1. An Administrator’s role
- Can login to the system through the first page of the application
- Can create/edit/delete new user account
- Can create/update/delete products
- Can create/update/delete category
- Order management
- Order fulfillment process
- Revenue statistics

1.1.2. A Guest (Not Registered on the Website)

- Can Create an account
- Soft by
- Can view products
- Can search products
- Can browse products

1.1.3. A Member (Registered on the Website)

- Can login
- Can logout
- Soft by
- Apply discount code
- Can view products
- Can search products
- Can browse products
- Add to cart
- Check-out and Payment
- Orders are allowed

5|Pag e
 1.2. Non-Functional Requirements
4.1. Operational
Users can use it directly on browsers such as Google Chrome/Firefox/Microsoft Edge/Coc Coc/.... The
platforms are usable on Windows, MacOS, Kali and even Android and IOS can be used as long as the
devices are connected to the internet and have a browser. The screen will display in sizes with large -
medium and small sizes to fit any device. The system is built on PHP platform and MySQL database. Only
Website.

 Google Chrome / Firefox / Microsoft Edge /…

 MacOS / Android / Window / …

4.2. Performance
Capacity: 1000 People accessing at the same time

Allows users to connect, access the website with 1000 at the same time. Up to 1ms latency, performance
will be optimized to bring the smoothest possible experience to the user.

4.3. Security
The system will be firewalled through the cloud by Cloudflare and can use HTTPS/SSH and MFA security
styles for authentication. In this website platform, all user information will be completely secure and
encrypted. To ensure that the system does not experience security problems, the entire system will be
continuously updated once a week at 02:00 - 04:00. During the update period, users can still access
products normally but cannot pay for orders.

 HTTPS/SSH
 MFA
 Cloudflare

4.4. Political Culture

The system will use the main language is English. However, there will be a foundation to help the
translation system into Vietnamese.

 Currency used: Vietnam Dong

 Payment: VISA/Momo/Mastercard (use QR Code)
 Website policies will be updated not based on sexist, racist rules.
 QUACH CONG TUAN – BHAF200014
 Color: #303030 - #ff5f17 - #f5f5f5
 Licensed trademarks: Local Brand

6|Pag e
2. Use-Case diagram

7|Pag e
8|Pag e
 3. Use case description
#UC01: Logout
Name Log out Code UC01
Description Allow the actor to logout the account from the system

Actor Admin/ Customer Trigger Actor presses log out button

Pre-condition Actor has successfully logged into the system.
Post condition Go to login page.

Activities
Actor System
Main Flow: Log out successfully
1 Actor clicks on Logout button on
profile management page
2 Confirm logout then go to the Log in page

System Message
MS02 “Are you sure you want to sign out of this device?” Message
when the actor clicks the Log out button.

9|Pag e
#UC02: Edit Account/Username
Name Edit Username/Account Code UC02

Description Allow the actor to edit the account (eg: username, ...)

Actor Admin/ Customer Trigger Actor presses done button

Pre-condition Actor has successfully edited the account

Post condition Go to admin manage user page.

Activities
Actor System
Main Flow: Edit User Successfully
1 Actor clicks on Logout button on
profile management page
2 Confirm logout then go to the Log in page

10 | P a g e
#UC03: Delete Account
Name Delete Account Code UC03
Description Allow actor to delete account
Actor Admin Trigger Actor presses Delete account
button
Pre-condition Actor has successfully deleted the system.
Post condition Go to admin manage user page.

Activities
Actor System
Main Flow: Delete account successfully
1 Actor clicks on the account

2 Switch to the account management page

3 Click delete account

4 Confirm password

5 Enter password

6 Confirm password and go to login page

System Message
MS02 “Are you sure you want to delete your account?” Message when the
actor clicks the Delete button

11 | P a g e
#UC04: View Products
Name View products Code UC04
Description Allow actor to view product details

Actor Admin/ Customer Trigger Actor clicks on the product

Pre-condition
Post condition Go to product detail page

Activities
Actor System
Main Flow: View product
1 Click on the homepage button

2 Load product on the shown product page

3 Click on the product you want to see

details
4 Load into product detail page

12 | P a g e
#UC05: View Product Detail
Name View Product Detail Code UC05
Description Allow the actor to view product detail on the system

Actor Admin/ Customer Trigger Actor presses buy now button

Pre-condition
Post condition Go to Product Detail pages

Activities
Actor System
Main Flow: View product detail
1 Actor clicks on product button in
product page
2 Load product detain on the shown product
detail page
3 Click on the button to add to cart

4 Load into cart page

13 | P a g e
#UC06: Create A Product
Name Create a product Code UC06
Description Allow the actor to create a new product

Actor Admin Trigger Actor presses Create button

Pre-condition Actor has successfully logged into the system.
Post condition Go to manage product page.

Activities
Actor System
Main Flow: Log out successfully
1 Actor clicks on manage product
button on admin page
2 Fill full information

3 Click on the button to create

4 Load into manage product page.

14 | P a g e
 II. System Designs
1. Sitemap
Link Sitemap: https://www.gloomaps.com/GeR2qNQxV9

2. Entity Relationship Diagram (ERD)

15 | P a g e
 2.1. ERD Documentation
2.1.1. Users

Field Name Data Type Constraint Explanation

Username Varchar(255) Primary Key An identification of a specific

user, account name of a user in
the system (can be used as an
alternate key)
Fullname Varchar(255) Not Null Full name of a user
Password Varchar(255) Not Null Password of a user account. It
is used with username to login
to the system
Email Varchar(255) Not Null Email of a user
Unique
PhoneNumber Varchar(255) Not Null Phone number of a user
Address Varchar(255) Not Null Address of a user
City Varchar(255) Not Null City of a user
Role Int Foreign Key Role of the account in system

2.1.2. Role

Field Name Data Type Constraint Explanation

RoleID Int Primary Key An identification of a specific

Auto Increment role
Role Varchar(255) Not Null Role name
Description Text Not Null Description for role

2.1.3. Category

Field Name Data Type Constraint Explanation

CategoryID Int Primary Key ID of category

Auto Increment
Category Varchar(255) Not Null Category name
Description Text Not Null Description for category

2.1.4. Color

Field Name Data Type Constraint Explanation

ColorID Int Primary Key ID of Color

16 | P a g e
 Auto Increment
Color Varchar(255) Not Null Color name
Description Text Not Null Description for color

2.1.5. Size

Field Name Data Type Constraint Explanation

SizeID Int Primary Key ID of size

Auto Increment
Size Varchar(255) Not Null Size name
Description Text Not Null Description for size

2.1.6. Product

Field Name Data Type Constraint Explanation

ProductID Int Primary Key ID of product

Auto Increment
ProductName Varchar(255) Not Null Product name
Price Int Not Null Price of product
Category Int Foreign Key Category of product
Color Int Foreign Key Color of product
Description Text Not Null Description for product
Images File Upload Not Null Images of product
Images2 File Upload Not Null Sub-Images of product
Images3 File Upload Not Null Sub-Images of product
Images4 File Upload Not Null Sub-Images of product
Images5 File Upload Not Null Sub-Images of product

2.1.7. Detail

Field Name Data Type Constraint Explanation

DetailID Int Primary Key ID of detail (table connect

Auto Increment between product and size)
ProductName Int Foreign Key ID product/ProductName
Size Int Foreign Key ID size/Size

2.1.8. Cart

Field Name Data Type Constraint Explanation

17 | P a g e
CartID Int Primary Key ID of detail (table connect
Auto Increment between username and detail)
Username Varchar(255) Foreign Key Username of user
DetailID Int Foreign Key DetailID of detail

18 | P a g e
 III. Implementation
1. Sample Source Code
1.1. Project structure
Because the project is implemented in Laravel framework, it follows the MVC model. The structure of
the project is:

Figure 1 Project Structure: LARAVEL

19 | P a g e
 1.2. Project elements
When using Laravel we need to pay attention to the main components when handling including Model,
Controller, View and Route. Below I will present all the ingredients we use:

1.2.1. Model

Figure 2 Model: Bill

20 | P a g e
Figure 3 Model: Cart

21 | P a g e
1.2.2. Controller

Figure 4 Controller: AdminController

22 | P a g e
Figure 5 Controller: loginController

23 | P a g e
Figure 6 Controller: Product-1

24 | P a g e
1.2.3. View

Figure 7 View: Login

25 | P a g e
1.2.4. Web

Figure 8 Route

26 | P a g e
2. Web Screenshot

Figure 9 Web-Screenshot: Homepage (Index)

Figure 10 Web-Screenshot: Login

27 | P a g e
Figure 11 Web-Screenshot: Signup

Figure 12 Web-Screenshot: News

28 | P a g e
 Figure 13 Web-Screenshot: Product

Figure 14 Web-Screenshot: Product Detail

29 | P a g e
 Figure 15 Web-Screenshot: Cart

Figure 16 Web-Screenshot: Admin | Dashboard

30 | P a g e
 Figure 17 Web-Screenshot: Admin | User

Figure 18 Web-Screenshot: Admin | Product

31 | P a g e
 IV. Conclusion
After implementing the software, we have critical reviewed about the final product for future
improvement. In the future, we will develop many other features that will make it easy for users to use
and have the best experience. Below I will present the advantages and disadvantages of the website we
have created.

1. Advantages of the website

The advantages of the web can be mentioned as the interface we use to display will help users easily
identify this is a brand related to the "Sneaker" product. Below I will list out some of the advantages of
the site as follows:

 With the Laravel programming language - we have saved a lot of time due to the same pure
PHP code as before. With the functions handled at the Controller and Model also helps the
code in my view files to be handled more neatly.
 When using the MVC model, the processing sequence is very clear, the separate tasks are also
handled independently and do not affect other members in the project. Simultaneously, it is
easy to control the flow of processing and applications.
 Our websites have been minimalistic and have the highest level of page performance and
smoothness. According to my statistics, I tested the page latency when switching between
subpages in the website reached the highest level with a delay of 1ms.

2. Disadvantages of the website

The disadvantage of the page has also affected a lot. Below I will clarify one by one:

 Security is the biggest problem we face. The data of the site can be easily attacked by XSS or
SQL Injection. Although we tried to encrypt the data, the website's security alert tool
continuously informed me of the risks we were facing.
 About Laravel this is one of the new languages that our members have to learn to be able to
do this project, this is one of the difficult ones for some of our team members, so the
cooperation and working together is very difficult.

3. Lesson Learnt
In this project, we also learned a lot of things going on in this real project:

 Laravel language is a new and quite popular language, which will give us some extra skills in
handling this language.
 We have understood more about the MVC pattern.
 When implementing the database, we have learned how to create tables and link
relationships between tables. These are also considered the most important steps, because
when the database goes wrong, we can face changing the entire code in the web.
 The design of UX / UI interface is important, it makes customers as well as users have the best
experience on the website. They will be delighted when all information, images, and designs
are presented according to their needs.

32 | P a g e
 4. Future improvement

V. Appendix
1. Group member list
No. Member Name Member ID Role
1 Quach Cong Tuan BHAF200014 Leader
2 Pham Van Long BHAF200011 Member
3 Tran Anh Van BHAF200054 Member

2. Task
No. Task Assign Task description
1 Front-End (Admin – Client) Quach Cong Tuan User interface design, complete
interface on Bootstrap platform,
combined with JavaScript and
HTML/CSS
2 Create a project on Laravel Quach Cong Tuan Create project in Laravel, crop pages,
split layout and configure route to
display to the user interface.
3 Create database on migration Quach Cong Tuan Initialize the database, connect on
with controller and models the .env file. Create relationships
between tables on models
configuring the data roles and
composition of each column.
4 Create controller in Tran Anh Van Connect front-end and back-end of
registration and login login and signup sections. Check the
successful account registration on
the database.
5 Manage News Tran Anh Van Create and connect information
from the admin side to the client
6 Manage Cart Pham Van Long Create and develop add to cart
functionality and connect to the
database.
7 Manage Order Pham Van Long Create and develop billing
functionality and connection to the
database.
8 Manage Product Quach Cong Tuan Create product management
functionality with CRUD operations.
Then connect to the database.
9 Manage User Quach Cong Tuan Create user management
functionality with CRUD operations.
Then connect to the database.
10 Handling decentralization, Quach Cong Tuan Handles user access rights, data
access, and saving of user's queries, and saves user sessions on
access rights the web while performing tasks.

33 | P a g e
 11 Deploy Heroku Quach Cong Tuan Perform database connections to
AWS and Heroku servers
Link: http://semi-
project.herokuapp.com/public/index

3. Link to GitHub
Link GitHub: https://github.com/Tunniez/BevisSneaker-Project.git or
https://github.com/Tunniez/BevisSneaker-Project

At branch Main: will only display and work with DATABASE.

At the Master branch: will be the main branch that includes all code data, source code.

34 | P a g e