ĐỒ á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 1 of 25


BKACAD Technology Academy

Mục lục
1.

Mở đầu

3

2.

Giới thiệu

4

3.

4.

2.1. Tổng quan

4

2.2. Hệ thống hiện tại

4

2.3. Hệ thống đề nghị

4

2.4. Cơng nghệ

4

Phân tích u cầu khách hàng

5

3.1. Yêu cầu phi chức năng

5

3.2. Yêu cầu chức năng

5

3.2.1. Nhóm người dùng của hệ thống

5

3.2.2. Chức năng người dùng

5

Thiết kế hệ thống

6

4.1. Cơ sở dữ liệu

6

4.2. Sơ đồ trang web

6

5.

Kết luận

7

6.

Phân công công việc

8

Web tin tức

Page 2 of 25


BKACAD Technology Academy

1. Mở đầu
Ngành công nghệ thông tin là một ngành khoa học đang trên đà phát
triển mạnh và ứng dụng rộng rãi trên nhiều lĩnh vực. Cùng với xu hướng
phát triển của các phương tiện truyền thông như Báo, Radio... thì việc sử
dụng Internet ngày càng phổ biến. Truy cập Internet, chúng ta có được một
kho thơng tin khổng lồ phục vụ mọi nhu cầu, mục đích của chúng ta chỉ
bằng một cái nhấp chuột.
Nhận thức được nhu cầu tìm hiểu thơng tin, giải trí của xã hội, là sự ra
đời của hàng loạt website cho các 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ới mẻ hàng ngày thì website tin
tức đã được ra đời.
Do đó, chúng e đã vận dụng ngôn ngữ PHP, MySQL, … và các cơng
cụ Vscode để xây dựng lên một website tin tức.
Hồn thành xong đề tài, chúng em vô cùng biết ơn thầy, cơ đã nhiệt
tình giảng dạy, hướng dẫn và đặc biệt là cô Nguyễn Minh Trang, người trực
tiếp hướng dẫn nhiệt tình cho chúng em trong suốt quá trình nghiên cứu và

thực hiện đề tài này.

Web tin tức

Page 3 of 25


BKACAD Technology Academy

2. Giới thiệu
2.1. Đưa ra vấn đề
-

Giúp mọi người tìm thấy những khu vực có quang cảnh đẹp với đúng ý thích
của bản thần đồng thời cũng cung cấp thêm các thơng tin hữu ích khác.

-

Ý tưởng về một trang web review chỗ check-in đã được nghĩ ra để có thể giới
thiệu và quảng bá các quang cảnh đẹp mà ít người biết đến, biết đâu có thể
khiến cho khu vực đó trở thành 1 trong những địa điểm du lịch không thể bỏ
qua mỗi lần ghé đến Hà Nội.

2.2. Hệ thống hiện tại
-Vẫn còn non nớt so với các website khác

2.3. Hệ thống đề nghị
-Tối đa hóa đc hiệu suất và mục đích của web
-Thân thiện với người dùng

2.4. Công nghệ
1. PHP 7.2.0
2. MySQL
3. JavaScript
4. HTML
5. CSS

Web tin tức

Page 4 of 25


BKACAD Technology Academy

3. Phân tích yêu cầu người dùng
3.1. Yêu cầu phi chức năng
1. Giao diện đơn giản, hiện đại, đẹp mắt
2. Dễ dàng nhận biết
3. Thể loại rõ ràng, đang dạng

3.2. Yêu cầu chức năng
3.2.1. Nhóm người dùng của hệ thống
⮚ Khách hàng chưa có tài khoản:
-

Xem bài viết

-

Tìm kiếm bài viết

-

Tạo tài khoản

⮚ Khách hàng đã có tài khoản:
-

Đăng nhập/Đăng xuất

-

Xem và quản lý thơng tin cá nhân

-

Tìm kiếm bài viết

-

Bình luận bài viết

⮚ Mod(nhân viên đăng bài):
-

Thêm/sửa bài viết

-

Xóa bài 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 5 of 25


BKACAD Technology Academy

3.2.2. Phân tích chức năng

➢ Đă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” trên thanh menu

Đầu vào

⮚ Tên đăng nhập
⮚ Mật khẩu

Trình tự xử

1. Chuyển sang form đăng nhập

lý

2. Lấy thơng tin từ form, kiểm tra không được để trống:
a. Trống: chuyển hướng về trang đăng nhập và thông
báo lỗi
3. Kiểm tra tên đăng nhập và mật khẩu có khớp với 1 tài
khoản nào 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 của người dùng
b. Sai: chuyển hướng về trang đăng nhập và thông
báo lỗi
c. Sai (đối với tài khoản admin bị khóa): chuyển tới
một trang thông báo kèm một nút quay trở về trang
đăng nhập

