đồ án môn học thiết kế website bán nhạc cụ

LOI MO DAU Trong thời đại số hóa mà chúng ta đang sống , một trang web không chỉ là một công cụ truyền thông, mà còn là cửa hàng ảo, một nơi đề tạo ra trải nghiệm cho người dùng và mở ra

ĐỎ ÁN MÔN HỌC THIET KE WEB THIET KE WEBSITE

NGUYEN TAT THANH

ĐỎ AN MON HOC THIET KE WEB THIET KE WEBSITE

Tp HCM, 26 thang 9 nam 2023

BM-ChT-

TRUONG DAI HOC NGUYEN TAT THANH KY THI KET THUC HOC PHAN TRUNG TAM KHAO THi HỌC KỲ 3 NĂM HỌC 2022 - 2023

PHIẾU CHÁM THỊ TIỂU LUẬN/ĐỎ AN

Môn thi: Thiết kế web c1 ye Lớp học phằn:22DKTPMIB Sinh viên thực hiện : NGUYÊN HUY HOÀNG

Ngày thị;:26/09/2023 LL 1 H1 n0 1H11 He, Phòng tỈ1: c2 211 21 re, Đề tài tiểu luận/báo cáo của sinh viên : Thiết kế web bán nhạc cụ - 5a n n E22 n2 E2 se

Phần đánh giá của giảng viên (căn cứ trên thang rubrics của môn học):

Tiêu chí (theo Điểm tôi | Điểm dat

Đánh giá của GV

CDR HP) đa được

Câu trúc CỦA | .0 0200001 ng xnxx báo GÁO ic ueciceititeseitisenitisers

Nội dung

- Các nội dụng | 1 c1 1111111111111 1111 HH HH tre thành phần ¬ EEE EE EEE EEE ooo

65 12

1.3 Chức năng .- T220 1212211211151 2111111111111 011 1k1 k nghành 12 1.4 Ứng dụng cccccncnn xnHH 1 HH HH1 ng He re 13

CHƯƠNG II: GIỚI THIỆU ĐỀ, TẢ I s- 5-5° 5£ 5 s22 eSs£se se sex se eesesee 14

2.1 Tém 14 P0 na an .ẢẢ Ô.Ỏ 14

2.3 Ly do chon thidt ké Website ccccccccccccccccsscessesesesssesesescscsvssstevsesevecsevecsssevsveseees 14

2.6 Môi trường thiết k S1 1121121211211 211 2121 1 1 E121 1211 nga 15

CHƯƠNG II: XÂY DỰNG WEBSITE -5-cscscssecseesserssexserssersersesee l6 3.1 Trang chủ (Homepagỹe) - c1 1212111221211 1111110112111 111120111 kh 16

BLL Gao an cccccccceseeccccencccccccevsececsestetsceececcceccseecececcceeeuusesssttesersececs 16

3.1.3 Kỹ thuật thiết kế - 5s s1 121211211 1111111 2.2 1101212211 1tr rrye 18

3.2 Trang liên hệ (Contacf) - c1 12211121 22111121111 1281151511155 1 11 H1 xxx 35

“ác na an cc ccccccccceseececsccceccccccecsesecsestttscceueccecccsseccccecceeeeususetesessececs 35

EWAvib:hcadaẳđaẻ444 35

3.2.3 Kỹ thuật thiết kế - 56c tt 121111211 1111111 2.2 1101212111 12a 35

3.3 Trang giải đáp thắc mắc (Help / FAQ) - 55s S E2 E21 212tr ryt 39

3.3.1 Giao an cccccccccceceecccsccccccccccevsececeestetsceeueccccccsseccccccceeeeususesttesessecess 39

E1 e ẢẢ 39

3.3.3 Kỹ thuật thiết kế các T21 1121 11111 tt 112111 tre 40

3.3.4 Code thiết kế ¿5s 222211 21122112211211221121112112212111112 1e 40 3.4 Trang danh sách sản phâm (CategOTi€S) - 5 SE EEE1EE1121E1121111 1.111 te 43

B.A] Giao an an 43

3.4.3 Kỹ thuật thiết kế - 5s St 1 121211211 111111 2.2 1112122112121 rrye 44

3.4.4 Code thiết kế 20 222211 2112211221121112112111211221211 11 rrre 44 3.5 Trang giới thiệu (Who are W€?) c1 ng HH nhe Hee 50

“cốc na an cccccccccceecececsnccccccccevsececstsettsceaceccceccssececcccceeeuuaesssttesersececs 50

KV /hõ: eense eee e eens eects ee eeteeecend ee cee ESctGE CEH GE en dae ets GeeEaGeeEtdaeees 50

3.5.3 KY thuat thiet ke cccceccscscescsecsessvescsresessnsecssesessesevsessesseseeseseeseesetseceeees 51

