Xây dựng Website bán máy ảnh và phụ kiện máy ảnh sử dụng ASP.NET Core

Xây dựng Website bán máy ảnh và phụ kiện máy ảnh sử dụng ASP.NET Core Khảo sát tình hình thực tế về các cửa hàng máy ảnh và phụ kiện máy ảnh Cơ sở lý thuyết, các công nghệ được sử dụng Phân tích thiết kế hệ thống website bán máy ảnh và phụ kiện máy ảnh: Sơ đồ lớp (Class Diagram), Sơ đồ trình tự (Sequence Diagram), Sơ đồ hoạt động (Activity Diagram), Sơ đồ ERD, Cơ sở dữ liệu Kết quả và quy trình thực hiện

PHIẾU GIAO NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP

1 Thông tin chung

kiện máy ảnh sử dụng ASP.NET Core

Họ và tên sinh viên: Bùi Trung Hiếu

Điện thoại liên lạc: 0948308736

Đồ án tốt nghiệp được thực hiện tại: Hà Nội

2 Mục tiêu của ĐATN

Xây dựng Website bán máy ảnh và phụ kiện máy ảnh sử dụng ASP.NET Core

3 Các nhiệm vụ cụ thể của ĐATN

Để hoàn thành mục tiêu kể trên, đồ án cần làm những nhiệm vụ cụ thể sau:

 Tìm hiểu tổng quan về đề tài

 Khảo sát yêu cầu của người dùng

 Phân tích yêu cầu, đưa ra các chức năng sơ bộ

 Tìm hiểu cơ sở lý thuyết

4 Lời cam đoan của sinh viên:

Tôi Bùi Trung Hiếu cam kết ĐATN là công trình nghiên cứu của bản thân tôi dưới

sự hướng dẫn của ThS.Hoàng Anh Đức

Các kết quả nêu trong ĐATN là trung thực, không phải là sao chép toàn văn của bất

kỳ công trình nào khác

Hà Nội, ngày 26 tháng 06 năm 2023

Tác giả ĐATN

Bùi Trung Hiếu

5 Xác nhận của giáo viên hướng dẫn về mức độ hoàn thành của ĐATN và cho phép bảo vệ:

Hà Nội, ngày 26 tháng 06 năm 2023

Cán bộ hướng dẫn

Hoàng Anh Đức

TÓM TẮT NỘI DUNG ĐỒ ÁN TỐT NGHIỆP

Đồ án tốt nghiệp của em một hệ thống trang web bán máy ảnh và linh kiện máy ảnh.Mục tiêu của đồ án là xây dựng một website hoàn chỉnh để trong tương lai cửa hàng có thểkinh doanh và phục vụ khách hàng từ xa, ngoài ra em còn bổ sung trang quản trị giúpngười quản trị có thể quản lý được hoạt động của website một cách dễ dàng và nhanhchóng và phần services trong tương lai có thể tái sử dụng để xây dựng hệ thống mobile Hệthống cung cấp các chức năng cơ bản của một trang web bán hàng, bao gồm đăng ký tàikhoản, đăng nhập, tìm kiếm sản phẩm, xem chi tiết sản phẩm, thêm sản phẩm vào giỏhàng, thanh toán, đánh giá, theo dõi đơn hàng, danh sách đơn hàng đã mua, ngoài ra còntrang blog Cũng như các chức năng cho quản lý như quản lý tài khoản, quản lý đơn hàng,quản lý các khuyến mãi, quản lý đánh giá, quản lý blog và thống kê báo cáo

Tuy nhiên, do hạn chế về thời gian và quy mô đồ án, một số chức năng chưa đượchoàn thiện và đang trong quá trình phát triển Điều này bao gồm xử lý đơn hàng, quản lýđơn hàng đã mua, theo dõi đơn hàng và xem blog Cũng như các chức năng quản trị baogồm quản lý đơn hàng, thống kê báo cáo và quản lý blog Em sẽ tiếp tục phát triển và hoànthiện những chức năng này để mang lại trải nghiệm tốt hơn cho khách hàng và tối ưu hóaquản lý bán hàng

Đồ án tốt nghiệp này không chỉ là một công cụ để hoàn thành yêu cầu đào tạo, màcòn mang mục đích phục vụ cho em trong việc xây dựng và phát triển trang web bán máyảnh và linh kiện máy ảnh cho cửa hàng

LỜI CẢM ƠN

Em xin gửi lời cảm ơn chân thành tới những người đã đồng hành và đóng góp quantrọng trong quá trình thực hiện đồ án này Đầu tiên, tôi muốn tri ân sự hướng dẫn và hỗ trợtận tâm của ThS.Hoàng Anh Đức Những kiến thức và sự chỉ dạy tận tâm của thầy đã giúp

em vượt qua những khó khăn và hoàn thiện đồ án một cách tốt nhất

Em cũng muốn bày tỏ lòng biết ơn đến gia đình, bạn bè và những người thân yêu đãluôn động viên, tin tưởng và cung cấp hỗ trợ về mặt tinh thần trong suốt quá trình nghiêncứu và hoàn thiện đồ án Sự ủng hộ và động lực này đã giúp em vượt qua những thử thách

và tiếp tục đạt được kết quả tốt

Hơn thế nữa em cũng xin cảm ơn TEDU Channel đã sản xuất ra những video hay, ýnghĩa phù hợp với thực tiễn đề tài em đang nghiên cứu và giúp một phần quan trọng cho

em trong quá trình thực hiện đề tài này

Một lần nữa, em xin chân thành cảm ơn

MỤC LỤC

PHIẾU GIAO NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP I TÓM TẮT NỘI DUNG ĐỒ ÁN TỐT NGHIỆP III MỤC LỤC V DANH MỤC CÁC HÌNH VẼ X DANH MỤC CÁC BẢNG BIỂU XIV Danh mục các từ viết tắt XVI

MỞ ĐẦU 1

CHƯƠNG 1 TỔNG QUAN 3

1.1 Lý do chọn đề tài 3

1.2 Khảo sát tình hình sử dụng phần mềm tương tự trên thế giới cũng như trong nước 4

1.2.1 Tình hình quốc tế 4

1.2.2 Tình hình trong nước 7

1.3 Khảo sát yêu cầu 9

1.3.1 Khảo sát cửa hàng 9

1.3.2 Khảo sát yêu cầu chức năng sơ bộ của website 10

CHƯƠNG 2 CƠ SỞ LÝ THUYẾT 12

2.1 HTML là gì ? 12

2.1.1 Lịch sử hình thành và định nghĩa HTML là gì? 12

2.1.2 Cấu trúc của HTML 13

2.1.3 Ưu điểm và nhược điểm của HTML là gì? 14

2.1.4 HTML hoạt động như thế nào và vai trò của HTML là gì? 15

2.1.5 HTML có mối liên hệ như thế nào với CSS và JavaScript? 15

2.1.6 Con đường phát triển HTML 16

2.2 CSS là gì? 16

2.2.1 Định nghĩa CSS là gì? 16

2.2.2 Bố cục và cấu trúc CSS là gì? 17

2.2.3 Ưu điểm của CSS là gì? 18

2.2.4 Các phiên bản của CSS là gì? 19

2.3 Javascript là gì? 19

2.3.1 JavaScript là gì? 19

2.3.2 Client-side JavaScript 20

2.3.3 Các lợi thế của JavaScript 21

2.3.4 Hạn chế của JavaScript 21

2.3.5 JavaScript ngày nay? 22

2.4 ASP.NET Core là gì? 22

2.4.1 ASP.NET Core là gì? 22

2.4.2 ASP.NET Core ra đời trong hoàn cảnh nào? 23

2.4.3 Xây dựng web UI và web API sửng dụng ASP.NET Core MVC 23

2.4.4 Phát triển client-side 24

2.4.5 Kết luận ASP.NET Core là gì? 24

2.5 SQL Server là gì? 24

2.5.1 SQL Server là gì? 24

2.5.2 SQL Server cung cấp dịch vụ và công cụ gì? 25

2.5.3 Các ấn bản SQL Server 26

2.5.4 SQL Server giúp bạn làm việc dễ dàng hơn như thế nào? 26

2.6 MVC là gì? 26

