Đồ án website di động với các tính năng mới

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI
VIỆN CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
──────── * ───────

ĐỒ ÁN

TỐT NGHIỆP ĐẠI HỌC
NGÀNH CÔNG NGHỆ THÔNG TIN

XÂY DỰNG WEBSITE BÁN ĐỒ ĐIỆN TỬ

Sinh viên thực hiện: Họ tên sinh viên
Lớp XXXX - Kxx
Giáo viên hướng dẫn: [GS/PGS/GVC/TS/ThS]
Tên giáo viên

HÀ NỘI 12-2018
Sinh viên thực hiện: [Điền tên Mã sinh viên] Khóa [Mẫu bìa Kxx] Lớp


i

PHIẾU GIAO NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP
1. Thông tin về sinh viên
Họ và tên sinh viên: . . . . . . . . . . . . . . . . . . . . . . . . . . .
Điện thoại liên lạc
Email:
Lớp:
Hệ đào tạo:
Đồ án tốt nghiệp được thực hiện tại:
Thời gian làm ĐATN: Từ ngày / / đến / /

2. Mục đích nội dung của ĐATN
-

Xây dựng website bán đồ điện tử cho phép mua bán, đặt hàng online.

3. Các nhiệm vụ cụ thể của ĐATN
- Trình bày cơ sở lý thuyết được áp dụng để xây dựng ĐATN
- Đặc tả hệ thống, phân tích thiết kế hệ thống, thiết kế giao diện hệ thống.
- Xây dựng hệ thống website bán đồ điện tử có các chức năng:
+ Quản lý danh mục sản phẩm
+ Quản lý sản phẩm
+ Quản lý đơn hàng
+ Quản lý hàng tồn kho
+ Quản lý danh sách khách hàng
+ Quản lý tài khoản admin
+ Quản lý doanh thu
+ Quản lý các chương trình khuyến mãi, chế độ bảo hành, đơn vị tính
+ Hiển thị các sản phẩm kinh doanh trên website.
+ Cho phép khách hàng đăng ký, đăng nhập hệ thống.
+ Cho phép khách hàng tìm kiếm sản phẩm, đặt hàng và thanh toán, gửi thông tin
liên hệ, bình luận sản phẩm, đánh giá sản phẩm.
+ Chức năng nạp card và đổi mã khuyến mãi để thanh toán.
4. Lời cam đoan của sinh viên:
Tôi - điền tên sinh viên - 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 học hàm học vị+điền tên giáo viên hướng dẫn.
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 tháng năm
Tác giả ĐATN
Họ và tên sinh viên

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ệ:

Sinh viên thực hiện: [Điền tên Mã sinh viên] Khóa [Mẫu bìa Kxx] Lớp


ii

Hà Nội, ngày tháng năm
Giáo viên hướng dẫn
Học hàm học vị+điền tên giáo viên hướng
dẫn

Sinh viên thực hiện: [Điền tên Mã sinh viên] Khóa [Mẫu bìa Kxx] Lớp


iii

TÓM TẮT NỘI DUNG ĐỒ ÁN TỐT NGHIỆP
Hình thức kinh doanh online đang ngày càng phổ biến rộng rãi trên hầu khắp thế giới
bởi những lợi ích mà hình thức này mang lại. Kinh doanh online không chỉ mang lại lợi ích
cho các nhà kinh doanh mà còn mang lại sự thuận tiện đối với người tiêu dùng. Cùng với
sự phát triển của công nghệ thông tin, các thiết bị điện tử được nhiều người ưa chuộng.
Nhu cầu mua sắm của người dân về loại mặt hàng này ngày một tăng. Từ thực tế trên em
chọn đề tài “Xây dựng website bán đồ điện tử”. Nội dung đồ án sẽ trình bày nhiệm vụ cần
thực hiện, cơ sở lý thuyết, phân tích thiết kế hệ thống và xây dựng hệ thống website bán đồ
điện tử.

Sinh viên thực hiện: [Điền tên Mã sinh viên] Khóa [Mẫu bìa Kxx] Lớp

iv

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................................................................................................................ iv
DANH MỤC HÌNH VẼ.........................................................................................viii
DANH MỤC BẢNG BIỂU.....................................................................................xii
DANH MỤC TỪ VIẾT TẮT VÀ THUẬT NGỮ...................................................xvi
MỞ ĐẦU................................................................................................................... 1
PHẦN 1: ĐẶT VẤN ĐỀ VÀ ĐỊNH HƯỚNG GIẢI PHÁP......................................3
1.1 Nhiệm vụ..........................................................................................................3
1.2 Định hướng giải quyết......................................................................................3
1.3 Tóm tắt cơ sở lý thuyết và công cụ sử dụng.....................................................3
1.3.1. Ngôn ngữ HTML.....................................................................................3
1.3.2 Ngôn ngữ CSS..........................................................................................4
1.3.3 Ngôn ngữ lập trình PHP............................................................................5
1.3.4 Thư viện hỗ trợ..........................................................................................6
1.3.5 Cơ sở dữ liệu MySQL...............................................................................9
1.3.6 Các cộng cụ sử dụng...............................................................................10
PHẦN 2: CÁC KẾT QUẢ ĐẠT ĐƯỢC.................................................................10
2.1 Đặc tả yêu cầu................................................................................................10
2.1.1 Backend..................................................................................................10
2.1.2 Frontend (Giao diện người dùng)............................................................11
2.2 Các yêu cầu phi chức năng.............................................................................12
2.3 Phân tích thiết kế hệ thống.............................................................................12
2.4 Biểu đồ use case.............................................................................................15
2.4.1 Biểu đồ Use – case tổng quát..................................................................15
2.4.2 Use case đăng nhập.................................................................................15

2.4.3 Use case quản lý danh mục.....................................................................16
Sinh viên thực hiện: [Điền tên Mã sinh viên] Khóa [Mẫu bìa Kxx] Lớp


v

