Trung phú NA BÁo cáo đồ án website tin tức công nghệ laravel

ĐẠI HỌC CÔNG NGHỆ GTVT
KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO
PHÂN TÍCH VÀ THIẾT KẾ XÂY DỰNG
WEBSITE TIN TỨC CƠNG NGHỆ

ĐỜ ÁN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY
Ngành: Hệ thớng thông tin

HÀ NỘI - 2022


ĐẠI HỌC CÔNG NGHỆ GTVT
KHOA CÔNG NGHỆ THÔNG TIN

Tên_Sinh_Viên

BÁO CÁO
PHÂN TÍCH VÀ THIẾT KẾ XÂY DỰNG
WEBSITE TIN TỨC CƠNG NGHđaiỆ

ĐỜ ÁN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY
Ngành: Hệ thớng thông tin

Cán bộ hướng dẫn: Th.S Tên_Giảng_Viên
(ký tên)

HÀ NỘI -2022

LỜI CAM ĐOAN
Em xin cam đoan đồ án này là cơng trình của riêng em, các kết quả có tính độc
lập riêng, không sao chép bất kỳ tài liệu nào và chưa công bố nội dung này ở đâu. Các
tài liệu trong đồ án được sử dụng trung thực, nguồn trích dẫn có chú thích rõ ràng,
minh bạch, có tính kế thừa, phát triển từ các tài liệu, các website.
Em xin hoàn toàn chịu trách nhiệm về lời cam đoan danh dự của em.
Hà Nội, ngày 20 tháng 05 năm 2022
Sinh viên thực hiện
Tên
Họ_Tên

MỤC LỤC
LỜI CAM ĐOAN


DANH MỤC HÌNH
Hình 2.1. Tác dụng của CSS với trang web HTML
Hình 2.2. Mơ hình MVC
Hình 3.1. Các tác nhân của hệ thống
Hình 3.2. Usecase tổng quát của hệ thống
Hình 3.3. Usecase của tác nhân MEMBER
Hình 3.4. Usecase Quản lý danh mục
Hình 3.5. UseCase Quản lý bài viết
Hình 3.6. UseCase Quản lý người dùng
Hình 3.7. UseCase Quản lý phân quyền
Hình 3.8. Biểu đồ hoạt động của Usecase Đăng ký
Hình 3.9. Biểu đồ hoạt động của Usecase Đăng nhập
Hình 3.10. Biểu đồ hoạt động của Usecase Đăng xuất
Hình 3.11. Biểu đồ hoạt động của Usecase Xem danh sách danh mục
Hình 3.12. Biểu đồ hoạt động của Usecase Xem danh sách bài viết

Hình 3.14. Biểu đồ hoạt động của Usecase Tìm kiếm bài viết theo danh mục
Hình 3.15. Biểu đồ hoạt động của Usecase Tìm kiếm bài viết theo tên
Hình 3.16. Biểu đồ hoạt động của Usecase Tìm kiếm bài viết theo trạng thái
Hình 3.17. Biểu đồ hoạt động của Usecase Xem danh sách dữ liệu trang quản lý
Hình 3.18. Biểu đồ hoạt động của Usecase Thêm dữ liệu trang quản lý
Hình 3.19. Biểu đồ hoạt động của Usecase Cập nhật dữ liệu trang quản lý
Hình 3.20. Biểu đồ hoạt động của Usecase Xóa dữ liệu trang quản lý
Hình 3.21. Biểu đồ hoạt động của Usecase Tìm kiếm dữ liệu trang quản lý
Hình 3.22. Biểu đồ tuần tự Đăng nhập
Hình 3.23. Biểu đồ tuần tự Đăng ký
Hình 3.24. Biểu đồ tuần tự Tìm kiếm dữ liệu
Hình 3.25. Biểu đồ tuần tự Thêm dữ liệu
Hình 3.26. Biểu đồ tuần tự Cập nhật dữ liệu
Hình 3.27. Biểu đồ tuần tự Xóa dữ liệu
Hình 3.28. Biểu đồ trạng thái Đăng nhập
Hình 3.29. Biểu đồ trạng thái Thêm dữ liệu


Hình 3.30. Biểu đồ trạng thái Cập nhật dữ liệu
Hình 3.31. Biểu đồ trạng thái Xóa dữ liệu
Hình 3.32. Biểu đồ trạng thái Tìm kiếm dữ liệu
Hình 3.28. Sơ đồ quan hệ của các thực thể trong CSDL
Hình 3.29. Bảng categories(danh mục)
Hình 3.30. Bảng news(tin tức)
Hình 3.31. Bảng user(người dùng)
Hình 3.32. Bảng group_permission(nhóm quyền)
Hình 3.34. Bảng roles(quyền vai trị)
Hình 3.35. Bảng permission_role(quyền_quyền vai trị)
Hình 3.36. Bảng role_user(quyền vai trị_người dùng)
Hình 3.37. Bảng password_reset(đặt lại mật khẩu)

Hình 4.1. Giao diện đăng ký
Hình 4.2. Giao diện đăng nhập
Hình 4.3. Giao diện trang chủ
Hình 4.5. Giao diện chi tiết bài viết
Hình 4.6. Giao diện quản lý danh mục
Hình 4.7. Giao diện quản lý bài viết
Hình 4.8. Giao diện quản lý người dùng
Hình 4.9. Giao diện quản lý nhóm quyền
Hình 4.10. Giao diện quản lý quyền
Hình 4.11. Giao diện quản lý vai trị


CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI
1.1.

