ĐỒ án i web tin tức

BKACAD Technology Academy ĐỒ ÁN I Web tin tức BKD04K11 - Nhóm 14 Thành viên Giảng viên Đào Nam Sơn (Trưởng nhóm) Đào Mạnh Trường Nguyễn Minh Trang Hà Nội, 21/3/2021 Web tin tức Page of 25 BKACAD Technology Academy Mục lục Mở đầu Giới thiệu 4 2.1 Tổng quan 2.2 Hệ thống 2.3 Hệ thống đề nghị 2.4 Cơng nghệ Phân tích u cầu khách hàng 3.1 Yêu cầu phi chức 3.2 Yêu cầu chức 3.2.1 Nhóm người dùng hệ thống 3.2.2 Chức người dùng Thiết kế hệ thống 4.1 Cơ sở liệu 4.2 Sơ đồ trang web Kết luận Phân công công việc Web tin tức Page of 25 BKACAD Technology Academy Mở đầu Ngành công nghệ thông tin ngành khoa học đà phát triển mạnh ứng dụng rộng rãi nhiều lĩnh vực Cùng với xu hướng phát triển phương tiện truyền thơng Báo, Radio việc sử dụng Internet ngày phổ biến Truy cập Internet, có kho thơng tin khổng lồ phục vụ nhu cầu, mục đích nhấp chuột Nhận thức nhu cầu tìm hiểu thơng tin, giải trí xã hội, đời hàng loạt website cho mục đích thương mại, giải trí, tin tức … Để đáp ứng với việc cập nhật thông tin mẻ hàng ngày website tin tức đời Do đó, chúng e vận dụng ngơn ngữ PHP, MySQL, … công cụ Vscode để xây dựng lên website tin tức Hoàn thành xong đề tài, chúng em vô biết ơn thầy, cô nhiệt tình giảng dạy, hướng dẫn đặc biệt Nguyễn Minh Trang, người trực tiếp hướng dẫn nhiệt tình cho chúng em suốt trình nghiên cứu thực đề tài Web tin tức Page of 25 BKACAD Technology Academy Giới thiệu 2.1 Đưa vấn đề - Giúp người tìm thấy khu vực có quang cảnh đẹp với ý thích thần đồng thời cung cấp thêm thơng tin hữu ích khác - Ý tưởng trang web review chỗ check-in nghĩ để giới thiệu quảng bá quang cảnh đẹp mà người biết đến, khiến cho khu vực trở thành địa điểm du lịch bỏ qua lần ghé đến Hà Nội 2.2 Hệ thống -Vẫn non nớt so với website khác 2.3 Hệ thống đề nghị -Tối đa hóa đc hiệu suất mục đích web -Thân thiện với người dùng 2.4 Công nghệ PHP 7.2.0 MySQL JavaScript HTML CSS Web tin tức Page of 25 BKACAD Technology Academy Phân tích yêu cầu người dùng 3.1 Yêu cầu phi chức Giao diện đơn giản, đại, đẹp mắt Dễ dàng nhận biết Thể loại rõ ràng, dạng 3.2 Yêu cầu chức 3.2.1 Nhóm người dùng hệ thống ⮚ Khách hàng chưa có tài khoản: - Xem viết - Tìm kiếm viết - Tạo tài khoản ⮚ Khách hàng có tài khoản: - Đăng nhập/Đăng xuất - Xem quản lý thông tin cá nhân - Tìm kiếm viết - Bình luận viết ⮚ Mod(nhân viên đăng bài): - Thêm/sửa viết - Xóa viết ⮚ Admin(quản lý): - Thêm nhân viên - Vơ hiệu hóa tài khoản nhân viên Web tin tức Page of 25 BKACAD Technology Academy 3.2.2 Phân tích chức ➢ Đăng nhập: Các tác Admin, Mod, Khách hàng nhân Mơ tả Đăng nhập Kích hoạt Người dùng ấn vào nút “Đăng nhập” menu Đầu vào ⮚ Tên đăng nhập ⮚ Mật Trình tự xử Chuyển sang form đăng nhập lý Lấy thông tin từ form, kiểm tra không để trống: a Trống: chuyển hướng trang đăng nhập thông báo lỗi Kiểm tra tên đăng nhập mật có khớp với tài khoản khơng a Đúng: ●Tạo phiên đăng nhập, lưu tên, mã tài khoản vào phiên ●Chuyển hướng tới trang người dùng b Sai: chuyển hướng trang đăng nhập thông báo lỗi c Sai (đối với tài khoản admin bị khóa): chuyển tới trang thông báo kèm nút quay trở trang đăng nhập Đầu ● Đúng: Hiển thị trang người dùng thông báo thành công Web tin tức Page of 25 BKACAD Technology Academy ● Sai: Hiển thị trang đăng nhập thông báo thất bại Lưu ý ● Kiểm tra ô nhập không để trống JavaScript ● Trang đăng nhập Super Admin Admin khác với trang khách hàng ➢ Đăng ký: Các tác nhân Khách hàng Mô tả Tạo tài khoản Kích hoạt Trong trang chủ có nút đăng nhập góc phải, sau bấm vào người dùng đưa đến trang đăng nhập Chọn “Tạo tài khoản” để trực tiếp đăng ký Đầu vào - Trình tự xử lý Chuyển sang form đăng ký Lấy thông tin từ form đăng ký, kiểm tra: a) Nếu thông tin trống hướng form đăng ký lên thông báo yêu cầu nhập đầy đủ thông tin b) Tên tài khoản không chứa ký tự đặc biệt dài từ đến 16 ký tự c) Mật có tối thiểu ký tự có chữ số Đầu ➢ Đúng: Dẫn trang đăng nhập ➢ Sai: Hiện thông báo lỗi Lưu ý Tên người dùng Email Tên tài khoản Mật Điền hết thông tin yêu cầu để tạo tài khoản ➢ Trang chủ: Web tin tức Page of 25 BKACAD Technology Academy Các tác nhân Khách hàng/Mod/Admin Đầu Lưu ý ● Đối với Admin/mod: + Hiển thị danh sách người dùng đăng ký ● Đối với Khách hàng: + Hiển thị viết Trang chủ Admin/mod khác với trang chủ khách hàng ➢ Xem tin tức: Các tác nhân Khách hàng/Mod/Admin Mô tả -Hiển thị tin tức trang chủ người dùng -Admin/mod biết bố cục trang web nhờ mà điều chỉnh viết cho phù hợp Kích hoạt Người dùng nhấn vào hình ảnh tên tin tức Trình tự xử lý Lấy mã viết mà người dùng chọn Chuyển sang trang tin tức tương ứng Đầu Hiển thị: - Tiêu đề - Thời gian viết - Ảnh bìa - Nội dung viết - Bình luận Lưu ý Trang xem tin tức Admin/mod khác so với trang chủ khách hàng Web tin tức Page of 25 BKACAD Technology Academy ➢ Tìm kiếm tin tức Các tác nhân Khách hàng Mô tả Tìm kiếm tin tức Kích hoạt Người dùng nhấp chuột vào tìm kiếm phần header Đầu vào Tên tin tức từ khóa có liên quan mà người dùng nhập vào Trình tự xử lý Lấy thơng tin từ tìm kiếm Tìm sở liệu Đầu Hiển thị tin tức có liên quan với từ khóa mà người dùng nhập Lưu ý Trang xem tin tức Admin/mod khác so với trang chủ khách hàng ➢ Danh sách user Các tác nhân Admin/mod Mô tả Hiển thị danh sách người dùng đăng ký Trình tự xử lý Đầu Web tin tức Lấy liệu từ database Hiển thị với liệu lấy Hiển thị thông tin lấy từ database Page of 25 BKACAD Technology Academy ➢ Thêm viết Các tác nhân Amin/mod Mơ tả Thêm viết Kích hoạt Chọn “thêm viết” menu bên trái Đầu vào - Mã khu vực - Tiêu đề - Ảnh bìa - Nội dung viết Ngồi cịn lấy mã admin/mod thời gian tạo viết để hiển thị trang user Trình tự xử lý Lấy thông tin từ form, kiểm tra không để trống Đầu Ấn vào đăng ➔ Đúng: Chuyển tới trang “List viết” hiển thị viết vừa thêm ➔ Sai: Trùng tên tiêu đề, trả trang list viết Lưu ý Khơng có ➢ List viết Các tác nhân Admin/mod Mô tả Hiển thị danh sách viết thêm Kích hoạt Chọn “list viết” menu bên trái Trình tự xử lý - Lấy liệu từ database Hiển thị liệu lấy theo xếp Đầu Hiển thị viết theo thứ tự thêm vào gần Lưu ý Có phím chức gồm: + chỉnh sửa viết(màu xanh lục) + xóa viết(màu đỏ) Web tin tức Page 10 of 25 BKACAD Technology Academy ➢ Chỉnh sửa viết Các tác nhân Admin/mod Mô tả Chỉnh sửa thơng tin viết Kích hoạt Ấn vào ô chức ký hiệu bút màu xanh lục tương ứng với viết Đầu vào - Mã khu vực viết cũ Tiêu đề viết cũ Ảnh bìa viết cũ Nội dung viết viết cũ Trình tự xử lý Lấy thông tin từ form, kiểm tra không để trống Đầu Ấn vào sửa ➔ Đúng: Chuyển tới trang “List viết” hiển thị viết vừa sửa ➔ Sai: Chuyển tới trang “List viết” hiển thị viết cũ Lưu ý Khơng có ➢ Xóa viết Các tác nhân Admin/mod Mơ tả Xóa viết Kích hoạt Ấn vào màu đỏ ký hiệu thùng rác màu đỏ tương ứng với viết Trình tự xử lý Lấy mã viết tương ứng gửi thông báo đến admin Đầu Chuyển tới trang “List viết” hiển thị danh sách viết khơng bao gồm viết bị xóa Lưu ý Trước thực xóa viết, trang đưa thơng báo, ấn “đồng ý” để xóa hành động Web tin tức Page 11 of 25 BKACAD Technology Academy hoàn tác  Quản lý Các tác nhân Chỉ Admin Mô tả Kiểm tra tài khoản mod bao gồm thân Thực hành động với tài khoản mod không bao gồm thân Kích hoạt Chọn “Quản lý” menu bên trái Trình tự xử lý Lấy liệu từ database Hiển thị với liệu lấy Đầu Hiển thị liệu hợp lệ lấy từ database Lưu ý Trạng thái tài khoản bao gồm: + active: hoạt động + expire: hết hiệu lực Được tùy chỉnh ô “Edit” bên bảng liệu ➢ Edit Các tác nhân Chỉ Admin Mô tả Hiển thị danh sách tài khoản phím chức Kích hoạt Chọn “Edit” “Quản lý” menu bên trái Trình tự xử lý Lấy liệu từ database Hiển thị với liệu lấy Đầu Hiển thị liệu hợp lệ lấy từ database Lưu ý Có phím chức gồm: + sửa thông tin tài khoản (màu cam) + Block (màu đỏ) / Unblock (màu xanh lục tài khoản chịu trạng thái block) Web tin tức Page 12 of 25 BKACAD Technology Academy Web tin tức Page 13 of 25 BKACAD Technology Academy ➢ Sửa thông tin tài khoản Các tác nhân Chỉ Admin Mô tả Thay đổi thơng tin tài khoản mod Kích hoạt Ấn vào ký hiệu màu cam tương ứng với tài khoản bảng danh sách Đầu vào - Họ tên Account name Mật Quyền Trình tự xử lý Lấy thông tin từ form, kiểm tra không để trống Đầu Ấn vào sửa: - Chuyển tới trang “Quản lý” lưu thơng tin sửa Lưu ý Có thể thăng / giáng tài quyền tài khoản phù hợp với mục đích cơng việc ➢ Block/Unblock tài khoản Các tác nhân Chỉ Admin Mô tả Thay đổi trạng thái tài khoản Kích hoạt Ấn vào ký hiệu bên cạnh “sửa thông tin” bang danh sách + Ký hiệu màu đỏ tương ứng với Block + Ký hiệu màu xanh hình chìa khóa tương ứng với Unblock Trình tự xử lý Lấy mã tài khoản tương ứng gửi thông báo đến admin Đầu Chuyển đến trang “Quản lý” hiển thị trạng thái phù hợp với hành động Lưu ý Các hành động Block/Unblock hoàn tác cách ấn lại vào ký hiệu tương ứng với tài khoản Web tin tức Page 14 of 25 BKACAD Technology Academy ➢ Thêm quản trị viên Các tác nhân Chỉ Admin Mơ tả Thêm nhân lực Kích hoạt Chọn “Thêm quản trị viên” “Quản lý” menu bên trái Đầu vào - Họ tên Account Mật Quyền Trình tự xử lý Lấy thơng tin từ form, kiểm tra không để trống Đầu Hiển thị thơng báo xác nhận sau chuyển đến trang “Quản lý” , hiển thị tài khoản thêm danh sách Lưu ý Khơng có Web tin tức Page 15 of 25 BKACAD Technology Academy Thiết kế hệ thống 4.1 Sơ đồ quan hệ thực thể Web tin tức Page 16 of 25 BKACAD Technology Academy 4.2 Sơ đồ sở liệu ● Từng bảng sở liệu: Admin maAdmin int primary key auto_increment tenAdmin varchar(20) userAdmin varchar(20) passAdmin varchar(20) maQuyen int foregin key quyen(maQuyen) block tinyint(4) Quyen maQuyen int primary key auto_increment tenQuyen varchar(100) Nguoi_dung maUser int primary key auto_increment tenUser varchar(30) userName varchar(20) passWord varchar(20) mailUser varchar(255) Web tin tức Page 17 of 25 BKACAD Technology Academy Bai_viet maBaiViet int primary key auto_increment tenBaiViet varchar(150) maAdmin int foregin key admin(maAdmin) noiDung text anhBia varchar(255) thoiGianViet datetime maKhuVuc int foregin key khu_vuc(maKhuVuc) Khu_vuc maKhuVuc int primary key auto_increment tenKhuVuc varchar(30) Binh_luan maBinhLuan int primary key auto_increment thoiGianBinhLuan datetime binhLuan text maUser int foregin key nguoi_dung(maUser) maBaiViet int foregin key bai_viet(maBaiViet) Bai_viet_tim_kiem maTimKiem int primary key auto_increment maBaiViet int foregin key bai_viet(maBaiViet) Web tin tức Page 18 of 25 BKACAD Technology Academy Bai_viet_de_xuat maDeXuat int primary key auto_increment maBaiViet int foregin key bai_viet(maBaiViet) ● Sơ đồ sở liệu bảng: Web tin tức Page 19 of 25 BKACAD Technology Academy 4.3 Sơ đồ trang web Web tin tức Page 20 of 25 BKACAD Technology Academy Kết luận Ưu điểm: ● Xây dựng bố cục trang web hợp lý, bước đầu thực nghiệp vụ hệ thống Hạn chế: ● Ít nội dung Hướng phát triển: ● Cải tiến, hoàn thiện trang web ● Tiếp cận nhiều người dùng Web tin tức Page 21 of 25 BKACAD Technology Academy Lời cảm ơn Em xin chân thành gửi lời cảm ơn đến cô Nguyễn Minh Trang - giảng viên môn “PHP” trang bị cho chúng em kiến thức, kỹ để hồn thành đồ án Do kiến thức chuyên ngành hạn chế nên em nhiều thiếu sót q trình thực đồ án Rất mong nhận quan tâm, góp ý thầy cô/giảng viên để đồ án em đầy đủ hoàn thiện Em xin chân thành cảm ơn! Web tin tức Page 22 of 25 BKACAD Technology Academy Phân công công việc - Thực phần Admin/mod: Đào Mạnh Trường - Thực phần User: Đào Nam Sơn Lịch trình: Tuần 1: - Sơn: + Đăng nhập + Đăng xuất + Đăng ký - Trường: + List admin + Sửa admin + Thêm admin Tuần 2: - Sơn: + Thiết kế giao diện người dùng - Trường: + Thiết kế giao diện admin + Đăng nhập/đăng xuất Web tin tức Page 23 of 25 BKACAD Technology Academy Tuần 3: - Sơn: + Thiết kế giao diện người dùng + Thêm số chức cho giao diện người dùng - Trường: + Thêm viết + Quản lý viết + Block/Unblock tài khoản Tuần 4: - Sơn: + Hoàn thiện giao diện người dùng + Hiển thị viết từ database + Hiển thị bình luận từ database - Trường: + Hồn thiện giao diện admin Tuần 5: - Sơn: + Hoàn thiện giao diện người dùng + Sửa lỗi - Trường: + Hoàn thiện giao diện admin + Sửa lỗi Web tin tức Page 24 of 25 BKACAD Technology Academy Tuần 6: - Sơn: + Hoàn thiện giao diện người dùng + Sửa lỗi - Trường: + Hoàn thiện giao diện admin + Sửa lỗi Web tin tức Page 25 of 25 ... key bai_viet(maBaiViet) Bai_viet_tim_kiem maTimKiem int primary key auto_increment maBaiViet int foregin key bai_viet(maBaiViet) Web tin tức Page 18 of 25 BKACAD Technology Academy Bai_viet_de_xuat... nhu cầu tìm hiểu thơng tin, gi? ?i trí xã h? ?i, đ? ?i hàng loạt website cho mục đích thương m? ?i, gi? ?i trí, tin tức … Để đáp ứng v? ?i việc cập nhật thông tin mẻ hàng ngày website tin tức đ? ?i Do đó, chúng... maDeXuat int primary key auto_increment maBaiViet int foregin key bai_viet(maBaiViet) ● Sơ đồ sở liệu bảng: Web tin tức Page 19 of 25 BKACAD Technology Academy 4.3 Sơ đồ trang web Web tin tức Page