2.4.4 Use case quản lý kho...............................................................................17
2.4.5 Use case quản lý người dùng...................................................................18
2.4.6 Use case quản lý đơn hàng......................................................................19
2.4.7 Use case quản lý admin...........................................................................20
2.4.8 Use case quản lý doanh thu.....................................................................21
2.4.9 Use case quản lý trang cá nhân...............................................................21
2.4.10 Use case chức năng của khách hàng......................................................22
2.5 Biểu đồ tuần tự...............................................................................................24
2.5.1 Biểu đồ tuần tự chức năng đăng nhập.....................................................24
2.5.2 Biểu đồ tuần tự quản lý danh mục sản phẩm...........................................25
2.5.3 Biểu đồ tuần tự quản lý sản phẩm...........................................................26
2.5.4 Biểu đồ tuần tự quản lý mặt hàng bán chạy.............................................27
2.5.5 Biểu đồ tuần tự quản lý đơn hàng............................................................27
2.5.6 Biểu đồ tuần tự quản lý mặt hàng sắp hết................................................28
2.5.7 Biểu đồ tuần tự quản lý chế độ bảo hành.................................................29
2.5.8 Biểu đồ tuần tự quản lý đơn vị tính.........................................................30
2.5.9 Biểu đồ tuần tự quản lý nội dung khuyến mãi.........................................31
2.5.10 Biểu đồ tuần tự quản lý admin..............................................................32
2.5.11 Biểu đồ tuần tự cấu hình chung Website................................................33
2.5.12 Biểu đồ tuần tự quản lý hàng tồn...........................................................33
2.5.13 Biểu đồ tuần tự nạp card........................................................................34
2.5.14 Biểu đồ tuần tự đổi mã giảm giá...........................................................34
2.5.15 Biểu đồ tuần tự xem lịch sử giao dịch...................................................34
2.6 Biểu đồ lớp.....................................................................................................35

2.6.1 Danh sách các đối tượng.........................................................................35
2.6.2 Mô hình hóa các lớp đối tượng................................................................36
2.7 Thiết kế cơ sở dữ liệu.....................................................................................36
2.7.1 Danh sách các bảng.................................................................................36
2.7.2 Bảng Admin............................................................................................37
2.7.3 Bảng Category.........................................................................................37
2.7.4 Bảng Rating............................................................................................37
Sinh viên thực hiện: [Điền tên Mã sinh viên] Khóa [Mẫu bìa Kxx] Lớp


vi

2.7.5 Bảng contact............................................................................................38
2.7.6 Bảng Orders............................................................................................38
2.7.7 Bảng product...........................................................................................38
2.7.8 Bảng Transaction.....................................................................................39
2.7.9 Bảng Users..............................................................................................39
2.7.10 Bảng Units............................................................................................40
2.7.11 Bảng Promotions...................................................................................40
2.7.12 Bảng Code.............................................................................................40
2.7.13 Bảng Card.............................................................................................40
2.7.14 Bảng Guarantee.....................................................................................40
2.7.15 Bảng Listimage.....................................................................................41
2.7.16 Bảng Setting_email...............................................................................41
2.7.17 Bảng Slide.............................................................................................41
2.8 Mô hình cơ sở dữ liệu – mô hình quan hệ mua hàng......................................42
2.8.1 Mô hình cơ sở dữ liệu.............................................................................42
2.8.2 Sơ đồ quan hệ mua hàng.........................................................................43
2.9 Kết quả thực hiện (giao diện) và cài đặt, thử nghiệm.....................................43
2.9.1 Giao diện trang quản trị...........................................................................43

2.9.2 Giao diện đăng nhập hệ thống của admin................................................44
2.9.3 Giao diện danh mục sản phẩm................................................................44
2.9.4 Giao diện chế độ bảo hành......................................................................45
2.9.5 Giao diện nội dung khuyến mãi..............................................................45
2.9.6 Giao diện đơn vị tính...............................................................................46
2.9.7 Giao diện danh sách sản phẩm................................................................46
2.9.8 Giao diện danh sách các đơn hàng..........................................................47
2.9.9 Giao diện danh sách các đơn hàng chưa thanh toán................................47
2.9.10 Giao diện danh sách đơn hàng đã thanh toán........................................48
2.9.11 Giao diện danh sách hàng tồn................................................................48
2.9.12 Giao diện danh sách mặt hàng bán chạy................................................49
2.9.13 Giao diện mặt hàng sắp hết...................................................................49
2.9.14 Giao diện danh sách thành viên.............................................................50
Sinh viên thực hiện: [Điền tên Mã sinh viên] Khóa [Mẫu bìa Kxx] Lớp


vii

2.9.15 Giao diện trang cá nhân của admin.......................................................50
2.9.16 Giao diện quản lý doanh thu..................................................................51
2.9.17 Giao diện danh sách admin...................................................................51
2.9.18 Giao diện trang chủ website..................................................................52
2.9.19 Giao diện danh sách sản phẩm trên website..........................................53
2.9.20 Giao diện liên hệ...................................................................................54
2.9.21 Giao diện giới thiệu...............................................................................54
2.9.22 Giao diện chi tiết sản phẩm...................................................................55
2.9.23 Giao diện đăng ký tài khoản..................................................................55
2.9.24 Giao diện đăng nhập hệ thống của khách hàng.....................................56
2.9.25 Giao diện giỏ hàng................................................................................56
2.9.26 Giao diện thanh toán.............................................................................57

2.9.27 Giao diện thông tin tài khoản khách hàng.............................................58
2.9.28 Giao diện lịch sử giao dịch....................................................................58
2.9.29 Giao diện nạp card................................................................................59
2.9.30 Giao diện đổi mã giảm giá....................................................................59
2.9.31 Cài đặt và thử nghiệm...........................................................................60
2.10 Đánh giá.......................................................................................................60
KẾT LUẬN.............................................................................................................61
TÀI LIỆU THAM KHẢO.......................................................................................62
PHỤ LỤC................................................................................................................ 63

