INDIVIDUAL PROJECT FRONT SHEET

Qualification BTEC Level 5 HND Diploma in Computing

Unit number and title Project Web

Submission date Date Received 1st submission

Date Received 2nd

Re-submission Date
submission

Student Name NguyenVan Manh Student ID BHBF200048

Class BPIT17101 Assessor name Ngo Thị 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 Manh

1
❒ Summative Feedback: ❒ Resubmission Feedback:

Grade: Assessor Signature: Date:

2
Internal Verifier’s Comments:

Signature & Date:

Table of Contents
A. INTRODUCTION........................................................................................................................................................ 5
B. CONTENT................................................................................................................................................................. 6
I. Software requirements specification..................................................................................................................... 6
1. Function requirements............................................................................................................................................... 6
2. Non-functional requirements..................................................................................................................................... 6
3. Use case diagram........................................................................................................................................................ 7
4. Use case description................................................................................................................................................... 7
II. System design..................................................................................................................................................... 17
1. Sitemap..................................................................................................................................................................... 17

3
 2. Entity relationship diagram...................................................................................................................................... 18
3. Wireframes............................................................................................................................................................... 22
III. Implement.......................................................................................................................................................... 28
1. MVC in laravel........................................................................................................................................................... 28
2. Sampple source code................................................................................................................................................ 30
3. Web screenshorts..................................................................................................................................................... 52
IV. Conclusion........................................................................................................................................................... 60
1. Advantages of the website....................................................................................................................................... 61
2. Disadvantages of the website.................................................................................................................................. 61
3. Lesson learnt............................................................................................................................................................. 61
4. Future improvement................................................................................................................................................ 62
C. CONCLUSION.......................................................................................................................................................... 66

Figure 1: ERD Diagram............................................................................................................................................................................................... 20

Figure 2: wireframes- login page............................................................................................................................................................................... 23
Figure 3: wireframes- register page.......................................................................................................................................................................... 24
Figure 4: wireframes- home page............................................................................................................................................................................. 25
Figure 5: wireframes- detail page.............................................................................................................................................................................. 26
Figure 6:: wireframes- manage user page..................................................................................................................................................................27
Figure 7: wireframes- edit user page........................................................................................................................................................................ 28
Figure 8: MVC model................................................................................................................................................................................................. 30
Figure 9: Project structure:Laravel............................................................................................................................................................................. 32
Figure 10: Model- User.............................................................................................................................................................................................. 33
Figure 11: Model – Product....................................................................................................................................................................................... 35
4
Figure 12: Controller: Add, view User........................................................................................................................................................................ 36
Figure 13: Controller - edit, delete user..................................................................................................................................................................... 38
Figure 14: Controller - view hompage........................................................................................................................................................................ 39
Figure 15: Controller- view detail page...................................................................................................................................................................... 40
Figure 16: Controller - Login, Logout.......................................................................................................................................................................... 42
Figure 17: Controller - Register.................................................................................................................................................................................. 42
Figure 18: View - Index(1)......................................................................................................................................................................................... 43
Figure 19: View - Index(2).......................................................................................................................................................................................... 44
Figure 20: View - Detaill(1)......................................................................................................................................................................................... 45
Figure 21: View - Detail(2)......................................................................................................................................................................................... 46
Figure 22: View - Detail(3)......................................................................................................................................................................................... 47
Figure 23: View - manage User.................................................................................................................................................................................. 49
Figure 24: View – Add and edit user(1)...................................................................................................................................................................... 49
Figure 25: VIew – Add and edit user(2)...................................................................................................................................................................... 50
Figure 26: route......................................................................................................................................................................................................... 52
Figure 27: login screenshort...................................................................................................................................................................................... 53
Figure 28: login sceenshort........................................................................................................................................................................................ 54
Figure 29: homepage screenshort............................................................................................................................................................................. 56
Figure 30: detail screenshort..................................................................................................................................................................................... 58
Figure 31: manage user sreenshort........................................................................................................................................................................... 58
Figure 32: add user screenshort................................................................................................................................................................................ 59
Figure 33: edit user screenshort................................................................................................................................................................................ 60
Figure 34: commit github........................................................................................................................................................................................... 65

A. INTRODUCTION
In this article, our team develops a commerce website that sells all kinds of electronic components specifically
computer components. Our website is functional and developed under a php framework called Laravel.
5
B. CONTENT
I. Software requirements specification
1. Function requirements
In our project its functional requirements include:
Admin
 Can log into the system through the first page of the application
 Can manage user account (add, edit, delete)
 Can manage products (add, edit, delete)
 Can manage supplier (add, edit, delete)
 Can assign a role for users
