Tải bản đầy đủ (.doc) (27 trang)

Project web (WEBG301) Greenwich

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.81 MB, 27 trang )

ASSIGNMENT 1 FRONT SHEET
Qualification

BTEC Level 5 HND Diploma in Computing

Unit number and title

Project Web (WebG301)

Submission date

Date Received 1st submission

Re-submission Date

Date Received 2nd submission

Student Name

Student ID

Class

Assessor name

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
Grading grid
P1



P2

P3

P4

M1

M2

D1


Nhận support code project web
theo yêu cầu giá sv


❒ Resubmission Feedback:

Summative Feedback:
2.1

Grade:
Lecturer Signature:

Assessor Signature:

Date:



Project name: Pet shop
Author
Members

Date
Instructor


Table of Contents
1. PROBLEM DEFINITION...................................................................................................................................................... 1
1.1. PROBLEM ABSTRACTION..................................................................................................................................................... 1
1.2. THE CURRENT SYSTEM....................................................................................................................................................... 1
1.3. THE PROPOSED SYSTEM..................................................................................................................................................... 2
1.3.1. Boundaries of the System......................................................................................................................................... 3
1.3.2. Hardware and Software Requirements...................................................................................................................... 3
2. CUSTOMER REQUIREMENTS SPECIFICATION................................................................................................................. 3
2.1. USERS OF THE SYSTEM........................................................................................................................................................ 3
2.2. USER REQUIREMENTS........................................................................................................................................................ 4
3.SYSTEM DESIGNS................................................................................................................................................................. 5
3.1. FUNCTIONAL REQUIREMENTS / SYSTEM FUNCTIONALITIES..................................................................................................... 5
3.2. ENTITY RELATIONSHIP DIAGRAM......................................................................................................................................... 7
3.3. DATABASE DESIGN............................................................................................................................................................. 8
3.4. SITEMAP......................................................................................................................................................................... 10
4. IMPLEMENTATION........................................................................................................................................................... 11
4.1. SAMPLE SOURCE CODE...................................................................................................................................................... 11
4.1.1. Function update product of admin........................................................................................................................ 11
4.1.2. Function category of customer............................................................................................................................... 15
4.2. IMAGES OF FINAL APPLICATION......................................................................................................................................... 18
5. CONCLUSION..................................................................................................................................................................... 21

5.1. WHAT WENT WELL?......................................................................................................................................................... 21
5.2. WHAT DOESN'T GO WELL?................................................................................................................................................ 21
5.3. LESSONS LEARNED AND FURTHER IMPROVEMENTS............................................................................................................... 21


LIST OF FIGURES
FIGURE 1: ERD OF PUPPY SHOP................................................................................................................................................... 7
FIGURE 2: DATABASE DIAGRAM OF PUPPY SHOP.......................................................................................................................... 9
FIGURE 3: SITEMAP FOR CUSTOMER.............................................................................................................................................. 10
FIGURE 4: SITEMAP FOR ADMIN................................................................................................................................................ 10
FIGURE 5: FLOWCHART OF UPDATE FOR PRODUCT..................................................................................................................... 11
FIGURE 6: PETSHOP.PRODUCT.UPDATE..................................................................................................................................... 12
FIGURE 7: ROUTE UPDATEPRODUCT.......................................................................................................................................... 12
FIGURE 8: FUNCTION UPDATEPRODUCT (PART 1)....................................................................................................................... 13
FIGURE 9: VALIDATION FOR UPDATEPRODUCT.......................................................................................................................... 13
FIGURE 10: FUNCTION UPDATEPRODUCT (PART 2)..................................................................................................................... 13
FIGURE 11: FUNCTION UPDATEPRODUCT (PART 3)..................................................................................................................... 14
FIGURE 12: FUNCTION UPDATE AT PRODUCTREPOS................................................................................................................... 14
FIGURE 13: FUNCTION UPDATEPRODUCT (PART 4)..................................................................................................................... 14
FIGURE 14: FLOWCHART FOR CATEGORY................................................................................................................................... 15
FIGURE 15: CLICK LINK CATEGORY........................................................................................................................................... 15
FIGURE 16: ROUTE OF CATEGORY............................................................................................................................................. 16
FIGURE 17: FUNCTION CATE (PART 1)........................................................................................................................................ 16
FIGURE 18: FUNCTION GETCATEGORY AT PRODUCTREPOS......................................................................................................... 16
FIGURE 19: FUNCTION GETALLCATEGORY AT ADMINREPOS...................................................................................................... 17
FIGURE 20: FUNCTION CATE (PART 2)........................................................................................................................................ 17
FIGURE 21: RETURN VIEW CATEGORYINDEX............................................................................................................................. 18
FIGURE 22: PETSHOP.INDEX.FIELD........................................................................................................................................... 18
FIGURE 23: CLIENT HOMEPAGE................................................................................................................................................. 19
FIGURE 24: AFTER CHOOSE PET IN NAVIGATION........................................................................................................................ 19

