xây dựng website mạng xã hội

Lời nói đầu Trước tiên, chúng em xin được gửi lời cảm ơn đến cô Đào Thị Lệ Thủy đã giúp đỡ chúng em trong quá trình th c hi n bài t p l n vự ệ ậ ớ ới đề tài “Xây dựng website mạng xã hội

TRƯỜNG ĐẠI HỌC GIAO THÔNG VÂN TẢI KHOA CÔNG NGH THÔNG TIN Ệ

Lời nói đầu

Trước tiên, chúng em xin được gửi lời cảm ơn đến cô Đào Thị Lệ Thủy đã giúp đỡ chúng em trong quá trình th c hi n bài t p l n vự ệ ậ ớ ới đề tài “Xây dựng website mạng xã hội”.

Chúng em đã cùng nhau xây dựng một ứng dụng web hoàn chỉnh để cho phép người dùng chia sẻ và tương tác với các hình ảnh và video cũng như tương tác giữa các người dùng Điều này yêu cầu nhóm chúng em phải sử dụng nhiều kĩ thuật lập trình khác nhau, t ừ front-end đến back-end, t ừ cơ sở ữ liệu đế d n b o m ả ật.

Trong bài báo cáo này, chúng em s trình bày chi ti t v quá trình phát tri n cẽ ế ề ể ủa ứng d ng, bao g m c các v n ụ ồ ả ấ đề chúng ta đã gặp ph i và cách gi i quy t chúng Chúng em ả ả ế cũng sẽ trình bày về các tính năng chính của ứng dụng và cách chúng em đã triển khai chúng

Chúng em hy v ng r ng báo nào này s giúp hiọ ằ ẽ ểu rõ hơn về quá trình phát tri n mể ột ứng dụng web và đồng thời trình bày được sự cố gắng cũng như đóng góp của tất cả các thành viên trong nhóm

Xin chân thành cảm ơn

2.3.2 Biểu đồ use case 13

2.3.3 Biểu đồ hoạt động (Activity Diagram) 14

2.3.4 Biểu đồ tuần t 22ự 2.4 Phân tích và thi t k d u 28ế ế ữ liệ 2.4.1 Các thực thể và mối liên k t giế ữa các th c thự ể 28

3.2.2 Giao di n thông báo 38ệ 3.2.3 Trang đăng nhập, đăng ký 39

3.3 Xây d ng giao di n trang qu n tr 43ự ệ ả ị 3.3.1 Giao di n trang ch qu n tr viên 43ệ ủ ả ị

3.3.2 Trang qu n lý bài viả ết bị báo cáo 43

3.3.3 Trang qu n lý tài kho n vi ph m 44ả ả ạ 3.4 Code x 44ử lý 3.4.1 Mô hình cài đặt 44

3.4.2 Code x ử lý gửi thông báo 45

3.4.3 Code x lý thêm, sử ửa, xóa bài viết 46

3.4.4 Code th ng kê báo cáo trang qu n tr viên 48ố ả ị Tài liệu tham kh o 57ả B ng phân công công vi c 58ả ệ

Hình 2.5: Biểu đồ hoạt động “Quản lý thông tin cá nhân” 16

Hình 2.6: Biểu đồ hoạt động “Đồng ý hoặc từ chối yêu cầu kết bạn” 16

Hình 2.7: Biểu đồ hoạt động “Bày tỏ cảm xúc về bài viết” 17

Hình 2.8: Biểu đồ hoạt động “Quản lý bài viết cá nhân” 18

Hình 2.9: Biểu đồ hoạt động “Quên mật khẩu” 19

Hình 2.10: Biểu đồ hoạt động “Quản lý bài viết bị báo cáo” 20

Hình 2.11: Biểu đồ hoạt động “Gửi yêu c u hoầ ặc hủy kết bạ ”n 20

Hình 2.12: Biểu đồ hoạt động “Tìm kiếm thông tin” 21

