báo cáo đồ án thiết kế i dự án website blog chia sẻ

Song, mạng xã hội vẫn chưa phải là không gian phù hợp dành chonhững người khát khao tìm đọc những bài viết có giá trị thực sự cao về mặt nộidung vì bên cạnh những bài viết thực sự, mạng

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI

VIỆN ĐIỆN TỬ VIỄN THÔNG

===o0o===

BÁO CÁO ĐỒ ÁN THIẾT KẾ I

DỰ ÁN: WEBSITE BLOG CHIA SẺ

Giảng viên hướng dẫn: TS Đào Trung Kiên

Danh sách sinh viên:

1 Nguyễn Bá Thành - 20193115

2 Nguyễn Tiến Thành - 20193118

3 Trần Xuân Khải - 20192926

Hà Nội, 08/2022

M c l c ụ ụ

Phần A Tổng quan về dự án blog chia sẻ 4

I Đặt vấn đề 4

II Mục đích của đề tài 4

III Phân tích tính khả thi 5

IV Tìm hiểu yêu cầu 5

1 Thu thập yêu cầu 5

2 Các yêu cầu chức năng và phi chức năng 6

V Tổng quan về dự án website 7

1 Tổng quan 7

2 Môi trường phát triển 7

Phần B Phân tích thiết kế hệ thống 8

I Sơ đồ chức năng của hệ thống 8

II Sơ đồ Use-case 8

1 Sơ đồ Use-case 8

2 Đặc tả Use-case 9

III Biểu đồ hoạt động 20

1 Biểu đồ hoạt động đăng nhập, tạo tài khoản 20

2 Biểu đồ hoạt động viết bài viết 21

3 Biểu đồ hoạt động của chỉnh sửa bài viết 23

4 Biểu đồ hoạt động của xóa bài viết 24

5 Biểu đồ hoạt động của chỉnh sửa thông tin cá nhân 25

6 Biểu đồ hoạt động của xóa tài khoản 26

7 Biểu đồ hoạt động của bình luận bài viết 27

8 Biều đồ hoạt động của thích bài viết 28

9 Biểu đồ hoạt động của tìm kiếm bài viết 29

IV Biểu đồ lớp 30

V Sơ đồ thực thể liên kết 30

1 Lược đồ quan hệ và phụ thuộc hàm 30

2 Sơ đồ thực thể liên kết 33

3 Lược đồ quan hệ 33

VI Thiết kế dữ liệu 34

1 Dữ liệu người dùng 34

2 Cơ sở dữ liệu bài viết 35

3 Dữ liệu thể loại bài viết 36

VII Thiết kế giao diện 37

1 Giao diện trang chủ (HOME) 37

2 Giao diện đăng nhập, đăng ký 38

3 Giao diện bài viết 39

4 Giao diện viết bài (WRITE) 40

5 Giao diện chỉnh sửa thông tin cá nhân 41

Phần C Tài liệu tham khảo 42

Phầần A T ng quan vềầ d án blog chia s ổ ự ẻ

I Đặt vấn đề

Ở thời đại mà internet phát triển, đi cùng với nó là sự phổ biến và dễ tiếpcận người dùng của thiết bị điện tử khiến cho việc trao đổi và chia sẻ thông tintrở lên đơn giản hơn và theo đó cũng đẩy nhu cầu được phổ cập, ham muốnđược bắt kịp xu thế về kiến thức của đại chúng lên hơn bao giờ hết

Chúng ta có thể thấy một dạng dịch vụ phổ biến hiện nay như mạng xãhội sinh ra để đáp ứng rất tốt cho nhu cầu này Mạng xã hội cho phép chúng tachia sẻ, tương tác, xây dựng ý kiến làm cho nội dung ngày càng được phongphú, cải thiện Song, mạng xã hội vẫn chưa phải là không gian phù hợp dành chonhững người khát khao tìm đọc những bài viết có giá trị thực sự cao về mặt nộidung vì bên cạnh những bài viết thực sự, mạng xã hội có rất nhiều loại bài viếtchỉ mang tính chất chia sẻ cảm xúc, trạng thái thông qua những câu từ ngắn gọn,

…