Sinh viên thực hiện: [Điền tên Mã sinh viên] Khóa [Mẫu bìa Kxx] Lớp


viii

DANH MỤC HÌNH VẼ
Bảng 2.1: Các yêu cầu chức năng của ứng dụng.....................................................12
Bảng 2.2: Bảng chức năng của Admin.....................................................................12
Bảng 2.3: Bảng chức năng của khách hàng.............................................................13
Hình 2.1: Biểu đồ Use case tổng quát......................................................................15
Hình 2.2: Biểu đồ Use case đăng nhập....................................................................15
Hình 2.3: Biểu đồ Use case quản lý danh mục........................................................16
Hình 2.4: Biểu đồ Use case quản lý kho..................................................................17
Hình 2.5: Biểu đồ Use case quản lý người dùng......................................................18
Hình 2.6: Biểu đồ use case quản lý đơn hàng..........................................................19
Hình 2.7: Biểu đồ use case quản lý admin...............................................................20
Hình 2.8: Biểu đồ use case quản lý doanh thu.........................................................21
Hình 2.9: Biểu đồ use case quản lý trang cá nhân...................................................21
Hình 2.10: Biểu đồ use case chức năng của khách hàng..........................................22
Hình 2.11: Biều đồ tuần tự chức năng đăng nhập....................................................24

Hình 2.12: Biều đồ tuần tự quản lý danh mục sản phẩm.........................................25
Hình 2.13: Biều đồ tuần tự quản lý sản phẩm..........................................................26
Hình 2.14: Biều đồ tuần tự quản lý mặt hàng bán chạy...........................................27
Hình 2.15: Biều đồ tuần tự quản lý đơn hàng..........................................................27
Hình 2.16: Biều đồ tuần tự quản lý mặt hàng sắp hết..............................................28
Hình 2.17: Biều đồ tuần tự quản lý chế độ bảo hành...............................................29
Hình 2.18: Biểu đồ tuần tự quản lý đơn vị tính........................................................30
Hình 2.19: Biều đồ tuần tự quản lý nội dung khuyến mãi.......................................31
Hình 2.20: Biều đồ tuần tự quản lý admin...............................................................32
Hình 2.21: Biểu đồ tuần tự cấu hình chung Website................................................33
Sinh viên thực hiện: [Điền tên Mã sinh viên] Khóa [Mẫu bìa Kxx] Lớp


ix

Hình 2.22: Biểu đồ tuần tự quản lý hàng tồn...........................................................33
Hình 2.23: Biểu đồ tuần tự nạp card........................................................................34
Hình 2.24: Biểu đồ tuần tự đổi mã giảm giá............................................................34
Hình 2.25: Biểu đồ tuần tự xem lịch sử giao dịch....................................................34
Bảng 2.4: Danh sách các đối tượng.........................................................................35
Hình 2.26: Biểu đồ lớp của Website........................................................................36
Bảng 2.5: Danh sách các bảng cơ sở dữ liệu...........................................................36
Bảng 2.6: Bảng Admin............................................................................................37
Bảng 2.7: Bảng Category.........................................................................................37
Bảng 2.8: Bảng Rating............................................................................................37
Bảng 2.9: Bảng Contact...........................................................................................38
Bảng 2.10: Bảng Orders..........................................................................................38
Bảng 2.11: Bảng product.........................................................................................38
Bảng 2.12: Bảng Transaction...................................................................................39
Bảng 2.13: Bảng Users............................................................................................39

Bảng 2.14: Bảng Units............................................................................................40
Bảng 2.15: Bảng Promotions...................................................................................40
Bảng 2.16: Bảng Code.............................................................................................40
Bảng 2.17: Bảng Card.............................................................................................40
Bảng 2.18: Bảng Guarantee.....................................................................................40
Bảng 2.19: Bảng Listimage.....................................................................................41
Bảng 2.20: Bảng Setting_email...............................................................................41
Bảng 2.21: Bảng Slide.............................................................................................41
Hình 2.27: Mô hình cơ sở dữ liệu............................................................................42
Sinh viên thực hiện: [Điền tên Mã sinh viên] Khóa [Mẫu bìa Kxx] Lớp


x

Hình 2.28: Sơ đồ quan hệ mua hàng........................................................................43
Hình 2.29: Giao diện trang quản trị.........................................................................43
Hình 2.30: Giao diện đăng nhập hệ thống của admin..............................................44
Hình 2.31: Giao diện danh mục sản phẩm...............................................................44
Hình 2.32: Giao diện chế độ bảo hành.....................................................................45
Hình 2.33: Giao diện nội dung khuyến mãi.............................................................45
Hình 2.34: Giao diện đơn vị tính.............................................................................46
Hình 2.35: Giao diện danh sách sản phẩm...............................................................46
Hình 2.36: Giao diện danh sách đơn hàng...............................................................47
Hình 2.37: Giao diện danh sách các đơn hàng chưa thanh toán...............................47
Hình 2.38: Giao diện danh sách đơn hàng đã thanh toán.........................................48
Hình 2.39: Giao diện danh sách hàng tồn................................................................48
Hình 2.40: Giao diện danh sách mặt hàng bán chạy................................................49
Hình 2.41: Giao diện mặt hàng sắp hết....................................................................49
Hình 2.42: Giao diện danh sách thành viên.............................................................50
Hình 2.43: Giao diện trang cá nhân của admin........................................................50

Hình 2.44: Giao diện quản lý doanh thu..................................................................51
Hình 2.45: Giao diện danh sách admin....................................................................51
Hình 2.46: Giao diện trang chủ website...................................................................52
Hình 2.47: Giao diện danh sách sản phẩm trên website...........................................53
Hình 2.48: Giao diện liên hệ....................................................................................54
Hình 2.49: Giao diện giới thiệu...............................................................................54
Hình 2.50: Giao diện chi tiết sản phẩm....................................................................55
Hình 2.51: Giao diện đăng ký tài khoản..................................................................55
Sinh viên thực hiện: [Điền tên Mã sinh viên] Khóa [Mẫu bìa Kxx] Lớp


