CHƯƠNG 3: XÂY DỰNG WEBSITE TIN TỨC
1. GIAO DIỆN NGƯỜI DÙNG
- Giao diện trang chủ (index.php):
Hình 3.2: giao diện trang chủ
Chú giải: 1. Thanh gồm: nút Home, Danh mục và Liện hệ 2. Hiển thị truyện mới nhất.
3. Hiển thị các danh mục 4. Hiển thị tất cả truyện.
5. Hiển thị các truyện có lượt đọc nhiều nhất.
6. Phân trang.
7. Phần chân trang (footer).
Hình 3.3: Danh mục truyện
Đối với trang giao diện người dùng,để viết lại đường dẫn của trang website cho nó gọn và đẹp, việc viết lại đường dẫn như vậy có tác dụng thân thiện với người dùng, đường dẫn thân thiện giúp người dùng dễ hiều và dễ nhớ hơn đồng thời nó cũng có tác dụng vô cùng lớn với các bộ máy tìm kiếm như Google, Bing…
Ví dụ như hình bên dưới (mũi tên đỏ):
- Giao diện trang chi tiết (detail.php):
Khi nhấn vào một truyện bất kì để đọc thì sẽ hiển thị chi tiết của truyện đó (Hình 3.4):
Hình 3.4 giao diện trang chi tiết truyện
Và còn một phần nửa trong trang chi tiết đó là truyện liên quan (Những tin có cùng chung danh mục)
Hình 3.5: Các truyện liên quan - Giao diện trang danh mục (cat.php)
Khi click vào danh mục hệ thống sẽ hiển thị các truyện thuộc danh mục đó:
Hình 3.6: Các truyện thuộc danh mục
- Trang danh mục này gồm có đường dẫn thân thiện (in đỏ) và có chức năng phân trang.
- Giao diện trang liên hệ (contact.php) -Nhập đầu đủ thông tin để liên hệ:
Hình 3.7: Giao diện trang liên hệ Chú thích: 1. Số điện thoại người quản lý
2. Email người quản lý, 3. Địa chỉ người quản lý,
4. Form điền thông tin người muốn liên hệ, 5. Bản đồ
-Nếu nhâp đầy đủ và định dạng email đúng thì sẽ hiển thị thông báo (Hình 3.8):
Hình 3.8 Thông báo gửi liên hệ thành công 2. Giao diện Admin
- Giao diện đăng nhập (login.php).
Đây là bước đầu tiên để vào hệ thống. Người dùng nhập tên đăng nhập và mật khẩu. Nếu nhập đúng thông tin tài khoản thì hệ thống sẽ hiện ra giao diện các chức năng chính của admin.Nếu sai sẽ hiện ra “Sai username hoặc password”, có thể đăng nhập lại.
Hình 3.9: Lưu đồ sơ đồ đăng nhập
Chương trình đăng nhập dựa trên “Username” (Tên đăng nhập) và
“Password” (Mật khẩu) được cấp khi tạo tài khoản. Sau khi được cấp tài khoản đăng nhập, người quản lý có thể đổi mật khẩu đăng nhập cho tài khoản của mình.
Mật khẩu sẽ được mã hóa theo thuật MD5. MD5(Message - Digest algorithm 5) là một thuật toán mã hóa, theo chuẩn RFC 1321.
Các thao tác thực hiện:
Khi người quản lý muốn đăng nhập vào thì người quản lý phải nhập đúng tên username và password Mật khẩu sẽ được mã hóa thành các dấu “ ”, nên * người khác sẽ không hề biết được mật khẩu của mình, đồng thời mật khẩu sẽ được mã hóa khi lưu vào cơ sở dữ liệu, đảm bảo tính bảo mật tuyệt đối.
Hình 3.10: Giao diện đăng nhập
- Giao diện đăng kí (dangky.php).
Ngoài đăng nhập, khi chưa có tài khoản chúng ta có thể Đăng kí cho phép người dùng (hay nói cách khác là người quản lý) trở thành thành viên của
website. Khi trở thành thành viên, thì người dùng (hay nói cách khác là người quản lý) mới được phép sử dụng trang web admin này, nhấn vào SIGN UP để đăng kí tài khoản:
Hình 3.11: Giao diện trang đăng kí
Người dùng nhập đầy đủ thông tin và chính xác các thông tin theo yêu cầu của hệ thống. Sau khi nhấn nút “Đăng Kí”, người dùng được phép đăng nhập với tài khoản vừa đăng kí. Sau khi đã đăng kí thành công tài khoản của người dùng sẽ được lưu trong cơ sở dữ liệu.
Trong phần đăng kí cũng như các chức năng khác như thêm, sửa, xóa hay cập nhật thông tin đều có validate dữ liệu, yêu cầu nhập thông tin những bắt buộc.
- Giao diện trang chủ admin (index.php).
Hình 3.12: Giao diện trang chủ admin
Chú thích: 1. Tên tài khoản đăng nhập, 2.Cập nhật thông tin cá nhân, 3.Đăng xuất tài khoản, 4.Quản lý danh mục, 5.Quản lý truyện, 6.Quản lý thành viên, 7. Quản lý liên hệ,8. Đăng xuất, 9: Menu hiển thị chức năng quản lý admin, 10.Tên tài khoản đăng nhập
- Giao diện trang xem danh mục, chức năng chỉnh sửa thông tin, thêm danh mục và xóa danh mục.
Khi nhấn vào Quản lý danh mục sẽ hiện ra các dạnh mục từng loại của truyện.
Hình 3.13: Giao diện trang danh mục
Khi người dùng muốn thêm danh mục thì nhấn vào (1) và điền theo yêu cầu và khi thêm thành công sẽ in ra câu thông báo cho người dùng.
Sau đó người dùng muốn chỉnh sửa thông tin thì nhấn vào (2) (Hình 3.13).
Và ứng với những thông tin cần sửa thì sẽ hiện thị ra dữ liệu cũ để người sửa có thể dễ dàng trong việc sửa.
Hình 3.14 giao diện sửa danh mục
Sau khi sửa xong thì nhấn nút “Cập nhật” để sửa thành công và in ra thông báo cho người dùng.
Khi người dùng muốn xóa danh mục thì nhấn vào (3). Sẽ hiện thông báo hỏi bạn có chắc chắn muốn xóa nó hay không (Hình 3.16)
Hình 3.16 giao diện xóa danh mục
Muốn load lại trang nhấn vào (4). (Hình 3.13)
Ở chức năng danh mục nói riêng và các chức năng còn lại nói chung, hầu như các trang đều có thanh tìm kiếm giúp cho người dùng tìm kiếm các tên danh mục một cách nhanh hơn: (5)
- Khi có kết quản tìm kiếm sẽ hiển thị như sau:
Hình 3.17 giao diện tìm kiếm danh mục
- Khi không tìm thấy kết quả tìm kiếm thì sẽ in ra câu thông báo:
Hình 3.18 giao diện tìm kiếm danh mục
Ngoài ra, đối với trang có nhiều dòng trên một trang, nhóm chúng em làm trang phân trang. Chức năng phân trang được sử dụng rất phổ biến, hình minh họa (6) (Hình 3.13).
Trong phần ‘thêm danh mục’ và ‘sửa danh mục’ có chức năng kiểm tra sự phù hợp của dữ liệu. Yêu cầu ‘Tên danh mục’ bắt buộc phải nhập. Khi người dùng không nhập dữ liệu này thì Validator sẽ làm việc để kiểm tra xem dữ liệu đó có phù hợp hay không. Và in ra câu thông báo cho người dùng nhập:
- Giao diện trang truyện, chức năng chỉnh sửa thông tin, thêm truyện và xóa truyện.
Khi nhấn vào Quản lý truyện thì sẽ đổ ra các truyện như hình minh họa bên dưới:
Hình 3.20: Giao diện trang danh sách tin tức Khi người dùng muốn thêm truyện thì nhấn vào (1).
Hình 3.21 giao diện thêm truyện
Phần này có thêm trang view để xem toàn bộ thông tin truyện, dùng ajax (2) (Hình 3.22):
Hình 3.22 view xem tất cả thông tin truyện Sau đó người dùng muốn chỉnh sửa thông tin thì nhấn vào (3).
Hình 3.23: Giao diện trang cập nhật truyện Sau khi sửa xong thì nhấn nút “Cập nhật” để sửa thành công.
Khi người dùng muốn xóa truyện thì nhấn vào (4). Sẽ hiện thông báo hỏi bạn có chắc chắn muốn xóa nó hay không (Hình 3.24)
Hình 3.24 giao diện xóa truyện Muốn load lại trang thì nhấn vào (5). (Hình 3.20)
Ở chức năng truyện nói riêng và các chức năng còn lại nói chung, hầu như các trang đều có thanh tìm kiếm giúp cho người dùng tìm kiếm các tin tức một cách nhanh hơn: (6) (Hình 3.20)
-Dưới đây là giao diện khi tìm thấy dữ liệu được người dùng tìm kiếm
Hình 3.25 giao diện tìm kiếm truyện -Khi không tìm thấy sẽ in ra câu thông báo:
Hình 3.26 giao diện tìm kiếm truyện
Ngoài ra, đối với trang có nhiều dòng trên một trang, có chức năng phân trang.
Chức năng phân trang được sử dụng rất phổ biến, hình minh họa (7) (Hình 3.20) Trong phần ‘thêm truyện và ‘sửa truyện’ có chức năng kiểm tra sự phù hợp của dữ liệu. Yêu cầu ‘Tên truyện’, ‘Danh mục truyện’, ‘mô tả tiêu đề’ bắt buộc phải nhập, và ảnh phải theo định dạng jpg, png, jpeg, gif. Khi người dùng không nhập dữ liệu này thì Validator sẽ làm việc để kiểm tra xem dữ liệu đó có phù hợp hay không. Và in ra câu thông báo cho người dùng nhập lại.
- Giao diện trang xem thành viên, chức năng chỉnh sửa thông tin, thêm thành viên và xóa thành viên.
Khi nhấn vào chức năng người dùng sẽ hiển thị ra những người dang dùng tài khoản này (người quản lý):
Hình 3.27: Giao diện trang danh sách thành viên
Khi người dùng muốn thêm thành viên thì nhấn vào (2).
Hình 3.28 giao diện thêm thành viên
Phần này có thêm trang view để xem toàn bộ thông tin người dùng, dùng ajax (2) (Hình 3.29):
Hình 3.29 giao diện xem thông tin user
Sau đó người dùng muốn chỉnh sửa thông tin thì nhấn vào (3).ở đây, hệ thống không cho phép sửa email.
Hình 3.30: Giao diện trang cập nhật thành viên Sau khi sửa xong thì nhấn nút “Cập nhật” để sửa thành công.
Khi người dùng muốn xóa thành viên thì nhấn vào (4). Sẽ hiện thông báo hỏi bạn có chắc chắn muốn xóa nó hay không (Hình 3.31)
Hình 3.31 giao diện xóa thành viên Muốn load lại trang thì nhấn vào (5). (Hình 3.27)
Trong trang thành viên này có thanh tìm kiếm, giúp người dùng có thể tìm kiếm nhanh hơn (6).
- Khi hệ thống tìm thấy kết quản tìm kiếm thi hệ thống sẽ thông báo:
Hình 3.32 giao diện tìm kiếm thành viên
- Khi hệ thống không tìm thấy kết quả:
Hình 3.33 giao diện tìm kiếm thành viên
Cuối cùng là phân trang (7). (Hình 3.27)
Trong phần ‘thêm thành viên và ‘sửa thành viên’ có chức năng kiểm tra sự phù hợp của dữ liệu. Yêu cầu ‘Email’, ‘Password’ bắt buộc phải nhập, và đúng định dạng email, Mật khẩu phải tối thiểu 6 ký tự, đối với sửa thành viên confirm_password phải trùng khớp. Khi người dùng không nhập dữ liệu này
thì Validator sẽ làm việc để kiểm tra xem dữ liệu đó có phù hợp hay không. Và in ra câu thông báo cho người dùng nhập lại.
- Giao diện trang xem liên hệ, và xóa liên hệ.
Hình 3.34: Giao diện trang liên hệ
Khi nhấn vào Quản lý liên hệ sẽ hiện ra các liên hệ. (Hình 3.34)
Khi người dùng muốn xóa liên hệ thì nhấn vào (1). Sẽ hiện thông báo hỏi bạn có chắc chắn muốn xóa nó hay không (Hình 3.35)
Hình 3.35: Giao diện xóa liên hệ
Muốn load lại trang thì nhấn vào (2). (Hình 3.34)
Trong trang liên hệ này có thanh tìm kiếm, giúp người dùng có thể tìm kiếm nhanh hơn (3). (Hình 3.34)
-khi hệ thống tìm thấy kết quả tìm kiếm:
Hình 3.36: Giao diện trang tìm kiếm liên hệ
-Khi hệ thống không tìm thấy kết quả tìm kiếm:
Hình 3.37: Giao diện trang tìm kiếm liên hệ Cuối cùng là phân trang: (4). (Hình 3.34)
- Giao diện cập nhật tài khoản.
Khi đăng nhập vào hệ thống thành công và muốn sửa đổi thông tin và password thì click vào Cập nhật tài khoản nhưng không cho phép cập nhật lại email: (Hình 3.38)
Hình 3.38 giao diện cập nhật tài khoản
Trong phần ‘cập nhật tài khoản’ có chức năng kiểm tra sự phù hợp của dữ liệu. Yêu cầu,‘Password’ bắt buộc phải nhập, Mật khẩu phải tối thiểu 6 ký tự, đối với sửa thành viên confirm_password phải trùng khớp. Khi người dùng không nhập dữ liệu này thì Validator sẽ làm việc để kiểm tra xem dữ liệu đó có phù hợp hay không. Và in ra câu thông báo cho người dùng nhập lại.
- Giao diện sẽ hiện ra. Lúc này, nhập đầy đủ thông tin rồi nhấn “Cập nhật”, Thông tin sẽ thay đổi từ lúc nhấn “Cập nhật”.