Tiểu Luận Môn Học Thiết Kế Web Thiết Kế Website Bán Máy Ảnh Cho Cửa Hàng Kingcame.pdf

Các bạn trẻ ngày càng quantâm nhiều hơn về máy ảnh và nghệ thuật nhiếp ảnh, họ xem đó là một cách hiệu quả đểthể hiện một góc nhìn riêng của bản thân đối với những sự kiện, hoạt động đời

Trang 1

TIỂU LUẬN MÔN HỌCTHIẾT KẾ WEB

THIẾT KẾ WEBSITE BÁN MÁY ẢNH CHO CỬA HÀNG KINGCAME

GV: ThS Võ Quốc Lương SVTH: Nguyễn Hoàng Hiệp MSSV: 2024802010235 LỚP: D20CNTT04

Trang 2

TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT

VIỆN KỸ THUẬT CÔNG NGHỆ

TIỂU LUẬN MÔN HỌCTHIẾT KẾ WEB

THIẾT KẾ WEBSITE BÁN MÁY ẢNH CHO CỬA HÀNG KINGCAME

GV: ThS Võ Quốc Lương SVTH: Nguyễn Hoàng Hiệp MSSV: 2024802010235 LỚP: D20CNTT04

BDNH DƯƠNG - 04/2021

Trang 3

MỤC LỤC ii

DANH MỤC HDNH iv

MỞ ĐẦU 1

CHƯƠNG 1 KHẢO SÁT VÀ PHÂN TÍCH BÀI TOÁN 2

1.1 Phát biểu bài toán 2

1.2 Phân tích các chức năng 2

1.2.1 Giới thiệu trang Web bán máy ảnh Kingcame 2

1.2.2 Danh mục sản phẩm 2

1.2.3 Liên hệ 2

1.2.4 Đăng ký, đăng nhập 2

1.2.5 Xem thông tin sản phẩm 2

CHƯƠNG 2 GIỚI THIỆU CÔNG NGHỆ SỬ DỤNG 3

2.1 Giới thiệu về HTML 3

2.1.1 HTML là gì? 3

2.1.2 Công dụng của HTML 3

2.1.3 Định dạng của HTML 3

2.1.4 Một số ưu điểm nổi bật của HTML 3

2.1.5 Nhược điểm của HTML 4

2.2 Giới thiệu adobe Dreamweaver 4

2.3 Ngôn ngữ CSS 5

2.4 Ngôn ngữ Javacript 5

CHƯƠNG 3 THIẾT KẾ GIAO DIỆN 6

3.1 Thiết kế sơ đồ 6

3.2 Giao diện trang chủ 6

3.3 Giao diện thanh menu 7

3.4 Giao diện trang Giới thiệu 8

3.5 Giao diện trang Liên hệ 9

3.6 Giao diện trang sản phẩm 9

9

3.7 Giao diện trang Chi tiết sản phẩm 11

3.8 Giao diện trang quản lý tài khoản 12

Trang 4

3.9 Giao diện phần footer 12

CHƯƠNG 4 THIẾT KẾ CHƯƠNG TRDNH 14

4.1 Code trang chủ 14

4.1.1 Source code HTML 14

4.1.2 Định dạng CSS 16

19

4.2 Code Trang giới thiệu 26

4.3 Code trang Liên hệ 27

4.3.1 Source Code HTML 27

4.4 Code trang hiển thị sản phẩm 29

4.5 Code trang Chi tiết sản phẩm 32

4.6 Code trang Quản lý tài khoản 35

4.7 Code trang phân mục sản phẩm theo hãng 36

KẾT LUẬN 37

3.Hướng phát triển 37

TÀI LIỆU THAM KHẢO 38

Trang 5

Hình 3.1: Sơ đồ website 6

Hình 3.2: Giao diện trang chủ 6

Hình 3.3: Giao diện thanh menu trên máy tính 7

7

Hình 3.4: Giao diện thanh menu trên điện thoại 7

Hình 3.5: Giao diện trang giới thiệu 8

Hình 3.6: Giao diện trang liên hệ 9

Hình 3.7: Giao diện trang sản phẩm 1 9

Hình 3.8: Giao diện trang sản phẩm 2 10

Hình 3.9: Giao diện trang hiển thị sản phẩm 11