User
 Can log in, log out to the system through the first page
 Can edit user’s own information, change password
 Can register for an account
 Can view products detail
 Can add products to the cart
 Can search for products
 Can leave feedback about the products
 Can chat with the admin
 Can make a wishlist
 Can buy products
2. Non-functional requirements
Performance
 Everyone in the world can access it
 Fast browsing time (2-5 seconds)
 1 million concurrent users
6
 Guard
 Feedback requires login
 Creating an account requires an email or phone number
Work
 Beautifully designed website
 Compatible on many devices (mobile phones, computers) and many operating systems (windows, linux)
3. Use case diagram
According to the user stories above, we have designed a use case diagram, thereby helping others better
visualize the system and the features to complete the system. The use case diagram is shown as follow:
4. Use case description

Number Code Name Description

1 UC01 Login Allow actors who have an account to access the system

2 UC02 Register Required actor’s information to create an account to access the system

3 UC03 Log out Stop accessing the system

4 UC04 Add user Add new users with their information provided

5 UC05 Edit user  Change the user’s information

6 UC06 Delete user Delete user’s account from the system

7
7 UC07 Add product Add new products with the provided information

8 UC08 Edit product Change the product’s information

9 UC09 Delete product Delete product from the system

10 UC10 Search product Allow actor to search for needed products with category or name

11 UC11 View product detail Allow actor to access more information of the product

12 UC12 Buy product Allow actors to make purchases for the needed products

13 UC13 Chat with admin Allow actor to chat with the administrator for more information

14 UC14 Make wishlist Allow actors to add products to a list that needed in the future

15 UC15 Feedback Allow actors to leave feedback about the product

UC01

Name Login Code UC01

8
 Description Allow actor to login to the system

Actor User/ admin Trigger Actor click button [Log in] on the main page

Pre-condition The actor has an account

Post condition Go to the homepage with the corresponding role

Actor System

Main Flow: Login successfully

1 From any screen, actor    

select login

    2 Load the login page

3 Enter required information    

4 Validation input information

9
 5 Edit (if a wrong password
or username).

6 Load the main page

Use Case #2

UC02

Name Register Code UC02

Description Actor provides information to create an account to access the system

Actor User/ admin Trigge Actor click button [Register] on the main page
r

Pre-condition

Post condition Register successfully

10
 Actor System

Main Flow: Register successfully

1 From any screen, actor select    

register

    2 Load the register page

3 Enter required information    

4 Validation input information

5 Edit (if a wrong password or

username).

6 Load the main page

Use Case #3

UC03

Name Log out Code UC03

11
 Description Stop accessing the system

Actor User/ admin Trigge Actor click button [Log out] on the main page
r

Pre-condition

Post condition User’s account has been logged out

Actor System

Main Flow: Log out successfully

1 From any screen, actor select Log    

out

    2 Load dialogue box “Are you sure you want

to log out?”

3 Actor click “Yes”    

12
 4 Load the main page
Use Case #4

UC04

Name Add user Code UC04

Description Add new users with their information provided

Actor Admin Trigger Actor click button [Add user] on the admin’s main page

Pre-condition Admin account log in successfully

Post condition User’s account has been created

Actor System

Main Flow: Add user successfully

1 From Admin’s main screen, actor select    

“Add user”
13
     2 Load “Add user” page

3 Actor insert required information of the    

user, then click [Create]

4 User account information has been

saved to database
Use Case #5

UC05

Name Edit Code UC05

user 

Description Edit existed user’s account information 

Actor Admin Trigger Actor click button [Edit user] on the admin’s managing page

Pre-condition Admin account login successfully

Post condition User’s account has been edited 

14
 Actor System

Main Flow: Edit user successfully

1 From Admin’s main screen, actor    

select “Edit user”

    2 Load “Edit user” page

3 Actor change required information of    

the user, then click [Save]

4 Edited infomation has been saved to

database
Use Case #6

UC06

Name Delete Code UC06

user 

Description Delete existed user’s account

Actor Admin Trigger Actor click button [Delete user] on the admin’s managing page
15
 Pre-condition Admin account login successfully

Post condition User’s account has been deleted

Actor System

Main Flow: Delete user successfully

1 From Admin’s main screen, actor    

select “Delete user”

    2 Load dialogue box “Do you want to

delete this user account?”

3 Actor click “Yes”    

4 User’s account information has been

removed from the database

II. System design

1. Sitemap

16
 Based on the user stories and use case diagram, we have designed a sitemap for both client and administrator
sites. The sitemap is shown as follow:
Components
Store

Login/
Register

Home
DashBoard(ad
page(custome
min)
r)

Manage Manage Manage

Manage user List product
product category supplier

CRUD
CRUD product CRUD supplier CRUD user Detail product
category

Cart

