4.2.1. Lược đồ thực thể (ERD)
Hình 25: Lược đồ thực thể ERD
4.3. Thiết kế giao diện 4.3.1. Danh sách giao diện 4.3.1. Danh sách giao diện
STT Tên giao diện Mô tả
UI_01 Trang chủ
UI_02 Đặt vé Trang để người dùng chọn tuyến xe, loại vé và ngày đi, ngày về (nếu có). UI_03 Chọn giường Trang để người dùng chọn giờ khởi
hành, vị trí giường. UI_04 Nhập thông tin
người mua vé
Trang để nhập thông tin người mua vé.
UI_05 Thanh toán Trang để người dùng thanh toán vé online.
UI_06 Lịch trình Trang để người dùng xem những tuyến xe đang chạy.
44 UI_07 Chi tiết tuyến xe Trang để người dùng xem chi tiết
thông tin chuyến xe.
UI_08 Điều khoản Trang hiển thị thông tin điều lệ, chính sách của nhà xe.
UI_09 Tra cứu hóa đơn Trang để người dùng tìm kiếm hóa đơn.
UI_10 Đăng nhập Trang để người dùng đăng nhập vào website.
UI_11 Đăng ký Trang để người dùng đăng ký tài khoản.
UI_12 Lịch sử đặt vé Trang để khách hàng xem danh sách vé đã mua.
UI_13 Thông tin cá nhân Trang để khách hàng xem thông tin cá nhân.
UI_14 Thông tin tài khoản Trang để khách hàng xem thông tin tài khoản.
UI_15 Điểm thưởng Trang để khách hàng xem điểm thưởng.
UI_16 Đăng xuất Trang để khách hàng đăng xuất ra khỏi website.
UI_17 Dashboard Trang điều khiển của admin. UI_18 Quản lý bến xe Trang để quản lý bến xe. UI_19 Quản lý tài khoản Trang để quản lý tài khoản. UI_20 Quản lý tuyến xe Trang để quản lý tuyến xe. UI_21 Quản lý xe Trang để quản lý xe.
UI_22 Xuất lịch trình Trang để xuất lịch trình đi tuyến xe.
45
4.3.2. Mô tả giao diện
4.3.2.1 Giao diện Trang chủ:
Hình 26: Giao diện header trang chủ
46
Hình 28: Giao diện hình ảnh điểm đến
STT Tên đối tượng Loại đối tượng Mô tả
1 Logo Text Khi nhấn vào logo thì trang web sẽ quay về trang chủ giao diện của trang web.
2 Trang chủ ListItem Khi nhấn vào Trang chủ thì trang web sẽ quay về trang chủ giao diện của trang web.
3 Lịch trình ListItem Khi nhấn vào Lịch trình thì trang web sẽ chuyển sang trang Lịch trình.
4 Điều khoản ListItem Khi nhấn vào Điều khoản thì trang web sẽ chuyển Điều khoản.
5 Hóa đơn ListItem Khi nhấn vào Hóa đơn thì trang web sẽ chuyển Hóa đơn.
6 Đăng nhập ListItem Khi nhấn vào Đăng nhập thì trang web sẽ chuyển sang trang Đăng nhập.
7 Điểm đi Select Khi nhấn vào Chọn điểm đi thì sẽ show ra các nơi đi để chọn.
8 Điểm đến Select Khi nhấn vào Chọn điểm đi thì sẽ show ra các nơi tới để chọn.
9 Ngày đi Input Khi nhấn vào Chọn điểm đi thì sẽ hiện thời gian để chọn ngày đi.
47 10 Ngày về Input Nếu chọn thứ hồi (12) thì trang web
mới cho phép chọn Ngày về. Nếu có vé thứ hồi thì khi chọn Ngày về thì sẽ hiện thời gian để chọn ngày về. 11 Một chiều RadioTextBox Khi tích vào Một chiều thì web sẽ
không cho chọn Ngày về.
12 Thứ hồi RadioTextBox Khi tích vào Thứ hồi thì web sẽ cho chọn Ngày về.
13 Tìm kiếm Button Khi chọn vào Tìm kiếm trang web sẽ chuyển sang trang Chọn chỗ 1 chiều (nếu chọn Một chiều) ngược lại sẽ chuyển sang trang Chọn chỗ 2 chiều.
48
4.3.2.2 Giao diện trang Lịch trình:
Hình 29: Giao diện lịch trình
STT TÊN ĐỐI TƯỢNG LOẠI ĐỐI TƯỢNG MÔ TẢ
1 Tìm điểm đi Input, Icon Search Input để nhập tên nơi đi và icon search để tìm kiếm. 2 Tìm bến tới Input, Icon Search Input để nhập tên nơi tới và
icon search để tìm kiếm. 3 Danh sách các
tuyến xe (tuyến xe, loại xe, quãng đường, thời gian
hành trình, giờ chạy, đặt vé)
Table, Icon Infor, Icon Book Ticket
Hiển thị danh sách thông tin các tuyến xe và có chức năng xem chi tiết cũng như đặt vé.
49
4.3.2.3 Giao điện Đặt vé:
Hình 30: Giao điện đặt vé
STT TÊN ĐỐI TƯỢNG LOẠI ĐỐI TƯỢNG
MÔ TẢ
1 Một chiều, Khứ hồi Radio, Label - Khi nhấn vào Một chiều thì sẽ không cho phép chọn ngày về. - Khi nhấn vào chọn
Khứ hồi thì sẽ cho chọn ngày về. 2 Điểm đi, Điểm đến Input, Label,
Button.
- Khi nhấn vào Input (điểm đi) sẽ hiện danh sách các điểm đi là các button.
- Khi nhập điểm đi thì sẽ hiển thị danh sách điểm đi chứa ký tự nhập.
- Khi nhấn vào Input (điểm tới) sẽ hiện
50 danh sách các điểm
tới theo điểm đi là các button.
- Khi nhập điểm tới thì sẽ hiển thị danh sách điểm tới chứa ký tự nhập.
3 Ngày đi, Ngày về Input, Label. - Khi nhấn vào Ngày đi sẽ hiển thị ra lịch để chọn ngày tháng năm đi.
- Khi nhấn vào Ngày về sẽ hiển thị ra lịch để chọn ngày tháng năm về.
4 Tìm chuyến xe Button, Input Khi nhấn vào sẽ chuyển đến UI_03.
5 Ngày đi Input Khi nhấn vào Ngày đi sẽ
hiển thị ra lịch để chọn ngày tháng năm đi.
51
4.3.2.4 Chọn giường:
Hình 31: Giao diện danh sách giường nằm
STT TÊN ĐỐI TƯỢNG LOẠI ĐỐI TƯỢNG MÔ TẢ
1 Chọn ghế Unordered List Thể hiện người dùng đang ở bước chọn ghế.
2 Ngày Page Hiển thị ngày đi.
52 Chọn bến xe Page Hiển thị tuyến xe và giá vé
Giờ khởi hành Label, Select Hiển thị giờ chạy của xe để chọn.
Điểm lên xe Select Hiển thị điểm lên xe.
3 Sơ đồ ghế Page Hiển thị tiêu đề.
Tầng 1 Page, Table, Button Hiển thị số ghế button trong table của tầng 1. Tầng 2 Page, Table, Button Hiển thị số ghế button trong table của tầng 2. 4 Trạng thái Label Hiển thị ghi chú trạng thái
ghế.
5 Quay lại Button Khi click vào sẽ quay trở
lại trang UI_02.
Tiếp tục Button Khi click vào sẽ chuyển sang UI_04.
Bảng 24:Giao diện danh sách giường nằm
4.3.2.5 Nhập thông tin người mua vé:
53
STT TÊN ĐỐI TƯỢNG LOẠI ĐỐI TƯỢNG MÔ TẢ
1 Thông tin khách hàng Unordered List Thể hiện người dùng đang ở bước chọn ghế.
2 Thông tin khách hàng Page Hiển thị tiêu đề. Họ tên khách hàng Label, Input Nơi để nhập tên.
Số điện thoại Label, Input Nơi để nhập số điện thoại. Email Label, Input Nơi để nhập gmail.
Tỉnh/ TP, Quận/ Huyện
Label, Select Nơi để chọn tỉnh, quận huyện.
3 Điều khoản & Lưu ý Page Hiển thị điều khoản đặt vé. 4 Chấp nhận điều khoản Check Box, Label Để chấp nhận điều khoản
đặt vé.
5 Quay lại Button Khi click vào sẽ quay trở
lại UI_03.
6 Tiếp tục Button Khi click vào sẽ chuyển
sang UI_05.
Bảng 25: Giao diện nhập thông tin khi đặt vé
54
Hình 33: Chọn hình thức thanh toán
STT TÊN ĐỐI TƯỢNG LOẠI ĐỐI TƯỢNG MÔ TẢ
1 Thanh Toán Unordered List Thể hiện người dùng đang ở bước chọn ghế.
2 Thông tin mua vé Page Hiển thị tiêu đề.
Thông tin vé Page Hiển thị những thông tin về vé.
Thông tin khách hàng mua vé
Page Hiển thị thông tin về khách hàng mua vé.
3 Loại thanh toán Picture, Button Hiển thị những loại thanh toán.
4 Quay lại Button Khi click vào sẽ quay lại
UI_04
Thanh toán Button Khi click vào sẽ thanh toán.
55
4.3.2.7 Giao diện trang chi tiết tuyến xe:
Hình 34: Chi tiết tuyến xe
STT TÊN ĐỐI TƯỢNG LOẠI ĐỐI TƯỢNG MÔ TẢ
1 Bến xe & Trung chuyển
Page Hiển thị tên bến xe và địa chỉ.
2 Thông tin tuyến xe Select, Label - Hiển thị thông tin của tuyến xe, khoảng thời gian và khoảng cách. - Có thể chọn cái tuyến xe
khách.
3 Ngày đi Input, Label - Hiển thị cũng như chọn ngày đi.
4 Đặt vé Button - Khi click vào sẽ chuyển
sang UI_02.
5 Thông tin giờ chạy Table - Hiển thị thông tin chi tiết giờ đi, giờ đến và giá vé.
56
4.3.2.8 Giao diện trang Điều khoản:
Hình 35: Giao diện trang Điều khoản
STT TÊN ĐỐI TƯỢNG LOẠI ĐỐI TƯỢNG MÔ TẢ
1 Điều khoản Page Hiển thị nội dung điều
khoản của nhà xe.
Bảng 28: Giao diện trang Điều khoản
4.3.2.9 Giao diện trang Hóa đơn:
57
STT TÊN ĐỐI TƯỢNG LOẠI ĐỐI TƯỢNG MÔ TẢ
1 Tra cứu hóa đơn Page - Hiển thị tiêu đề.
2 Tuyến xe Label, Input - Hiển thị và chọn tuyến xe.
3 Ngày Label, Input - Hiển thị và chọn ngày
đi.
Giờ chạy Label, Select - Hiển thị và chọn giờ chạy.
4 Gmail Label, Input - Nhập gmail.
5 Số điện thoại Label, Input - Nhập số điện thoại.
Bảng 29: Giao diện truy xuất thông tin vé
4.4.2.10 Giao diện trang Đăng nhập:
58
STT TÊN ĐỐI TƯỢNG LOẠI ĐỐI TƯỢNG MÔ TẢ
1 Đăng nhập Page - Hiển thị tiêu đề.
2 Tên tài khoản Label, Input - Nhập tên tài khoản. 3 Mật khẩu Label, Input - Nhập mật khẩu.
4 Đăng nhập Button - Khi click vào sẽ đăng
nhập vào website.
5 Đăng ký Anchor - Khi click vào sẽ chuyển
sang UI_11.
6 Cancel Button, Icon - Dóng đăng nhập modal.
Bảng 30: Giao diện trang Đăng nhập
4.3.2.11 Giao diện trang Đăng ký:
Hình 38: Giao diện trang Đăng ký
STT TÊN ĐỐI TƯỢNG LOẠI ĐỐI TƯỢNG MÔ TẢ
1 Đăng ký Page - Hiển thị tiêu đề.
59 3 Mật khẩu Label, Input - Nhập mật khẩu.
4 Số điện thoại Label, Input - Nhập số điện thoại.
5 CMND Label, Input - Nhập cmnd.
6 Gmail Label, Input - Nhập gmail.
7 Tỉnh/ TP, Quận/ Huyện
Label, Select - Chọn tỉnh, quận.
8 Đăng ký Button - Khi click vào sẽ đăng ký
tài khoản.
9 Đăng nhập Anchor - Khi click vào chuyển
sang UI_10.
10 Đóng modal Button, Icon - Khi click vào đóng đăng ký modal.
Bảng 31: Giao diện trang Đăng ký
4.3.2.12 Giao diện trang Lịch sử mua vé:
60
STT TÊN ĐỐI TƯỢNG LOẠI ĐỐI TƯỢNG MÔ TẢ
1 Lịch sử đặt vé Page - Hiển thị tiêu đề.
2 Đặt vé Button - Khi click vào sẽ chuyển
sang UI_02.
3 Từ khóa Label, Input - Nhập mã vé.
4 Thời gian Label, Input - Chọn ngày mua vé. 5 Tuyến đường Label, Input - Chọn ngày mua vé. 6 Trạng thái Label, Select - Chọn trạng thái vé.
7 Làm mới Button - Khi click vào sẽ làm mới
lại thông tin ở table. 8 Danh sách thông
tin vé
Table, Icon. - Hiển thị danh sách thông tin vé, và chức năng hoàn trả vé.
Bảng 32: Giao diện trang Lịch sử mua vé
4.3.2.13 Giao diện trang Thông tin đăng nhập:
Hình 40: Giao diện trang Thông tin đăng nhập
STT TÊN ĐỐI TƯỢNG LOẠI ĐỐI TƯỢNG MÔ TẢ
1 Thông tin tài khoản Page - Hiển thị tiêu đề. 2 Thông tin đăng nhập Page - Hiển thị tiêu đề mục.
61 Mật khẩu Page, Label - Hiển thị mật khẩu.
Đổi mật khẩu Icon, Page - Khi click vào sẽ hiển thị đổi mật khẩu.
3 Đổi mật khẩu Page - Hiển thị tiêu đề mục Mật khẩu cũ Label, Input, Icon - Nhập mật khẩu cũ.
- Khi click vào icon sẽ show mật khẩu. Mật khẩu mới Label, Input, Icon - Nhập mật khẩu mới.
- Khi click vào icon sẽ show mật khẩu. Xác nhận mật khẩu
mới
Label, Input, Icon - Nhập lại mật khẩu mới. - Khi click vào icon sẽ
show mật khẩu.
Bảng 33: Giao diện trang Thông tin đăng nhập
4.3.2.14 Giao diện trang Thông tin cá nhân:
Hình 41: Giao diện trang Thông tin cá nhân
STT TÊN ĐỐI TƯỢNG LOẠI ĐỐI TƯỢNG MÔ TẢ
1 Thông tin cá nhân Page - Hiển thị tiêu đề. 2 Thông tin cá nhân Page - Hiển thị tiêu đề mục.
62
Email Label - Hiển thị gmail.
Số điện thoại Label - Hiển thị số điện thoại.
CMND Label - Hiển thị cmnd.
Avata Icon - Hiển thị icon người dùng. 3 Thông tin địa chỉ Page - Hiển thị tiêu đề mục.
Địa chỉ Label, Input - Hiển thị địa chỉ, nhập địa chỉ.
Thành phố Label, Input, Select - Hiển thị thành phố, chọn thành phố.
Huyện Label, Input, Select - Hiển thị huyện, chọn huyện.
4 Lưu Button - Khi click vào lưu những
thay đổi.
Bảng 34: Giao diện trang Thông tin cá nhân
4.3.2.15 Giao diện trang Điểm thưởng:
63
STT TÊN ĐỐI TƯỢNG LOẠI ĐỐI TƯỢNG MÔ TẢ
1 Thông tin điểm thưởng
Header 3 - Hiển thị tiêu đề.
2 Chính sách điểm thưởng
Page, Table - Hiển thị chính sách về điểm thưởng.
3 Điểm thưởng Page - Hiển thị thông báo.
4 Cấp độ thành viên Page, Label, Icon - Hiển thị cấp độ của khách hàng.
Tổng điểm tích lũy Page, Label, Icon - Hiển thị tổng điểm tích lũy.
Bảng 35: Giao diện trang Tài khoản sau khi admin đăng nhập
4.3.2.16 Giao diện trang Dashboard của Admin:
Hình 43: Giao diện trang Dashboard.
STT TÊN ĐỐI TƯỢNG LOẠI ĐỐI TƯỢNG MÔ TẢ
1 Tài khoản Icon, Label. - Hiển thị số lượng tài khoản.
2 Bến xe Icon, Label - Hiển thị số lượng bến xe. 3 Tuyến xe Icon, Label - Hiển thị số lượng tuyến
xe.
64
5 Biểu đồ Chart - Hiển thị doanh thu từng
tháng trong năm.
6 Doanh thu Icon, Label - Hiển thị thông tin doanh thu của năm.
7 Năm Button, Icon - Khi click vào sẽ lấy dữ liệu theo năm.
Bảng 36: Giao diện trang Dashboard.
4.3.2.17 Giao diện trang Quản lý tài khoản:
Hình 44: Giao diện trang Quản lý tài khoản.
STT TÊN ĐỐI TƯỢNG LOẠI ĐỐI TƯỢNG MÔ TẢ
1 Quản lý tài khoản Icon, Label - Hiển thị tiêu đề. 2 Danh sách tài
khoản
Table, Icon - Hiển thị danh sách tài khoản.
- Khi click vào icon vẽ chuyển sang chỉnh sửa tài khoản.
3 Thêm tài khoản Icon, Label - Khi click vào sẽ chuyển sang thêm tài khoản.
65
4.3.2.18 Giao diện trang Quản lý bến xe:
66
STT TÊN ĐÔI TƯỢNG LOẠI ĐỐI TƯỢNG MÔ TẢ
1 Biểu đồ thể hiện doanh thu
Header - Hiển thị tiêu đề.
2 Biểu đồ Chart - Hiển thị doanh thu bến
theo biểu đồ.
3 Bến xe Icon, Label, Select - Hiển thị, chọn bến xe. 4 Doanh thu Label, Icon - Hiển thị thông tin doanh
thu của bến.
5 Năm Button, Icon - Khi click vào dữ liệu thay đổi theo năm.
6 Quản lý bến xe Label, Icon - Hiển thị tiêu đề mục. 7 Tìm kiếm thành
phố
Input, Button - Tìm kiếm bến xe theo tên tỉnh.
8 Danh sách bến xe Table, Button, Icon - Hiển thị danh sách bến xe. - Khi click vào button sẽ
chuyển sang chỉnh sửa bến xe.
9 Thêm bến xe Button, Icon - Khi click vào button sẽ chuyển sang thêm bến xe.
67
4.3.2.19 Giao diện trang Xuất lịch trình sau khi admin đăng nhập:
Hình 46: Giao diện trang Xuất lịch
STT TÊN ĐỐI TƯỢNG LOẠI ĐỐI TƯỢNG MÔ TẢ
1 Biểu đồ thể hiện doanh thu
Header - Hiển thị tiêu đề mục.
2 Biểu đồ Chart - Hiển thị doanh thu theo
biểu đồ.
3 Doanh thu tuyến Label, Select - Hiển thị năm và tuyến xe, chọn tuyến xe.
4 Thông tin doanh thu
Label, Icon - Hiển thị thông tin doanh thu của tuyến.
68
5 Năm Button - Khi click vào sẽ lấy dữ
liệu doanh thu theo tuyến