2.6.1 MVC là gì? 26

2.6.2 Thành phần trong mô hình MVC 27

2.6.3 Luồng đi trong mô hình MVC 28

2.6.4 Ưu nhược điểm của mô hình MVC 29

2.6.5 Ứng dụng của mô hình MVC trong lập trình 30

2.6.6 Cách sử dụng mô hình MVC hiệu quả 30

2.7 Kết chương 30

CHƯƠNG 3 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 32

3.1 Xác định các tác nhân của hệ thống 32

3.2 Mô hình Use Case của hệ thống 32

3.3 Đặc tả một số Use Case chính: 34

3.3.1 Use Case “Đăng ký” 34

3.3.2 Use Case “Đăng nhập” 35

3.3.3 Use Case “Đăng xuất” 36

3.3.4 Use Case “Xem danh sách sản phẩm” 37

3.3.5 Use Case “Xem chi tiết sản phẩm” 37

3.3.6 Use Case “Thêm sản phẩm vào giỏ hàng” 38

3.3.7 Use Case “Đánh giá sản phẩm” 39

3.3.8 Use Case “Tìm kiếm sản phẩm” 40

3.3.9 Use Case “Xem danh sách đơn hàng” 41

3.3.10 Use Case “Thêm mới sản phẩm” 42

3.3.11 Use Case “Xem danh sách tài khoản” 42

3.3.12 Use Case “Xuất thống kê” 43

3.3.13 Use Case “Duyệt đánh giá” 44

3.3.14 Use Case “Cập nhật thông tin slide” 45

3.4 Biểu đồ lớp 47

3.5 Biểu đồ hoạt động 48

3.5.1 Biểu đồ hoạt động “Đăng ký” 48

3.5.2 Biểu đồ hoạt động “Đăng nhập” 48

3.5.3 Biểu đồ hoạt động “Đăng xuất” 49

3.5.4 Biểu đồ hoạt động “Xem danh sách sản phẩm” 49

3.5.5 Biểu đồ hoạt động “Xem chi tiết sản phẩm” 50

3.5.6 Biểu đồ hoạt động “Thêm sản phẩm vào giỏ hàng” 50

3.5.7 Biểu đồ hoạt động “Đánh giá sản phẩm” 51

3.5.8 Biểu đồ hoạt động “Tìm kiếm sản phẩm” 51

3.5.9 Biểu đồ hoạt động “Xem danh sách đơn hàng” 52

3.5.10 Biểu đồ hoạt động “Thêm mới sản phẩm” 52

3.5.11 Biểu đồ hoạt động “Xem danh sách tài khoản” 53

3.5.12 Biểu đồ hoạt động “Xuất thống kê” 53

3.5.13 Biểu đồ hoạt động “Duyệt đánh giá” 54

3.5.14 Biểu đồ hoạt động “Cập nhật thông tin slide” 54

3.6 Biểu đồ tuần tự 55

3.6.1 Biểu đồ tuần tự “Đăng ký” 55

3.6.2 Biểu đồ tuần tự “Đăng nhập” 55

3.6.3 Biểu đồ tuần tự “Đăng xuất” 56

3.6.4 Biểu đồ tuần tự “Xem danh sách sản phẩm” 56

3.6.5 Biểu đồ tuần tự “Xem chi tiết sản phẩm” 57

3.6.6 Biểu đồ tuần tự “Thêm sản phẩm vào giỏ hàng” 57

3.6.7 Biểu đồ tuần tự “Đánh giá sản phẩm” 58

3.6.8 Biểu đồ tuần tự “Tìm kiếm sản phẩm” 58

3.6.9 Biểu đồ tuần tự “Xem danh sách đơn hàng” 59

3.6.10 Biểu đồ tuần tự “Thêm mới sản phẩm” 59

3.6.11 Biểu đồ tuần tự “Xem danh sách tài khoản” 60

3.6.12 Biểu đồ tuần tự “Xuất thống kê” 60

3.6.13 Biểu đồ tuần tự “Duyệt đánh giá” 61

3.6.14 Biểu đồ tuần tự “Cập nhật thông tin slide” 61

3.7 Biều đồ ERD 62

3.8 Xây dựng CSDL 63

3.8.1 AppUsers (Thông tin tài khoản) 63

3.8.2 AppRoles (Danh sách vai trò) 63

3.8.3 Slides (Slide quảng cáo) 64

3.8.4 Transactions (Bảng lưu các giao dịch của hệ thống) 64

3.8.5 Contacts (Thông tin liên hệ người dùng) 65

3.8.6 ReviewImages (Hình ảnh của đánh giá sản phẩm) 66

3.8.7 Orders (Thông tin các đơn hàng) 66

3.8.8 Categories (Danh mục sản phẩm) 67

3.8.9 Products (Danh sách sản phẩm) 67

3.8.10 Brands (Danh mục thương hiệu) 68

3.8.11 ProductImages (Hình ảnh sản phẩm) 68

3.8.12 Languages (Bảng ngôn ngữ) 69

3.8.13 ProductTranslations (Phiên bản dịch của sản phẩm) 69

3.8.14 Promotions (Chương trình khuyễn mãi) 70

3.8.15 ProductReviews (Đánh giá sản phẩm) 70

3.8.16 Carts (Giỏ hàng) 71

3.8.17 CategoryTranslations (Phiên bản dịch của danh mục sản phẩm ) 71

3.9 Kết chương 72

CHƯƠNG 4 KẾT QUẢ CÀI ĐẶT, THỬ NGHIỆM 73

4.1 Giới thiệu về phần mềm 73

4.2 Dịch vụ (services) 74

4.2.1 Dịch vụ tài khoản 74

4.2.2 Dịch vụ quyền hạn 74

4.2.3 Dịch vụ ngôn ngữ 75

4.2.4 Dịch vụ danh sách thương hiệu 75

4.2.5 Dịch vụ sản phẩm 75

4.2.6 Dịch vụ đánh giá sản phẩm 76

4.2.7 Dịch vụ danh mục sản phẩm 76

4.2.8 Dịch vụ giỏ hàng 77

4.2.9 Dịch vụ đặt hàng 77

4.2.10 Dịch vụ slide 77

4.3 Demo sản phẩm 78

4.3.1 Trang chủ (webapp) 78

4.3.2 Trang đăng nhập cho quản trị (adminapp) 81

4.3.3 Quản trị slide (adminapp) 82

4.3.4 Quản trị sản phẩm (adminapp) 84

4.3.5 Trang đăng ký tài khoản (webapp) 88

4.3.6 Quản trị tài khoản (adminapp) 89

4.3.7 Trang đăng nhập (webapp) 94

4.3.8 Trang danh sách sản phẩm (webapp) 95

4.3.9 Tìm kiếm sản phẩm (webapp) 97

4.3.10 Trang chi tiết sản phẩm (webapp) 98

4.3.11 Trang giỏ hàng (webapp) 99

4.3.12 Trang thanh toán (webapp) 100

4.3.13 Đánh giá sản phẩm (webapp) 101

4.3.14 Duyệt đánh giá (adminapp) 101

4.3.15 Xem đánh giá sản phẩm (webapp) 102

4.4 Kết chương 102

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 104

PHỤ LỤC 106

DANH MỤC CÁC HÌNH VẼ

Hình 1-1 Website B&H 5

Hình 1-2 Website MapCamera 6

Hình 1-3 Website Bình Minh Digital 8

Hình 1-4 Hình ảnh cửa hàng khảo sát 9

Hình 1-5 Hình ảnh không gian cửa hàng khảo sát 9

Hình 2-1 HTML là gì 12

Hình 2-2 Mối liên hệ giữa HTML và CSS 16

Hình 2-3 Javascript là gì? 20

Hình 2-4 Lợi thế của Javascipt 21

Hình 2-5 Cấu trúc của SQL Server 25

Hình 2-6 Thành phần trong mô hình MVC 27

Hình 2-7 Mô hình MVC 28

Hình 2-8 Ưu và nhược điểm của mô hình MVC 29

Hình 3-1 Các tác nhân của hệ thống 32

Hình 3-2 Use Case hệ thống 32

Hình 3-3 Use Case khách vãng lai 33

Hình 3-4 Use Case khách hàng 33

