Assignment 2 1633 Website Design Development Distinction

ASSIGNMENT 2 FRONT SHEET
Qualification

BTEC Level 5 HND Diploma in Computing

Unit number and title

10: Website Design & Development

Submission date

23/04/2023

Date Received 1st submission

Re-submission Date

23/04/2023

Date Received 2nd submission

Student Name

Tran Duc Long

Student ID

GCH210562

Class

GCH1106

Assessor name

Lai Manh Dung

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
P5

P6

P7

M4

M5

Page 1 of 162

D2

D3


 Summative Feedback:

 Resubmission Feedback:

2.1

2.2

Grade:
Signature & Date:

2.3

2.4

Assessor Signature:

Date:

Page 2 of 162


Table of Contents
I.

Introduction ......................................................................................................................................................................................................... 14

II.

Design plan (P5) ................................................................................................................................................................................................... 14
1.

Project website introduce ................................................................................................................................................................................ 14

2.

User’s requirements by using User Story......................................................................................................................................................... 14

3.

4.

5.

2.1.

As an admininstrator................................................................................................................................................................................ 15

2.2.

As a customer........................................................................................................................................................................................... 15

Review accessibility standards and guilines for website ................................................................................................................................. 16
3.1.

Principles of website design ..................................................................................................................................................................... 16

3.2.

Guidelines for web design........................................................................................................................................................................ 17

Mechnism diagrams ......................................................................................................................................................................................... 18

4.1.

Flow diagram............................................................................................................................................................................................ 18

4.2.

Admin use-case diagram .......................................................................................................................................................................... 19

4.3.

Customer use-case diagram ..................................................................................................................................................................... 19

4.4.

Entity relational diagram.......................................................................................................................................................................... 20

Wireframes ...................................................................................................................................................................................................... 22
5.1.

Interface Admin ....................................................................................................................................................................................... 22

5.1.1.

Manage User ........................................................................................................................................................................................ 22

5.1.2.

Add/ edit user account......................................................................................................................................................................... 23

5.1.3.

Manage Categories .............................................................................................................................................................................. 24

5.1.4.

Manage Product ................................................................................................................................................................................... 25

5.1.5.

Add/ edit Product................................................................................................................................................................................. 26

5.1.6.

Manage Order ...................................................................................................................................................................................... 27
Page 3 of 162


5.1.7.

Order Detail.......................................................................................................................................................................................... 28

5.1.8.

Manage Feedback ................................................................................................................................................................................ 29

5.2.

6.

Interface User........................................................................................................................................................................................... 30

5.2.1.

Register and Login ................................................................................................................................................................................ 30

5.2.2.

Profile ................................................................................................................................................................................................... 31

5.2.3.

Home .................................................................................................................................................................................................... 32

5.2.4.

Categories ............................................................................................................................................................................................ 33

5.2.5.

Deatail Product .................................................................................................................................................................................... 34

5.2.6.

Cart ....................................................................................................................................................................................................... 35

5.2.7.

Checkout .............................................................................................................................................................................................. 36

5.2.8.

Complete .............................................................................................................................................................................................. 37

5.2.9.

Contact ................................................................................................................................................................................................. 37

Sitemap ............................................................................................................................................................................................................ 38

III. Implementation (P6-M4) ..................................................................................................................................................................................... 39
1.

Screenshots of Final and source code Samples of the Website ...................................................................................................................... 39
1.1.

Interface Admin ....................................................................................................................................................................................... 40

1.1.1.

Template admin ................................................................................................................................................................................... 40

1.1.2.

User management................................................................................................................................................................................ 41

1.1.3.

Add/ edit user account page ................................................................................................................................................................ 44

1.1.4.

Categories management page ............................................................................................................................................................. 47

1.1.5.

Product management page.................................................................................................................................................................. 50

1.1.6.

Add/ edit product management page ................................................................................................................................................. 52

1.1.7.

Order management page ..................................................................................................................................................................... 55
Page 4 of 162


1.1.8.

Order detail page ................................................................................................................................................................................. 57

1.1.9.

Feedback management page ............................................................................................................................................................... 59

1.2.

Interface User........................................................................................................................................................................................... 61

1.2.1.

Header and footer interface user page................................................................................................................................................ 61

1.2.2.

Home user page ................................................................................................................................................................................... 64

1.2.3.

Register and Login page ....................................................................................................................................................................... 66

1.2.4.

Profile page .......................................................................................................................................................................................... 69

1.2.5.