Lý do chọn đề tài:
Sự bùng nổ thơng tin trên Internet, cùng vai trị của các trang thông tin điện tử
trực tuyến ngày càng trở nên quan trọng. Khác với báo chí truyền thơng có giới hạn
thời gian cập nhật tin tức, các tờ báo trực tuyến đã cung cấp được sự tiện lợi trong việc
cập nhật và phát hành thơng tin.
Về phía người dùng, họ có thể xem thơng tin mọi lúc mọi nơi. Về phía những
người cung cấp thơng tin, các nhà báo họ có thể dễ dàng cập nhật những tin tức mới
nhất. Do đó việc sử dụng các trang thơng tin trực tuyến luôn là điều cần thiết hiện nay
nhằm đáp ứng nhu cầu cập nhật thơng tin của mọi người.
Đó là về phương diện đăng tải, cập nhật tin tức với những người dùng cấp
thơng tin. Cịn về việc tạo ra trang web giới thiệu cơng nghệ quốc tế nói chung giúp
cập nhật nhanh nhất những thông tin về công nghệ đó. Hay cụ thể với những tin tức
cơng nghệ trong nước, website giúp cập nhật, đăng tải nhanh nhất những thông tin, tin
tức mới nhất về thành quả nổi bật về công nghệ trong nước. Việc quảng bá như vậy,
giúp nâng cao dân trí, người dân có thể nắm bắt nhanh hơn các thông tin công nghệ

mới, tiếp cận rộng hơn tới những người dùng mạng mới.

1.2.

Khảo sát hiện trạng:
Thế giới đang bước vào thời kì cơng nghiệp hóa hiện đại hóa, hàng loạt các sản
phẩm cơng nghệ đang được cho ra mắt và phát triển. Để biết được thơng tin cơng nghệ
thế giới sẽ có khá nhiều cách từ truyền thông báo đài trên tivi hay các tờ báo giấy. Tuy
nhiên phát hành báo giấy sẽ làm chậm trễ việc truyền đạt thơng tin tới tay khách hàng.
Có thể tưởng tượng rằng khi một thông tin công nghệ được công bố nhưng chúng phải
đợi nhà báo đi thu tin tức, viết tay rồi in ấn thì mới tạo ra sản phẩm và sau đó mới phát
hành được. Việc này sẽ ảnh hưởng tới việc nắm bắt xu hướng cơng nghệ thế giới. Để
bắt kịp làn sóng tin tức đó thì việc tạo ra một website phù hợp với mọi người với các
chức năng dễ hiểu, dễ sử dụng và đặc biệt là phải nắm bắt tin tức một cách nhanh
chóng là điều thiết yếu.
Để nâng cao chất lượng, thì Website sẽ đăng tải tất cả những thơng tin, tin tức
liên quan đến các thông tin công nghệ mới nhất khơng chỉ trong nước mà cịn cả nước
ngồi. Website sẽ thống kê và báo cáo cho người sử dụng các thơng tin như: Các tin
tức mới cập nhật thì sẽ trở thành tin tức nổi bật, còn các tin tức có lượt xem nhiều sẽ
6


được nổi lên đầu cho người dùng theo dõi. Xây dựng website cần có người quản trị để
quản lý website, tránh những thông tin không được kiểm duyệt, thông tin sai lệch và
cập nhật tất cả những thông tin, tin tức một cách nhanh chóng, rõ ràng, chính xác với
các mốc thời gian đúng như thực tế.
Tin tức công nghệ được phân thành nhiều loại khác nhau như các loại cộng nghệ
trong nước, công nghệ quốc tế hoặc phân chia theo các lĩnh vực được quy thành danh
mục. Mỗi danh mục sẽ quản lý rất nhiều những bài viết và tin tức mới nhất được cập
nhật liên tục. Để ghi nhớ những thông tin đã xem hay chưa đọc, người dùng có thể tạo

tài khoản và đăng nhập hệ thống. Sau khi xem các bài viết, hệ thống sẽ đánh dấu
những bài viết đã xem, bài viết mới nhất. Ngoài ra, để giúp việc lọc tin tức dễ dàng,
website còn tạo ra các chức năng tìm kiếm theo nhiều tiêu chí như theo danh mục, theo
tên,… giúp người dùng khơng cần tìm từng bài viết, hay khi mất lỡ làm mất bài viết
đang đọc cũng có thể tìm kiếm dễ dàng.
1.3.

Yêu cầu của đề tài:
• Yêu cầu về chức năng:
- Phân quyền người dùng(admin – ngươi quản trị có quyền cao nhất).
- Quản lý các danh mục, bài viết, người dùng và phân quyền với các chức năng
thêm, sửa, xóa và tìm kiếm.
Hiển thị các danh mục, và thơng tin bài viết.
Hiển thị theo bài viết mới, nổi bật, đã xem…
• u cầu về giao diện:
- Giao diện hài hịa, thân thiện.
- Màu sắc không đối lập.
- Thông tin cập nhật thường xun.
- Hình thức thơng tin đa dạng, sinh động(kèm hình ảnh…).
- Bảo mật, an tồn dữ liệu.
Giới hạn và phạm vi của đề tài:
• Xây dựng chương trình dựa vào ngơn ngữ lập trình PHP và cơ sở dữ liệu
-

1.4.

1.5.

MySQL.
• Chương trình tập trung chức năng nghiệp vụ từ khảo sát thực tế.

