7. Bố cục đề tài
2.3.2. Sơ đồ quan hệ các bảng dữ liệu
Hình 2.20. Sơ đồ quan hệ các bảng dữ liệu
Cơ sở dữ liệu cho website bán hàng của công ty Mai Trường Phúc sẽ được thiết kế thành 13 bảng dữ liệu, giữa những bảng dữ liệu có liên quan với nhau như bảng sản phẩm với bảng danh mục sản phẩm sẽ có những mối quan hệ để liên kết với nhau, tạo thuận lợi cho việc truy vấn, xử lý dữ liệu. Mỗi bảng sẽ có các thuộc tính khác nhau theo từng kiểu dữ liệu khác nhau, trong đó sẽ có một trường bắt buộc được chỉ định làm khóa chính, điều này để định danh mỗi một bản ghi trong bảng và cũng dùng để thiết lập mối quan hệ.
2.4. Tiểu kết
Trong chương 2, thông qua quá trình khảo sát hiện trạng tại công ty Mai Trường Phúc, với những thông tin thu thập được, tác giả khóa luận đã mô tả thực trạng của công ty về quy trình quản lý, hoạt động. Từ đó đánh giá đưa ra những ưu điểm và những mặt còn hạn chế còn tồn tại. Thông qua các đánh giá đó, dựa trên những thông tin có được về công ty, tiến hành phân tích hệ thống website, vẽ sơ đồ phân cấp các chức năng được sử dụng trong website, chỉ rõ những đối tượng sử dụng. Bên cạnh đó cũng mô tả các quy trình xử lý chức năng thông qua các
58 biểu đồ tương ứng.
Việc thiết kế dữ liệu cũng là một phần không thể thiếu, nó đóng vai trò rất quan trọng khi thiết kế hệ thống. Trong chương 2 đã cũng đã thiết kế và mô tả rõ các bảng dữ liệu thành phần được sử dụng, cùng với đó là sơ đồ mô tả mối quan hệ logic giữa cảng bảng đó.
Với những nội dung nêu trên, chương 2 sẽ là cơ sở và nền tảng vững chắc cho việc cài đặt, thử nghiệm hệ thống ở chương tiếp theo
59
CHƯƠNG 3: CÀI ĐẶT VÀ TRIỂN KHAI THỬ NGHIỆM WEBSITE 3.1. Cài đặt website
3.1.1. Môi trường cài đặt
Môi trường cài đặt sẽ sử dụng hệ quản trị cơ sở dữ liệu MySQL, ngôn ngữ lập trình web PHP phiên bản 7. Đối với PHP và MySQL đã được tích hợp trong công cụ tạo máy chủ ảo XAMPP, do đó chỉ cần cài XAMPP đã có đủ môi trường để thử nghiệm website. Quy trình cài công cụ XAMPP như sau:
Truy cập vào trang web “https://www.apachefriends.org/download.html” để tải công cụ XAMPP
Hình 3.1. Trang tải công cụ XAMPP
Tải xong, click đúp vào file exe để cài đặt. Tiếp theo, chúng ta thực hiện các bước như sau:
1. Click Next
2. Chọn những phần được cài tích hợp với XAMPP, click Next.
3. Chọn thư mục cài đặt XAMPP, ở phần trên có cảnh báo về sử dụng UAC, do đó ở bước này chúng ta sẽ chọn thư mục C:\xampp khác với C:\Program Files để tránh gây lỗi, sau đó click Next
60
5. Giới thiệu về Bitnami, nếu muốn xem giới thiệu, có thể tích vào ô Learn
more about Bitnami for XAMPP, ngược lại thì bỏ tích và nhấn Next
6. Click Next để bắt đầu cài đặt 7. Quá trình cài đặt đang diễn ra 8. Cài đặt thành công.
61
Hình 3.2. Các bước cài đặt XAMPP
Hình 3.3. Khởi động XAMPP
Giao diện XAMPP sau khi cài đặt xong, click vào Start ở Apache và MySQL để khởi động Webserver. Nếu Apache và MySQL chuyển sang màu xanh
62 có nghĩa là đã khởi động thành công localhost
Sau khi cài đặt công cụ XAMPP thành công sẽ tiến hành cài đặt Laravel Frame work. Quy trình cài đặt như sau:
Truy cập vào “https://getcomposer.org/download/” để tải xuống composer, đây là một trình quản lý gói cấp ứng dụng cho ngôn ngữ PHP, cung cấp định dạng chuẩn để quản lý các phụ thuộc của phần mềm PHP và các thư viện cần thiết.
Sau đó, bấm đúp vào file “Composer-Setup.exe” để tiến hành cài đặt. Các bước được tiến hành:
1. Tích chọn chế độ Developer, rồi bấm Next 2. Lựa chọn thư mục để cài đặt Composer
3. Chọn đường dẫn trò đến phiên bản PHP đã cài đặt trước đó được tích hợp trong công cụ XAMPP
4. Cài đặt Proxy
5. Xem lại các thông số trước khi cài đặt 6. Bảng thông tin hướng dẫn, bấm Next
63
Chờ cho chương trình cài đặt, sau đó bấm Finish để kết thúc cài đặt.
Hình 3.5. Cài đặt thành công composer
Sau khi cài đặt xong Composer, mở cửa sổ Command Prompt và thực hiện dòng lệnh “composer global require laravel/installer” để cài đặt Laravel. Tiếp theo, để tạo một dự án, thực hiện tiếp dòng lệnh “composer create-project --
prefer-dist laravel/laravel:^7.0 LVTN_ECOM”. Dưới đây là cấu trúc các thư
64
Hình 3.6. Cấu trúc Laravel
3.1.2. Đưa dữ liệu lên website
Việc đưa dữ liệu lên website là một phần quan trọng không thể thiếu trong quá trình thử nghiệm. Các bước để thực hiện như sau:
65
Bước 1: Thu thập nguồn dữ liệu thử nghiệm
Nguồn dữ liệu trong đề tài được tổng hợp, tham khảo từ dữ liệu của công ty Mai Trường Phúc bao gồm các thông tin về sản phẩm, nhãn hàng, tin tức, khuyến mại. Dữ liệu được tổng hợp sẽ chia thành các danh mục khác nhau
Bước 2: Kết nối cơ sở dữ liệu
Trước hết cần tạo cơ sở dữ liệu mới trong MySQL, sau đó tạo 13 bảng dữ liệu tương ứng với các bảng dữ liệu thiết kế trong chương 2. Để kết nối cơ sở dữ liệu trong Laravel, ta cần điều chỉnh thông số “DB_DATABASE” trên file “.env” tương ứng với tên cơ sở dữ liệu đã tạo trong MySQL. Nếu cần tài khoản để truy cập MySQL thì phải điều chỉnh “DB_USERNAME” và “DB_PASSWORD” tương ứng với tên tài khoản và mật khẩu để có thể kết nối tới cơ sở dữ liệu.
Hình 3.7. Kết nối cơ sở dữ liệu
Bước 3: Thêm dữ liệu vào website
Đưa dữ liệu vào website sẽ được tiến hành thông qua các trang quản trị web đã được lập trình các chức năng. Nếu muốn thêm mới các dữ liệu ở các phần khác nhau, người quản trị chỉ cần chọn những chức năng phù hợp, sau đó nhập các dữ liệu tương ứng với các trường thông tin và thêm mới. Các thông tin nhập vào được hệ thống xử lý, sử dụng các câu lệnh truy vấn để thêm mới dữ liệu vào trong hệ quản trị cơ sở dữ liệu MySQL. Đối với dữ liệu là hình ảnh, hệ thống sẽ có chức năng riêng tạo thư mục để lưu trữ hình ảnh, sau đó sẽ lấy ra đường dẫn tới hình
66
ảnh đó để thực hiện thêm mới dữ liệu vào MySQL.
3.1.3. Tích hợp thanh toán trực tuyến
Việc tích hợp thanh toán trực tuyến đem lại nhiều tiện lợi, tiết kiệm thời gian cả cho khách hàng và cà người bán hàng. Trong đề tài khóa luận này, tác giả sẽ tích hợp sử dụng thanh toán thông qua bên thứ 3 là Stripe, đây là một cổng thanh toán cho phép các trang thương mại điện tử nhận thanh toán trên website bán hàng của mình. Các bước tiến hành tích hợp như sau:
Bước 1 Đăng ký tài khoản Stripe.
Truy cập vào trang web “https://stripe.com”, đăng ký tài khoản và xác thực địa chỉ email. Sau khi đăng ký, truy cập vào phần API để có thể lấy key sử dụng cho các bước sau
Bước 2 Tải thư viện Stripe
Chúng ta có thể lấy thư viện Stripe cho Php bằng cách tải về hoặc thông qua composer như sau:
Hình 3.8. Tải thư viện Stripe bằng composer
Bước 3 Thực hiện tích hợp
Để làm việc với Stripe ta cần gọi đến thư viện Stripe và thư viện Charge. Cần thêm vào file xử lý thanh toán những dòng như sau để gọi đến thư viện Stripe
“require __DIR__ . '/vendor/autoload.php'; use Stripe\Stripe;
67
Sau đó, sử dụng key đã lấy ở bước đầu tiên, tiến hành kết nối tới Stripe. Để kiểm tra thử, thực hiện chạy dòng lệnh như sau:
Hình 3.9. Sử dụng key API kết nối tới Stripe
Ở đây có thể thấy key API lấy ban đầu có tác dụng giúp kết nối tới cổng thanh toán Stripe. Số thẻ được đặt mặc định là 4242424242424242, đây chỉ là thẻ để thử nghiệm, không sử dụng được trong thanh toán thực tế.
3.2. Giao diện một số chức năng của website
Sau khi hoàn tất quá trình cài đặt và kết nối cơ sở dữ liệu cho website, ta có được một website hoàn chỉnh. Đây là một gian hàng trực tuyến, nơi chứa các sản phẩm và cũng là giao diện tương tác giữa khách hàng và công ty để tiến hành các hoạt động mua sắm sản phẩm.
3.2.1. Giao diện trang chủ
Giao diện trang chủ sẽ hiển thị tất cả các menu chức năng của website cho phép người dùng thao tác với hệ thống, hiển thị menu các danh mục sản phẩm và những sản phẩm nổi bật, các banner và thông tin chương trình khuyến mại
68
Hình 3.10. Giao diện trang chủ
3.2.2. Giao diện Đăng Ký/Đăng Nhập
Hình 3.11. Giao diện đăng ký/ đăng nhập
Giao diện đăng ký cho phép người dùng điền các trường thông tin cần thiết để tiến hành đăng ký thành viên. Sau khi đăng ký, sẽ có một email gửi liên kết xác nhận tài khoản, cần bấm vào liên kết đó để xác nhận, nếu không thì tài khoản sẽ không đăng nhập được. Xác nhận xong, người dùng sẽ được điều hướng đến trang đăng nhập. Tại đây, người dùng cần điền đúng thông tin username và mật khẩu vừa đăng ký để truy cập vào tài khoản của mình. Nếu không nhớ mật khẩu, có thể bấm vào dòng “Quên mật khẩu”.
69
Hình 3.12. Giao diện quên mật khẩu
Tại đây, người dùng sẽ điển địa chỉ email đã đăng ký ở website và bấm nút gửi liên kết lấy lại mật khẩu. Hệ thống sẽ kiểm tra, nếu địa chỉ email có đăng ký, người dùng sẽ nhận được liên kết để cập nhật lại mật khẩu mới, ngược lại nếu địa chỉ email không tồn tại trong hệ thống sẽ trả về thông báo lỗi cho người dùng.
3.2.3. Giao diện trang tài khoản thành viên
Hình 3.13. Giao diện trang tài khoản thành viên
Trong trang tài khoản cá nhân, mỗi người dùng đều có các chức năng như kiểm tra lịch sử đơn hàng, xem thông tin tài khoản, thay đổi, cập nhật thông tin tài khoản, đổi mật khẩu, hoàn trả đơn hàng nếu như mua phải sảm phẩm không vừa ý khách hàng.
70
3.2.4. Giao diện form tìm kiếm sản phẩm
Hình 3.14. Form tìm kiếm sản phẩm
Nếu muốn tìm sản phẩm, người dùng cần gõ thông tin vào trong ô tìm kiếm. Trang web có sử dụng chức năng tìm kiếm trực tiếp, sau khi người dùng nhập thông tin, hệ thống sẽ trực tiếp đưa ra một số sản phẩm giống với thông tin đó ngay dưới ô tìm kiếm. Nếu muốn xem nhiều sản phẩm hơn cần phải bấm vào nút tìm kiếm.
71
3.2.5. Giao diện trang chi tiết sản phẩm
Hình 3.16. Trang chi tiết sản phẩm
72
Hình 3.18. Chi tiết thông số sản phẩm
Hình 3.19. Nhận xét, đánh giá sản phẩm
Nếu như tại trang chủ, khách hàng chỉ có thể xem qua một vài thông tin cơ bản về sản phẩm như giá bán, mức độ đánh giá thì tại trang chi tiết sản phẩm, khách hàng có thể nắm bắt được rõ hơn các thông tin về sản phẩm như số lượng đã bán, tình trạng hàng, có thể chia sẻ sản phẩm lên các trang mạng xã hội. Bên
73
cạnh đó còn có thể xem chi tiết về thông số, giới thiệu sản phẩm cũng như các đánh giá, bình luận của người khác để có cái nhìn khách quan hơn về sản phẩm.
3.2.6. Giao diện trang tin tức
Hình 3.20. Trang tin tức
Đây là trang tổng hợp những khuyến mãi, bài viết, thông tin có liên quan đến các sản phẩm website cung cấp. Người dùng có thể truy cập vào trang này để xem những khuyến mại và đọc những bài viết để có cái nhìn thực tế về sản phẩm.
3.2.7. Giao diện trang giỏ hàng
Hình 3.21. Trang giỏ hàng
Ở trang giỏ hàng, thông tin về các sản phẩm khách hàng đã lựa chọn sẽ được hiển thị ở đây. Thông tin bao gồm: tên sản phẩm, số lượng, thành tiền.
74
3.2.8. Giao diện nhập thông tin nhận hàng và hình thức thanh toán
Hình 3.22. Trang thông tin nhận hàng và chọn thanh toán
Tại trang này sẽ có các trường thông tin trống về chi tiết hóa đơn để người dùng có thể điền thông tin của mình vào, ngoài ra thông tin về tổng tiền đơn hàng, phí vận chuyển và tiền thuế đế người dùng cũng được hiển thị ở khung bên phải. Đối với hình thức thanh toán, hiện tại website cung cấp hai hình thức là thanh toán trực tuyến qua thẻ MasterCard và vận chuyển COD, thanh toán khi nhận hàng.
3.2.9. Giao diện một số trang quản trị website
75
Hình 3.24. Trang quản lý tin tức
Hình 3.25. Trang quản lý đơn hàng
76
Các trang quản trị chỉ những người có tài khoản admin quản trị, tài khoản nhân viên mới có thể vào được. Tùy thuộc vào quyền hạn, mỗi tài khoản khác nhau có thể có những quyền quản lý khác nhau, Riêng với tài khoản admin quản trị thì có toàn bộ quyền kiểm soát, quản lý những tài khoản thành viên khác. Tại mỗi trang quản lý những danh mục khác nhau, người dùng có thể xem danh sách, có thể thêm, chỉnh sửa thông tin hoặc xóa những thông tin không cần thiết.
3.3. Triển khai thử nghiệm website
Website được chạy thử nghiệm trên XAMPP, công cụ được giới thiệu trong phần môi trường cài đặt. Trong một quy trình mua bán sản phẩm trên website khi chạy thử nghiệm sẽ bao gồm hoạt động đặt mua sản phẩm của khách hàng, hoạt động tiếp nhận, xử lý thông tin của nhân viên kinh doanh và hoạt động quản lý nội dung, cập nhật thông tin sản phẩm của người phụ trách quản trị website.
3.3.1 Hoạt động mua hàng
Khách hàng truy cập vào website, lựa chọn sản phẩm mình ưng ý, sau đó chọn “thêm vào giỏ” để đưa sản phẩm đó vào giỏ hàng của mình. Khách hàng cũng có thể xem thông tin đầy đủ của sản phẩm và thông số về sản phẩm trước khi quyết định thêm vào giỏ hàng bằng cách click vào tên sản phẩm để truy cập vào trang thông tin chi tiết của sản phẩm đó, ngoài ra còn cần phải lựa chọn màu sắc và số lượng sản phẩm cần mua, sau đó mới có thể thêm sản phẩm vào giỏ hàng. Trong trường hợp khách hàng không lựa chọn màu sắc và số lượng hệ thống sẽ đưa ra cảnh báo yêu cầu chọn lại.
77
Hình 3.27. Thêm sản phẩm vào giỏ
Sau khi thêm, khách hàng có thể xem chi tiết giỏ hàng của mình bằng cách nhấn vào biểu tượng hình xe hàng, bao gồm danh sách sản phẩm đã lựa chọn, số lượng và thành tiền.
78
Tại giỏ hàng, khách hàng có thể cập nhật lại số lượng, màu sắc sản phẩm hoặc xóa bỏ những sản phẩm không muốn mua nữa. Sau khi lựa chọn sản phẩm trong giỏ hàng xong, khách hàng tiến hành thanh toán, đây là bước mà người dùng cần nhập vào thông tin địa chỉ nhận hàng và hình thức thanh toán.
Nếu có mã giảm giá, khách hàng có thể điền mã vào khung thông tin “Sử dụng mã giảm giá” trước khi tiến hành thanh toán. Mã giảm giá hợp lệ thì tổng tiền đơn hàng sẽ được giảm theo số phần trăm của mã đó. Sau khi click tiến hành thanh toán, giao diện website sẽ chuyển sang trang thanh toán và nhập địa chỉ nhận hàng. Nếu chưa đăng nhập, hệ thống sẽ đưa ra cảnh báo và khách hàng cần phải thực hiện đăng nhập vào trang web mới có thể tiến hành bước thanh toán, điều này để đảm bảo ghi lại lịch sử đơn hàng giúp khách hàng dễ dàng kiểm tra lại lịch sử mua hàng của mình
Hình 3.29. Thông tin chi tiết hóa đơn
Khách hàng điền đầy đủ thông tin để nhận hàng như họ tên, địa chỉ, số điện thoại. Khung bên phải chứa thông tin về đơn hàng và là nơi để khách hàng lựa chọn các phương thức thanh toán. Việc thanh toán trực tuyến sẽ sử dụng thẻ visa