Categories page.................................................................................................................................................................................... 71

1.2.6.

Detail product page.............................................................................................................................................................................. 73

1.2.7.

Cart page .............................................................................................................................................................................................. 76

1.2.8.

Check out page..................................................................................................................................................................................... 77

1.2.9.

Complete page ..................................................................................................................................................................................... 80

1.2.10.

Contact page ........................................................................................................................................................................................ 81

2.

Responsive ....................................................................................................................................................................................................... 83

3.

Compare and contrast the multipage website to the design document (M4) ................................................................................................ 91
3.1.

Admin ....................................................................................................................................................................................................... 91

3.1.1.

Users .................................................................................................................................................................................................... 91

3.1.2.

Categories ............................................................................................................................................................................................ 93

3.1.3.

Products ............................................................................................................................................................................................... 94

3.1.4.

Orders and order detail........................................................................................................................................................................ 95

3.1.5.

Feedbacks............................................................................................................................................................................................. 97

3.2.
3.2.1.

User .......................................................................................................................................................................................................... 97
Login and Register ................................................................................................................................................................................ 97
Page 5 of 162


IV.

3.2.2.

Home .................................................................................................................................................................................................... 98

3.2.3.

Profile ................................................................................................................................................................................................. 100

3.2.4.

Categories .......................................................................................................................................................................................... 100

3.2.5.

Deatil Product .................................................................................................................................................................................... 101

3.2.6.

Cart and check out ............................................................................................................................................................................. 103

3.2.7.

Complete and contact ........................................................................................................................................................................ 104

Critically evaluate the design and development process against your design document and analyse any technical challenges. (D2)........ 105

1.

Evaluation the design document ................................................................................................................................................................... 105

2.

Evaluation the process of development ........................................................................................................................................................ 106
2.1

UX ........................................................................................................................................................................................................... 106

2.2

UI & simplistic design ............................................................................................................................................................................. 106

2.3

Performance and speed ......................................................................................................................................................................... 107

2.4

Scalability ............................................................................................................................................................................................... 107

3.

Evaluating the quality of website................................................................................................................................................................... 107

4.

The technical challenges/ difficulties in web development........................................................................................................................... 108

V. Create a suitable Test Plan identifying key performance area and use it to review the functionality and performance of your website. User
Experience (UX) and User Interface (UI). (P7)............................................................................................................................................................ 109
1.

Test plan ......................................................................................................................................................................................................... 109

2.

Testing and result........................................................................................................................................................................................... 110

3.

Overall evaluation of testing part and solution ............................................................................................................................................. 130

VI.
1.

Evaluate the Quality Assurance (QA) process and review how it was implemented during your design and development stages. (M5) .. 137
Quanlity assurance......................................................................................................................................................................................... 137
1.1.

Definition................................................................................................................................................................................................ 137
Page 6 of 162


1.2.
2.

Importance of quality assurance ........................................................................................................................................................... 137

My website’s quanlity assurance ................................................................................................................................................................... 137
2.1.

Design..................................................................................................................................................................................................... 137

2.2.

Images .................................................................................................................................................................................................... 139

2.3.

Content .................................................................................................................................................................................................. 140

2.4.

Website responsiveness......................................................................................................................................................................... 141

2.5.

Browser test ........................................................................................................................................................................................... 143

2.5.1.

Display on browser............................................................................................................................................................................. 143

2.5.2.

Performance....................................................................................................................................................................................... 146

2.6.

Privacy policy.......................................................................................................................................................................................... 148

VII.
Critically evaluate the results of your Test Plan and include a review of the overall success of your multipage website; use this evaluation
to explain any areas of success and provide justified recommendations for areas that require improvement. (D3) .............................................. 150
1.

Tools ............................................................................................................................................................................................................... 150

2.

Evaluate the web ........................................................................................................................................................................................... 151

3.

2.1.

Front-end ............................................................................................................................................................................................... 151

2.2.

Back-end................................................................................................................................................................................................. 153

Advantages and disadvantages ...................................................................................................................................................................... 153
3.1.

Advantages............................................................................................................................................................................................. 153

3.2.

Disadvantages ........................................................................................................................................................................................ 154

4.

Improvements ................................................................................................................................................................................................ 154

VIII.

Conclusion ...................................................................................................................................................................................................... 162

IX. References ......................................................................................................................................................................................................... 162

Page 7 of 162


