báo cáo đâ án đề tài thiát ká website trà sữa cho cửa hàng

Chính điều đó đã đặt ra câu héi cho các cửa hàng và doanh nghiáp, làm thÁ nào để truyền tÁi hÁt được thông tin cợa cửa hàng đÁn với khách hàng một cách đầy đợ và nhanh chóng, hình Ánh c

> ĐẠI HỌC QUỌC GIA TPHCM : 5 S,

TRUONG DAI HOC KINH TE - LUAT

KHOA HE THONG THONG TIN

BAO CAO DO AN

Đề tài: ThiÁt kÁ website trà sữa cho cửa hàng

Giang vién : ThS Tran Duy Thanh Sinh vién thuc hién:

Đặng Thị Thu Kim — K174111250 Thái Hạ Nguyên - K174111264 Ngô Hoàng Thái - K174111274

0si09)1€8811)619)07.5) 000015 7

LL Git thidu hố 7

1.1.1 KhẢo sát thị trưểng (0 20c 2c 2t 2 2E g2 12 11H11 1 tre 7 1.1.2 Vấn để hián nay cợa các website trên thị trưếng - c5 5 22t x‡ctt2tcrrrkxrrrrtrrrrees 7 TA sẻ 7

No nh cố ẦằẦẮẦẮằẮ< 8

1.2.1 n8: 012757 EGEAEEE Ecc bGEAEEGE ES EbEaEEEEE EELS 8 12.2 SÁnphẩm 8

12.3 Lợi thÁ cạnhtranh 8

1.2.4 IU809).0 ¬ 1“ = A s 9

1.3 ChiÁn lược website Sàn TH TT HE HT TH HT TT TT HT rệt 9 1.3.1 n0 s8: 0122757 ca EGEA;EGE ES Eb GEES SE EELS 9 V3.2 Dad tO n 9

143.3 Điểm khác biát cợa websife cành HH HH HH Hư 10 CHƯƠNG 2 CƠ §à LÝ THUYẢT - 55+: 2+ E2 E22 11E221Et E1 H1 HH hư 11 QL N_:' TA " 11

2.1.1 So luge Website ẼẼ - A 11

2.1.2 78110110 22007Ẽ7Ẽ77 ằ.ằada 11

PC NgOm ngit str dung 11

2.2.1 2.2.2 “ 2.2.3 NM he o.- 13

2.3 Dữ liáu và truy xuất dữ liâu - s5 St St 2E 221 TH 112 1.111 rree 13 P5 * 3 4 13

PVC va = A.:::: 14

2.3.3 DOM "7-4 3 14

CHƯƠNG 3 PHAN TÍCH WEBSITE .- 5s 552 TH HT HH HH nu ng 15 E1 5 15

E “Am: 16

AT“ 0 .- 16 3.4

3.5

3.6

3.7 Thông tm cợa các cửa hàng chỉ nhánh

ca ôn

na 16

0si019)1€60:-19069 1 “dd 17

"1 ha e-S- 17