Kết quả dự kiến đạt được:
• Tìm hiểu nhu cầu, nghiệp vụ của tin tức liên quan đến cơng nghệ trong nước và
quốc tế.
• Hiểu về ngơn ngữ lập trình php và áp dụng cho xây dựng website.
• Hồn thành website tin tức cơng nghệ với các quyền:
- Admin: thực hiện các chức năng như quản lý danh mục, quản lý bài viết, quản
lý người dùng và quản lý phân quyền.
7


1.6.

Người dùng: có thể thực hiện các chức năng như đăng ký, đăng nhập, xem các

danh mục và bài viết, tìm kiếm các bài viết theo nhiều tiêu chí.
Bớ cục đồ án:
Đồ án gồm 6 chương với các nội dung:
• Chương I: Giới thiệu đề tài:
Giới thiệu đề tài sẽ tìm hiểu gồm các nội dung lý do chọn đề tài, khảo sát thực tế,
từ đó đưa ra yêu cầu của đề tài, giới hạn và phạm vi cùng kết quả dự kiến đạt được.
• Chương II: Kiến thức nền tảng:
Nếu các cơ sở lý thuyết áp dụng cho trang web sắp xây dựng như các ngôn ngữ
HTML, CSS, ngôn ngữ lập trình PHP, Javascript… Và một số cơng cụ hỗ trợ sử dụng
với mỗi ngơn ngữ như Jquery, Laravel…
• Chương III: Phân tích và thiết kế hệ thớng:
Từ các khảo sát ở trên, tiến hành sử dụng các mô hình UML biểu diễn, phân tích
hệ thống sẽ triển khai. Thiết kế cơ sở dữ liệu cần có của website.
• Chương IV: Giao diện phần mềm:
Áp dụng những kiến thức đã học, cùng phân tích thiết kế ở trên, triển khai giao
diện trang web.

• Chương V: Tổng kết:
Rút ra kết luận và hướng phát triển cho trang web đã xây dựng.
• Chương VI: Tài liệu tham khảo:
Nếu các tài liệu, đầu sách đã tham khảo trong quá trình làm đồ án.

CHƯƠNG 2: KIẾN THỨC NỀN TẢNG
2.1.
Ngôn ngữ HTML và CSS:
2.1.1. Giới thiệu ngôn ngữ HTML:

HTML(viết tắt của từ Hypertext Markup Language hay là “Ngôn ngữ đánh
dấu siêu văn bản”) là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web
trên World Wide Web.[1]
Hiện nay, HTML có phiên bản mới là HTML5 có nhiều cải tiến và ưu điểm nổi
bật so với HTML, được phát hành vào năm 2014.
2.1.2. Lợi ích của HTML5:
HTML5 có 3 lợi ích lớn nhất là:
-

Tương thích với các trang web đang tồn tại:
HTML5 không làm các trang web trước đây ngừng hoạt động. Nó giúp các

website hiệu quả và tăng hiệu năng. Khơng u cầu các thay đổi ngay tức thì nếu gặp
8


các lỗi chính tả, cú pháp. Các wevsite cũ vẫn hoạt động bình thường và tương thích
với tiêu chuẩn của HTML5.
Ngồi ra, HTML5 cịn hỗ trợ các phiên bản cũ theo nhiều cách:
•

Hỗ trợ người lập trình tránh các lỗi đã được loại bỏ trong phiên bản mới.
Cho phép kiểm tra các đoạn mã có tuân theo tiêu chuẩn của HTML5 hay

khơng.
• Hỗ trợ hãng phát triển duyệt khả năng tương thích ngược với các nội dung
tồn tại trước đó. Nhờ vậy, nội dung được tạo từ các phiên bản cũ sẽ được
-

xây dựng lại giúp tương thích với các trình duyệt hiện tại.
Tăng khả năng phục vụ đa phương tiện:
HTML5 tăng khả năng phục vụ đa phương tiện mà không cần nhờ hỗ trợ từ bên

thứ ba. Hỗ trợ các thiết bị di động, khi người dùng hướng đến việc truy cập website
mọi lúc mọi nơi. Giúp việc lập trình và sử dụng web, các ứng dụng trở nên dễ dàng,
thuận tiện.
-

Chuẩn hóa các kĩ thuật khơng chính thức:
HTML5 chuẩn hóa các kỹ thuật khơng chính thức. Nhưng HTML5 được sử

dụng rộng rãi do sự tiện lợi và dễ sử dụng.
2.1.3.

Giới thiệu ngôn ngữ CSS:
Cascading Style Sheets(CSS) – được dùng để miêu tả cách trình bày các tài
liệu viết bằng ngôn ngữ HTML và XHTML[2]. CSS được hiểu một cách đơn giản đó là
cách mà chúng ra thêm các kiểu hiển thị (font chữ, kích thước, màu sắc,…) cho một tài

liệu Web.

2.1.4. Tác dụng chính của CSS:
CSS có tác dụng chính là:
- Hạn chế tối thiểu việc làm rối HTML của trang Web bằng các thẻ quy định kiểu
dáng(chữ đậm, in nghiêng,...), giúp mã nguồn của trang Web trở nên gọn gàng
-

hơn.
Tách biệt nội dung trang Web và định dạng hiển thị, dễ dàng cho việc thay đổi.
Tạo ra các kiểu dáng áp dụng được cho nhiều trang Web, tránh lặp lại việc định
dạng cho các trang Web giống nhau.

9