Table of Figure
Figure 1: User story ...................................................................................................................................................................................................... 15
Figure 2: Flow diagram................................................................................................................................................................................................. 18
Figure 3: Use-case of page admin ................................................................................................................................................................................ 19
Figure 4: Use-case of page customer ........................................................................................................................................................................... 20
Figure 5: ER diagram of my website ............................................................................................................................................................................ 21
Figure 6: Page user mangement .................................................................................................................................................................................. 23
Figure 7: Page add/ edit user ....................................................................................................................................................................................... 24
Figure 8: Page categories management....................................................................................................................................................................... 25
Figure 9: Page product management .......................................................................................................................................................................... 26
Figure 10: Page add/ edit product ............................................................................................................................................................................... 27
Figure 11: Page order management ............................................................................................................................................................................ 28
Figure 12: Page orderDetail ......................................................................................................................................................................................... 29
Figure 13: Page feedback management ...................................................................................................................................................................... 30
Figure 14: Page register and login ............................................................................................................................................................................... 31
Figure 15: Page profile ................................................................................................................................................................................................. 32
Figure 16: Home Page .................................................................................................................................................................................................. 33
Figure 17: Page Categories........................................................................................................................................................................................... 34
Figure 18: Page detail product ..................................................................................................................................................................................... 35
Figure 19: Page cart ..................................................................................................................................................................................................... 36
Figure 20: Page checkout ............................................................................................................................................................................................. 36
Figure 21: Page complete ............................................................................................................................................................................................ 37
Figure 22: Page contact................................................................................................................................................................................................ 37
Figure 23: Site map for admin page ............................................................................................................................................................................. 38
Figure 24: Site map of my website............................................................................................................................................................................... 39
Figure 25: File header.php (Admin) ............................................................................................................................................................................. 40
Figure 26: File footer.php (admin) ............................................................................................................................................................................... 41

Page 8 of 162


Figure 27: Template admin .......................................................................................................................................................................................... 41
Figure 28: Show data in user page ............................................................................................................................................................................... 42
Figure 29: User management page .............................................................................................................................................................................. 43
Figure 30: Code action delete user account ................................................................................................................................................................ 43
Figure 31: Action delete user account ......................................................................................................................................................................... 44
Figure 32: Code add/ edit user page ............................................................................................................................................................................ 45
Figure 33: Code action add/ edit account user............................................................................................................................................................ 47
Figure 34: Foreach to show data in category............................................................................................................................................................... 48
Figure 35: Category page ............................................................................................................................................................................................. 48
Figure 36: Code add/ edit category ............................................................................................................................................................................. 49
Figure 37: Action delete category ................................................................................................................................................................................ 49
Figure 38: Delete data in category page ...................................................................................................................................................................... 50
Figure 39: Code product management page ............................................................................................................................................................... 50
Figure 40: Interface product management page ......................................................................................................................................................... 51
Figure 41: Code action delete product ........................................................................................................................................................................ 51
Figure 42: Delete product in product management .................................................................................................................................................... 52
Figure 43: Code add/ edit product page ...................................................................................................................................................................... 53
Figure 44: Add/ edit product page ............................................................................................................................................................................... 54
Figure 45: Code action add/ edit product .................................................................................................................................................................... 55
Figure 46: Code order management page ................................................................................................................................................................... 56
Figure 47: Action update_status order ........................................................................................................................................................................ 57
Figure 48: Order management page ............................................................................................................................................................................ 57
Figure 49: Code order detail page ............................................................................................................................................................................... 58
Figure 50: Order detail page ........................................................................................................................................................................................ 59
Figure 51: Code feedback management page ............................................................................................................................................................. 60
Figure 52: Action MarkRead and delete feedback....................................................................................................................................................... 60
Figure 53: Feedback management page ...................................................................................................................................................................... 61

Figure 54: Code header of customer interface ............................................................................................................................................................ 62
Figure 55: Header of customer interface ..................................................................................................................................................................... 62
Figure 56: Code footer of customer interface ............................................................................................................................................................. 63
Page 9 of 162