Hình 3.10: Giao diện trang chi tiết sản phẩm 11

Hình 3.11: Giao diện trang quản lý tài khoản 12

Hình 3.12: Giao diện phần chân Footer trên máy tính 12

Hình 3.13: Giao diện phần footer trên điện thoại 13

Hình 4.1: Code HTML trang chủ 1 14

Hình 4.2: Code HTML trang chủ 2 14

Hình 4.3: Code HTML Trang chủ 3 15

Hình 4.4: Coder HTML Trang chủ 4 15

Hình 4.5: Code HTML Trang chủ 5 15

Hình 4.6: Code HTML Htrang chủ 6 16

Hình 4.7: Code CSS Trang chủ 1 16

Trang 6

Hình 4.25: Code HTML trang Giới thiệu 27

Hình 4.26: Code CSS trang Giới thiệu 27

Hình 4.27: Code HTML trang Liên hệ 27

Hình 4.28: code CSS trang Liên hệ 1 28

Hình 4.29: Code CSS trang liên hệ 2 28

Hình 4.30: Code HTML trang hiển thị sản phẩm 29

Hình 4.31: Code CSS trang hiển thị sản phẩm 1 29

Hình 4.36: Code HTML trang chi tiết sản phẩm 32

Hình 4.37: Code CSS trang chi tiết sản phẩm 1 33

Hình 4.38: code CSS trang chi tiết sản phẩm 2 33

Hình 4.42: Code HTML trang quản lý tài khoản 1 35

Hình 4.45: Code HTML trang phân mục sản phẩm theo hăng 36

Hình 4.46: Code CSS trang phân loại sản phẩm theo hãng 1 36

Hình 4.47: Code CSS trang phân loại sản phẩm theo hãng 36

Trang 7

Ngày nay, khi chất lượng cuộc sống ngày càng được cải thiện thì người ta quantâm nhiều hơn đến các giá trị tinh thần Vì vậy những khoảnh khắc vui tươi, hạnh phúcbên gia đình, người thân, bạn bè luôn được chúng ta mong muốn giữ lại Bên cạnh đó,cùng sự phát triển của Internet thì các trang mạng xẫ hội như Facebook, Twitter,Instagram, Zalo, là nơi để mọi người trao đổi, chia sẻ những suy nghĩ cũng nhưnhững điều học cảm nhận được qua cuộc sống hàng ngày và hình ảnh đã trở thành mộtcông cụ đắt lực cho việc đó Những điều trên làm cho máy ảnh dần trở thành một thiết

bị quen thuộc và quan trọng trong cuộc sống ngày nay Các bạn trẻ ngày càng quantâm nhiều hơn về máy ảnh và nghệ thuật nhiếp ảnh, họ xem đó là một cách hiệu quả đểthể hiện một góc nhìn riêng của bản thân đối với những sự kiện, hoạt động đời thườngdiễn ra trước mắt Chụp ảnh không còn đơn giản là cằm máy lên và bấm nút chụp, họđòi hỏi nhiều hơn ở bức ảnh được chụp, nó phải thật sự đẹp Vì thế, máy ảnh chính làcông cụ quan trọng không chỉ giúp chúng ta lưu giữ những khoảnh khắc sẽ trôi qua màcòn là phương tiện sẽ giúp chúng ta thể hiện cá tính riêng, thể hiện cái nhìn của chínhbản thân mình về thế giới xung quanh

Hiện nay trên mạng đã có nhiều website bán máy ảnh, có thể kể đến một sốwebsite thịnh hành như binhminhdigital.com, Zshop.vn, Mayanh24h.com, Điều đómột lần nữa chứng minh cho tầm quan trọng và mức độ quan tâm của người dùng đốivới máy ảnh Tuy nhiên, đại đa số các website đều sử dụng các thuật ngữ trong lĩnhvực nhiếp ảnh, điều đó dẫn đến việc khó tiếp cận thông tin đối với người dùng phổthông, không quá “sành” về nhiếp ảnh, hoặc lần đầu đến với nhiếp ảnh Vì vậy, việcxây dựng website bán máy ảnh với giao diện đẹp, đầy đủ chức năng nhưng vẫn thânthiện, dễ sử dụng đối với người dùng là điều cần thiết