Hình 3-5 Use Case quản trị 34

Hình 3-6 Biều đồ class 47

Hình 3-7 Biểu đồ hoạt động đăng ký 48

Hình 3-8 Biểu đồ hoạt động đăng nhập 48

Hình 3-9 Biểu đồ hoạt động đăng xuất 49

Hình 3-10 Biểu đồ hoạt động xem danh sách sản phẩm 49

Hình 3-11 Biểu đồ hoạt động xem chi tiết sản phẩm 50

Hình 3-12 Biểu đồ hoạt động thêm sản phẩm vào giỏ hàng 50

Hình 3-13 Biểu đồ hoạt động đánh giá sản phẩm 51

Hình 3-14 Biểu đồ hoạt động tìm kiếm sản phẩm 51

Hình 3-15 Biểu đồ hoạt động xem danh sách đơn hàng 52

Hình 3-16 Biểu đồ hoạt động thêm mới sản phẩm 52

Hình 3-17 Biểu đồ hoạt động xem danh sách tài khoản 53

Hình 3-18 Biểu đồ hoạt động xuất thống kê 53

Hình 3-19 Biểu đồ hoạt động duyệt đánh giá 54

Hình 3-20 Biểu đồ hoạt động cập nhật thông tin slide 54

Hình 3-21 Biều đồ tuần tự đăng ký 55

Hình 3-22 Biều đồ tuần tự đăng nhập 55

Hình 3-23 Biều đồ tuần tự đăng xuất 56

Hình 3-24 Biều đồ tuần tự xem danh sách sản phẩm 56

Hình 3-25 Biều đồ tuần tự xem chi tiết sản phẩm 57

Hình 3-26 Biều đồ tuần tự thêm sản phẩm vào giỏ hàng 57

Hình 3-27 Biều đồ tuần tự đánh giá sản phẩm 58

Hình 3-28 Biều đồ tuần tự tìm kiếm sản phẩm 58

Hình 3-29 Biều đồ tuần tự xem danh sách đơn hàng 59

Hình 3-30 Biều đồ tuần tự thêm mới sản phẩm 59

Hình 3-31 Biều đồ tuần tự xem danh sách tài khoản 60

Hình 3-32 Biều đồ tuần tự xuất thống kê 60

Hình 3-33 Biều đồ tuần tự duyệt đánh giá 61

Hình 3-34 Biều đồ tuần tự cập nhật thông tin slide 61

Hình 3-35 Biểu đồ Thực thể - Quan hệ 62

Hình 4-1 Dịch vụ tài khoản 74

Hình 4-2 Dịch vụ quyền hạn 74

Hình 4-3 Dịch vụ ngôn ngữ 75

Hình 4-4 Dịch vụ danh sách thương hiệu 75

Hình 4-5 Dịch vụ sản phẩm 75

Hình 4-6 Dịch vụ đánh giá sản phẩm 76

Hình 4-7 Dịch vụ danh mục sản phẩm 76

Hình 4-8 Dịch vụ giỏ hàng 77

Hình 4-9 Dịch vụ đặt hàng 77

Hình 4-10 Dịch vụ slide 77

Hình 4-11 Giao diện slider trang chủ 78

Hình 4-12 Danh sách sản phẩm mới 79

Hình 4-13 Banner quảng cáo 79

Hình 4-14 Danh mục sản phẩm 80

Hình 4-15 Phần chân trang 80

Hình 4-16 Trang đăng nhập cho quả trị 81

Hình 4-17 Các chức năng dành cho quản trị 81

Hình 4-18 Trang danh sách slide 82

Hình 4-19 Thêm slide 82

Hình 4-20 Xem chi tiết slide 83

Hình 4-21 Trang cập nhật thông tin slide 83

Hình 4-22 Trang xóa slide 84

Hình 4-23 Danh sách sản phẩm 84

Hình 4-24 Trang thêm mới sản phẩm 85

Hình 4-25 Xem chi tiết sản phẩm 86

Hình 4-26 Cập nhật thông tin sản phẩm 86

Hình 4-27 Gán danh mục cho sản phẩm 87

Hình 4-28 Trang xóa sản phẩm 88

Hình 4-29 Giao diện đăng ký tài khoản 88

Hình 4-30 Trang danh sách tài khoản 89

Hình 4-31 Trang thêm tài khoản 90

Hình 4-32 Trang xem chi tiết tài khoản 91

Hình 4-33 Cập nhật thông tin tài khoản 91

Hình 4-34 Trang phân quyền cho tài khoản 92

Hình 4-35 Xóa người dùng 93

Hình 4-36 Giao diện đăng nhập 94

Hình 4-37 Người dùng đăng nhập thành công 95

Hình 4-38 Sản phẩm hiển thị theo danh sách 95

Hình 4-39 Sử dụng bộ lọc 96

Hình 4-40 Tìm kiếm sản phẩm theo từ khóa 97

Hình 4-41 Không tìm thấy sản phẩm 98

Hình 4-42 Giao diện chi tiết sản phẩm 98

Hình 4-43 Xem thông tin chi tiết sản phẩm 99

Hình 4-44 Giao diện giỏ hàng 99

Hình 4-45 Trang thanh toán đơn hàng 100

Hình 4-46 Đánh giá sản phẩm 101

Hình 4-47 Danh sách đánh giá chờ duyệt 101

Hình 4-48 Xem chi tiết đánh giá 102

Hình 4-49 Xem đánh giá sản phẩm 102

DANH MỤC CÁC BẢNG BIỂU

Bảng 3-1 Use Case "Đăng ký" 35

Bảng 3-2 Use Case "Đăng nhập" 36

Bảng 3-3 Use Case "Đăng xuất" 37

Bảng 3-4 Use Case "Xem danh sách sản phẩm" 37

Bảng 3-5 Use Case “Xem chi tiết sản phẩm” 38

Bảng 3-6 Use Case “Thêm sản phẩm vào giỏ hàng” 39

Bảng 3-7 Use Case “Đánh giá sản phẩm” 40

Bảng 3-8 Use Case “Tìm kiếm sản phẩm” 41

Bảng 3-9 Use Case “Xem danh sách đơn hàng” 41

Bảng 3-10 Use Case “Thêm mới sản phẩm” 42

Bảng 3-11 Use Case “Xem danh sách tài khoản” 43

Bảng 3-12 Use Case “Xuất thống kê” 44

Bảng 3-13 Use Case “Duyệt đánh giá” 45

Bảng 3-14 Use Case “Cập nhật thông tin slide” 46

Bảng 3-15 Bảng AppUsers 63

Bảng 3-16 Bảng AppRoles 64

Bảng 3-17 Bảng Slides 64

Bảng 3-18 Bảng Transactions 65

Bảng 3-19 Bảng Contacts 65

Bảng 3-20 Bảng ReviewImages 66

Bảng 3-21 Bảng Orders 67

Bảng 3-22 Bảng Categories 67

Bảng 3-23 Bảng Products 68

Bảng 3-24 Bảng Brands 68

Bảng 3-25 Bảng ProductImages 69

Bảng 3-26 Bảng Languages 69

Bảng 3-27 Bảng ProductTranslations 69

Bảng 3-28 Bảng Promotions 70

Bảng 3-29 Bảng ProductReviews 71

Bảng 3-30 Bảng Carts 71Bảng 3-31 Bảng CategoryTranslations 72

MỞ ĐẦU

1 Tổng quan tình hình nghiên cứu thuộc lĩnh vực của đề tài

Trong thời đại hiện nay, cuộc sống của chúng ta trở nên ngày càng hối hả và năngđộng hơn bao giờ hết Để đáp ứng nhu cầu của người tiêu dùng, các nhà bán lẻ đang tìmcách tối ưu hóa trải nghiệm mua sắm của khách hàng thông qua các giải pháp trực tuyến.Tuy nhiên, việc sử dụng máy tính để đặt hàng hay phải đến siêu thị để mua sắm vẫn còngặp phải một số hạn chế nhất định, đặc biệt là khi chúng ta có nhiều công việc khác phải lotoan