Hình 2.13: Biểu đồ tuần tự “Quản lý thông tin cá nhân” 22

Hình 2.14: Biểu đồ tuần tự “Bày tỏ cảm xúc về bài vi t 23ế ” Hình 2.15: Biểu đồ tuần tự “Quản lý bài vi t b báo cáo 24ế ị ” Hình 2.16: Biểu đồ tuần tự “Nhắn tin 24”

Hình 2.17: Biểu đồ tuần tự “Quản lý bài viết cá nhân” 25

Hình 2.18: Biểu đồ tuần tự “ ửi yêu cG ầu ho c h y kặ ủ ết bạn 26”

Hình 2.19: Biểu đồ tuần tự “Đồng ý hoặc từ chối yêu cầu kết bạn 27”

Hình 2.20: Biểu đồ tuần tự “Tìm kiếm thông tin” 27

Hình 2.21: Biểu đồ tuần tự “Quên mật kh u 28ẩ ” Hình 2.22: Mô hình thực thể liên kết 30

Hình 2.23: Mô hình quan hệ 31

Hình 3.24: Quan hệ giữa các bảng trong cơ sở ữ liệ d u 37

Hình 2.25: Giao diện trang ch ủ người dùng 38

Hình 2.26: Giao diện thông báo 38

Hình 3.27: Giao diện trang đăng nhập 39

Hình 3.28: Giao diện trang đăng ký 39

Hình 3.29: Giao diện trang kết qu tìm kiả ếm 40

Hình 3.30: Giao diện trang cá nhân 40

Hình 3.31: Giao diện trang chỉnh s a thông tin cá nhân 41ử Hình 3.32: Giao diện trang qu n lý danh sách b n bè 41ả ạ Hình 3.33: Giao diện trang đăng bài viết mới 42 Hình 3.34: Giao diện trang tin nh n 42ắ Hình 3.35: Giao diện trang ch qu n tr viên 43ủ ả ị Hình 3.36: Giao diện trang qu n lý bài vi t b báo cáo 43ả ế ị Hình 3.37: Giao diện trang qu n lý tài kho n vi ph m 44ả ả ạ B ng 6.1: B ng phân công công vi c 58ả ả ệ

Chương I: Tìm hiểu các công nghệ sử dụng

1.1 PHP

Ngôn ng PHP (Hypertext Preprocessor) là ngôn ng l p trình phía máy ch ph biữ ữ ậ ủ ổ ến và m nh mạ ẽ được s d ng trong phát triử ụ ển web Đượ ạc t o ra bởi Rasmus Lerdorf vào năm 1994, PHP đã trở thành một trong những ngôn ngữ lập trình web phổ biến nhất trên thế gi ới.

Một số đặc điểm quan tr ng c a PHP bao gọ ủ ồm:

- Hỗ trợ m nh m ạ ẽ cho cơ sở ữ liệu: PHP tích h p t d ợ ốt với nhiều h qu n tr ệ ả ị cơ sở ữ liệu d ph biổ ến như MySQL, PostgreSQL, Oracle, …

- Hỗ trợ đa nền tảng: PHP có thể chạy trên h u h t các hầ ế ệ điều hành ph biổ ến như Windows, Linux, macOS và nhiều hơn nữa Điều này đảm bảo tính tương thích và khả năng triển khai linh hoạt cho các ứng dụng web

- Thư viện và framework phong phú: PHP có một cộng đồng phát triển mạnh mẽ, cung cấp nhiều thư viện và framework ph biổ ến như Laravel, Symfony, CodeIgniter, - Tích hợp t t v i HTML và CSS: PHP cho phép l p trình viên tố ớ ậ ạo ra các trang web động

b ng cách k t h p mã PHP vằ ế ợ ới mã HTML và CSS Điều này giúp t o ra giao diạ ện người dùng tương tác và hấp dẫn

Với s linh hoự ạt, tính năng mạnh m và cẽ ộng đồng lớn, PHP đã trở thành m t công ộ cụ ưu việt cho việc phát triển ng d ng web ứ ụ

