Mục đích : Khách hàng có thể thay đổi mật khẩu Giao diện :
Mục đích : Khách hàng có thể cập nhật thông tin tài khoản của mình : tên, số điện thoại, email.
Giao diện :
Hình 4.5 : Hình ảnh giao diện trang đổi mật khẩu
4.6 Trang sản phẩm.
Mục đích : Trang này dùng để hiển thị các sản phẩm theo loại với đầy đủ các thông tin và các thông số kỹ thuật của loại sản phẩm để người truy cập có thể thấy được sản phẩm trên trang web.
Hình 4.6 : Hình ảnh giao diện trang sản phẩm
4.7 Trang chi tiết sản phẩm
Mục đích : Trang này dùng để hiển thị thông tin chi tiết của một sản phẩm như tên, loại , giá , số lượng hiện có, chi tiết sản phẩm và đánh giá sản phẩm. Giao diện :
Mục đích : Đây là giao diện người dùng chính của trang web. Tại đây người dùng có thể xem thông tin về các sản phẩm của website thông qua các hình ảnh và thông tin khác về sản phẩm.
Giao diện :
Mục đích : Chức năng này cho phép khách hàng thực hiện đánh giá sản phẩm theo hình thức đánh giá sao, viết nhận xét cho sản phẩm.
Giao diện :
Hình 4.9 : Hình ảnh giao diện trang đánh giá sản phẩm
4.10 Trang giỏ hàng.
Mục đích : Tại trang này chứa đựng những sản phẩm mà khách hàng đã chọn cho vào giỏ hàng. Nếu người dùng muốn mua tiếp một sản phẩm khác thì chỉ việc thêm sản phẩm đó vào giỏ hàng. Tại giỏ hàng này chứa đựng thông tin tên sản phẩm, số lượng, giá bán của sản phẩm và cuối cùng là tổng số tiền của các mặt hàng đã chọn.
Mục đích : Tại trang này khách hàng nhập đầy đủ các thông tin : tên người nhận, địa chỉ,... rồi chọn hình thức thanh toán, có thể chọn thanh toán khi nhận hàng hoặc thanh toán trực tuyến qua ví paypal và cuối cùng chọn đặt hàng. Nếu muốn mua một sản phẩm thì ở trang chi tiết sản phẩm, khách hàng chọn “buy now”, còn nếu muốn mua nhiều sản phẩm thì thêm vào giỏ hàng rồi chọn đặt hàng.
Giao diện :
- Đặt hàng:
Hình 4.11 : Hình ảnh giao diện trang đặt hàng
Hình 4.12 : Hình ảnh giao diện trang chọn hình thức thanh toán
Mục đích : Tại trang này, khách hàng có thể theo dõi trạng thái đơn đặt hàng và xem lịch sử mua hàng.
Mục đích : Tại đây Nhân viên có thể quản lý đơn hàng, quản lý tài khoản khách hàng, quản lý sản phẩm, quản lý đánh giá sản phẩm, thống kê,…
Giao diện :
Hình 4.16 : Hình ảnh giao diện Nhân viên
4.14 Trang Admin
Mục đích : Tại đây Admin có thể quản lý đơn hàng, quản lý tài khoản người dùng, quản lý danh mục, quản lý sản phẩm, quản lý đánh giá sản phẩm, sao lưu và phục hồi dữ liệu, thống kê,…
Giao diện :
Hình 4.17 : Hình ảnh giao diện trang Admin
4.15 Trang quản lý tài khoản khách hàng.
Mục đích : Trang này dùng cho người quản trị hệ thống, nhân viên quản lý tài khoản của khách hàng. Người quản trị có thể tìm kiếm thông tin khách hàng bằng tên, có thể xóa sửa thông tin khách hàng :
Hình 4.18 : Hình ảnh giao diện trang quản lý tài khoản khách hàng
4.16 Trang quản lý tài khoản nhân viên
Mục đích : Trang này dùng cho người quản trị hệ thống quản lý tài khoản và thông tin nhân viên. Người quản trị có thể tìm kiếm thông tin nhân viên bằng tên, có thể xóa sửa thông tin nhân viên. Người quản trị tạo tài khoản cho nhân viên.
Giao diện :
Hình 4.19 : Hình ảnh giao diện trang quản lý tài khoản nhân viên
4.17 Trang quản lý sản phẩm.
Mục đích : Trang này dùng cho người quản trị hệ thống, nhân viên quản lý sản phẩm. Người quản trị có thể tìm kiếm theo tên sản phẩm và có thể thêm xóa sửa, sản phẩm trên website. Người quản trị có thể in danh sách sản phẩm.
Hình 4.20 : Hình ảnh giao diện trang quản lý sản phẩm của admin
- Nhân viên (Staff) :
Hình 4.21 : Hình ảnh giao diện trang quản lý sản phẩm của nhân viên
Hình 4.22 : Hình ảnh giao diện trang quản lý chi tiết sản phẩm
4.18 Trang quản lý danh mục.
Mục đích : Trang này dùng cho người quản trị hệ thống, nhân viên quản lý danh mục sản phẩm. Người quản trị có thể thêm xóa sửa danh mục sản phẩm trên website.
Hình 4.23 : Hình ảnh giao diện trang quản lý danh mục
4.19 Trang quản lý đơn hàng.
Mục đích : Trang này dùng cho người quản trị hệ thống quản lý đơn hàng của khách hàng. Người quản trị có thể xem chi tiết đơn hàng, xem đơn hàng đã thanh toán hay chưa (paid/ Unpaid), thay đổi trạng thái đơn hàng (In Process/ Completed) và tìm kiếm đơn hàng theo tên khách hàng.
Giao diện :
Hình 4.24 : Hình ảnh giao diện trang quản lý đơn hàng
4.20 Trang quản lý nhập hàng
Mục đích : Trang này dùng cho người quản trị hệ thống, nhân viên quản lý nhập hàng. Người quản trị có thể xem chi tiết đơn nhập hàng, tạo đơn nhập hàng mới bằng cách import file excel, tìm kiếm đơn nhập hàng theo tên nhân viên tạo đơn nhập hàng và có thể xóa đơn nhập hàng.
Hình 4.25 : Hình ảnh giao diện trang quản lý đơn nhập hàng của Admin
- Nhân viên (Staff) :
Hình 4.26 : Hình ảnh giao diện trang quản lý đơn nhập hàng của nhân viên
Hình 4.27 : Hình ảnh giao diện trang quản lý đơn nhập hàng
4.21 Trang thống kê.
Mục đích : Trang này dùng cho người quản trị thống kê chi thu chi, thống kê số lượng sản phẩm bán theo mỗi tháng và thống kê số lượng sản phẩm tồn kho trên website.
Giao diện :
chi
- Thống kê số lượng sản phẩm bán theo mỗi tháng:
Hình 4.29 : Hình ảnh giao diện trang quản lý thống kê sản phẩm bán theo tháng
- Thống kế sản phẩm tồn kho:
Hình 4.30 : Hình ảnh giao diện trang quản lý thống kê sản phẩm tồn kho
4.22 Trang quản lý đánh giá sản phẩm.
Mục đích : Trang này dùng cho người quản trị hệ thống và nhân viên quản lý đánh giá của khách hàng. Người quản trị có thể xem đánh giá, xóa đánh giá trên website.
Hình 4.31 : Hình ảnh giao diện trang quản lý đánh giá sản phẩm
4.23 Trang sao lưu và phục hồi dữ liệu.
Mục đích : Trang này dùng cho người quản trị và thể thực hiện sao lưu và phục hồi dữ liệu nếu cần.
Giao diện :
CHƯƠNG 5. KIỂM THỬ CHƯƠNG TRÌNH
5.1 Chạy thử chương trình để kiểm tra hệ thống đăng nhập.
Nhập không đúng tên hoặc mật khẩu:
Hình 5.1 : Giao diện nhập sai thông tin đăng nhập
Nhập thiếu thông tin :
Hình 5.3 : Giao diện nhập không đúng yêu cầu mật khẩu
Nhập thông tin đúng và đủ vào form đăng ký tài khoản :
Hình 5.4 : Giao diện nhập đúng thông tin đăng nhập
Thông báo đăng nhập thành công
khoản.
Nhập sai định dạng thông tin : nhập email đã tồn tại, nhập lại password không trùng với password được nhập.
Hình 5.7 : Giao diện nhập thiếu thông tin đăng ký
Hình 5.8 : Giao diện nhập đúng thông tin đăng ký
Thông báo tạo thành công hiện ra:
Hình 5.10 : Hình ảnh tài khoản đã được thêm vào thành công
5.3 Chạy thử chương trình để kiểm tra chức năng đổi mật khẩu. khẩu.
Nhập sai mật khẩu cũ :
Hình 5.11 : Giao diện nhập sai mật khẩu cũ
Hình 5.12 : Giao diện nhập mật khẩu mới trùng mật khẩu cũ
Nhập lại mật khẩu mới không trùng với mật khẩu mới được nhập :
Hình 5.13 : Giao diện nhập lại mật khẩu không trùng với mật khẩu mới được nhập
Hình 5.14 : Giao diện nhập đúng thông tin yêu cầu đổi mật khẩu
Thông báo đổi mật khẩu thành công :
Hình 5.15 : Giao diện thông báo đổi mật khẩu thành công
5.4 Chạy thử chương trình để kiểm tra chức năng quên mật khẩu. khẩu.
Hình 5.16 : Giao diện nhập email không tồn tại
Nhập email đúng :
Hình 5.18 : Giao diện email chứa mã OTP
Nhập mã OTP sai :
Hình 5.19 : Giao diện nhập sai mã OTP
Nhập mã OTP trùng với mã OTP nhận được trong mail : - Nhập mã OTP đúng :
thị :
Hình 5.21 : Giao diện đặt lại mật khẩu mới
- Nhập lại mật khẩu không trùng với mật khẩu mới đã được nhập :
Hình 5.22 : Giao diện nhập lại mật khẩu không trùng với mật khẩu mới
- Thông báo đặt lại mật khẩu thành công :
Hình 5.24 : Giao diện thông báo đặt lại mật khẩu thành công
5.5 Chạy thử chương trình để kiểm tra chức năng đặt hàng.
Chưa đăng nhập:
- Khi nhấn vào Add to Cart/ Buy Now sẽ hiện thông báo cần đăng nhập trước
Hình 5.25 : Thông báo cần đăng nhập để mua hàng
Đã đăng nhập:
- Khi bấm vào Add to Cart: Thông báo hiển thị đã đặt sản phẩm vào giỏ hàng. Giỏ hàng có sản phẩm
Hình 5.26 : Thông báo thêm vào giỏ hàng thành công
Hình 5.27 : Sản phẩm được thêm vào giỏ hàng
- Khi bấm vào Buy Now: Sản phẩm tự được thêm vào giỏ hàng và chuyển qua trang Đặt hàng. Thông tin của Khách hàng được điền tự động vào những vị trí cần điền
Hình 5.29 : Giao diện đặt hàng
- Thông báo khi có phần nhập thông tin bị trống:
Hình 5.30 : Giao diện nhập thiếu thông tin đặt hàng
- Bấm vào đặt hàng: Thông báo đặt hàng thành công hiển thị. Mail xác nhận mua hàng được gửi đến mail khách hàng
Hình 5.31 : Thông báo đặt hàng thành công
Hình 5.31 : Giao diện mail thông báo đã đặt hàng
Kết quả đạt được :
Website có thể triển khai ở cửa hàng bán xe đạp.
Website có giao diện dễ nhìn, thân thiện với người sử dụng.
Sau khi nghiên cứu, em đã xây dựng được một website quản lý bán xe đạp thay thế cách quản lý thủ công bằng tay, mất rất nhiều thời gian và tốn công sức cho người quản lý.
Website có ứng dụng thực tiễn đối với các cửa hàng bán xe đạp, được dùng để quản lý các thông tin liên quan đến sản phẩm.
Hạn chế của đề tài :
Website bán xe đạp tuy đã hoàn thành nhưng vẫn không tránh khỏi những thiếu sót cũng như những hạn chế nhất định:
Chưa thanh toán online qua tài khoản ngân hàng được. Không có chức năng tìm kiếm sản phẩm.
Kỹ năng phân tích hệ thống còn nhiều hạn chế. Và một số hạn chế khác,...
Hướng phát triển :
Tiếp tục bổ sung những chức năng mà website chưa có đề website có thể ứng dụng rộng rãi trong mọi cửa hàng (chức năng thanh toán online qua tài khoản ngân hàng,...).
Tiếp tục hoàn thiện chương trình, hi vọng có thể đáp ứng được mọi nhu cầu của người sử dụng.
Danh mục các Website tham khảo: 1. https://vi.wikipedia.org/wiki/Java_(ngôn_ngữ_lập_trình) 2. https://www.howkteam.vn/course/cau-truc-re-nhanh-trong-java/lich-su-phat- trien-va-tinh-nang-cua-java-124 3. https://codelearn.io/sharing/top-10-ide-java-2020 4. https://blog.itnavi.com.vn/spring-boot-la-gi/ 5. https://hocspringboot.net/2020/10/17/spring-boot-co-gi-hay-va-nhung-tinh- nang-cua-springboot/ 6. https://timviec365.vn/blog/swagger-la-gi-ban-hieu-gi-ve-cong-cu-viet- document-cho-api-new13234.html 7. https://viblo.asia/p/tim-hieu-ve-swagger-de-viet-api-XL6lAwbAKek 8. https://hoclaptrinh.vn/posts/json-web-tokenjwt-la-gi 9. https://wiki.tino.org/reactjs-la-gi/? 10.https://viblo.asia/p/reactjs-la-gi-nhung-dieu-can-biet-ve-reactjsc- djeZ1GJo5Wz?