Đầu ra

● Đúng: Hiển thị trang người dùng và thông báo thành
công

Web tin tức

Page 6 of 25


BKACAD Technology Academy

● Sai: Hiển thị trang đăng nhập và thông báo thất bại
Lưu ý

● Kiểm tra ô nhập không được để trống bằng JavaScript
● Trang đăng nhập của Super Admin và Admin khác với
trang của khách hàng

➢ Đăng ký:
Các tác nhân

Khách hàng

Mơ tả

Tạo một tài khoản mới

Kích hoạt

Trong trang chủ sẽ có một nút đăng nhập trên góc phải, sau

khi bấm vào đó người dùng sẽ được đưa đến trang đăng
nhập.
Chọn “Tạo tài khoản” để có thể trực tiếp đăng ký

Đầu vào

-

Trình tự xử
lý

1. Chuyển sang form đăng ký.
2. Lấy thông tin từ form đăng ký, kiểm tra:
a) Nếu thông tin trống hướng về form đăng ký
và hiện 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 được chứa ký tự đặc
biệt và chỉ dài từ 8 đến 16 ký tự.
c) Mật khẩu có tối thiểu 8 ký tự và có ít nhất 1
chữ cái và một số

Đầu ra

➢ Đúng: Dẫn về 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 khẩu

Điền hết thông tin yêu cầu để tạo tài khoản

➢ Trang chủ:

Web tin tức

Page 7 of 25


BKACAD Technology Academy

Các tác nhân

Khách hàng/Mod/Admin

Đầu ra

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ị các bài viết
Trang chủ của Admin/mod khác với trang chủ của 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ủ của người dùng
-Admin/mod có thể biết được bố cục hiện tại của trang
web nhờ đó mà điều chỉnh bài viết sao cho phù hợp

Kích hoạt

Người dùng nhấn vào hình ảnh hoặc tên tin tức

Trình tự xử lý

1. Lấy mã bài viết mà người dùng chọn
2. Chuyển sang trang tin tức tương ứng

Đầu ra

Hiển thị:
- Tiêu đề
- Thời gian viết
- Ảnh bìa
- Nội dung bài viết
- Bình luận

Lưu ý

Trang xem tin tức của Admin/mod có thể sẽ hơn khác so
với trang chủ của khách hàng

Web tin tức

Page 8 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 trong phần
header

Đầu vào

Tên tin tức hoặc từ khóa có liên quan mà người dùng
nhập vào

Trình tự xử lý

1. Lấy thơng tin từ ơ tìm kiếm
2. Tìm trong cơ sở dữ liệu

Đầu ra

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 của Admin/mod có thể sẽ hơn khác so
với trang chủ của 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 ra

Web tin tức

1. Lấy dữ liệu từ database
2. Hiển thị với dữ liệu lấy được

Hiển thị thông tin lấy được từ database

Page 9 of 25


BKACAD Technology Academy

➢ Thêm bài viết
Các tác nhân

Amin/mod

Mô tả

Thêm bài viết mới

Kích hoạt

Chọn “thêm bài viết” trong thanh menu bên trái

Đầu vào

- Mã khu vực
- Tiêu đề
- Ảnh bìa
- Nội dung bài viết
Ngồi ra cịn lấy mã admin/mod và thời gian tạo bài viết
để hiển thị trên trang user

Trình tự xử lý

Lấy thông tin từ form, kiểm tra không được để trống

Đầu ra

Ấn vào đăng
➔ Đúng: Chuyển tới trang “List bài viết” và hiển thị
bài viết vừa thêm
➔ Sai: Trùng tên tiêu đề, trả về trang list bài viết

Lưu ý

Không có

➢ List bài viết
Các tác nhân

Admin/mod

Mơ tả

Hiển thị danh sách bài viết đã thêm

Kích hoạt

Chọn “list bài viết” trong thanh menu bên trái

Trình tự xử lý

-

Lấy dữ liệu từ database
Hiển thị dữ liệu lấy được theo sắp xếp

Đầu ra

Hiển thị các bài viết theo thứ tự được thêm vào gần đây
nhất

Lưu ý

Có 2 phím chức năng gồm:
+ chỉnh sửa bài viết(màu xanh lục)
+ xóa bài viết(màu đỏ)

Web tin tức

Page 10 of 25


BKACAD Technology Academy

➢ Chỉnh sửa bài viết
Các tác nhân

Admin/mod

Mô tả

Chỉnh sửa thơng tin bài viết

Kích hoạt