1.2 H ệ quản trị cơ sở ữ dliệu MySQL

MySQL là m t h qu n trộ ệ ả ị cơ sở ữ liệ d u quan h mã ngu n m ph biệ ồ ở ổ ến và được s ử d ng r ng rãi trên toàn c u ụ ộ ầ

MySQL được phát triển bởi một cộng đồng lớn, đa dạng và nhiều kinh nghiệm Các tính năng và khả năng của MySQL đã được kiểm chứng và được sử dụng trong các ứng d ng web, hụ ệ thống quản lý cơ sở ữ liệ d u doanh nghi p và nhiệ ều lĩnh vực khác trên toàn thế giớ Mi ột số đặc điểm nổi bậ ủt c a MySQL:

- Tính ổn định và độ tin cậy cao MySQL cung cấp khả năng xử lý tải lớn và khả năng m r ng, cho phép nâng cao hi u su t và khở ộ ệ ấ ả năng mở ộ r ng c a hủ ệ thống khi c n thi ầ ết.

- Hỗ trợ nhi u ngôn ng l p trình ph biề ữ ậ ổ ến như PHP, Java, Python, Điều này giúp người phát tri n có th t o ra các ng dể ể ạ ứ ụng đa dạng và m nh mạ ẽ, tương tác với cơ sở d ữ liệu MySQL m t cách d dàng ộ ễ

- Cung cấp các tính năng an ninh và quản lý d ữ liệu m nh m , h ạ ẽ ỗ trợ các ch xác thế độ ực, mã hóa dữ liệu và quản lý người dùng linh ho t, giúp b o v dạ ả ệ ữ liệu quan tr ng khọ ỏi những nguy cơ bên ngoài.

- Cung c p m t lo t công c và ti n ích hấ ộ ạ ụ ệ ỗ trợ quản lý cơ sở ữ liệu như MySQL d Workbench, cho phép quản tr viên dị ễ dàng thiết kế, tạo c u trúc và thao tác vấ ới cơ sở d u ữ liệ

- Có khả năng tương thích cao với các hệ thống khác và hỗ trợ chuẩn SQL đầy đủ Điều này cho phép d dàng chuyễ ển đổi và tích hợp cơ sở ữ liệ d u MySQL v i các ng dớ ứ ụng hoặc h thốệ ng s n có ẵ

1.3 ReactJS

ReactJS là m t framework JavaScript ph biộ ổ ến được sử d ng r ng rãi trong phát triụ ộ ển ứng dụng web hiện đại Với cách tiếp cận khái niệm "Single-Page Application" (SPA), ReactJS cho phép xây d ng giao diự ện người dùng linh hoạt, tương tác và hiệu qu ả

Một điểm m nh c a ReactJS là khạ ủ ả năng tái sử ụ d ng thành ph n (component-based) ầ Thay vì xây d ng toàn b giao di n t ự ộ ệ ừ đầu, ReactJS cho phép chia nh các thành ph n giao ỏ ầ di n thành các ph n nhệ ầ ỏ hơn, có thể được s d ng l i trong nhi u vử ụ ạ ề ị trí khác nhau Điều này giúp tăng tính module, giảm sự lặp lại và dễ dàng bảo trì mã nguồn ReactJS cũng hỗ trợ vi c qu n lý tr ng thái ệ ả ạ ứng d ng m t cách hi u qu thông qua khái ni m "Virtual DOM" ụ ộ ệ ả ệ (Document Object Model) ReactJS cũng rất linh ho t trong vi c tích h p v i cáạ ệ ợ ớ c thư viện và framework khác V i cớ ộng đồng l n và s hớ ự ỗ trợ m r ng, có r t nhi u gói m r ng ở ộ ấ ề ở ộ (packages) và công cụ hữu ích cho ReactJS như Redux, React Router, Axios, và nhiều hơn nữa Điều này giúp tăng tốc quá trình phát triển và m r ng khở ộ ả năng của ứng d ng ụ

