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
Trang 1TRƯỜNG ĐẠI HỌC GIAO THÔNG VÂN TẢI KHOA CÔNG NGH THÔNG TIN Ệ -o0o -
BÀI T ẬP LỚ N MÔN H C Ọ CÔNG NGH Ệ PHẦ N M M Ề
Đề tài Xây d ựng website m ng xã h i ạ ộGiảng viên hướng dẫn : Đào Thị Lệ Thủy Nhóm th c hi n ự ệ : Nhóm 1 L p CNTT5 ớ K61Thành viên nhóm :
Trang 2L ờ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
Trang 3Mục l c ụ
Lời nói đầu 2
Mục lục 3
Danh mục b ng bi u 5ả ể Danh mục hình nh 6ả Chương I: Tìm hiểu các công nghệ sử dụng 8
1.1 PHP 8
1.2 Hệ qu n trả ị cơ sở ữ liệ d u MySQL 8
1.3 ReactJS 9
Chương II: Tìm hiểu bài toán và phân tích thiế ết k hệ thống 10
2.1 Mục đích – Phạm vi 10
2.2 Kh o sát h ả ệ thống 10
2.3 Phân tích và thi t k ế ế chức năng 11
2.3.1 Phân tích nghi p v 11ệ ụ 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
2.4.2 Mô hình th c th ự ể liên kết 30
2.4.3 Thi t k các quan h - mô hình quan h 31ế ế ệ ệ 2.4.4 Mô t dả ữ liệu 32
Chương III: Xây dựng và cài đặt chương trình 37
3.1 Cài đặt CSDL 37
3.2 Xây d ng giao diự ện trang người dùng 38
3.2.1 Trang ch ủ người dùng 38
3.2.2 Giao di n thông báo 38ệ 3.2.3 Trang đăng nhập, đăng ký 39
3.2.4 Trang kết quả tìm ki m 40ế 3.2.5 Trang cá nhân 40
3.2.6 Trang ch nh sỉ ửa thông tin cá nhân 41
3.2.7 Trang qu n lý danh sách b n bè 41ả ạ 3.2.8 Trang đăng bài viết mới 42 3.2.9 Trang tin nh n 42ắ
Trang 43.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ố ả ị 3.4.5 Code x ử lý kết b n/h y k t b n 49ạ ủ ế ạ 3.4.6 Code x ử lý gửi tin nh n 50ắ 3.4.7 Code x lý tìm ki m 51ử ế 3.4.8 Code x lý bình lu n 52ử ậ 3.4.9 Code x lý bày t c m xúc vào bài vi t 53ử ỏ ả ế 3.4.10 Code x lý quên mử ật khẩu 54
3.4.11 Code x ử lý đổi mật khẩu 55
3.4.12 Code chức năng quản tr viên gị ửi cảnh báo 56
Kết luận 57 Tài liệu tham kh o 57ả
B ng phân công công vi c 58ả ệ
Trang 6Danh m c hình ụ ảnh
Hình 2.1: Use-case diagram 13
Hình 2.2: Biểu đồ hoạt động “Đăng nhập” 14
Hình 2.3: Biểu đồ hoạt động “Nhắn tin” 15
Hình 2.4: Biểu đồ hoạt động “Bình luận” 15
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
Trang 7Hì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ả ả ệ
Trang 8Chươ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ở ữ d liệ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
Trang 9- 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 dWorkbench, 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ở
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 ể
Trang 10Chươ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è ắ ậ ặ ừ ạ
Trang 11o 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è ẽ ạ
Trang 12o 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
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
Trang 132.3.2 Biểu đồ use case
Hình 2.1: Use-case diagram
Trang 142.3.3 Biểu đồ hoạt động (Activity Diagram)
- Biểu đồ hoạt động “Đăng nhập”
Trang 15- 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”
Trang 16- 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ừ ố ế ạ ”
Trang 17- Biểu đồ hoạt động “Bày tỏ ảm xúc v bài vi c ề ết”
Trang 18- Biểu đồ hoạt động “Quản lý bài viết”
Trang 19- Biểu đồ hoạt động “Quên mật khẩu”
Trang 20- 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ầ ặ ủ ế ạ ”
Trang 21- Biểu đồ hoạt động “Tìm kiếm thông tin”
Trang 222.3.4 Biểu đồ tuần t ự
- Biểu đồ tuầ ự “Quản lý thông tin cá nhân” n t
Trang 23- 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”
Trang 24- 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
Trang 26- 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ầ ặ ủ ế ạ ”
Trang 27- 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