Hình 2.1. Tác dụng của CSS với trang web HTML
2.2.
Ngơn ngữ JavaScript và thư viện Jquery:
2.2.1. Giới thiệu ngôn ngữ JavaScript:
JavaScript(JS) là một ngơn ngữ lập trình thơng dịch(được dịch lúc chạy).
JavaScript ngày càng được ứng dụng rộng rãi trên nhiều mơi trường khác nhau, nó tạo
ra các ứng dụng chạy phía Server (như NodeJS), các ứng dụng di động (như React)…
JavaScript được sử dụng rất phổ biến để tích hợp vào các trang web, chạy ngay trong
trình duyệt phía client.[3]
2.2.2. Lợi ích khi dùng JavaScript:
Là ngơn ngữ lập trình phổ biến sử dụng trên nhiều nền tảng website, Javascript
thể hiện vai trị quan trọng. JavaScript có một số lợi ích như sau:
- Viết mã phía máy chủ: Các lập trình viên có thể viết mã phía máy chủ bằng
-

JavaScript.

Triển khai tập lệnh phía máy khách: Các lập trình viên có thể dễ dàng viết lệnh
phía máy khách với JavaScript, tích hợp các tập lệnh liền mạch với HTML. Cho
phép website tương tác, phản hồi ngay lập tức và tạo giao diện hiển thị phong

-

phú.
Đơn giản hóa việc phát triển web: Cho phép các nhà phát triển đơn giản hóa
thành phần của ứng dụng, qua đó đơn giản hóa việc phát triển các ứng dụng

-

web phức tạp.
Thiết kế website bao gồm responsive: JavaScript cho phép thiết kế web
responsive – tối ưu trên cả máy tính và thiết bị di động chỉ với một bộ mã.
10


-

Nhiều bộ chuyển đổi: Dù thiếu một số tính năng phức tạp được cung cấp bởi
các ngôn ngữ hiện đại như Java, C++… JavaScript vẫn có thể mở rộng bằng

cách sử dụng các bộ chuyển đổi như TypeScript, CoffeeScript,…
2.2.3. Thư viện hỗ trợ Jquery:
jQuery là một thư viện JavaScript được thiết kế đơn giản hóa thao
tác HTML DOM, cũng như xử lý sự kiện, hoạt ảnh CSS, và Ajax. Nó là phần mềm mã
nguồn mở, miễn phí sử dụng giấy phép MIT License.[4]
2.2.4. Tính năng quan trọng của Jquery:
Nhờ một số tính năng quan trọng mà Jquery trở nên phổ biến và hữu dụng:

- Gọn nhẹ: Jquery là thư viện khá gọn nhẹ.
- Dễ dàng tạo Ajax: Code được viết bởi Ajax dễ dàng tương tác với server mà
-

không cần tải lại trang nhờ thư viện Jquery.
Đơn giản hóa việc tạo hiệu ứng: Jquery có nhiều hiệu ứng animation, phủ các

-

dòng code và chỉ cần thêm biến hay nội dung.
Hỗ trợ tốt sự kiện trong HTML: Jquery xử lý các sự kiện đa dạng mà không

-

làm cho mã HTML trở nên rối.
Tương thích đa nền tảng: Jquery tự động sửa lỗi và chạy được trên nhiều loại

trình duyệt phổ biến hiện nay như Chrome, Safari, IOS, Firefox, Android…
2.3.
Mơ hình MVC:
2.3.1. Khái niệm MVC:
MVC(viết tắt của Model – View – Controller) là một mẫu kiến trúc phần mềm
để tạo lập giao diện người dùng trên máy tính. MVC chia một ứng dụng thành ba phần
tương tác được với nhau để tách biệt giữa cách thức mà thông tin được xử lý nội hàm
và phần thơng tin được trình bày và tiếp nhận từ phía người dùng.[5]

11


Hình 2.2. Mơ hình MVC

2.3.2.

Ưu điểm của mơ hình MVC:
Mơ hình MVC có một số ưu điểm:
-

Trình xử lý rõ ràng.
Tạo các chức năng chuyên biệt hóa, đồng thời kiểm sốt được luồng xử lý.
Mơ hình đơn giản và dễ hiểu.
Xử lý nghiệp vụ đơn giản, dễ triển khai với nhiều dự án.
Việc quy hoạch các function vào các thành phần riêng biệt, làm cho các quá

trình tuần tự phát triển – quản lý – vận hành – bảo trì diễn ra thuận lợi.
Tạo mơ hình chuẩn, dễ tiếp cận với cả người chun mơn ngồi.
2.4.
Ngơn ngữ lập trình PHP và framework Laravel:
2.4.1. Giới thiệu về PHP:
Hypertext Preprocessor thường được viết tắt thành PHP là một ngơn ngữ lập
-

trình kịch bản hay một loại mã lệnh chủ yếu được dùng để phát triển các ứng dụng viết
cho máy chủ, mã nguồn mở, dùng cho mục đích tổng qt. Nó rất thích hợp với web
và có thể dễ dàng nhúng vào HTML.[6]
2.4.2. Ưu điểm của PHP:

12


PHP khơng phải ngơn ngữ script phía server duy nhất có sẵn, cịn rất nhiều
ngơn ngữ khác. Ngồi việc sử dụng ngôn ngữ giúp cải thiện đáng kể số lượng tùy

chỉnh trên trang web, còn một số ưu điểm khiến nó vẫn được ưa dùng:
- Có thể học dễ dàng vì nó có tài liệu tuyệt vời bao gồm chỉ dẫn các chức năng và
-

nhiều ví dụ.
PHP có cộng đồng lớn, nếu có thắc mắc có thể tìm kiếm các nhóm và được giải

-

đáp nhanh chóng.
Tích hợp với CSDL như MySQL, Oracle…
Là nguồn mở, sử dụng miễn phí.
Được sử dụng rộng rãi, phổ biến để tạo ra nhiều nền tảng như thương mại điện