Đó là lý do mà một kiểu website được gọi là blog được xây dựng nhằmđem đến cho những con người ham đọc, thích sự chiêm nghiệm có thể tiếp cậnnhững thông tin, trải nghiệm đọc tuyệt vời thông qua những câu từ, giọng vănchuyên nghiệp hơn của các tác giả, những người yêu viết lách thực sự Ngoài ra,một blog chia sẻ còn kế thừa những tính năng hợp xu thế của mạng xã hội đó làbất kể ai cũng có thể tham gia viết bài và người đọc có thể đánh giá, bình luậnbài viết

II Mục đích của đề tài

Thông qua việc khảo sát thực trạng hiện tại, những khó khăn nhược điểm,yêu cầu đặt ra phải xây dựng một phương thức, công cụ mang tính chất nhanhgọn, chính xác và hiệu quả để chia sẻ kiến thức Từ đó tăng tính linh hoạt, khảnăng tiếp cận thông tin đến mọi người:

1 Chia sẻ thông tin, kiến thức thực tế đến với mọi người dùng Internet

2 Mang lại sự thoải mái, thuận tiện cho người dùng

3 Thỏa mãn được hạn chế về chi phí con người, tài chính: tiết kiệm được nguồn nhân lực, chi phí nhân công khi trước kia phải phải thuê người thông báo tin tức hoặc là mua báo truyền thống.Tạo ra một hệ thống mang tính khoa học, mở rộng áp dụng trên quy mô lớn, dễdàng trong việc nâng cấp, cải thiện phần mềm cho phù hợp Người dùng dễ dàngtìm kiếm, học hỏi, bài tỏ cảm xúc, đánh giá.

III Phân tích tính khả thi

1 Tính khả thi về mặt kỹ thuật

Hệ thống thiết kế trên nền Web sử dụng HTML, Visual Code, CSS, Javascriptđem lại lợi ích rất lớn cho người sử dụng: dễ sử dụng, có thể vận hành trên cảmáy tính và điện thoại, đáp ứng được tiêu chí vận hành 24/7

Bên cạnh đó cũng có những khó khăn cản trở: Hệ thống được tổ chức

và xây dựng hoàn toàn bởi nhóm sinh viên nên kinh nghiệm làm việccòn yếu, chưa được tiếp xúc nhiều với các ngôn ngữ được sử dụng,thời gian xây dựng hệ thống cũng không nhiều

3 Tính khả thi về mặt tổ chức

Hệ thống có thể hiển thị các bài post một cách khoa học để giúp kiểmsoát tốt hơn, giúp người đọc tiếp cần tốt hơn đến bài post

IV Tìm hiểu yêu cầu

1 Thu thập yêu cầu

User story

U1 Là người dùng, tôi muốn có tài khoản để đăng nhập vào hệ thống.

U2 Là người dùng, tôi muốn đăng nhập vào trang web

U3 Là người dùng, tôi muốn có thể đăng xuất ra khỏi ứng dụng khikhông có nhu cầu sử dụng

U4 Là người dùng, tôi muốn có thể xem danh sách các bài viết có trong hệ thống

U5 Là người dùng, tôi muốn xem chi tiết bài một bài viết.U6 Là người dùng, tôi muốn like một bài viết mà mình đang đọc, đánh giá

U7 Là người dùng, tôi muốn bình luận về một bài viết mà mình đang đọc

U8 Là người dùng, tôi muốn xem và chỉnh sủa thông tin tài khoản của mình khi cần thiết

U9 Là người dùng, tôi muốn chỉnh sửa bài viết của mình trong trường hợp bài viết có lỗi hoặc cần cập nhật thông tin có trong bài viết đó

U10 Là người dùng, tôi muốn xóa bài viết của mình trong hệ thống

U11 Là người dùng, tôi muốn xem xóa tài khoản khi cần thiết.U12 Là người dùng, tôi muốn đăng bài viết của mình lên hệ thống cho mọi người có thể xem được

U13 Là người dùng, tôi muốn tìm kiếm bài viết có trên hệ thống

2 Các yêu cầu chức năng và phi chức năng

2.1 Yêu cầu chức năng

Phần mềm phải có các chức năng sau:

Chức năng đăng nhập

Chức năng đăng xuất

Chức năng tạo tài khoản

Chức năng tạo bài viết

Chức năng xem tất cả các bài viét

Chức năng chỉnh sửa thông tin tài khoản

Chức năng xóa tài khoản

Chức năng chỉnh sửa bài viết của mình

Chức năng xóa bài viết của mình

2.2 Yêu cầu phi chức năng

Phần mềm được thiết kế gọn nhẹ, giao diện thân thiện dễ sử dụng

Hệ thống hoạt động tin cậy 24h/ngày x 365 ngày/năm

Sử dụng ngôn ngữ lập trình NodeJs, ReactJs, Html, Css

Hệ quản trị cơ sở dữ liệu MongoDB Atlas

V Tổng quan về dự án website

1 Tổng quan

- Tên đề tài: “Website blog chia sẻ”

- Là một website cung cấp không gian cho những tác giả chuyên hoặckhông chuyên có thể viết bài và đăng tải nội dung theo nhiều chủ đề khácnhau Qua đó, những bài viết có thể tới với người đọc thông qua nhữngchủ đề họ quan tâm Người đọc có thể tự do đánh giá, bình luận bài viếtkhuyến khích tương tác tạo môi trường cởi mở đồng thời tác giả có thểkiếm được lợi nhuận tương ứng với những gì họ đã đóng góp cho cộngđồng người đọc

2 Môi trường phát triển

- Ngôn ngữ: HTML, CSS, Javascript

- Công cụ thực hiện: Visual Studio Code, Postman, MongoDB

- Công nghệ liên quan: ReactJS, ExpressJS

Phầần B Phần tch thiềết kềế h thốếng ệ

I Sơ đồ chức năng của hệ thống

Từ yêu cầu về chức năng thu thập được từ khách hàng, sau quá trình phântích ta có mô hình chức năng:

Hình 1 Sơ đồ chức năng

II Sơ đồ Use case

1 Sơ đồ Use case

Hình 2 Sơ đồ Usecase

2 Đặc tả Use case

2.1 Đăng ký

Mô tả Là khách, tôi muốn đăng ký tài khoản cá nhân

để có thể đăng nhập hệ thống

Điều kiện kích hoạt (Trigger) Người dùng muốn đăng ký tài khoản để đăng

Hiện tượng xảy ra sau khi

thực hiện thành công

(Post Hệ thống thông báo đăng ký thành công

- Người dùng có thể dùng tài khoản vừa đăng

Condition) ký thành công để đăng nhập

