3.3.1 Thiết kế giao diện cho người dùng 3.3.1.1 Giao diện đăng ký tài khoản
- Đây là chức năng đăng ký dành cho khách hàng. Khách hàng có thể nhập thông tin cá nhân để đăng ký tài khoản tại Tân Hưng
- Sau đó khách hàng có thể đăng nhập và trải nghiệm các chức năng của Tân Hưng.
Hình 3. 2 Giao diện đăng ký tài khoản
3.3.1.2 Giao diện đăng nhập tài khoản
- Đây là giao diện đăng nhập.
- Khách hàng đăng nhập thì mới có thể trải nghiệm toàn bộ chức năng có hiện có tại Tân Hưng.
3.3.1.3 Giao diện màn hình chính
- Giao diện có thanh menu gồm có các giao diện như là trang chủ, liên hệ, các danh mục sản phẩm, thông tin người dùng, giỏ hàng,….
- Ở trang chủ sẽ có những sản phẩm mới nhất người dùng có thể xem chi tiết sản phẩm và bấm thêm sản phẩm vào giỏ hàng từ đây.
-
Trang 85
3.3.1.4 Giao diện sản phẩm
- Ở giao diện này sẽ hiển thị tất cả sản phẩm, người dùng có thể xem chi tiết sản phẩm và thêm vào giỏ hàng từ đây.
3.3.1.5 Giao diện tìm kiếm
- ở đây người dùng có thể tìm kiếm sản phẩm bằng từ khóa sau đó có thể xem chi tiết và thêm vào giỏ hàng.
Hình 3. 6 Giao diện tìm kiếm
3.3.1.6 Giao diện chi tiết sản phẩm
- Người dùng có thể xem chi tiết sản phẩm sau đó thêm sản phẩm vào giỏ hàng hoặc có thể quay lại trang chủ để xem các sản phẩm khác.
3.3.1.7 Giao diện giỏ hàng và đặt hàng
- Tại giỏ hàng người dùng có thể lưu các sản phẩm của mình, có thể xóa sản phẩm muốn mua và đặt hàng
Trang 89
3.3.1.8 Giao diện tài khoản
- Tại giao diện này người dùng có thể chọn các chức năng như hình. Mỗi chức năng sẽ có công dụng khác nhau
3.3.1.9 Giao diện lịch sử giao dịch và chi tiết hóa đơn
- Đầu tiên của chức năng riêng của người dùng đó chính là xem lại lịch sử giao dịch và xem các hóa đơn có những gì.
Trang 91
3.3.1.10 Giao diện chỉnh sửa thông tin cá nhân
- Ngoài chức năng đổi mật khẩu người dùng còn có thể thay đổi thông tin của mình bằng cách vào Thông tin người dùng xem thông tin của mình và người dùng cũng có thể cập nhật lại thông tin của mình bằng các nhấn vào nút Cập Nhật.
3.3.1.11 Giao diện góp ý
- Tại đây người dùng có thể để lại góp ý của mình và gửi đến cửa hàng. (adsbygoogle = window.adsbygoogle || []).push({});
- Để có thể góp ý người dùng cần phải nhập đầy đủ các thông tin mà hệ thống đưa ra gồm: Tên, số điện thoại, nội dụng góp ý.
Hình 3. 12 Giao diện góp ý
3.3.2 Thiết kế giao diện cho quản lý3.3.2.1 Giao diện trang quản lý sản phẩm 3.3.2.1 Giao diện trang quản lý sản phẩm
- Đây là giao diện của quản lý sản phẩm giành cho quản lý. Tại đây người quản lý có thể thực hiện các chức năng như sau: Thêm sản phẩm vào ứng dụng, chỉnh sửa thông tin của sản phẩm đó, xóa sản phẩm đó khi không còn nhập hàng về nữa
- Chức năng này giúp cho người quản lý có thể kiểm soát được số lượng hàng của mình.
Hình 3. 14 Thêm và sửa sản phẩm
3.3.2.2 Giao diện trang quản lý tài khoản
- Đây là giao diện quản lý tài khoản.
- Quản lý tài khoản giúp người quản lý kiểm soát được khách hàng của mình. Ngoài ra còn biết được khách hàng của mình đã làm gì, đặt gì thông qua lịch sử giao dịch.
Hình 3. 16 Giao diện quản lý tài khoản
CHƯƠNG 4: ĐÁNH GIÁ VÀ HƯỚNG PHÁT TRIỂN 4.1 Các chức năng đã thực hiện được
4.1.1 Chức năng đăng ký
- Mô tả: Khách hàng sẽ nhập tài khoản, mật khẩu, số điện thoại, email, ngày sinh và nhập lại mật khẩu, chọn vào [Đăng Ký], hệ thống kiểm tra và chuyển đến trang đăng nhập
- Tác nhân: Khách hàng
- Đầu vào: Tài khoản: “tanyukio”, mật khẩu “123”, kiểm tra lại mật khẩu “123”, số điện thoại “0899797454”, email “tan456@gmail.com”, ngày sinh “3/6/1991”.
- Đầu ra: Chuyển đến trang đăng nhập
- Nội dung: Khách hàng nhập đầy đủ các thông tin theo yêu cầu, nếu khách hàng bỏ qua thông tin nào và chọn vào [Đăng Ký] thì hệ thống xuất ra thông báo “Thông tin này không được để trống”.
- Kết quả đạt được: Đăng ký thành công và chuyển đến trang đăng nhập
4.1.2 Chức năng đăng nhập phía khách hàng (Đăng nhập đúng tài khoản)
- Mô tả: Khách hàng sẽ nhập vào tài khoản và mật khẩu mà đã đăng ký trước đó, chọn vào [Đăng Nhập], hệ thống kiểm ta thông tin và chuyển đến trang đăng nhập cá nhân - Tác nhân: Người quản lý, Khách hàng
- Đầu vào: Tài khoản: “tanyukio” và Mật khẩu “123” - Đầu ra: Chuyển đến trang cá nhân của khách hàng
- Nội dung: Khi khách hàng nhập tài khoản và mật khẩu vào và chọn vào [Đăng Nhập] hệ thống sẽ kiểm tra dữ liệu nếu đúng thì sẽ chuyển đến trang mua sắm của khách hàng - Kết quả đạt được: Chuyển đến trang đăng nhập cá nhân
4.1.3 Chức năng đăng nhập phía khách hàng (Đăng nhập sai tài khoản hoặc mật khẩu)- Mô tả: Khách hàng sẽ nhập vào tài khoản và mật khẩu mà chưa tồn tại, chọn vào - Mô tả: Khách hàng sẽ nhập vào tài khoản và mật khẩu mà chưa tồn tại, chọn vào
[Đăng Nhập], hệ thống kiểm tra thông tin, hệ thống xuất ra thông báp “Tài Khoản Hoặc Mật Khẩu Không Đúng” và reset trang đăng nhập
- Tác nhân: Khách hàng
- Đầu vào: Tài khoản: “tanyukio123” và Mật khẩu “123”
- Đầu ra: Hệ thống sẽ xuất ra dòng thông báo “Tài Khoản Hoặc Mật Khẩu Không Đúng” - Nội dung: Khi khách hàng nhập tài khoản và mật khẩu vào và chọn vào [Đăng Nhập] hệ thống sẽ kiểm tra dữ liệu do tài khoản không tồn tại và mật khẩu không chính xác nên hệ thống sẽ xuất thông báo và trả về trang đăng nhập (Reset trang đăng nhập) - Kết quả đạt được: Xuất thông báo “Tài Khoản Hoặc Mật Khẩu Không Đúng” và reset
trang đăng nhập
4.1.4 Chức năng đăng nhập phía người quản lý
- Mô tả: Người quản lý sẽ nhập vào tài khoản và mật khẩu mà đã được cấp, chọn vào [Đăng Nhập], hệ thống kiểm tra thông tin và chuyển đến trang quản lý Admin (adsbygoogle = window.adsbygoogle || []).push({});
- Tác nhân: Người quản lý
- Đầu vào: Tài khoản: “tu” và Mật khẩu “123” - Đầu ra: Chuyển đến trang quản lý của admin
- Nội dung: Khi người quản lý nhập tài khoản và mật khẩu vào và chọn vào [Đăng Nhập] hệ thống sẽ kiểm tra dữ liệu do tài khoản không tồn tại và mật khẩu, do mật khẩu đã tồn tại và được cấp trước đó nên hệ thống sẽ chuyển đến trang quản lý Admin - Kết quả đạt được: Chuyển đến trang quản lý Admin
4.1.5 Chức năng đăng nhập phía người quản lý (Sai tài khoản hoặc mật khẩu)
- Mô tả: Người quản lý sẽ nhập vào tài khoản và mật khẩu mà chưa tồn tại, chọn vào [Đăng Nhập], hệ thống kiểm tra thông tin, Xuất thông báo “Tài Khoản Hoặc Mật Khẩu Không Đúng” và reset trang đăng nhập
- Tác nhân: Người quản lý
- Đầu vào: Tài khoản: “tu123” và Mật khẩu “123”
- Đầu ra: Hệ thống sẽ xuất ra dòng thông báo “Tài Khoản Hoặc Mật Khẩu Không Đúng” - Nội dung: Khi người quản lý nhập tài khoản và mật khẩu vào và chọn vào [Đăng Nhập] hệ thống sẽ kiểm tra dữ liệu do tài khoản không tồn tại và mật khẩu không chính xác nên hệ thống sẽ xuất thông báo và trả về trang đăng nhập (Reset trang đăng nhập) - Kết quả đạt được: Xuất thông báo “Tài Khoản Hoặc Mật Khẩu Không Đúng” và reset
trang đăng nhập.
4.1.6 Chức năng xem thông tin sản phẩm
- Mô tả: Khách hàng đang ở trang chủ và muốn xem thông tin sản phẩm, khách hàng chọn vào menu của một mặt hàng laptop sản phẩm bất kỳ. Hệ thống chuyển đến trang thông tin của sản phẩm đó
- Tác nhân: Khách hàng
- Đầu vào: Khách hàng chọn vào sản phẩm có tên “Apple”
- Đầu ra: Hệ thống chuyển đến trang thông tin sản phẩm có sản phẩm “Apple”
- Nội dung: Khách hàng đang ở trang mua sắm và muốn xem thông tin sản phẩm, khách hàng chọn vào ảnh của sản phẩm có tên “Apple có mã sản phẩm “16”. Hệ thống sẽ dựa vào mã sản phẩm và đưa đến trang show các thông tin sản phẩm trong trang thông tin sản phẩm
- Kết quả đạt được: Hệ thống sẽ chuyển đến trang thông tin sản phẩm mà khách hàng đã chọn
4.1.7 Chức năng Đăng Xuất
- Mô tả: Khách hàng sẽ chọn vào [Đăng Xuất] sau khi đã đăng nhập vào trang cá nhân, hệ thống xác nhận yêu cầu và đăng xuất phiên làm việc của khách hàng
- Tác nhân: Khách hàng
- Đầu vào: chọn vào [Đăng Xuất]
- Đầu ra: Hệ thống sẽ trả về trang giao diện trang chủ của ứng dụng
- Nội dung: Khách hàng sao khi đăng nhập thành công và đã kết thúc công việc mình đã muốn thực hiện như mua sắm, và muốn kết thúc phiên là việc của mình. Khách hàng chọn [Đăng Xuất] để thoát tài khoản ra khỏi ứng dụng.
- Kết quả đạt được: Hệ thống sẽ trả về trang giao diện trang chủ của ứng dụng.
4.1.8 Tìm kiếm sản phẩm
- Mô tả: Khách hàng sẽ nhập tên sản phẩm, hệ thống sẽ trả về sản phẩm nếu tồn tại, ngược lại sẽ trống nếu sản phẩm không tồn tại.
- Tác nhân: Khách hàng
- Đầu vào: Khách hàng sẽ nhập từ khóa “HP” vào thanh tìm kiếm của ứng dụng - Đầu ra: Hệ thống sẽ hiển thị các sản phẩm có tên “HP”
- Nội dung: Khách hàng nhập tên sản phẩm “HP” và hệ thống sẽ hiển thị các sản phẩm theo yêu cầu mà khách hàng đang tìm.
4.1.9 Quản lý tài khoản
- Mô tả: Người quản lý đến giao diện quản lý tài khoản, hệ thống tiếp nhận yêu cầu hiển thị tất cả tài khoản có trong dữ liệu (adsbygoogle = window.adsbygoogle || []).push({});
- Tác nhân: Người quản lý
- Đầu vào: Người quản lý sửa thông tin 1 tài khoản mới có tên tài khoản “hung”, mật khẩu “123”, email “hung123@gmail.com”, sdt “0909123456”.
- Đầu ra: Dữ liệu của tài khoản mới được sửa đổi thông tin sẽ hiển thị trong trang Quản lý tài khoản
- Nội dung: Người quản lý sửa thông tin 1 tài khoản mới có tên tài khoản “hung”, mật khẩu “123”, email “hung123@gmail.com”, sdt “0909123456”, người quản lý đến giao diện quản lý tài khoản, hệ thống tiếp nhận yêu cầu hiển thị tất cả tài khoản có trong dữ liệu. Và có dữ liệu tài khoản vừa đăng ký hiển thị lên
- Kết quả đạt được: Tài khoản “hung” mà admin đã sửa đổi thông tin sẽ được hiển thị trong danh sách trang quản lý tài khoản khách hàng
4.1.10 Quản lý sản phẩm
- Mô tả: Người quản lý đến giao diện quản lý sản phẩm, hệ thống tiếp nhận yêu cầu hiển thị tất cả sản phẩm có trong dữ liệu
- Tác nhân: Người quản lý
- Đầu vào: Sau khi khách hàng bấm vào giao diện quản lý sản phẩm với sản phẩm có tên “Laptop Apple MacBook Pro 2021 14’’ ” và chọn vào sản phẩm.
- Đầu ra: Người quản lý vào giao diện sản phẩm và kiểm tra thấy có dữ liệu sản phẩm - Nội dung: Người quản lí đăng nhập bằng tài khoản đã tạo trước, và chọn sản phẩm
muốn xem “Laptop Apple MacBook Pro 2021 14’’”, sau đó người quản lý sửa sản phẩm
- Kết quả đạt được: Thông tin sản phẩm vừa chọn hiển thị trên màn hình và hiển thị đã sửa sản phẩm thành công
4.1.11 Chức năng thêm sản phẩm
- Mô tả: Khi đến giao diện sản phẩm, người quản lý muốn thêm vào cho cửa hàng sản phẩm mới, loại sản phẩm mới hay nơi sản xuất mới. Người quản lý phải chọn vào [Thêm sản phẩm mới] với trang Sản Phẩm, hệ thống sẽ chuyển đến giao diện chính của người quản lý để tiến hành thêm sản phẩm mới.
- Tác nhân: Người quản lý
- Đầu vào: Người quản lý chọn vào [Thêm sản phẩm mới] với trang Sản Phẩm. Hệ thống tiếp nhận yêu cầu và chuyển đến giao diện đúng theo yêu cầu mà người quản lý yêu cầu, người quản lý điền đầy đủ thông tin vào các form nếu bỏ trống, và đồng thời chọn vào nút [Thêm] hệ thống sẽ thông báo “Không được bỏ trống nội dung này”.
- Đầu ra: Chuyển đến giao diện chính của người quản lý và đồng thời hiển thị dữ liệu vừa thêm lên danh danh sách.
- Nội dung: Người quản lý muốn thêm sản phẩm mới, loại sản phẩm mới. Người quản lý nhập đầy đủ thông tin và hợp lệ.
- Kết quả đạt được: Hệ thống trả về giao diện chính của người quản lý và hiển thị thêm dữ liệu vừa thêm vào danh sách.
4.1.12 Chức năng xóa sản phẩm
- Mô tả: Người quản lý chọn vào sản phẩm mà người quản lý muốn xóa trong giao diện quản lý sản phẩm. Hệ thống tiếp nhận yêu cầu và hệ thống xóa dữ liệu của sản phẩm. - Tác nhân: Người quản lý
- Đầu vào: Người quản lý chọn vào sản phẩm “Laptop Acer Swift 3” trong giao diện quản lý sản phẩm.
- Đầu ra: Hệ thống xóa dữ liệu sản phẩm có tên “Laptop Acer Swift 3”
- Nội dung: Người quản lý chọn vào sản phẩm “Laptop Acer Swift 3” trong giao diện quản lý sản phẩm. Hệ thống xóa dữ liệu sản phẩm có tên “Laptop Acer Swift 3”
- Kết quả đạt được: Dữ liệu sản phẩm có tên “Laptop Acer Swift 3” bị xóa ra khỏi dữ liệu.
4.1.13 Chức năng sửa thông tin sản phẩm
- Mô tả: Người quản lý chọn vào sản phẩm mà người quản lý muốn chỉnh sửa trong giao diện quản lý sản phẩm. Hệ thống tiếp nhận yêu cầu và hệ thống hiển thị dữ liệu của sản phẩm mà người quản lý yêu cầu.
- Tác nhân: Người quản lý
- Đầu vào: Người quản lý chọn vào sản phẩm “Laptop Dell Vostro 3405” trong giao diện quản lý sản phẩm.
- Đầu ra: Hệ thống sẽ cập nhật lại dữ liệu của sản phẩm có tên “Laptop Dell Vostro 3405 New”. (adsbygoogle = window.adsbygoogle || []).push({});
- Nội dung: Người quản lý chọn vào sản phẩm “Laptop Dell Vostro 3405”trong trang Sản Phẩm. Hệ thống sẽ cập nhật lại dữ liệu sản phẩm có tên “Laptop Dell Vostro 3405 New”
- Kết quả đạt được: Dữ liệu sản phẩm có tên “Laptop Dell Vostro 3405” đã được chỉnh sửa thành công.
4.1.14 Giỏ hàng
- Mô tả: Khách hàng đã đăng nhập vào giao diện các sản phẩm, và lựa chọn sản phẩm muốn thêm vào giỏ hàng. Tìm được sản phẩm vừa ý thì khách hàng chọn vào [Giỏ Hàng]. Hệ thống chuyển thông tin vào sản phẩm mà khách hàng vừa thêm vào giỏ hàng
- Tác nhân: Khách hàng
- Đầu vào: Khách hàng chọn sản phẩm có tên “Laptop Dell Vostro 3405” - Đầu ra: Chuyển đến giao diện giỏ hàng, thì sản phẩm đã được cập nhật
- Nội dung: Khách hàng chọn [Giỏ Hàng] với tên sản phẩm “Laptop Dell Vostro 3405”, hệ thống tiếp nhận và cập nhật dữ liệu đến giao diện giỏ hàng. Khách hàng chọn vào giao diện Giỏ Hàng thì thấy sản phẩm được cập nhật
- Kết quả đạt được: Sản phẩm “Laptop Dell Vostro 3405” được thêm vào trang Giỏ