xi

Hình 2.52: Giao diện đăng nhập hệ thống của khách hàng......................................56
Hình 2.53: Giao diện giỏ hàng.................................................................................56
Hình 2.54: Giao diện thanh toán..............................................................................57
Hình 2.55: Giao diện thông tin tài khoản khách hàng..............................................58
Hình 2.56: Giao diện lịch sử giao dịch....................................................................58
Hình 2.57: Giao diện nạp card.................................................................................59
Hình 2.58: Giao diện đổi mã giảm giá.....................................................................59

Sinh viên thực hiện: [Điền tên Mã sinh viên] Khóa [Mẫu bìa Kxx] Lớp


xii

DANH MỤC BẢNG BIỂU
Bảng 2.1: Các yêu cầu chức năng của ứng dụng.....................................................12
Bảng 2.2: Bảng chức năng của Admin.....................................................................12
Bảng 2.3: Bảng chức năng của khách hàng.............................................................13

Hình 2.1: Biểu đồ Use case tổng quát......................................................................15
Hình 2.2: Biểu đồ Use case đăng nhập....................................................................15
Hình 2.3: Biểu đồ Use case quản lý danh mục........................................................16
Hình 2.4: Biểu đồ Use case quản lý kho..................................................................17
Hình 2.5: Biểu đồ Use case quản lý người dùng......................................................18
Hình 2.6: Biểu đồ use case quản lý đơn hàng..........................................................19
Hình 2.7: Biểu đồ use case quản lý admin...............................................................20
Hình 2.8: Biểu đồ use case quản lý doanh thu.........................................................21
Hình 2.9: Biểu đồ use case quản lý trang cá nhân...................................................21
Hình 2.10: Biểu đồ use case chức năng của khách hàng..........................................22
Hình 2.11: Biều đồ tuần tự chức năng đăng nhập....................................................24
Hình 2.12: Biều đồ tuần tự quản lý danh mục sản phẩm.........................................25
Hình 2.13: Biều đồ tuần tự quản lý sản phẩm..........................................................26
Hình 2.14: Biều đồ tuần tự quản lý mặt hàng bán chạy...........................................27
Hình 2.15: Biều đồ tuần tự quản lý đơn hàng..........................................................27
Hình 2.16: Biều đồ tuần tự quản lý mặt hàng sắp hết..............................................28
Hình 2.17: Biều đồ tuần tự quản lý chế độ bảo hành...............................................29
Hình 2.18: Biểu đồ tuần tự quản lý đơn vị tính........................................................30
Hình 2.19: Biều đồ tuần tự quản lý nội dung khuyến mãi.......................................31
Hình 2.20: Biều đồ tuần tự quản lý admin...............................................................32
Hình 2.21: Biểu đồ tuần tự cấu hình chung Website................................................33
Sinh viên thực hiện: [Điền tên Mã sinh viên] Khóa [Mẫu bìa Kxx] Lớp


xiii

Hình 2.22: Biểu đồ tuần tự quản lý hàng tồn...........................................................33
Hình 2.23: Biểu đồ tuần tự nạp card........................................................................34
Hình 2.24: Biểu đồ tuần tự đổi mã giảm giá............................................................34
Hình 2.25: Biểu đồ tuần tự xem lịch sử giao dịch....................................................34

Bảng 2.4: Danh sách các đối tượng.........................................................................35
Hình 2.26: Biểu đồ lớp của Website........................................................................36
Bảng 2.5: Danh sách các bảng cơ sở dữ liệu...........................................................36
Bảng 2.6: Bảng Admin............................................................................................37
Bảng 2.7: Bảng Category.........................................................................................37
Bảng 2.8: Bảng Rating............................................................................................37
Bảng 2.9: Bảng Contact...........................................................................................38
Bảng 2.10: Bảng Orders..........................................................................................38
Bảng 2.11: Bảng product.........................................................................................38
Bảng 2.12: Bảng Transaction...................................................................................39
Bảng 2.13: Bảng Users............................................................................................39
Bảng 2.14: Bảng Units............................................................................................40
Bảng 2.15: Bảng Promotions...................................................................................40
Bảng 2.16: Bảng Code.............................................................................................40
Bảng 2.17: Bảng Card.............................................................................................40
Bảng 2.18: Bảng Guarantee.....................................................................................40
Bảng 2.19: Bảng Listimage.....................................................................................41
Bảng 2.20: Bảng Setting_email...............................................................................41
Bảng 2.21: Bảng Slide.............................................................................................41
Hình 2.27: Mô hình cơ sở dữ liệu............................................................................42
Sinh viên thực hiện: [Điền tên Mã sinh viên] Khóa [Mẫu bìa Kxx] Lớp


xiv

Hình 2.28: Sơ đồ quan hệ mua hàng........................................................................43
Hình 2.29: Giao diện trang quản trị.........................................................................43
Hình 2.30: Giao diện đăng nhập hệ thống của admin..............................................44
Hình 2.31: Giao diện danh mục sản phẩm...............................................................44
Hình 2.32: Giao diện chế độ bảo hành.....................................................................45

Hình 2.33: Giao diện nội dung khuyến mãi.............................................................45
Hình 2.34: Giao diện đơn vị tính.............................................................................46
Hình 2.35: Giao diện danh sách sản phẩm...............................................................46
Hình 2.36: Giao diện danh sách đơn hàng...............................................................47
Hình 2.37: Giao diện danh sách các đơn hàng chưa thanh toán...............................47
Hình 2.38: Giao diện danh sách đơn hàng đã thanh toán.........................................48
Hình 2.39: Giao diện danh sách hàng tồn................................................................48
Hình 2.40: Giao diện danh sách mặt hàng bán chạy................................................49
Hình 2.41: Giao diện mặt hàng sắp hết....................................................................49
Hình 2.42: Giao diện danh sách thành viên.............................................................50
Hình 2.43: Giao diện trang cá nhân của admin........................................................50
Hình 2.44: Giao diện quản lý doanh thu..................................................................51
Hình 2.45: Giao diện danh sách admin....................................................................51
Hình 2.46: Giao diện trang chủ website...................................................................52
Hình 2.47: Giao diện danh sách sản phẩm trên website...........................................53
Hình 2.48: Giao diện liên hệ....................................................................................54
Hình 2.49: Giao diện giới thiệu...............................................................................54
Hình 2.50: Giao diện chi tiết sản phẩm....................................................................55
Hình 2.51: Giao diện đăng ký tài khoản..................................................................55
Sinh viên thực hiện: [Điền tên Mã sinh viên] Khóa [Mẫu bìa Kxx] Lớp