Để giải quyết vấn đề đó, đồng thời hoàn thành học phần Thiết kế web, cũng nhưhiểu được sâu hơn và sử dụng thành thạo các ngôn ngữ HTML, CSS, JAVACRIPT.Nay em làm một tiểu luận báo cáo cuối kỳ về đề tài “Thiết kế Website bán máy ảnhcho cửa hàng Kingcame” với đầy đủ các chức năng cơ bản của một trang web, có tínhứng dụng, thân thiện và dễ tiếp cận người dùng

Trang 8

CHƯƠNG 1 KHẢO SÁT VÀ PHÂN TÍCH BÀI TOÁN

1.1 Phát biểu bài toán.

CHƯƠNG 2 Website cung cấp các chức năng cơ bản của một website bán hàng,người dùng có thể đăng ký tạo tài khoản và thực hiện việc quản lý tài khoản cá nhânnhư đăng nhập, đổi mật khẩu, Sau đó khách hàng có thể mua hàng trực tuyến mộtcách thuận tiện Hoặc xem các thông tin về máy ảnh như giá, thông số kỹ thuật, đánhgiá, liên hệ với cửa hàng mà không cần đăng nhập

2.1 Phân tích các chức năng.

CHƯƠNG 3 Website cung cấp các chức năng cơ bản dễ dàng tiếp cận ngườidùng, bao gồm:

3.1.1 Giới thiệu trang Web bán máy ảnh Kingcame.

CHƯƠNG 4 Giới thiệu cho khách hàng biết về cửa hàng, về những tiêu chí của cửahàng, thái độ phục vụ và tầm nhìn của cửa hàng nhằm tăng uy tín, quảng bá thươnghiệu và giúp khách hàng tin tưởng hơn khi mua hàng

6.1.1 Đăng ký, đăng nhập

CHƯƠNG 7 Đây là chức năng không thể thiếu đối với mọi trang web bán hàng,khách hàng có thể đăng ký tài khoản, thông qua tài khoản đó có thể quản lý được giỏhàng, lịch sử mua hàng của bản thân

7.1.1 Xem thông tin sản phẩm

CHƯƠNG 8 Trang này nhằm giúp cho khách hàng tìm hiểu về thông số kỹ thuật, cácđặc điểm nổi bật của máy ảnh, xem hình ảnh một cách chi tiết để có thể xem xét đưa raquyết định đặt mua hay không

CHƯƠNG 9

CHƯƠNG 10

Trang 9

CHƯƠNG 12 GIỚI THIỆU CÔNG NGHỆ SỬ DỤNG

12.1 Giới thiệu về HTML

12.1.1 HTML là gì?

CHƯƠNG 13 HTML (Hypertext Markup Language-Ngôn ngữ đánh dấu siêu vănbản) là ngôn ngữ đánh dấu chuẩn dùng soạn thảo các tài liệu World Wide Web, chỉ rõmột trang Web được hiển thị như thế nào trong trình duyệt

CHƯƠNG 14 Ngôn ngữ HTML dùng các tag hoặc các đoạn mã lệnh để chỉ cho cáctrình duyệt (Web browsers) cách hiển thị các thành phần của trang như text vàgraphics

CHƯƠNG 15 HTML là ngôn ngữ xác định cấu trúc của thông tin

CHƯƠNG 16 HTML sử dụng một loạt các thẻ và thuộc tính và được dùng để hiện thịvăn bản và các thông tin khác, cung cấp siêu liên kết tới các tài liệu khác

CHƯƠNG 17

17.1.1 Công dụng của HTML

CHƯƠNG 18 Thiết kế được nội dung và hình thức của trang web

CHƯƠNG 19 Xuất bản được các tài liệu trực tuyến hay truy xuất các thông tin trựctuyến bằng cách dùng các liên kết được chèn vào trang web

CHƯƠNG 20 Tạo ra các biểu mẫu trực tuyến nhằm thu thập các thông tin ngườidùng, quản lý giao dịch…

CHƯƠNG 21 Thêm vào đối tượng các hình ảnh video, âm thanh…

21.1.1 Định dạng của HTML

CHƯƠNG 22 Là một tập tin có phần mở rộng là htm hoặc html

CHƯƠNG 23 Là một tập tin văn bản thuần túy, có chứa các mã đặc biệt gọi làTag(thẻ), thường được đặt xung quanh một khối văn bản nào đó

