Information technology assignment 2 unit website design & development

11 PERFOMED STUDENT: PHAN QUANG HOP... Table 2 Test Cases Table 3 Test logs vil PERFOMED STUDENT: PHAN QUANG HOP... This report includes the following contents: PERFOMED STUDENT: PHAN

UNIT: WEBSITE DESIGN & DEVELOPMENT

Diploma in computing

and title DEVELOPMENT

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

PERFOMED STUDENT PHAN QUANG HOP

“BTEC

ACKNOWLEDGMENTS

First of all, I would like to thank my teacher Nguyen Hoang Anh Vu for always supporting me

in my studies and research, for my patience, motivation, enthusiasm and rich knowledge His

enthusiastic guidance has helped me throughout the time of researching and writing this thesis

Without your wonderful help, I would not have been able to achieve this

Besides the teacher, I would like to thank the friends who helped me improve my subject knowledge Not only that, they are always there to support me when I need it And besides, I would like to thank the school for creating all conditions for me to have all the facilities to help me complete my work well

Finally, I would like to thank my family: my parents, who gave birth to me from the beginning and always supported me mentally They are always behind to care and give me more motivation to

do well

11 PERFOMED STUDENT: PHAN QUANG HOP

BTEC ae

ASSURANCE

I declare that this is my work, based on my research, and that I have recognized all

materials and sources utilized in its production, including books, papers, reports, lecture notes, and any other type of document, electronic or personal communication I further declare that I have not previously submitted this assignment for assessment in any other unit, except where explicit permission has been granted by all unit coordinators involved, or at any other time in this unit, and that I have not duplicated or stolen ideas from the work of others in any way

Declaration of the learner

I verify that the work I've submitted for this assignment is all my own, and that all

research sources have been properly credited

CHAPTER 1: WEB DESIGN AND DEVELOPMENT - cành HH Hung niệu 10

1 Utilise website technologies, tools and techniques with good design principles to create a multipage website (ILLO3) L1 21 H11 21111 1112111111110 11 11 1H H11 1 HH rệt 10

1.1 Create a design document for a branded, multipage website supported with medium fidelity wireframes and a full set of client and user requirements (PŠ) - 10

2 Use your design document with appropriate principles, standards and guidelines to produce a branded, multipage website supported with realistic content (P6)

BTEC ae

LIST OF TABLES AND FIGURES

Figure 1 ser requests about the web +: c2 vn HS 211101111011 1111111 1c HH ra 10

Figure 2 the link between the admin UIS€T - c0 202022112211 2111 1212121 111211112 11 8tr 13

Figure ©0 -i6 7 8n 14

I0] An aa 1

I2 bs80):a 0 6 1

I0 si NNN 2

l0 lv1) 0:1 TỚớợNNýN" 2

IE020558.001930)00: n0 Ý 3

20s 00s 0 3

II P2)0š-8008 9001 8N VGaid4Á 3

