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.

ĐẠ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 độclậ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áctà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 Use case Đă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ụcHì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áiHì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 CSDLHì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ạnthờ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ệccậ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ữngngườ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ớinhấ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 naynhằ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ấpthô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úpcập nhật nhanh nhất những thông tin về công nghệ đó Hay cụ thể với những tin tứccông nghệ trong nước, website giúp cập nhật, đăng tải nhanh nhất những thông tin, tintứ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ảnphẩ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 Tuynhiê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áthà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ácchứ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 nhanhchó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ứcliê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ướcngoà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 tintứ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ẽ

đượ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ớicá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 danhmụ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ậpnhật liên tục Để ghi nhớ những thông tin đã xem hay chưa đọc, người dùng có thể tạotà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ấunhữ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, theotê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ăngthê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…

• Yê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 xuyên

- Hình thức thông tin đa dạng, sinh động(kèm hình ảnh…)

- Bảo mật, an toàn dữ liệu

1.4. 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ệuMySQL

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

1.5. 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

• Hoà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

- Người dùng: có thể thực hiện các chức năng như đăng ký, đăng nhập, xem cácdanh mục và bài viết, tìm kiếm các bài viết theo nhiều tiêu chí.

1.6. 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ụngvớ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 giaodiệ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ổibậ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ácwebsite hiệu quả và tăng hiệu năng Không yêu cầu các thay đổi ngay tức thì nếu gặp

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íchvới tiêu chuẩn của HTML5.

Ngoà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 haykhô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 dungtồn tại trước đó Nhờ vậy, nội dung được tạo từ các phiên bản cũ sẽ đượcxâ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ênthứ ba Hỗ trợ các thiết bị di động, khi người dùng hướng đến việc truy cập websitemọ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àiliệ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ểudáng(chữ đậm, in nghiêng, ), giúp mã nguồn của trang Web trở nên gọn gànghơ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 địnhdạng cho các trang Web giống nhau

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 trongtrì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 Chophé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ã

- 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 thaotá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ácdò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ônglà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ạitrì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ầntươ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]

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 soá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 chuyên môn ngoà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ếtcho máy chủ, mã nguồn mở, dùng cho mục đích tổng quát 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:

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 Ngoà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 khuôn 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úcmodel – 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ìnhviê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ự ántrong thời gian ngắn Vì vậy, nó được sử dụng rộng rãi để phát triển các sảnphẩ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ậtmạnh mẽ như sử dụng PDO để chống lại tấn công SQL Injection, sử dụng mộtfield 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úngthườ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ínhthức.[8]

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ínhbảo mật cao, MySQL rất thích hợp cho các ứng dụng có CSDL trên Internet

2.5.3. Ư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ọngtrong 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í

2.6. 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ềutool 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 yêu cầu chức năngcủ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ểnbở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ự hoàn thành mã thông minh, snippets, và cải tiến mã nguồn Nhờ tínhnăng tùy chỉnh, Visual Studio Code cũng cho phép người dùng thay đổi theme, phímtắt, và các tùy chọn khác

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

3.1. Các usecase sử dụng của hệ thống:

3.1.1. 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ứcnăng

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

3.1.2. Usecase tổng quát:

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:

Hình 3.3 Usecase của tác nhân MEMBER

▫ 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ắtbuộc

▫ Thực hiện: Kiểm tra các trường thông tin nhập vào, nếu đầy đủ và đúng địnhdạ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

▫ 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 tintrong 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ượclạ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ủathành viên trang web

• Usecase Đăng xuất:

▫ Mô tả: Cho phép người dùng thoá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ủ

▫ 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 đó Usecasekết thúc

▫ Hậu điều kiện: Hiển thị các tìm kiếm theo yêu cầu

▫ Mô tả: Cho phép người dùng xem các danh mục và bài viết trang web cungcấp

▫ Đầ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 xemnhiều nhấ, bài viết mới… và các danh mục

▫ 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

▫ Mô tả tổng quát: 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ý danhmụ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ệndanh sách các danh mục

- 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

- 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:

▫ 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

▫ 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àiviế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áchcá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:

• 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ệnbướ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ệnbướ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 đã đượcxó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

Hình 3.6 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ườidù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áchngườ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ựchiện