FIGURE 25: VIEW DETAIL OF A PET............................................................................................................................................ 20
FIGURE 26: HOMEPAGE OF ADMIN............................................................................................................................................. 20

List of tables
TABLE 1: ENTITY ADMIN............................................................................................................................................................. 8
TABLE 2: ENTITY CUSTOMER...................................................................................................................................................... 8
TABLE 3: ENTITY CATEGORY....................................................................................................................................................... 8
TABLE 4: ENTITY PRODUCT......................................................................................................................................................... 9


1. Problem Definition
1.1. Problem Abstraction

Currently, traditional business forms often come with an e-commerce page to advertise or meet shopping
needs, the website brings convenience to users.
The puppy shop project is a project to build a website for a pet shop on the internet. The biggest purpose
of this website is to meet the needs of pet shopping, in addition, this website also sells suitable food,
beautiful and cheap accessories such as pants, clothes, ... for animals. Services such as bathing, shaving,
and health check are also added to meet the needs of more guests, especially those who do not have much
time to take care of their pets.
In addition to business, this web project is also rooted in the love of animals along with the desire for pets
to have a good life.
The main reason to develop the puppy web model is the desire to popularise a wider variety of pets in
Vietnam, most pet owners do not have access to suitable and safe foods for their pets, pet services are also
underdeveloped, accessories and pets in the market are often very expensive and this project can solve
those problems.
1.2. The Current System

The current non-IT operating model of the pet store is quite complicated. When customers come to the store,
there will be a staff member to greet and advise customers about the store's pet service. After that, customers

will be led to each area such as pets and accessories to choose the right product. Most customers will look
through the entire area to find a good, beautiful pet or accessory. For service, it will take about 15-20 minutes if
the store is crowded. Finally, customers will have to go to the checkout counter to pay and get the store's
contact information if needed. For new customers, contact information, the store's address is difficult to find,
they have to get information through people who have used the service at the store. In a traditional store,
feedback often does not appear, it is difficult for customers to accurately evaluate the store's staff and

1


services because of fear and anxiety. The administrator must manage the information of pets, employees,
accessories, ... through manual means such as books.
Therefore, some disadvantages appear such as the need to recruit a lot of human resources because when
the store is crowded, it will need a lot of employees to be able to advise, as well as handle services for
customers. The working process is complicated, when the buyer needs to go to the store to see the pet and
listen to the staff explain and advise. After that, customers and employees will spend a lot of time looking
for the most suitable pet and accessories. The store also can't show customers all of the store's products or
the newest, fastest selling products. The evaluation of customers is also difficult, the payment is
complicated; Finding information and store addresses is difficult. For administrators, manually adding,
editing, deleting, reading, and searching products takes a long time, with low efficiency.
A big difficulty at the moment is that we cannot operate traditional stores because of the covid-19 epidemic.

It causes great economic loss because the store cannot operate and loses the rent for the premises.
1.3. The Proposed System
A website system for Puppy Shop is about to be built that will solve the problems that traditional stores are
facing. Customers can access the website from anywhere, without having to go to an offline store. Information
about the store's address and phone number will also appear publicly on the website, customers can completely
find the store with that address. Puppy Shop will offer classified pages for products such as pets, accessories,
services, customers will easily find products of the type they want, if customers remember the product name,
they can also search by name. name in the search bar, these functions will help customers shorten the time and

