Website bán điện thoại di động: Người dùng có thể tìm kiếm, xem thông tin và mua điện thoại trên website. Có tính năng cho phép người dùng đặt mua điện thoại Sử dụng ReactJS Libary PHP core BTL được chấm 910 Nhận phát triển thêm chức năng nếu có nhu cầu
Cơ sở lý thuyết
Các khái niệm
- Ngôn ngữ để xây dựng website:
HTML, CSS, JS , ReactJS, PHP
- Xử dụng phiên bản PHP 8.2.0 đề đảm bảo sự ổn định và có tính ứng dụng lâu dài.
Yêu cầu sử dụng ngôn ngữ PHP
Website bán hàng điện thoại cần có giao diện đẹp, thu hút và dễ sử dụng để nâng cao trải nghiệm người dùng, bao gồm các chức năng phân loại sản phẩm, tìm kiếm, đặt hàng, thanh toán và đăng ký tài khoản Hệ thống quản lý sản phẩm phải tiện ích cho người quản trị, cho phép thêm, sửa, xóa và cập nhật thông tin sản phẩm, đồng thời cung cấp hình ảnh và mô tả chân thực để khách hàng hiểu rõ hơn về sản phẩm Để tạo sự thuận tiện cho khách hàng, website cần kết nối với các hình thức thanh toán như thẻ tín dụng, chuyển khoản và COD Hệ thống vận chuyển cũng cần được tích hợp để đảm bảo giao hàng nhanh chóng và an toàn, với nhiều lựa chọn như ship COD, vận chuyển nhanh và tiết kiệm Cuối cùng, việc cung cấp chương trình khuyến mại và chăm sóc khách hàng sẽ giúp tăng doanh số và tạo sự kết nối tốt hơn với khách hàng, đồng thời hỗ trợ họ trong việc giải đáp thắc mắc về sản phẩm.
Mục tiêu cụ thể của website bán hàng là đảm bảo tốc độ phản hồi nhanh và các chức năng hoạt động trơn tru, không gặp lỗi Đồng thời, cần xây dựng đầy đủ các chức năng thiết yếu như xem sản phẩm, đăng ký, đăng nhập và quản lý sản phẩm cũng như danh mục.
Phân tích các chức năng của website
Biểu đồ use case
Sua thong tin ca nhan
Xem chi tiet san pham
Xem san pham theo danh muc
Bao tri danh muc san pham
Quan ly tai khoan bao tri bai viet
Dang ky nguoi quan tri
1) Xem bài viết: Cho phép khách hàng xem các bài viết về công nghệ mới nhất.
2) Xem sản phẩm theo danh mục: Cho phép khách hàng xem sản phẩm theo danh mục.
3) Xem chi tiết sản phẩm: Cho phép khách hàng xem chi tiết sản phẩm.
4) Xem event: Cho phép khách hàng xem chương trình hiện có.
5) Kiểm tra đơn hàng: Cho phép khách hàng kiểm tra đơn hàng.
6) Đăng ký tài khoản: Cho phép khách hàng đăng ký tài khoản.
7) Đặt hàng: Cho phép khách hàng đặt hàng.
8) Tìm kiếm sản phẩm: Cho phép khách hàng tìm kiếm sản phẩm.
9) Quản lý giỏ hàng: Cho phép khách hàng xem các sản phẩm đã chọn.
10) Thanh toán: Cho phép khách hàng thanh toán.
11) Đăng nhập: Cho phép khách hàng đăng nhập.
12) Hủy đơn hàng: Cho khách hàng hủy đơn hàng
13) Sửa thông tin cá nhân: Cho khách hàng sủa lại thông tin bản thân
14) Bảo trì sản phẩm: cho phép quản trị xem, thêm, sửa, xóa thông tin trong bảng “products”
15) Bảo trì danh mục: cho phép quản trị xem, thêm, sửa, xóa thông tin trong bảng “categories”
16) Bảo trì bài viết: cho phép quản trị xem, thêm, sửa, xóa thông tin trong bảng “news”
17) Quản lý tài khoản:cho phép quản trị xem, sửa trạng thái trong bảng
18) Bảo trì events: cho phép quản trị xem, thêm, sửa, xóa thông tin trong bảng “event”
19) Quản lý đơn hàng(xem đơn hàng, xem chi tiết đơn hàng, sửa trạng thái đơn hàng): Cho phép người quản trị xem thông tin trong bảng “order”, sửa trạng thái của đơn hàng trong bảng “order”, xóa thông tin trong bản “order”.
Đặc tả use case
2.3.1 Mô tả use case xem chi tiết sản phẩm
Use case này cho phép khách hàng xem chi tiết các thông số của sản phẩm như màu sắc, chất liệu, mô tả, …
Luồng sự kiện: o Luồng cơ bản:
1) Use case bắt đầu khi khách hàng kích chọn một danh mục sản phẩm trên menu trang chủ Hệ thống lấy thông tin về ảnh mẫu, tên, đơn giá của các sản phẩm đó trong bảng “PRODUCTS” và hiển thị lên màn hình.
2) Khách hàng sau đó kích chọn vào ảnh mẫu hoặc tên sản phẩm muốn xem chi tiết, hệ thống lấy thông tin về mã sản phẩm, tên sản phẩm, đơn giá, giảm giá, màu sắc, kích cỡ, mô tả, chất liệu, hướng dẫn sử dụng của sản phẩm đó từ bảng “PRODUCTS” và hiển thị lên màn hình Use case kết thúc.
: Khach Hang : Xem chi tiet san pham UI : Xem chi tiet san pham UI : Xem chi tiet xem tiet san pham controller
: Xem chi tiet xem tiet san pham controller 1: Kich chon mot danh muc san pham( )
2: lay danh muc san pham( )
4: Hien thi danh sach san pham( )
5: Kich vào anh hoac ten san pham( )
6: lay thong tin san pham( )
2.3.2 Mô tả use case đăng nhập
- Mô tả use case: use case này cho phép khách hàng có thể đăng nhập.
Luồng sự kiện: o Luồng cơ bản:
Use case này khởi đầu khi khách hàng nhấn vào chức năng đăng nhập trong danh sách Hệ thống sẽ thu thập thông tin người dùng, bao gồm số điện thoại và
Khách hàng nhấp vào mục đăng nhập trong danh mục chức năng, hệ thống sẽ lấy thông tin đã chọn, bao gồm số điện thoại và mã OTP hiển thị trên màn hình Use case kết thúc tại đây.
2.3.3 Mô tả use case đặt hàng
- Mô tả use case: use case này cho phép khách hàng có thể mua hàng.
Luồng sự kiện: o Luồng cơ bản:
Khi khách hàng nhấp vào một sản phẩm trong danh sách, hệ thống sẽ lấy thông tin từ bảng "PRODUCTS" và hiển thị mục thêm vào giỏ hàng.
Khi khách hàng nhấp vào một sản phẩm, màn hình sẽ hiển thị hình ảnh, tên sản phẩm, mã sản phẩm, giá tiền, số lượng đã bán, màu sắc và kích cỡ Khách hàng có thể chọn kích thước và màu sắc trước khi thêm sản phẩm vào giỏ hàng.
- Sau khi đã thêm được sản phẩm vào giỏ hàng, khách hàng sẽ chọn phương thức thanh toán, tiến hành đặt hàng và thanh toán Use case kết thúc.
: KhachHang : DatHangUI : DatHangUI : DatHangController : DatHangController 1: Kich chon dat hang( )
2: lay thong tin danh sach cac san pham( )
3: return ket qua 4: hien thi thong tin cac san pham( )
5: kich chon mot san pham( )
6: lay thong tin san pham( )
7: return ket qua 8: hien thi san pham( )
9: chon kich thuoc , mau sac va them vao gio hang( )
11: chon phuong thuc thanh toan va tien hanh thanh toan( )
2.3.4 Mô tả use case đăng ký tài khoản
- Mô tả vắn tắt: Use case này cho phép người dùng có thể đăng ký tài khoản.
Luồng sự kiện: o Luồng cơ bản:
Khách hàng bắt đầu quy trình đăng ký bằng cách nhấp vào biểu tượng trong danh sách chức năng, sau đó nhập thông tin cá nhân bao gồm số điện thoại, email, tên và ngày tháng sinh.
Khách hàng nhấn nút đăng ký, hệ thống sẽ thu thập thông tin đã chọn như số điện thoại, email, tên và ngày tháng sinh để cập nhật vào bảng "user" Quy trình sử dụng kết thúc tại đây.
2.3.5 Mô tả use case tìm kiếm sản phẩm
- Mô tả vắn tắt: Use case này cho phép người dùng có thể tìm kiếm sản phẩm.
Luồng sự kiện: o Luồng cơ bản:
Khi khách hàng nhấp vào chức năng tìm kiếm trên thanh menu, hệ thống sẽ truy xuất thông tin từ bảng “PRODUCTS” để hiển thị trong khung tìm kiếm cùng với nút tìm kiếm Quá trình này kết thúc khi thông tin được hiển thị.
Khách hàng chọn mục tra cứu trong danh mục chức năng, hệ thống sẽ truy xuất thông tin từ bảng sách và hiển thị danh sách sách trên màn hình Use case kết thúc.
2.3.6 Mô tả use case thanh toán
Use case cho phép khách hàng thanh toán những sản phẩm trong giỏ hàng
Luồng sự kiện: o Luồng cơ bản:
1 Use case này bắt đầu khi khách hàng kích chuột vào nút “Thanh toán” trong trang giỏ hàng Hệ thống hiển thị danh sách các sản phẩm trong giỏ hàng và lấy thông tin về tên sản phẩm, giá tiền,màu sắc, số lượng của bảng
“order_details” trong cơ sở dữ liệu và đưa ra màn hình.
2 Khách hàng nhập thông tin giao hàng: họ tên, số điện thoại, địa chỉ và chọn phương thức thanh toán: thanh toán khi nhận hàng hoặc thanh toán bằng thẻ tín dụng Khách hàng kích vào nút “Đặt hàng” Use case kết thúc.
2.3.7 Mô tả use case kiểm tra giỏ hàng
- Use case cho phép khách hàng xem những sản phẩm trong giỏ hàng của mình
Luồng sự kiện: o Luồng cơ bản:
1 Use case này bắt đầu khi khách hàng kích chuột vào biểu tượng giỏ hàng trên trang chủ Hệ thống hiển thị danh sách các sản phẩm thêm vào giỏ và lấy thông tin về tên sản phẩm, giá tiền, màu sắc, số lượng của bảng “order_details” trong cơ sở dữ liệu và đưa ra màn hình
2 Khách hàng có thể thay đổi số lượng sản phẩm muốn mua bằng cách bấm vào nút “+” hoặc “-” thuộc cột số lượng để thêm hoặc giảm số lượng sản phẩm Kích vào nút “x” để xóa sản phẩm đó Hệ thống sẽ cập nhật lại giỏ hàng Use case kết thúc
: KiemTraGioHangController 1: Kich vao nut gio hang( )
2: Lay danh sach san pham trong gio hang( )
4: Hien thi danh sach san pham trong gio( )
6: Sua so luong san pham( )
8: Hien thi danh sach san pham trong gio( )
10: Sua lai danh sach san pham( )
12: Hien thi danh sach san pham trong gio( )
2.3.8 Mô tả use case bảo trì bài viết
Use case bảo trì tin tức cho người quản trị chỉnh sửa các bài viết trên hệ thống.
Luồng sự kiện: o Luồng cơ bản:
1) Use case này bắt đầu khi người quản trị kích vào nút “Articles”.
Hệ thống hiển thị thông tin của các tin tức trên hệ thống từ bảng
2) Thêm tin tức: a) Người quản trị kích vào nút “Thêm mới” trên cửa sổ danh mục tin tức Hệ thống hiển thị màn hình yêu cầu nhập thông tin chi tiết tin tức gồm: tên tin tức, nội dung tin tức, ngày đăng và ảnh minh hoạ b) Người quản trị nhập tên tin tức và nội dung của tin tức mới sau đó kích vào nút “Lưu” Hệ thống sẽ hiển thị danh sách các tin tức đã được cập nhật trong bảng “NEWS”.
Kế hoạch triển khai thực hiện
Bước 1: Xác định tổng quan về mẫu phát triển website
Mục đích phát triển web là để bán điện thoại đến các khách hàng trên nền tảng trực tuyến
Người truy cập là những khách hàng tìm mua điện thoại ở trên mạng
Bước 2: Xây dựng kế hoạch thiết kế website
- Xây dựng tài liệu phân tích và đặc tả phần mềm để tối đa hóa trải nghiệm người dùng
- Sử dụng ngôn ngữ PHP để giao tiếp với cơ sở dữ liệu và ngôn ngữHTML/CSS/JS để xây dựng giao diện trang web
Bước 4: Lên kế hoạch content cho website
Chọn lọc thông tin một cách hiệu quả và sắp xếp theo bố cục hợp lý là yếu tố quan trọng để tối ưu hóa trải nghiệm người dùng Điều này không chỉ giúp giữ chân khách hàng hiện tại mà còn thu hút thêm những khách hàng mới đến với trang web.
Bước 5: Kiểm thử phẩn mềm
Kiểm tra và rà soát tất cả các lỗi hiện có là bước quan trọng để gửi lại cho đội ngũ phát triển sửa chữa Điều này giúp tránh tình trạng trang web đi vào hoạt động mà vẫn còn nhiều lỗi không đáng có.
- Các thành phần cần kiểm tra như:
- Kiểm tra HTML: Giúp nhận ra những lỗi trên trang, gây ảnh hưởng đến hoạt động của một website.
- Tốc độ tải trang: Đây là yếu tố ảnh hưởng trực tiếp đến trải nghiệm của khách hàng, nên các SEOer cần phải vô cùng chú ý.
- Giảm thời gian tải xuống: Là cách giúp cho website tối ưu hóa nhất, loại bỏ các thứ không cần thiết.
- Kiểm tra hình ảnh, nội dung: Giúp cho khách hàng thấy được sự chuyên nghiệp, chỉn chu về xây dựng website.
- Đánh giá lại cấu trúc website: Xây dựng cấu trúc của website giúp tối ưu hoạt động của web, bố cục dễ nhìn, dễ hiểu.
Bước 6: Bảo trì và cải thiện website nếu cần
Trong thời đại công nghệ phát triển mạnh mẽ, nhà quản trị website cần thích ứng và nâng cao kỹ năng để theo kịp xu hướng Sự thay đổi diễn ra nhanh chóng, vì vậy việc cập nhật thông tin kịp thời là rất quan trọng để duy trì sự ổn định và phát triển bền vững cho website.
Chương trình và kiểm thử
Các hình ảnh của website
Hình 1: Giao diện đăng kí của admin
Hình 2: Giao diện đăng nhập của admin
Hình 3: Giao diện trang chủ của admin
Hình 4,5, 6: Giao diện tài khoản của khách hàng
Hình 7,8,9 : Giao diện thông tin khách đặt hàng
Hình 10, 11, 12, 13, 14: Giao diện danh mục sản phẩm
Hình 15, 16, 17, 18: Giao diện quản lý sản phẩm
Hình 19: Giao diện tìm kiếm sản phẩm theo mệnh giá
Hình 24, 25, 26, 27: Giao diện bài viết
Hình 1, 2: Giao diện đăng kí của người dùng
Hình 3: Giao diện đăng nhập của người dùng
Hình 4, 5, 6: Giao diện trang chủ
Hình 7: Giao diện danh mục sản phẩm
Hình 8: Giao diện sản phẩm
Hình 9: Giao diện giỏ hàng
Hình 10, 11: Giao diện bài viết
3.1.2 Giao diện back- end https://github.com/strongphan//tree/master
Kiểm thử các chức năng của website
Đây là giai đoạn áp chót trước khi người dùng tiến tới việc thanh toán để mua hàng. Đã kiểm tra các nội dung dưới đây:
Người dùng có thể dễ dàng thêm mặt hàng khác vào giỏ hàng và tiếp tục mua sắm; khi thêm cùng một mặt hàng, số lượng sẽ tăng lên mà không tách rời thành item riêng Giỏ hàng cần hiển thị tất cả các mặt hàng và tổng số tiền, bao gồm thuế suất đúng theo quy định của khu vực Người dùng có khả năng điều chỉnh số lượng từng sản phẩm, và tổng số tiền sẽ được cập nhật tự động Ngoài ra, họ có thể xóa item khỏi giỏ hàng, tiến hành kiểm tra, tính toán chi phí vận chuyển với các tùy chọn khác nhau, và áp dụng phiếu giảm giá Nếu không thực hiện kiểm tra, người dùng có thể đóng trang web và mở lại; tất cả các mặt hàng đã thêm vào giỏ sẽ được giữ nguyên.
3.2.2 Kiểm thử chức năng thanh toán
Để thực hiện thanh toán, khách hàng cần đăng ký tài khoản và đăng nhập để tiến hành checkout Việc tạo tài khoản khách hàng là cần thiết, đồng thời cần đảm bảo an toàn cho thông tin tài chính như thẻ tín dụng bằng cách tuân thủ các quy định PCI Nếu người dùng không hoạt động trong một thời gian dài, phiên đăng nhập sẽ tự động hết hạn Mỗi trang web có quy định riêng về thời gian timeout Sau khi đặt hàng, email xác nhận sẽ được gửi đến khách hàng theo đúng thứ tự đã đặt sản phẩm.
3.2.3 Kiểm tra sản phẩm trong các Category/Sản phẩm nổi bật/Sản phẩm liên quan