Trang Login
Hình 41: Giao diện trang Login
Đây là trang đăng nhập của website, có các chức năng sau:
Nếu người dùng đã có tài khoản
Khi người dùng nhập vào Email, mật khẩu và nộp nút đăng nhập trong trang Đăng nhập, trang web sẽ tự động kiểm tra xem email và mật khẩu .Nếu thông tin đó là không đúng mẫu hoặc thông tin đó là quá ngắn, hệ thống sẽ thông báo lỗi và người dùng phải nhập lại một lần nữa.
Nếu thư của người sử dụng và mật khẩu ở dạng chính xác nhưng hệ thống đã thất bại trong việc tìm kiếm thông tin trong cơ sở dữ liệu, hệ thống sẽ vẫn ở trang đăng nhập.
Nếu đăng nhập và các lỗi trên không xảy ra, người dùng sẽ được chuyển vào trang chính.
Nếu người dùng chưa có tài khoản, phải đăng kí một tài khoản mới và nhập các trường dữ liệu phù hợp như sau:
Lê Đình Thọ | Trang 55
- Tất cả các trường đều không được có dữ liệu đặc biệt.
- Firstname và Lastname nhất thiết phải có trên 3 kí tự.
- Email phải đúng chuẩn theo HTML5.
- Password và Repassword phải trùng nhau và có trên 8 kí tự
Khi người dùng nhập sai những điều kiện trên, website sẽ thông báo từng lỗi cho người dùng.
Khi người dùng thỏa tất cả các điều kiện trên, website sẽ hiện lên dialog “Sign Up success! ”, người dùng có thể đăng nhập vào website bằng tài khoản mình vừa tạo.
Trang Home Page
Hình 42: Giao diện trang Chủ
Sau khi đăng nhập thành công, người dùng sẽ được chuyển vào trang chủ liệt kê tất cả các thành phần sau:
- Tên tài khoản đăng nhập.
- Những Nhóm mà tài khoản đã tham gia vào trong List view “Your Group”.
Lê Đình Thọ | Trang 56
- Danh sách vắn tắt những bài viết của tài khoản và bạn của tài khoản đƣợc xếp theo thứ tự từ mới đến cũ. Chỉ có 5 bài viết sớm nhất được xuất hiện, khi người viết cuộn thanh cuộn của website xuống cuối thì website sẽ tự động tải 5 bài viết tiếp theo.
- Người dùng có thể comment, like và xem các bài viết.
- Lấy ngẫu nhiên nhiều nhất 5 Nhóm mà bạn của tài khoản đã tham gia để giới thiệu trong List View “Group Suggest”
- Bảng Leader Board liệt kê lần lượt 5 người dùng mà các bài viết của họ bài viết có số lƣợt like nhiều nhất và lần lƣợc 5 bài viết có số lƣợc like nhiều nhất.
- Người dùng nhấp chuột và nút Filter để lọc những nhóm theo các thể loại được chia như sau:
o Restaurant & dinner: Những nhóm có dịch vụ nhà hàng hoặc quán ăn.
o Hotel & motel: Những nhóm có dịch vụ khách sạn và nhà nghỉ.
o Travel: Những nhóm có dịch vụ du lịch.
Các nhóm có thể đƣợc lọc và hiển thị từ lớn đến nhỏ theo số điểm các thành viên chấm cho nhóm (Rate Group) theo 5 sao trở xuống, hoặc theo số lƣợng thành viên của nhóm…
- Người dùng nhấp và nút New Note để đăng tải bài note mới của mình.
- Ở nút Setting (Răng cưa) trên thanh header sẽ chuyển tiếp người dùng đến các trang nhƣ:
o User Profile: Xem thông tin về tài khoản đang sử dụng.
o Admin Page: chức năng của quản trị viên (admin) webside, chuyển đến trang quản lý website.
o View Friend List: Xem tất cả bạn bè của tài khoản.
o Send Feedback: Gởi phản hồi về website tới cho quản trị viên.
o Create Group: Tạo nhóm mới.
o Logout: Đăng xuất
- Ngoài ra, trên thanh Header còn hiển thị các thông tin nhƣ: yêu cầu kết bạn, thông báo có tin nhắn, về trang chủ và cài đặt.
Lê Đình Thọ | Trang 57
Trang Post Note
Sau khi người dùng nhấn vào nút “New Note” ở trang chủ, người dùng sẽ được chuyển tới trang PostNote để nhập các thông tin và tạo bài đăng của mình gồm các thành phần sau:
o Note title: Tiêu đề của bài viết.
o Note Content: Nội dung bài viết.
Submit Button: Nút tạo bài viết.
Hình 43: Giao diện trang PostNote
Trang Group MainPage
Trong List View “Your Group” của trang mainpage, người dùng có thể nhấp vào tên của các nhóm người dùng đã gia nhập để có thể chuyển tới trang chủ của nhóm được gọi chung là
“Group Mainpage”. Hiển thị các thông tin nhƣ sau:
- Các thông tin của nhóm, chức vụ của người dùng trong nhóm,chấm điểm cho nhóm (rate).
- Các bài viết của trong nhóm.
- Các dịch vụ trong nhóm được hiển thị khi người dùng nhấn nút “View Service”.
Lê Đình Thọ | Trang 58
- Nếu người dùng có chức vụ User trong nhóm thì sẽ có các chức năng Leave Group và Create Group trong phần Setting.
- Ngoài các chức năng nhƣ một User, Admin của nhóm sẽ có thêm các chức năng nhƣ:
o Remove User: xóa thành viên trong nhóm.
o Delete Group: xóa nhóm.
o Lock Group: Khóa nhóm.
o Post Service: Đăng thông tin về dịch vụ mà nhóm đang có.
Book Manager: Quản lý đặt dịch vụ (Chấp nhận hoặc từ chối đặt) của các thành viên trong nhóm.
Hình 44: Giao diện trang Group MainPage
Trang xem đầy đủ Note
Khi nhấp vào tên của bài viết, người dùng được chuyển tới trang xem chi tiết bài viết.
Người dùng có thể like và comment tại đây.
Lê Đình Thọ | Trang 59 Hình 45: Giao diện trang View Full Note
Trang View Service trong Group
Khi nhấp vào nút “View Service” trong mỗi group, người dùng sẽ được chuyển tới trang liệt kê tất cả các dịch vụ mà nhóm hiện hành đang có để người dùng có thể tham khảo.
Nhấn vào tiêu đề của dịch vụ để đặt xem thông tin dịch vụ
Hình 46: Giao diện trang View Service trong Group
Lê Đình Thọ | Trang 60
Trang xem thông tin và đặt dịch vụ
Nhấn vào tiêu đề của dịch vụ để đặt xem thông tin dịch vụ gồm:
- Thông tin về dịch vụ : o Tên dịch vụ o Thời gian o Lịch trình o Mô tả o Giá
o Số lƣợng đã đặt / tổng số lƣợng vé
Người dùng có thể đặt dịch vụ bằng cách điền vào số lượng và nhấp nút Booking để đăng kí nhận dịch vụ.
Hình 47: Giao diện trang Group MainPage
Lê Đình Thọ | Trang 61
Trang Book Manager trong group
Khi người dùng đặt dịch vụ thì yêu cầu sẽ được gởi tới người quản trị của nhóm.
Các yêu cầu sẽ đƣợc hiển thị trong trang Group Manager Book. Hiển thị các yêu cầu và xử lý của người quản trị, khi người quản trị có những hành động đồng ý hoặc từ chối đặt dịch vụ thì website ngay lập tức sẽ gởi tin nhắn để người đặt dịch vụ đƣợc biết.
Hình 48: Giao diện trang Book Manager trong
Trang Post Service trong Group
Admin của nhóm đƣợc quyền post thêm dịch vụ trong nhóm khi nhấn nút “Post Service”, gồm các thuộc tính sau:
- Service Name: Tên của dịch vụ.
- Description: Mô tả về dịch vụ - Schedule: Lịch trình
- From: Ngày bắt đầu dịch vụ - To: Ngày kết thúc dịch vụ - Price: Giá dịch vụ
- Quantity: Số lƣợng cho phép đặt dịch vụ
Lê Đình Thọ | Trang 62 Hình 49: Giao diện trang Post service trong
Trang User Profile
Hình 50: Giao diện trang User Profile
Lê Đình Thọ | Trang 63
Người dùng có thể xem thông tin của mình hoặc của người dùng khác bằng cách kích vào tên của người dùng tương ứng, website sẽ chuyển tiếp điến trang User Interface của người dùng tương ứng để hiện những thông tin như danh sách bạn, các thông tin các nhân, những bài viết đã đăng…
Trang Filte
Hình 51: Giao diện trang Filter
- Người dùng nhấp chuột và nút Filter để lọc những nhóm theo các thể loại được chia như sau:
o Restaurant & dinner: Những nhóm có dịch vụ nhà hàng hoặc quán ăn.
o Hotel & motel: Những nhóm có dịch vụ khách sạn và nhà nghỉ.
o Travel: Những nhóm có dịch vụ du lịch.
Các nhóm có thể đƣợc lọc và hiển thị từ lớn đến nhỏ theo số điểm các thành viên chấm cho nhóm (Rate Group) theo 5 sao trở xuống, hoặc theo số lƣợng thành viên của nhóm…
Lê Đình Thọ | Trang 64
Tài liệu tham khảo - Tài liệu:
[1]J2EE Document, Oracle.
[2] Struts 2 Document, Apache.
[3]Web Programming Tutorial, W3School.
- Website:
[1] http://struts.apache.org/release/2.0.x/docs/home.html [2] http://www.w3schools.com/
[3] http://stackoverflow.com/