CHƯƠNG 4 THIẾT KẾ VÀ XÂY DỰNG CHƯƠNG TRÌNH
4.1 Thiết kế giao diện website
- Quản lý tài khoản Đăng nhập
Giao diện
Hình 4. 1 Thiết kế giao diện đăng nhập.
Các thành phần trong giao diện
Bảng 4. 1 Các thành phần trong giao diện đăng nhập
Thành phần Mô tả thành phần Ràng buộc
Username kiểu textbox Nhập tên username Khơng có Password kiểu password Nhập mật khẩu Khơng có Nút ĐĂNG NHẬP kiểu
submit
Dùng để xác nhận hành vi đăng nhập
- Nếu không nhập dữ liệu cho 2 thành phần trên thì thơng báo đăng nhập thất bại
Thêm tài khoản Giao diện
Hình 4. 2 Thiết kế giao diện thêm tài khoản.
Các thành phần trong giao diện
Bảng 4. 2 Các thành phẩn trong giao diện thêm tài khoản
Thành phần Mô tả thành phần Ràng buộc
Tên kiểu textbox Nhập tên đầy đủ của tài khoản thêm mới
Bắt buộc phải nhập và độ dài từ 8 kí tự trở lên Username kiểu textbox Nhập tên username Bắt buộc phải nhập Password kiểu password Nhập mật khẩu Bắt buộc phải nhập và độ
dài từ 5 kí tự trở lên Nhập lại password kiểu
password
Nhập lại mật khẩu Bắt buộc phải nhập và giống mật khẩu đã nhập trước đó
Quyền kiểu checkbox Phân quyền cho tài khoản - Khơng có Nút THÊM MỚI kiểu
submit
Dùng để xác nhận hành vi thêm mới tài khoản
- Kiểm tra các ràng buộc của phần nhập trước đó đúng định dạng và ràng buộc mới thực hiện yêu
cầu thêm mới
- Màu nút là màu đỏ Nút HỦY BỎ kiểu reset Dùng để xác nhận hành vi
hủy bỏ thêm mới tài khoản
- Màu nút là màu trắng
Sửa tài khoản Giao diện
Hình 4. 3 Thiết kế giao diện sửa tài khoản.
Các thành phần trong giao diện
Bảng 4. 3 Các thành phần trong giao diện sửa tài khoản
Thành phần Mô tả thành phần Ràng buộc
khoản thêm mới phải nhập và độ dài từ 8 kí tự trở lên
Username kiểu textbox Nhập tên username Nếu thay đổi thì bắt buộc phải nhập
Password kiểu password Nhập mật khẩu Nếu thay đổi mật khẩu thì mật khẩu mới phải có độ dài từ 5 trở lên
Nhập lại password kiểu password
Nhập lại mật khẩu Bắt buộc phải nhập nếu có thay đổi mật khẩu và giống mật khẩu mới đã nhập trước đó
Quyền kiểu checkbox Phân quyền cho tài khoản - Khơng có Nút CẬP NHẬP kiểu
submit
Dùng để xác nhận hành vi chỉnh sửa tài khoản
- Kiểm tra các ràng buộc của phần nhập trước đó đúng định dạng và ràng buộc mới thực hiện yêu cầu cập nhật
- Màu nút là màu đỏ Nút HỦY BỎ kiểu reset Dùng để xác nhận hành vi
hủy bỏ chỉnh sửa tài khoản
- Màu nút là màu trắng
Xóa tài khoản Giao diện
Hình 4. 4 Thiết kế giao diện xóa tài khoản.
Các thành phần trong giao diện
Bảng 4. 4 Các thành phần trong giao diện xóa tài khoản
Thành phần Mô tả thành phần Ràng buộc
Nút thêm mới Thêm mới tài khoản nếu có yêu cầu
Nút danh sách Hiển thị danh sách tài khoản
Nút sửa ứng với mỗi tài khoản
Thực hiện chỉnh sửa tài khoản yêu cầu
Nút xóa ứng với mỗi tài khoản
Thực hiện xóa tài khoản yêu cầu
Khi kích nút xóa một tài khoản nào đó phải có thơng báo sau đó có chắc chắn muốn xóa khơng. Nếu chọn Ok thì thực hiện xóa, ngược lại khơng thực hiện u cầu
Hủy giao dịch Giao diện
Hình 4. 5 Thiết kế giao diện hủy giao dịch.
Các thành phần trong giao diện
Bảng 4. 5 Các thành phần trong giao diện hủy giao dịch
Thành phần Mô tả thành phần Ràng buộc
Nút danh sách Hiển thị danh sách giao dịch
Nút xem ứng với mỗi giao dịch
Thực hiện xem giao dịch
Nút xóa ứng với mỗi giao dịch
Thực hiện xóa giao dịch u cầu
Khi kích nút xóa một giao dịch nào đó phải có thơng báo sau đó có chắc chắn muốn xóa khơng. Nếu chọn Ok thì thực hiện xóa, ngược lại khơng thực hiện yêu cầu
Nút XĨA HẾT Xóa tồn bộ giao dịch được chọn
Phải chọn ít nhất 1 giao dịch
Mã số kiểu textbox Nhập mã số
LỌC kiểu submit Thực hiện lọc Nếu khơng điền vào Mã số thì sẽ khơng thực hiện lọc RESET kiểu reset Thực hiện xóa dữ liệu nút
mã số và đưa về dữ liệu ban đầu
Xem giao dịch Giao diện
Hình 4. 6 Thiết kế giao diện xem giao dịch.
Các thành phần trong giao diện
Bảng 4. 6 Các thành phần trong giao diện xem giao diện
Thành phần Mơ tả thành phần Ràng buộc
Nút kích hoạt Khi giao dịch được bên vận chuyển báo giao thành công sẽ sử dụng nút này để xử lý giao dịch đã thành công
Chỉ khi chưa thanh toán và giao hàng thành cơng thì mới hiện nút, ngược lại sẽ chỉ hiện thông tin giao dịch
Nút “<<” Thực hiện trở về trang trước đó
- Quản lý danh mục
Thêm danh mục Giao diện
Hình 4. 7 Thiết kế giao diện thêm danh mục.
Các thành phần trong giao diện
Bảng 4. 7 Các thành phần trong giao diện thêm danh mục
Thành phần Mô tả thành phần Ràng buộc
Tên kiểu textbox Nhập tên đầy đủ của danh mục thêm mới
Bắt buộc phải nhập
Danh mục cha kiểu option Chọn danh mục có sẵn trong danh mục cha hoặc làm danh mục cha
Nếu không điền thì sẽ là danh mục cha
Thứ tự hiển thị kiểu textbox
Nhập thứ thự hiển thị
submit thêm mới danh mục của phần nhập trước đó đúng định dạng và ràng buộc mới thực hiện yêu cầu thêm mới
- Màu nút là màu đỏ Nút HỦY BỎ kiểu reset Dùng để xác nhận hành vi
hủy bỏ thêm mới danh mục
- Màu nút là màu trắng
Sửa danh mục Giao diện
Hình 4. 8 Thiết kế giao diện sửa danh mục.
Các thành phần trong danh mục
Bảng 4. 8 Các thành phần trong giao diện sửa danh mục
Thành phần Mô tả thành phần Ràng buộc
Tên kiểu textbox Nhập tên đầy đủ của danh mục thêm mới
Nếu sửa thì bắt buộc phải điền
Danh mục cha kiểu option Chọn danh mục có sẵn trong danh mục cha hoặc làm danh mục cha Thứ tự hiển thị kiểu textbox Nhập thứ thự hiển thị Nút CẬP NHẬT kiểu submit Dùng để xác nhận hành vi chỉnh sửa danh mục
- Kiểm tra các ràng buộc của phần nhập trước đó đúng định dạng và ràng buộc mới thực hiện yêu cầu thêm mới
- Màu nút là màu đỏ Nút HỦY BỎ kiểu reset Dùng để xác nhận hành vi
hủy bỏ sửa danh mục
- Màu nút là màu trắng
Xóa danh mục Giao diện
Hình 4. 9 Thiết kế giao diện xóa danh mục.
Các thành phần trong giao diện
Bảng 4. 9 Các thành phần trong giao diện xóa danh mục
Thành phần Mơ tả thành phần Ràng buộc
Nút danh sách Hiển thị danh sách danh mục
Nút sửa ứng với mỗi danh mục
Thực hiện sửa danh mục yêu cầu
Nút xóa ứng với mỗi danh mục
Thực hiện xóa danh mục yêu cầu
Nếu danh mục muốn xóa có chứa sản phẩm thì u cầu xóa sản phẩm trước xóa danh mục. Nếu danh mục trống khơng có sản phẩm thì có thơng báo có chắc chắn muốn xóa khơng. Nếu chọn Ok thì thực hiện xóa, ngược lại khơng thực hiện yêu cầu
Nút XĨA HẾT Xóa tồn bộ giao dịch được chọn Phải chọn ít nhất 1 danh mục - Quản lý sản phẩm Thêm sản phẩm Giao diện
Các thành phần trong giao diện
Bảng 4. 10 Các thành phần trong giao diện thêm sản phẩm
Thành phần Mô tả thành phần Ràng buộc
Tên kiểu textbox Nhập tên đầy đủ của sản phẩm thêm mới
Bắt buộc phải nhập
Hình ảnh kiểu file Chọn ảnh sản phẩm trong file
Bắt buộc phải nhập
Ảnh kèm theo Chọn các ảnh kèm theo cho sản phẩm
Giá kiểu textbox Giá cho sản phẩm Bắt buộc phải nhập và chỉ cho phép điền số nguyên dương, đơn vị điền là vnđ Giảm giá kiểu textbox Giảm giá cho sản phẩm Chỉ cho phép điền số
nguyên dương Thể loại kiểu option Chọn danh mục cho sản
phẩm
Bắt buộc phải chọn
Nội dung Nội dung của bài viết cho
sản phẩm Nút THÊM MỚI kiểu
submit
Dùng để xác nhận hành vi thêm mới sản phẩm
- Kiểm tra các ràng buộc của phần nhập trước đó đúng định dạng và ràng buộc mới thực hiện yêu cầu thêm mới
- Màu nút là màu đỏ Nút HỦY BỎ kiểu reset Dùng để xác nhận hành vi
hủy bỏ thêm mới sản phẩm
- Màu nút là màu trắng
Sửa sản phẩm Giao diện
Hình 4. 11 Thiết kế giao diện sửa sản phẩm.
Các thành phần trong giao diện
Bảng 4. 11 Các thành phần trong giao diện sửa sản phẩm
Thành phần Mô tả thành phần Ràng buộc
Tên kiểu textbox Nhập tên đầy đủ của sản phẩm
Bắt buộc phải nhập
Hình ảnh kiểu file Chọn ảnh sản phẩm trong file
Bắt buộc phải nhập
Ảnh kèm theo Chọn các ảnh kèm theo cho sản phẩm
Giá kiểu textbox Giá cho sản phẩm Bắt buộc phải nhập và chỉ cho phép điền số nguyên dương, đơn vị điền là vnđ Giảm giá kiểu textbox Giảm giá cho sản phẩm Chỉ cho phép điền số
nguyên dương Thể loại kiểu option Chọn danh mục cho sản
phẩm
Bắt buộc phải chọn
Nội dung Nội dung của bài viết cho
sản phẩm Nút CẬP NHẬT kiểu
submit
Dùng để xác nhận hành vi cập nhật sản phẩm
- Kiểm tra các ràng buộc của phần nhập trước đó
đúng định dạng và ràng buộc mới thực hiện yêu cầu cập nhật
- Màu nút là màu đỏ Nút HỦY BỎ kiểu reset Dùng để xác nhận hành vi
hủy bỏ cập nhật sản phẩm
- Màu nút là màu trắng
Xóa sản phẩm Giao diện
Hình 4. 12 Thiết kế giao diện xóa sản phẩm.
Bảng 4. 12 Các thành phần trong giao diện xóa sản phẩm
Thành phần Mơ tả thành phần Ràng buộc
Nút danh sách Hiển thị danh sách sản phẩm
Nút thêm mới Thực hiện thêm mới sản phẩm khi có yêu cầu Nút sửa ứng với mỗi sản
phẩm
Thực hiện sửa sản phẩm khi có yêu cầu
Nút xóa ứng với mỗi sản phẩm
Thực hiện xóa sản phẩm u cầu
Khi kích nút xóa một sản phẩm nào đó phải có thơng báo sau đó có chắc chắn muốn xóa khơng. Nếu chọn Ok thì thực hiện xóa, ngược lại khơng thực hiện u cầu
Nút XĨA HẾT Xóa tồn bộ sản phẩm được chọn
Phải chọn ít nhất 1 sản phẩm
Mã số kiểu textbox Nhập mã số muốn lọc Tên kiểu textbox Nhập tên sản phẩm muốn
lọc
Thể loại kiểu option Chọn danh mục muốn lọc
LỌC kiểu submit Thực hiện lọc Nếu không điền vào một trong số điều kiện lọc thì sẽ khơng thực hiện lọc RESET kiểu reset Thực hiện xóa dữ liệu nút
mã số và đưa về dữ liệu ban đầu
- Quản lý thành viên hỗ trợ
Thêm thành viên hỗ trợ Giao diện
Hình 4. 13 Thiết kế giao diện thêm thành viên hỗ trợ.
Các thành phần trong giao diện
Bảng 4. 13 Các thành phần trong giao diện thêm thành viên hỗ trợ
Thành phần Mô tả thành phần Ràng buộc
Tên kiểu textbox Nhập tên đầy đủ của thành viên hỗ trợ
Bắt buộc phải nhập và độ dài từ 8 kí tự trở lên Gmail kiểu textbox Nhập gmail cho thành viên
hỗ trợ
Bắt buộc phải nhập và đúng định dạng gmail
Số điện thoại kiểu textbox Nhập số điện thoại Bắt buộc phải nhập Nút THÊM MỚI kiểu
submit
Dùng để xác nhận hành vi thêm mới
- Kiểm tra các ràng buộc của phần nhập trước đó đúng định dạng và ràng buộc mới thực hiện yêu cầu thêm mới
- Màu nút là màu đỏ Nút HỦY BỎ kiểu reset Dùng để xác nhận hành vi
hủy bỏ thêm mới
Sửa thông tin thành viên hỗ trợ Giao diện
Hình 4. 14 Thiết kế giao diện sửa thành viên hỗ trợ.
Các thành phần của giao diện
Bảng 4. 14 Các thành phần trong giao diện sửa thành viên hỗ trợ
Thành phần Mô tả thành phần Ràng buộc
Tên kiểu textbox Nhập tên đầy đủ của thành viên hỗ trợ
Bắt buộc phải nhập và độ dài từ 8 kí tự trở lên Gmail kiểu textbox Nhập gmail cho thành viên
hỗ trợ
Bắt buộc phải nhập và đúng định dạng gmail
Số điện thoại kiểu textbox Nhập số điện thoại Bắt buộc phải nhập Nút CẬP NHẬT kiểu
submit
Dùng để xác nhận hành vi cập nhật
- Kiểm tra các ràng buộc của phần nhập trước đó đúng định dạng và ràng buộc mới thực hiện yêu cầu cập nhật
- Màu nút là màu đỏ Nút HỦY BỎ kiểu reset Dùng để xác nhận hành vi
hủy bỏ cập nhật
- Màu nút là màu trắng
Giao diện
Hình 4. 15 Thiết kế giao diện xóa thành viên hỗ trợ.
Các thành phần trong giao diện
Bảng 4. 15 Các thành phần trong giao diện xóa thành viên hỗ trợ
Thành phần Mô tả thành phần Ràng buộc
Nút thêm mới Thêm mới thành viên hỗ trợ nếu có yêu cầu
Nút danh sách Hiển thị danh sách thành viên hỗ trợ
Nút sửa ứng với mỗi thành viên hỗ trợ
Thực hiện chỉnh sửa thơng tin thành viên u cầu Nút xóa ứng với mỗi thành
viên hỗ trợ
Thực hiện xóa thành viên hỗ trợ yêu cầu
Khi kích nút xóa một thành viên hỗ trợ nào đó phải có thơng báo sau đó có chắc chắn muốn xóa khơng. Nếu chọn Ok thì thực hiện xóa, ngược lại khơng thực hiện u cầu
- Quản lý tin tức
Giao diện
Hình 4. 16 Thiết kế giao diện thêm tin tức.
Các thành phần trong giao diện
Bảng 4. 16 Các thành phần trong giao diện thêm tin tức
Thành phần Mô tả thành phần Ràng buộc
Tiêu đề kiểu textbox Nhập tiêu đề cho tin tức Bắt buộc phải nhập Hình ảnh kiểu file Chọn ảnh đại diện cho tin
tức
Bắt buộc phải nhập
Nội dung Nội dung của bài viết cho
tin tức Nút THÊM MỚI kiểu submit
Dùng để xác nhận hành vi thêm mới tin tức
- Kiểm tra các ràng buộc của phần nhập trước đó đúng định dạng và ràng buộc mới thực hiện yêu cầu thêm mới
- Màu nút là màu đỏ Nút HỦY BỎ kiểu reset Dùng để xác nhận hành vi
hủy bỏ thêm mới tin tức
- Màu nút là màu trắng
Sửa tin tức Giao diện
Hình 4. 17 Thiết kế giao diện sửa tin tức.
Các thành phần trong giao diện
Bảng 4. 17 Các thành phần trong giao diện sửa tin tức
Thành phần Mô tả thành phần Ràng buộc
Tiêu đề kiểu textbox Nhập tiêu đề cho tin tức Bắt buộc phải nhập Hình ảnh kiểu file Chọn ảnh đại diện cho tin
tức
Bắt buộc phải nhập
Nội dung Nội dung của bài viết cho
tin tức Nút CẬP NHẬT kiểu submit
Dùng để xác nhận hành vi cập nhật tin tức
- Kiểm tra các ràng buộc của phần nhập trước đó đúng định dạng và ràng buộc mới thực hiện yêu cầu cập nhật
- Màu nút là màu đỏ Nút HỦY BỎ kiểu reset Dùng để xác nhận hành vi
hủy bỏ cập nhật tin tức
- Màu nút là màu trắng
Xóa tin tức Giao diện
Hình 4. 18 Thiết kế giao diện xóa tin tức.
Các thành phần trong giao diện
Bảng 4. 18 Các thành phần trong giao diện xóa tin tức
Thành phần Mô tả thành phần Ràng buộc
Nút danh sách Hiển thị danh sách tin tức Nút thêm mới Thực hiện thêm mới tin tức
khi có yêu cầu
Nút sửa ứng với mỗi tin tức Thực hiện sửa tin tức khi có yêu cầu
Nút xem ứng với mỗi tin tức
Thực hiện xem tin tức khi có yêu cầu
Nút xóa ứng với mỗi sản phẩm
Thực hiện xóa tin tức khi có u cầu
Khi kích nút xóa một tin tức nào đó phải có thơng