Vì vậy, sự xuất hiện của điện thoại thông minh và các thiết bị di động đã giúp đápứng nhu cầu mua sắm của khách hàng một cách tiện lợi hơn bao giờ hết Việc mua sắmtrực tuyến thông qua smartphone đã trở thành một xu hướng phổ biến và được ưa chuộng.Điều này cho thấy sức mạnh của công nghệ di động và tiềm năng phát triển của thị trườngmua sắm trực tuyến qua điện thoại

Với những lợi thế vượt trội của điện thoại thông minh như tiện lợi, dễ dàng mangtheo bên mình và có thể truy cập mọi lúc mọi nơi, việc phát triển một website bán máy ảnh

và linh phụ kiện máy ảnh có thể giúp tối ưu hóa trải nghiệm mua sắm của khách hàng.Điều này sẽ tạo ra nhiều tiện ích và giá trị cho khách hàng và có thể giúp cải thiện doanh

số bán hàng của nhà bán lẻ

2 Tính cấp thiết, ý nghĩa khoa học và thực tiễn của đề tài

Từ những phân tích trên, ý tưởng cho một website bán máy ảnh và linh phụ kiện máyảnh là một đề tài cấp thiết và mang tính thực tiễn cao trong thời đại số hóa hiện nay Với sựphát triển của công nghệ, máy ảnh và các linh phụ kiện kèm theo đã trở thành một phầnkhông thể thiếu trong cuộc sống của con người Tuy nhiên, việc tìm kiếm, lựa chọn và muasắm các sản phẩm này vẫn gặp nhiều khó khăn khi phải di chuyển đến các cửa hàng, mấtnhiều thời gian và công sức

Vì vậy, một website bán hàng chuyên nghiệp, đa dạng về sản phẩm và dễ dàng sửdụng sẽ giúp cho người dùng tiết kiệm được thời gian, công sức và tiền bạc Đồng thời,việc tạo ra một website bán hàng cũng là cơ hội để nghiên cứu và áp dụng những kiến thức

về thiết kế web, phát triển phần mềm và quản lý dữ liệu

Với sự phát triển của kinh tế số, việc bán hàng trực tuyến đã trở thành một xu hướngmới và rất tiềm năng trong tương lai Nghiên cứu và phát triển website bán máy ảnh và linhphụ kiện máy ảnh không chỉ mang lại lợi ích cho người sử dụng mà còn giúp cho doanh

nghiệp tăng doanh số bán hàng, tiếp cận khách hàng tiềm năng và cải thiện hình ảnhthương hiệu.

Đây là ứng dụng thực tế khá hay trên nền tảng website, tuy không phải là mới nhưng

do kinh nghiệm của em chưa nhiều và còn nhiều hạn chế cũng như sai sót mong thầy cô vàcác bạn đóng góp ý kiến để đề tài được hoàn thiện hơn

là một yếu tố quyết định.

Tại thị trường quốc tế, nhiều phần mềm bán hàng đã được phát triển với các tínhnăng và ưu điểm riêng, nhằm tối ưu hóa quá trình bán hàng, quản lý kho hàng, và tương tácvới khách hàng Tuy nhiên, tình hình sử dụng và yêu cầu của cửa hàng bán máy ảnh vàlinh phụ kiện máy ảnh tại Việt Nam hiện chưa được nhiều cửa hàng chú trọng nhiều.Với mục tiêu khảo sát tình hình sử dụng phần mềm bán hàng trên thế giới cũng nhưtrong nước, cùng với việc khảo sát yêu cầu của cửa hàng bán máy ảnh và linh phụ kiệnmáy ảnh, từ đó đưa ra những đề xuất và giải pháp phù hợp để cải thiện hiệu quả kinhdoanh và tạo sự hài lòng cho khách hàng của cửa hàng bán máy ảnh và linh phụ kiện máyảnh

1.1 Lý d o c h ọ n

đ ề t à i

Trong thời đại số hóa ngày nay, thương mại điện tử đã trở thành một lực đẩy quan

trọng trong ngành bán lẻ, mang lại sự thay đổi mạnh mẽ trong cách mua sắm và tiếp cận

sản phẩm và dịch vụ Với sự phát triển nhanh chóng của công nghệ và sự phổ biến của

internet, việc tạo ra một website thương mại điện tử chất lượng là một cách hiệu quả để

kinh doanh và tạo lợi ích cho khách hàng

Trong bối cảnh này, em đã quyết định nghiên cứu và phát triển một website bán máy

ảnh và linh phụ kiện máy ảnh nhằm đáp ứng nhu cầu mua sắm ngày càng tăng của người

tiêu dùng trong lĩnh vực này Điều đặc biệt quan trọng nó là nơi mà sự hiệu quả trong việc

kinh doanh trực tuyến và tạo trải nghiệm mua sắm tốt cho khách hàng có thể tạo ra sự cạnh

tranh và sự khác biệt

Lựa chọn đề tài này đồng nghĩa với việc em tìm hiểu cách tận dụng các công nghệ và

giải pháp thương mại điện tử để tăng cường sự quan tâm và đáp ứng nhu cầu của khách

hàng trong lĩnh vực máy ảnh và linh phụ kiện Em quan tâm đến việc tạo ra một giao diện

người dùng hấp dẫn, dễ sử dụng và có trải nghiệm mua sắm tương tác, từ việc cung cấp

thông tin sản phẩm chi tiết, hỗ trợ việc tìm kiếm và so sánh, cho đến quy trình thanh toán

và dịch vụ hỗ trợ sau bán hàng

Bằng việc nghiên cứu đề tài này, em hy vọng rằng sẽ có được cái nhìn sâu sắc về yêu

cầu của người tiêu dùng và xu hướng thị trường trong việc mua sắm máy ảnh và linh phụ

kiện, đồng thời cung cấp một cơ sở lý thuyết và thực tiễn để phát triển một website bán

hàng hiệu quả và thành công trong ngành này

1.2 Kh ả o s á t t ì n h

h ì n h

s ử

d ụ n g p h ầ n

m ề m

t ư ơ n g

t ự

t r ê n

t h ế g i ớ i c ũ n g n h ư

t r o n g n ư ớ c

1.2.1 Tình hình quốc tế

Hiện nay, trên thế giới có rất nhiều website bán máy ảnh và linh kiện máy ảnh, và

một số trang web bán hàng lớn như Amazon, B&H, Adorama, Best Buy, Newegg,

Walmart, v.v đều có kênh bán sản phẩm máy ảnh và linh kiện máy ảnh Tuy nhiên, một sốwebsite chuyên bán máy ảnh và linh kiện máy ảnh như B&H, Adorama, KEH Camera, vàFocus Camera đang được xem là những trang web hàng đầu trong lĩnh vực này.

Ngoài ra, cũng có nhiều website bán hàng địa phương chuyên bán máy ảnh và linhkiện máy ảnh nhưng quy mô nhỏ hơn Ví dụ, tại Châu Âu, các trang web như Wex PhotoVideo, Jessops và Park Cameras là những trang web bán hàng được ưa chuộng Tại NhậtBản, các trang web chuyên bán máy ảnh và linh kiện máy ảnh như Yodobashi, Bic Camera

và Map Camera đều là những trang web hàng đầu

Tuy nhiên, với sự phát triển của công nghệ và thị trường mua sắm trực tuyến ngàycàng phát triển, cạnh tranh trong lĩnh vực bán máy ảnh và linh kiện máy ảnh ngày càng gaygắt Để thành công, các website bán hàng cần phải cung cấp cho khách hàng những dịch vụ

và sản phẩm chất lượng, độ tin cậy cao cũng như giá cả cạnh tranh

Tiếp theo, em sẽ trình bày ưu và nhược điểm của một số website nước ngoài mà emtìm hiểu cũng như một phần trải nghiệm thực tế:

 Website B&H:

 B&H là một trang web bán hàng chuyên về máy ảnh và linh kiện máy ảnh.Với danh tiếng lâu đời và uy tín trong ngành công nghệ máy ảnh, B&H đã trởthành điểm đến tin cậy của nhiếp ảnh gia và người yêu nhiếp ảnh trên toàn thếgiới Trang web cung cấp một loạt sản phẩm đa dạng từ các nhà sản xuất hàngđầu và đảm bảo chất lượng cao Bên cạnh đó, B&H cũng cung cấp dịch vụchuyên nghiệp và hỗ trợ khách hàng tận tâm

