- Website bán mũ bảo hiểm viết bằng ngôn ngữ PHP và các công nghệ: HTML, Javascript, Bootstrap, jQuery, CSS. - Phân tích và thiết kế cơ sở lưu dữ liệu. - Xây dựng website bán mũ bảo hiểm với các chức năng: + Trang chủ giới thiệu, quảng cáo sản phẩm. + Tạo tài khoản, đăng nhập. + Tra cứu theo các tiêu chí: loại, hãng, giá tiền. + Lập phiếu đặt hàng cho nhà cung cấp, nhập hàng về kho. + Lập giỏ hàng, thanh toán trực tuyến, đặt hàng. + Duyệt đơn hàng, phân công nhân viên giao hàng. + Báo cáo các đơn hàng chưa duyệt. + Báo cáo doanh thu theo từng tháng của cửa hàng trong một khoảng thời gian. + Các báo cáo tồn kho, doanh thu, lợi nhuận.
Trang 1HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG
-BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC
Đề tài:
WEBSITE BÁN MŨ BẢO HIỂM
Trang 2
Kính thưa thầy cô và các bạn!
Thời gian học tập tại mái trường Học viện Công nghệ Bưu chính Viễn Thông cơ
sở tại Tp Hồ Chí Minh của bản thân em sắp sửa kết thúc Qua thời gian học tập, em đãtiếp thu cho mình một số kiến thức cơ bản dưới sự giảng dạy của thầy cô tại Học ViệnCông Nghệ Bưu Chính Viễn Thông cơ sở tại TP HCM Để gắn với thực tiễn, lấyphương châm “học đi đôi với thực hành” em đã chọn và làm đề tài “Website bán mũbảo hiểm” Trong suốt thời gian thực hiện đề tài, em đã nhận được rất nhiều sự quantâm, giúp đỡ, ủng hộ của thầy cô, bạn bè và gia đình Chính điều đó là niềm khích lệ,động viên lớn để giúp em thực hiện tốt đề tài tốt nghiệp này
Trước tiên, em xin gửi lời tri ân sâu sắc đến Ban giám hiệu Nhà trường, quýthầy cô khoa Công nghệ thông tin đã tận tâm dẫn dắt, nhiệt tình giảng dạy và truyềnđạt cho em rất nhiều kiến thức quý báu trong các học kỳ vừa qua
Đặc biệt, em xin chân thành cám ơn thầy Lưu Nguyễn Kỳ Thư, người đã tậntình hướng dẫn, tận tâm giảng dạy, truyền đạt kiến thức và chỉ bảo em trong suốt quátrình học và thực hiện đề tài Một lần nữa, em xin chân thành cảm ơn thầy Kính chúcthầy và gia đình nhiều sức khỏe và thành công trong cuộc sống
Và xin chân thành cảm ơn tất cả các bạn đã luôn sát cánh, hỗ trợ, giúp đỡ, độngviên mình trong những thời điểm khó khăn, tiếp thêm động lực và ý chí giúp vượt quakhó khăn trong hành trình chinh phục tri thức
Bước đầu đi vào thực tế, tìm hiểu về lĩnh vực mới, kiến thức của em còn hạnchế và còn nhiều bỡ ngỡ Do vậy, khó tránh khỏi những sai sót, em rất mong nhậnđược những ý kiến đóng góp quý báu của quý thầy cô và các bạn học cùng lớp để kiếnthức của em trong lĩnh vực này được hoàn thiện hơn
Em xin chân thành cám ơn!
TP Hồ Chí Minh, ngày 17 tháng 12 năm 2020 Sinh viên thực hiện
Phạm Lý Quỳnh
Trang 3CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI 1
1.1 Tổng quan 1
1.2 Tìm hiểu “Website bán mũ bảo hiểm” 1
1.3 Công cụ sử dụng 2
1.4 Mục tiêu đề tài 2
CHƯƠNG 2: SƠ LƯỢC VỀ CÔNG CỤ 3
2.1 Xây dựng hệ thống 3
2.1.1 Giới thiệu Visual Studio Code 3
2.1.2 Giới thiệu về phpMyAdmin 4
2.1.3 Giới thiệu về XAMPP 4
2.2 Giới thiệu về ngôn ngữ lập trình PHP và các công nghệ sử dụng 5
2.2.1 Giới thiệu về PHP 5
2.2.2 Giới thiệu về HTML 7
2.2.3 Giới thiệu về CSS 8
2.2.4 Giới thiệu về Javascript 9
2.2.5 Giới thiệu về jQuery 9
2.2.6 Giới thiệu về Bootstrap 10
CHƯƠNG 3: KHẢO SÁT HỆ THỐNG 12
3.1 Khảo sát hệ thống website bán mũ bảo hiểm online 12
3.2 Các chức năng của hệ thống 13
3.2.1 Yêu cầu chức năng của hệ thống 13
3.1.1 Yêu cầu phi chức năng 13
CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 14
4.1 Mô hình chức năng nghiệp vụ (BFD – Business Function Diagram) 14
4.2 Mô hình luồng dữ liệu (DFD – Data Flow Diagram) 15
4.3 Thiết lập mô hình thực thể ERD (ERD – Entity Relationship Diagram) 16
4.3.1 Xác định các thực thể 16
4.3.2 Xác định mối quan hệ giữa các thực thể 17
4.3.3 Sơ đồ ERD 19
4.3.4 Mô Hình Dữ Liệu Quan Hệ 19
4.4 Thiết kế dữ liệu 20
4.4.1 Từ điển dữ liệu 20
4.4.2 Mô hình Diagram 27
4.5 Ràng buộc toàn vẹn và tầm ảnh hưởng 28
4.5.1 Ràng buộc toàn vẹn liên bộ 28
4.5.2 Ràng buộc toàn vẹn tham chiếu 29
4.5.3 Ràng buộc toàn vẹn miền giá trị 29
Trang 4CHƯƠNG 5: DEMO CHƯƠNG TRÌNH 31
5.1 Các chức năng của hệ thống 31
5.2 Thiết kế giao diện 31
5.2.1 Trang người dùng 31
5.2.2 Trang quản trị 40
5.2.3 Trang quản lý đơn hàng cho shipper 65
PHỤ LỤC 67
THANH TOÁN PAYPAL TRONG MÔI TRƯỜNG SANDBOX 67
1 Tổng quan về Sandbox Paypal API 67
2 Nhúng Sandbox Paypal API 67
KẾT LUẬN 72
TÀI LIỆU THAM KHẢO 73
Trang 5Hình 1 Giao diện Visual Studio Code 3
Hình 2 Giao diện phpMyAdmin 4
Hình 3 Giao diện XAMPP 5
Hình 4 Cú pháp PHP 6
Hình 5 Sơ đồ hoạt động của PHP 6
Hình 6 Cú pháp HTML 8
Hình 7 Cú pháp CSS 8
Hình 8 Cú pháp Javascript 9
Hình 9 Cú pháp jQuery 10
Hình 10 Cú pháp Bootstrap 11
Hình 11 Mô hình phân rã chức năng được biểu diễn thành hình cây phân cấp 14
Hình 12 Các đối tượng cơ bản để thiết kế biểu đồ luồng dữ liệu 15
Hình 13 Biểu đồ luồng dữ liệu mức khung cảnh 15
Hình 14 Biểu đồ luồng dữ liệu mức đỉnh 16
Hình 15 Sơ đồ ERD 19
Hình 16 Mối quan hệ giữa khách hàng với bình luận, đơn hàng, trả hàng, sản phẩm, khuyến mãi 27
Hình 17 Mối quan hệ giữa nhân viên với đơn hàng, phân công giao hàng, phân quyền. 28
Hình 18 Mối quan hệ giữa nhân viên với đặt hàng tới nhà cung cấp, nhập hàng 28
Hình 19 Màn hình login cho User 31
Hình 20 Màn hình đăng ký cho khách hàng 32
Hình 21 Mail xác nhận tài khoản 33
Hình 22 Header trang chủ 33
Hình 23 Sản phẩm nổi bật 34
Hình 24 Sản phẩm khuyến mãi 34
Hình 25 Sản phẩm mới 34
Hình 26 Footer trang chủ 35
Hình 27 Thanh tìm kiếm 35
Trang 6Hình 29 Trang chi tiết sản phẩm 36
Hình 30 Sản phẩm hết hàng 36
Hình 31 Sản phẩm liên quan 37
Hình 32 Màn hình xem giỏ hàng 37
Hình 33 Trang thông tin người nhận 38
Hình 34 Đăng nhập tài khoản Paypal 38
Hình 35 Màn hình thanh toán 39
Hình 36 Thanh toán thành công 39
Hình 37 Trang theo dõi đơn hàng 40
Hình 38 Trang thông tin khách hàng 40
Hình 39 Màn hình đăng nhập cho nhân viên 41
Hình 40 Trang quản trị của Admin 41
Hình 41 Chọn nhân viên giao hàng 42
Hình 42 Danh sách đơn hàng đang giao 42
Hình 43 Hóa đơn bán hàng 43
Hình 44 In hóa đơn bán hàng 43
Hình 45 Danh sách đơn hàng hoàn tất 44
Hình 46 Danh sách đơn hàng đã hủy 44
Hình 47 Danh sách loại sản phẩm 44
Hình 48 Thêm loại sản phẩm 45
Hình 49 Danh sách sản phẩm theo loại 45
Hình 50 Thêm sản phẩm mới 46
Hình 51 Tạo phiếu đặt hàng 46
Hình 52 Thông báo tạo phiếu đặt hàng thành công 47
Hình 53 Xuất file excel phiếu đặt hàng gửi nhà cung cấp 47
Hình 54 Danh sách đơn đặt hàng đang xử lý 48
Hình 55 Danh sách đơn đặt đã hoàn tất 48
Hình 56 Danh sách đơn đặt đã hủy 49
Trang 7Hình 58 Tạo phiếu nhập hàng 50
Hình 59 Thông báo tạo phiếu nhập thành công 50
Hình 60 Phiếu nhập sau khi tạo xong 51
Hình 61 File excel nhập hàng 51
Hình 62 Nhập hàng từ file excel 52
Hình 63 Báo cáo lợi nhuận 53
Hình 64 Xuất file excel báo cáo lợi nhuận 53
Hình 65 Công thức tính lợi nhuận 53
Hình 66 Báo cáo tồn kho 54
Hình 67 Xuất file excel báo cáo tồn kho 54
Hình 68 Công thức tính tồn kho 55
Hình 69 Báo cáo doanh thu 55
Hình 70 Xuất file excel báo cáo doanh thu 56
Hình 71 Công thức tính doanh thu 56
Hình 72 Báo cáo sản phẩm bán ra 56
Hình 73 Xuất file báo cáo sản phẩm bán ra 57
Hình 74 Công thức tính sản phẩm bán ra 57
Hình 75 Danh sách nhân viên 57
Hình 76 Thêm nhân viên mới 58
Hình 77 Danh sách khách hàng 59
Hình 78 Thêm khách hàng mới 60
Hình 79 Danh sách phân công 60
Hình 80 Thêm phân công 61
Hình 81 Danh sách các URL 61
Hình 82 Thêm URL 62
Hình 83 Danh sách danh mục 62
Hình 84 Thêm danh mục mới 62
Hình 85 Danh sách phân quyền 63
Trang 8Hình 87 Danh sách chương trình khuyến mãi 64
Hình 88 Thêm chương trình khuyến mãi mới 64
Hình 89 Thông tin tài khoản riêng 65
Hình 90 Shipper đăng nhập vào hệ thống 65
Hình 91 Đơn hàng của shipper 65
Hình 92 Bản đồ chỉ đường cho shipper 66
Hình 93 Giao thành công đơn hàng 66
Hình 94 Đăng nhập Paypal 67
Hình 95 Giao diện Dashboard 68
Hình 96 Giao diện Accounts 68
Hình 97 Chọn loại Accounts 69
Hình 98 Danh sách Accounts 69
Hình 99 Sửa thông tin Accounts 70
Hình 100 Tạo ứng dụng trên Dashboard 70
Hình 101 Client ID và Secret 71
Hình 102 Import Paypal SDK 71
Trang 9CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI
1.1 Tổng quan
Trong thời đại cách mạng công nghiệp 4.0, thương mại điện tử (TMĐT) đã pháttriển rất nhanh chóng trên thế giới và Việt Nam Thương mại điện tử, hay còn gọi là e-commerce, e-comm hay EC, là sự mua bán sản phẩm hay dịch vụ trên các hệ thốngđiện tử như Internet và các mạng máy tính Theo khảo sát của Hiệp hội Thương mạiđiện tử Việt Nam (VECOM), tốc độ tăng trưởng của thương mại điện tử đạt trên 32%.Quy mô thương mại điện tử bán lẻ hàng hoá và dịch vụ tiêu dùng năm 2019 đạtkhoảng 11,5 tỷ USD VECOM dự đoán tốc độ tăng trưởng của năm 2020 sẽ tiếp tụcduy trì ở mức trên 30%, khi đó quy mô thương mại điện tử Việt Nam sẽ vượt con số 15
tỷ USD Mô hình bán hàng trực tuyến mở rộng và phát triển không chỉ đơn thuần ởviệc các doanh nghiệp bán lẻ xây dựng website cho phép khách hàng “đi chợ” trựctuyến, mà còn ở việc hàng loạt các chuyên trang TMĐT nội địa và nước ngoài đangnhanh chóng thâm nhập sâu và rộng vào thị trường thương mại nước ta Có thể kể rahàng loạt các website TMĐT đang hoạt động khá tốt tại thị trường Việt Nam nhưLazada, Tiki, Shopee, Sendo,… Các website này liên tục có những màn mời chào ấntượng, giảm giá thường xuyên theo ngày, sản phẩm ngày càng đa dạng, phong phú đểngười dùng dễ dàng lựa chọn
TMĐT hiện đại thường sử dụng công nghệ World Wide Web, hay còn gọi làWeb sẽ giúp bạn đưa những thông tin mong muốn của mình lên mạng Internet cho mọingười cùng xem một cách dễ dàng với các công cụ và những ngôn ngữ lập trình khácnhau Sự ra đời của các ngôn ngữ lập trình cho phép chúng ta xây dựng các trang Webđáp ứng được các yêu cầu của người sử dụng PHP (Personal Home Page) là kịch bảntrên phía trình chủ (Server Script) cho phép chúng ta xây dựng trang Web trên cơ sở
dữ liệu Với nhiều ưu điểm nổi bật mà PHP và MySQL được rất nhiều người sử dụng
Bằng việc thực hiện đề tài “Website bán mũ bảo hiểm”, em muốn tìm hiểu vể
ngôn ngữ PHP cũng như quá trình xây dựng một website TMĐT nhằm giải quyết côngviệc bán hàng trực tuyến Website mang lại rất nhiều lợi ích như: khả năng quảng cáocác loại sản phẩm được phổ biến, việc kinh doanh sẽ mở 24/24, giảm thiểu chi phínhân viên cho việc tiếp thị, dễ dàng nhận phản hồi từ phía khách hàng, dễ quản lý hànghóa và thống kê doanh thu,
Website bán hàng giúp cung cấp cho khách hàng những lựa chọn linh hoạt vàtiện lợi trong việc tìm mua sản phẩm thông qua chức năng tìm kiếm và giỏ hàng Cácthông tin về sản phẩm được hiển thị chi tiết với từng sản phẩm, từ đó khách hàng dễdàng nhận biết và lựa chọn được sản phẩm phù hợp
1.2 Tìm hiểu “Website bán mũ bảo hiểm”.
- Tìm hiểu về thương mại điện tử
Trang 10- Tìm hiểu về ngôn ngữ PHP và các công nghệ: HTML, Javascript, Bootstrap,jQuery, CSS.
- Phân tích và thiết kế cơ sở lưu dữ liệu
- Xây dựng website bán mũ bảo hiểm với các chức năng:
+ Trang chủ giới thiệu, quảng cáo sản phẩm
+ Tạo tài khoản, đăng nhập
+ Tra cứu theo các tiêu chí: loại, hãng, giá tiền
+ Lập phiếu đặt hàng cho nhà cung cấp, nhập hàng về kho
+ Lập giỏ hàng, thanh toán trực tuyến, đặt hàng
+ Duyệt đơn hàng, phân công nhân viên giao hàng
+ Báo cáo các đơn hàng chưa duyệt
+ Báo cáo doanh thu theo từng tháng của cửa hàng trong một khoảng thời gian
+ Các báo cáo tồn kho, doanh thu, lợi nhuận
- Xây dựng các chức năng cơ bản của website bán hàng thương mại điện tử
- Đảm bảo việc mua bán mũ bảo hiểm giữa shop bán hàng và khách hàng diễn ra
nhanh chóng
- Giúp người quản lý quản lý tình hình hoạt động của cửa hàng và xem báo cáo,
thống kê
- Đảm bảo khách hàng có thông tin chính xác về sản phẩm, đặt mua và thanh toán
diễn ra đơn giản
Trang 11CHƯƠNG 2: SƠ LƯỢC VỀ CÔNG CỤ
2.1 Xây dựng hệ thống
2.1.1 Giới thiệu Visual Studio Code
Visual Studio Code là một trình biên tập lập trình code miễn phí dành choWindows, Linux và macOS, Visual Studio Code được phát triển bởi Microsoft Nó
được xem là một sự kết hợp hoàn hảo giữa IDE và Code Editor Nó hỗ trợ chức năng
Debug, đi kèm với Git, có syntax highlighting, tự hoàn thành mã thông minh, snippets,
và cải tiến mã nguồn Nhờ tính năng tùy chỉnh, Visual Studio Code cũng cho phépngười dùng thay đổi theme, phím tắt, và các tùy chọn khác
Hình 1 Giao diện Visual Studio Code.
Một số tính năng của Visual Studio Code:
Hỗ trợ nhiều ngôn ngữ lập trình: C/C++, C#, F#, Visual Basic, HTML, CSS,
Javascript,…
Hỗ trợ đa nền tảng: Windows, Linux hoặc Mac OS (Macintosh Operating
System)
Màn hình đa nhiệm: người dùng Visual Studio Code có thể mở cùng lúc nhiều
tệp tin và thư mục mặc dù chúng không hề liên quan với nhau
Intellisense: nó có thể phát hiện nếu bất kỳ đoạn mã nào không đầy đủ Thậm
chí, khi lập trình viên quên không khai báo biến, Intellisense sẽ tự động giúp họ
bổ sung các cú pháp còn thiếu
Hỗ trợ Git: Visual Studio Code hỗ trợ kéo hoặc sao chép mã trực tiếp từ
GitHub Mã này sau đó có thể được thay đổi và lưu lại trên phần mềm
Trang 122.1.2 Giới thiệu về phpMyAdmin
phpMyAdmin là một ứng dụng Web miễn phí cung cấp GUI sử dụng kết hợpvới hệ thống quản lý cơ sở dữ liệu MySQL Nó có thể thực hiện nhiều tác vụ như tạo,sửa đổi hoặc xóa bỏ cơ sở dữ liệu, bảng, các trường hoặc bản ghi; thực hiện báocáo SQL; hoặc quản lý người dùng và cấp phép
Hình 2 Giao diện phpMyAdmin.
Những tính năng của phpMyAdmin:
Tạo và xóa người dùng, quản lý quyền người dùng
Tạo, thay đổi và xóa cơ sở dữ liệu, bảng, trường và hàng
Tìm kiếm đối tượng trong toàn bộ cơ sở dữ liệu hoặc trong bảng
Nhập và xuất dữ liệu theo các định dạng khác nhau bao gồm: SQL, XML và CSV
Giám sát quá trình và theo dõi hiệu suất của các truy vấn khác nhau
Thực hiện các truy vấn SQL tùy chỉnh
Sao lưu cơ sở dữ liệu MySQL của bạn ở chế độ thủ công
2.1.3 Giới thiệu về XAMPP
XAMPP là một loại ứng dụng phần mềm khá phổ biến và thường hay được cáclập trình viên sử dụng để xây dựng, phát triển các dựa án website theo ngôn ngữ PHP.XAMPP thường được dùng để tạo máy chủ Web (Web Server) được tích hợp sẵnApache, PHP, MySQL, FTP Server, Mail Server và các công cụ như phpMyAdmin
Trang 13Hình 3 Giao diện XAMPP.
Những tính năng của XAMPP:
Có thể chạy được trên tất cả các hệ điều hành
Cấu hình đơn giản cũng như nhiều chức năng hữu ích cho người dùng như: giảlập Server, giả lập Mail Server, hỗ trợ SSL trên Localhost
Tích hợp nhiều thành phần với các tính năng:
+ Apache + PHP (tạo môi trường chạy các tập tin script *.php).
+ MySQL (hệ quản trị dữ liệu MySQL).
2.2 Giới thiệu về ngôn ngữ lập trình PHP và các công nghệ sử dụng
2.2.1 Giới thiệu về PHP
Khái niệm:
PHP (Hypertext Preprocessor): là một ngôn ngữ lập trình kịch bản hay một loại
mã lệnh chủ yếu được dùng để phát triển các ứng dụng viết cho máy chủ, mã nguồn
mở, dùng cho mục đích tổng quát Nó rất thích hợp với Web và có thể dễ dàng nhúng
vào trong trang HTML nhờ sử dụng cặp thẻ PHP <?php ?>
Trang 14Hình 4 Cú pháp PHP.
PHP là một ngôn ngữ lập trình được kết nối chặt chẽ với máy chủ, là một côngnghệ phía máy chủ (Server-Side) và không phụ thuộc vào môi trường (cross-platform).Đây là hai yếu tố rất quan trọng, thứ nhất khi nói công nghệ phía máy chủ tức là nóiđến mọi thứ trong PHP đều xảy ra trên máy chủ, thứ hai, chính vì tính chất không phụthuộc môi trường cho phép PHP chạy trên hầu hết trên các hệ điều hành như Windows,Unix và nhiều biến thể của nó Đặc biệt các mã kịch bản PHP viết trên máy chủ này
sẽ làm việc bình thường trên máy chủ khác mà không cần phải chỉnh sửa hoặc chỉnhsửa rất ít
Khi một trang Web muốn được dùng ngôn ngữ PHP thì phải đáp ứng được tất
cả các quá trình xử lý thông tin trong trang Web đó, sau đó đưa ra kết quả ngôn ngữHTML
Sơ đồ hoạt động:
Khi người dùng truy cập website viết bằng PHP, máy chủ đọc mã lệnh PHP và
xử lí chúng theo các hướng dẫn được mã hóa Mã lệnh PHP yêu cầu máy chủ gửi một
dữ liệu thích hợp (mã lệnh HTML) đến trình duyệt Web Trình duyệt xem nó như làmột trang HTML tiêu chuẩn Như ta đã nói, PHP cũng chính là một trang HTMLnhưng có nhúng mã PHP và có phần mở rộng là HTML Phần mở của PHP được đặt
trong thẻ mở <?php và thẻ đóng ?> Khi trình duyệt truy cập vào một trang PHP,
Server sẽ đọc nội dung file PHP lên và lọc ra các đoạn mã PHP và thực thi các đoạn
Hình 5 Sơ đồ hoạt động của PHP.
Trang 15mã đó, lấy kết quả nhận được của đoạn mã PHP thay thế vào chỗ ban đầu của chúngtrong file PHP, cuối cùng Server trả về kết quả cuối cùng là một trang nội dung HTML
về cho trình duyệt
Các loại thẻ PHP
Có 4 loại thẻ khác nhau mà người lập trình có thể sử dụng khi thiết kế một trangPHP:
Kiểu Short:Thẻ mặc định mà các nhà lập trình PHP thường sử dụng
Ví dụ: <? Echo “Well come to PHP ” ;?>
Kiều đinh dạng XML: Thẻ này có thể sử dụng với văn bản định dạng XML.
Ví dụ: <? Php echo “Well come to PHP with XML”;?>
Kiểu Script: Trong trường hợp bạn sử dụng PHP như một script tương tự
khai báo JavaScipt hay VBScript
PHP vừa dễ với người mới sử dụng vừa có thể đáp ứng mọi yêu cầu của các lậptrình viên chuyên nghiệp, mọi ý tuởng của các bạn PHP có thể đáp ứng mộtcách xuất sắc
2.2.2 Giới thiệu về HTML
HTML (HyperText Markup Language): Ngôn ngữ đánh dấu siêu văn bảnđược sử dụng để tạo các tài liệu có thể truy cập trên mạng Tài liệu HTML được tạonhờ dùng các thẻ và các phần tử của HTML File được lưu trên máy chủ dịch vụ Webvới phần mở rộng “.htm” hoặc “.html” Các trình duyệt sẽ đọc tập tin HTML và hiểnthị chúng dưới dạng trang Web Các thẻ HTML sẽ được ẩn đi, chỉ hiển thị nội dungvăn bản và các đối tượng khác: hình ảnh, media Với các trình duyệt khác nhau đềuhiển thị một tập HTML với một kết quả nhất định Các trang HTML được gửi đi quamạng Internet theo giao thức HTTP
Trang 16Hình 6 Cú pháp HTML.
HTML không những cho phép nhúng thêm các đối tượng hình ảnh, âm thanh
mà còn cho phép nhúng các kịch bản vào trong đó như các ngôn ngữ kịch bản nhưJavascript để tạo hiệu ứng động cho trang Web
2.2.3 Giới thiệu về CSS
CSS (Cascading Style Sheets): là ngôn ngữ định kiểu theo tầng được dùng đểtạo bố cục, trang trí, thiết lập màu nền, màu chữ, kích thước cho trang Web CSS cócấu trúc đơn giản và sử dụng các từ tiếng anh để đặt tên cho các thuộc tính CSS khi sửdụng có thể viết trực tiếp xen lẫn vào mã HTML hoặc tham chiếu từ một file css riêng
biệt Hiện nay CSS thường được viết riêng thành một tập tin với mở rộng là “.css”.
Chính vì vậy mà các trang Web có sử dụng CSS thì mã HTML sẽ trở nên ngắn gọnhơn
Trang 172.2.4 Giới thiệu về Javascript
Javascript là một ngôn ngữ dạng script thường được sử dụng cho việc lập trìnhWeb ở phía client, nó tuân theo chuẩn ECMAScript Là một ngôn ngữ linh động, cúpháp dễ sử dụng như các ngôn ngữ khác và dễ dàng lập trình Javascript không hề liênquan tới ngôn ngữ lập trình Java, nó được hầu hết các trình duyệt ngày nay hỗ trợ VớiJavascript, ứng dụng Web của bạn sẽ trở nên vô cùng sinh động, mang tính trực quan
và tương tác cao Javascript theo phiên bản hiện hành là một ngôn ngữ lập trình kịchbản dựa trên đối tượng được phát triển từ các ý niệm nguyên mẫu Tất cả những đoạn
mã Javascript đều phải đặt trong cặp thẻ mở <script> và thẻ đóng </script>.
Hình 8 Cú pháp Javascript.
Ngôn ngữ này được dùng rộng rãi cho các trang Web, nhưng cũng được dùng
để tạo khả năng viết script sử dụng các đối tượng nằm sẵn trong các ứng dụng Giống
Java, Javascript có cú pháp tương tự ngôn ngữ lập trình C “.js” là phần mở rộng
thường được dùng cho tập tin mã nguồn Javascript
2.2.5 Giới thiệu về jQuery
jQuery là một thư viện được xây dựng từ Javascript nhằm giúp lập trình viênxây dựng những chức năng có sử dụng Javascript trở nên dễ dàng hơn jQuery đượctích hợp nhiều module khác nhau từ module hiệu ứng cho đến module truy vấnselector jQuery là một bộ công cụ tiện ích Javascript làm đơn giản hóa các tác vụ đa
dạng với việc viết ít code hơn jQuery luôn bắt đầu bằng ký tự đô la $ hoặc dòng chữ jQuery.
Trang 18Hình 9 Cú pháp jQuery.
jQuery được sử dụng đến 99% trên tổng số website trên thế giới (trừ những
website sử dụng JS Framework).
2.2.6 Giới thiệu về Bootstrap
Bootstrap là một bộ sưu tập miễn phí của các mã nguồn mở có chứa HTML, CSS, Javascript, Framework và công cụ dùng để tạo ra một mẫu webiste hoàn chỉnh Với các thuộc tính về giao diện được quy định sẵn như kích thước, màu sắc, độ cao, độrộng…, các designer có thể sáng tạo nhiều sản phẩm mới nhưng vẫn tiết kiệm thời gian khi làm việc với Framework này trong quá trình thiết kế giao diện website
Trang 19Hình 10 Cú pháp Bootstrap.
Ưu điểm của Bootstrap:
các thiết bị khác nhau, vì vậy bạn chỉ cần học cách sử dụng chúng Tính năngnày giúp tiết kiệm rất nhiều thời gian cho các người dùng khi tạo racác website thân thiện
Opera Tuy nhiên, với IE, Bootstrap 4 chỉ hỗ trợ từ IE10 trở lên
Trang 20CHƯƠNG 3: KHẢO SÁT HỆ THỐNG
3.1 Khảo sát hệ thống website bán mũ bảo hiểm online
Một cửa hàng bán mũ bảo hiểm được tổ chức như sau:
- Cửa hàng bán nhiều loại sản phẩm (Categories), thông tin về loại sản phẩm bao
gồm mã loại sản phẩm, tên loại sản phẩm
- Mỗi loại sản phẩm có nhiều sản phẩm, mỗi sản phẩm (Products) bao gồm các
thông tin: mã sản phẩm, tên sản phẩm, mô tả, hình ảnh, giá, số lượng tồn kho
- Nhà cung cấp cung cấp nhiều sản phẩm, mỗi nhà cung cấp (Suppliers) có các
thuộc tính: mã nhà cung cấp, tên nhà cung cấp, địa chỉ, email, số điện thoại
- Chương trình khuyến mãi có các thông tin: mã khuyến mãi, ngày bắt đầu, ngày
kết thúc, mô tả Mỗi chương trình khuyến mãi sẽ có nhiều sản phẩm được giảm giá
- Cửa hàng có nhiều nhân viên, mỗi nhân viên (Employee) có một tài khoản đăng
nhập vào hệ thống quản lý bằng username và password hoặc email và
password Nhân viên có các thông tin: tên nhân viên, giới tính, địa chỉ, số điện thoại
- Nhân viên được phân quyền, quyền này do Admin tạo ra và phân chức năng cho
quyền đó; một quyền có nhiều chức năng; một chức năng thuộc nhiều quyền Mỗi nhân viên có một quyền và một quyền có thể có nhiều nhân viên, mỗi nhânviên có quyền thực hiện nhiều chức năng Theo khảo sát thực tế, hiện tại nhân viên được phân thành 4 loại quyền như sau:
1 - Admin: toàn quyền
2 - Manager: gồm các quyền của Approver, quyền xem các thống kê, quản lýchương trình khuyến mãi, quản lý phân công
3 - Approver: Quản lý duyệt đơn hàng, quản lý sản phẩm, quản lý loại sản phẩm, quản lý đặt hàng, quản lý nhập hàng, quản lý nhà cung cấp
4 - Shipper: Quản lý đơn hàng được phân công và giao hàng
- Nhân viên có quyền Manager có thể tạo nhiều chương trình khuyến mãi, mỗi
chương trình khuyến mãi chỉ thuộc một nhân viên tạo
- Nhân viên có quyền Approver có thể duyệt nhiều đơn hàng, một đơn hàng chỉ
được duyệt từ một nhân viên
- Nhân viên có quyền Shipper có thể giao nhiều đơn hàng, một đơn hàng chỉ
được một nhân viên Shipper giao
- Phiếu đặt hàng tới nhà cung cấp (Place_order) có các thuộc tính: mã phiếu đặt,
ngày tạo Một phiếu đặt hàng có nhiều sản phẩm, một sản phẩm có thể thuộc nhiều phiếu đặt hàng
Trang 21- Phiếu nhập hàng (Import_order) có các thuộc tính: mã phiếu nhập, ngày tạo,
tổng tiền Một phiếu nhập hàng có nhiều sản phẩm, một sản phẩm có thể thuộc nhiều phiếu nhập hàng Một phiếu nhập hàng chỉ thuộc một phiếu đặt hàng và một phiếu đặt hàng chỉ thuộc một phiếu nhập hàng
- Khách hàng có thể tạo nhiều đơn hàng, mỗi đơn hàng có thể có nhiều sản phẩm,
đơn hàng có các thuộc tính: mã đơn hàng, trạng thái, ngày tạo, ngày nhận, tổng tiền, các thông tin người nhận hàng
- Hóa đơn (Bills) gồm các thuộc tính: mã hóa đơn, ngày tạo, mã số thuế Một đơn
hàng chỉ có một hóa đơn và một hóa đơn chỉ thuộc một đơn hàng
- Khách hàng (Customers) đăng ký tài khoản sau đó đăng nhập bằng username và
password hoặc email và password để mua mũ bảo hiểm Mỗi khách hàng có cácthông tin: tên khách hàng, giới tính, địa chỉ, số điện thoại
3.2 Các chức năng của hệ thống
3.2.1 Yêu cầu chức năng của hệ thống:
Công việc của Employee (nhân viên của công ty):
- Admin, Manager, Approver
Xử lý đơn hàng, tiếp nhận và xử lý các phiếu nhập hàng
Đăng ký tài khoản/Đăng nhập
Xem thông tin hàng
Đặt hàng và thanh toán
Đối tượng tham gia hệ thống:
User: người mua hàng
Employee: nhân viên của công ty
3.1.1 Yêu cầu phi chức năng:
Hệ thống đáng tin cậy, chính xác, giao diện thân thiện, dễ sử dụng, truy cập
dữ liệu nhanh chóng
Đảm bảo tính bảo mật cho người điều hành hệ thống
Phải có tính linh hoạt cao
Trang 22CHƯƠNG 4: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
4.1 Mô hình chức năng nghiệp vụ (BFD – Business Function Diagram)
Chức năng là công việc mà tổ chức cần làm và được phân theo nhiều mức từ tổng hợp đến chi tiết
Mỗi chức năng có một tên duy nhất, các chức năng khác nhau phải có tên khác nhau Để xác định tên cho các chức năng, có thể bàn luận và nhất trí với người sử dụng
Hình thức biểu diễn: Hình chữ nhật:
Mỗi chức năng được phân rã thành các chức năng con Các chức năng con có quan
hệ phân cấp với chức năng cha.
Biểu diễn mối quan hệ phân cấp chức năng như sau:
Hình 11 Mô hình phân rã chức năng được biểu diễn thành hình cây phân cấp.
Trang 234.2 Mô hình luồng dữ liệu (DFD – Data Flow Diagram)
Mô hình luồng dữ liệu là một công cụ mô tả quan hệ thông tin giữa các công việc
Biểu đồ luồng dữ liệu gồm có 5 yếu tố chính:
Hình 12 Các đối tượng cơ bản để thiết kế biểu đồ luồng dữ liệu.
Hình 13 Biểu đồ luồng dữ liệu mức khung cảnh.
Trang 24Hình 14 Biểu đồ luồng dữ liệu mức đỉnh.
4.3 Thiết lập mô hình thực thể ERD (ERD – Entity Relationship Diagram)
4.3.1 Xác định các thực thể
1 Bills(bill_code, created_at, fax)
2 Categories(cate_code, name, status)
3 Comment(cmt_code, contents)
4 Customers(id, username, email, password, name, gender, address, phone,
status)
5 Distris(district_code, name)
6 Employee(id, username, email, password, name, gender, address, phone, status)
7 Function(id_function, url, title, display_on_homepage)
8 Function_categories(id_category, cate_name, ordering)
9 Import(import_code, created_at, total)
10 Orders(id, created_at, name, address, phone, date_receive, status, total)
11 Place_order(place_order_code, created_at, status)
12 Products(product_code, name, description, price, image, quantity_exist, new,
status)
Trang 2513 Promotion(promotion_code, date_start, date_end, description)
14 Returns_product(return_code, create_at, quantity_return)
15 Role(id_role, name, description)
16 Suppliers(supp_code, name, address, email, phone, status)
4.3.2 Xác định mối quan hệ giữa các thực thể
- Giữa 2 thực thể Categories và Products có quan hệ với nhau theo quan hệ 1-nhiều.Một loại sản phẩm có thể có nhiều sản phẩm, một sản phẩm chỉ thuộc một loại sảnphẩm
- Giữa 2 thực thể Suppliers và Products có quan hệ với nhau theo quan hệ 1-nhiều.Một nhà cung cấp có thể cung cấp nhiều sản phẩm, một sản phẩm chỉ thuộc mộtnhà cung cấp
- Giữa 2 thực thể Suppliers và Place_order có quan hệ với nhau theo quan hệ nhiều Một nhà cung cấp có thể có nhiều đơn đặt hàng và một đơn đặt hàng chỉthuộc một nhà cung cấp
1 Giữa 2 thực thể Promotion và Products có quan hệ với nhau theo quan hệ nhiều1 nhiều Một sản phẩm có thể có nhiều đợt giảm giá và một đợt giảm giá có thể cónhiều sản phẩm được giảm giá
nhiều Giữa 2 thực thể Orders và Products có quan hệ với nhau theo quan hệ nhiềunhiều nhiều.Một sản phẩm có thể thuộc nhiều đơn hàng và một đơn hàng có thể có nhiều sảnphẩm
- Giữa 2 thực thể Products và Comment có quan hệ với nhau theo quan hệ 1-nhiều.Một sản phẩm có thể có nhiều bình luận và một bình luận chỉ thuộc một sản phẩm
- Giữa 2 thực thể Products và Place_order có quan hệ với nhau theo quan hệ nhiều Một sản phẩm có thể thuộc nhiều đơn đặt hàng và một đơn đặt hàng có thể
nhiều-có nhiều sản phẩm
- Giữa 2 thực thể Products và Import có quan hệ với nhau theo quan hệ nhiều-nhiều.Một sản phẩm có thể thuộc nhiều đơn nhập hàng và một đơn nhập hàng có thể cónhiều sản phẩm
- Giữa 2 thực thể Import và Place_order có quan hệ với nhau theo quan hệ 1-1 Mộtđơn nhập hàng chỉ được lập cho một đơn đặt hàng và một đơn đặt hàng chỉ thuộcmột đơn đặt hàng
- Giữa 2 thực thể Customers và Orders có quan hệ với nhau theo quan hệ 1-nhiều.Một khách hàng có thể có nhiều đơn hàng và một đơn hàng chỉ thuộc một kháchhàng
- Giữa 2 thực thể Orders và Bills có quan hệ với nhau theo quan hệ 1-1 Một đơnhàng chỉ có một hóa đơn và một hóa đơn chỉ thuộc một đơn hàng
- Giữa 2 thực thể Bills và Returns_product có quan hệ với nhau theo quan hệ nhiều Một hóa đơn có thể có nhiều đơn trả hàng và một đơn trả hàng chỉ thuộc mộthóa đơn
1 Giữa 2 thực thể Employee và Orders có quan hệ với nhau theo quan hệ 11 nhiều.Một nhân viên có thể duyệt nhiều đơn hàng và một đơn hàng chỉ do một nhân viênduyệt
Trang 26- Giữa 2 thực thể Employee và Returns_product có quan hệ với nhau theo quan hệ nhiều Một nhân viên có thể tạo nhiều đơn trả hàng và một đơn trả hàng chỉ thuộcmột nhân viên.
1 Giữa 2 thực thể Employee và Promotion có quan hệ với nhau theo quan hệ 11 nhiều.Một nhân viên có thể tạo nhiều chương trình khuyến mãi và một chương trìnhkhuyến mãi chỉ được một nhân viên tạo
- Giữa 2 thực thể Employee và Place_order có quan hệ với nhau theo quan hệ nhiều Một nhân viên có thể lập nhiều đơn đặt hàng và một đơn đặt hàng chỉ thuộcmột nhân viên lập
1 Giữa 2 thực thể Employee và Import có quan hệ với nhau theo quan hệ 11 nhiều.Một nhân viên có thể lập nhiều đơn nhập hàng và một đơn nhập hàng chỉ thuộcmột nhân viên lập
- Giữa 2 thực thể Employee và Orders có quan hệ với nhau theo quan hệ 1-nhiều.Một nhân viên shipper có thể giao nhiều đơn hàng và một đơn hàng chỉ do mộtnhân viên shipper giao
- Giữa 2 thực thể Employee và District có quan hệ với nhau theo quan hệ nhiều Một nhân viên shipper có thể giao hàng ở nhiều khu vực và một khu vực cóthể có nhiều nhân viên shipper giao
nhiều Giữa 2 thực thể Role và Function có quan hệ với nhau theo quan hệ nhiềunhiều nhiều.Một quyền có thể truy cập nhiều chức năng.và một chức năng có thể được nhiềuquyền truy cập
- Giữa 2 thực thể Function_categories và Function có quan hệ với nhau theo quan hệ1-nhiều Một nhóm chức năng có thể có nhiều chức năng và một chức năng chỉthuộc một nhóm chức năng
- Giữa 2 thực thể Role và Employee có quan hệ với nhau theo quan hệ 1-nhiều Mộtquyền có thể có nhiều nhân viên và một nhân viên chỉ thuộc một quyền
Trang 274.3.3 Sơ đồ ERD
Hình 15 Sơ đồ ERD.
4.3.4 Mô Hình Dữ Liệu Quan Hệ
2 Categories(cate_code, name, status)
3 Comment(cmt_code, contents, product_code)
6 Customers(id, username, email, password, name, gender, address,
district_code, phone, status, id_role)
7 District(district_code, name)
9 Employee(id, username, email, password, name, gender, address, phone,
status, id_role)
10 Function(id_function, id_category, url, title, display_on_homepage)
11 Function_categories(id_category, cate_name, ordering)
13 Import(import_code, created_at, id_employee, total, place_order_code)
Trang 2815 Orders(id, id_customer, id_employee, id_shipper, created_at, name, address,
district_code, phone, date_receive, status, total)
17 Place_order(place_order_code, created_at, id_employee, supp_code,
import_code, status)
price_ord)
19 Products(product_code, name, description, price, image, quantily_exist, new,
status, cate_code, supp_code)
20 Promotion(promotion_code, date_start, date_end, description, id_employee)
22 Returns_product(return_code, create_at, id_ employee, bill_code)
23 Returns_product_detail(return_code, product_code, quantity_return)
24 Role(id_role, name, description)
25 Suppliers(supp_code, name, address, email, phone, status)
NotNull
đơn
X
NotNull
NotNull
Trang 292 contents VARCHAR 500 Nội dung X
NotNull
hàng
NotNull
NotNull
hàng
X
Trang 30NotNull
NotNull
NotNull
năng
X
Trang 31page giao diện
NotNull
NotNull
NotNull
NotNull
Bảng Orders
Trang 32dài chính ngoại Null
huyện
NotNull
NotNull
NotNull
Trang 332 product_code VARCHAR 20 Mã sản phẩm X X X
NotNull
NotNull
NotNull
Trang 34STT Tên trường Kiểu dữ liệu Độ
dài
Diễn giải Khóa
chính
Khóangoại
NotNull
NotNull
NotNull
NotNull
4.4.2 Mô hình Diagram
Trang 35Hình 16 Mối quan hệ giữa khách hàng với bình luận, đơn hàng, trả hàng, sản
phẩm, khuyến mãi.
Hình 17 Mối quan hệ giữa nhân viên với đơn hàng, phân công giao hàng, phân
quyền.
Trang 36Hình 18 Mối quan hệ giữa nhân viên với đặt hàng tới nhà cung cấp, nhập hàng.
4.5 Ràng buộc toàn vẹn và tầm ảnh hưởng
4.5.1 Ràng buộc toàn vẹn liên bộ
Ràng buộc 1:
- Bối cảnh: IMPORT
- Mô tả: IMPORT_CODE phải là duy nhất
- Nội dung: import1, import2 IMPORT import1 import2
import1.IMPORT_CODE import2 IMPORT_CODE
- Mô tả: IMPORT_CODE, PRODUCT_CODE phải là duy nhất
- Nội dung: imd1, imd2 IMPORT_ DETAIL, imd1 imd2
import1.(IMPORT_CODE, PRODUCT_CODE) import2.( IMPORT_CODE, PRODUCT_CODE)
- Tầm ảnh hưởng:
+(PRODUCT_CODE)
Trang 374.5.2 Ràng buộc toàn vẹn tham chiếu
Ràng buộc 3:
- Bối cảnh: IMPORT, IMPORT_DETAIL
- Mô tả: Một IMPORT_DETAIL chỉ thuộc một IMPORT
- Nội dung: imd IMPORT_ DETAIL, i IMPORT /
- Mô tả: Số lượng nhập phải lớn hơn 0
- Nội dung: imd IMPORT_DETAIL i QUANTITY_IN > 0
- Mô tả: Ngày nhận hàng phải sau ngày đặt hàng
- Nội dung: o ORDERS, o.CREATED_AT < o.DATE_RECEIVE
- Mô tả: Ngày bắt đầu khuyến mãi phải nhỏ hơn hoặc bằng ngày cuối khuyến mãi
- Nội dung: promotion PROMOTION, promotion.DATE_START <=
Trang 384.5.5 Ràng buộc toàn vẹn liên thuộc tính – liên quan hệ
Ràng buộc 7:
- Bối cảnh: IMPORT, PLACE_ORDER
- Mô tả: Ngày tạo phiếu nhập phải cùng hoặc sau ngày lập đơn đặt hàng đến nhà cung cấp
- Nội dung: i IMPORT, p PLACE_ORDER,
Trang 39CHƯƠNG 5: DEMO CHƯƠNG TRÌNH
5.1 Các chức năng của hệ thống.
- Chức năng:
Đăng ký, đăng nhập, quản lý tài khoản riêng
Xem thông tin, tìm kiếm sản phẩm, mua và thanh toán, theo dõi đơn hàng
Thêm/xóa/sửa các danh mục cho nhân viên
Tạo tài khoản, phân quyền cho nhân viên
Duyệt đơn hàng và phân công nhân viên giao hàng
Import phiếu nhập hàng, export phiếu đặt hàng đến nhà cung cấp
- Báo cáo:
Báo cáo lợi nhuận
Báo cáo tồn kho
Báo cáo doanh thu trong một khoảng thời gian
Báo cáo sản phẩm bán ra trong một khoảng thời gian
5.2 Thiết kế giao diện
5.2.1 Trang người dùng
- Trang đăng nhập, đăng ký cho khách hàng
Người dùng vẫn có thể xem, thêm sản phẩm vào giỏ hàng nếu chưa đăng nhập Khiđặt hàng thì người dùng cần phải login qua trang login của website
Hình 19 Màn hình login cho User.
Trang 40Hình 20 Màn hình đăng ký cho khách hàng.
Nếu khách hàng chưa có tài khoản có thể đăng ký tài khoản tại trang Đăng ký cho khách hàng Khi đăng ký tài khoản, hệ thống sẽ kiểm tra các thông tin có hợp không, email nếu không tồn tại thì không đăng ký được Sau khi đăng ký thành công sẽ gửi mail về cho khách hàng để xác nhận tài khoản