CHƯƠNG 24 Có thể viết trên nhiều trình soạn thảo: Microsoft Fontpage, notepad…

và được sử dụng nhiều nhất đó là adobe dreamweaver

24.1.1 Một số ưu điểm nổi bật của HTML

CHƯƠNG 25 Nguồn tài nguyên hỗ trợ lớn Ngày nay cộng đồng của HTML đangphát triển ngày càng lớn trên thế giới

Trang 10

CHƯƠNG 26 HTML có thể chạy tương đối mượt mà trên hầu hết những trình duyệtphổ biến nhất hiện nay như: Cốc Cốc, Chrome, FireFox, IE,

CHƯƠNG 27 Mã nguồn mà HTML sử dụng là mã nguồn mở và chúng ta có thể sử dụng một cách miễn phí

CHƯƠNG 28 Quá trình học HTML tương đối đơn giản, dễ hiểu nên người học dễ dàng nắm bắt được các kiến thức căn bản nhanh chóng Quá trình xây dụng cho

website căn bản có thể thực hiện được qua một vài tuần học

CHƯƠNG 29 HTML được quy định theo một tiêu chuẩn nhất định nên việc markup

sẽ trở nên đồng nhất, gọn gàng hơn nhiều

CHƯƠNG 30 Quá trình thực hiện dễ dàng hơn bởi nó tích hợp với nhiều loại ngôn ngữ backend như: PHP, NodeJs, Ruby, Java, để có thể tạo thành một website hoàn chỉnh với đầy đủ mọi tính năng

30.1.1 Nhược điểm của HTML

CHƯƠNG 31 HTML không có khả năng tạo ra sự riêng biệt và mới mẻ cho ngườidùng bởi vì nó thường chỉ có thể thực thi những thứ logic và có cấu trúc nhất định.CHƯƠNG 32 Hiện nay, một số trình duyệt vẫn còn chậm trong việc hỗ trợ cho tínhnăng mới nhất của HTML và đặc biệt là với HTML5

32.1 Giới thiệu adobe Dreamweaver

CHƯƠNG 33 Macromedia Dreamweaver 8 là trình biên soạn HTML chuyên nghiệpdùng để thiết kế, viết mã và phát triển website cùng các trang web và các ứng dụngweb Cho dù bạn có thích thú với công việc viết mã HTML thủ công hoặc bạn thíchlàm việc trong môi trường biên soạn trực quan, Dreamweaver cung cấp cho bạn nhữngcông cụ hữu ích để nâng cao kinh nghiệm thiết kế web của bạn

CHƯƠNG 34 Các tính năng biên soạn trực quan trong Dreamweaver cho phép bạntạo nhanh các trang web mà không cần các dòng mã Bạn có thể xem tất cả các thànhphần trong website của bạn và kéo chúng trực tiếp từ một panel dễ sử dụng vào 1 vănbản Bạn có thể nâng cao sản phẩm của bạn bằng cách tạo và sửa các ảnh trongMacromedia Fireworks hoặc trong ứng dụng ảnh khác, rồi sau đó chèn trực tiếp vàoDreamweaver Dreamweaver cũng cung cấp những công cụ giúp đơn giản hóa việcchèn Flash vào trang web

CHƯƠNG 35 Dreamweaver cũng cho phép bạn Thiết kế các ứng dụng web động dựatheo dữ liệu sử dụng công nghệ máy chủ như CFML, ASP.NET, ASP, JSP, và PHP.Nếu sở thích của bạn là làm việc với dữ liệu XML, Dreamweaver cung cấp những

Trang 11

CHƯƠNG 36 Dreamweaver có thể tùy biến hoàn toàn Bạn có thể tạo cho riêng mìnhnhững đối tượng và yêu cầu, chỉnh sửa shortcut bàn phím và thậm chí viết mãJavaScript để mở rộng những khả năng của Dreamweaver với những hành vi mới,những chuyên gia giám định Property mới và những báo cáo site mới.

CHƯƠNG 41 CSS được cập nhật liên tục mang lại các trình bày phức tạp và tinh vihơn

CHƯƠNG 44 JavaScript là ngôn ngữ dưới dạng script có thể gắn với các file HTML.Được trình duyệt diễn dịch, trình duyệt đọc JavaScript dưới dạng mã nguồn