Our system, as shown in the sitemap, has two main user groups: administrators and clients.
All features are available to administrators.
Administrators can access all client and admin sites. Meanwhile, the clients have limited rights; they can only
access the websites of clients.
2. Entity relationship diagram
We have designed an Entity relationship diagram (ERD) based on the requirements as follow:
17
18
 Figure 1: ERD Diagram
This is the entity relationship diagram of our sales site system.
Our database design for the system has 7 tables including: User, Role, Oder, Cart, product, Category, supplier. In
the tables there are constraints and relationships as follows
 The relationship between the Role table and the User table is a One-to-many relationship because a role
has only one user but a user will have many roles.
 The relationship between the User table and the cart table is a one-to-many relationship because a user
has only one cart but one cart will contain many products of a single user.
 The relationship between the Cart table and the Order table is a one-to-many relationship. Because a
shopping cart can contain many products and many products can only be in one user's cart
 The relationship between the product table and the supplier table is a one-to-many relationship. Because
a product has only one supplier but a supplier has many product
 The relationship between the product table and the category table is a one-to-many relationship. Because
a product has only one category but a categoryhas many product
ERD documentation:
User

Field name Data type Constraint Explanation

userID int Primary key An identification of a
Auto increment specific user
userName Varchar(50) Not null Account name of a user
in the system
userEmail Varchar(50) Unique, not null Email of a user
userPassword Varchar(50) Not null Password of a user
account. It is used with
username to login to the
system
19
 userRole Varchar(50) Foreign key, notnull Role of the account in
the system
Product

Field name Data type Constraint Explanation

producID int Primary key,Auto ID of product
increment
ProductName Varchar(500) Not null Account name of a user
in the system
productDescription Varchar(1000) Unique, not null Email of a userv (can be
used as an alternate
key)
productPrice Varchar(50) Not null Password of a user
account. It is used with
username to login to
the
system
productImage Varchar(500) Not null Role of the account in
the system
supplierID Int Foreign key is a foreign key that
references the
supplierID of the
supplier table
categoryID int Foreign key is a foreign key that
references the
categoryID of the
category table
Cart

20
 Field name Data type Constraint Explanation
cartID int Primary key ID of carrt
Auto increment
userID int Foreign key is a foreign key that
references the userID of
the user table
productID int Foreign key is a foreign key that
references the
productID of the product
table
Supplier

Field name Data type Constraint Explanation

supplierID int Primary key ID of carrt
Auto increment
supplierName Varchar(100) Not null Name of supplier
supplierDescription Varchar(10000) none Description for dupplier
Category

Field name Data type Constraint Explanation

categoyID int Primary key ID of carrt
Auto increment
categoryName Varchar(100) Not null Naem of category
categoyDescription Varchar(10000) none Description for category

3. Wireframes
In my project, I am responsible for user management and product display on the homepage. In user
management there are functions to login, register, show all users, delete users and update.
This is the login page to the homepage for logged in users
21
 Figure 2: wireframes- login page
This is the user registration page without an account

22
 Figure 3: wireframes- register page
This is the home page, where all the products sold on the website are displayed

23
 Figure 4: wireframes- home page
This is a product detail page, allowing customers to view detailed product information such as price, category,
supplier.

24
 Figure 5: wireframes- detail page
This is the user management page

25
 Figure 6:: wireframes- manage user page
Add and edit user page

26
Figure 7: wireframes- edit user page
III. Implement
1. MVC in laravel

27
The Model-View-Controller (MVC) is an architectural pattern that separates an application into three main
logical components: the model, the view, and the controller. Each of these components are built to handle
specific development aspects of an application. MVC is one of the most frequently used industry-standard
web development framework to create scalable and extensible projects.
Model: includes classes that describe the business, the objects that work on the application, and the
database.
View: Contains content that interacts with the user.
Controller: responsible for handling input requests, receiving user input from the View. This information
will be processed through the Model, then pass the data to the View and output the results. Therefore, the
Controller is mainly the bridge between the Model and the View.

28
 Figure 8: MVC model
Steps in the MVC pattern:
1. Input requests are routed to Controller
2. Controller handles input request and sends to Model to manipulate data Also the Controller
chooses the appropriate View
3. Model transmits data to View
4. View can transform Model into proper output format
5. Output the responses
2. Sampple source code
a) Project structure.
29
Because the project is implemented in the laravel framework, it follows the MVC model.
The structure of the project is:

30
 Figure 9: Project structure:Laravel
b) Project elements.
31
 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:
Model:

Figure 10: Model- User

This is the user model. This model helps to get the data of the User table in the database

32
33
 Figure 11: Model – Product
This is the user model. This model helps to get the data of the product table in the database

Controller

34
 Figure 12: Controller: Add, view User
viewUser function is used to retrieve table information user in database and display to the user
management page