3.5.4 Code thiết kế 50 222211 211221122112112112111211221211 11121 rrre 51 3.6 Ctra s6 dang nhap / dang ky (Login / Sign up) c ccccccccccecssssssssesseeseseeseseseeeeeees 54

3.6.1 Giao an ccccccccccceceececscccccccccevsesecststttsceeueccceccusececcccceeeeuausssttesessececs 54

3.6.3 KY thuat thiet ke cccceccsccscssesecsessvescssesesssevssesessesevsussesseseeseseesevsetseceeees 55

3.6.4 Code thiết kế 50 222211 2112211221121112112111211221212 111 rerre 55 3.7 Trang san pham (Product) cccccccsccsccssescssssessessesscecssesecevssvsscsscsesensevsesevevevsvsevecees 38

“1c na an eee cccccccccceceecccenccccccccevsesecsettttsceececcccccssececcccceeeeuaesssttesersececs 58

mẽ 58

3.7.3 Kỹ thuật thiết kế - 5s tt E111 21121111111 212 1101212211 1tr rrye s9

3.7.4 Code thiết kế 50c 22221 211221122112111211211121112121111121 re 59

3.8 Cửa sô gid hang (Cart) cccccccccccccscscssessescsssesessessssscsessvsecevssvsecsrcsvssnsevsusevevsnseseveeees 65

3.8.1 Giao di@t ool cc ccceccccceceecccccccccccccevsesecststttsceeeeccccccssecececcceeeeusussstteseesececs 65

3.8.3 Kỹ thuật thiết kế - 5s sTt 121211211 111111 22T 1101212211 12tr re 67

3.8.4 Code thiết kế 5s 2 2211 211221122112112112111211221211 111 re 68

CHUONG IV: KET LUAN 74

4.1 Ưu điểm của đồ án - 5 22 22 22112211221122112112211 112111111 rree 74

4.2 Hạn chế của đồ án ST ng nnnn TT ng HH nen re rree 74

4.3 Hướng phát triển của đồ án - s1 E1 1E 211012222211 1 ngu 74 DANH MỤC TÀI LIỆU TAM KHẢO „ T5

DANH MUC HINH

5ì 1n 10

D1 0015 H Fin nh 12

Hanh c6 .Ả 42

5ì 6 43

5ï ch an .ồ 44

Hình 3.4.4L.2 LH HT HT HT TH HT HT TH HH TH TH TH TH HH 44 Hanh E66 45

5ï E66 45

Hình 3.4.4.5 LH HH HH HT TH HT HH TH HT TT HH TH TH HH 46

5c nn .o d 46

Hình 3.4.4.7 nh HT HT HT HT HH TH Tnhh 47 5ì c8 47

Hah 3.4.4.9 ồẦồẦỐỒÖẦ.a ốốỐ Ẽ.Ẽ.Ẽ.Ẽ.Ề 48 Hanh 3.4.4 10 48

5ì n5 73

LOI MO DAU

Trong thời đại số hóa mà chúng ta đang sống , một trang web không chỉ là một công cụ truyền thông, mà còn là cửa hàng ảo, một nơi đề tạo ra trải nghiệm cho người dùng và mở ra cơ hội kinh doanh mới Trong bồi cảnh này, môn học Thiết kế web và đề tài Trang

web bán trà xuất hiện như một sự kết hợp hoàn hỏa giữa sáng tạo và kỹ thuật, nơi chũng ta sẽ học cách tạo ra không gian trực tuyến độc đáo đề thẻ hiện dang cap va gia tri cua san

pham

Thiét ké web không chỉ liên quan đến việc tao ra giao diện đẹp mắt Đó là về việc

xây dựng trải nghiệm người dùng thú vị, làm cho việc tìm kiếm và mua sắm đễ dàng và tạo ra không gian trực tuyến phản ánh độc đáo thương hiệu Nó cũng liên quan đến việc

đảm bảo tính bảo mật và hiệu suất của trang web

Thiết kế web và buôn bán nhạc cụ , hấp dẫn, từ việc lên kế hoạch và thiết kế giao

diện đến quan lý sản phâm và giao dịch trực tuyến

Kết nối thế giới thiết kế web và nhạc cụ thông qua đề tài này.

LOI CAM ON

Đề hoàn thành được đồ án, em biết ơn sâu sắc đối với sự hướng dẫn và hỗ trợ của

Thầy Đặng Đức Trung trong môn học Thiết kế web Cảm ơn thầy đã hướng dẫn các kiến thức về chuyên môn và kỹ năng làm web

Cảm ơn sự kiên nhẫn của Thầy khi giải đáp các câu hỏi và thắc mắc hỗ trợ trong

suốt khóa học Cảm ơn Nhà trường và đặc biết là khoa Công nghệ thông tin đã cho một cơ hội học