find the right product. Their details will also be displayed along so that customers understand what they are
buying. Customers can also rate directly through the shop's feedback website. They can become members for
online/offline consultation upon registration. In the age of delivery apps, delivery is no longer an issue for
customers and stores. In addition, the website also added many utilities to increase the user experience. For
administrators, the system helps to view, add, edit and delete necessary information such as customers,
categories, and products.

2


1.3.1. Boundaries of the System
The system we're building will be for people with internet access who care about animals. We will focus on
people with good to high income because if people are able to take good care of themselves then they will be
more inclined to have and take care of pets to reduce stress and improve morale. At the same time, it also helps
to take care of those who are too busy with work and do not have time to take care of pets. Our system will
work throughout the territory of Vietnam because this is a tropical monsoon area that is very suitable for many
types of pets, those who are far from the shop area can be safe transported by road or air.

1.3.2. Hardware and Software Requirements
Hardware includes a laptop or pc with windows 10 - 64bit operating system, at least 4gb ram, at least
256gb rom, intel core i5-10th CPU. In addition, the device must be connected to the internet via a wifi
router or modem.
To build a website, some necessary software must be used. Xampp is a software that helps create a web
server on a computer, laptop, converts the device into a server to place the original files and resources of
the website for the purpose of serving them at the request of the client. HeidiSQL database software
creates a database connected to the server to store user data, system data to serve functions related to
adding, editing, deleting, ... Finally, a browser like Google Chrome is used to view the output of the source
code during programming.

2. Customer Requirements Specification

2.1. Users of the System
Customers/clients are the first object of the website, they can perform operations in the "view" group such
as viewing pets, food, and services for them, viewing detailed information about services and food, pet; To
make searching on the site easy, customers can sort by groups, search by pet's name, food, and send
feedback for the shop. In addition, they also can sign up to become members of the shop.
Administrators are subject to website management functions, they log in to the admin page, perform
operations such as viewing all products, searching and categorising them. The difference is that these users
can add, edit, and delete products to manage the website.

3


2.2. User Requirements
For Client:
-

As a customer, I want to create an account with information (name, contact, gender, DOB, address)
so that the shop can contact me.

-

As a customer, I want the phone number, information, facebook, gmail for me to contact the shop.

-

As a customer, I want to have the function of categorising the store's products such as pets, food,
and services so that it's easy to find products.

-


As a customer, I want to give feedback so that I can give my opinion to the store.

-

As a customer, I want the interface of the website to show the corresponding results after
performing functions like sorting, search and the homepage to display all the products so that I can
see their information.

-

As a customer, I want to see detailed information when I click on each pet (dog, cat) so that I know
all the pet's information (date of birth, species, gender, price).

-

As a customer, I want a search function so that I can easily find products like pets, food, and services.

For admin:
- As an administrator, I want to log in so that I can access my admin account on the website.
-

As an administrator, I want to log out so that I can end the site management process.

-

As an administrator, I want to see my admin account information (email, name, contact,...) so that I
can check it.

-


As an administrator, I would like to update my admin account information so that I can change the
information or password.

-

As an administrator, I want to create categories (pet names, service names) so that I can know what
kind of pet or breed of pet it is.

-

As an administrator, I want to see the categories so I can know the type of pets (dogs, cats),
services (bathing, injections, care), accessories and foods (clothes, sand, nuts , pate).

4


-

As administrator, I want to update categories (pet names, service names) so that I can edit category
info like pet name, service name.

-

As an administrator, I want to delete categories (pet names, service names) so that I can delete
categories that are no longer in the store.

-

As an administrator, I want to add pets, each pet will have names by species, pictures of that pet,
price and age, availability or out of stock, pet id so that Puppy shop has many new pets.


-

As an administrator, I want to see pet information so that I can check their information.

-

As an administrator, I want to update my pet (photo of that pet, price and age, availability or out of
stock,...) so that I can edit the pet's information in the store.

-

As an administrator, I want to delete pets so that I can delete sold or no longer pets.

-

As an administrator, I want to see customer information so that I can check their information.

-