Hình 1-1 Website B&H

 Ưu điểm:

o Đa dạng sản phẩm: B&H cung cấp một kho sản phẩm rộng lớn, từmáy ảnh chuyên nghiệp đến linh kiện và phụ kiện đi kèm Người dùng

có nhiều sự lựa chọn và tùy chọn phù hợp với nhu cầu và ngân sáchcủa họ

o Chất lượng và đáng tin cậy: B&H được biết đến với chất lượng cao vàđáng tin cậy của các sản phẩm Người dùng có thể tin tưởng vào chấtlượng của những sản phẩm mà họ mua từ B&H

o Dịch vụ khách hàng chuyên nghiệp: B&H có đội ngũ nhân viên giàukinh nghiệm và kiến thức sâu về sản phẩm Họ sẵn sàng tư vấn, hỗ trợ

và giải đáp mọi thắc mắc của khách hàng, đảm bảo một trải nghiệmmua hàng tốt nhất

 Nhược điểm:

o Giá cả: Một số người dùng có thể cảm thấy giá cả của các sản phẩmtrên B&H khá cao so với một số nhà bán lẻ khác Điều này có thể làmcho một số người tìm kiếm các lựa chọn giá rẻ hơn ở những nơi khác

o Hạn chế địa lý: B&H có thể gặp hạn chế về vận chuyển và phục vụđối với một số khu vực xa Điều này có thể gây bất tiện cho kháchhàng ở những vị trí không được phủ sóng hoặc có chi phí vận chuyểncao

o Cạnh tranh: Thị trường bán lẻ máy ảnh cạnh tranh khá gay gắt, vớinhiều đối thủ lớn và nhỏ B&H cần liên tục nâng cao dịch vụ và đadạng hóa sản phẩm để cạnh tranh hiệu quả và thu hút khách hàng

 Website Map Camera:

 MapCamera là một trang web bán hàng nổi tiếng tại Nhật Bản, chuyên về máy ảnh và thiết bị nhiếp ảnh Với hơn 25 năm kinh nghiệm trong ngành, MapCamera đã xây dựng một thương hiệu đáng tin cậy và được người dùng đánh giá cao Trang web cung cấp một loạt sản phẩm từ các nhà sản xuất nổi tiếng và phục vụ nhu cầu của cả nhiếp ảnh gia chuyên nghiệp và người dùng

cá nhân

Hình 1-2 Website MapCamera

 Ưu điểm:

o Độc quyền sản phẩm: MapCamera có một số sản phẩm độc quyền và phiên bản giới hạn, chỉ có thể mua được tại trang web này Điều này tạo ra sự khác biệt và hấp dẫn đối với những người đam mê nhiếp ảnh

và mong muốn sở hữu những sản phẩm độc đáo

o Chất lượng hàng đầu: MapCamera chú trọng đến chất lượng của sản phẩm Họ cung cấp các sản phẩm từ các nhà sản xuất hàng đầu, đảm bảo chất lượng và hiệu suất cao

o Dịch vụ chuyên nghiệp: MapCamera có đội ngũ nhân viên giàu kinh nghiệm và kiến thức sâu về nhiếp ảnh Họ cung cấp tư vấn chuyên môn, hỗ trợ và giải đáp mọi thắc mắc của khách hàng, giúp khách hàng có trải nghiệm mua sắm tốt nhất

 Nhược điểm:

o Giới hạn về địa lý: MapCamera tập trung chủ yếu vào thị trường NhậtBản và có hạn chế trong việc vận chuyển và phục vụ quốc tế Điều này có thể gây khó khăn cho người dùng ở các quốc gia khác khi muốn mua hàng từ MapCamera

o Ngôn ngữ: Trang web của MapCamera chủ yếu sử dụng tiếng Nhật, điều này có thể tạo khó khăn cho người dùng không biết tiếng Nhật khi muốn tìm hiểu về sản phẩm và quy trình mua hàng

o Cạnh tranh: Như bất kỳ ngành nghề nào, thị trường bán lẻ máy ảnh ở Nhật Bản cũng rất cạnh tranh MapCamera cần tiếp tục đổi mới và cung cấp những giá trị độc đáo để duy trì sự cạnh tranh trong ngành

1.2.2 Tình hình trong nước

Trong những năm gần đây, việc mua sắm trực tuyến đã trở thành một trào lưu phổbiến tại Việt Nam, đặc biệt là trong lĩnh vực máy ảnh và linh kiện máy ảnh Các trang webbán hàng lớn như Lazada, Shopee, Tiki, Sendo, v.v đã không ngừng mở rộng thị trườngkinh doanh của mình bằng cách cung cấp các sản phẩm chất lượng và dịch vụ tốt chokhách hàng

Trong khi đó, các trang web bán máy ảnh và linh kiện máy ảnh độc lập cũng đangngày càng được ưa chuộng bởi người tiêu dùng Các trang web này tập trung vào lĩnh vựcmáy ảnh và linh kiện máy ảnh, cho phép người dùng tìm kiếm, so sánh và mua hàng dễdàng hơn Một số trang web bán máy ảnh và linh kiện máy ảnh nổi tiếng tại Việt Nam baogồm: Phong Vũ, Nguyễn Kim, Anh Dũng, Bình Minh Digital, v.v

Các trang web này không chỉ cung cấp các sản phẩm chính hãng với giá cả hợp lý

mà còn cung cấp cho người dùng các dịch vụ hậu mãi tốt, bảo hành sản phẩm và hỗ trợ kỹthuật Ngoài ra, các trang web này cũng có chính sách giá và khuyến mãi hấp dẫn để thuhút người tiêu dùng

Mặc dù việc mua sắm trực tuyến đang phát triển rất nhanh ở Việt Nam, nhưng vẫn cómột số khách hàng còn lo ngại về chất lượng sản phẩm và dịch vụ của các trang web bánhàng Do đó, việc xây dựng niềm tin và đáp ứng nhu cầu của khách hàng là vấn đề cầnđược chú trọng để thúc đẩy sự phát triển của thị trường này

Tiếp theo, em sẽ trình bày ưu và nhược điểm của một số website trong nước mà emtìm hiểu cũng như một phần trải nghiệm thực tế:

 Website Bình Minh Digital:

 Bình Minh Digital là một trang web bán hàng uy tín và phổ biến tại ViệtNam, chuyên về máy ảnh và thiết bị điện tử Với hơn 20 năm hoạt động tronglĩnh vực này, Bình Minh Digital đã xây dựng được lòng tin của khách hàng

và trở thành một trong những địa chỉ mua sắm đáng tin cậy

Hình 1-3 Website Bình Minh Digital

 Ưu điểm:

o Đa dạng sản phẩm: Bình Minh Digital cung cấp một loạt sản phẩm đadạng từ các thương hiệu nổi tiếng trong và ngoài nước Người dùng cónhiều lựa chọn về kiểu dáng, tính năng và mức giá phù hợp với nhucầu và ngân sách của mình

o Giá cả cạnh tranh: Bình Minh Digital cam kết cung cấp giá cả cạnhtranh và ưu đãi hấp dẫn đến người dùng Họ thường có các chươngtrình khuyến mãi, giảm giá và quà tặng đi kèm để thu hút khách hàng

o Dịch vụ chăm sóc khách hàng: Bình Minh Digital có đội ngũ nhânviên chuyên nghiệp và thân thiện, sẵn sàng hỗ trợ khách hàng Họcung cấp tư vấn sản phẩm, hỗ trợ kỹ thuật và giải đáp mọi thắc mắc

để đảm bảo khách hàng có trải nghiệm mua sắm tốt nhất

 Nhược điểm:

o Giao diện trang web: Giao diện của trang web Bình Minh Digital cóthể cần được cải thiện để tạo trải nghiệm người dùng tốt hơn Có thể

có sự khó khăn trong việc tìm kiếm và duyệt qua các sản phẩm

o Vận chuyển và giao nhận: Đối với các đơn hàng ở các khu vực xa, cóthể có khó khăn và chậm trễ trong quá trình vận chuyển và giao nhận.Điều này có thể gây phiền toái cho khách hàng có nhu cầu gấp

