Assignment WEBG301 Project Web Distinction

GROUP PROJECT FRONT SHEET
Qualification

BTEC Level 5 HND Diploma in Computing

Unit number and title

WEBG301 - Project Web

Submission date

24/08/2023

Re-submission Date

Date Received 1st submission

24/08/2023

Date Received 2nd submission

Student Name

Tran Duc Long

Student ID

Class

GCH1106

Assessor name

GCH210562
Pham Duc Tho

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

Grade


❒ Summative Feedback:

Grade:
Signature & Date:

❒ Resubmission Feedback:

Assessor Signature:

Date:


Table of Contents
A.

Introduction ......................................................................................................................................................................................... 6

B.

User Requirement ............................................................................................................................................................................... 7
1.

User stories template....................................................................................................................................................................... 7

2.

Use case diagram ............................................................................................................................................................................. 8

C.

2.1.

Admin use-case diagram .......................................................................................................................................................... 8

2.2.

Customer use-case diagram ..................................................................................................................................................... 9

System Design...................................................................................................................................................................................... 9
1.

Site map ......................................................................................................................................................................................... 10

2.

Entity Relationship Diagram .......................................................................................................................................................... 11

D. Implementation ................................................................................................................................................................................. 13
1.

Sample Source code ....................................................................................................................................................................... 13

2.

Website screenshots ...................................................................................................................................................................... 20

f.

GitHub repository with evidence ................................................................................................................................................... 28

E.

Conclusion ......................................................................................................................................................................................... 29
1.

Advantages of website ................................................................................................................................................................... 29

2.

Disadvantages of website .............................................................................................................................................................. 30

3.

Lesson learnt .................................................................................................................................................................................. 30

4.

Future improvements .................................................................................................................................................................... 30


Table of Figure
Figure 1: Admin use-case diagram .............................................................................................................................................................. 8
Figure 2: Customer use-case diagram ........................................................................................................................................................ 9
Figure 3: Site map of interface admin ...................................................................................................................................................... 10
Figure 4: Site map of interface customers ................................................................................................................................................ 11
Figure 5: ER diagram of my website ........................................................................................................................................................ 12
Figure 6: Model MVC of my project.......................................................................................................................................................... 14
Figure 7: Sample CRUD in my project ....................................................................................................................................................... 14
Figure 8: Sample about Search function ................................................................................................................................................... 15
Figure 9: Function format time and Results before and after application ............................................................................................... 15
Figure 10: Middleware CheckPermission and add path in kernel.php ..................................................................................................... 16
Figure 11: Constructor to decentralization function ................................................................................................................................ 16
Figure 12: Add path in config/app.php ..................................................................................................................................................... 16
Figure 13: Funtion export bill.................................................................................................................................................................... 17
Figure 14: Function Api uploadFile and method Ajax to push data to the server.................................................................................... 17
Figure 15: Config env to implement payment online feature .................................................................................................................. 18
Figure 16: Function stripePost to pay by credit card ................................................................................................................................ 18
Figure 17: Config env and edit function toMail in notification ................................................................................................................ 19
Figure 18: Function send email ................................................................................................................................................................. 19
Figure 19: Config service google cloud ..................................................................................................................................................... 20
Figure 20: Function login with google....................................................................................................................................................... 20
Figure 21: Login and Register page ........................................................................................................................................................... 21
Figure 22: Dashboard page ....................................................................................................................................................................... 21
Figure 23: Category management page.................................................................................................................................................... 22
Figure 24: Add Product and Show Product page ...................................................................................................................................... 22
Figure 25: Show order and Detail order page .......................................................................................................................................... 23
Figure 26: Show feedback and send email page ...................................................................................................................................... 23

Figure 27: Home page ............................................................................................................................................................................... 24


Figure 28: Profile page .............................................................................................................................................................................. 24
Figure 29: Product page ............................................................................................................................................................................ 25
Figure 30: Cart page .................................................................................................................................................................................. 26
Figure 31: Order page ............................................................................................................................................................................... 26
Figure 32: Contact page ............................................................................................................................................................................ 27
Figure 33: Footer in interface customer ................................................................................................................................................... 27
Figure 34: Github ...................................................................................................................................................................................... 28
Figure 35: Commits on GitHub.................................................................................................................................................................. 28


A. Introduction
We live in a modern society where everything is modern and innovative. Every day, there is a lot of innovation, especially
in technology. When it comes to technology, we must admit that it has permeated every aspect of our lives, from simple
devices such as phones and computers to complex programming applications. Currently, digital transformation technology
is gaining popular in a variety of disciplines, particularly e-commerce system. While offline stores are progressively
becoming outdated, online shops are an excellent solution for developing this model.
In this assignment, I will demonstrate the design and process of building a fullstack clothing store website, specifically how
I design and apply the MVC pattern in PHP's Laravel framework, using the api for the project along with accompanying
supporting technologies such as boostrap, ajax and jquery to build a complete website for users. My website has two main
interfaces, admin and customers, and I have authorized for them so that customers can go to the website to purchase and
the administrator can receive data about orders as well as perform other tasks, functions like add, edit, delete, send email,
download or login with google, etc.