CHƯƠNG 45 JavaScript là ngôn ngữ dựa trên đối tượng, nghĩa là bao gồm nhiều kiểuđối tượng, ví dụ đối tượng Math với tất cả các chức năng toán học Nhưng JavaScriptkhông là ngôn ngữ hướng đối tượng như C++/Java

CHƯƠNG 46

CHƯƠNG 47

Trang 12

CHƯƠNG 48

CHƯƠNG 49

CHƯƠNG 50

Trang 13

CHƯƠNG 51 THIẾT KẾ GIAO DIỆN 51.1 Thiết kế sơ đồ

Hình 51.1.1.1: Sơ đồ website

Trang chủLiên hệ Gi i thi uớ ệ S n ph mả ẩ

Máy nhảCANON SONYFUJI NIKON

LensCANON SONYFUJI NIKON

Ph ki nụ ệ

Tài kho n ả

c a tôiủ

Trang 14

Chương 3: Thiết Kế chương trình

51.2 Giao diện trang chủ.

Hình 51.2.1.1: Giao diện trang chủ

CHƯƠNG 52 Bao gồm các trang sau: Trang chủ, trang Giới thiệu,trang liên hệ liên

hệ, trang sản phẩm, trang quản lý tài khoản và hiển thị các sản phẩm mới, slider quảngcáo, phần footer

CHƯƠNG 53 Người dùng click vào các mục để chuyển hướng đến các trang khác,click vào biểu tượng hoặc chữ máy ảnh, lens, phụ kiện để truy cập nhanh vào mục sảnphẩm Click vào form tìm kiếm tìm các sản phẩm cần thiết Click vào tên sản phẩm đểxem chi tiết của sản phẩm đó Click vào phía bên trái hoặc phải của slider để xem cácchương trình khuyến mãi, ưu đãi đang được cửa hàng áp dụng Ngoài ra, người dùng

có thể click vào mail ở phần footer để gửi mail về cho cửa hàng, nhập mail ở mụcđăng ký nhận tin khuyến mãi để nhận được các tin khuyến mãi một cách sớm nhất cóthể

53.1 Giao diện thanh menu.

Trang 15

Hình 53.1.1.1: Giao diện thanh menu trên máy tính

Hình 53.1.1.2: Giao diện thanh menu trên điện thoại.

CHƯƠNG 54

CHƯƠNG 55

CHƯƠNG 56 -Ý nghĩa của hoạt động: chuyển trang

CHƯƠNG 57 -Quy tắc hoạt động: người dùng click chuột vào từng mục trong menu

để chuyển sang trang tương ứng

57.1 Giao diện trang Giới thiệu

CHƯƠNG 58 -Ý nghĩa: dùng để giới thiệu về cửa hàng cho người dùng biết, để quan tâm, tin tưởng nhiều hơn cửa hàng

CHƯƠNG 59

CHƯƠNG 60

CHƯƠNG 61

CHƯƠNG 62

Trang 16

Hình 62.1.1.1: Giao diện trang giới thiệu 62.2 Giao diện trang Liên hệ.

Hình 62.2.1.1: Giao diện trang liên hệ

CHƯƠNG 63

CHƯƠNG 64 -Ý nghĩa hoạt động: nhằm giúp người dùng liên hệ với cửa hàng.CHƯƠNG 65 -Thao tác màn hình: Click vào mail để gửi mail cho cửa hàng, click vàobản đồ để xem vị trí cửa hàng trên bản đồ ở trang Google Maps

CHƯƠNG 66

Trang 17

66.1 Giao diện trang sản phẩm.

Hình 66.1.1.1: Giao diện trang sản phẩm 1

CHƯƠNG 67 -Ý nghĩa hoạt động: phân loại các sản phẩm theo loại thiết bị

CHƯƠNG 68 -Thao tác: chọn vào các biểu tượng để đến trang mong muốn

CHƯƠNG 69

CHƯƠNG 70

Hình 70.1.1.1: Giao diện trang sản phẩm 2

CHƯƠNG 71 -Ý nghĩa: phân loại sản phẩm theo nhà sản xuất

CHƯƠNG 72 -Quy tắc hoạt động: người dùng chọn hãng sản xuất cần tìm sau khi đãchọn loại thiết bị ở phía trên để xem sản phẩm

