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 chun 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.
A Ensuretextremainsvisiblecluringwebfontload V
A Doesnotusepassivelistenerstoimprovescrollingperformance V
A Serve static assets with an efficient cache policy - 27 resources found V
• Avoid chaining critical requests - 18 chains found V
• Keep request counts low and transfer sizes small - 76 requests ∙ 1,901 KB V
• Largest Contentful Paint element - 1 element found V
• Avoid large layout shifts - 5 elements found V
Hình 68. Điểm yếu của website
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
RECOMMENDATION
τ Leverage browser caching
v Defer parsing of Java Script
v MinifyJavaScript
v Avoid bad requests
v Optimize images
v Specify image dimensions
v MinifyCSS
v Specify a character set early
v Avoid landing page redirects
v Enable compression
v Enable Keep-Alive
▼ Inline small CSS
v Inline small JavaScript
τ Minimize redirects
▼ Minimize request size
τ PutCSSinthedocumenthead
v Serve resources from a consistent URL
v Serve scaled images
v Specify a cache validator
v Combine images using CSS sprites
v Avoid CSS ©import
v Prefer asynchronous resources
v Avoid a character set in the meta tag
GRADE TVPE SERVER JS JS CONTENT IMAGES IMAGES CSS CONTENT SERVER SERVER SERVER CSS JS CONTENT CONTENT CSS CONTENT IMAGES SERVER IMAGES CSS JS CONTENT PRIORITY HIGH HIGH HIGH HIGH HIGH MEDIUM HIGH MEDIUM HIGH HIGH HIGH HIGH HIGH HIGH HIGH HIGH HIGH HIGH HIGH HIGH MEDIUM MEDIUM LOW
Hình 69. Chấm điểm và khuyến nghị cho website
Từ những điêm mạnh và điêm yếu, em có thê xác định được những điêm mà website nên cần cải thiện
- Giảm thiêu các file JS và CSS không sử dụng.
- Sử dụng các đuôi ảnh như JPEG 2000 hay WebP thay thế cho PNG và JPG, giúp cải thiện tốc độ tải trang cũng như tải ảnh
- Tối ưu hóa hình ảnh cải thiện thời gian tải trang và giảm lượng dữ liệu cần sử dụng
- Cải thiện host
1.5. Đánh giá hệ thố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
- Trang quản trị đáp ứng được phân quyền chức năng, người dùng chỉ có thể sử dụng được cơng việc của mình, tránh tình trạng chồng chéo cơng việc cũng như
sai sót
trong xử lý.
- Các chức năng bán hàng, thanh toán, và quản lý hàng đều hoạt động tốt, đã xử lý
được các lỗi trong quá trình vận hành, cải thiện được tốc độ làm việc, và thông
báo được
lỗi đến người dùng khi xảy ra vấn đề.
- Giao diện dễ sử dụng, giúp khách hàng cũng như người quản trị có thể dễ dàng thao tác trên website.
Bên cạnh các ưu điểm, hệ thống vẫn còn tồn tại một số nhược điểm còn tồn tại: - Giao diện còn chưa gây được cuốn hút với người dùng.
- Hệ thống được build từ các host và domain miễn phí, do đó băng thơng cũng 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