xv

Hình 2.52: Giao diện đăng nhập hệ thống của khách hàng......................................56
Hình 2.53: Giao diện giỏ hàng.................................................................................56
Hình 2.54: Giao diện thanh toán..............................................................................57
Hình 2.55: Giao diện thông tin tài khoản khách hàng..............................................58
Hình 2.56: Giao diện lịch sử giao dịch....................................................................58
Hình 2.57: Giao diện nạp card.................................................................................59

Hình 2.58: Giao diện đổi mã giảm giá.....................................................................59

Sinh viên thực hiện: [Điền tên Mã sinh viên] Khóa [Mẫu bìa Kxx] Lớp


xvi

DANH MỤC TỪ VIẾT TẮT VÀ THUẬT NGỮ
N/A

Sinh viên thực hiện: [Điền tên Mã sinh viên] Khóa [Mẫu bìa Kxx] Lớp


1

MỞ ĐẦU
Hiện nay, công nghệ thông tin phát triển mạnh mẽ và được ứng dụng ngày
càng nhiều vào các lĩnh vực kinh tế, sản xuất cũng như đời sống của con người. Có
thể thấy công nghệ thông tin được ứng dụng vào hầu khắp các hoạt động. Nhờ đó,
các công việc được thực hiện thuận tiện, nhanh, chính xác và đạt kết quả cao.
Đối với các nhà quản lý và nhà kinh doanh thì việc tìm ra các phương pháp để
đưa sản phẩm của mình đến với người tiêu dùng một cách nhanh chóng là rất cần
thiết. Để quảng bá sản phẩm, nhiều nhà kinh doanh của các công ty lớn đã có chiến
lược quảng cáo trên các phương tiện thông tin đại chúng như báo, radio, truyền
hình,... trong đó quảng bá sản phẩm trên website là một trong những giải pháp hữu
hiệu nhất. Đây là hình thức truyền tải thông tin nhanh chóng, hiệu quả nhưng chi
phí thấp. Cùng với sự phát triển của mạng Internet thì việc tiếp cận để tìm hiểu và
trực tiếp mua bán trên website trực tuyến trở nên dễ dàng hơn bao giờ hết. Không
mất nhiều thời gian mà khách hàng đã có thể mua được sản phẩm mong muốn tốt
nhất chỉ bằng việc nhấp chuột. Chính vì thế, khách hàng có thể mua bán ở mọi nơi,

vào bất kỳ thời gian nào và rất phù hợp với cuộc sống ngày càng bận rộn như ngày
nay.
Cùng với đó, thực tế là nhu cầu mua sắm của người dân ngày càng tăng, đặc
biệt là các thiết bị điện tử như điện thoại di động, máy tính bảng,... Chính vì thế,
một website về quản lý và bán đồ điện tử sẽ đáp ứng được tối đa nhu cầu của người
sử dụng. Hơn nữa, website cũng sẽ cung cấp thông tin một cách đầy đủ, kịp thời bởi
chỉ một vài thao tác click chuột chúng ta đã có thể tìm được sản phẩm phù hợp với
mình, từ giá cả đến kiểu dáng, tính năng phù hợp với mọi tầng lớp người sử dụng.
Thỏa mãn nhu cầu của người sử dụng và nhanh chóng là thành công mà website
mang đến.
Phần mềm quản lý và bán hàng online không chỉ giúp các đối tượng kinh
doanh giới thiệu, quảng bá sản phẩm rộng rãi tới người tiêu dùng mà còn hỗ trợ
việc mua bán qua mạng một cách nhanh chóng, hiệu quả, đáp ứng nhu cầu thiết
thực của người tiêu dùng hiện nay.
Bên cạnh đó, phần mềm này còn cho phép người dùng xem, tìm kiếm thông
tin, đặt mua sản phẩm được quảng bá trên website khi có nhu cầu.
Từ những lý do trên, em quyết định chọn đề tài “Xây dựng Website bán đồ
điện tử”. Việc xây dựng website sẽ giúp cho công việc kinh doanh trở nên thuận
lợi và dễ dàng hơn, đáp ứng được nhu cầu làm việc mọi lúc, mọi nơi, đồng thời thỏa
mãn nhu cầu xem thông tin, mua bán online…của mọi đối tượng khách hàng.
Hệ thống website được xây dựng dựa trên các mục tiêu chính:
- Hệ thống hiển thị thông tin sản phẩm theo từng loại, danh mục sản phẩm.
- Cung cấp tính năng đặt hàng, thanh toán, tìm kiếm thông tin sản phẩm, bài
viết cho khách hàng.
Sinh viên thực hiện: [Điền tên Mã sinh viên] Khóa [Mẫu bìa Kxx] Lớp


2

-

Cho phép khách hàng đăng ký, đăng nhập hệ thống, gửi thông tin liên hệ, bình
luận sản phẩm.
Quản trị hệ thống có thể quản lý các sản phẩm, danh mục sản phẩm, bài viết,
đơn hàng, doanh thu, cập nhật thông tin cá nhân, quản lý hàng tồn kho, quản
lý thông tin khách hàng và admin trong hệ thống.
Nội dung đề tài gồm các phần:
Phần 1: Đặt vấn đề và định hướng giải pháp.
Phần 2: Các kết quả đạt được

Sinh viên thực hiện: [Điền tên Mã sinh viên] Khóa [Mẫu bìa Kxx] Lớp