4.1.1 lo HH (((ÁÁK(Á.aÝỈỈỈÍỈẳẮÁIAIaAẢẢ 17

` ẮằẮẮ 17

4.1.3 P0081 0v An .- 17

“MAI 18

“.'.0 an e 19

"1s ẽeằa 20

ha 354 21

NG ẽ aaS 22

47 ‘ 4.8 4.9 Thong na eee 25

4.10 — ChitiÁt tryển dụng cà 562cc 2c tt HH ru 26 4.11 ChitiÁt đăng ký thành viên (S22 E2 E1 22 11 1H ưyu 27 4.12 ChitiÁtưuđãi ìằc nhì Hưng rà 28 4.13 ChitiÁttìm kiẢm chọn th TH HH ng như nh gu hà 29 4.14 Hạn chÁ sử dụng để nhựa E211 Tà TT TK 111211111111 1112121111111 111 ki 30 4.15 Thêm vào giễ hàng Lọ Bà T11 11101111 1101111111111 11111111 11110111111 111 1tr 31 4.16 „0 32

4.17 Thong tin chi tiAt khi đặt hàng 5ó: 22c +22 2t E1 1112 11111 reede 33 4.18 QuÁn lý đơn hàng (ngưễi quẢn lý) 52-55: 5c SE x22 112 211 Hee 34 CHƯƠNG 5 PHƯƠNG PHÁP CHI TIÁTT 52-55: 5 SE 2E22112212112112211221.12 8.11 1.121 ke 36 xố he -.- 36

5.2 Thu thÁp dữ liáu - 5122122 LH HH H HH ree 36 5.3 Chỉ tiÁt các trang ccc ch n2 TH ng TH HH HH re 38 5.3.1 _ Tiêu để và logo 2c à 2n 2n TH TH 38 5.3.2 Trang header và ÍOO(T LH HH HH HH HH HT ĐH HT kh 39 ¬".' .- 42

“kẻ 53 46

lẻ: (.do - 4§ 5.3.6 Thông báo hạn chÁ sử dụng 1n, 0P cececesceceveceeeceesessssvevevevensesevevevensesevetetsesees 49

5.3.7 _ Đăng ky thành viên

5.3.8 ChitiAt dang ky thanh vién

5.3.9 I8: :(6“ẲHi 55 5.3.10 ƯU đãi St HH HH HH HH HH, 58

5.3.12 Tuyen dunn o.ececceccccccsecsssssessessesssssussssssesssessesesusssssesssssecsusssssusssssusssessessessessessessessnesseaneees 61 5.3.13 Chi tiAt tuyéin dung oe ceeccceccccccceccscessesssecsssssecsvcsvessessssssussssssssesuscssessesessessssuessvssnessseeseeeees 64

1." ` hố 65

"nh . 66

“H3 ằ 71 5.3.18 0 nh (ti í ằ.ằ 73

5.3.19 QuÁn lý đơn hàng S0 2212 Tnhh Hee

5.3.20 Cách tAi web lén host

5.3.21 Cach dang ky tên miền

6.1 Những kÁt quÁ đạt được - 522cc tk TH HH 121 gu 81 6.2 _ Điểm hạn chÁ chưa làm được cv SE E111 111111111 TT HE TT rey 81 6.3 _ Hướng phát triển trong tương lai ị 52-5 S222 E2 E2 E22 81

6.4 Đềnghị ý AD ce ccccccccccssessesssesssessssssuscsscsvsssessessssssscsscsusssesssessusssesssssnseerssvesseseeceeueeeessees 81

Danh mục hình Anh

Hình 3.1 Sơ đễ chục năng khách hảng, 5: S1 1 SE E221 1111 1111111111 11111111111 1111 11c 15

I0: 0N? So vai ai on na ea 17 Hình 4.2 Bá cục danh sách con se Hình 4.3 Bá cục trang ChỢy ác TH HH KH Ki HH TT TT HT in

Hình 4.4 Bá cục trang câu chuyán - -á Là Là“ HH HH TH Hà HT kh HT kh Hình 4.5 Bá cục trang thực ơn - L1 TT HH TH HH TT HH TH TT HH Hinh 4.6 Ba cuc trang ng ố Hình 4.7 Bá cục trang thông tin tuyên dụng ve Hình 4.8 Bá cục trang cửa hàng kh HH HH Hà HH TH kh kh HT HH Hình 4.9 Bá cục trang hop tac cece Là LH HH HH HH HH HT KH TT HH Hình 4.10 Bá cục trang đăng ký thành VICI “ =aa Hình 4.11 Bá cục trang chị tLÀt tuyên ụng ¡ác Là HH HH TH HH kh kh kh Hình 4.12 Bá cục trang chỉ tiÁt đăng ký thành viên ¿52-5 2t 221121 2112111111121 errrei 28

Hình 4.13 Bá cục trang chỉ tiÁt ưu đãi -:-:-:-::c th 29

Hình 4.14 Bá cục trang tìm kLÀ1 - : 5L E19 k hà * TH HH TT HH TT HH 30

Hình 4.15 Bá cục trang hạn chÁ để nhựa

Hình 4.16 Bá cục trang thêm vào giễ hàng .32 Hình 4.17 Bá cục giễ hàng - s n 1 2É E1 11111211111111111121111111211111111111111111111111 11111111 tre 33 Hình 4.18 Bá cục thong tin chi tiÁT 0 2 c1 x22 TH 212212 11 He kg 34

Hinh 4.19 Ba cuc 070.01 NNNn nả4444434 35

Hình 5.1 Logo JavascTipt COÍÍ@e Là HH HH TH HH TH KH HH kh ki TK 38 Hình 5.2 Giao đián tiêu dé trang web cà tình HH1 1 HH re 39 I0 in Co r i8 na 39

Hình 5.4 Giao đián header khi trễ chuột vào - c TT E1 1151111111111 1111101110111 111 1101111111 ky 40 Hinh 5.5 Giao dian header khi trễ chuột vòa đanh sách GOH Sàn E111 1111 yeg 40 Hình 5.6 Giao đián header khi hiển thị danh sách con hess Hình 5.7 Giao dian header khi tra CUu ccc ccc cece cece cecene ae ce ce eenee ee ee cece eens ae seeee ce essseesee eee ce sasseeeeeeaaeee Hinh 5.8 Giao dian header khi tré chuét danh sdch con tra CUU .cc.cccccseseseecececeesessesesssvevetetetsessestetseess 41

Hinh 5.9 €6 v0ìr ¡0i 1n - adadd EE EE 42

Hinh 5.10 Giao dian footer sau khi trễ chuột - E1 T151 51111111111111111121111111111111011101111111x 1x 42

Hình 5.11 Giao đián trang ChỢ Là HH HH HH nh HH KH HT Hà HH 44 Hình 5.12 Giao đián trang chợ hiáu ụng sÏideshOwW Lành HH Hà HH KH kh ri 45

Hình 5.13 Giao đián trang chợ hiáu ụng chữ khi trễ chuột - 111111 SE T11 E K1 E11121111111111111111 112 xe 45

Hình 5.14 Giao đián trang chợ hiáu ụng đi chuyển qua lại c5 5c 222 Ex‡ErEterkrrrrkrsrrrkrerrrree 46 Hình 5.15 Giao dian Ban chạy nhất - 47

Hình 5.16 Giao đián Bán chạy nhất khi trễ chuột . s +

Hình 5.17 Giao đián Bán chạy nhất khi trễ chuột vào sÁn phẩm s 5c n2 tre 48

Hình 5.18 Giao đián Câu chuyản Tàn TH HT TH Hà TH TH HT Hà HH hàng 49

Hình 5.19 Giao điản hạn chÁ sử dụng để nhựa L c1 1211 21112111111111110111111 0101111111 xe 50

Hình 5.20 Giao đián thẻ thành viên Javascript COÍÍ6e kh HH HH HH Hành kg 52 Hinh 5.21 Giao dian thẻ thành viên dai mau n@0 c cccccccccccccccccsssssessessesseesecssessessessesseesesseesessessesssesesees 52 Hinh 5.22 Giao dian chỉ tiÁt đăng ký thành viên - s5 2 2 222 21211221122 1211111 re 53

Hình 5.23 Giao dian chi tiAt dang ky thành vién chon quAn huyat c ccsccccccccccseesseessessestessesstesteseeesee 54

Hình 5.24 Giao dian chỉ tiÁt đăng ký thành viên dai mau khi tré ChUGt ccecccceccscecscccseessessseesesseeseeeseeees 54

Hình 5.25 Giao dian chỉ tiÁt đăng ký thành viên thông báo nhÁp đợ thông tỉn .-55: 555cc 55

Hình 5.26 Giao dian chi tiAt dang ký thành viên thành công 5: 5c 222 2tr 55 Hình 5.27 Giao dian thure dom - Sà nàn Ó Hình 5.28 Giao dian thy đơn lúc cuộn trang sÁn phẩm 52-2221 2t 2 2212212112211 1.1 57 Hình 5.29 Giao đián thực đơn khi trễ chuột vào đanh mục 5-5 S1 1222 EEEE11111212121112.1E xe 58 Hinh 5.30 Giao dian thực đơn lúc trễ chuột vào sÁn phẩm —— ee nea e ce cece cease eects cu eeasGEGE cece casassEesEEe ee EEE 58 Hình 5.31 Giao dián thông tin tu đẫt., - - 1S SH TH TT TH TH TH TH TH Hà hàng 60 Hình 5.32 Giao đián chỉ tiÁt ưu đãi - 0 c ccà 122,1 2 2 11H 61

Hình 5.33 Giao đián tuyển đụng cà tt nh TH 21g He, 63

Hình 5.34 Giao dian tuyển đụng đái màu khi trễ chuột 5: 5c S2 St tErErkksrrrrrrkrrree 64 Hình 5.35 Giao đián chỉ tiÁt tuyên dụng sà (cọ 22t HH HH 2n 111111 65 Hình 5.36 Giao đián cửa hàng Là HH HH HH kh Hiến 66 Hình 5.37 Giao dián cửa hàng sau khi đã chọn 5 cà sec 66 Hinh 5.38 Giao in 1n ố 67 Hình 5.39 Giao dián hợp tắC cà HT HH TH HT Hàn HH HT TH HT HH Tà Hà TH nh 68 Hình 5.40 Giao đián tìm ki Ám - c5 2 SE TH ng H2 H1 2 1H11 1 He 69

Hình 5.41 Giao đián tìm kiÁm khi từ khóa rỗng c5 21 22th 22122 12 111k Hình 5.42 Giao dián tìm kiÁm không tìm thấy

Hình 5.43 Giao đián tìm kiÁm khi trễ chuột vào sÁn phâm

Hình 5.44 Giao dián đặt hàng Ặ cài rke

Hình 5.45 Giao đián đặt hàng sau khi trễ Chuột 2 1x TT ET E1 11111111111121110121111111122111 111k

Hình 5.46 Giao đián giễ hàng cà càng TH 110101 111111 11H00 111 110tr Hình 5.47 Giao dian giễ hàng khi trễ chuột - S22 1 2E E112 291211211212111112121111121211111111E1cx xe

Hình 5.48 Giao đián nhÁp thông tin chỉ tiÁT ác St H22 TH g1 2220111 reo

Hình 5.49 Giao dián thông bảo đặt hàng Án HH HH TH TH HT nh TH HH Hàng Hình 5.50 Giao đián admin àLL*H HH HH HH HH kh LH kh HT kh

Hình 5.51 Giao dián đăng nhẮp admin - + 5 52222 2112711121221 11.11 11.211 11k

Hình 5.52 Giao dian Respository cợa github oo cà cà HT TH HH kh HT KH Hình 5.53 Giao dián Github Desktop ding dé tAi code lên server github

Hinh 5.54 Dang vài nổ cố ố ằ

Hình 5.56 Thông tin nameserver 4 LH “HH HH HH HH HH ĐH tk 79 Hình 5.57 Chính sửa naI€S€TVTS 4 LH TH HH HH HH KH hư HH Hư 79 Hình 5.58 Chính custom domain trong Github - - - L1 LH HH Hàng kh HH Hư 80

Lal CAM ON

Tuy la khoAng théi gian hoc tAp môn ngắn ngợi nhưng là cơ hội cho nhóm táng hợp

và há tháng hóa lại những kiÁn thục đã học, đễng thễi kÁt hợp với thực tÁ để nâng cao kiÁn

thục chuyên môn Tuy chỉ có vải tuần chuẩn bị cho đề tài cuái kỳ, nhưng qua quá trình làm

viác cùng nhau, nhóm đã được má rộng tầm nhìn và tiAp thu rat nhiéu kiAn thuc

Từ đó nhóm nhÁn thấy, viác làm đề tài là vô cùng quan trọng — nó giúp sinh viên xây dựng nền tÁng lý thuyÁt được học á trưếng vững chắc hơn Trong quá trình làm đề tài,

dù nhóm gặp nhiều khó khăn, tuy nhiên thầy cô và bạn bè luôn giúp đỡ nhóm để hoàn

thành tát đề tài cũng như viÁt lên bài báo cáo cuái kỳ Nhóm chân thành gửi lễi cÁm ơn

đÁn GV Trần Duy Thanh trong suát quá trình học tÁp

CHUONG 1 TONG QUAN

1.1 Giệi thiệu ý tưãng

1.1.1 KhÁo sát thệ trưáng

Ngày nay công nghá thông tin đã có những bước phát triển mạnh mạ theo cÁ chiều

rộng và chiều sâu Máy tính đián tử, đián thoại, máy tính bÁng đã tra thành công cụ làm

viác, tìm kiÁm thông tin và giAi trí thông dụng cợa hầu hÁt mọi lụa tuái Theo báo cáo

Thương mại đián tử Viát Nam 2019 [1], riêng tại Viát Nam đã có 66% ngưễi truy cÁp internet Đây là cơ hội tiềm năng để các doanh nghiáp, thương hiáu tiÁp cÁn được khách

hàng cợa mình một cách dễ dàng, tiÁt kiám chi phí và hiáu quÁ hơn so với trước đây

Hián nay, đa sá mọi ngưễi đều nghĩ rằng, kinh doanh quán cà phê, trà sữa thì không cần phÁi xây dựng website, chỉ cần fanpage là đợ Nhưng nÁu nhìn vào sá liáu so sánh giữa năm 2018 và năm 2019 [1] tăng đÁn 16% nguễi sử dụng phương tián truy cÁp internet, cho thấy xu hướng sử dụng Đặc biát, trong bAng xÁp hạng thụ tự tìm kiÁm cợa nguễi dùng [1]

thì trung bình Google thu hút mỗi nguễi dành ra 7 phút 42 giây và lướt trung bình 9.54

trang mỗi ngày Bất cụ một thông tin nào, mọi nguễi luôn có thói quen đầu tiên đó chính

là tra cụu Google Chính vì điều đó, nÁu không có website, cửa hàng sạ luôn là <kẻ chÁm chân= so với các đái thợ khác trong ngành nÁu như bễ qua kênh xây dựng thương hiáu vô cùng hiáu quÁ này

Theo xu hướng phát triển mạnh cợa thễi kỳ công nghá sá, đây cũng là cơ hội nhưng

cũng là thách thục đê đưa doanh nghiáp và thương hiáu đÁn gần và lan téa đÁn nhiều nguễi

NÁu định hướng cợa cửa hàng là phát triển và má rộng trong dài hạn, nhất định cần có một Website cung cấp đầy đợ thông tin về sÁn phẩm cũng như giá trị mang đÁn cho khách hàng 1.1.2 Vấn đề biện nay cợa các website trên thệ trưáng

- Trang web tAi chAm: Thông thuéng khách hàng sạ không đợ kiên nhạn dé ché doi

tÁ¡ trang quá 10 giây nÁu không thấy xuất hián bất kỳ phần nào cợa website

- Nội dung, hình Ánh chưa đạt chuẩn: Website chưa có sự đầu tư về mặt nội dung,

không cung cấp thông tin hữu ích cho khách hàng Đặc biát các hình Ánh sử dụng

sao chép, chất lượng hình Ảnh kém

- _ Website khó tương tác với mạng xã hội: Web không có tính thân thián, viác tương

Hiản nay, trà sữa đã trá thành thục uáảng được yêu thích cợa học sinh, sinh viên và đông đÁo dân công sá và các gia đình Dé lam théa mãn nhu cầu cợa thực khách, các thục

uáng và món ăn tăng thêm các hương vị khác nhau, có rất nhiều màu sắc, và cÁ tên gọi hap

dạn đề thu hút khách hàng Đây là thị trưểng tiềm năng để phát triển và đem lại loi nhuAn

cao Các bạn giới trẻ ưa thích thưáng thục các thục uáng trà sữa, đá xay, và đặc biát thích

các cửa hàng trang trí đẹp dé check in và sáng Áo Theo cuộc khÁo sát ngắn 350 ngưễi gễm

cÁ nam và nữ (15-39 tuái) [2] sáng tại Thành phá Hễ Chí Minh và Hà Nội thì có 73% nguễi

đã từng sử dụng trà sữa và trong đó Thành phá Hễ Chí Minh có đÁn 92% Trong sá đó có 6% ngưễi biÁt đÁn trà sữa qua Website

Chính điều đó đã đặt ra câu héi cho các cửa hàng và doanh nghiáp, làm thÁ nào để

truyền tÁi hÁt được thông tin cợa cửa hàng đÁn với khách hàng một cách đầy đợ và nhanh chóng, hình Ánh cợa thục uáng, đễ ăn và cÁ không gian quán một cách sinh động và ấn

tượng nhất qua kênh Website Điều đó đòi hễ¡ cần có một Website chất lượng về hình Ánh

và nội dung, tinh cAp nhAt kip théi và liên tục

Bắt kịp xu hướng phát triển cợa thi kỳ công nghá sá và góp phần làm tăng doanh thu cợa cửa hàng, cung cấp cho khách hàng một kênh thông tin chính xác, kịp thễi, nhóm

đã tiÁn hành nghiên cụu và thiÁt kÁ một Website cửa hàng bán thục uáng đẹp, hữu ích và

tian dung mang tén JavaScript Coffee

1.2 Phan tich kinh doanh

1.2.1 Mục tiêu

- _ CÁp nhÁt thông tin sÁn phẩm sinh động, bắt mắt, thông tin chỉ tiÁt rõ ràng

- _ Cung cấp thông tin về các chương trình khuyÁn mãi nhanh chóng và kịp thễi

- Lan tễa thông tin cửa hàng rộng rãi đÁn nhiều ngưễi va moi noi

- Thu thAp y kiAn phAn héi coa khach hang nhanh chong va tian loi nhất

- _ Thê hián được thông tin chỉ tiÁt về cửa hang và các chỉ nhánh

- Dễ dang tra cụu sÁn phẩm can thiAt

1.2.2 SÁn phẩm

Cũng trong cuộc khAo sát này [2] thì có 21% ngưễi thích uáng trà sữa, 35% thích uáng smoothies và các thục uáng khác dao động từ 2-5% Điều này cho thấy tiềm năng cợa các sÁn phẩm thục uáng (trà, trà sữa, đá xay) tại cửa hàng JavaScript

Trà sữa là thục uáng đơn giÁn kÁt hợp với topping, có thể sử dụng tại quán hoặc

mang về một cách tián lợi với giá tiền hợp lý theo kích cỡ khách chọn

Bánh ngọt kèm trà tạo sự hòa quyán thơm ngon đÁn khó cưỡng

Sinh tá là sự chọn dành cho các bạn trẻ thích trái cây, lái sáng lành mạnh

1.2.3 Lợi thÁ cạnh tranh

1.2.4

Từ nguễn dữ liáu này, cửa hàng phân tích và nắm được hành vi cợa nguễi tiêu dùng, làm cơ sá chÁ biÁn ra những món trà sữa mới hay có những chương trình khuyÁn mãi, các hoạt động độc đáo nhằm cÁi¡ thián trÁi nghiám cợa khách hàng

Loi ich website

Khách hàng có thê truy cÁp thông tin về cửa hàng bất cụ lúc nào và từ bất cụ nơi

đâu bằng một thiÁt bị có kÁt nái vào internet

Khách hàng nêu y kiÁn, đánh giá sÁn phâm, dịch vụ cợa cửa hàng nhanh chóng Cửa

hang trA lễi ngay IÁp tục các câu hễ¡, thắc mắc cợa khách hàng

Giúp khách hàng biÁt về théi gian, địa điểm, hay bất cụ thông tin nào về cửa hàng một cách chợ động, cÁp nhÁt liên tục 24/7

Không phái tiêu tán nhiều tiền cho các đội ngũ marketing truyền tháng Nhễ đó giÁm giá thành và nâng cao trÁi nghiám khách hàng

Đưa ra tất cÁ các tỉnh huang, tao cau héi va trA 1éi san, khach hàng có thể tìm kiÁm thông tin hỗ trợ một cách đơn giÁn và nhanh chóng

1.3 ChiÁn lược website

1.3.1 Mục tiêu

- _ Tăng tương tác với khách hàng mọi lúc, mọi nơi, không còn giới hạn về không gian hay théi gian

- Có thể tìm hiểu được thông tin về địa điểm cợa cửa hang JavaScript 4 các chi

nhánh, tham khÁo thực đơn với hình Anh ấn tượng

-_ CÁp nhÁi liên tục chương trình khuyÁn mãi đề khách hàng nhanh chóng và kịp

théi nam bat thông tin

- _ Tăng khÁ năng nhÁn đián thương hiáu cợa cửa hàng được thiÁt kÁ sáng tạo theo phong cách hián đại, các sÁn phâm được trình bày bá cục tái giÁn, tian loi theo

Tir 18 - 23 tuái: Thích đÁn các cửa hàng đề thưáng thục các món ăn và thục uáng ngon, bị thu hút mạnh bái các hình Ảnh thục uáng, món ăn trang trí đẹp mat Hau

hÁt đều sử dụng các thiAt bi dian thoại, may tính đề tìm kiÁm thông tin các quán cà

phê, trà sữa,

Từ 24 - 30 tuái: Khách hàng làm viác văn phòng công sá, quan tâm chất lượng sÁn phẩm và không gian quán và tìm hiệu thông tin cửa hàng qua website chính thang,

ưu tiên chọn lựa không gian quán đề làm viác

1.3.2.3 Tính cách: Năng động, không ngại đái mới

1.3.2.4 Thu nhạp: Có thu nhÁp hơn 2.000.000 VND để thoÁi mái lựa chọn các thục uáng

có giá tiền từ 40.000đ - 60.000đ

1.3.2.5 Khu vực: Thợ Đục, QuÁn 1, QuAn 2, QuAn 3, QuAn 6, QuAn 8, QuAn I1: Đông đúc

các truéng học, văn phòng làm viác cợa các co quan

1.3.3 Điểm khác biệt cợa website

1.3.3.1 ThiÁt kÁ

Trang Web sử dụng phong cách thiÁt kÁ hián đại, màu sắc nhã nhặn và thanh lịch

Logo Javascript: Được thiÁt kÁ tái giAn, an tuong thu hut bai mau sắc nhã nhặn và

phông chữ độc đáo

Bá cục rõ ràng, đơn giÁn và dễ hiểu: Trang Web được tạo ra không phÁi¡ là để phô trương những thiÁt kÁ phục tạp, sáng tạo mà tÁp trung vào điểm chính đề khách hàng

dễ đàng thao tác để đạt được nhu cầu: Đặt hàng, xem thông tin chi tiAt sAn pham va

chi nhánh, tra cụu sÁn phẩm

Sử dụng phông chữ: Tạo điểm nhắn cho website, giúp cửa hàng dễ tiÁp nhÁn thông tin từ website cửa hàng và giúp khách hàng thoÁi mái khi đọc

Tính đễng nhất trong thiÁt kÁ: Sự kÁt hợp hài hoài giữa phông chữ, các hình Ánh

trong một trang Web thu hút sự chú ý cợa khách hàng

1.3.3.2 Tính cạp nhạt

Các khuyÁn mãi được cÁp nhÁt liên tục

CAp nhÁt hình Ánh cợa sÁn phâm một cách nhanh chóng

1.3.3.3 Tính hữu ích

Hiển thị các chương trình ưu đãi ấn tượng để khách hàng kịp thễi nắm bắt

Phân chia theo từng mục có hình Ánh minh họa, giúp khách hàng hình dung được sÁn phẩm

Gợi ý khách hàng những sÁn phẩm bán chạy nhất đề dễ dàng lựa chọn

Cung cấp thông tin các chỉ nhánh cợa cửa hàng, để khách hàng dễ dàng tra cụu Cung cấp thông tin ung tuyén chi tiAt

CHƯƠNG 2 CƠ Sâ LÝ THUYÀT

2.1 Tổng quan về Website

2.1.1 Sơ lược website

Website bao gém toàn bộ thông tin, dt liau, hinh Ánh về các sAn phẩm, dịch vụ và

hoạt động sÁn xuất kinh doanh mà doanh nghiáp muán truyền đạt tới ngưễi truy cÁp Internet Với vai trò quan trọng như vÁy, có thể coi Website chính là bộ mặt cợa Công ty,

la noi dé don tiÁp và giao dịch với các khách hàng trên mạng Website không chỉ đơn thuần

là nơi cung cấp thông tin cho ngưễi xem, cho các khách hàng và đái tác kinh doanh cợa doanh nghiáp mà còn phÁn ánh được những nét đặc trưng cợa doanh nghiáp, đÁm bÁo tính

thẩm mỹ cao, tián lợi cho thao tác cợa khách hàng

Website không những đã trá nên rất phá biÁn mà còn là công cụ không thể thiÁu đái với mỗi doanh nghiáp và cá nhân hoạt động kinh doanh hián nay Đây là phương thục quÁng bá thông tin nhanh nhạy và tiÁp cÁn khá hiáu quÁ đái với ngưễi dùng Internet Website được đánh giá là công cụ dễ dàng để chăm sóc khách hàng tiềm năng đếng thếi

má rộng khách hàng mục tiêu đái với mỗi doanh nghiáp

Mặt khác, website chính là bước tiÁn quan trọng và hiáu quÁ trong viác thực hián chiÁn lược marketing cợa công ty Đái với cá nhân, sử dụng các mạng xã hội, xem thông tin trên website là cách đơn giÁn và nhanh nhất để có thể nắm được đầy đợ các thông tin

cần thiÁt cợa sÁn phẩm, dịch vụ và là cách đơn giÁn để tìm kiÁm khách hàng, thu thÁp thông

tin cợa các đái tác Đái với doanh nghiáp, Website là một cửa hàng Áo với hàng hoá và dịch

vụ có thê được giới thiáu trên thị trưểng toàn cầu Cửa hàng đó má cửa 24 giễ một ngày,

7 ngày l tuần, quanh năm, cho phép khách hàng tìm kiÁm thông tin, xem sÁn phẩm và dịch

vụ bất cụ lúc nào họ muán

2.1.2 Phân loại Website

Dựa theo cầu trúc và cách hoạt động, có thê phân chia website thành 2 dạng: website tĩnh và website động

Website tĩnh không phAi chụa những nội dung, hình Ánh tĩnh, mà là những website

không có sự tương tác với ngưễi dùng, chỉ giao tiÁp I chiều Nội dung được lưu trực tiÁp trên máy chợ và truyền tÁi nguyên vẹn tới nguễi sử dụng Ngược lai, website dong thuéng

HTML là chữ viÁt tắt cợa cụm từ HyperText Markup Language dịch là Ngôn ngữ

đánh dấu siêu văn bÁn) được sử dụng để tạo một trang web, trên một website có thê sạ chụa

nhiều trang và mỗi trang là một tÁp tin HTML Cha đẻ cợa HTML là Tim Berners-Lee,

cũng là ngưễi khai sinh ra World Wide Web và chợ tịch cợa World Wide Web Consortium

(W3C - tá chục thiÁt IÁp ra các chuân trên môi truéng Internet)

Một tài liáu HTML được hình thành bái các phần tử HTML (HTML Elements) được quy định bằng các cặp thé (tag), các cặp thẻ này được bao bọc bái một dẫu ngoặc nhọn và

thuéng là sạ được khai báo thành một cặp, bao gem thé ma va the dong Cac van bAn muan

được đánh dấu bằng HTML sạ được khai báo bên trong cặp thẻ Nhưng một sá thẻ đặc biát

lại không có thẻ đóng va dữ liáu được khai báo sa nằm trong các thuộc tính

Một tÁp tin HTML sạ bao gễm các phần tử HTML và được lưu lại dưới đuôi má

rộng là html hoặc htm

2.2.1.2 Cấu trúc HTML

HTML sạ được khai báo bằng các phân tử bái các từ khóa Nội dung nằm bên trong

cặp từ khóa sạ là nội dung cần định dang

Ngoài ra, trong các thẻ còn có các thuộc tính, thuộc tính sạ đặt bên trong thẻ má đầu, mỗi thuộc tính sạ có giả trị được đặt trong dấu ngoặc kép và cách nhau bái dấu cách

2.2.1.3 Vai trò cợa HTML trong website

HTML là một ngôn ngữ đánh dấu siêu văn bÁn nên có vai trò xây dựng cầu trúc siêu văn bÁn trên một website, hoặc khai báo các tÁp tin kỹ thuÁt sá như hình Ánh, video, nhạc, như là một khung sưễng cho website

Như vÁy, dù website thuộc thê loại nào, giao tiÁp với ngôn ngữ lÁp trình nào để xử

ly đữ liáu thi van phAi can HTML dé hién thị nội dung cho nguễi truy cÁp xem

2.2.2 CSS

2.2.2.1 Khái niệm

CSS là ngôn ngữ tạo phong cách cho trang web — Cascading Style Sheet language dùng đề tạo phong cách và định kiểu cho những yÁu tá được viÁt dưới dạng ngôn ngữ đánh

dấu mà cụ thê là HTML Ngoài ra, nó có thể điều khiển định dang cợa nhiều trang web

cùng lúc để tiÁt kiám công sục cho ngưễi viÁt web, phân biát cách hiển thị cợa trang web với nội dung chính cợa trang bằng cách điều khiên bá cục, màu sắc, và phông chữ

2.2.2.2 HTML va CSS

Mái tương quan giữa HTML và CSS rất mÁt thiÁt HTML là ngôn ngữ markup (nền tÁng cợa site) và CSS định hình phong cách (tất cÁ những gì tạo nên giao dián website), chúng là không thể tách rễi CSS về mặt lý thuyÁt không có cũng được, nhưng khi đó website sạ không chỉ là một trang chụa văn bÁn mà không có gì khác

Trong website Javscript Coffee này, HTML được sử dụng để định hình bá cục trang

web và CSS được sử dụng nhằm trang trí, định dạng (chiều cao, chiều rộng, phông chữ, màu sắc), làm cho website lung lĩnh và chuyên nghiáp, thân thián với nguễi dùng hơn hơn 2.2.3 Javascript

2.2.3.1 Khai niém

JavaScript là ngôn ngữ lÁp trình phá biÁn nhất trên thÁ giới trong suát 20 năm qua

Nó cũng là một trong sá 3 ngôn ngữ chính cợa lÁp trình web JavaScript có thể học nhanh

và dễ dàng áp dụng cho nhiều mục đích khác nhau

JavaScript duoc tạo trong muỗi ngày bái Brandan Eich, một nhân viên cợa

Netscape, vao thang 9 nam 1995 Duoc dat tên đầu tiên là Mocha, tên cợa nó được đái thành Mona rễi LiveScript trước khi thÁt sự trá thành JavaScript nái tiÁng như bây giễ Phién bAn đầu tiên cợa ngôn ngữ này bị giới hạn độc quyền bái Netscape và chỉ có các tính năng hạn chÁ, nhưng nó tiÁp tục phát triển theo théi gian, nhễ một phần vào cộng đễng các

1Ap trình viên đã liên tục làm viác với nó

Trong năm 1996, JavaScript được chính thục dat tén la ECMAScript ECMAScript

2 phat hanh nim 1998 va ECMAScript 3 tiAp tuc ra mat vào năm 1999 Nó liên tục phát trién thanh JavaScript ngay nay, gié da hoat déng trén khap moi trinh duyat va trén khap

cac thiAt bi tir di dong dAn may tinh ban

JavaScript lién tuc phat triển kể từ đó, có lục đạt đÁn 92% website đang sử dụng

JavaScript vào năm 2016 Chỉ trong 20 năm, nó từ một ngôn ngữ lÁp trình riêng tra thành công cụ quan trọng nhất trên bộ công cụ cợa các chuyên viên lÁp trình web

2.2.3.2 Ung dung Javascript

JavaScript thưếng được nhúng trực tiÁp vào một trang web hoặc được tham chiÁu qua file js rigng Trong trang Javascript Coffee, Javascript được dùng chợ yÁu bằng hình

thục tham chiÁu với 9 file javascript khac nhau nham str dụng cho những nhiám vụ và mục

đích khác nhau

2.3 Dữ liệu và truy xuất dữ liệu

2.3.1 XML

2.3.1.1 Khai niém

2.3.1.2 Đặc diém coa XML

- - Được dùng cho đữ liáu có cầu trúc

- _ Về trực quan, XML khá giáng với HTML

- XML mién phí bÁn quyền, platform độc lÁp và được hỗ tro rat tat

2.3.1.3 Các phương thục đác file XML

Tuy có nhiều phương pháp đọc ñle XML, nhưng trong website này, Javascript

Coffee su dung AJAX dé doc và xử ly dir iau XML va dtr liau XML duoc sử dụng trong

lưu trữ thông tin sÁn phẩm

2.3.2 AJAX

AJAX là chữ viÁt tat coa Asynchronous JavaScript and XML Nó là một bộ các kỹ thuÁt thiÁt kÁ web giúp cho các ụng dụng web hoạt động bất đễng bộ — xử lý mọi yêu cầu tới server từ phía sau

Bắt đễng bộ có nghĩa là một chương trình có thể xử lý không theo tuần tự các hàm, không có quy trình, có thể nhÁy đi bễ qua bước nảo đó Ích lợi dé thay nhất cợa bất đễng

bộ là chương trình co thé xử lý nhiều công viác một lúc AJAX không phÁ¡ dùng một công

nghá duy nhất, cũng không phÁi¡ ngôn ngữ IÁp trình, AJAX là một bộ kỹ thuÁt phát triển web CÁ JavaScript và XML đều hoạt động bắt đễng bộ trong AJAX KÁt quÁ là, nhiều ụng dụng web có thể sử dụng AJAX để gửi và nhÁn dữ liáu từ server mà không phÁ¡ toàn bộ trang

2.3.3 DOM

2.3.3.1 Khái niệm

DOM la viAt tat coa chtr Document Object Model, dịch tạm ra là mô hình các đái tượng trong tai liau HTML

Trong mỗi thẻ HTML sạ có những thuộc tinh (Properties) và có phân cấp cha - con

với các thẻ HTML khác Sự phân cấp và các thuộc tính cợa thẻ HTML này ta gọi là selector

và trong DOM sạ có nhiám vụ xử lý các vấn đề như đái thuộc tính cợa thẻ, đái cấu trúc HTML

Viác xử ly và làm viác với đái tượng HTML rất phục tạp và đa dạng, chính vì vAy

javaseript có cung cấp cho chúng ta nhiều phương thục, đái tượng và mỗi thành phần như vAy sạ có những nhiám vụ riêng biát

2.3.3.2 Cây cấu trúc trong DOM

Đái với HTML DOM, cấu trúc dạng cây gọi là DOM Tree có nghĩa là mọi thành phần đều được xem là | nút (node), được biêu diễn trên 1 cây Gễm 3 loại chính:

- _ Nút trên cùng gọi là nút gác (root) Tất cÁ các nút ngoại trừ nút gác đều có duy nhất một nút cha (parent)

CHƯƠNG 3 PHAN TICH WEBSITE

3.1 Chuc nang

So dé chuc năng cợa khách hàng

- _ Giới thiáu về cửa hàng Javascript Coffee và lịch sử hình thành

- _ Liên kÁt đÁn trang thẻ thành viên

- _ Liên kÁt đÁn trang thông tin tuyển dụng

- Liên kÁt đÁn trang thông báo hạn chÁ sử dụng để nhựa

- _ Liên kÁt đÁn trang thông tin ưu đãi

Cho phép khách hàng xem chỉ tiÁt về các chương trình ưu đãi mới và hình thục áp

dung coa uu dai tai JavaScript

3.6 Thong tin tuyén dung

- Xem théng tin về JavaScript: thông điáp, giá trị cát lõi, sụ mánh

- - Xem các vị trí cần tuyển dụng hián tại cợa JavaScript

- _ Xem chỉ tiÁt các vị trí và liên há ụng tuyên

3.7 Thông tin cợa các cửa hàng chỉ nhánh

- Xem vị trí cợa tất cÁ cửa hang chi nhánh cợa JavaScript

- Có thể chọn vi trí cửa hàng theo các quÁn á Thành phá Hễ Chí Minh

3.8 Liên hệ

- _ Khách hàng có thê góp ý, khiÁu nại và phÁn hễi một sá thông tin liên quan đÁn sÁn

phẩm hoặc liên quan đÁn cửa hàng JavaScript thông qua mục Góp ý

- _ Xem thông tin liên há cợa JavaScript cho những đái tác có nhu cầu hợp tác

- _ Chuyển đÁn trang đăng ký thành viên, xem thông tin thẻ thành viên

- Phan tiÁp theo bao gẽm: Câu chuyán, Thực đơn, Ưu đãi, Tuyển dụng, Cửa hàng,

Liên há, Tìm kiÁm và Giễ hàng

4.1.2 Footer

- _ Góc trái: logo và dâu xác nhÁn bÁn quyền

- Phan con lai gém: Tin tục: Về chúng tôi và Hôm nay tui có

- _ Liên há: Góp y và Hợp tác

- _ Kênh truyền thông: Facebook, Instagram, Youtube

- _ Khi trễ chuột vào Thực đơn thì sạ hiển thị ra danh sách ba loại thực đơn chính: Thục

uáng, bánh ngọt và sinh tá

- _ Khi trễ chuột vào Liên há thì sa hiển thị ra góp ý, hop tac và dang ky thành viên

- Khung tim kiAm: Khach hang nhAp thong tin can tim kiAm va sau d6 hién thị ra danh sách những thông tin liên quan tới từ khóa cụ thể là tên thục uáng, bánh ngọt và

sinh tá Khách hàng chọn vào một món dé uang, banh ngot hay sinh ta va bắm vào

icon tim kiAm thi sa hién thị ra chỉ tƯÁt sÁn phẩm cần tìm

Hình 42 Bồ cục danh sách con

4.2 Trang chợ

Confent (Nội dung):

- Phan l: Phần banner chụa những nội dung thông tin mới nhất (Gễm 3 banner thay nhau chạy qua lại)

- _ Phần 2: Gễm các mục phá biÁn,nái bÁt và chia làm 3 phần nhễ:

Hình 4.3 Bồ cục trang chủ

4.3 Câu chuyện

Content (Nội dung):

- _ Leff-Content (Nội dung bên trái): Câu chuyán JavaScript gễm có hình Ảnh và nội dung bên dưới

- _ Righf-Content (Nội dung bên phÁi¡): bán mục bài viÁt về tuyển dụng, hạn chÁ sử dụng để nhựa, đăng ký thành viên và ưu đãi

4.4 Thực đơn

Content (Nội dung):

- _ Lef-Content (Nội dung bên trái): Danh mục các nhóm sÁn phẩm gễm có Bán chạy nhất, bánh ngọt, đá xay, trà, trà sữa, topping, sinh tả Khi chọn danh mục nào thì nó

sạ hián sÁn phâm theo danh mục đó

-_ Right-Content (Nội dung bên phÁi¡): Thông tin về các sÁn phẩm theo danh mục gém hình Ảnh, tên sÁn phâm, mô tÁ và giá được sắp xÁp mỗi hàng chụa 3 sÁn phẩm

4.5 Ưu đãi

Content (Nội dung):

- Phan 1: Mét banner hinh Anh vé wu dai nai bAt JavaScript

- Phan 2: Hién thị nội dung va ban uu dai moi nhat coa JavaScript gém có hình Anh

và nội dung bên dưới mỗi Ánh Mỗi hàng bao gễm 2 ưu đãi

4.6 Tuyến dụng

Content (Nội dung) gễm 3 phần

- _ Hình Ánh chìm về JavaScript và chữ nái bên trên Ảnh về thông tin tuyển dụng

O Phién bAn tát hơn cợa chính mình gem có hình Ánh bên trên và nội

dung bên dưới

¡1 Hiển thị các vị trí hián tại cợa J avaScrIpt gém có hình Anh J avaScript chim bên dưới và dòng nội dung vi tri tuyên dụng

o_ Hiển thị các vị trí cần tuyển và nút xem chỉ tiÁt

Hình 4.7 Bồ cục trang thông tin tuyển dụng

4.7 Cửa hàng

Content (N6i dung) gém 2 phần

- _ Hình Ánh cợa JavaScript chìm bên dưới Nội dung nái bên trên gễm có thanh chọn

các vị trí cợa hàng theo quÁn nằm á giữa hình

- Bén trai: Hién thị các thông tin cợa cửa hàng theo quÁn mà khách hàng chọn và sơ

để vị trí các cửa hang hian tai coa JavaScript bang hinh Anh

4.8 Liên hệ

Gém góp ý (trang Google form) và hợp tác

Content (Nội dung) gem 2 phan

Hình Ánh nền cợa liên há JavaScript

- Hién thị dòng chữ "Cơ hội hợp tác với JavaScript Chúng tôi cần bạn!" và bên dưới hiển thị Ánh cợa JavaScript và thông tin gễm tên, trụ sá, sá đián thoại, chợ sá hữu, email, ma sa thuA,

4.9 Thông tin thẻ thành viên

Content (Nội dung) gễm 3 phần:

- _ Hiên thị hình Ánh nền cợa J avaScript

- Hién thị dòng chữ "Thông tin chương trình thẻ thành viên" và bên dưới là định nghĩa

về chương trình thẻ thành viên

- Phan 3: Hiên thị hình Ánh và nội dung cũng như nút đăng ký dạn đÁn trang đăng ký

4.10 Chỉ tiÁt tuyến dụng

Content (Ndi dung) gém 3 phan

- _ Tiêu đề về vị trí công viác cần tuyên dụng

- Hình Ánh về tuyên dụng cợa JavaScript

- _ Nội dung về vị trí tuyển dụng, thếi gian tuyên dụng, mô tÁ công viác và yêu cầu công viác đái với nguễi tuyển dụng

4.11 Chỉ tÁt đăng ký thành viên

Content (Nội dung) gem 3 phan:

- Tiêu đê: <Đăng ký thẻ thành viên JavaScript=

- _ Thông tin cá nhân: Tên, sá đián thoại, Ngày tháng năm sinh và Email

- _ ĐỊa chỉ liên há và nhẤp mÁt khâu

4.12 Chỉ tiÁtưu đãi

Content (N6i dung) gém 3 phan:

- Tên cợa chương trình ưu đãi

- Gém 2 phan chia lam 2 bén:

o N6idung chuong trinh wu dai gém cach sir dung ma uu dai, théi gian ap dung

va diéu kian ap dung

o Hinh Anh uu dai

4.13 Chi tiAt tim kiAm

Content (Noi dung) gém 2 phan ; ; ; ;

- Hién thi<KAt quA tim kiAm= va <KAt quA tim kiAm cho tir khoa=

- Hién thị hình Ánh cợa sÁn phẩm cần tìm

- Nội dung chỉ tiÁt cợa sÁn phẩm về tên, giá và mô tÁ

Hình 4.14 Bồ cục trang tìm kiếm

4.14 Hạn chÁ sử dụng đã nhựa

Content (Nội dung) gêm 2 phan

- - Nội dung và hình Anh cga chiAn dich han chA str dung để nhựa

- _ Bán mục bài viÁt về tuyển dụng, hạn chÁ sử dụng dé nhựa, đăng ký thành viên và

ưu đãi được xÁp theo chiều dọc

4.15 Thêm vào giệ hàng

Content(Nội dung):

Sau khi nhắn vào nút thêm vào giễ hàng á dưới mỗi sÁn phẩm thì sa hiên thị ra

hộp nội dung gẽm sả lượng sÁn phẩm, thuộc tính cợa sÁn phâm ( lượng duéng, da

va topping)

4.16 Thanh toán

Nội dung: gễm 2 phần

- Phan 1: Tiéu dé: <Gié hang=

- Phan 2: Gém 2 phan

e Phan bén trai: hinh Anh cga sAn phẩm

e_ Phần bên phÁi¡: Tên sÁn phẩm, giá sÁn phẩm, sá lượng, lượng đưểng, đá và topping

4.17 Thong tin chi tiÁt khi đặt hàng

Content (Nội dung): Khi nguễi dùng tiÁn hành đặt hàng, hiển thị ô nhÁp thông tin chỉ tiÁt:

- _ Bên trái là những thông tin yêu cầu nguễi dùng phÁ¡ nhÁp vào ô thông tin bên phÁi¡

gẽm nhÁp họ và tên, nhÁp địa chỉ, nhÁp sa điản thoại, nhÁp địa chỉ email, chọn

hình thục giao hàng và nút chọn thanh toán

4.18 QuÁn lý đơn hàng (ngưái quÁn lý)

Content (Nội dung) gễm 4 phân:

- Phan 1: Tiéu dé: <QuAn ly don hang=

- _ Phần 2: Nội dung về tên khách hàng, địa chỉ khách hàng, sa dian thoai, email va

ghi chú

- Phan 3: Gém 2 phan

e Phan bén trai: hinh Anh cga sAn phẩm

e_ Phần bên phÁi¡: Tên sÁn phẩm, giá sÁn phẩm, sá lượng, lượng đưểng, đá và topping

- Phan 4: Tang tién

Ngoài ra, website cdn bao gém 11 file css va 12 file javascript cũng như dữ liáu cga 71 sAn phẩm khác nhau cùng một sá hiáu ụng khác

Trang web javascriptcoffee.tk đã được kiểm tra trên 3 trình duyát khác nhau là Chrome, Mozilla Firefox va Microsoft Edge

Phông chữ được tháng nhất trong website là phông Tahoma với cỡ chữ 20px Thu thạp dữ liệu

Dữ liáu sÁn phẩm được sử dụng trong website này dưới dạng XML được tá chục theo cấu trúc như sau:

DX: Đá xay T: Trà TS: Trà sữa TH: Topping

o [ID]: Gém 3-4 kí tự, 1-2 kí tự đầu tiên là tên mục sÁn phẩm và 2 ký tự tiAp

theo là sá thụ tự cợa sÁn phâm trong mục ay

o_ [Tên sÁn phẩm], [Mô tÁ sÁn phẩm]: Chuỗi ký tự tiÁng Viát hoặc tiÁng Anh o_ [Giá sÁn phẩm]: Sá thực ( Ví dụ: 15000, không chấp nhÁn 15.000 hay

15,000)

o_ [Đưếng dạn Ánh sÁn phẩm]: Mỗi sÁn phẩm có l Ảnh và được đặt tên theo

ID sẢn phẩm đó

Dữ liáu thông tin chi tiAt (ưu đãi, tuyển dụng, chỉ nhánh cửa hàng) được sử dụng

trong website này dưới dạng XML được ta chục theo cấu trúc như sau:

<text>[Thông tin chỉ tiÁt]</ text >

<image>[Duéng dan Anh]</image>

<text>[Thông tin chỉ tiÁt]</ text >

<image>[Duéng dan Anh]</image>

</detail>

</UD>

<CN>

<detail>

Trong đó:

O TD: Tuyén dung

O UD: Uu dai

O CN: Chi nhénh

o [ID]: Gém 4 ki ty, 2 kí tự đầu tiên là tên mục chỉ tiÁt (TD, UD, CN) và 2 ký

tự tiÁp theo la sa thụ tự cợa sÁn phẩm trong mục ấy

o_ [Tiêu đẻ], [Thông tin chỉ tiÁt], [Địa chỉ]: Chuỗi ký tự tiAng Viat

o_ [Đưếng dạn Ánh]: Mỗi chỉ tiÁt có 1 Ánh và được đặt tên theo ID sÁn phẩm

- Sau day la hinh Anh logo cya ctra hang Javascript Coffee voi kich cd 600x600

Hinh 5.1 Logo Javascript Coffee

5.3 Chi tiAt cac trang

5.3.1 Tiéu dé va logo

Tên từng trang web được đặt tên theo chục năng cợa chúng: Trang chợ, Câu chuyán, Đăng ký thành viên

5.3.1.2 ThiÁt kÁ: Tên trang web và logo bên tay trái

Hình %2 Giao điện tiêu để trang web

5.3.2 Trang header và footer

Vi header va footer sa lap lai cho mọi trang, nhóm dành riêng | phân nói về chục năng cợa hai phân này

5.3.2.1 Header

5.3.2.1.1 Mô tÁ

Theo bá cục header (phần 4.1.1), header bao gễm những mục con sạ liên kÁt tới những trang html khác nhau, riêng khi nhân vào logo sạ quay về trang chợ và có 1 ô tim kiÁm tra cuu, nAu nguéi dùng tra cụu sa hiển thị những gợi ý sÁn phẩm ngay lÁp tục Ngoài ra, trong header, phần thực đơn gễm 3 mục con: Thục uáng, bánh ngọt và sinh tá cũng như phần liên há gễm 2 mục con: Góp ý và hợp tác Những mục con này sạ hiển thị khi nguễi dùng trễ chuột vào mục cha tương ụng

5.3.2.1.2 ThiÁt kÁ

Giao dián được thiÁt kÁ canh giữa và khoÁng cách cợa mỗi phần là 112px với mã màu nên là #000000 cùng với chiều cao là 55px Ngoài ra, header còn được cá định đề khi

cuộn trang không bị mat

Hinh 5.3 Giao dién header

5.3.2.1.3 Hiéu ung