Ngoài ra, ReactJS được phát triển và duy trì bởi Facebook, một trong những công ty công nghệ hàng đầu th giế ới Điều này đảm b o rả ằng ReactJS được c p nh t và phát triậ ậ ển liên tục, đồng thời có được sự ỗ trợ và tài li u phong phú t c h ệ ừ ộng đồng phát tri n ể

Chương II: Tìm hiểu bài toán và phân tích thiết kế hệ thống

2.1 Mục đích – Phạm vi

- Mục đích: h ệi n nay m ng xã hạ ội đã trở thành m t ph n không thộ ầ ể thiếu trong cu c s ng ộ ố hiện đạ Đâyi không ch là m t công c giao ti p và kỉ ộ ụ ế ết nối mọi người, mà còn là m t n n ộ ề t ng quan tr ng cho các hoả ọ ạt động quảng bá thương hiệu, cung c p thông tin và gi i trí ấ ả Đây là một đề tài tiềm năng và có tính thiết thực cao Vì vậy nhóm đã l a chự ọn đề tài này v i mớ ục đích trau dồi, luy n t p và ệ ậ ứng d ng các ki n thụ ế ức đã được học trong b môn công ộ ngh ph n m m vào quá trình phát tri n và qu n lý d ệ ầ ề ể ả ự án.

- Phạm vi: tri n khai cho mể ột trường đại học hoặc một doanh nghi p vệ ừa và nhỏ Với mục đích và phạm vi này, nhóm em hy v ng s t o ra m t m ng xã h i h p d n, ọ ẽ ạ ộ ạ ộ ấ ẫ chất lượ , đáp ứng đượng c các nhu cầu cơ bản của người dùng đồng thời thu được kinh nghi m và ki n th c b ích trong vi c phát tri n hệ ế ứ ổ ệ ể ệ thống website s d ng ngôn ng PHP ử ụ ữ và h qu n tr ệ ả ị cơ sở ữ liệ d u MySQL

- Kết quả kh o sát: H u hả ầ ết các trang ạm ng xã hội đều bao g m các ph n: ồ ầ

o Hồ sơ cá nhân: Mỗi trang mạng xã hội đều cung cấp một hồ sơ cá nhân cho người dùng H ồ sơ này cho phép người dùng t o và qu n lý thông tin cá nhân, bao g m hình ạ ả ồ ảnh đại diện, thông tin cá nhân, sở thích và liên kết với bạn bè

o B ng tin ho c feed: hi n th các thông tin, hình nh, video ho c bài vi t t b n bè, ả ặ ể ị ả ặ ế ừ ạ trang và nhóm mà người dùng quan tâm

o Kết nối và tương tác: cho phép người dùng k t nế ối và tương tác với nhau Người dùng có th k t b n, theo dõi ho c thêm vào danh sách b n bè Hể ế ạ ặ ạ ọ cũng có thể tương tác với nội dung c a nhau b ng cách nh n like, bình lu n hoủ ằ ấ ậ ặc chia sẻ

o Tin nhắn và thông báo: người dùng có th g i tin nhể ử ắn riêng tư cho nhau Ngoài ra, thông báo cũng được sử dụng để báo cho người dùng về các hoạt động mới như lời nh n, bình lu n ho c thông báo t b n bè ắ ậ ặ ừ ạ

o Tìm kiếm và khám phá: người dùng có th tìm ki m b n bè, nhóm, trang ho c nể ế ạ ặ ội dung mới Các tính năng này giúp người dùng khám phá và kết nối v i nhớ ững người có sở thích hoặc quan điểm tương tự

Ngoài ra, m ng xã h i còn cạ ộ ần đảm b o tính b o m t và quyả ả ậ ền riêng tư: người dùng có thể ki m soát ai có thể ể xem và tương tác với nội dung c a h Các tùy ch n này giúp ủ ọ ọ người dùng duy trì quyền riêng tư và an toàn trên mạng xã h i ộ