tử, phương tiện truyền thông xã hội…
2.4.3. Framework Laravel:
Laravel là một khn khổ web PHP miễn phí, mã nguồn mở, được tạo bởi
Taylor Otwell và dành cho việc phát triển các ứng dụng web theo mơ hình kiến trúc
model – view – controller (MVC) và dựa trên Symfony.[7]
2.4.4. Ưu điểm cùa Laravel:
Một số ưu điểm của Laravel:
- Sử dụng các tính năng mới nhất của PHP: Sử dụng Laravel giúp các lập trình
-

viên tiếp cận những tính năng mới nhất mà PHP cung cấp.
Nguồn tài nguyên lớn và sẵn có: Nguồn tài nguyên của Laravel rất thân thiện,
đa dạng với nhiều tài liệu khác nhau để tham khảo. Các phiên bản phát hành

-

đều có nguồn tài liệu phù hợp.
Tốc độ xử lý nhanh: Laravel hỗ trợ hiệu quả cho việc lập các website hay dự án
trong thời gian ngắn. Vì vậy, nó được sử dụng rộng rãi để phát triển các sản

-

phẩm của họ.
Tính bảo mật cao: Laravel cung cấp sẵn cho người dùng các tính năng bảo mật
mạnh mẽ như sử dụng PDO để chống lại tấn công SQL Injection, sử dụng một

-

field token ẩn để chống lại tấn công…
Dễ sử dụng: Laravel được đốn nhận và trở nên sử dụng phổ biến vì nó dễ sử

dụng.
2.5.
Hệ quản trị cơ sở dữ liệu:
2.5.1. Các khái niệm:
Cơ sở dữ liệu(Database) là một tập hợp các dữ liệu có tổ chức, thường được
lưu trữ và truy cập điện tử từ hệ thống máy tính. Khi cơ sở dữ liệu phức tạp hơn, chúng
thường được phát triển bằng cách sử dụng các kỹ thuật thiết kế và mơ hình hóa chính
thức.[8]

13


Hệ quản trị cơ sở dữ liệu(Database Management System - DBMS) là phần
mềm tương tác với người dùng cuối, ứng dụng và chính cơ sở dữ liệu để thu thập và
phân tích dữ liệu.[8]

2.5.2. Giới thiệu MySQL:
MySQL là hệ quản trị cơ sở dữ liệu sử dụng mã nguồn mở phổ biến nhất thế
giới và được ưa chuộng trong quá trình phát triển web, ứng dụng... Với tốc độ và tính
2.5.3.

2.6.

bảo mật cao, MySQL rất thích hợp cho các ứng dụng có CSDL trên Internet.
Ưu điểm của MySQL:
Một số ưu điểm của MySQL:
- Bảo mật cao: Có khả năng bảo mật, chống hack cực tốt.
- Dễ sử dụng: Dễ dàng nắm bắt các kiến thức và đơn giản trong quá trình sử
-

dụng, kể cả với người bắt đầu.
Nhiều tính năng: Hỗ trợ nhiều tính năng ưu việt.
Tốc độ: Khả năng request dữ liệu cực nhanh, đây là một điểm khá quan trọng

-

trong lập trình.
Miễn phí: Là mã nguồn mở, vì vậy có thể sử dụng miễn phí. Tuy nhiên, với một

số tính năng cũng cần trả phí.
Draw.io
Draw.io là một cơng cụ vẽ sơ đồ rất mạnh mẽ, hỗ trợ nhiều hình khối, chạy
online khơng cần cài đặt mà lại miễn phí và khơng bị giới hạn số biểu đồ như nhiều
tool vẽ nền web khác, cho phép vẽ hàng tá sơ đồ thiết kế phần mềm, phần cứng và hệ
thống như biểu đồ Usecase là kỹ thuật chính giúp mơ hình hóa các u cầu chức năng
của hệ thống phần mềm.

2.7.

Visual Studio code
Visual Studio code là một trình biên tập lập trình code hỗ trợ nhiều ngơn ngữ
lập trình như C/C++, C#, F#, Visual Basic, HTML, CSS(Cascading Style Sheets ),
JavaScript dành cho Windows, Linux và macOS, Visual Studio Code được phát triển
bởi Microsoft. Nó được xem là một sự kết hợp hoàn hảo giữa IDE và Code Editor.
Visual Studio Code hỗ trợ chức năng debug, đi kèm với Git, có syntax
highlighting, tự hồn thành mã thơng minh, snippets, và cải tiến mã nguồn. Nhờ tính
năng tùy chỉnh, Visual Studio Code cũng cho phép người dùng thay đổi theme, phím
tắt, và các tùy chọn khác.

14


CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
3.1.
3.1.1.

Các usecase sử dụng của hệ thớng:
Các tác nhân của hệ thớng:

Hình 3.1. Các tác nhân của hệ thống
-

Xây dựng hệ thống với các tác nhân:
MEMBER: Là người dùng của hệ thống, truy cập hệ thống xem các bài viết,
tìm kiếm bài viết… và có thể đăng nhập các tài khoản để thực hiện các chức

-

năng.
ADMIN: Là người quản trị hệ thống, có các quyền quản lý như quản lý danh
mục, quản lý bài viết, quản lý người dùng và quản lý phân quyền.

15


3.1.2.

Usecase tổng quát:

16


Hình 3.2. Usecase tổng quát của hệ thống

3.1.3.

Đặc tả Usecase của tác nhân MEMBER:

17