• Nếu chọn “Sửa” thì sự kiện con “Cập nhật thông tin người dùng” đượcthự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ựchiệ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

• 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ệnbướ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ệnbướ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 đã đượcxó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ưuvào cơ sở dữ liệu

Hình 3.7 UseCase Quản lý phân quyền

▫ Mô tả tổng quát: Người quản trị thiết lập các nhóm quyền đăng nhập để quản lý

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ýnhóm quyền

- Hệ thống lấy dữ liệu danh sách các nhóm quyền và hiển thị giao diện danhsách các nhóm quyền đã có trong hệ thố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:

• Nếu chọn “Thêm” thì sự kiện con “Thêm nhóm quyền mới” được thựchiện

• Nếu chọn “Sửa” thì sự kiện con “Cập nhật thông tin nhóm quyền” đượcthực hiện

• Nếu chọn “Xóa” thì sự kiện con “Xóa nhóm quyền” được thực hiện

▫ Dòng sự kiện phụ:

- Thêm nhóm quyền mới:

• Quản trị viên chọn thêm nhóm quyền

• Hệ thống hiển thị form thêm nhóm quyền

• 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ựchiệ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 nhóm quyền mới thành công

• Hệ thống lưu thông tin nhóm quyền mới vào cơ sở dữ liệu

- Cập nhật thông tin nhóm quyền:

• Quản trị viên chọn nhóm quyền muốn cập nhật

• Hệ thống hiển thị form cập nhật thông tin nhóm quyền

• 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ựchiệ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 nhóm quyền thành công

• Hệ thống cập nhật thông tin nhóm quyền vào cơ sở dữ liệu

- Xóa nhóm quyền:

• Quản trị viên nhóm quyền muốn xóa

• Nhấn nút xóa để thực hiện xóa nhóm quyền

• 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 kiểm tra sự ràng buộc của nhómquyền đó Nếu tồn tại các ràng buộc, không thể xóa bỏ thì hiển thịkhông báo và hủy yêu cầu xóa, ngược lại thực hiện xóa nhóm quyền đãchọn

▫ Nếu không đồng ý thì hệ thống hủy sự kiện

▫ 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 nhóm quyền vào cơ sở dữ liệu

▫ Mô tả tổng quát: Người quản trị thiết lập các quyền vai trò đăng nhập để quản

lý 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ý quyềnvai trò

- Hệ thống lấy dữ liệu danh sách các quyền vai trò và hiển thị giao diện danhsách các quyền vai trò đã có trong hệ thố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:

• Nếu chọn “Thêm” thì sự kiện con “Thêm quyền vai trò mới” được thựchiện

• Nếu chọn “Sửa” thì sự kiện con “Cập nhật thông tin quyền vai trò” đượcthực hiện

• Nếu chọn “Xóa” thì sự kiện con “Xóa quyền vai trò” được thực hiện

▫ Dòng sự kiện phụ:

- Thêm quyền vai trò mới:

• Quản trị viên chọn thêm quyền vai trò

• Hệ thống hiển thị form thêm quyền vai trò

• 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ệnbướ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 quyền vai trò mới thành công

• Hệ thống lưu thông tin quyền vai trò mới vào cơ sở dữ liệu

- Cập nhật thông tin quyền vai trò:

• Quản trị viên chọn quyền vai trò muốn cập nhật

• Hệ thống hiển thị form cập nhật thông tin quyền vai trò

• 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ệnbướ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 quyền vai trò thành công

• Hệ thống cập nhật thông tin quyền vai trò vào cơ sở dữ liệu

- Xóa quyền vai trò:

• Quản trị viên quyền vai trò muốn xóa

• Nhấn nút xóa để thực hiện xóa quyền vai trò

• 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 kiểm tra sự ràng buộc của quyềnvai trò đó Nếu tồn tại các ràng buộc, không thể xóa bỏ thì hiển thị khôngbáo và hủy yêu cầu xóa, ngược lại thực hiện xóa quyền vai trò đã chọn

▫ Nếu không đồng ý thì hệ thống hủy sự kiện

▫ 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 đó Usecasekết thúc

▫ Hậu điều kiện: Cập nhật các thông tin quyền vai trò vào cơ sở dữ liệu

3.2. Biểu đồ hoạt động:

3.2.1. Biểu đồ hoạt động Usecase của tác nhân MEMBER:

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