3

PHẦN 1: ĐẶT VẤN ĐỀ VÀ ĐỊNH HƯỚNG GIẢI PHÁP
1.1 Nhiệm vụ
Hệ thống website bán đồ điện tử được xây dựng với các chức năng cơ bản sau:
- Quản lý danh mục sản phẩm
- Quản lý sản phẩm
- Quản lý đơn hàng
- Quản lý hàng tồn kho
- Quản lý danh sách khách hàng
- Quản lý tài khoản admin
- Quản lý doanh thu
- Quản lý các chương trình khuyến mãi, chế độ bảo hành, đơn vị tính
- Hiển thị các sản phẩm kinh doanh trên website, các bài giới thiệu.
- Cho phép khách hàng đăng ký, đăng nhập hệ thống.
- Cho phép khách hàng tìm kiếm bài viết, sản phẩm, đặt hàng và thanh toán, gửi
thông tin liên hệ, bình luận sản phẩm, đánh giá sản phẩm.

- Chức năng nạp card và đổi mã khuyến mãi để thanh toán.
1.2 Định hướng giải quyết
- Nghiên cứu lý thuyết về các ngôn ngữ lập trình như PHP, HTML, CSS, các
thư viện hỗ trợ, cơ sở dữ liệu MySQL.
- Tìm hiểu quy trình nghiệp vụ của website bán hàng online.
- Phân tích thiết kế và xây dựng hệ thống dựa trên quy trình và cơ sở kiến thức
đã tìm hiểu.
1.3 Tóm tắt cơ sở lý thuyết và công cụ sử dụng
1.3.1. Ngôn ngữ HTML
Giới thiệu chung:
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 được quy ra là một tài liệu 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 lập ra các chuẩn trên môi
trườ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 ngọn (ví dụ <html>) và thường là sẽ được khai báo thành một cặp, bao gồm
thẻ mở và thẻ đóng (ví <strong> dụ </strong> và ). Các văn bản muốn được đánh
dấu bằng HTML sẽ được khai báo bên trong cặp thẻ (ví dụ <strong>Đây là chữ in
đậm</strong>). Nhưng một số thẻ đặc biệt lại không có thẻ đóng và dữ liệu được
khai báo sẽ nằm trong các thuộc tính (ví dụ như thẻ <img>).
Sinh viên thực hiện: [Điền tên Mã sinh viên] Khóa [Mẫu bìa Kxx] Lớp


4

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.

Khi một tập tin HTML được hình thành, việc xử lý nó sẽ do trình duyệt web
đảm nhận. Trình duyệt sẽ đóng vai trò đọc hiểu nội dung HTML từ các thẻ bên
trong và sẽ chuyển sang dạng văn bản đã được đánh dấu để đọc, nghe hoặc hiểu (do
các bot máy tính hiểu).
Cấu trúc một đoạn 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 mà cần định dạng với HTML.
Ví dụ:

Đây là một đoạn văn bản trong HTML.

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 bằng (=) với tên thuộc tính.
Ví dụ: <form action=""> </form>
Vai trò của HTML
HTML là một ngôn ngữ đánh dấu siêu văn bản nên nó sẽ 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ố (media)
như hình ảnh, video, nhạc. Tuy nhiên, không có nghĩa là chỉ sử dụng HTML để tạo
ra một website mà HTML chỉ đóng một vai trò hình thành trên website.
Ưu điểm của HTML:
- Tương thích với mọi hệ điều hành cùng các trình duyệt của nó.
- Khả năng dễ học, dễ viết
- Việc soạn thảo đòi hỏi hết sức đơn giản, có thể dùng word, notepad hay bất cứ
một trình soạn thảo văn bản nào để viết và chỉ cần lưu với định dạng “.html “
hoặc “.htm” là đã có thể tạo ra một file chứa HTML.
- Cho phép nhúng thêm các đối tượng hình ảnh, âm thanh, các ngôn ngữ kịch
bản như Javascript để tạo hiệu ứng động cho trang web.
- Cho phép sử dụng kết hợp với CSS để trình bày trang web hiệu quả hơn.
Phiên bản mới nhất của HTML hiện nay là HTML5 với nhiều tính năng ưu
việt so với các phiên bản cũ HTML:
- HTML5 hỗ trợ mạnh mẽ các phần tử multimedia mà không cần các plugin.
- HTML5 nói chung mạnh mẽ hơn nhiều không chỉ về tốc độ và độ thích ứng

cao mà chính là khả năng hỗ trợ API (Application Programming Interface giao diện lập trình ứng dụng) và DOM (Document Object Model – các đối
tượng thao tác văn bản).
1.3.2 Ngôn ngữ CSS
CSS là chữ viết tắt của Cascading Style Sheets, là một ngôn ngữ được sử dụng
để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (ví dụ
như HTML).Có thể hiểu đơn giản nếu HTML đóng vai trò định dạng các phần tử
Sinh viên thực hiện: [Điền tên Mã sinh viên] Khóa [Mẫu bìa Kxx] Lớp


5

trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúp
chúng ta có thể thêm một chút “phong cách” vào các phần tử HTML đó như đổi
màu sắc trang, đổi màu chữ, thay đổi cấu trúc,…rất nhiều.
Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng
chọn có thể là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác. Sau đó là
CSS sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó.
Cấu trúc một đoạn CSS: gồm 4 phần
vùng chọn {
thuộc tính : giá trị;
thuộc tính: giá trị;
.....
}
Nghĩa là CSS sẽ được khai báo bằng vùng chọn, sau đó các thuộc tính và giá
trị sẽ nằm bên trong cặp dấu ngoặc nhọn {}. Mỗi thuộc tính sẽ luôn có một giá trị
riêng, giá trị có thể là dạng số, hoặc các tên giá trị trong danh sách có sẵn của CSS.
Phần giá trị và thuộc tính phải được cách nhau bằng dấu hai chấm, và mỗi một dòng
khai báo thuộc tính sẽ luôn có dấu chấm phẩy ở cuối. Một vùng chọn có thể sử dụng
không giới hạn thuộc tính.
Tác dụng của CSS:

- Hạn chế tối thiểu việc làm rối mã HTML của trang Web bằng các thẻ quy định
kiểu dáng (chữ đậm, chữ in nghiêng, chữ có gạch chân, chữ màu), khiến mã
nguồn của trang Web được gọn gàng hơn, tách nội dung của trang Web và
định dạng hiển thị, dễ dàng cho việc cập nhật nội dung.
- Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang Web, giúp tránh phải lặp
lại việc định dạng cho các trang Web giống nhau.
1.3.3 Ngôn ngữ lập trình PHP
PHP - viết tắt hồi quy của "Hypertext Preprocessor", là một ngôn ngữ lập trình
kịch bản được chạy ở phía server nhằm sinh ra mã html trên client. PHP đã trải qua
rất nhiều phiên bản và được tối ưu hóa cho các ứng dụng web, với cách viết mã rõ
rãng, tốc độ nhanh, dễ học nên PHP đã trở thành một ngôn ngữ lập trình web rất
phổ biến và được ưa chuộng.
PHP chạy trên môi trường Webserver và lưu trữ dữ liệu thông qua hệ quản trị
cơ sở dữ liệu nên PHP thường đi kèm với Apache, MySQL và hệ điều hành Linux
(LAMP).
- Apache là một phần mềm web server có nhiệm vụ tiếp nhận request từ trình
duyệt người dùng sau đó chuyển giao cho PHP xử lý và gửi trả lại cho trình
duyệt.
- MySQL cũng tương tự như các hệ quản trị cơ sở dữ liệu khác (Postgress,
Oracle, SQL server...) đóng vai trò là nơi lưu trữ và truy vấn dữ liệu.
Sinh viên thực hiện: [Điền tên Mã sinh viên] Khóa [Mẫu bìa Kxx] Lớp


6

-

Linux: Hệ điều hành mã nguồn mở được sử dụng rất rộng rãi cho các
webserver. Thông thường các phiên bản được sử dụng nhiều nhất là RedHat
Enterprise Linux, Ubuntu...

Phương thức hoạt động của PHP: Khi người sử dụng gọi trang PHP, Web
Server sẽ triệu gọi PHP Engine để thông dịch dịch trang PHP và trả kết quả cho
người dùng.
1.3.4 Thư viện hỗ trợ
 Thư viện JavaScript
JavaScript là một ngôn ngữ lập trình đa nền tảng (cross-platform), ngôn ngữ
lập trình kịch bản, hướng đối tượng. JavaScript là một ngôn ngữ nhỏ và nhẹ (small
and lightweight). Khi nằm bên trong một môi trường (host environment), JavaScript
có thể kết nối tới các object của môi trường đó và cung cấp các cách quản lý chúng
(object).
JavaScript chứa các thư viện tiêu chuẩn cho các object, ví dụ như: Array, Date,
và Math, và các yếu tố cốt lõi của ngôn ngữ lập trình như: toán tử (operators), cấu
trúc điều khiển (control structures), và câu lệnh. JavaScript có thể được mở rộng cho
nhiều mục đích bằng việc bổ sung thêm các object; ví dụ:
- Client-side JavaScript - JavaScript phía máy khách, JavaScript được mở rộng
bằng cách cung cấp các object để quản lý trình duyệt và Document Object
Model (DOM) của nó. Ví dụ, phần mở rộng phía máy khách cho phép một ứng
dụng tác động tới các yếu tố trên một trang HTML và phản hồi giống các tác
động của người dùng như click chuột, nhập form, và chuyển trang.
- Server-side JavaScript - JavaScript phía Server, JavaScript được mở rộng bằng
cách cung cấp thêm các đối tượng cần thiết để để chạy JavaScript trên máy
chủ. Ví dụ, phần mở rộng phía server này cho phép ứng dụng kết nối với cơ sở
dữ liệu (database), cung cấp thông tin một cách liên tục từ một yêu cầu tới phần
khác của ứng dụng, hoặc thực hiện thao tác với các tập tin trên máy chủ.
JavaScript và tiêu chuẩn ECMAScriptSection:
JavaScript được tiêu chuẩn hóa tại Ecma International — the European
association for standardizing information and communication systems, Liên kết
Châu Âu cho các tiêu chuẩn hóa hệ thống thông tin và truyền thông (ECMA trước
đây là viết tắt cho the European Computer Manufacturers Association) cung cấp một
tiêu chuẩn hóa, nền tảng ngôn ngữ lập trình mở quốc tế lên JavaScript. Phiên bản đã

tiêu chuẩn hóa của JavaScript được gọi là ECMAScript, làm việc giống với cái cách
mà tất cả ứng dụng đã được hỗ trợ theo tiêu chuẩn. Các công ty có thể sử dụng tiêu
chuẩn ngôn ngữ mở (open standard language) để phát triển các implementation của
JavaScript riêng cho họ. Tiêu chuẩn ECMAScript là tài liệu nằm trong tiêu chuẩn
ECMA-262 (ECMA-262 specification). Xem New in JavaScript để biết thêm về sự
Sinh viên thực hiện: [Điền tên Mã sinh viên] Khóa [Mẫu bìa Kxx] Lớp


7

khác nhau giữa các phiên bản JavaScript cũng như sự khác nhau của phiên bản tiêu
chuẩn ECMAScript (ECMAScript specification editions).
Tiêu chuẩn ECMA-262 cũng đã được phê duyệt bởi ISO (International
Organization for Standardization) tại ISO-16262. Bạn cũng có thể tìm tiêu chuẩn
trên the Ecma International website. Tiêu chuẩn ECMAScript không bao gồm các
mô tả cho Document Object Model (DOM), nó được tiêu chuẩn hóa bởi World Wide
Web Consortium (W3C). DOM định nghĩa cách mà các đối tượng trong HTML tiếp
xúc với các đoạn script của bạn. Để có được một cảm nhận tốt hơn về các công
nghệ khác nhau được sử dụng khi lập trình với JavaScript, hãy tham khảo bài
viết tổng quan về công nghệ JavaScript.
 Thư viện Ajax