2.3 Phân tích và thiết kế chức năng 2.3.1 Phân tích nghi p v ệ ụ

Các nghi p v ệ ụ cơ bản: lưu trữ, hi n th và qu n lý các thông tin: ể ị ả

- Thông tin tài kho n cả ủa người dùng, thông tin các bài vi t bao g m hình nh, video, ế ồ ả nội dung bài viết, s ố lượt bày tỏ ả c m xúc và bình lu n c a bài vi ậ ủ ết.

- Tin nh n gi a các tài kho n ắ ữ ả

- Thông tin các m i quan h gi a các tài khoố ệ ữ ản: trong đó có các tình trạng quan hệ: yêu cầu kết bạn, bạn bè, chặn

Hệ thống có 2 lớp đối tượng là người dùng (user) và qu n tr viên (admin) ả ị - Lớp người dùng (user) có các chức năng:

o Quản lý thông tin cá nhân: người dùng có thể chỉnh sửa các thông tin cá nhân của tài khoản như ngày sinh, tên hiển thị, giới tính, mật khẩu, …

o Quản lý bài vi t cá nhân ế

▪ Đăng bài: có thể bao gồm hình nh ho c video ả ặ ▪ Xóa bài: người dùng có thể xoá bài đăng của mình

▪ S a bài vi t: có th ử ế ể chỉnh s a n i dung bài vi t, ch nh s a hình ử ộ ế ỉ ử ảnh, video và quyền hi n th c a bài vi ể ị ủ ết

o Xem trang cá nhân c a tài khoủ ản khác: người dùng có thể xem được các thông tin và bài vi t c a tài khoế ủ ản đó tùy thuộc vào đối tượng hi n th c a bài viể ị ủ ết đó Đối tượng hiển thị c a bài viết là m t trong các lựa ch n: công khai, bạn bè, ch mình ủ ộ ọ ỉ tôi

o Nhắn tin cho m t tài khoộ ản khác: người dùng có th nh n tin cho tài kho n khác, ể ắ ả xem tr ng thái hoạ ạt động và lịch sử tin nh n vắ ới tài khoản đó.

o Kết bạn:

▪ Người dùng có thể g i yêu c u k t b n cho mử ầ ế ạ ột tài khoản khác

▪ Tài kho n nhả ận được yêu c u k t b n có th l a ch n ch p nh n yêu c u k t bầ ế ạ ể ự ọ ấ ậ ầ ế ạn hoặc từ chối yêu c u kầ ết bạn Nếu đồng ý thì hai tài khoản s thành b n bè ẽ ạ

o Bình luận vào m t bài vi t ộ ế

o Bày t c m xúc v m t bài viỏ ả ề ộ ết: người dùng có th bày t c m xúc v m t bài vi t, ể ỏ ả ề ộ ế bao g m m t trong các cồ ộ ảm xúc: thích, yêu thích, thương thương, haha, wow, buồn và ph n n ẫ ộ

o Báo cáo bài viết: người dùng có th báo cáo m t bài vi t n u th y bài viể ộ ế ế ấ ết đó vi phạm tiêu chuẩn cộng động hoặc có quan điểm gây thù địch.

o Chặn m t tài kho n khác: tài kho n b ộ ả ả ị chặn s không th xem trang cá nhân và nhẽ ể ắn tin cho bạn

o Xem thông báo: người dùng nhận được thông báo thời gian thực khi: có tin nhắn được gửi t i, tài khoản bạn bè có bài viết hoặc hoạt đ ng m i ớ ộ ớ

o Tìm kiếm thông tin: người dùng có th tìm ki m bài vi t ho c tài kho n khác qua ể ế ế ặ ả thanh tìm kiếm

o Quên mật khẩu: người dùng có th gể ửi yêu cầu đặt l i m t khạ ậ ẩu nếu đã quên - L p qu n ớ ả trị viên (admin) có các chức năng cơ bản gi ng v i l p user, ngoài ra còn có ố ớ ớ

