Giới thiệu
Mục tiêu
Website giải quyết một số vấn đề như:
- Tiết kiệm thời gian đi đến cửa hàng để mua điện thoại nhưng vẫn đảm bảo được chất lượng của điện thoại
- Tiết kiệm chi phí, hoạt động không nghỉ 24/24 mà không cần đội ngũ nhân viên phục vụ
- Có thể tiếp cận nhiều khách hàng ở mọi lúc, mọi nơi
- Giảm được chi phí quảng cáo, marketing.
Giới hạn
- Website hoạt động tốt hầu hết trên các hệ điều hành windows và cả linux.
Thuật ngữ và từ viết tắt
Bảng 1 1Danh sách từ viết tắt
STT Thuật ngữ Mô tả
SEO, viết tắt của Tối ưu hóa công cụ tìm kiếm, là tập hợp các phương pháp nhằm nâng cao thứ hạng của website trên trang kết quả tìm kiếm (SERPs), thường là trên Google.
Quảng cáo, viết tắt là Ads
Bài tập nhóm môn Công nghệ phần mềm 5
Phát biểu bài toán
Chức năng
a Chức năng cung cấp thông tin
Khách hàng hiện nay thường tìm hiểu kỹ lưỡng các thông tin về sản phẩm và dịch vụ như nguồn gốc, mẫu mã, giá bán, chế độ bảo hành, chính sách giao hàng và địa chỉ nhà cung cấp trước khi quyết định đặt hàng Do đó, một trang web bán hàng chuyên nghiệp cần phải có chức năng cung cấp đầy đủ và rõ ràng các thông tin này Bên cạnh đó, chức năng tìm kiếm cũng là yếu tố quan trọng giúp khách hàng dễ dàng tìm thấy sản phẩm mà họ cần.
Website giống như một cửa hàng ảo, nơi công ty giới thiệu sản phẩm và dịch vụ đến khách hàng Tuy nhiên, với nhiều sản phẩm tại các công ty lớn và ngành thời trang, khách hàng có thể cảm thấy bối rối Để khắc phục điều này, chức năng tìm kiếm cần được tích hợp trong thiết kế website Module tìm kiếm giúp khách hàng nhanh chóng tìm thấy sản phẩm hoặc dịch vụ cần thiết chỉ với một vài từ khóa, có thể có dấu hoặc không có dấu Chức năng giỏ hàng cũng đóng vai trò quan trọng trong trải nghiệm mua sắm trực tuyến.
Chức năng giỏ hàng, hay còn gọi là chức năng mua hàng online, là một đặc điểm nổi bật trên các website thương mại điện tử chuyên nghiệp có dịch vụ giao hàng tận nơi Chức năng này cho phép người mua dễ dàng đặt hàng yêu thích bằng cách cung cấp thông tin cá nhân như họ tên, địa chỉ, số điện thoại và các yêu cầu khác liên quan đến đơn hàng Sau khi thông tin được nhập, nó sẽ được gửi đến người bán để thực hiện các bước kiểm tra đơn hàng, giao hàng và thanh toán.
Thanh toán trực tuyến, hay còn gọi là thanh toán online, là phương thức thanh toán thông qua tài khoản ngân hàng hoặc ví tiền ảo trên các website thương mại được Nhà nước cấp phép Đây là chức năng thiết yếu cho các website bán hàng chuyên nghiệp, đặc biệt là những trang lớn Hầu hết các công ty hiện nay đều sử dụng hình thức chuyển khoản qua ngân hàng để trả lương cho nhân viên, giúp khách hàng dễ dàng thực hiện giao dịch.
Bài tập nhóm môn Công nghệ phần mềm 6 đề cập đến việc rút tiền và thanh toán hàng hóa mà không cần xếp hàng tại cây ATM hoặc quầy giao dịch Mặc dù chức năng thanh toán online qua các trung gian như Ngân Lượng hay Bảo Kim mang lại tiện lợi, nhưng cũng có thể gây phiền phức cho người dùng Do đó, việc tích hợp chức năng thanh toán online trên các website bán hàng phụ thuộc vào quy mô kinh doanh và chiến lược bán hàng của từng doanh nghiệp Ngoài ra, chức năng hỗ trợ trực tuyến (chat online) cũng là một yếu tố quan trọng cần xem xét.
Hiện nay, nhiều website công ty thu hút lượng truy cập lớn nhưng khách hàng vẫn chưa hiểu rõ nhu cầu và thông tin sản phẩm cần mua Phần mềm tư vấn trực tuyến (live chat) sẽ là giải pháp hiệu quả, giúp nhân viên giao tiếp trực tiếp với khách hàng, giải đáp thắc mắc và giới thiệu sản phẩm, dịch vụ phù hợp ngay tại văn phòng Điều này không chỉ nâng cao trải nghiệm khách hàng mà còn hỗ trợ quản cáo hiệu quả.
Để tối ưu hóa lợi ích từ website bán hàng và thu hút nhiều khách hàng tiềm năng, bạn cần triển khai các chiến dịch quảng cáo trực tuyến như Google Adwords, SEO và Facebook Ads Một website bán hàng được thiết kế chuẩn SEO và tích hợp đầy đủ các chức năng như like và share trên mạng xã hội sẽ hỗ trợ hiệu quả cho việc SEO và quảng cáo online, giúp tăng lượng truy cập vào website.
Bài tập nhóm môn Công nghệ phần mềm 7
Đối tượng người dùng
Bảng 2 1 Danh sách các người dùng
STT Lớp người dùng Mô tả
1 Quản lý(admin) Người quản lý toàn bộ hệ thống website bán điện thoại
2 Nhân viên chăm sóc khách hàng
Hỗ trợ trực tuyến, giải đáp thắc mắc mà cung cấp thêm thông tin cần thiết cho khách hàng
3 Nhân viên giao hàng Người đi giao hàng căn cứ vào thông tin tên hệ website dể giao điện thoại tận nơi cho khách hàng
4 Khách hàng Tham gia mua hàng trược tuyến trên website
Môi trường hoạt động đích
- Website hoạt động đa nên tản dựa trên mô hình client server: web browser hỗ trợ HTML5 như chrome, cốc cốc, enternet explorer … Server như apache, nginx, lightTTPD
Các ràng buộc thiết kế và triển khai
Website sẽ được xây dựng hoàn chỉnh để bán điện thoại bằng cách sử dụng các ngôn ngữ lập trình như HTML, CSS, Javascript, PHP và hệ quản trị cơ sở dữ liệu MySQL.
Bài tập nhóm môn Công nghệ phần mềm 8
Hình 3.1 Cung cấp thông tin điện thoại
Yêu cầu phần mềm
Đặc tả yêu cầu chức năng
- Chức năng cung cấp thông tin sẽ cung cấp thông tin về điện thoại mà khách hàng đang xem ví dụ như: giá tiền, ram, dung lượng pin …
- Chức năng tìm kiếm cho phép khách hàng tìm kiếm thông tin về dòng điện thoại, dung lượng ram, hãng sản xuất, dung lương pin…
Bài tập nhóm môn Công nghệ phần mềm 9
Hình 3 2 Giao diện tìm kiếm
Hình 3.3 Lựa chọn theo nhu cầu
Bài tập nhóm môn Công nghệ phần mềm 10
Chức năng giỏ hàng hiển thị toàn bộ sản phẩm mà khách hàng đã chọn, cho phép họ xóa sản phẩm hoặc tiếp tục mua sắm và thanh toán Khách hàng cũng có thể điều chỉnh số lượng hàng hóa theo nhu cầu của mình.
Hình 3.4 Chức năng giỏ hàng
Bài tập nhóm môn Công nghệ phần mềm 11
- Chức năng hỗ trợ trược tuyến sẽ hỗ trợ trực tuyến cho khách hàng thông qua số điện thoại đường dây nóng
Hình 3.5 Hỗ trợ qua đường dây nóng
Bài tập nhóm môn Công nghệ phần mềm 12
Chức năng hỗ trợ qua nhắn tin trên fanpage của website cho phép khách hàng gửi thắc mắc về sản phẩm một cách trực tiếp Đội ngũ fanpage sẽ nhanh chóng phản hồi tin nhắn để tư vấn và giải đáp mọi câu hỏi của khách hàng.
Hình 3.6 Nút chat với fanpage
Chức năng quảng cáo sẽ hợp tác với khách hàng để quảng bá sản phẩm của họ, với các mẫu quảng cáo có thể được treo dọc hai bên hoặc trong phần thông tin khuyến mãi Nếu có nhiều quảng cáo hơn, một cửa sổ quản lý sẽ hiển thị khi khách hàng truy cập vào website.
Bài tập nhóm môn Công nghệ phần mềm 13
Use Case
Sơ đồ use case thể hiện các mối quan hệ, tương tác của từng use case
Hình 3.7 Sơ đồ use case
Bài tập nhóm môn Công nghệ phần mềm 14
3.2.2 Danh sách các Use Case chính
Bảng 3 8 Danh sách use case
Mã Tên use case Ý nghĩa/Ghi chú
1 Đăng nhập Cho phép ngưười dùng đăng nhập vào hệ thống
2 đặt hàng Khách hàng tiến hành đặt hàng theo ý muốn
3 Tìm kiếm điện thoại Khách hàng tìm điện thoại theo ý thích
4 Phản hồi, đánh giá Khách hàng đánh giá về tình trạng, cách thức hoạt động chủa website
5 Cập nhật điện thoại mới Nhân viên cập nhận thêm điện thoại vào website
6 Nhận hàng Nhân viên nhận đơn hàng của khách vừa đặt xong
7 Duyệt đơn hàng Nhân viên duyệt đơn hàng xong sẽ tiến hành giao hàng cho khách
Nhân viên quản trị có quyền đăng nhập vào hệ thống để theo dõi đơn hàng, kiểm tra tình trạng website, cập nhật thông tin điện thoại và phê duyệt đơn hàng.
9 Thống kê doanh thu Nhân viên sẽ thống kê doanh thu theo các mốc thời gian cụ thể như: theo ngày, theo tháng và theo quý
3.2.3 Danh sách các tác nhân
Bảng 3 9 Danh sách các tác nhân
Mã Tác nhân Mã Use case
1 Người mua hàng(khách hàng) 1,2,3,4
Bài tập nhóm môn Công nghệ phần mềm 15
3.2.4.1 Use case 3, tìm kiếm điện thoại
Tên Tìm kiếm điện thoại
Tóm tắt Cho phép người dùng tìm kiếm thông tin điện thoại
Tác nhân Người mua hàng (khách hàng)
1 Khi khách hàng đăng nhập vào website sẽ có thanh tìm kiếm, bấm vào đó để tìm điện thoại theo nhu cầu
2 Khi tìm kiếm thì khách hàng có thể tìm kiếm theo giá, theo cấu hình, như mong muốn
3 Trong quá trình tìm kiếm nếu thấy thích hợp thì có thể đặt mua và kết thúc quá trình tìm kiếm, hoặc không có điện thoại vừa ý thì có thể kết thúc quá trình tìm kiếm
Trạng thái hệ thống khi bắt đầu Use-case
Trước khi tìm kiếm, khách hàng có thể truy cập vào website mà không cần đăng nhập Tuy nhiên, để thực hiện giao dịch mua điện thoại, việc đăng nhập vào website là bắt buộc để tiến hành thanh toán.
Trạng thái hệ thống sau khi
Khi tìm kiếm sẽ có 2 truờng hợp xảy ra:
Trường hợp 1: tìm kiếm có điện thoại theo nhu cầu
- Khi tìm kiếm sẽ cho ra 1 loạt kết quả có liên quan đến nhu cầu của nguời dùng
Trường hợp 2: Không có điện thoại theo yêu cầu
Khi khách hàng thực hiện tìm kiếm mà không tìm thấy điện thoại phù hợp, hệ thống sẽ hiển thị thông báo: “Không tìm thấy sản phẩm cần tìm.” Trong tình huống này, khách hàng có thể lựa chọn thực hiện một tìm kiếm khác hoặc thoát khỏi website nếu họ muốn.
[Mô tả rõ tình trạng hệ thống sau khi thực hiện Use-case (bao gồm cả trường hợp Use-case thực hiện thành công, hoặc thất bại)]
Dòng sự kiện mở rộng (phụ)
Khi tìm kiếm điện thoại, bạn có thể phân loại theo nhiều tiêu chí như giá điện thoại, hiệu điện thoại và cấu hình điện thoại Để thực hiện việc tìm kiếm, khách hàng có thể lựa chọn tìm theo giá, theo thương hiệu hoặc theo thông số kỹ thuật của điện thoại.
Bài tập nhóm môn Công nghệ phần mềm 16
Tóm tắt Cho phép người dùng đăng nhập vào website để mua điện thoại
Tác nhân Người mua hàng (khách hàng)
1 Khi khách hàng chọn đăng nhập vào website sẽ có ô nhập thông tim tài khoảng mật khẩu, nếu chưa có tài khoảng thì chọn vào phần đăng kí tài khoản
2 Sau khi đăng kí được tài khoản khách hàng có thể chọn thay đổi mật khẩu bằng cách cập nhật tài khoản
3 Cập nhật tài khoản thành công sẽ quay về trang chủ của website Tại đây khách hàng có thể thực hiện các thao tác tìm kiếm, đặt hàng …
4 Nếu sau khi cập nhật tài khoản xong khách hàng không muốn tìm điện thoại để mua thì có thể thực hiện thao tác đăng xuất và tắc website
Trạng thái hệ thống khi bắt đầu Use-case
Trước khi tìm kiếm sản phẩm, khách hàng cần truy cập vào website mà không cần đăng nhập Mặc dù có thể tìm kiếm trực tiếp, để thực hiện giao dịch mua điện thoại, khách hàng bắt buộc phải đăng nhập vào website để tiến hành thanh toán.
Trạng thái hệ thống sau khi
Trong quá trình đăng nhập, hệ thống sẽ kiểm tra thông tin tài khoản Nếu đăng nhập thành công, người dùng sẽ được chuyển đến trang chủ để thực hiện các thao tác như tìm kiếm và mua hàng Ngược lại, nếu thông tin đăng nhập không chính xác, khách hàng cần yêu cầu cấp lại mật khẩu hoặc tạo tài khoản mới để tiếp tục mua sắm.
Dòng sự kiện mở rộng (phụ) Đăng nhập là yêu cầu thiết yếu, bao gồm các sự kiện phụ như cập nhật và đăng ký tài khoản Trong trường hợp đăng ký tài khoản, khách hàng có thể chọn đăng ký hoặc không, vì có thể họ đã có tài khoản trước đó Đối với cập nhật tài khoản, khách hàng có thể thực hiện việc đổi hoặc cấp lại mật khẩu theo nhu cầu của mình Do đó, việc thực hiện các hành động này hoàn toàn phụ thuộc vào sự lựa chọn của khách hàng.
Bài tập nhóm môn Công nghệ phần mềm 17
3.2.3.3 Use case 7, duyệt đơn hàng
Tóm tắt Cho phép nhân viên quản lý đăng nhập vào hệ thống bằng tài khoản quản trị (admin) để kiểm tra và duyệt đơn hàng của khách hàng
1 Trước tiên nhân viên cần phải đăng nhập vào website với tài khoản có quyền quản trị (admin)
2 Sau đó chọn vào mục duyệt đơn hàng Trong dó gồm có: Xem danh sách đơn hàng, xem chi tiết đơn hàng, cập nhật trạng thái giỏ hàng
3 Tiếp đến chọn vào mục cập nhật trạng thái giỏ hàng để tiến hành duyệt đơn hàng cho khách
4 Sau khi duyệt đơn hàng thành công nhân viên sẽ trở về mục xem chi tiết đơn hàng để kiểm tra một lần nữa
5 Sau khi kiểm tra không xảy ra lỗi nhân viên sẽ tiếp tục duyệt các đơn hàng khác
Trạng thái hệ thống khi bắt đầu Use-case
Để duyệt đơn hàng, nhân viên cần đăng nhập bằng tài khoản có quyền quản trị (admin) Nếu tài khoản không có quyền này, việc duyệt đơn hàng sẽ không thể thực hiện được.
Trạng thái hệ thống sau khi
Khi nhân viên tiến hành duyệt đơn hàng sẽ có 2 trường hợp xảy ra: Trường hợp 1:
Khi đơn hàng được duyệt thành công, website sẽ hiển thị thông tin đơn hàng đã được xử lý kèm theo thông báo “đã xử lý” Điều này có nghĩa là khách hàng đã thanh toán hóa đơn trước đó và đang chờ nhận hàng.
Đơn hàng sẽ bị từ chối nếu khách hàng chưa thanh toán hóa đơn, dẫn đến thông báo "chưa xử lý" hiển thị trong giỏ hàng Để tiếp tục mua sắm, khách hàng cần thanh toán hóa đơn; nếu không còn muốn mua sản phẩm, họ có thể chọn hủy đơn hàng.
Dòng sự kiện mở rộng (phụ)
Trong quá trình duyệt đơn hàng phải sẽ có 2 sự lụa chọn:
- Có thể (extend) chọn vào mục chưa xử lý do khách hàng chưa thanh toán
-Có thể(extend) chon vào mục đã xử lý do khách hàng đã thanh toán trước đó.
Đặc tả yêu cầu phi chức năng
Để đảm bảo chất lượng, sản phẩm cần tương thích với cả trình duyệt web trên di động và máy tính, cho phép thao tác dễ dàng và nhanh chóng Ngoài ra, khả năng nâng cấp và cập nhật thêm tính năng mới cũng là yếu tố quan trọng.
Bài tập nhóm môn Công nghệ phần mềm 18 cho phép nhiều người truy cập cùng lúc mà không bị nghẽn mạng
- Yêu cầu hệ thống: Tính an toàn cao, bảo mật thông tin của khách hàng, dể dàng quản lý, dễ cập nhật hàng hoá.
Thiết kế phần mềm
Thiết kế kiến trúc (thiết kế tổng thể)
Ở mô hình Client/Server này gồm có các thành phần:
+ Client bao gồm các thiết bị đầu cuối như: smartphone, laptop, máy tính bảng, …
+ Server bao gồm nơi chứa source code, ngôn ngữ xử lý như: php, node js và apache, nginx để chạy web server
+ Server Database dùng để lưu trử dữ liệu Ở dây tách database thành một server mới với mục đích bảo mật hơn
+ Giao thức kết nỗi giữ Client và Server thường là TPC/IP, HTTP(S) …
Hình 4.1 Mô hình Client/Server
Bài tập nhóm môn Công nghệ phần mềm 19
Client (máy khách) Gửi yêu cầu thông qua các giao thức
Giao thức TCP/IP, HTTP(S)
Máy chủ luôn sẵn sàng chấp nhận và phản hồi tất cả các yêu cầu hợp lệ từ mọi nơi trên Internet, sau đó gửi kết quả trở lại máy tính đã gửi yêu cầu.
Database Chứa dữ liệu và cung cấp cho máy chủ khi cần thiết
Thiết kế đối tượng
Bài tập nhóm môn Công nghệ phần mềm 20
1 Khách hàng Người mua điện thoại của website
2 Chi tiết hoá đơn Ghi toàn bộ thông tin của hoá đơn như: Ngày lập, mã hoá đơn, mã hàng
3 Điện thoại Dối tượng định danh hàng hoá
4 Hãng sản xuất Hãng sản xuất (công ty) của điện thoại
5 Hoá đơn Chứa thông tin mã hàng, giá sản phẩm, …
6 Bằng cấp Bằng cấp của nhân viên
7 Nhân viên Chứa thông tin cá nhân của nhân viên
Thiết kế dữ liệu
4.3.1 Cấu trúc lưu trữ dữ liệu
- Cấu trúc bản khách hàng
- Cấu trúc bảng nhà sản xuất
STT Tên thuộc tính Diễn giải Kiểu dữ liệu Miền giá trị Ràng buộc
1 mansx Mã nhà sản xuất Varchar 5 Khoá chính
2 tennsx Tên nhà sản xuất Varchar2 100
- Cấu trúc bảng bằng cấp
STT Tên thuộc tính Diễn giải Kiểu dữ liệu Miền giá trị Ràng buộc
1 makh Mã khách hàng Varchar 5 Khoá chính
6 sdt số điện thoại Char 10 Duy nhất
7 cccd Căn cước công dân Char 10 Duy nhất
Bài tập nhóm môn Công nghệ phần mềm 21
STT Tên thuộc tính Diễn giải Kiểu dữ liệu Miền giá trị Ràng buộc
1 Mabc Mã bằng cấp Varchar 5 Khoá chính
2 tenbc Tên bằng cấp Varchar2 100
- Cấu trúc bảng điện thoại
STT Tên thuộc tính Diễn giải Kiểu dữ liệu Miền giá trị Ràng buộc
1 MADT Mã bằng cấp Varchar 5 Khoá chính
2 TENDT Tên bằng cấp Varchar2 100
3 NGAYSX Ngày sản xuất Date
6 MANSX Mã sản xuất Varchar 5 Khóa ngoại
Bài tập nhóm môn Công nghệ phần mềm 22
- Cấu trúc bảng nhân viên
STT Tên thuộc tính Diễn giải Kiểu dữ liệu Miền giá trị Ràng buộc
1 manv Mã nhân viên Varchar 5 Khoá chính
2 hotennv Họ tên nhân viên Varchar2 100
3 gioitinh Giới tính nhân viên Varchar2 3
6 ngayvaolam Ngày vào làm Date
7 cccd Căn cước công dân Char 12
8 mabc Mã bằng cấp Varchar2 5 Khóa ngoại
- Cấu trúc bảng hoá đơn
STT Tên thuộc tính Diễn giải Kiểu dữ liệu Miền giá trị Ràng buộc
1 mahd Mã hóa đơn Varchar 5 Khoá chính
2 ngaylap Ngày lập hóa đơn Date
4 manv Mã nhân viên Varchar2 5 Khóa ngoại
5 makh Mã khách hàng Varchar2 5 Khóa ngoại
Bài tập nhóm môn Công nghệ phần mềm 23
- Cấu trúc bảng chi tiết hoá đơn
STT Tên thuộc tính Diễn giải Kiểu dữ liệu Miền giá trị Ràng buộc
1 mahd Mã hóa đơn Varchar 5 Khóa ngoại
2 madt Mã điện thoại Varchar 5 Khóa ngoại
3 ngaydh Ngày lập hóa đơn
Hình 4.3 Sơ đồ quan hệ
Bài tập nhóm môn Công nghệ phần mềm 24
- Dữ liệu mẫu cho bảng khách hàng
Họ tên Giới tính Ngày sinh Địa chỉ Số điện thoại
Căn cước công dân/ chứng minh nhân dân
86 Phố Bửu Dung Cảnh, Phường 2, Huyện Hạ Chinh
Xã Hà, Quận Lương Kim Tú Tuyên Quang
- Dữ liệu mẫu cho bản nhà sản xuất
Tên nhà sản xuất Địa chỉ
Bitexco Financial Tower, 2 Hải Triều, Bến Nghé, Quận
1, Thành phố Hồ Chí Minh
APL56 Apple 72B Đinh Tiên Hoàng, P Đa Kao, Quận 1, Thành phố
- Dữ liệu mẫu cho bảng bằng cấp
Mã bằng cấp Tên bằng cấp
BC001 Trung học Cơ Sở
BC002 Trung học Phổ Thông
- Dữ liệu mẫu cho bảng điện thoại
Mã điện thoại Tên điện thoại Ngày sản xuất Số lượng Đơn giá Mã nhà sản xuất
Bài tập nhóm môn Công nghệ phần mềm 25
- Dữ liệu mẫu cho bảng nhân viên
Quê quán Ngày sinh Ngày vào làm
Căn cước công dân/chức minh nhân dân
8, Quận Mi Đậu Đồng Tháp
Thôn Chương Phúc, Quận Hoan
- Dữ liệu mẫu cho bảng hoá đơn
Mã hoá đơn Ngày lập Trị giá Mã nhân viên Mã khách hàng
- Dữ liệu mẫu cho bảng chi tiết hoá đơn
Mã hoá đơn Mã điện thoại Ngày lập hoá đơn
Bài tập nhóm môn Công nghệ phần mềm 26
Thiết kế giao diện
Sơ đồ tương tác giữa các màn hình trên website cho thấy mỗi màn hình đảm nhiệm một nhiệm vụ cụ thể, như màn hình đăng ký chỉ cho phép người dùng tạo tài khoản.
Màn hình có thể dễ dàng chuyển đổi thông qua nút liên kết, với màn hình chính cho phép người dùng chuyển đổi giữa các màn hình ngoại trừ màn hình quản trị Màn hình quản trị chỉ cho phép nhân viên đăng nhập bằng tài khoản quản trị (admin) để truy cập.
Hình 4.4 Sơ đồ màn hình
Bài tập nhóm môn Công nghệ phần mềm 27
STT Tên màn hình Ý nghĩa/Ghi chú
1 Màn hình đăng kí Khách hàng đăng kí tài khoản
2 Màn hình đăng nhập Đăng kí xong khách hàng sẽ đăng nhập vào website để mua điện thoại Nhân viên sẽ đăng nhập vào để quản lý
3 Màn hình chính (trang chủ)
Giao diện đầu tiên khi khách hàng vào website, ở trang chủ sẽ hiển thị toàn bộ cá điều khiển cho khách hàng thao tác
4 Màn hình tìm kiếm Khách hàng tìm điện thoại phù hợp với nhu cầu
5 Màn hình sản phẩm (điện thoại) Hiển thị thông tin điện thoại
6 Màn hình đặt hàng Hiển thị bảng nhập cho khách hàng điền thông tin cá nhân như: Họ tên, địa chỉ, số điện thoại
7 Màn hình giỏ hàng Giao diện giỏ hàng hiển thị các hàng hoá mà khách hàng đã đặt
8 Màn hình thanh toán Hiển thị các hình thức thanh toán cho khách hàng lựa chọn
9 Màn hình quản trị Hiển thị các điều kiển cho nhân viên thao tác quản lý
10 Màn hình duyệt đơn hàng Nhân viên kiểm tra và duyệt đơn hàng
11 Màn hình cập nhật sản phẩm
Nhân viên cập nhật thêm điện thoại mới, thông tin về sản phẩm sắp ra mắt
12 Màn hình quản lý bài viết Nhân viên quản lý các bài viết về kiến thức sử dụng điện thoại
4.4.2 Mô tả chi tiết các màn hình giao diện
Trên website có sử dụng 1 số thuộc tính như:
- Input: Dùng cho khách hàng nhập thông tin vào
Nút bấm cho phép khách hàng hiển thị thông tin điện thoại khi tìm kiếm và kiểm tra giỏ hàng, giúp họ dễ dàng quản lý đơn hàng vừa đặt.
- Lable: Hiển thị một số thông báo của website cho người dùng thấy
- Images: HIển thị hình ảnh của điện thoại, logo của website
- ComboBox: Hiển thị hàng loạt danh mục cho khách hàng chọn vào mục cần thiết, tiết kiệm thời gian tìm kiếm
Bài tập nhóm môn Công nghệ phần mềm 28
Giao diện chính của trang web bao gồm các nút quan trọng như đăng ký, đăng nhập, tìm kiếm, giỏ hàng, danh mục các hãng điện thoại, thông tin quảng cáo, liên hệ và tin tức.
+ Nút đăng kí: Cho phép người dùng đăng kí tài khoản để truy cập vào website + Nút đăng nhập: Cho phép người dùng
+ Nút tìm kiếm: Dùng cho người dùng tìm kiếm thông tin điện thoại
+ Nút giỏ hàng: Cho người dùng kiểm tra hàng đã đặt trước đó trạng thái như thế nào đã xử lý hay chưa
+ Danh mục điện thoại: Khi ấn vào sẽ lọc theo từng hãng điện thoại mà khách hàng ấn vào
Thông tin quảng cáo bao gồm các chi tiết về khuyến mãi và sản phẩm Nút liên hệ giúp khách hàng dễ dàng truy cập trang liên hệ, nơi hiển thị địa chỉ, số điện thoại và email của cửa hàng.
Hình 4.5 Màn hình chính (trang chủ)
Bài tập nhóm môn Công nghệ phần mềm 29
Khi bạn nhấn vào nút đăng ký trên màn hình chính, một biểu mẫu sẽ hiện ra yêu cầu bạn nhập thông tin cá nhân để tạo tài khoản.
Hình 4.6 Biễu mẫu đăng kí tài khoản
Sau khi nhập thông tin xong ấn đăng kí, đăng kí thàng công sẽ tự động đưa về trang chủ với hình thức đã đăng nhập sẵn
Hình 4.7 Màn hình sau khi đăng kí
- Khi khách hàng ấn vào giỏ hàng của mình, trong giỏ hàng sẽ hiển thị mặt hàng
Bài tập nhóm môn Công nghệ phần mềm 30 mà khách hàng vừa mới đặt trước đó
- Trong giao diện giỏ hàng có một số điều khiển như:
Thanh toán giỏ hàng cho phép khách hàng lựa chọn các loại ví điện tử để thanh toán Khách hàng cần nhập thông tin cần thiết hoặc có thể thực hiện thanh toán nhanh chóng bằng cách quét mã QR code.
+ Nút xoá: Xoá mặt hàng vừa thêm vào giỏ hàng
+ Nút cập nhật giỏ hàng: Cho phép người dùng cập nhận những thay đổi về số lượng sản phẩm, xoá mặt hàng vừa thêm vào
+ Nút đăng xuất: Đăng xuất khỏi khỏi chức năng giỏ hàng và trở về trang chủ lúc chưa đăng nhập tài khoản
Hình 4.8 Giao diện giỏ hàng
Bài tập nhóm môn Công nghệ phần mềm 31
Thiết kế kiểm thử
4.5.1 Danh sách các Test case
STT Tên Test case Đối tượng Test Ý nghĩa/Ghi chú
Giao diện đăng nhập thành công
Khi người dùng đăng nhập, họ cần nhập tài khoản và mật khẩu Quá trình đăng nhập sẽ thành công khi thông tin được nhập chính xác, và sau đó, người dùng sẽ được chuyển trở lại trang chủ (màn hình chính).
Giao diện đăng nhập thất bại
Khi bạn đăng nhập, hệ thống sẽ yêu cầu bạn nhập tài khoản và mật khẩu Nếu một trong hai trường thông tin này bị bỏ trống hoặc nhập sai, quá trình đăng nhập sẽ không thành công và bạn sẽ cần phải thử lại.
Giao diện tìm kiếm thành công
Tìm kiếm thành công sẽ hiển thị thông tin điện thoại như nhu cầu của khách hàng
Giao diện tìm kiếm thất bai
Khi tìm kiếm thông tin thất bại giao diện tìm kiếm sẽ hiển thị không có thiết bị cần tìm
Nhân viên kiểm tra hàng hoá nếu đã thanh toán thì cập nhật duyệt thành công đơn hàng
Duyệt hàng không thành công
Nhân viên kiểm tra hàng sẽ cập nhật trạng thái đơn hàng không thành công nếu khách hàng chưa thanh toán hoặc nếu khách hàng thêm nhiều hàng hóa vào giỏ nhưng không có ý định mua.
Bài tập nhóm môn Công nghệ phần mềm 32
Test case Đăng nhập thành công
Related Use case Cập nhật tài khoản, Kiểm tra đăng nhập, đăng kí tài khoản, đăng xuất Context
Để đăng nhập thành công, hãy nhập chính xác thông tin tài khoản và mật khẩu đã đăng ký trước đó, ví dụ: tài khoản "admin" với mật khẩu "123456" Sau khi nhập đúng, bạn sẽ được chuyển đến trang chủ.
Bước 1: Ấn vào nút đăng nhập trên webssite
Bước 2: Nhập thông tin tài khoản và mật khẩu
Bước 3: Ấn nút đăng nhập
Test case Đăng nhập thất bại
Cập nhật tài khoản, Kiểm tra đăng nhập, đăng kí tài khoản, đăng xuất
Input Data Nhập tài khoản mật khẩu sai để kiếm tra tính xát thực, đinh danh của website Ví dụ: Tài khoản là admin, mật khẩu ()
Expected Output Đăng nhập thất bại và trở về giao diện đăng nhập
Bước 1: Ấn vào nút đăng nhập trên webssite
Bước 2: Nhập thông tin tài khoản và mật khẩu
Bước 3: Ấn nút đăng nhập
Bước 4: Trở về giao diện đăng nhập, và làm lại từ bước 2 đến khi tài khoản mật khẩu đúng sẽ chuyển về trang chủ
Bài tập nhóm môn Công nghệ phần mềm 33
Test case Tìm kiếm thành công
Related Use case Tìm kiếm theo giá, tìm kiếm theo hiệu điện thoại, tìm kiếm theo cấu hình điện thoại
Input Data Nhập thông tin điện thoại cần tìm Ví dụ: Samsung A32 128GB Expected Output Tìm kiếm thành công, hiển thị thông tin điện thoại vừa tìm được
Bước 1: Ấn vào thanh tìm kiếm trân website
Bước 2: Nhập thông tin điện thoại cần tìm
Bước 3: Ấn nút tìm kiếm
Bước 4: Hiển thị thông tin điện thoại vừa tìm được
4.5.1.4 Tìm kiếm không thành công
Test case Tìm kiếm thất bại
Related Use case Tìm kiếm theo giá, tìm kiếm theo hiệu điện thoại, tìm kiếm theo cấu hình điện thoại
Input Data Nhập thông tin điện thoại cần tìm Ví dụ: Samsung A33 128GB
Expected Output Tìm kiếm không thành công, hiển thị thông báo không có điện thoại cần tìm
Bước 1: Ấn vào thanh tìm kiếm trân website
Bước 2: Nhập thông tin điện thoại cần tìm
Bước 3: Ấn nút tìm kiếm
Bước 4: Hiển thị thông báo không có điện thoại vừa tìm
Bước 5: Quay lại bước 1 đến khi tìm được điện thoại như ý hoặc không tìm nữa
Bài tập nhóm môn Công nghệ phần mềm 34
Test case Duyệt đơn hàng thất bại
Related Use case Cập nhật trạng thái giỏ hàng, xem chi tiết hoá đơn, xem danh sách đơn hàng
Context Đăng nhập với quyền quản trị (admin)
Input Data cập nhật trạng thái đã xử lý
Expected Output Tìm kiếm không thành công, hiển thị thông báo không có điện thoại cần tìm
Bước 1: Ấn vào thanh tìm kiếm trân website
Bước 2: Nhập thông tin điện thoại cần tìm
Bước 3: Ấn nút tìm kiếm
Bước 4: Hiển thị thông báo không có điện thoại vừa tìm
Bước 5: Quay lại bước 1 đến khi tìm được điện thoại như ý hoặc không tìm nữa.
Cài đặt và triển khai phần mềm
- Sử dụng ngôn ngữ HTML5, CSS3, botstrap, php, hệ quản trị MySql
Test case Duyệt đơn hàng thành công
Related Use case Cập nhật trạng thái giỏ hàng, xem chi tiết hoá đơn, xem danh sách đơn hàng
Context Đăng nhập với quyền quản trị (admin)
Input Data cập nhật trạng thái đã xử lý
Expected Output Tìm kiếm không thành công, hiển thị thông báo không có điện thoại cần tìm
Bước 1: Ấn vào thanh tìm kiếm trân website
Bước 2: Nhập thông tin điện thoại cần tìm
Bước 3: Ấn nút tìm kiếm
Bước 4: Hiển thị thông báo không có điện thoại vừa tìm
Bước 5: Quay lại bước 1 đến khi tìm được điện thoại như ý hoặc không tìm nữa
Bài tập nhóm môn Công nghệ phần mềm 35