Khóa luận tốt nghiệp Xây dựng và phát triển website thương mại điện tử tại cửa hàng thời trang Bích Lụa
TẤT CẢ CHỜ XÁC NHẬN ĐANG GIAO ĐÃ GIAO
Mã đơn hàng SỐ điện thoại Địa chi Ngày đặt
HDBI75932200603 123412341234 Thường Tín 2020-06- 0317:59:32 HDB184257200526 012412341234 Hưng Yên 2020-05- 2618:42:57 HDB183642200526 1234124 HaTTnh 2020-05- 2618:36:42
Khóa luận tốt nghiệp Xây dựng và phát triên website thương mại điện tử tại cửa hàng thời trang Bích Lụa
-Trang danh mục sản phâm: các tính năng ở trang danh mục sản phâm tương tự
với trang quản lý sản phâm, ngoại trừ việc bỏ xem thông tin chi tiết
Hình 45. Trang danh mục sản phẩm
- Trang quản lý bán hàng
Trang quản lý bán hàng giúp xác định các hóa đơn đã, đang, hoặc sẽ xử lý. Người quản trị có thê xem các thơng tin chi tiết thơng qua button ở cuối mỗi dịng. Tuy nhiên người dùng chỉ có thê xem chứ khơng được sửa hoặc xóa. Đê thuận tiện theo dõi người dùng có thê chọn các nút tùy chỉnh đê xem danh sách đơn đã giao hoặc chưa giao,...
TẤT CẢ ĐƠN HÀNG
HDB183615200526 1234124 BaDinh 2020-05-2618:36:15
Ma đơn hàng Sô' điện thoạỉ Địa chỉ Ngày đặt HDBI34854190613 5656564 Ha Noi 2019-06-1313:48:54 D HDB143235190613 5656564 Ha Noi 2019-06-1314:32:35 DD HDB191523190630 0342056699 Thường Tín, Hà Nội 2019-06-30 19:15:23 D D HDB210149200512 0342056699 24234 2020-05-12 21:01:49 D
Khóa luận tốt nghiệp Xây dựng và phát triên website thương mại điện tử tại cửa hàng thời trang Bích Lụa
Hình 47. Thông tin đơn hàng
- Trang quản lý giao hàng
Trang quản lý giao hàng giúp xác định được các đơn hàng cần được xác nhận, đang
giao hoặc đã giao. Cứ mỗi khi đơn hàng được xác nhận sẽ tự động chuyên sang mục đang giao, và tương tự khi đã được xác nhận ở mục đang giao thì đơn hàng sẽ xuất hiện ở mục đã giao. Ở trang này, khi đã thực hiện xong thao tác xác nhận hàng, người dùng có thê tự động in ra danh sách mua hàng của khách hàng
Quản lý giao hàng
HÀNG CẦN GIAO
ĐANG GlAO I ĐÃ GIAO
SIT Mã hãng Tẽn hàng Size sã IiTdng eɪa Thánh tiên
TỐNQ CỘNG O
- Trang quản lý tài khoản
Trang này chỉ có người dùng với role là admin mới có thể đăng nhập được. Người quản trị có thể tìm kiếm hoặc đặt lại mật khẩu cho người dùng.
Quản lý tài khoản
QUẢN LÝ TÀI KHOẢN Tìm kiếm theo mã nhân viên
Mã nhân viên Tên đăng nhập
1 admin I I
2 πv□1 P I
3 nv02 I I
Hình 48. Trang giao hàng
Khóa luận tốt nghiệp Xây dựng và phát triển website thương mại điện tử tại cửa hàng thời trang Bích Lụa
HĨA ĐƠN THANH TOAN ---------------ũOo-------
Ma d(∏ι: HDB210149200512 'Lên khii`h: idf
SflT Khich hàng: 0342056É99
Email khãch háng: Căửthart]iliiuji9l298@gmaiLcoBi EJia chí Khách hang: 24234
giám giã: 0%
Ngiy dự háng: 2020-05-12 21:01:49
HA Hội, NGÀY.. THÁNG .. NAM .... HÁ NÙI. NGÁY .. THÂN ũ _ NĂM
KHÁCH HẰNG NHÃN VILN
Khóa luận tốt nghiệp Xây dựng và phát triển website thương mại điện tử tại cửa hàng thời trang Bích Lụa
- Trang quản lý thơng tin nhân viên
Trang này cho phép cả nhân viên và admin đều có thể truy cập được. Người dùng có thể cập nhật thơng tin hoặc đổi lại mật khẩu của mình.
Hình 51. Trang quản trị thơng tin nhân viên
1.3.Xây dựng các tính năng quan trọng cho website 1.3.1. Tính năng lọc sản phẩm
Đây là tính năng xuất hiện trong các trang bán hàng dựa trên danh mục cụ thể. Tính năng này sử dụng AJAX để hiển thị dữ liệu lên trang web mà không cần tải lại trang.Trình duyệt sẽ tạo lệnh JavaScript để kích hoạt XMLHttpRequest, đồng thời tạo một yêu cầu HTTP để gửi lên server. Sau đó server sẽ tiếp nhận, truy xuất và gửi lại dữ liệu về cho trình duyệt. Cuối cùng trình duyệt nhận lại dữ liệu từ server và hiển thị lên trang. Khơng hề có bất cứ q trình tải lại trang, điều này giúp cho việc trải nghiệm web trở nên nhanh chóng, thuận tiện, tránh phải tải lại gây khó chịu và mất thời gian.
Khóa luận tốt nghiệp Xây dựng và phát triên website thương mại điện tử tại cửa hàng thời trang Bích Lụa
Hình 52.Lọc sản phẩm
Dưới đây là quy trình lọc chi tiết:
- Đầu vào: loại sản phẩm, size, màu và khoảng giá.
- Đầu ra: sản phẩm chứa size, màu và khoảng giá tương ứng Các bước thực hiện
- Bước 1: Lựa chọn size, màu hoặc khoảng giá trên giao diện.
- Bước 2: Trình duyệt tạo lệnh JavaScript đê kích hoạt XMLHttpRequest và gửi request lên server.
- Bước 2: Mở cơ sở dữ liệu
- Bước 3: Lấy danh mục trong phiên hiện tại
- Bước 4: Lựa chọn bảng tbl_danh_muc_sp đê tìm kiếm mã danh mục có tên danh mục giống với danh mục trong phiên hiện tại.
- Bước 5: Lựa chọn các thuộc tính của mặt hàng trong các bảng tbl_hang, tbl_size, tbl_size_sp và tbl_anh với điều kiện danh mục khớp với danh mục đã lấy ở bước
Khóa luận tốt nghiệp Xây dựng và phát triển website thương mại điện tử tại cửa hàng thời trang Bích Lụa
+ Nếu có chọn màu thì thêm điều kiện màu thuộc các màu đã chọn
+ Nếu có chọn khoảng giá thì thêm điều kiện giá phải nằm trong khoảng giá lớn nhất và nhỏ nhất
- Bước 7: Thực thi câu lệnh SQL dựa trên các biến và điều kiện đã chọn. - Bước 8: Kiểm tra số dòng của kết quả đạt được khi thực thi
- Bước 9: Server gửi lại dữ liệu cho trình duyệt
- Bước 10: Trình duyệt hiển thị dữ liệu từ respone của server.
+ Nếu số hàng ở bước 8 bằng 0: Hiển thị dịng chữ “Khơng có sản phẩm nào” + Nếu số hàng ở bước 8 lớn hơn 0: Hiển thị các mặt hàng theo điều kiện đã chọn
Khóa luận tốt nghiệp Xây dựng và phát triển website thương mại điện tử tại cửa hàng thời trang Bích Lụa
Khóa luận tốt nghiệp Xây dựng và phát triên website thương mại điện tử tại cửa hàng thời trang Bích Lụa
tương tự nhau, giúp người dùng dễ dàng tìm được sản phẩm ưa thích và cải thiện trải nghiệm người dùng.
Hình 54. Gợi ý sản phẩm
Hệ thống gợi ý sản phẩm bao gồm các thành phần sau: - Hệ thống gợi ý dựa trên màu sắc
- Hệ thống gợi ý dựa trên size
- Hệ thống gợi ý dựa trên khoảng giá
3.3.2.1. Hệ thống gợi ý dựa trên màu sắc
Quy trình chi tiết của hệ thống gợi ý màu sắc: - Đầu vào: Màu sắc
- Đầu ra: Các sản phẩm có màu tương tự Các bước thực hiện
- Bước 1: Mở CSDL
- Bước 2: Lấy dữ liệu ma_hang, ma_size, co_size và mau từ các bảng tbl_hang và tbl_size của sản phẩm đang xem.
- Bước 3: Thực hiện truy vấn SQL đê tìm các sản phẩm có màu giống với màu giống với sản phẩm đang xem.
- Bước 4: Kiêm tra số dòng của kết quả truy vấn - Bước 5: Server gửi lại dữ liệu cho trình duyệt
Khóa luận tốt nghiệp Xây dựng và phát triên website thương mại điện tử tại cửa hàng thời trang Bích Lụa
- Bước 6: Trình duyệt hiên thị sản phẩm theo danh sách truy xuất từ cơ sở dữ liệu
Hình 55. Hệ thống gợi ý dựa trên màu sắc
3.3.2.2. Hệ thống gợi ý dựa trên size
Khóa luận tốt nghiệp Xây dựng và phát triển website thương mại điện tử tại cửa hàng thời trang Bích Lụa
- Bước 2: Trình duyệt bật XMLHttpRequest và gửi request tới server - Bước 3: Lấy mã hàng của sản phẩm hiện tại
- Bước 4: Thực hiện câu lệnh SQL để lấy thông tin của các sản phẩm có mã hàng vừa lấy ở bước 3
- Bước 5: Thực hiện câu lệnh SQL kết hợp điều kiện giá trị 2 biến size và màu được lấy từ giao diện trình duyệt
- Bước 6: Kiểm tra số dịng của kết quả truy vấn - Bước 7: Server gửi lại kết quả cho trình duyệt
- Bước 8: Trình duyệt hiển thị kết quả từ phản hồi của server + Nếu số dịng bằng 0: Hiển thị “Khơng có sản phẩm phù hợp”
+ Nếu số dòng lớn hơn 0: Hiển thị danh sách gợi ý là các sản phẩm lấy được từ cơ
3.3.1. Chức năng hỗ trợ quyết định nhập hàng
Chức năng này sẽ hỗ trợ người dùng đưa ra quyết định sẽ nhập hàng nào về vào Khóa luận tốt nghiệp Xây dựng và phát triển website thương mại điện tử tại cửa
hàng thời trang Bích Lụa
Hình 56. Hệ thống gợi ý dựa trên size
Khóa luận tốt nghiệp Xây dựng và phát triên website thương mại điện tử tại cửa hàng thời trang Bích Lụa
hoặc khơng bán được đê đưa ra quyết định nên nhập hay không nhập loại hàng nào trong thời gian tới
Tên hàng
ÁO Sơ Ml CARO XANH ASM! 273
Danh mục Áo Giá 345000 SỐ lượng 4 Số lượt like 0
ÁO VEST MS 61M4371 Áo 780001 9 0 DB
QUẦN DÀI MS 22E1856 Quần 1250000 43 0
Áo sơ mi xanh Áo 200000 93 0 QQ
Q
Túi Xách Nâu TXl 25 TÚI XÁCH NÂU TXI25 Phụ kiện 594996 94 0 QQ
Q
Hình 57. Hệ hỗ trợ quyết định nhập hàng
Quy trình chi tiết quá trình đưa ra quyết định - Đầu vào: các thông số chi tiết của mặt hàng - Đầu ra: danh sách mặt hàng sắp hết hạn
Các bước thực hiện quá trình đưa ra quyết định: - Bước 1: Mở CSDL
- Bước 2: Lấy danh sách hàng từ bảng hảng
- Bước 3: Kiêm tra số lượng hàng, nếu dưới 10 thì đưa lên đầu - Bước 4: Dùng Jquery đê check elements
- Bước 5: Thay đổi màu sắc của các mặt hàng dưới 10 sản phẩm và hiên thị lên giao diện.
1.3.3. Xây dựng chức năng báo cáo và thống kê
- Chức năng báo cáo: Sử dụng Google Charts với các thông số được lấy ra từ cơ
- Bước 6: Khai báo biến dataLine và dataPie là dữ liệu của 2 bảng bằng cách sử
dụng hàm DataTable của Google Charts.
- Bước 6: Tạo điều kiện cho 2 biêu đồ như chiều dài, chiều rộng, tên biêu đồ
Khóa luận tốt nghiệp Xây dựng và phát triên website thương mại điện tử tại cửa hàng thời trang Bích Lụa
Hình 58. Biểu đồ biểu diễn số lượng hóa đơn và doanh thu theo thời gian
Hình 59. Biểu đồ thống kê số lượng bán theo sản phẩm
Quy trình chi tiết:
- Đầu vào: Dữ liệu từ cơ sở dữ liệu - Đầu ra: Các biêu đồ
Các bước thực hiện: - Bước 1: Mở CSDL
- Bước 2: Lấy dữ liệu ngày tháng, tổng số lượng, và tổng số hóa đơn từ các bảng đơn hàng và chi tiết đơn hàng
- Bước 2: Cho dữ liệu từ kết quả của câu lệnh thực thi vào trong mảng sau đó thực hiện gán kiêu dữ liệu cho các phần tử mảng
- Bước 3: Tạo hàng và cột cho biêu đồ nhờ dữ liệu trong mảng - Bước 4: Sử dụng json_encode đê chuyên dữ liệu sang dạng json
Khóa luận tốt nghiệp Xây dựng và phát triên website thương mại điện tử tại cửa hàng thời trang Bích Lụa
- Bước 7: Kết nối dữ liệu json với các div trên html - Bước 8: Sử dụng hàm draw đê vẽ biêu đồ.
- Chức năng thống kê:
THÕNG KÊ KINH DOANH
Tháng Tổng số hóa đơn Tổng SO lượng đã bán Tổng doanh thu
06-2020 7 7 2771000
05-2020 7 7 3160001
02-2020 1 1 300001
06-2019 2 3 2150000
Tổng 17 18 8381002
Hình 60. Biểu đồ thống kê doanh thu theo thời gian
Đầu vào: dữ liệu hóa đơn, số lượng, ngày tháng Đầu ra: Bảng doanh thu
Các bước thực hiện bao gồm
- Bước 1: Xây dựng bảng với các hàng là ngày/tháng/năm, tổng số hóa đơn, tổng số lượng, tổng doanh thu
- Bước 2: Mở CSDL
- Bước 3: Sử dụng câu lệnh đê lấy thời gian, đếm số hóa đơn, lấy tổng tích số lượng
và đơn giá đê thu được doanh thu.
- Bước 4: Thực thi lệnh mysqli_fetch_array() đê hiên thị từng dòng dữ liệu - Bước 6: Hiên thị bảng doanh thu lên trình duyệt
1.3.4. Một số chức năng khác
- Plugin bình luận Facebook: tính năng này sử dụng JavaScript SDK của
Facebook. Nó cho phép người dùng có thê bình luận, thích hoặc trả lời nội dung bình
Khóa luận tốt nghiệp Xây dựng và phát triên website thương mại điện tử tại cửa hàng thời trang Bích Lụa
Hình 61. Plugin bình luận Facebook
- Tự động xác nhận đơn hàng qua tin nhắn: Khi người bán xác nhận đơn hàng
đã được xác nhận, tin nhắn tự động sẽ được gửi về cho người mua thông qua API của bên thứ 3.
Hình 62. Tự động xác nhận đơn hàng qua tin nhắn
Khóa luận tốt nghiệp Xây dựng và phát triển website thương mại điện tử tại cửa hàng thời trang Bích Lụa
Hình 63. Tải lên nhiều ảnh đồng thời
- Messenger plugin cho website: Sử dụng Messenger plugin kết hợp cùng với JavaScript SDK của Facebook để triển khai Messenger trên trang web, giúp cho việc tương tác giữa người mua và người bán trở nên thuận tiện hơn. Công cụ này giúp giải quyết cơng việc một cách nhanh chóng nhất khi người dùng có nhu cầu đặt hàng hay có vấn đề cần khiếu nại, giải quyết thắc mắc.
First Contentful Paint S 0.6 Time to Interactive 2.5 S
■Speed Index 2.0 s
Total Blocking Time 50 ms
■Largest Contentful Painte 1.6
s ■ Cumulative Layout Shifte 0.191
- ■ r B ⅜ f ^
n J ɪ 1 ∙ - ∙ , ∙ ? 2 * Ĩ ∙ M j .1 V,
■Remove unused JavaScript -------------- 0.72 s v
■Serve images in next-gen formats — 0.48 s v
■Efficiently encode images — 0.28 s v
Khóa luận tốt nghiệp Xây dựng và phát triển website thương mại điện tử tại cửa hàng thời trang Bích Lụa
Hình 64. Messenger plugin cho website
1.4. Triển khai hệ thống
Sau khi cơ bản hồn thiện dự án trên local thì em tải website lên hosting để tiến hành thực nghiệm và sử dụng các trang đo hiệu năng để tính tốn hiệu năng của trang web
Khóa luận tốt nghiệp Xây dựng và phát triển website thương mại điện tử tại cửa hàng thời trang Bích Lụa
Lab Data
Opportunities - These suggestions can help your page load faster. They don't directly affect the
Performance score.
Performance Scores Page Details
PageSpeed Score YSIow Score Fully Loaded Time Total Page Size estsRequ
C(79%)∙ w(75%)φ 3.3s^ 1.83MB^ 7 4-
Hình 65. Hiệu năng của website theo Googple Pagespeed Insight
Latest Performance Report for: https∣√bichluastore.OOOwebhostapρ.com/
Report generated: Sunj Jun 7, 2020 10:11 PM -0700 dξ⅛ be usins a cdn
. I 3 . . , yg⅛∕ Whvshouki I use a CDN? ⅞
Test Server Region: H Vancouver, Canada
Using: Chrome (Desktop) 75.03770.100, PageSpeed 1.15-gt13,
+ Tốc độ load trang ban đầu cao.
+ Tối ưu hóa được CSS và JavaScript giúp trang web load nhanh hơn + Hạn chế được các hidden element, giảm thiểu thời gian tải trang. + Hạn chế chuyển hướng sang các trang khác.
+ Sử dụng video thay thế cho các file gif nặng, giúp tăng hiệu năng trang web và tiết kiệm được dữ liệu mạng.
+ Tránh kích thước của DOM quá lớn + Thời gian chạy JavaScript ngắn
+ Sử dụng các hỗ trợ của bên thứ 3 một cách hiệu quả, chỉ sử dụng khi trang đã được load đầy đủ.
Passed audits (17) ʌ
• Eliminate render-blocking resources — Potential savings of 100 ms V
• Properlysizeimages V
• Defer offscreen images V
Minify CSS - Potential savings of 6 KB V
Minify JavaScript - Potential savings of 47 KB V
Enabletextcompression V
Preconnect to required origins V
Avoid multiple page redirects V
Preload key requests V
Use video formats for animated content V
Avoids enormous network payloads — Total size was 1,901 KB V
Avoids an excessive DOM size — 277 elements V
User Timing marks and measures V
• JavaScript execution time — 0.5 S V
• Minimizes main-thread work — 1.5 S V
• Minimizethird-Partyusage -Third-PartycodebIockedthemainthreadforTOms V
Hình 66. Hiệu năng của website theo Gmetrix
Từ các thông số ở trên ta thấy được các điểm mạnh và điểm yếu của website khi Khóa luận tốt nghiệp Xây dựng và phát triển website thương mại điện tử tại cửa
hàng thời trang Bích Lụa
- Điêm yếu:
+ Tốc độ di chuyên giữa các trang chỉ ở mức trung bình + Có nhiều file CSS và JS dư thừa, khơng sử dụng
+ Có nhiều file có nội dung nặng gây ảnh hưởng tới tốc độ tải của trang.
+ Nhiều layout có kích thước q lớn do chưa tách ra làm các component nhỏ hơn làm tăng độ trễ của trang
+ Các file tĩnh chưa được lưu trữ hợp lý làm tăng cache của website
Diagnostics - More information about the performance of your application. These numbers don't directly
affect the Performance score.