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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (4.79 MB, 26 trang )

Trang 1<div class="page_container" data-page="1">

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

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

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ênDanh sách sinh viên:

1. Nguyễn Bá Thành - 201931152. Nguyễn Tiến Thành - 201931183. Trần Xuân Khải - 20192926

Hà Nội, 08/2022

</div>Trang 2<div class="page_container" data-page="2">

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

</div>Trang 3<div class="page_container" data-page="3">

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

</div>Trang 4<div class="page_container" data-page="4">

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.

</div>Trang 5<div class="page_container" data-page="5">

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ứcvà xây dựng hồn tồ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

</div>Trang 6<div class="page_container" data-page="6">

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ậpChức năng đăng xuấtChức năng tạo tài khoản

</div>Trang 7<div class="page_container" data-page="7">

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

Chức năng xem tất cả các bài viétChức năng chỉnh sửa thông tin tài khoảnChức năng xóa tài khoản

Chức năng chỉnh sửa bài viết của mìnhChức năng xóa bài viết của mình2.2 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ả chun hoặckhơng chun 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áttriể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

</div>Trang 8<div class="page_container" data-page="8">

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

</div>Trang 9<div class="page_container" data-page="9">

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 để đăngnhập website

Điều kiện để sử dụng thànhcông (Pre-Condition)

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

Hiện tượng xảy ra sau khithự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

</div>Trang 10<div class="page_container" data-page="10">

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

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

1. Người dùng truy cập trang web2. Người dùng chọn “REGISTER”

3. Người dùng điền thông tin tài khoản, mậtkhẩu và email rồi chọn “Đăng ký”

4. Tài khoản người dùng được tạo và lưu trữtrong hệ thống cơ sở dữ liệu

Luồng tương tác thay thế(Alternative Flow)

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ànhcô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 khithự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

</div>Trang 11<div class="page_container" data-page="11">

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êntrang web

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

Điều kiện để sử dụng thànhcông (Pre-Condition)

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

- Người dùng đã đăng nhập

Hiện tượng xảy ra sau khi - Hệ thống thông báo đã đăng bài viết thành

</div>Trang 12<div class="page_container" data-page="12">

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

- 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 (BasicFlow)

1. Người dùng chọn “WRITE” trên option bar2. Người dùng hồ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àiviế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

Điều kiện để sử dụng thànhcông (Pre-Condition)

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

- Người dùng đã đăng nhập- Người dùng là tác giả của bài viết

</div>Trang 13<div class="page_container" data-page="13">

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

</div>Trang 14<div class="page_container" data-page="14">

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

</div>Trang 15<div class="page_container" data-page="15">

ID người dùng

Tên hiển thị

Email cánhân

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 sinhID người dùng Email cá nhânID người dùng Giới tínhID người dùng Ảnh đại diệnID người dùng Mật khẩuID người dùng Số bài đăngID người dùng Đánh giá

è 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

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

</div>Trang 16<div class="page_container" data-page="16">

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ã

Ảnhtiêu đề

Tags Nộidungbàiđăng

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 đăngMã bài đăng Thời gian đăng bàiMã 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ệ:ID

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

</div>Trang 17<div class="page_container" data-page="17">

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⟹ Quan hệ ở dạng chuẩn 3

</div>Trang 18<div class="page_container" data-page="18">

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

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

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

</div>Trang 19<div class="page_container" data-page="19">

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

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

</div>Trang 20<div class="page_container" data-page="20">

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

</div>Trang 21<div class="page_container" data-page="21">

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

</div>Trang 22<div class="page_container" data-page="22">

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

</div>Trang 23<div class="page_container" data-page="23">

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

</div>Trang 24<div class="page_container" data-page="24">

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

</div>Trang 25<div class="page_container" data-page="25">

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.

</div>Trang 26<div class="page_container" data-page="26">