35
postaddUser function used to retrieve information that users enter and save to the database

36
Figure 13: Controller - edit, delete user
37
viewedituser function used to take users to edit user pages with a known id

when clicking on the website edit button will take the user to the user edit page. Deep when entering the user's
information has changed into the empty cell. PosteditUser function helps to change the information just entered and
saved to the database.

DeleteUser function removes 1 user in database

Figure 14: Controller - view hompage

The index function helps to display all products in the database to the home page

38
 Figure 15: Controller- view detail page
productDetail function navigates to the page detailing 1 product with the id number selected

39
40
 Figure 16: Controller - Login, Logout
getLogin function helps to display on login page

After filling in all the information to log in. The postLogin function checks the page in the database. If the
account's data exists in the database, the user will be allowed to log in to the system, otherwise, an error will
be reported and the user will be asked to log back in or register for another account.

getLogout function helps users log out of the system

Figure 17: Controller - Register

41
View

Figure 18: View - Index(1)

42
 Figure 19: View - Index(2)
Above is the code that displays the product on the home page
43
Figure 20: View - Detaill(1)

44
Figure 21: View - Detail(2)
45
 Figure 22: View - Detail(3)
Here's the code for the product detail page.
46
47
 Figure 23: View - manage User
This is the code of the user management page

Figure 24: View – Add and edit user(1)

48
Figure 25: VIew – Add and edit user(2)
49
This is a new user page code

Router

50
 Figure 26: route

3. Web screenshorts
51
Login page:

Figure 27: login screenshort

52
This is a login page.

Figure 28: login sceenshort

53
After logging in with their account, administrators will be redirected to Admin's homepage. Here, they can
access all the features from administrators' management features such as product administration, user
administration

54
 Figure 29: homepage screenshort
This is the home page, the home page helps to display all the products available on the website
55
56
 Figure 30: detail screenshort
This is the product details page, the product details page will show the details of each product

Figure 31: manage user sreenshort

This is the user admin page, it will show all the registered users.

57
 Figure 32: add user screenshort
If you click on the click on the add button, the site will take you to the page to add a new user. Your next task is
just to fill in the user's information and click completed to add a new user.

58
 Figure 33: edit user screenshort
Next is updating the user, when the administrator wants to correct the user's information, just edit that person's
information and then click the completed button and that information will change. And if you want to delete, just click the
delete button and that user will be deleted immediately

IV. Conclusion
After implementing the software, we have critically reviewed the final product for future improvement.
59
 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.
60
  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.
4. Future improvement
The project has some factors which can be improved in the future:
 Customers can view the available products of our website and only need to login when using cart and
checkout features.
 Customers can view order history with details.
 Add status to order, which indicates that the order has been completed, delivered or cancelled and
reduce the quantity of book in the warehouse if the order is delivered or completed.
 Add more specific classification in client site and add corresponding management features in the
admin site to ensure the UX of customers.
 Improve the UI and UX of the existed features of the website.
 Add some statistics and charts to admin dashboard for better analysis.

V. Appendix
1. Group member list
No. Member Name Member ID Role
1 Nguyen Van Manh BHAF200048 Leader
2 Nguyen Tuan Minh BH00294 Member

61
 3 Le Duc Hung BHAF200026 Member

2. Task

No. Task Assign Task description

1 Front-End (Client)
2 Create a project on
Laravel
3 Create database on
migration with controller
and models
4 Create controller
in registration
and login
5 Manage Cart
6 Manage Product
Nguyen Van Manh User interface design,
complete interface on
Bootstrap platform, combined
with JavaScript and HTML/CSS
Nguyen Van Manh Create project in Laravel, crop
pages,
split layout and configure
route to display to the user
interface.
Nguyen Van Manh Initialize the database, connect
on the .env file. Create
relationships between tables
on models configuring the
data roles and
composition of each column.
Nguyen Van Manh Connect front-end and back-
end of login and signup
sections. Check the
successful account
registration on the
database.
Le Duc Hung Create and develop add to cart
functionality and connect
to the database.
Nguyen Tuan Minh Create product management
62
 functionality with CRUD
operations. Then connect to
the database.
7 Manage Category Nguyen Tuan Minh Create category management
functionality with CRUD
operations. Then connect to the
database.
8 Manage Supplier Le Duc Hung Create supplier management
functionality with CRUD
operations. Then connect to the
database.
9 Manage User Nguyen Van Manh Create user management
functionality with CRUD
operations. Then connect to
the database.

3. Github commit evidence

63
 Figure 34: commit github
4. Link to GitHub
https://github.com/ManhCoder1201/404
64
C. CONCLUSION
In this report I have listed all the functions that we have done and the duties of each individual contributor in the
project.

65