Khác với các phần mềm chạy độc lập ở máy khách (có khả năng tương tác gần
như tức thời với người dùng), các ứng dụng Web bị giới hạn bởi chính nguyên lý
hoạt động của nó: tất cả các giao dịch phải thực hiện thông qua phương thức giao
dịch HTTP (HyperText Transport Protocol - Giao thức truyền tải qua các siêu liên
kết) trong một mô hình có tên Client/Server. Bất kỳ một tác động nào của người
dùng lên ứng dụng Web thông qua trình duyệt đều cần thời gian gửi về Server và
sau khi xử lý, Server sẽ trả về những thông tin người dùng mong đợi. Như vậy, độ
trễ trong trường hợp này chính là điều mà các ứng dụng Web khó có thể sánh với
như các phần mềm chạy trên máy tính đơn lẻ (đặc biệt là trong các ứng dụng như

Bản đồ trực tuyến, soạn thảo văn bản trực tuyến, sát hạch trực tuyến có tính thời
gian làm bài…).
Thuật ngữ AJAX được xuất hiện vào ngày 18/2/2005 trong một bài báo có tên
AJAX : A New Approach to Web Applications của tác giả Jesse James Garrett, công
ty AdapativePath. Ông định nghĩa và tóm gọn lại từ cụm từ “Asynchronous
JavaScript+CSS+DOM+XMLHttpRequest”. Ngay sau đó thuật ngữ AJAX được
phổ biến cực kỳ nhanh chóng trong cộng đồng phát triển Web và cho đến nay nó là
một trong những từ khóa được tìm kiếm nhiều nhất trên Internet.
Nội dung định nghĩa của Garrett về AJAX như sau:
- AJAX không phải là một công nghệ. Nó là tập hợp của nhiều công nghệ với
thế mạnh của riêng mình để tạo thành một sức mạnh mới. AJAX bao gồm:
- Thể hiện Web theo tiêu chuẩn XHTML và CSS;
- Nâng cao tính năng động và tương tác bằng DOM (Document Object Model);
- Trao đổi và xử lý dữ liệu bằng XML và XSLT;
- Truy cập dữ liệu theo kiểu bất đồng bộ (asynchronous) bằng
XMLHttpRequest;
- Và tất cả các kỹ thuật trên được liên kết lại với nhau bằng JavaScript.
Cấu trúc và cách hoạt động:
Sinh viên thực hiện: [Điền tên Mã sinh viên] Khóa [Mẫu bìa Kxx] Lớp


8

Trong các thành phần cấu thành trên, điểm mấu chốt của AJAX nằm ở
XMLHttpRequest. Đây là một kỹ thuật do Microsoft khởi xướng và tích hợp lần
đầu tiên vào IE5 dưới dạng một ActiveX. Mozilla tích hợp công nghệ này vào
Mozilla 1.0/Netscape 6 sau đó (đương nhiên toàn bộ các version sau này của
Firefox đều có XMLHttpRequest) và hiện nay đã có trong trình duyệt Safari 1.2
(Apple) và Opera 7 trở lên. Sau đây là một số nét khác biệt cơ bản giữa các ứng
dụng Web truyền thống và ứng dụng Web sử dụng AJAX:

- Trong các ứng dụng Web truyền thống, khi người dùng có một cần thay đổi dữ
liệu trên trang Web, yêu cầu thay đổi được gửi về server dưới dạng HTTP
request (hay còn gọi postback), server sẽ xử lý yêu cầu này và gửi trả lại trang
HTML khác thay thế trang cũ. Qui trình này được mô tả là nhấp-chờ và tải lại
(click-wait-and-refresh): ví dụ người dùng sau khi nhấn một nút “Submit” trên
trang Web phải chờ cho đến khi server xử lý xong mới có thể tiếp tục công
việc.
- Ngược lại, trong các ứng dụng AJAX, người dùng có thể nhấn chuột, gõ phím
liên tục mà không cần chờ đợi. Nội dung tương ứng với từng hành động của
người dùng sẽ gần như ngay lập tức được hiển thị vào vị trí cần thiết (đáp ứng
gần như tức thời) trong khi trang Web không cần phải refresh lại toàn bộ nội
dụng.
 Thư viện BOOTSTRAP
Bootstrap là một framework cho phép thiết kế website reponsive nhanh hơn và
dễ dàng hơn.
Bootstrap là bao gồm các HTML templates, CSS templates và Javascript tao ra
những cái cơ bản có sẵn như: typography, forms, buttons, tables, navigation,
modals, image carousels và nhiều thứ khác. Trong bootstrap có thêm các plugin
Javascript trong nó. Giúp cho việc thiết kế reponsive của bạn dễ dàng hơn và nhanh
chóng hơn.
Lịch sử Bootstrap: Bootstrap là được phát triển bởi Mark Otto và Jacob
Thornton tại Twitter, được xuất bản như là một mã nguồn mở vào tháng 8 năm 2011
trên GitHub.
Những điểm thuận lợi khi bản sử dụng bootstrap:
- Rất dễ để sử dụng bởi được base trên HTML, CSS và Javascript chỉ cẩn có
kiến thức cơ bản về HTML, CSS và Javascript là có thể sử dụng bootstrap tốt.
- Tính năng Responsive: Bootstrap’s xây dựng sẵn reponsive css trên các thiết
bị phones, tablets, và desktops
- Mobile: Trong Bootstrap 3 mobile-first styles là một phần của core
framework.

- Tương thích với trình duyệt: tương thích với tất cả các trình duyệt (Chrome,
Firefox, Internet Explorer, Safari, and Opera).
Sinh viên thực hiện: [Điền tên Mã sinh viên] Khóa [Mẫu bìa Kxx] Lớp