Luồng tương tác chính (Basic

2a Người dùng chọn “LOGIN”

2a1 Người dùng chọn “REGISTER” đểchuyển từ đăng nhập sang đăng ký

Use case tiếp tục bước 3

Luồng tương tác ngoại lệ

(Exception Flow)

4b Hệ thống đối chiếu “tên tài khoản” hoặc

“email” đã tồn tại trên cơ sở dữ liệu và hiển thịthông báo

Use case quay lại bước 3Bảng 2.1 Đặc tả Use case Đăng ký2.2 Đăng nhập

Mô tả Là khách, tôi muốn đăng nhập vào ứng dụng

để sử dụng dịch vụ hệ thống

Điều kiện kích hoạt (Trigger) Người dùng muốn đăng nhập vào hệ thống

Điều kiện để sử dụng thành

công (Pre-Condition)

- Tài khoản người dùng đã đăng ký thành công

- Thiết bị của người dùng đã được kết nốiInternet

Hiện tượng xảy ra sau khi

thực hiện thành công

(Post-Condition)

Người dùng có thể sử dụng mọi tính năng củawebsite

Luồng tương tác chính (Basic

Flow) 1 Người dùng truy cập trang web2 Người dùng chọn “LOGIN”

3 Người dùng nhập tài khoản, mật khẩu vàclick “Đăng nhập”

4 Hệ thống xác thực thông tin đăng nhậpthành công và cho phép người dùng có thể sửdụng mọi tính năng của website

Luồng tương tác thay thế

(Alternative Flow) 2a Người dùng click vào các mục yêu cầu cầnphải đăng nhập như “Viết bài”,…

2a1 Hệ thống chuyển sang màn hình đăngnhập

Use case tiếp tục bước 3

Luồng tương tác ngoại lệ

(Exception Flow)

4b Hệ thống xác thực thông tin đăng nhậpkhông thành công và hiển thị thông báo (Dotài khoản hoặc mật khẩu người dùng điềnkhông đúng)

Use case tiếp tục bước 3Bảng 2.2 Đặc tả Use case Đăng nhập2.3 Quản lý bài viết

2.3.1 Đăng bài viết

Tên Use-case Đăng bài viết

Mô tả Là người dùng, tôi muốn viết và đăng bài lên

trang web

Điều kiện kích hoạt (Trigger) Người dùng muốn đăng bài viết

thực hiện thành công

(Post-Condition)

công

- Bài viết người dùng vừa đăng được hiển thịtrên trang chủ để mọi người có thể dễ dàngtiếp cận

Luồng tương tác chính (Basic

Flow)

1 Người dùng chọn “WRITE” trên option bar

2 Người dùng hoàn thiện các thông tin cầnthiết của một bài đăng (tiêu đề, ảnh bìa, nộidung,…)

3 Người dùng ấn “Đăng bài”

4 Bài viết được đăng thành công và được lưutrữ vào cơ sở dữ liệu

5 Website sẽ hiển thị bài viết vừa đăng lêntrang chủ

Luồng tương tác thay thế

(Alternative Flow)

Không có luồng tương tác thay thế

Luồng tương tác ngoại lệ

(Exception Flow)

4b Hệ thống thông báo người dùng điền thiếucác thuộc tính bắt buộc của bài viết (tiêu đề,nội dung)

Use case quay lại bước 2Bảng 2.3.1 Đặc tả Use case Đăng bài viết

2.3.2 Chỉnh sửa bài viết

Tên Use-case Chỉnh sửa bài viết

Mô tả Là người dùng, tôi muốn thay đổi thông tin bài

viết (tiêu đề, nội dung, ảnh bìa)

Điều kiện kích hoạt (Trigger) Người dùng muốn chỉnh sửa bài viết

Hình 3.8: Biểu đồ hoạt động của thích bài viết

9 Biểu đồ hoạt động của tìm kiếm bài viết

Hình 3.9: Biểu đồ hoạt động của tìm kiếm bài viết

IV Biểu đồ lớp

Hì

nh 4: Biểu đồ lớp của hệ thống

V Sơ đồ thực thể liên kết

1 Lược đồ quan hệ và phụ thuộc hàm

1.1 Lược đồ quan hệ Người dùng

- Ta có lược đồ quan hệ Người dùng (ID người dùng, tên, ngày sinh,email, giới tính, ảnh đại diện, mật khẩu đăng nhập hệ thống, số bài đăng, điểmđánh giá)

- Ta có quan hệ:

l cánhân

Giớitính

Ảnhđạidiện

Mậtkhẩu

Sốbàiđăng

Đánhgiá

Bảng 5.1 Quan hệ Người dùng

- Ta có các phụ thuộc hàm:

ID người dùng Tên hiển thị

ID người dùng Ngày sinh

ID người dùng Email cá nhân

è Khóa của quan hệ trên là : ID người dùng

- Ta thấy các phụ thuộc hàm trên đều là phụ thuộc hàm trực tiếp

è Quan hệ ở dạng chuẩn 3

1.2 Lược đồ quan hệ Bình luận

- Ta có lược đồ quan hệ Bình luận (Mã bài đăng, ID người dùng, Nộidung bình luận, Thời gian bình luận)

- Ta có quan hệ Bình luận:

Mã bàiđăng IDngười

dùng

Nộidungbìnhluận

Thờigianbìnhluận

Bảng 5.2 Quan hệ Bình luận

- Ta có các phụ thuộc hàm:

(Mã bài đăng, ID người dùng) Nội dung bình luận

(Mã bài đăng, ID người dùng) Thời gian bình luận

⟹ Khóa của quan hệ trên là cặp khóa: (Mã bài đăng, ID người

dùng)

- Ta thấy các phụ thuộc hàm trên đều là phụ thuộc hàm trực tiếp

⟹ Quan hệ ở dạng chuẩn 3

1.3 Lược đồ quan hệ Bài đăng

- Ta có lược đồ quan hệ Bài đăng (mã bài đăng, tiêu đề, ảnh tiêu đề, tags,nội dung bài đăng, thời gian đăng bài, điểm đánh giá)

- Ta có quan hệ Bài đăng:

Mã

bài

đăng

Tiêuđề

Ảnhtiêu đề

Tags Nộidungbàiđăng

Thờigianđăngbài

Điểmđánhgiá

Bảng 5.3 Quan hệ Bài đăng

- Ta có các phụ thuộc hàm:

Mã bài đăng Tiêu đề

Mã bài đăng Ảnh tiêu đề

Mã bài đăng Tags

Mã bài đăng Nội dung bài đăng

Mã bài đăng Thời gian đăng bài

Mã bài đăng Điểm đánh giá

⟹ Khóa của quan hệ trên là : Mã bài đăng

- Ta thấy các phụ thuộc hàm trên đều là phụ thuộc hàm trực tiếp

⟹ Quan hệ ở dạng chuẩn 3

1.4 Lược đồ quan hệ Điểm trên bài đăng

- Ta có lược đồ quan hệ Điểm trên bài đăng (ID người dùng, Mã bài đăng,Điểm)

- Ta có quan hệ:

IDngười Mã bàiđăng Điểm

Bảng 5.4 Quan hệ Điểm trên bài đăng

- Ta có các phụ thuộc hàm:

(ID người dùng, Mã bài đăng) Điểm

⟹ Khóa của quan hệ trên là cặp khóa: (ID người dùng, Mã bài đăng)

- Ta thấy các phụ thuộc hàm trên đều là phụ thuộc hàm trực tiếp

Hình 5.3 Lược đồ quan hệ

VI Thiết kế dữ liệu

1 Dữ liệu người dùng

Hình 6.1 Cơ sở dữ liệu người dùng

2 Cơ sở dữ liệu bài viết

Hình 6.2 Cơ sở dữ liệu của bài viết

3 Dữ liệu thể loại bài viết

Hình 6.3 Cơ sở dữ liệu của thể loại bài viết

VII Thiết kế giao diện

1 Giao diện trang chủ (HOME)

Hình 7.1.1 Giao diện trang chủ

Mô tả: Giao diện ban đầu khi người dùng truy cập trang website Nơi hiệnthị những bài viết nổi bật và mới được cập nhật (Hình 4.2) Khi đang ở pagekhác, người dùng có thế ấn HOME để quay trở lại trang chủ

Hình 7.1.2 Giao diện trang chủ

2 Giao diện đăng nhập, đăng ký

Hình 7.2.1 Giao diện đăng nhập

Hình 7.2.2 Giao diện đăng ký

3 Giao diện bài viết

Hình 4.3.1 Giao diện bài viết cá nhân

Hình 7.3.2 Xem bài viết của người khác (không có button sửa, xóa)

Mô tả: Nơi hiển thị bài viết với đầy đủ thông tin như tiêu đề, ảnh bìa, tácgiả, nội dung và ngày phát hành Khi tới đường link bài viết của mình đăng,người dùng có thêm lựa chọn sửa và xóa (Hình 4.3), ngược lại khi tới đườnglink bài đăng của người khác sẽ không có quyền sửa, xóa (Hình 4.4)

4 Giao diện viết bài (WRITE)

Hình 7.4 Giao diện viết bài

Mô tả: Sau khi đã đăng nhập, người dùng có khả năng viết và xuất bản bàiviết bằng cách ấn vào WRITE trên options bar.

5 Giao diện chỉnh sửa thông tin cá nhân

Hình 7.5 Giao diện chỉnh sửa thông tin cá nhân

Mô tả: Sau khi đăng nhập, người dùng có thể chỉnh sửa thông tin cá nhânbằng cách nhấn vào ảnh đại diện trên góc trên bên phải

Phầần C Tài li u tham kh o ệ ả

1 MERN app series – Lama Dev

2 System Analysis and Design – Shelly CashmanCùng các nguồn tham khảo trên mạng khác