Figure 57: Footer of customer interface ...................................................................................................................................................................... 63
Figure 58: Code home page interface customer ......................................................................................................................................................... 64
Figure 59: Home page interface................................................................................................................................................................................... 65
Figure 60: Code form login and register ...................................................................................................................................................................... 66
Figure 61: Function validate and process create account ........................................................................................................................................... 67
Figure 62: Process login account.................................................................................................................................................................................. 68
Figure 63: Register account ......................................................................................................................................................................................... 68
Figure 64: Form login account ..................................................................................................................................................................................... 69
Figure 65: Code profile page ........................................................................................................................................................................................ 70
Figure 66: Jquery validate form and result .................................................................................................................................................................. 70
Figure 67: Profile page ................................................................................................................................................................................................. 71
Figure 68: Code category page customer .................................................................................................................................................................... 72
Figure 69: Example products monile in categories mobile .......................................................................................................................................... 72
Figure 70: Code deatil page ......................................................................................................................................................................................... 73
Figure 71: Event addMoreCart jquery ......................................................................................................................................................................... 74
Figure 72: Action add to cart ....................................................................................................................................................................................... 74
Figure 73: Detail product page .................................................................................................................................................................................... 75
Figure 74: Code cart page ............................................................................................................................................................................................ 76
Figure 75: Form process update cart ........................................................................................................................................................................... 77
Figure 76: Cart page ..................................................................................................................................................................................................... 77
Figure 77: Code check out page ................................................................................................................................................................................... 78
Figure 78: Process pay bill and cancel data cart .......................................................................................................................................................... 79
Figure 79: Check out page............................................................................................................................................................................................ 79
Figure 80: Cart after paying bill.................................................................................................................................................................................... 80

Figure 81: Code complete page ................................................................................................................................................................................... 80
Figure 82: Complete checkout ..................................................................................................................................................................................... 81
Figure 83: Code contact page ...................................................................................................................................................................................... 82
Figure 84: Action send feedback .................................................................................................................................................................................. 82
Figure 85: Contact page ............................................................................................................................................................................................... 83
Figure 86: Boostrap 4 of navbar in my project ............................................................................................................................................................ 83
Page 10 of 162


Figure 87: Header in screen PC .................................................................................................................................................................................... 84
Figure 88: Header in screen tablet............................................................................................................................................................................... 85
Figure 89: Header in screen iPhone 12 Pro.................................................................................................................................................................. 86
Figure 90: Boostrap 4 in category part ........................................................................................................................................................................ 87
Figure 91: Category laptop in Screen PC ...................................................................................................................................................................... 87
Figure 92: Category laptop in screen tablet................................................................................................................................................................. 88
Figure 93: Category laptop in screen iPhone 12 Pro.................................................................................................................................................... 89
Figure 94: Boostrap 4 in footer .................................................................................................................................................................................... 90
Figure 95: Footer in screen PC ..................................................................................................................................................................................... 90
Figure 96: Footer in screen tablet ................................................................................................................................................................................ 91
Figure 97: Footer in screen iPhone 12 Pro ................................................................................................................................................................... 91
Figure 98: User mangement real and wireframe......................................................................................................................................................... 92
Figure 99: Add/ edit user account real and wireframe................................................................................................................................................ 92
Figure 100: Categories management real and wireframe ........................................................................................................................................... 93
Figure 101: Product management real and wireframe ............................................................................................................................................... 94
Figure 102: Add/ edit product real and wireframe ...................................................................................................................................................... 95
Figure 103: Order management real and wireframe ................................................................................................................................................... 96
Figure 104: Detail orders real and wireframe .............................................................................................................................................................. 96
Figure 105: Feedback mangement real and wireframe ............................................................................................................................................... 97
Figure 106: Login page real and wireframe ................................................................................................................................................................. 98
Figure 107: Register page and wireframe .................................................................................................................................................................... 98

Figure 108: Home page and wireframe ....................................................................................................................................................................... 99
Figure 109: Profile page and wireframe .................................................................................................................................................................... 100
Figure 110: Category page and wireframe ................................................................................................................................................................ 101
Figure 111: Product detail page and wireframe ........................................................................................................................................................ 102
Figure 112: Cart page and wireframe ........................................................................................................................................................................ 103
Figure 113: Check out page and wireframe ............................................................................................................................................................... 104
Figure 115: Contact page and wireframe .................................................................................................................................................................. 105
Figure 116: Code process searching in order management page ............................................................................................................................. 131
Figure 117: Before test .............................................................................................................................................................................................. 131
Page 11 of 162


