Assignment WEBG301 Project Web Distinction

The exercise scores a distinction in web programming. This exercise presents a report on a specific sales website selling clothes, fullstack decentralizing admin user rights using the Laravel framework.

GROUP PROJECT FRONT SHEET

Qualification BTEC Level 5 HND Diploma in Computing

Unit number and title WEBG301 - Project Web

Submission date 24/08/2023 Date Received 1st submission 24/08/2023

Re-submission Date Date Received 2nd submission

❒ Summative Feedback: ❒ Resubmission Feedback:

Signature & Date:

Table of Contents

A Introduction 6

B User Requirement 7

1 User stories template 7

2 Use case diagram 8

2.1 Admin use-case diagram 8

2.2 Customer use-case diagram 9

C 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

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