Trang 18

CHƯƠNG 73 -Thao tác màn hình: click vào biểu tượng để đến chuyển đến trang xemcác sản phẩm

CHƯƠNG 74

Hình 74.1.1.1: Giao diện trang hiển thị sản phẩm

CHƯƠNG 75 -Ý nghĩa: xem các sản phẩm theo danh mục đã chọn ở trên

CHƯƠNG 76 -Quy tắc hoạt động: xem bao quát các sản phẩm

CHƯƠNG 77 -Thao tác màn hình: người dùng click vào tên của từng sản phảm đanghiển thị để có thể xem chi tiết sản phẩm

77.1 Giao diện trang Chi tiết sản phẩm.

CHƯƠNG 78 -Ý nghĩa hoạt động: xem thông tin chi tiết của sản phẩm

CHƯƠNG 79 -Quy tắc hoạt động: xem tên, giá, hình ảnh mô tả của sản phẩm, điểmnổi bật của sản phẩm và chọn vào nút “mua ngay” hay “Thêm vào giỏ” để tiến hànhđặt hàng

Trang 19

CHƯƠNG 80 -Thao tác màn hình: click vào từng hình nhỏ ở phía dưới để xem rõ hơnhình ảnh mô tả của sản phẩm Rê chuột vào hình ảnh để xem ảnh với kích thước lớnhơn Click nút Mua ngay hoặc Thêm vào giỏ hàng để thanh toán.

Hình 80.1.1.1: Giao diện trang chi tiết sản phẩm.

CHƯƠNG 81

CHƯƠNG 82

82.1 Giao diện trang quản lý tài khoản.

Trang 20

CHƯƠNG 83

Hình 83.1.1.1: Giao diện trang quản lý tài khoản.

CHƯƠNG 84 -Ý nghĩa hoạt động: đăng ký tài khoản, đăng nhập vào Website khi đã

có tài khoản

CHƯƠNG 85 -Quy tắc hoạt động: người dùng tiến hành đăng ký tài khoản sau đóđăng nhập Nếu các phần thông tin bị để trống thì hệ thống sẽ báo lỗi đăng ký hoặc lỗiđăng nhập Nếu điền đủ các phần thông tin thì hệ thống sẽ thông báo đăng ký / đăngnhập thành công

CHƯƠNG 86 -Thao tác màn hình: điền đầy đủ thông tin sau đó bấm nút Đăng ký /Đăng nhập

86.1 Giao diện phần footer

CHƯƠNG 87

Hình 87.1.1.1: Giao diện phần chân Footer trên máy tính.

Trang 21

CHƯƠNG 88

Hình 88.1.1.1: Giao diện phần footer trên điện thoại.

CHƯƠNG 89 -Ý nghĩa hoạt động: hiện thông tin sơ bộ về cửa hàng, đăng ký nhậnmail khuyến mãi, chuyển trang

CHƯƠNG 90 -Quy tắc hoạt động: người dùng nhập mail của bản thân sau đó clicknút “Nhận mail” để đăng ký nhận mail khuyến mãi Click vào các danh mục menu đểchuyển trang tương tự như ở thanh menu ở phía trên

CH ƯƠ NG 91

Trang 22

CHƯƠNG 92 THIẾT KẾ CHƯƠNG TRDNH 92.1 Code trang chủ

Trang 23

CHƯƠNG 100

Hình 100.1.1.1: Code HTML Trang chủ 3

Hình 100.1.1.2: Coder HTML Trang chủ 4

Trang 24

Hình 100.1.1.4: Code HTML Htrang chủ 6

100.1.2 Định dạng CSS

Hình 100.1.2.1: Code CSS Trang chủ 1

CHƯƠNG 101

Tiêu đề	Thiết Kế Website Bán Máy Ảnh Cho Cửa Hàng Kingcame
Tác giả	Nguyễn Hoàng Hiệp
Người hướng dẫn	ThS. Võ Quốc Lương
Trường học	Trường Đại Học Thủ Dầu Một
Chuyên ngành	Thiết Kế Web
Thể loại	Tiểu Luận
Năm xuất bản	2021
Thành phố	Thủ Dầu Một

Định dạng
Số trang	48
Dung lượng	3,39 MB