Figure 118: After test ................................................................................................................................................................................................. 132
Figure 119: After test again case 34 .......................................................................................................................................................................... 133
Figure 120: After test again case 38 .......................................................................................................................................................................... 133
Figure 121: Fix bug in category page ......................................................................................................................................................................... 134
Figure 122: Add condition for product page.............................................................................................................................................................. 134
Figure 123: Before testing.......................................................................................................................................................................................... 135
Figure 124: After testing ............................................................................................................................................................................................ 135
Figure 125: Function msgLove ................................................................................................................................................................................... 136
Figure 126: Notification add to love .......................................................................................................................................................................... 136
Figure 127: Wireframe and real page ........................................................................................................................................................................ 138
Figure 128: Css transition in my website ................................................................................................................................................................... 139
Figure 129: Example about Images in my website .................................................................................................................................................... 140
Figure 130: Example about image content in my website......................................................................................................................................... 141
Figure 131: Display on PC (size: 1447x571) ............................................................................................................................................................... 142
Figure 132: Display iPhone 12 Pro (size: 390x844) and iPad Air (size: 820x1180)..................................................................................................... 143
Figure 133: Test performance on chorme ................................................................................................................................................................. 147
Figure 134: Test performance on microsoft edge .................................................................................................................................................... 148
Figure 136: function getSecurity MD5 ....................................................................................................................................................................... 149

Figure 137: Use MD5 in process create and login account........................................................................................................................................ 149
Figure 138: Password encrypted with md5 ............................................................................................................................................................... 149
Figure 139: History on website in systerm ................................................................................................................................................................ 150
Figure 140: Wireframe follow standard 12-column grid. .......................................................................................................................................... 151
Figure 141: Notifications used by javascipts .............................................................................................................................................................. 152
Figure 142: Summernote edit .................................................................................................................................................................................... 152
Figure 143: Choose method payment ....................................................................................................................................................................... 155
Figure 144: Payment by credit card ........................................................................................................................................................................... 156
Figure 145: Form login in the future .......................................................................................................................................................................... 157
Figure 146: Update avatar profile in the future......................................................................................................................................................... 158
Figure 147: Message box in website .......................................................................................................................................................................... 159
Figure 148: Chat box of website in the future ........................................................................................................................................................... 160
Page 12 of 162


Figure 149: Detail product page in the future ........................................................................................................................................................... 161

Page 13 of 162


I.

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 exercise, I will present the design rules and process of building a fullstack sales website in terms of technology,
specifically how I designed it and applied the design principles, explaining in detail about its functions and characteristics,

and finally evaluate the functions and design. In the design of my website, there are 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.

II. Design plan (P5)
1. Project website introduce
LONGTECH Shop is an e-commerce online store that buys and sells technology-related products like as computers,
phones, televisions, and so on. All of these items are available on the internet. Customers can simply observe and
search what they are looking for on the website's main page.
This shopping website was created to display technology-related service categories. By clicking on this product, you
can see specific information about the product name, total amount and price, as well as detailed remarks about it.
The website will be designed for a variety of Common Platforms using a variety of website development technologies
such as HTML5, CSS, JavaScript, and PHP. The website is compatible with all major web browsers, including Google
Chrome, Firefox, and Microsoft Edge. Also appropriate for most responsive screen sizes such as laptops, televisions,
and tablets.

2. User’s requirements by using User Story
Page 14 of 162


Figure 1: User story

A User Story is a need presented through the eyes of an end-user. A User Story is nothing more than a clearly defined
requirement. An established technology firm required a website that could showcase items in order to promote their
products and accept online orders.

2.1.

As an admininstrator
•

•
•
•
•
•
•

2.2.

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 see customer feedback on the product so that shop keep in mind during the upcoming import
process.

As a customer
•
•
•
•

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.
Page 15 of 162

•
•
•

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.

3. Review accessibility standards and guilines for website
Web Content Accessibility Guidelines (WCAG): This is a set of guidelines developed by the World Wide Web
Consortium (W3C) to ensure that web content is accessible to people with disabilities. WCAG has three levels of
conformance - A, AA, and AAA - with each level having specific success criteria that must be met. Accessibility
standards and guidelines are important for ensuring that digital content, websites, and applications can be used by
people with disabilities. These standards and guidelines aim to ensure that everyone, regardless of their abilities, can
access and use digital content, including people with visual, auditory, physical, and cognitive disabilities.

3.1.

Principles of website design

➢ Website purpose
To make your website user-friendly, it should have a clear purpose on each page. This will help users navigate and
engage with your content. Websites can serve different purposes, such as providing practical information,
entertainment, or selling products. However, all websites share core purposes such as showcasing expertise,
building reputation, generating leads, and sales. (Marianne, 2021).
➢ Simplicity
The user experience and usability of your website are improved by simplicity. Design choices such as color,
typography, and imagery can impact the customer's behavior towards your brand. A brand-specific color palette