o Hạn chế về thanh toán: Bình Minh Digital có hạn chế trong cácphương thức thanh toán Điều này có thể làm cho việc thanh toán trởnên bất tiện đối với một số khách hàng

1.3 Kh ả o s á t y ê u

c ầ u

1.3.1 Khảo sát cửa hàng

Tên cửa hàng: Cửa hang máy ảnh – linh kiện Trường Giang

Địa điểm khảo sát: số 5, Vọng Đức, Hàng Bài, Hoàn Kiếm, Hà Nội

Một số hình ảnh tại cửa hàng:

Hình 1-4 Hình ảnh cửa hàng khảo sát

Hình 1-5 Hình ảnh không gian cửa hàng khảo sát

1.3.2 Khảo sát yêu cầu chức năng sơ bộ của website

Sau khi khảo sát yêu cầu của cơ sở bán máy ảnh thì thống nhất đưa ra một số chứcnăng cơ bản cần có ở website bán máy ảnh như sau:

Dành cho người dùng:

 Hiển thị sản phẩm: Trang web cung cấp thông tin chi tiết về các sản phẩm máy ảnh

và linh phụ kiện máy ảnh, bao gồm hình ảnh, mô tả và giá cả

 Tìm kiếm sản phẩm: Trang web có chức năng tìm kiếm để người dùng có thể tìmkiếm sản phẩm theo tên, nhà sản xuất, loại máy ảnh và giá

 Giỏ hàng: Người dùng có thể thêm sản phẩm vào giỏ hàng và điều chỉnh số lượngsản phẩm trước khi thanh toán

 Thanh toán: Trang web hỗ trợ nhiều phương thức thanh toán, bao gồm thanh toánqua thẻ tín dụng, chuyển khoản ngân hàng hoặc thanh toán khi nhận hàng

 Đăng ký và đăng nhập: Trang web cần cho phép người dùng đăng ký và đăng nhập

để quản lý thông tin tài khoản và lịch sử đặt hàng

 Đánh giá sản phẩm: Người dùng có thể đánh giá sản phẩm và viết bình luận để giúpngười dùng khác quyết định khi mua sản phẩm

 Quản lý đơn hàng: Trang web cung cấp cho người dùng chức năng quản lý đơnhàng, bao gồm xem lịch sử đơn hàng, theo dõi đơn hàng đang được vận chuyển vàđổi trả sản phẩm

 Tích hợp mạng xã hội: Trang web tích hợp các kênh mạng xã hội như Facebook,Instagram để người dùng có thể chia sẻ sản phẩm và thông tin với bạn bè và ngườithân.

 Chăm sóc khách hàng: Trang web cung cấp các thông tin liên hệ để người dùng cóthể liên hệ với bộ phận chăm sóc khách hàng khi cần hỗ trợ

 Quản lý giá và khuyến mãi: Quản trị viên cần có quyền truy cập để quản lý giá sảnphẩm và các chương trình khuyến mãi trên trang web

Quản lý hệ thống: Quản trị viên cần có quyền truy cập để quản lý hệ thống trangweb, bao gồm bảo trì, nâng cấp, sao lưu dữ liệu và quản lý tài khoản khác

CHƯƠNG 2 CƠ SỞ LÝ THUYẾT

Trong chương cơ sở lý thuyết, em sẽ giới thiệu về các công nghệ cơ bản để xây dựng

một website thương mại điện tử Đầu tiên, tôi sẽ nêu về ngôn ngữ lập trình và framework

phổ biến như HTML, CSS, JavaScript và C# Từ đó, tôi sẽ trình bày về các thư viện và

công cụ hỗ trợ như Bootstrap, jQuery và ASP.NET Core

Tóm lại, chương cơ sở lý thuyết sẽ tập trung vào giới thiệu các công nghệ cần thiết

để xây dựng một website thương mại điện tử hiệu quả và chất lượng

2.1 HT M L l à g

ì

?

2.1.1 Lịch sử hình thành và định nghĩa HTML là gì?

Định nghĩa HTML là gì?

[CITATION ITN23 \l 1033 ]HTML là một từ viết tắt của HyperText Markup

Language, nó là một loại ngôn ngữ siêu văn bản và được sử dụng rất phổ biến trong lập

trình web Chính vì vậy, khi người dùng click vào các liên kết ở trong một trang web thì có

thể dẫn tới sự xuất hiện của nhiều trang web khác nhau Một trang như vậy người ta

thường gọi là một trang HTML Ngoài ra, HTML còn hỗ trợ cho người dùng trong việc lập

trình để tạo ra các cấu trúc và phân loại được các thành phần khác bên trong trang web Nó

thường có khả năng phân chia cho các đoạn văn, blog, heading, footer, header và một số

đường link liên kết khác

Hình 2-6 HTML là gìTuy nhiên, cần lưu ý rằng HTML không phải là ngôn ngữ lập trình cao cấp Chính vìvậy, nó không có khả năng tạo ra các trang web động được mà chỉ đơn giản là những trangweb tĩnh (HTML có thể phân chia và định dạng cho trang web) Ngoài ra, để có thể làmviệc với HTML thì cần phải sử dụng những đoạn code đơn giản.

HTML ra đời như thế nào?

[CITATION ITN23 \l 1033 ]HTML được hình thành bởi Tim Berners-Lee, ông làmột nhà vật lý học nổi tiếng ở Thụy Sĩ Mục đích tạo ra HTML ban đầu của ông là biến nótrở thành nơi lưu trữ cũng như truyền đạt cho các thông tin nội bộ giữa các nhà khoa họcvới nhau

Năm 1991, HTML bao gồm 18 tag và hiện nay đã được phát triển lên tới 40 HTMLtags Và phiên bản mới nhất vừa được nâng cấp của nó là HTML5 (năm 2014) Phiên bảnnày được cải tiến rất nhiều về cấu trúc, tốc độ và cho khả năng xác định rõ được nội dungcần thể hiện

Quá trình phát triển của HTML

Theo [CITATION ITN23 \l 1033 ], HTML được xem là phát minh vĩ đại, đột phátrong thời đại lúc bấy giờ Với hơn 20 năm phát triển thì phiên bản mới nhất của HTML làHTML5 được cải tiến và đời vào năm 2014 Đây là phiên bản được đánh giá là toàn diệnnhờ những tính năng đặc biệt và nổi bật nhất Nó có khả năng hỗ trợ audio, video trực tiếp,

có khả năng loại bỏ các flash player làm chậm để quá trình xử lý và truy cập web đượcnhanh chóng hơn Khi sử dụng phiên bản này, thì lập trình viên chỉ cần thực hiện nhúngcác đoạn video hoặc audio với các thẻ tag hay

Hơn nữa, HTML5 còn có thể hỗ trợ người dùng vẽ các vector toán học, MathML,công thức toán học và cả những phương trình khoa học khác HTML5 còn được cải thiệnrất nhiều về mặt ngôn ngữ nên quá trình search engine của google sẽ được chính xác hơn

và mang lại được nhiều lợi ích cho chính người đọc

2.1.2 Cấu trúc của HTML

[CITATION ITN23 \l 1033 ]HTML thường có nhiều dạng thẻ khác nhau, mỗi thẻ sẽ

có những nhiệm vụ khác nhau nhưng vẫn sẽ ảnh hưởng và tác động lẫn nhau Bình thườngcấu trúc của HTML sẽ có 3 phần:

Phần khai báo chuẩn của html, xhtml Có cấu trúc là <!Doctype>: Phần này sẽ

cho người dùng biết được trình duyệt hiện đang sử dụng loại HTML nào Trên trang webđang có nhiều loại HTML khác nhau và mỗi trình duyệt chỉ sử dụng một loại HTML nhấtđịnh

Phần tiêu đề: Phần khai báo ban đầu, khai báo về css, little, javascript, : Phần

này sẽ có cấu trúc bắt đầu và kết thúc bằng thẻ <head> Đây là phần chứa tiêu đề và nóđược hiển thị trên thanh điều hướng của trang web Tiêu đề sẽ là phần nằm giữa cặp thẻ

<title> và </title> Ngoài ra phần tiêu đề còn chứa các khai báo có thông tin nhằm phục vụSEO