Hình 3.3. Usecase của tác nhân MEMBER
• Usecase Đăng ký:
▫ Mô tả: Dành cho các khách hàng đăng ký làm thành viên.
▫ Đầu vào: Người dùng chọn chức năng đăng ký, và nhập đầy đủ các thông tin bắt
buộc.

▫ Thực hiện: Kiểm tra các trường thông tin nhập vào, nếu đầy đủ và đúng định
dạng, sẽ lưu thông tin vào cơ sở dữ liệu và thêm thông tin thành viên vào cơ sở
▫
•
▫
▫

dữ liệu.
Đầu ra: Đưa ra thơng báo đăng ký thành công, hoặc thất bại.
Usecase Đăng nhập:
Mô tả: Cho phép người dùng hoặc quản trị viên đăng nhập vào hệ thống.
Đầu vào: Người dùng nhập vào thông tin tên tài khoản và mật khẩu, sau đó chọn

đăng nhập.
▫ Thực hiện: Kiểm tra tên đăng nhập và mật khẩu có trùng khớp với thông tin
trong CSDL. Kiểm tra quyền người dùng.
▫ Đầu ra: Nếu khơng đúng thơng tin thì thơng báo tài khoản không hợp lệ. Ngược
lại, tùy theo quyền người dùng, hiển thị màn hình quản trị hoặc màn hình của
thành viên trang web.
18


Usecase Đăng xuất:
▫ Mơ tả: Cho phép người dùng thốt khỏi hệ thống khi không sử dụng.
▫ Đầu vào: Người dùng chọn đăng xuất.
▫ Thực hiện: Hủy lưu thông tin đăng nhập.
▫ Đầu ra: Hiển thị trang chủ.
• Usecase Tìm kiếm bài viết:
▫ Mơ tả: Giúp người dùng tìm kiếm các bài viết theo các tiêu chí như danh mục,
•

▫
▫

tên bài viết...
Điều kiện trước: Người dùng truy cập hệ thống.
Dòng sự kiện chính:
- Usecase bắt đầu khi người dùng truy cập hệ thống.
- Chọn tìm kiếm theo danh mục, theo tên hoặc theo trạng thái:
• Nếu chọn “Theo danh mục” thì sự kiện con “Tìm kiếm theo danh mục”
được thực hiện.
• Nếu chọn “Theo tên” thì sự kiện con “Tìm kiếm theo tên” được thực hiện.
• Nếu chọn “Theo trạng thái” thì sự kiện con “Tìm kiếm theo trạng thái”

được thực hiện.
▫ Dịng sự kiện phụ:
- Tìm kiếm theo danh mục:
• Người dùng chọn danh mục muốn tìm kiếm.
• Hệ thống lấy danh sách các bài viết theo danh mục chọn.
• Hiển thị danh sách bài viết.
- Tìm kiếm theo tên:
• Người dùng chọn tìm kiếm theo tên.
• Nhập từ khóa tên bài viết muốn tìm kiếm.
• Chọn tìm kiếm:
• Nếu kiểm tra trường khác rống thì chuyển tới bước tiếp theo.
• Nếu sai thực hiện dịng sự kiện rẽ nhánh A1.
• Hệ thống tìm kiếm các bài viết có tên trùng với từ khóa.
• Hiển thị danh sách bài viết.
- Tìm kiếm theo trạng thái:
• Người dùng chọn trạng thái muốn tìm kiếm.

• Hệ thống lấy danh sách bài viết theo trạng thái.
• Hiển thị danh sách bài viết.
▫ Dịng sự kiện rẽ nhánh A1:
- Hệ thống thơng báo dữ liệu rỗng.
- Người dùng nhập lại thông tin.
- Quay lại bước 3 của dịng sự kiện chính, hoặc hủy bỏ thao tác, khi đó Usecase
kết thúc.
▫ Hậu điều kiện: Hiển thị các tìm kiếm theo u cầu.
• Usecase Xem các danh mục và bài viết:
▫ Mô tả: Cho phép người dùng xem các danh mục và bài viết trang web cung
cấp.
19


Đầu vào: Người dùng truy cập trang web.
Thực hiện: Lấy thông tin các danh mục và bài viết.
Đầu ra: Hiển thị danh sách bài viết theo các mục phù hợp như bài viết xem

▫
▫
▫

nhiều nhấ, bài viết mới… và các danh mục.
• Usecase Xem chi tiết bài viết:
▫ Mơ tả: Cho phép người dùng xem các thông tin, chi tiết bài viết.
▫ Đầu vào: Người dùng chọn bài viết muốn xem.
▫ Thực hiện: Lấy thông tin chi tiết của bài viết từ CSDL thông qua mã bài viết
mà người dùng chọn.
▫ Đầu ra: Hiển thị chi tiết bài viết.

3.1.4.

Đặc tả usecase của tác nhân ADMIN:

Hình 3.4. Usecase Quản lý danh mục
• Usecase Quản lý danh mục:
▫ Mơ tả tổng qt: Quản trị viên quản lý các danh mục bài viết của website.
▫ Điều kiện trước: Quản trị viên đăng nhập thành cơng hệ thống.
▫ Dịng sự kiện chính:
- Usecase bắt đầu khi quản trị viên đăng nhập hệ thống.
- Hệ thống kiểm tra, nếu đúng thì truy cập vào hệ thống và chọn quản lý danh
-

mục bài viết.
Hệ thống lấy dữ liệu danh sách các danh mục bài viết và hiển thị giao diện
danh sách các danh mục.

20


-