B. User Requirement
Based on early 2023 statistics, there is a resurgence in the market following the pandemic. Recent data indicates a rise in
the number of consumers, particularly in the fashion industry. Recognizing this trend, I conceptualized and formulated an

online venture centered around fashion. This e-commerce initiative involves a clothing and product retail platform, with a
primary emphasis on offering authentic items sourced from well-known brands. The name of the website is L-StyleTrend,
driven by the aspiration to replicate this business approach and provide top-quality products to the market's consumers.

1. User stories template
As an admininstrator
•
•
•
•
•
•
•
•
•
•
•

I want to add/edit/delete products for categories to my website so that customers have more choices.
I want to access customer account information so that shop can track order history.
I want to create an account for customers so that I help them login to the purchase homepage.
I want to correct the information for the customer so that I can help them verify the information for each order.
I want to delete the account information of customers who have not been on the website for a long time
I want to see the customer's order details so that facilitate delivery.
I want to invoice the order placed to the customer.
I want to delete orders that have been canceled or have been shipped for a long time.
I want to see customer feedback on the product so that shop keep in mind during the upcoming import process.
I want to send email to reply customers' feedback about the product or website so that the store can note in
the upcoming import process.
I want to see the website's statistics to know the store's sales.

As a customer
•
•

I want to register an account to buy goods on the website.
I want to login so that I can use the full utility on the website.


•
•
•
•
•
•
•
•
•
•
•
•

I want to update my personal information in my account to correct purchase information.
I want to see a detailed list of product categories so that helping me choose my order.
I want to know how much so that I can pay for a product in the cart for checkout.
I want to order online so that I don't have to go to the store.
I want to delete the selected products in the cart.
I want to send feedback for each purchased product to rate them for quality.
I want to contact website to rate them for quality website.
I want to search for products so that it is easy to choose the product of my choice.

I want to pay for my order by credit card when placing an order.
I want to pay for my order in cash upon delivery.
I want to see the orders I have placed or canceled so far.
I want to remove the canceled order from my account.

2. Use case diagram
Each interface will have a separate login account to access the website. You can sign up for a normal account or log in
with google depending on the user's preference. The customer account cannot access the admin page.

2.1.

Admin use-case diagram

Figure 1: Admin use-case diagram


In my website, admin can add, delete, update products and categories on the website, in addition, censoring
customer information is also very necessary. Administrators can also add/edit user accounts and delete accounts
and users that violate the terms. Administrators can read customer feedback on products, email them to customers
or delete them once read. Admins can also approve and export orders as pdfs, view order details, or delete canceled
or long-delivered orders.

2.2.

Customer use-case diagram

Figure 2: Customer use-case diagram

When accessing the website, customers can view products as well as search for products they want to buy.
Customers will not be able to access the shopping cart page if they do not have an account in the system.

Therefore, customers can register, log in to use the website, update their personal information, view
information about items on the website and place an order, and can also delete products added to the cart.
Customers have 2 forms of payment: cash or credit card. After placing an order, customers can view the orders
they have purchased as well as their shipping process and can send feedback to the shop to evaluate the quality
of the items.

C. System Design


1. Site map
I applied the F-shaped pattern reading to design user-guided sitemaps. My sitemap follows the function from top to
bottom and from left to right following as:

Figure 3: Site map of interface admin

The user must have an admin account to access the admin page. If customers intentionally visit this page, they will be redirected
to the login page here. Without an administrator account will not be able to access the site. When administrators visit the
website, they can manage user accounts such as adding, editing and deleting user accounts. The administrator account cannot
be deleted. In addition, they will manage the product catalog and products to which they can add, edit, and remove items for
the site to display on the front-end page. They can manage orders by approving, invoicing customers and viewing order details
for delivery to customers. Finally, they can read customer reviews about the website's products and can send emails to reply
to that customer.


Figure 4: Site map of interface customers

Initially, customers will look through the homepage interface of the website, where they can find information about
the items for sale. Promotions and advertisements will be displayed by product on the main page, allowing consumers
to select and check product details. Users cannot place orders unless they create an account and log in first. After login,
User can edit their profile to facilitate purchase. Users will be able to use all website functions, including placing orders.

After completing the shopping, the user will be able to go to the cart page by clicking on the cart icon. If the user doesn't
want to buy anymore, they can remove the previously selected items from their shopping cart. After viewing the cart,
the customer can pay for the order by cash or credit card. After making a purchase, users can go to the order page to
see the shipping order process. Users can go to the contact section on the navigation bar to go to the contact page to
send feedback to the store. Users can also rate each product on that product detail page.