As an administrator, I want to update customer information so that I can change their information if
they need change

-

As an administrator, I want to delete customer information so that I can delete their information if
they want to cancel membership.

3.System Designs
3.1. Functional Requirements / System Functionalities


Client:
- F1: The system will store customer information (name, contact, gender, DOB, address) to the
database for the client.
-

F2: The system will display the shop's contact information (facebook, phone number, ...) for the
client.

-

F3: The system will show a category bar including pets, food and services, etc. for the client.

-

F4: The system will have a web with form to customer sending feedback for the client.

5


-

F5: The system will display the products according to the list after performing the corresponding
functions such as Home, search, and filter for the client.

-

F6: The system will display information about the pet (date of birth, species, gender, price, ID) and
information about the corresponding food and service to the client.


-

F7: The system will help the client search by name or letters in the product name for the client.

Admin:
- F8: The system shall display the login page for the administrator to log in with the account and
password, then redirect the administrator to the admin page for admin.
-

F9: The system shall have a link for the administrator to log out of the administrator's account.

-

F10: The system shall display the administrator account's information such as email, name, contact,
... for the administrator.

-

F11: The system shall allow the administrator to edit the information of the administrator account
and store them into the database for the administrator.

-

F12: The system shall allow the administrator to add new categories in the pet and add them into
the database for the administrator.

-

F13: The system shall display large categories (pet, food, servie), small (dog, cat, ...) for the
administrator.


-

F14: The system shall allow the administrator to edit the existing category names and store them
into the database for the administrator.

-

F15: The system shall allow to delete the existing category names and delete it in the database for
the administrator.

-