Hệ thống hiển thị chức năng quản trị viên có thể thực hiện: thêm, sửa, xóa
và tìm kiếm:
• Nếu chọn “Thêm” thì sự kiện con “Thêm thơng tin danh mục bài viết”
được thực hiện.
• Nếu chọn “Sửa” thì sự kiện con “Cập nhật danh mục bài viết” được
thực hiện.
• Nếu chọn “Xóa” thì sự kiện con “Xóa danh mục bài viết” được thực
hiện.

• Nếu chọn “Tìm kiếm” thì sự kiện con “Tìm kiếm danh mục bài viết”

được thực hiện.
▫ Dịng sự kiện phụ:
- Thêm thơng tin danh mục bài viết:
• Quản trị viên chọn thêm danh mục bài viết.
• Hệ thống hiển thị form thêm danh mục bài viết.
• Quản trị viên nhập các trường dữ liệu.
• Nhấn nút thêm:
▫ Nếu kiểm tra trường dữ liệu đầy đủ, thỏa mãn các điều kiện thì

-

-

-

thực hiện bước tiếp theo.
▫ Nếu khơng, thì thực hiện dịng sự kiện rẽ nhánh A1.
• Hiển thị thơng báo thêm danh mục bài viết thành cơng.
• Hệ thống lưu thông tin các danh mục vào cơ sở dữ liệu.
Cập nhật thơng tin danh mục bài viết:
• Quản trị viên chọn danh mục muốn cập nhật.
• Hệ thống hiển thị form cập nhật danh mục bài viết.
• Quản trị viên nhập các trường dữ liệu muốn sửa.
• Nhấn nút cập nhật:
▫ Nếu kiểm tra trường dữ liệu đầy đủ, thỏa mãn các điều kiện thì
thực hiện bước tiếp theo.
▫ Nếu khơng, thì thực hiện dịng sự kiện rẽ nhánh A1.
• Hiển thị thơng báo cập nhật danh mục bài viết thành cơng.

• Hệ thống cập nhật thơng tin các danh mục vào cơ sở dữ liệu.
Xóa danh mục bài viết:
• Quản trị viên chọn danh mục bài viết cần xóa.
• Nhấn nút xóa để thực hiện xóa danh mục.
• Hệ thống hiển thị thơng báo xác nhận xóa bỏ:
▫ Nếu quản trị viên đồng ý thì hệ thống hiển thị danh sách sau khi

đã được xóa.
▫ Nếu khơng đồng ý thì hệ thống hủy sự kiện.
Tìm kiếm danh mục bài viết:
• Quản trị viên nhập từ khóa muốn tìm kiếm.
• Nhấn nút tìm kiếm.
• Hệ thống tìm kiếm các danh mục theo từ khóa quản trị viên nhập:
21


▫
▫
▫

Nếu có dữ liệu, thì thực hiện hiển thị danh sách lên màn hình.
Nếu khơng có dữ liệu thì hiển thị danh sách rỗng.
Dòng sự kiện rẽ nhánh A1:
- Hệ thống thông báo việc nhập dữ liệu không hợp lệ.
- Quản trị viên nhập lại thông tin.
- Quay lại bước 4 của dịng sự kiện chính, hoặc hủy bỏ thao tác,

khi đó Usecase kết thúc.
▫ Hậu điều kiện: Cập nhật các danh mục bài viết quản trị viên đã lưu vào cơ sở
dữ liệu.

Hình 3.5. UseCase Quản lý bài viết
• Usecase Quản lý bài viết:
▫ Mô tả tổng quát: Quản trị viên quản lý các bài viết của website.
▫ Điều kiện trước: Quản trị viên đăng nhập thành công hệ thống.
▫ Dịng sự kiện chính:
- Usecase bắt đầu khi quản trị viên đăng nhập hệ thống.
- Hệ thống kiểm tra, nếu đúng thì truy cập vào hệ thống và chọn quản lý bài
-

viết.
Hệ thống lấy dữ liệu danh sách các bài viết và hiển thị giao diện danh sách

-

các bài viết.
Hệ thống hiển thị chức năng quản trị viên có thể thực hiện: thêm, sửa, xóa và
•
•
•
•
•
-

tìm kiếm:
Nếu chọn “Thêm” thì sự kiện con “Thêm thơng tin bài viết” được thực hiện.
Nếu chọn “Sửa” thì sự kiện con “Cập nhật bài viết” được thực hiện.
Nếu chọn “Xóa” thì sự kiện con “Xóa bài viết” được thực hiện.
Nếu chọn “Tìm kiếm” thì sự kiện con “Tìm kiếm bài viết” được thực hiện.
Dịng sự kiện phụ:

Thêm thơng tin bài viết:
22


•
•
•
•

Quản trị viên chọn thêm bài viết.
Hệ thống hiển thị form thêm bài viết.
Quản trị viên nhập các trường dữ liệu.
Nhấn nút thêm:
▫ Nếu kiểm tra trường dữ liệu đầy đủ, thỏa mãn các điều kiện thì thực hiện
▫

•
•
•
•
•
•
▫
▫
•
•
•
•
•
▫

▫
•
•
•
▫
▫
▫