2. Entity Relationship Diagram


Figure 5: ER diagram of my website

The diagram above has 9 entities that are related to one another, with the OrderDetail entity being distinct from the
link between the two segments sales and productions. There are 10 relationships between 9 entities:


•
•
•
•
•
•
•
•
•
•

Role and Users :(1 - m) 1 role can have multiple user but those users can only be had by 1 role.
User and Comment:(1-m) 1 user can have multiple comment but those comment can only be had by 1 user.
User and Replies:(1-m) 1 user can have multiple reply but those reply can only be had by 1 user.
Comments and Replies:(1-m) 1 comment can have multiple replies but those replies can only be had by 1

comments.
Products and Comments:(1-m) 1 product can have multiple comments but those comments can only be
commented by 1 product.
User and Reply:(1-m) 1 user can have multiple reply but those reply can only be had by 1 user.
User and Orders (1 - m): 1 user can place multiple orders but those orders can only be ordered by 1 user.
Orders and Order_Details: (1 - m): 1 order can have multiple items to more than 1 items of order detail if the
orders contains more than 1 products, but each items in the order detail is only related to one order.
Product and Order_Details: (1-m): 1 product can have multiple order detail but those order detail can only be
selected by 1 product.
Categories and Product(1-m): 1 category can have multiple products but those products can only be had by 1
category.

The ERD diagram, I provided consists of my 9 tables which all satisfy the condition Each table has a primary key. All non-key
columns are completely dependent on the entire primary key. The tables are linked by primary and foreign keys and don't have
any transitive attributes so my wensite's ERD is 3NF compliant.

D. Implementation
1. Sample Source code
My website has been predominantly crafted using the PHP Laravel framework. It's constructed using the foundational
elements of Laravel Components, which carry out the execution of code following the MVC architecture. This architecture
divides functionality into three tiers: Model, View, and Controller. The following are images depicting examples of what is
implemented in the source code that I have developed.


Figure 6: Model MVC of my project

1.1.

Sample source code – CRUD

Following is an example of CRUD of product in my project including functions: show_product() to display data on the
page, view_product() to go to the page to add or edit products, add_product() to perform the process of adding or
editing products, delete_product() to remove the product from the system.

Figure 7: Sample CRUD in my project

1.2.

Sample about some advanced functions in my project


a. Function searchProduct
This is an example of controller handling data search in my project, I search with get method, use sql leftjoin statement
to link categories and products table, sql 'like' condition to search.

Figure 8: Sample about Search function

b. Function to adjust date and time standard format
I have created an Ultity folder to share the functions in the project with each other. I create a function getTimeFormat
to adjust the time to my format H:i d/m/Y. To make this function run in the whole project I run the command "composer
dump-autoload". Here is the source code and results before and after applying this function.

Figure 9: Function format time and Results before and after application

c. Authorization function
I use middleware to make the function of authorizing the admin and user pages. I create a middkeware
checkPermission, in this file I give the condition that if the login account is admin, only to enter the admin page,
otherwise it will be redirected to the user page.

Figure 10: Middleware CheckPermission and add path in kernel.php

After creating the middleware and the path, I will add the constructor to the admin related controllers to perform
the decentralization function.

Figure 11: Constructor to decentralization function

d. Export bill to PDF
I use laravel's dompdf library to make order export function to pdf. I run the command "composer require
barryvdh/laravel-dompdf". Then I put the dompdf's path in the config/app.php file and finally wrote the print_pdf
function in the controller to download the invoice.

Figure 12: Add path in config/app.php


Figure 13: Funtion export bill

e. Use API to upload file image
I use ajax to push data to the server, the server will return a json url and append that url with the
src attribute in the img tag to display the image without reloading the page.

Figure 14: Function Api uploadFile and method Ajax to push data to the server


f. Credit card payment feature
I used laravel's package stripe to make payment by credit card when ordering. I modified the configuration in the
env file and created a stripePost function in the controller to handle this checkout.

Figure 15: Config env to implement payment online feature

Figure 16: Function stripePost to pay by credit card


g. Send email reply customer’s feedback
Notification in laravel is a powerful way to send notification to user or system through multiple
channels like email, SMS, browser notifications. First I configure mail in env. Then I create
notification folder to send mail by entering command "php artisan make:notification name". Then
modify the toMail function in the newly created file. And finally, write the send_email_user
function in the controller to handle this mail sending process.

Figure 17: Config env and edit function toMail in notification

Figure 18: Function send email

h. Login with google function


I use Socialite, an extension for the Laravel framework that makes it easy to integrate social authentication into a
web application that allows users to login or register with a social network account like Google. In order for doing
to touch this function, I have to edit the configuration in the env and config/service files and then handle the
controller.

Figure 19: Config service google cloud

Figure 20: Function login with google

2. Website screenshots