Ấn vào ơ chức năng ký hiệu cây bút màu xanh lục
tương ứng với bài viết

Đầu vào

-

Mã khu vực của bài viết cũ
Tiêu đề của bài viết cũ
Ảnh bìa của bài viết cũ
Nội dung bài viết của bài viết cũ

Trình tự xử lý

Lấy thơng tin từ form, kiểm tra không được để trống

Đầu ra

Ấn vào sửa
➔ Đúng: Chuyển tới trang “List bài viết” và hiển
thị bài viết vừa được sửa
➔ Sai: Chuyển tới trang “List bài viết” và hiển
thị bài viết cũ

Lưu ý

Khơng có

➢ Xóa bài viết
Các tác nhân

Admin/mod

Mơ tả

Xóa bài 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 bài viết

Trình tự xử lý

Lấy mã bài viết tương ứng và gửi thông báo đến
admin

Đầu ra

Chuyển tới trang “List bài viết” và hiển thị danh
sách bài viết không bao gồm bài viết bị xóa

Lưu ý

Trước khi thực sự xóa bài viết, trang sẽ đưa ra thông
báo, ấn “đồng ý” để xóa và hành động này khơng thể

Web tin tức

Page 11 of 25


BKACAD Technology Academy

hồ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 bản thân
Thực hiện các hành động với các tài khoản mod
không bao gồm bản thân

Kích hoạt

Chọn “Quản lý” trong thanh menu bên trái

Trình tự xử lý

1. Lấy dữ liệu từ database
2. Hiển thị với dữ liệu lấy được

Đầu ra

Hiển thị dữ liệu hợp lệ đã lấy được từ database

Lưu ý

Trạng thái tài khoản bao gồm:
+ active: đang hoạt động
+ expire: hết hiệu lực
Được tùy chỉnh trong ô “Edit” bên dưới bảng dữ
liệu

➢ Edit
Các tác nhân

Chỉ Admin

Mô tả

Hiển thị danh sách tài khoản và các phím chức năng

Kích hoạt

Chọn “Edit” trong “Quản lý” ở thanh menu bên trái

Trình tự xử lý

1. Lấy dữ liệu từ database
2. Hiển thị với dữ liệu lấy được

Đầu ra

Hiển thị dữ liệu hợp lệ đã lấy được từ database

Lưu ý

Có 2 phím chức năng gồm:
+ sửa thơng tin tài khoản (màu cam)
+ Block (màu đỏ) / Unblock (màu xanh lục khi
tài khoản đang 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
trong bảng danh sách

Đầu vào

-

Họ và tên
Account name
Mật khẩu
Quyền

Trình tự xử lý

Lấy thông tin từ form, kiểm tra không được để
trống

Đầu ra

Ấn vào sửa:
- Chuyển tới trang “Quản lý” và lưu thông
tin được 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” trong
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 và gửi thông báo
đến admin

Đầu ra

Chuyển đến trang “Quản lý” và hiển thị trạng thái
phù hợp với hành động

Lưu ý

Các hành động Block/Unblock có thể được hồn
tác bằng 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” trong “Quản lý” ở
thanh menu bên trái

Đầu vào

-

Họ và tên
Account
Mật khẩu
Quyền

Trình tự xử lý

Lấy thông tin từ form, kiểm tra không được để
trống

Đầu ra

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 đã được
thêm trong danh sách

Lưu ý

Khơng có

Web tin tức

Page 15 of 25


BKACAD Technology Academy

4. 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ơ đồ cơ sở dữ liệu

● Từng bảng trong cơ sở dữ 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ơ đồ cơ sở dữ liệu giữa các 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

5. Kết luận
Ưu điểm:
● Xây dựng được bố cục trang web hợp lý, bước đầu thực hiện được
nghiệp vụ của 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 được 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 bộ môn “PHP” đã trang bị cho chúng em những kiến thức, kỹ năng cơ
bản để có thể hồn thành đồ án này.
Do kiến thức chuyên ngành còn hạn chế nên em vẫn cịn nhiều thiếu sót
trong q trình thực hiện đồ án. Rất mong nhận được sự quan tâm, góp ý của
các thầy cô/giảng viên để đồ án của em được đầy đủ và hoàn thiện hơn.
Em xin chân thành cảm ơn!

Web tin tức

Page 22 of 25


BKACAD Technology Academy

6. Phân công công việc
-

Thực hiện phần Admin/mod: Đào Mạnh Trường

- Thực hiện 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 một số chức năng cho giao diện người dùng
- Trường:
+ Thêm bài viết
+ Quản lý bài 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ị bài viết từ database
+ Hiển thị được bình luận từ database
- Trường:
+ Hoà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