thêm các chức năng:

o Xem báo cáo tổng quan: bao g m tóm tắt nhanh về các thông tin: ồ

▪ S ố lượng tài khoản đăng kí mới, s ố lượng bài vi t mế ới trong tu n, s ầ ố lượt báo cáo bài vi t trong tu n ế ầ

▪ Biểu đồ số lượng người dùng theo độ tuổi

▪ Biểu đồ số lượng tài khoản đăng kí, số lượng bài viết và số lượt báo cáo theo t ng ngày ừ

o Quản lý tài kho n: xem danh sách tài kho n có nhi u bài viả ả ề ết bị báo cáo nh t, khoá ấ một tài khoản b nhiị ều lượt báo cáo.

o Quản lý bài viết bị báo cáo: qu n tr viên có th xem xét n ho c xóa các bài vi t có ả ị ể ẩ ặ ế lượt báo cáo cao hoặc vi ph m các tiêu chu n cạ ẩ ộng đồng

o Gửi c nh cáo cho tài khoả ản người dùng: g i c nh cáo cho các tài kho n có nhiử ả ả ều lượt báo cáo hoặc các tài kho n có hành vi vi ph m tiêu chuẩn cả ạ ộng đồng

2.3.2 Biểu đồ use case

Hình 2.1: Use-case diagram

2.3.3 Biểu đồ hoạt động (Activity Diagram) - Biểu đồ hoạt động “Đăng nhập”

- Biểu đồ hoạt động “Nhắn tin”

Hình 2.3: Biểu đồ hoạt động “Nhắn tin” - Biểu đồ hoạt động “Bình luận”

- Biểu đồ hoạt động “Quản lý thông tin cá nhân”

- Biểu đồ hoạt động “Đồng ý ho c t ặ ừ chối yêu c u k t bầ ế ạn”

Hình 2.6: Biểu đồ hoạt động “Đồng ý hoặc t ch i yêu cầu k t b nừ ố ế ạ ”

- Biểu đồ hoạt động “Bày tỏ ảm xúc v bài vi c ề ết”

- Biểu đồ hoạt động “Quản lý bài viết”

- Biểu đồ hoạt động “Quên mật khẩu”

- Biểu đồ hoạt động “Quản lý bài vi t b ế ị báo cáo”

Hình 2.10: Biểu đồ hoạt động “Quản lý bài viế ị t b báo cáo” - Biểu đồ hoạt động “Gửi yêu c u ho c h y k t bầ ặ ủ ế ạn”

Hình 2.11: Biểu đồ hoạt động “Gửi yêu c u ho c h y k t b nầ ặ ủ ế ạ ”

- Biểu đồ hoạt động “Tìm kiếm thông tin”

2.3.4 Biểu đồ tuần t ự

- Biểu đồ tuầ ự “Quản lý thông tin cá nhân” n t

- Biểu đồ tuầ ự “Bày tỏ ản t c m xúc v bài viề ết”

Hình 2.14: Biểu đồ tuần tự “Bày t c m xúc v bài viỏ ả ề ết”

- Biểu đồ tuầ ự “Quản t n lý bài vi t b ế ị báo cáo”

- Biểu đồ tuầ ự “Nhắn tin” n t

- Biểu đồ tuầ ự “Gửn t i yêu c u ho c h y k t bầ ặ ủ ế ạn”

Hình 2.18: Biểu đồ tuần tự “Gửi yêu c u ho c h y k t b nầ ặ ủ ế ạ ”

- Biểu đồ tuầ ự “Đồn t ng ý ho c t ặ ừ chối yêu c u k t bầ ế ạn”

Hình 2.19: Biểu đồ tuần tự “Đồng ý ho c tặ ừ chối yêu cầu k t bế ạn” - Biểu đồ tuầ ự “Tìm kiếm thông tin” n t