Phần thân: Phần chứa nội dung của trang web, là phần hiển thị của trang web: Phần

này nằm phía sau tiêu đề, gồm cả các thông tin mà người dùng muốn hiển thị trên trangweb và sẽ bao gồm văn bản, hình ảnh và các liên kết Phần thân sẽ bắt đầu bằng thẻ

<body> và kết thúc bằng thẻ </body>

Phần còn lại là thẻ cặp Thẻ cặp nằm ở ngoài cùng, có nhiệm vụ bao quát toàn bộ

nội dung của trang web, cả phần tiêu đề và phần thân của thẻ cặp đều nằm trong cặp thẻ

<html> và</html>

2.1.3 Ưu điểm và nhược điểm của HTML là gì?

[CITATION ITN23 \l 1033 ]Hầu hết các công nghệ mới, các ngôn ngữ đều tồn tại ưuđiểm và nhược điểm riêng của nó Và chính HTML cũng không ngoại lệ, dưới đây là các

ưu điểm và nhược điểm của HTML mà chúng tôi đã tổng hợp được

Ưu điểm nổi bật

Bởi vì HTML được ra đời từ rất lâu nên nguồn tài nguyên hỗ trợ hỗ trợ cho nó vôcùng khổng lồ Hiện nay, cộng đồng của HTML đang phát triển ngày càng lớn trên thếgiới

HTML có thể chạy tương đối mượt mà trên hầu hết những trình duyệt phổ biến nhấthiện nay là: IE, Chrome, FireFox, Cốc Cốc…

Mã nguồn mà HTML sử dụng là loại mã nguồn mở có thể được sử dụng hoàn toànmiễn phí

Quá trình học HTML tương đối đơn giản, dễ hiểu nên người học có thể dễ dàng nắmbắt được các kiến thức căn bản nhanh chóng hơn Quá trình xây dựng khung cho websitecăn bản sẽ có thể thực hiện chỉ với vài tuần học

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 rất nhiều bởi vì, HTML được vận hành bởi World Wide WebConsortium (W3C)

Quá trình thực hiện sẽ dễ dàng hơn bởi nó tích hợp với nhiều loại ngôn ngữ backendnhư: 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

Nhược điểm còn tồn tại

Nhược điểm lớn nhất mà HTML còn tồn tại đó chính là chỉ có thể sử dụng ở nhữngtrang web tĩnh Đây là những trang web chỉ hiển thị thông tin mà không có sự tương táccủa người dùng Chính vậy, khi xây dựng những tính năng động hoặc hướng đối tượngngười dùng thì lập trình viên cần phải sử dụng Javascript hoặc ngôn ngữ backend khác củabên thứ 3 mới có thể thực hiện được

HTML không có khả năng tạo ra sự riêng biệt và mới mẻ cho người dù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

Hiện nay, một số trình duyệt vẫn còn chậm trong việc hỗ trợ cho tính năng mới nhấtcủa HTML và đặc biệt là với HTML5

Ngoài ra, một số trình duyệt cũ vẫn không thể render được những tag mới có bêntrong HTML5

2.1.4 HTML hoạt động như thế nào và vai trò của HTML là gì?

HTML hoạt động như thế nào?

[CITATION ITN23 \l 1033 ]HTML thường có đuôi dạng file như sau html hoặc.htm, có thể xem các file này bằng một số trình duyệt web như: Google Chrome, Safari,Coccoc, Nhiệm vụ chính của những trình duyệt này là đọc các file HTML và thuwjc hiện

“biến đổi” chúng thành những dạng nội dung visual trên Internet để đảm bảo cho ngườiđọc có thể hiểu được hết ý nghĩa Theo các chuyên gia, thì một Website thường có nhiềuHTML và mỗi trang con thường sẽ có một tệp HTML riêng biệt Mỗi tài liệu HTML

thường bao gồm một bộ tag, có khả năng tạo ra được cấu trúc tương tự như các thư mục:heading, section, paragraph, Những HTML element đều sở hữu một tag mở và một tagđóng với cấu trúc

Vai trò của HTML với một lập trình web

[CITATION ITN23 \l 1033 ]Chính vì HTML là loại ngôn ngữ đánh dấu siêu văn bảnnên nó có khả năng giúp cấu trúc website được hoàn thiện, rõ ràng và gọn gàng hơn Điểmmạnh nhất của HTML đối với một lập trình web chính là khả năng xây dựng cấu trúcwebsite sao cho chỉnh chu nhất Ngoài ra, HTML còn góp vai trò cho việc khai báo và địnhdạng được các tập tin kỹ thuật số

Các nhà lập trình viên đang dần sử dụng ngôn ngữ lập trình riêng đối với quá trìnhthiết kế một website Tuy nhiên, để xử lý dữ liệu thì luôn cần sử dụng đến ngôn ngữHTML để có thể hiển thị được nội dung cũng như bố cục văn bản cho những người dùng

có nhu cầu truy cập

2.1.5 HTML có mối liên hệ như thế nào với CSS và JavaScript?

[CITATION ITN23 \l 1033 ]Hiện nay, dù rằng HTML là một loại ngôn ngữ toàndiện và mạnh mẽ nhưng xét về mặt đơn phương thì nó không đủ khả năng xây dựng mộtwebsite toàn diện Hơn nữa, HTML không có khả năng responsive trên những thiết bị diđộng mà người dùng đang thường xuyên sử dụng để truy cập và tìm kiếm thông tin trênmạng Bởi vậy, CSS (Cascading Style Sheets) và JavaScript ra đời và dần trở thành sự phổsung hoàn hảo giúp người dùng có thể thiết lập được các chức năng cao cấp khác dành chotrang web

Hình 2-7 Mối liên hệ giữa HTML và CSSCSS và Javascript có vai trò và nhiệm vụ hỗ trợ HTML như sau:

CSS: thực hiện nhiệm vụ thiết kế, tạo nên kiểu dáng, màu sắc, hình nền, hiệu ứng và

bố cục, để website trở nên sinh động, cuốn hút và có tính thẩm mỹ cao hơn

JavaScript hỗ trợ tạo ra những chức năng hoạt động trong website như: pop-up đăng

ký, đăng nhập, video trình chiếu, thư viện ảnh huyển động, Slide trình diễn,

2.1.6 Con đường phát triển HTML

[CITATION ITN23 \l 1033 ]Theo như nghiên cứu, thì hiện nay đang có 2 con đường

để có thể định hướng và phát triển trong việc thiết kế web đó chính là: định hướng theo

nghề thiết kế website (làm một lập trình viên Frontend) và lựa chọn thứ 2 là trở thành một

lập trình viên Backend chuyên nghiệp Ngoài ra, nếu như có thể nắm vững được những

công cụ của 2 nghề nghiệp trên thì con đường phát triển dành cho đó chính là full stack

developer chuyên nghiệp.Chắc rằng, với những thông tin chia sẻ ở phía trên đã hiểu rõ hơn

HTML là gì cũng như vai trò của nó đối với website Để đảm bảo hành trang vững chắc

cho mình trong tương lai thì nên bổ sung thêm kiến thức về CSS, PHP, Java, Javascript,

Ngoài ra, đừng quên tìm hiểu những ngôn ngữ backend khác để quá trình lấy dữ liệu từ

phía người dùng để khiến website tĩnh trở thành website động dễ dàng và hoàn chỉnh hơn

2.2 CS S l à g ì

?

2.2.1 Định nghĩa CSS là gì?

[ CITATION ITN231 \l 1033 ]CSS (là chữ viết tắt của Cascading Style Sheets) là

một loại ngôn ngữ lập trình được sử dụng phổ biến để có thể tìm và thực hiện định dạng lại

cho những phần tử được tạo ra bởi các ngôn ngữ đánh dấu

Có thể hiểu đơn giản như sau: Trong một website, nếu HTML giữ vai trò trong việc

định dạng các ngôn ngữ phần tử nằm trên website với các chức năng như: tạo ra các đoạn

văn bản, các tiêu đề, bảng,…thì CSS sẽ giúp cho website có thêm một chút mới mẻ, phong

cách và chuyên nghiệp hơn vào những phần tử HTML được tạo ra đó Các tùy chỉnh có thể