F16: The system shall allow to add new products ((kinds of pets, food, service) and add them into
the database for the administrator.

-

F17: The system shall allow to view information of all products (types of pets, food, service)
according to the list such as image, price, age, classification, price, pet id after updating for the
administrator.

-

F18: The system shall allow to update information of products (types of pets, food, service) such as
quantity, image, price, age, classification, price, pet id after updating and update them into the
database for the administrator.

6



-

F19: The system shall allow to delete products (types of pets, food, service) at will and delete them
in the database for the administrator.

-

F20: The system shall allow to view information of all customers (id, name, contact, gender, DOB,
address) for the administrator.

-

F21: The system shall allow to update information of customers (id, name, contact, gender, DOB,
address) into the database for the administrator.

-

F22: The system shall allow to delete customers (id, name, contact, gender, DOB, address) at will
and delete them in the database for the administrator.

3.2. Entity Relationship Diagram

Figure 1: ERD of puppy shop

7


3.3. Database Design


Table 1: Entity admin
Field

Data type

Null ? Description

User

varchar(10)

0

Store username of admin

Password varchar(50)

0

Hash and store password of admin

Name

varchar(50)

0

Store full name of admin

Email


varchar(100) 0

Store email of admin

Like ‘’

Contact

char(10)

Store phone number of admin

start with 0 and digits 10

0

Validation

Table 2: Entity customer
Field

Data type

Null ? Description

Validation

ID


int(11)

0

Store id of customer

Auto increment

Name

varchar(50)

0

Store full name of customer

Gender

varchar(10)

0

Store gender (male or female) of customer

DoB

date

1


Store date of birth of customer

Address varchar(100) 1

Store detail address of customer

Contact char(10)

Store phone number of customer

0

Format: d/m/Y

Digits:10, starts_with:0

Table 3: Entity category
Field

Data type

Null ? Description

Validation

ID

int(11)

0


Store id of category

Auto increment

0

Store name of category

min:2 , max:10

Name varchar(50)
Des

varchar(200) 0

Store description of category

8


Table 4: Entity product
Field

Data type

Null ? Description

ID


int (11)

0

Store id of product (pet, food, service,..) Auto increment

Name

varchar(50)

0

Store full name of product

Price

int(11)

0

Store price of product (pet, service,..)

DoB

date

1

Store date of birth of pet


Gender

varchar(10)

1

Store gender (male or female) of pet

Status

varchar(20)

0

Store status of product

0

Store category of product

Category int(11)
Picture

varchar(100) 0

Store picture of product

Detail

varchar(500) 0


Store product description

Validation

Format: d/m/Y

‘stocking’ or ‘out of stock’

File picture

Figure 2: Database diagram of Puppy shop

9


3.4. Sitemap
For customer:

Figure 3: Sitemap for customer
For admin:

Figure 4: Sitemap for admin

10


4. Implementation
4.1. Sample source code
4.1.1. Function update product of admin


Figure 5: Flowchart of update for product

11


Step 1: Send data

Figure 6: PetShop.product.update
After submitting the form, the input data of the edit form (file PetShop.product.update) will be sent to the
product.update route along with the ID of the product to be updated according to the post method.

Figure 7: Route updateProduct
This route is in the web.php file, received by the post method along with the associated ID. This route is
named product.update. The route then sends the data to the updateProduct function of the
AdminController.php file for processing.
Step 2: Process data at Controller
The data is sent to the updateProduct function at the AdminController for processing. This function gets all
data from the form by Request and gets the ID sent with the route.
Then, a conditional will be used to check the ID from the route and the ID from the input are the same or
not, if false, return function indexProduct to return the index page of the product. If the condition is true
then continue.

12


Figure 8: Function updateProduct (part 1)
The next thing is to check the validation, if true, continue, if false, return the edit page with the entered
data and the corresponding message.


Figure 9: Validation for updateProduct
This validation is used to check the input data for the updateProduct function. The condition is that the
Name cannot be empty, enter at least 2 characters, at most 10 characters; Status cannot be empty.

Figure 10: Function updateProduct (part 2)
If the input data has a Picture (new image), then save the image with its original name in a public file in
the Storage folder, because this file has been linked to storage in the Public folder, it can be displayed in
the view. Also save this pathname in the $path variable.

13


Get all the data of the product being edited with getProductById with the same ID, save it in the $pro
variable. Use the Storage::delete command to delete the old image of the current product.
Then set $picture equal to $path (minus the first 7 characters), the reason for ($path,7) is because in $path
there is public/, I don't want it to appear in the image path because it affects image display.
If the input data does not have a new picture (Picture), then set $picture equal to OldPic (minus 8
characters is storage/).

Figure 11: Function updateProduct (part 3)
Assign the data you want to update to an object called $product and send them to the update function at
ProductRepos for processing.

Figure 12: Function update at ProductRepos
Use sql update statement to update data.

Figure 13: Function updateProduct (part 4)

14



After updating the data, return the AdminController's IndexProduct function to return the product's index
page and finish the update function.
4.1.2. Function category of customer

Figure 14: Flowchart for category
Step 1: Get ID of category

Figure 15: Click link category

15


In the navigation bar on the client's homepage, when you click on the link of the corresponding category,
you will go to the route (client.customer.cate) along with the ID of the corresponding category.

Figure 16: Route of category
At this route, the get method is used, the accompanying data is the ID. The data will be passed to the cate
function of ClientController, the name of this route is set to client.customer.cate.
Step 1: Handle at ClientController

Figure 17: Function cate (part 1)
The cate function at ClientController receives the ID sent from the route. Then get the data of all products
of the type ID sent back for the purpose of displaying those products, get the entire category to return the
category data to the navigation bar. The two repositories used are ProductRepos (function getCategory)
and adminRepos (function getAllCategory).

Figure 18: Function getCategory at productRepos
Get the product information and the Name of the corresponding category by sql statement at the ID of the
corresponding category sent.


16


Figure 19: Function getAllCategory at adminRepos

Figure 20: Function cate (part 2)
Delete the old section variable, select the category names and IDs to save in the section variable to add
data for the bread_crumb bar.
Return PetShop.Index.categoryIndex view with 2 arrays, Category and product.

17


Figure 21: Return view categoryIndex
If $product > 0 (with at least 1 corresponding product), then display information such as category, a list of
all products of this category. If there is no product, the message line shows no product.

Figure 22: PetShop.Index.field

4.2. Images of final Application

18


Figure 23: Client homepage

Figure 24: After choose Pet in navigation

19



Figure 25: View detail of a pet

Figure 26: Homepage of admin

20


Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Tải bản đầy đủ ngay
×