bước tiếp theo.
Nếu khơng, thì thực hiện dịng sự kiện rẽ nhánh A1.
Hiển thị thông báo thêm bài viết thành công.
Hệ thống lưu thông tin các bài viết vào cơ sở dữ liệu.
Cập nhật thông tin bài viết:
Quản trị viên chọn bài viết muốn cập nhật.
Hệ thống hiển thị form cập nhật bài viết.
Quản trị viên nhập các trường dữ liệu muốn sửa.
Nhấn nút cập nhật:
Nếu kiểm tra trường dữ liệu đầy đủ, thỏa mãn các điều kiện thì thực hiện
bước tiếp theo.
Nếu khơng, thì thực hiện dịng sự kiện rẽ nhánh A1.
Hiển thị thông báo cập nhật bài viết thành công.
Hệ thống cập nhật thông tin các bài viết vào cơ sở dữ liệu.
Xóa bài viết:
Quản trị viên chọn bài viết cần xóa.
Nhấn nút xóa để thực hiện xóa bài viết.
Hệ thống hiển thị thơng báo xác nhận xóa bỏ:
Nếu quản trị viên đồng ý thì hệ thống hiển thị danh sách sau khi đã được
xóa.
Nếu khơng đồng ý thì hệ thống hủy sự kiện.
Tìm kiếm bài viết:

Quản trị viên nhập từ khóa muốn tìm kiếm.
Nhấn nút tìm kiếm.
Hệ thống tìm kiếm các bài viết theo từ khóa quản trị viên nhập:
Nếu có dữ liệu, thì thực hiện hiển thị danh sách lên màn hình.
Nếu khơng có dữ liệu thì hiển thị danh sách rỗng.
Dòng sự kiện rẽ nhánh A1:
- Hệ thống thông báo việc nhập dữ liệu không hợp lệ.
- Quản trị viên nhập lại thông tin.
- Quay lại bước 4 của dịng sự kiện chính, hoặc hủy bỏ thao tác, khi đó ca

sử dụng kết thúc.
▫ Hậu điều kiện: Cập nhật các bài viết quản trị viên đã lưu vào cơ sở dữ liệu.

23


Hình 3.6. UseCase Quản lý người dùng

•

Usecase Quản lý người dùng:
▫ Mô tả tổng quát: Người quản trị quản lý các tài khoản người dùng đăng nhập hệ

-

thống.
Điều kiện trước: Quản trị viên đăng nhập thành cơng hệ thống.
Dịng sự kiện chính:
Usecase bắt đầu khi quản trị viên đăng nhập hệ thống.
Hệ thống kiểm tra, nếu đúng thì truy cập vào hệ thống và chọn quản lý người

-

dùng.
Hệ thống lấy dữ liệu danh sách người dùng và hiển thị giao diện danh sách

-

người dùng.
Hệ thống hiển thị chức năng quản trị viên có thể thực hiện: thêm, sửa, xóa và

▫
▫

tìm kiếm:
• Nếu chọn “Thêm” thì sự kiện con “Thêm thơng tin người dùng được thực
hiện.
• Nếu chọn “Sửa” thì sự kiện con “Cập nhật thơng tin người dùng” được
thực hiện.
• Nếu chọn “Xóa” thì sự kiện con “Xóa người dùng” được thực hiện.
• Nếu chọn “Tìm kiếm” thì sự kiện con “Tìm kiếm người dùng” được thực
▫

hiện.
Dịng sự kiện phụ:
- Thêm thơng tin người dùng:
• Quản trị viên chọn thêm người dùng.
24

•
•
•

Hệ thống hiển thị form thêm người dùng.
Quản trị viên nhập các trường dữ liệu.
Nhấn nút thêm:
▫ Nếu kiểm tra trường dữ liệu đầy đủ, thỏa mãn các điều kiện thì thực hiện

bước tiếp theo.
▫ Nếu khơng, thì thực hiện dịng sự kiện rẽ nhánh A1.
• Hiển thị thơng báo thêm thơng tin người dùng thành cơng.
• Hệ thống lưu thông tin người dùng vào cơ sở dữ liệu.
- Cập nhật thơng tin người dùng:
• Quản trị viên chọn thơng tin người dùng muốn cập nhật.
• Hệ thống hiển thị form cập nhật thơng tin người dùng.
• Quản trị viên nhập các trường dữ liệu muốn sửa.
• Nhấn nút cập nhật:
▫ Nếu kiểm tra trường dữ liệu đầy đủ, thỏa mãn các điều kiện thì thực hiện
bước tiếp theo.
Nếu khơng, thì thực hiện dịng sự kiện rẽ nhánh A1.
• Hiển thị thông báo cập nhật thông tin người dùng thành cơng.
• Hệ thống cập nhật thơng tin người dùng vào cơ sở dữ liệu.
- Xóa người dùng:
• Quản trị viên người dùng cần xóa.
• Nhấn nút xóa để thực hiện xóa bài viết.
• Hệ thống hiển thị thơng báo xác nhận xóa bỏ:
▫ Nếu quản trị viên đồng ý thì hệ thống hiển thị danh sách sau khi đã được
▫

xóa.
▫ Nếu khơng đồng ý thì hệ thống hủy sự kiện.
- Tìm kiếm người dùng:
• Quản trị viên nhập từ khóa muốn tìm kiếm.
• Nhấn nút tìm kiếm.
• Hệ thống tìm kiếm người dùng theo từ khóa quản trị viên nhập:
▫ Nếu có dữ liệu, thì thực hiện hiển thị danh sách lên màn hình.
▫ Nếu khơng có dữ liệu thì hiển thị danh sách rỗng.
▫ Dòng sự kiện rẽ nhánh A1:
- Hệ thống thông báo việc nhập dữ liệu không hợp lệ.
- Quản trị viên nhập lại thông tin.
- Quay lại bước 4 của dịng sự kiện chính, hoặc hủy bỏ thao tác, khi đó
Usecase kết thúc.
▫ Hậu điều kiện: Cập nhật các thông tin người dùng quản trị viên đã lưu
vào cơ sở dữ liệu.

25