Figure 11 Entity Relationship [DIagTram S2 2n S212 11 111110111111110111 11111 HH thêu 4 Di 00-5: 0 .ẦẦ 5

1280681 1001077777 ` ốỐ .1l àâ.ẼỐ.Ố.ỐỐỐ.Ö 6

I6 7

Figure 15 shop pag€ Lc tH 1 Tnnn H1 2111211110111 111110101 11 H1 0111 TH HH HH Hà rệt 9 Figure 16 product Information p8E€ c2 111 1112111 1211111111211111111 11 11101111 tt 9 II 8VA in,,: 0n 10

I0 5x9ï:1aá 1,280 a 10

I0 0 12

I0 0 13

Figure 21 Full display of functions and prodUCfs - - - - c2: 212v S 212tr re 14 Figure x10 AẰEEA4Ả1 15

I2 28M:3901198100)0š5))712 888 15

Figure 24 Product COnf8CE - ác L2 2111121 121111211 111111111111111111 111111 1111111111111 11111111 xk 16

VI

PERFOMED STUDENT PHAN QUANG HOP

Table 2 Test Cases

Table 3 Test logs

vil

PERFOMED STUDENT: PHAN QUANG HOP

‘BTEC ar

INTRODUCTION

Programming plays a very important role in life Coming to this report, we will learn and Explain the characteristics of procedural, object-oriented and event-driven programming, conduct an analysis of the appropriate Integrated Development Environment It will help us understand more deeply what an algorithm is, how is an algorithm defined? Let's find out in this article!

This report includes the following contents:

PERFOMED STUDENT: PHAN QUANG HOP

vill

A full set of client and user requirements:

- At its most basic, it could be about the presence of an online channel; at its most complex, it can be an online purchase, operational functionality or any number of features These are the client's requirements, the way the client intends to extract value from their website is codified into specific results

- The user request is how the user intends to extract value from the web page What are people trying to do online? What content or functionality are they looking for and what task or question are they trying to solve using the site?

Understanding user requirements requires user research

*Sponsor point of view

— How well the system does it

Figure 1 User requests about the web When we know how people use the internet and our specific product, you can:

- From the outset, incorporate accessibility into relevant project phases

- Build solutions to reach faster, reach customers quickly

- avoid wasting time guessing by making educated judgments among the many possibilities

PERFOMED STUDENT: PHAN QUANG HOP

:BTEC

ñsữ

‘BTEC

- Limit the number of times you have to go back and solve problems

- Avoid having to give in later because you delay the accessibility resolution for too long

- Better understanding of accessibility standards, regulations and other needs

- Developers, project managers and other stakeholders will profit from all of this

User-friendly Set up a site with | Easy to use with | High demand for easy to use full functionality| everyone eye- | use

without going | catching images through other

When problems | Developers can | Users can | High demand for arise, users can | communicate contact via | use

contact the site | with each other | email, phone manager to | to solve | number of the

Users can see all the items they have previously added to decide whether to buy

or not

Before checkout you need to add

so that it is Users will like the

things they are interested in proposed in front

of them All buyers must

be evaluated before so that the next person who buys will High demand for

PERFOMED STUDENT: PHAN QUANG HOP

10

Use case diagram:

the people who design and implement the information system and the people who use it; create a comprehensive and complete view of the information system intended to be built This overarching view helps to fully capture user requirements; serving from the analysis phase to the design, evaluation and testing of information technology application products

the following main purposes:

* Provides information about the system context

* Capture the needs of the system and usage needs

+ Validate the architecture of a system

* Start the process of implementing and developing test cases, testing the system's functions

« Analysts partnered with domain experts to create this report

II PERFOMED STUDENT: PHAN QUANG HOP

‘BTEC

manage cart

user management

product information

Sitemaps are divided into some categories:

+ XML Sitemap: for search engines It helps to report to search engines like Google about website structure, content update frequency & which pages are prioritized in search results

+ HTML Sitemap: mainly let readers know the site's map and they can easily find information + A video section in the sitemap helps determine the appropriate duration, rating & age

‘BTEC

Database:

- A database diagram that graphically describes the database structure and relationships

between database entries Diagrams can be created for data sources, schemas, or tables

Consider using primary and foreign keys to build relationships between database entries

- We have created 6 main tables of the system including: users, support people, products,

customers, payment, shop

L1] cart Í EjBrcwse i4 Sructue -$ Search 3zlnsert ÍïEmpty @ Drop @ InneDB utf8mb4_general_ci i£.@ ki5 - E1 client te Browse 34 Structure $ Search }elnsert GREmpty G Drop @ InnoDB utf8mb4_general_ci 16.0 KiB - [] login Ww ‘| Browse 4 Structure % Search jclnsert GREmpty @ Drop @ InnoDB utfémb4 general ci 16.0 KiB = [] products gp [i] Browse jj Structure % Search jelnsert GHEmpty ©@ Drop @ InnoDB utfồmb4 general ci 16.0 Kis - [] register yy jBrowse 3⁄Strurture % Search jelnsert Empty @ Drop @ InnoDB utfémb4_general_ci 16.0 KiB - L] shop Ấy [Browse i Structure -$ Search 3¿lnsei £Empty @ Drop @ InnoDB utfémb4_general_ci 16.@ Kiä =

Figure 4 database

And the following is the input data value of each table:

+ Client:

# Name Type Collation Attributes Null Default Comments Extra Action

[] 2 CLIENTNAME varchar(100) u6mb4 general_ci No None ø?Chane @Drop More

O 4 SEX varchar(100) utfömb4 general_cỉ No None @ Change @Drop More [l 5 TOBUYPRODUCTS varchar(100) utfØmb4 general cỉ No None oP Change @Drop More

LÌ 6 ADDRESS varchar(100) utfổmb4 general_c¡ No None @ Change @Drop More (1 7 PURCHASEDATE int(100) No None @ Change @ODrop More

Indexes @

Action Keyname Type Unique Packed Column Cardinality Collation Null Comment

@ Edit eh Rename ©@ Drop PRIMARY BTREE Yes No CLIENTID 0 A No

Figure 5 Client + Admin table:

1

PERFOMED STUDENT: PHAN QUANG HOP

3 ‘BTEC

# Name Type Collation Attributes Null Default Comments Extra Action

[] 1 SHOPID > char(10) utf8mb4_general_ci No None @ Change @Drop More

{J 2 SHOPNAME varchar(100) utf6mb4 general c¡ No None @ Change (@Drop More () 3 ADDRESS varchar(100) utf8mb4_general_ci No None @ Change @Drop More

# Name Type Collation Attributes Null Default Comments Extra Action

[] 1 USERNAME ¿> varchar(100) utfômb4 general cỉ No None @ Change @Drop More

{| 2 NAME varchar(100) utf8mb4_general_ci No None @ Change @Drop More

| Indexes @ |

Action Keyname Type Unique Packed Column Cardinality Collation Null Comment

o Edit Eh Rename @ Drop PRIMARY BTREE Yes No USERNAME 0 A No

Figure 7 register table + Items table:

# Name Type Collation Attributes Null Default Comments Extra Action

2 PRODUCTSNAME varchar(100) utf8mb4_general_ci No None @ Change @ODrop More

O 4 VALUE char(10) ut8mb4_general_ci No None of Change @ODrop More

© 5 CONSULTANTD varchar(100) utf8mb4_genersl_ci No None Change @Drop More [| 6 PRODUCTINFORMATION char(10) ut?8mb4_general_ci No None Change @Drop More

& PRODUCTSPURPOSE Varchar(100) utfémb4_general_ci No None @ Change @ODrop More

PERFOMED STUDENT: PHAN QUANG HOP

3 ‘BTEC

‘BTEC —-—

Indexes @

Action Keyname Type Unique Packed Column Cardinality Collation Null Comment

& Edit eh Rename @ Drop PRIMARY BTREE Yes No PRODUCTSID 0 A No

Create anindexon 1 columns Go

Figure 8 products line item:

# Namo Type Collation Attributes Null Default Comments Extra Action

(J 1 PRODUCTSID › char(10) utf8mb4_general_ci No None @ Change (@Drop More (J 2 PRODUCTSNAME varchar(100) utfmb4_general_ci No None o Change (@Drop More {) 3 PRODUCTSUSE varchar(100) utf8mb4_general_ci No None @ Change @oDrop More

Indexes @

Action Keyname Type Unique Packed Column Cardinality Collation Null Comment

@ Edit eb Rename @ Drop PRIMARY BTREE Yes No PRODUCTSID 0 A No

Figure 9 line item

Login in :

# Name Type Collation Attributes Null Default Comments Extra Action

O 1 USER » varchar(100) utfémb4_general_ci No None @ Change @Drmp More [] 2 PASSWORK varchar(100) utfmb4_general_ci No None @ Change @Dmp More

Indexes @

Action Keyname Type Unique Packed Column Cardinality Collation Null Comment

Figure 10 login in Entity-relationship model Diagram:

PERFOMED STUDENT: PHAN QUANG HOP

3 PRODUCTSUSE : varchar(100) @ SHOPID : char(10) f)

w PHONE = int(100 @ PRODUCTSNAME : varchar(100) He dc ke /

mì IMPORTDATE : date @ CLIENTID : char(10) Ƒ

@ VALUE - char(10) =) CLIENTNAME - varchar(100)

3 CONSULTANTD : varchar(100) # PHONE : int(100)

ø PRODUCTINFORMATION - char(10 @ SEX : varchar(100)

m SALEDATE - date = TOBUYPRODUCTS : varchar(100)

Wireframe supports web interface design problems This tool is an important and

indispensable part of the interaction design process of companies

- Not only newbies, but many people with long-term design experience are still confused between Wireframe and Sketch The figure below shows how these two structures can be distinguished

- Our website is carefully wireframed with a clear and detailed plan that includes the following pages:

Sign-up page:

PERFOMED STUDENT: PHAN QUANG HOP

Sales management software © 2022 Phan_hop

PERFOMED STUDENT: PHAN QUANG HOP

NO IMAGE AVAILABLE

Mobile phone Xiamomi 11 - Support

NO IMAGE - NC IMAGE

AVAILABLE AVAILABLI

Acer Predstor Helios 300

PH315-55-76KG Laptop gaming ASUS ROG Zephyrus

Mobile phone OPPO Find XS Pro

Support 5G

Laptop Acer Nitro 5 Tiger ANS15-58 T9U) 9) ee

Laptop Dell G15 Ryzen Edition 5515

About Mega Customer information Recruitment Shipping Policy News Warranty Policy Promotion information Promotion information

Contact, comment Corporate customers

Phan_hop Computer Company Company account

| Ham Nghi - Da Nang

PERFOMED STUDENT: PHAN QUANG HOP