tập tại đây, với môn học đầy hữu ích, đóng góp sự phát triển sau này cho sinh viên Các khóa học, chương trình đào tạo đã giúp cho sinh viên như em chuẩn bị tốt cho tương lai Sau nảy

Sinh viên thực hiên

Nguyễn Huy Hoàng

10

CHUONG I

GIOI THIEU VISUAL STUDIO CODE

1.1 Giới thiệu: + Visual Studio Code (VS Code hay VSC) là một trong những trình soạn thảo mã nguồn phô biến nhất được sử dụng bởi các lập trình viên Nhanh, nhẹ, hỗ trợ đa nên táng,

nhiều tính năng và là mã nguồn mở chính là những ưu điểm vượt trội khiến VS Code

ngày càng được ứng dụng rộng rãi

Hinh 1.1.1: Hinh Visual Studio Code

lãi

Hinh 1.1.2: Giao dién chinh

1.2 Lịch sử: + Visual Studio Code được công bó, ra mắt phiên bản thử nghiệm vào ngày 29 tháng 4 năm 2015 bởi Microsoft tại hội nghị Build 2015 Vào ngày 18 tháng 11 năm 2015, Visual Studio Code được phát hành dưới giấy phép MIT và mã nguồn của nó được đưa lên GitHub Chức năng Extesion (tiện ích mở rộng) cũng được công bố Vào ngày l4

tháng 4 năm 2016 Visual Studio Code hoàn tất thử nghiệm và được phát hành chính thức

1.3 Chức năng: + Syntax highlighting, Snippets, Ty déng hoan thanh ma thong minh, Debugging, cải tiền mã nguôn

12

1.4 Ứng dụng:

+ Visual Studio Code là một trình biên tập code được phát triển bởi Microsoft dành

cho Windows, Linux va macOS Nó hỗ trợ chức năng debug, đi kèm với Git, có syntax highlighting, tự hoàn thành code thông minh, snippets, và cải tiên mã nguồn

+ Hầu hết các lập trình viên Frontend đều ứng dụng trình soạn thảo mã nguồn mở miễn phí này cho việc viết code JavaScript, HTML hoặc CSS Ngoài ra, trên thực té, cũng có không ít các lập trình viên Backend dùng V§ Code để viết mã Scala

+ Với VS Code, việc viết mọi loại code trở nên đơn giản và thuận tiện hơn rất nhiều

Ngoài ra, những ai đang làm công việc kiểm thử phần mềm hay quản lý dữ liệu cũng có thê sử dụng trình soạn thảo này

Hinh 1.4: Sw dung VS Code Web Design

13

CHUONG II

GIOI THIEU DE TAI

2.1 Tén website: Seniks Musical Instruments ( SMI )

2.2 Mô tả website: - SMI là một trang web chuyên cung cấp các loại nhạc cụ, công cụ và phần mềm

phục vụ cho công việc sản xuất âm nhạc

- Chi tiét về sản phẩm

-_ Thông tin liên hệ

- Giai dap thắc mắc - Cac sản phẩm dang được bày bán Giới thiệu về chúng tôi 2.3 Lý do chọn thiết kế website:

-_ Hiện nay âm nhạc đã được phố cập ở khắp mọi nơi trên thế giới Chúng ta có thê bắt gặp được hình ảnh những con người đang nghe những bài nhạc, bài hát yêu thích của mình ở bất cứ đâu, bất cứ khi nào Điều đó chứng minh rằng nhu cầu về âm nhạc là không

hề nhỏ Từ đó xuất hiện rất nhiều người có nhụ cầu về việc trở thành một người sản suất âm nhạc và đề làm được điều đó thì nhạc cụ và các công cụ liên quan là không thể thiếu Và để phục vụ cho nhu cầu đó em đã quyết định chọn đề tài nay

14

2.4 So dé sitemap:

Home Contact Help / FAQ Categories Information Products The Company

Product's Information

Our Story Address

Add Product

to Cart

Delete Request Product from Information

Cart Calculate Product Costs

Hinh: 2.4: So do sitemap

2.5 Công nghệ sử dụng:

- Sử dụng ngôn ngữ HTMLS, JavaScript, CSS, và mã nguồn Font-Anwsome-6 đề

thiết kế giao diện

2.6 Môi trường thiết kế: - Visual Studio Code

15

CHUONG III XAY DUNG WEBSITE

3.1 Trang chu (Homepage): 3.1.1 Giao diện:

WMyCatn LZ Login 5 E n | H 5 HOME CONTACT HELP / FAQ CATEGORIES WHO ARE WE? Se I8] MUSICAL INSTRUMENTS

Fender NEW ARRIVALS

PLAYER & PLAYER PLUS ELECTRIC GUITARS

SHOP POPULAR CATEGORIES

Drum Guitar Headphone Microphone Keyboard Software Speaker Synthesizer