using a maximum of five colors, complementary colors, and pleasing color combinations can be used to
communicate messages and evoke emotional responses. Typography plays a crucial role in the website's visual
interpretation and should be limited to three legible typefaces. Imagery, which includes still photography,
illustration, video, and graphics, should be expressive and capture the brand's spirit and personality. Using highquality imagery forms a first impression of professionalism and credibility in visitors' minds. (Marianne, 2021).
➢ Navigation

Page 16 of 162


➢

➢

➢

➢

➢

Navigation is the wayfinding system that visitors use to interact with and find what they need on a website.
Simple, intuitive, and consistent navigation on every page is crucial to retaining visitors. If navigation is confusing,
visitors may become frustrated and leave the site to find what they need elsewhere.
F-shaped pattern reading
An effective website design should consider the F-shaped pattern, which is the most common way visitors scan
text. Eye-tracking studies have found that people tend to focus on the top and left areas of the screen. The Fshaped layout follows the natural pattern of reading in the West, which is from left to right and top to bottom. By
designing a website that works with a reader's natural scanning pattern, you can increase the likelihood of
engagement with your content.
Visual hierarchy
The arranging of things in order of importance is known as visual hierarchy. This is accomplished by the use of
size, color, images, contrast, font, whitespace, texture, and style. The establishment of a focus point, which shows

visitors where the most significant information is, is one of the most important purposes of visual hierarchy.
Content
A good website has both good design and good content. Great content may attract and influence visitors by
converting them into clients by using appealing language.
Grid base layout
Grids help to structure your design and organize your information. The grid assists in aligning and keeping objects
on the page neat. The grid-based layout organises content into a clean rigid grid structure with columns, sections
that line up and feel balanced and enforce order, resulting in a visually appealing website.
Mobile Friendly
More people are browsing the web on their phones or other mobile devices. It is critical to consider developing
your website with a responsive layout that can adjust to multiple screen sizes.

3.2.

Guidelines for web design

➢ Create a web page format: You must first decide what kind of website you want to build. If you have an online
store. It will be focused on new product launches, will have a high level of consumer involvement when it comes
to purchasing, and customers will be able to contact the Shop using the information on the home page. (Juviler,
2023).
Page 17 of 162


➢ Establish objectives: Make a list of the most important objectives for the website. Make a specific list or a list of
the most basic components, and add anything else that comes up when building a website to the list.
➢ Concerns concerning the website: Ask questions like "How many pages should a website have?" as if you were a
customer.
• Is an account login required to purchase goods on the website?
• Is it possible to join the site as a member?
• Is it possible to order through the website?

➢ Create Basic Content: One of the most important aspects that distinguishes your website from others is its
content. The content of a website is crucial to its success. Many people believe that establishing a visually
appealing website, increasing loading speed, and offering high-quality merchandise is sufficient, but these are
merely auxiliary aspects. The most crucial thing for a new website is to create content, yet most of us still don't
comprehend the true value of content, therefore website content production remains a gray area.
➢ Website Promotion: Businesses can use social media to sell items and services on their websites, as well as to
improve their image and build brands.
➢ You'll need to create your website once it's up and running. If you think it's just working properly, you're mistaken.
You should continually be researching and upgrading your website in order to keep your visitors happy and
comfortable. You should also provide your customers with very useful items. These are the qualities that will
make your website appealing and assist you in retaining a big number of customers. (Juviler, 2023).

4. Mechnism diagrams
4.1.

Flow diagram

Figure 2: Flow diagram

Page 18 of 162


Each interface will have a separate login account to access the website. The customer account cannot access
the admin page.

4.2.

Admin use-case diagram

Figure 3: Use-case of page admin

In my website, admin can add, delete and update products, categories on the website, in addition, censoring
customer information is also essential. Admin can also add/edit user accounts and delete accounts and users who
violate the terms. Admin can read feedbacks of customer about product and delete them when already reading.
Admin can also aprrove and cancel order help customers and watch that detail order.

4.3.

Customer use-case diagram

Page 19 of 162


Figure 4: Use-case of page customer

When visiting the website, customers can view products as well as search for products they want to buy.
Customers will not be able to go to 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 own personal information, view
information about the items on the website and place an order, they can also delete the product added in the
cart. After ordering, customers can send feedback for shop to review quanlity items.

4.4.

Entity relational diagram

Page 20 of 162