gồm: màu sắc trang, cách đổi màu chữ, cách thay đổi cấu trúc,…

CSS được đề xuất ra đời bởi lập trình viên Harkon Wium Lie và được sản xuất chính

thức vào năm 1996

Theo các chuyên gia, CSS ra đời với lý do như sau: Bởi vì hầu hết các ngôn ngữđược đánh dấu như: HTML hầu như không được thiết kế gắn tag để có thể định dạng trangweb mà chỉ có thể sử dụng nó để đánh dấu lên hệ thống website.

Các tag dạng như: đều được ra mắt bằng phiên bản 3.3 trong HTML với các phongcách khác nhau khiến cho quá trình viết code cho trang gặp quá nhiều khó khăn Chính vìvậy, CSS được tạo ra giúp giải quyết tất cả những vấn đề kể trên

2.2.2 Bố cục và cấu trúc CSS là gì?

[ CITATION ITN231 \l 1033 ]Bố cục của một đoạn CSS

Bố cục CSS thường chủ yếu dựa vào hình hộp và mỗi hộp đều chiếm những khoảngtrống trên trang của với các thuộc tính như:

Padding (vùng đệm): Gồm không gian xung quanh nội dung (ví dụ: xung quanh đoạnvăn bản)

Border (đường viền): Là đường liền nằm ngay bên ngoài phần đệm

Margin (lề): Là khoảng cách xung quanh bên ngoài của phần tử

Ý nghĩa của các phần này như sau:

Bộ chọn (Selector): Tên phần tử HTML bắt đầu của bộ quy tắc và nó sẽ thực hiện

chọn những phần tử đã được tạo kiểu Từ đó, có thể tạo được kiểu cho những phần tử khác

mà chỉ cần thực hiện thay đổi bộ chọn

Tuyên bố (Declaration): Một quy tắc duy nhất như: color: red; xác định thuộc tính

của phần tử nào muốn tạo kiểu

Thuộc tính (Properties): Những cách mà có thể tạo kiểu cho một phần tử HTML.

(Với trường hợp này thì color được xem là một trong những thuộc tính của phần tử p).Chính vì vậy, với CSS thì chỉ cần lựa chọn thuộc tính mà muốn tác động nhất trong bộ quytắc của mình

Giá trị thuộc tính: Ở bên phải của thuộc tính sau dấu hai chấm(:), chúng ta sẽ sở

hữu giá trị thuộc tính mà việc lựa chọn trong số đó sẽ xuất hiện nhiều lần để có thể cho mộtthuộc tính cụ thể nào đó

2.2.3 Ưu điểm của CSS là gì?

[ CITATION ITN231 \l 1033 ]Nếu như các website không thể load được thì chỉ cónền trắng và chữ xuất hiện là màu đen và xanh Trước khi có thể sử dụng CSS thì hầu hếtcác phong cách của CSS đều được đính kèm bên trong HTML markup Chính vì vậy, cầnthực hiện tách để có thể dễ dàng xác định cho các thành phần như: background, font colors,canh hàng, Vậy, các ưu điểm của CSS như sau:

 CSS giúp thực hiện định kiểu mọi thứ mình muốn lên một file khác Nhờ vậy,

có thể tạo ra được những phong cách phù hợp rồi mới tích hợp các file CSSlên trên cùng file của HTML Điều này sẽ giúp cho HTML được makup rõràng nhất và người dùng có thể quản lý website dễ dàng hơn

 Sử dụng CSS sẽ không cần thực hiện lặp lại các mô tả cho từng thành phần

Từ đó, có thể tiết kiệm được tối đa thời gian làm việc với nó, làm code ngắnlại giúp kiểm soát dễ dàng hơn các lỗi không đáng có

 CSS giúp người dùng nhiều styles trên một trang web HTML nên khả năngđiều chỉnh trang của trở nên vô hạn

Nhờ CSS mà mã nguồn của trang Web sẽ được tổ chức gọn gàng hơn, trật tự hơn,nội dung trang web sẽ được tách bạch hơn trong việc định dạng hiển thị Từ đó, quá trìnhcập nhập nội dung sẽ dễ dàng hơn và có thể hạn chế tối thiểu làm rối cho mã HTML CSS tạo ra nhiều kiểu dáng nên có thể được áp dụng với nhiều trang web, từ đó giảmtránh việc lặp lại các định dạng của các trang web giống nhau

2.2.4 Các phiên bản của CSS là gì?

[ CITATION ITN231 \l 1033 ]CSS từ những ngày đầu được hình thành cho đến nàythì được phát triển với nhiều phiên bản có tính năng khác nhau và mỗi một phiên bản đều

có khả năng fix gọn gàng Dưới đây là các phiên bản CSS đã được phát triển

Phiên bản CSS 1: được xuất bản vào ngày 17 tháng 12 năm 1996, với các chức năng

như: đổi kiểu chữ và nhấn mạnh chữ, tùy chỉnh được màu của văn bản và các yếu tố khác,căn lề, viền, đệm, nhận dạng duy nhất và phân loại chung các nhóm thuộc tính Hiện nayW3C không còn duy trì CSS 1 nữa

Phiên bản CSS 2: phát triển vào tháng 5 năm 1998 Nó là phiên bản nâng cấp từ

CSS1 và hiện tại cũng không còn được W3C duy trì nữa

Phiên bản CSS 3: bản nháp CSS 3 sớm nhất đã được xuất bản vào tháng 6 năm

1999 CSS3 là phiên bản thay thế hoàn toàn các người tiền nhiệm của nó khi được chia

thành nhiều tài liệu riêng biệt gọi là “module” thuận tiện cho người dùng Bên cạnh đó, nó

giới thiệu các bộ chọn và thuộc tính mới cho phép linh hoạt hơn với bố cục và trình bày

trang Đây là phiên bản hiện được ưa chuộng

Phiên bản CSS 4: phiên bản kế thừa CSS 3 “vừa ra lò” hiện vẫn đang được cập nhật,

phát triển và được dự đoán sẽ có rất nhiều phương thức mới được thêm vào như:

Mutability, Hyperlink…

Cách nhúng CSS vào website

Tiếp theo, để CSS có thể thực thi trên website hoặc tài liệu HTML thì phải tiến hành

nhúng CSS vào website Nếu không, các định dạng CSS sẽ không ảnh hưởng đến các trình

duyệt hoặc tài liệu HTML này Nói về nhúng CSS vào website thì chúng ta có 3 cách là:

 Inline CSS – Nhúng trực tiếp vào tài liệu HTML thông qua cặp thẻ

 Internal CSS – dùng thẻ

 External CSS – Cặp thẻ thì được đặt bên trong cặp thẻ

2.3 Ja v a s c r i p t l à g ì

?

2.3.1 JavaScript là gì?

[ CITATION Qua23 \l 1033 ]JavaScript là một ngôn ngữ lập trình của HTML và

WEB Nó là nhẹ và được sử dụng phổ biến nhất như là một phần của các trang web, mà sự

thi hành của chúng cho phép Client-Side script tương tác với người sử dụng và tạo các

trang web động Nó là một ngôn ngữ chương trình thông dịch với các khả năng hướng đối

tượng

JavaScript được biết đến đầu tiên với tên Mocha, và sau đó là LiveScript, nhưngcông ty Netscape đã đổi tên của nó thành JavaScript, bởi vì sự phổ biến như là một hiệntượng của Java lúc bấy giờ JavaScript xuất hiện lần đầu trong Netscape 2.0 năm 1995 vớitên LiveScript Core đa năng của ngôn ngữ này đã được nhúng vào Netscape, IE, và cáctrình duyệt khác.

Hình 2-8 Javascript là gì?

ECMA-262 Specification định nghĩa một phiên bản chuẩn của ngôn ngữ JavaScript

như sau:

 JavaScript là một ngôn ngữ chương trình thông dịch, nhẹ

 Được thiết kế để tạo các ứng dụng mạng trung tâm

 Bổ sung và tích hợp với Java

Nghĩa là một trang web không cần là một HTML tĩnh, nhưng có thể bao gồm cácchương trình mà tương tác với người dùng, điều khiển trình duyệt, và tạo nội dung HTMLđộng