Hinh 3.1.1 Dau trang chủ

16

Ibanez Artwood lbanez Artwood lbanez Artwood lbanez Artwood Ibanez Artwood

AWB84CE-WK Acoustic AW84CE-WK Acoustic AWB4CE-WK Acoustic AW84CE-WK Acoustic AWB4CE-WK Acoustic

Guitar, Weathered Black Guitar, Weathered Black Guitar, Weathered Black Guitar, Weathered Black Guitar, Weathered Black

RELIABLE MANY 5 WARRANTY 30

BB beuiveries ® ivcennves @® woncruveo @ bars

Safe and fast shipping The ji Ì: All pri inclusive of tax ‘Simple satisfied or refunded CUSTOMER SERVICES INFORMATION SOCIAL NETWORK PAYMENT METHODS

| ee BS S| LVISAN [i

Hinh 3.1.3 Cudi trang chit

17

3.1.2 Mô tả: - Trang chủ thể hiện chủ đề của trang web chuyên bán các sản phâm về âm nhạc và trên thanh tùy chọn có các mục là Home, Contact, Help/FAQ, Categories, Who are we?, My Cart va Login

- Trang chi cing trưng bày một số dòng sản phẩm của cửa hàng, các sản phâm bán chạy, đang được ưu đãi và mới lên kệ Đồng thời cũng có một số thông tin về các chính sách của cửa hàng, các đường dẫn và phương thức thanh toán mà cửa hàng sử

dụng

3.1.3 Kỹ thuật thiết kế:

- Layout dung thé: <div>, <ul>, <li>, <a>, <button>, <span>,<h2>,<1>,<form>,<label>,<input>,<p> - Ky thuat thiét ke:

+ Hinh anh: img ser + Lién két: a href + Dinh dang: CSS: margin, padding, box-sizing, font-family,width, background- color, border, list-style-type, display, sustify-content, flex-direction, color, text- decoration, font-size, font-weight, position, float, content, clear, vertical-allign, cursor, transition, opacity, text-allign, max-width, max-height, z-index

18

3.1.4 Code thiết kế:

Hình 3.1.4.1 Code JavaScript hiện và chuyển đối Slide ở

wo UNA cds Bbsued URS h N4 N2

hà ete eee

Hinh 3.1.4.7 Code HTML thiét ké n6éi dung cho Homepage (main.html)

View Go Run Teminal Help ¢ Ø Do-mtiweb TRE

o80øœ

3o Run Teminal Help n-th ooon

_ Strang

Pre ee te

Hình 3.1.4.14 Code CSS thiết ké giao dién cho Homepage (main.css)

25

tent: space-around;

Hình 3.1.4.16 Code CSS thiết kế giao điện cho Ho

etre ete ee]

mepage (main.css)

26

cr etre a te ee)

Hình 3.1.4.18 Code CSS thiét kế giao dién cho Homepage (main.css)

27

Py: FS cre a `

Hình 3.1.4.20 Code CSS thiết ké giao dién cho Homepage (main.css)

28

Ge Wun Temminal Help o80øœ

Hình 3.1.4.23 Code CSS thiết kế giao dién cho Homepage (main.css)

Hinh 3.1.4.24 Code CSS thiét ké giao dién cho Homepage (main.css)

30

Pret đc 393 LnSš TT)

Hình 3.1.4.26 Code CSS thiết kế giao dién cho Homepage (main.css)

31

Py: FS cre a `

Hinh 3.1.4.28 Code CSS thiét ké giao dién cho Homepage (main.css)

32

LINH 1T” ee eee eee ee]

Hinh 3.1.4.32 Code CSS thiét kế giao dién cho Homepage (main.css)

34

3.2 Trang lién hé (Contact): 3.2.1 Giao diện:

5 E n I H 5 HOME CONTACT HELP / FAQ CATEGORIES WHO ARE WE? MUSICAL INSTRUMENTS

me / Contact CONTACT US INFORMATION SEND YOUR COMMENTS

Mess

+

+€ ` SS Dope Bin ems & Send Message

Hinh 3.2.1 Hình anh giao dién trang Contact 3.2.2 M6 ta:

WMyCat ÂLogn

- Cung cấp những thông tin như giới thiệu, địa chỉ, số điện thoại -_ Cung cấp giao diện gửi bình luận cho khách hàng nêu lên ý kiến của minh 3.2.3 Kỹ thuật thiết kế:

- Layout dung thé <div>, <p>, <form>, <button> - Liên kết: a href

- Dinh dang: CSS: float, width, padding, margin, display, clear, content, border, font-size, font-weight, text-allign, position, background, transition, cursor

35

3.2.4 Code thiết kế:

Do80øœ

Hình 3.2.4.1 Code HTML thiết ké noi dung cho Contact (contact.html)

36