đề tài XÂY DỰNG WEBSITE REVIEW SÁCH

ĐẠI HỌC DUY TÂN KHOA CÔNG NGHỆ THÔNG TIN  - MÔN: ĐỒ ÁN CDIO – CS397 Tên đề tài: XÂY DỰNG WEBSITE REVIEW SÁCH GVHD: Ths Trần Thị Th Trinh Nhóm TH: • Võ Thị Kim Tuyến • Đoàn Thị Kim Anh • Trần Thị Thu Ly • Huỳnh Tấn Quang Đà Nẵng, 01/2021 TỔNG QUAN DỰ ÁN Tên dự án XÂY DỰNG WEBSITE REVIEW SÁCH( BOOK RE.com) Ngày bắt đầu 09/11/2020 Ngày kết thúc Lớp-Trường Tên GVHD Trưởng nhóm 18/01/2021 CS447K – ĐẠI HỌC DUY TÂN Ths Trần Thị Thúy Trinh Khoa: Công nghệ thông tin Trường: Đại học Duy Tân Đoàn Thị Kim Anh Email: doankimanh2202@gmail.com Tel: 0856091711 • Đồn Thị Kim Anh Thành viên • Võ Thị Kim Tuyến • Trần Thị Thu Ly • Huỳnh Tấn Quang THIẾT KẾ GIAO DIỆN 3.1 Giao diện Trang chủ website 3.1 Hình 3.3: Giao diện trang chủ website sau đăng nhập Bảng 3.10: Đặc tả giao diện trang chủ USE CASE Chức STT Tên trường Loại Icon trang Image Trang chủ Text-link Thể loại Text-link 9 10 11 12 13 14 15 20 Trang chủ Mục tiêu Hiển thị giao diện trang chủ click vào Hiển thị giao diện trang chủ click vào Hiển thị listview cho biết thể loại sách Text-link Text-link rê chuột Hiển thị listview sách nỗi bật rê chuột Hiển thị listview sách thư viện sách theo Text-link loại rê chuột Hiển thị listview danh sách blog rê Thông báo Drop-Down chuột Đổ xuống list thông báo click vào Cá nhân List Drop-Down Đổ xuống list lựa chọn Trang cá nhân Cài đặt Thốt Tìm kiếm List Text-Link Text_Link Text-Link Search Hiển thị trang cá nhân click vào Hiển thị giao diện trang cài đặt Đăng xuất khỏi tài khoản Hiển thị gợi ý nhập vào kết tìm Slide Show Textbox Link Image kiếm nhấn Enter Hiển thị hình ảnh biết Link Image event Hiển thị thông báo đăng nhập click Text-Link Text-Link Image Text vào viết Hiển thị giao diện đăng nhập click vào Hiển thị giao diện đăng ký click vào Hiển thị Thumbnail viết Hiển thị thông tin liên hệ Sách hay Thư viện sách Café sách Bài viết Đăng nhập Đăng ký Thumbnail Liên hệ 3.2 Giao diện Đăng nhập Hình 3.4: Giao diện đăng nhập Bảng 3.11:Đặc tả giao diện đăng nhập: USECAS Chức E STT Tên trường Tên website Trang chủ Loại Mục tiêu Text-link Hiển thị tên website hiển thị giao diện trang chủ Đăng nhập Đăng ký Text click vào Hiển thị giao diện đăng Text-link nhập click vào Hiển thị giao diện đăng ký click vào Nhập tên đăng nhập Tên đăng nhập Textbox Mật Nhớ mật Textbox Nhập mật Checkbox Click chọn để nhớ mật Quên mật Đăng nhập Text-link Hiển thị trang reset mật Button Đăng nhập vào tài khoản USECAS Chức E STT Tên trường Trang chủ Loại Mục tiêu Đăng nhập tài khoản Button Chuyển đến trang theo Facebook,Google,Yahoo!,Twite tài khoản để xác nhận r 3.3 Giao diện Đăng ký Hình 3.5: Giao diện đăng ký Bảng 3.12: Đặc tả giao diện đăng ký USECASE Chức STT Trang chủ Tên trường Loại Mục tiêu Tên website Text-link Hiển thị tên website hiển thị Text giao diện trang chủ click vào Hiển thị giao diện đăng ký Đăng ký Họ tên Textbox click vào Nhập họ tên 10 Email Tên tài khoản Mật Nhập lại mật Điều khoản Đăng ký Hủy Textbox Textbox Textbox Textbox Checkbox Button Text-link Nhập mật Nhập tên tài khoản Nhập mật Nhập lại mật Click để xác nhận điều khoản Xác nhận đăng ký tài khoản Hủy thông tin vừa đăng nhập 3.4 Giao diện Bài viết Hình 3.6: Giao diện viết Bảng 3.13: Đặc tả giao diện viết USECASE Chức Trang chủ STT Tên trường Loại Mục tiêu Hình Nội dung viết Image Text Hiển thị hình viết Hiển thị nội dung viết Hình ảnh Image Hiển thị nội dung hình ảnh Đánh Giá Image viết Hiển thị thang đánh giá bạn Thích rê chuột vào click Link - Images Hiển thị biếu tượng thích, số lượt thích chuyển màu click Bình luận Chia sẻ Viết bình luận vào Link - Images Chuyển tiếp qua khung bình lu Image Chia sẻ viết qua mạng xã Textbox hội Facebook, Instagram,… Nhập nội dung muốn nhận xét 10 Bình luận Bình luận Button Text viết Gửi bình luận viết Hiển thị bình luận người 11 u thích Image xem Chuyển sang màu đen click Text-link Text-link Link Image vào, thể bạn thích bình luận Click vào để trả lời bình luận Gửi tố cáo lên admin bình luận/ Hiển thị viết khác có liên quan 12 13 14 Trả lời Spam Bài viết liên quan 3.5 Giao diện trang cá nhân người dùng khác Hình 3.7: Giao diện trang cá nhân người dùng khác 10 3.8 Giao diện trang chỉnh sửa thông tin cá nhân Hình 3.10: Giao diện trang chỉnh sửa thơng tin cá nhân Bảng 3.17: Đặc tả giao diện trang chỉnh sửa thông tin cá nhân USECASE Chức Trang chủ STT Tên trường Loại Mục tiêu Họ tên Email Textbox Textbox Nhập họ tên Nhập email Số điện thoại Textbox Nhập số điện thoại Địa Textbox Nhập địa Xác nhận Button Xác nhận thay đổi thông tin Hủy Button Hủy thao tác sửa đổi 3.9 Giao diện trang người theo dõi thân 15 Hình 3.11: Giao diện trang người theo dõi thân Bảng 3.18: Đặc tả giao diện trang người theo dõi thân USECASE Chức STT Trang chủ Tên trường Loại Mục tiêu Danh sách Chuyển trang Text Button Hiển thị danh sách tài khoản theo dõi bạn Chuyển sang trang khác click vào 3.10 Giao diện trang người theo dõi 16 Hình 3.12: Giao diện trang người theo dõi Bảng 3.19: Đặc tả giao diện trang người theo dõi USECASE Chức STT Trang chủ Tên trường Loại Mục tiêu Danh sách Text Hiển thị danh sách tài khoản mà bạn Button theo dõi bạn Chuyển sang trang khác click vào Chuyển trang 3.11 Giao diện trang cài đặt 17 Hình 3.13: Giao diện cài đặt Bảng 3.20: Đặc tả giao diện cài đặt USECASE Chức Trang chủ STT Tên trường Loại Mục tiêu Ngôn ngữ Drop-Down Chọn ngôn ngữ sử dụng cho trang Tìm người chặn List Textbox web Nhập tài khoản bạn muốn chặn Chặn Button Chặn tài khoản Xem Button Hiển thị danh sách tài khoản mà bạn Textbox Textbox Button chặn Nhập mật cũ Nhập mật Xác nhận đổi mật Mật cũ Mật Xác nhận 3.12 Giao diện danh sách tài khoản bị chặn 18 Hình 3.14: Giao diện danh sách tài khoản bị chặn Bảng 3.21: Đặc tả giao diện danh sách tài khoản bị chặn USECASE Chức Trang chủ STT Tên trường Loại Mục tiêu Danh sách chặn Bỏ chặn GridView Button Danh sách tài khoản bạn chặn Bỏ chặn tài khoản click vào Trở Button Trở giao diện cài đặt 19 3.13 Giao diện đăng nhập Admin Hình 3.15: Giao diện đăng nhập cho admin Bảng 3.22: Đặc tả giao diện đăng nhập cho admin USECASE Chức Trang chủ STT Tên trường Loại Mục tiêu Tên tài khoản Mật Textbox Textbox Nhập tên tài khoản admin Nhập mật Đăng nhập Button Hiển thị giao diện quản lý cho admin 20 3.14 Giao diện quản lý cho Admin Hình 3.16: Giao diện quản lý cho admin Bảng 3.23: Đặc tả giao diện quản lý cho admin USECASE Chức Trang chủ STT Tên trường Loại Mục tiêu Ảnh đại diện Tên Image Button Hiển thị ảnh đại diện Bỏ chặn tài khoản click vào Menu Drop-Down Hiển thị list quản lý click vào Admin trang List Button Hiển thị giao diện quản lý tài khoản Quản lý dùng Quản lý viết Báo dùng Thoát cáo người Button Button người Button Button admin Hiển thị giao diện quản lý người dùng Hiển thị giao diện quản lý viết Hiện thị giao diện báo cáo người dùng Thoát khỏi tài khoản 3.15 Giao diện quản lý tài khoản Admin 21 Hình 3.17: Giao diện quản lý tài khoản admin Bảng 3.24: Đặc tả giao diện quản lý tài khoản admin USECASE Chức Trang chủ STT Tên trường Loại Mục tiêu Quản lý admin Xóa GridView Image-button Danh sách tài khoản admin Xóa tài khoản admin Cài đặt thơng tin Image-button Hiển thị cửa sổ sửa thông tin admin admin Thêm viên Hiển thị giao diện thêm tài khoản Button 22 3.16 Giao diện chỉnh sửa thơng tin Hình 3.18: Giao diện chỉnh sửa thông tin Bảng 3.25: Đặc tả giao diện sửa thông tin USECASE Chức Trang chủ STT Tên trường Loại Mục tiêu Họ tên Chức vụ Textbox combobox Nhập họ tên Click chọn chức vụ Emai Textbox Nhập email Số điện thoại Textbox Nhập số điện thoại Xác nhận Button Xác nhận thay đổi thông tin Button click vào Hủy thay đổi vào trở giao Hủy diện cũ click vào 23 3.17 Giao diện thêm Admin Hình 3.19: Giao diện thêm admin Bảng 3.26: Đặc tả giao diện thêm admin USECASE Chức STT Tên trường Họ tên Tên tài khoản Mật Nhập lại mật Email Số điện thoại Mã capcha Điều khoản Thêm thành viên 10 Hủy Loại Textbox Textbox Textbox Textbox Textbox Textbox Image Checkbox Button Button Trang chủ Mục tiêu Nhập họ tên Nhập tên tài khoản Nhập mật Nhập lại mật Nhập email Nhập số điện thoại Nhấp chọn Click chọn Thêm tài khoản admin Hủy thông tin nhập quay lại giao diện cũ click vào 3.18 Giao diện quản lý tài khoản người dùng 24 Hình 3.20: Giao diện quản lý tài khoản người dùng Bảng 3.27: Đặc tả giao diện quản lý tài khoản người dùng USECASE Chức Trang chủ STT Tên trường Loại Mục tiêu Tìm kiếm Nút tìm kiếm Textbox Button Nhập thơng tin tài khoản cần tìm Xác nhận tìm kiếm tài khoản click vào Danh khoản Xoá Text link tác Xoá tài khoản người dùng click vào Xem thông tin Text link Hiển thị giao diện thông tin cá nhân Button click vào Chuyển qua trang danh sách khác click sách Chuyển trang tài Data Table Hiển thị thông tin người dùng thao vào 3.19 Giao diện quản lý viết 25 Hình 3.21: Giao diện quản lý viết Bảng 3.28: Đặc tả giao diện quản lý viết USECASE Chức Trang chủ STT Tên trường Loại Mục tiêu Tìm kiếm Nút tìm kiếm Textbox Button Nhập thơng tin viết cần tìm Xác nhận tìm kiếm click vào Xóa Text link Xóa viết click vào Danh sách viết Data Table Hiển thị thông tin viết thao Text link tác Hiển thị giao diện chi tiết viết Xem thông tin click vào 26 3.20 Giao diện tố cáo người dùng Hình 3.22: Giao diện báo cáo từ người dùng Bảng 3.29: Đặc tả giao diện báo cáo từ người dùng USECASE Chức Trang chủ STT Tên trường Loại Mục tiêu Tìm kiếm Nút tìm kiếm Textbox Button Nhập thơng tin cần tìm Xác nhận tìm kiếm click vào Danh sách báo cáo Data Table Hiển thị thông tin viết thao Xóa Text link tác Xóa báo cáo click vào Xem chi tiết Text link Hiển thị nội dung chi tiết báo cáo 27 PHẦN IV: CÀI ĐẶT VÀ VẬN HÀNH KẾT LUẬN NHỮNG VẤN ĐỀ ĐÃ ĐẠT ĐƯỢC - Tìm hiểu ngơn ngữ lập trình Python framework Django MVT - Áp dụng xây dựng trang web Xây dựng website review sách (BOOK RE.com) - Sử dụng công cụ quản lý mã nguồn Git - Sử dụng công cụ Heroku để deploy ứng dụng NHỮNG VẤN ĐỀ CHƯA ĐẠT ĐƯỢC - Chưa hoàn thành hết tất chức đề ban đầu - Giao diện chưa tối ưu - Chưa có tài liệu hướng dẫn sử dụng HƯỚNG PHÁT TRIỂN - Tìm hiểu sâu Python để tối ưu hóa trang web - Kết hợp với hệ quản trị sở liệu lớn - Cải thiện giao diện dễ sử dụng, thân thiện với người dùng - Xây dựng trang web mở rộng chức hơn: Chatbot, liên kết với API trang xã hội Facebook, Google, Youtube 28 TÀI LIỆU THAM KHẢO Tiếng Anh [1] https://docs.djangoproject.com/en/3.0/ [2] https://www.visual-paradigm.com/guide/uml-unified-modeling-language/what-isclass-diagram/ [3] https://www.w3schools.com/python/default.asp 29 ...TỔNG QUAN DỰ ÁN Tên dự án XÂY DỰNG WEBSITE REVIEW SÁCH( BOOK RE.com) Ngày bắt đầu 09/11/2020 Ngày kết thúc Lớp-Trường Tên GVHD Trưởng nhóm... Trần Thị Thu Ly • Huỳnh Tấn Quang THIẾT KẾ GIAO DIỆN 3.1 Giao diện Trang chủ website 3.1 Hình 3.3: Giao diện trang chủ website sau đăng nhập Bảng 3.10: Đặc tả giao diện trang chủ USE CASE Chức STT... Bảng 3.11:Đặc tả giao diện đăng nhập: USECAS Chức E STT Tên trường Tên website Trang chủ Loại Mục tiêu Text-link Hiển thị tên website hiển thị giao diện trang chủ Đăng nhập Đăng ký Text click vào