đề tài xây dựng website mạng xã hội chia sẻ hình ảnh và âm nhạc instotify

VIỆN KỸ THUẬT – CÔNG NGH ỆNHẬN XÉT VÀ CHẤM ĐIỂM C A GI NG VIÊN Ủ ẢHọ và tên gi ng viên: ả Nguyễn Hữu Vĩnh Tên đề tài: Xây dựng website mạng xã hội chia sẻ hình nh và âm nhạc Instotify ảN

Trang 1

UỶ BAN NHÂN DÂN TỈNH BÌNH DƯƠNG

TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT VIỆN KỸ THUẬT – CÔNG NGH Ệ

BÁO CÁO MÔN H C Ọ

PHÁT TRI N PH N M M MÃ NGU N M ỂẦỀỒỞ

ĐỀ TÀI

XÂY D NG WEBSITE M NG XÃ HỰẠỘI

CHIA S HÌNH NH VÀ ÂM NH C INSTOTIFY ẺẢẠ

GIẢNG VIÊN HƯỚNG DẪN: ThS NGUYỄN HỮU VĨNH SINH VIÊN TH C HI N: Ự Ệ 1 DƯƠNG LÊ PHƯỚC TRUNG

2 TR N MINH HI U Ầ Ế

1824801030053 1824801030067

BÌNH DƯƠNG, 7/2021

Trang 2

UỶ BAN NHÂN DÂN TỈNH BÌNH DƯƠNG

TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT VIỆN KỸ THUẬT – CÔNG NGH Ệ

BÁO CÁO MÔN H C Ọ

PHÁT TRI N PH N M M MÃ NGU N M ỂẦỀỒỞ

ĐỀ TÀI

XÂY D NG WEBSITE M NG XÃ HỰẠỘI

CHIA S HÌNH NH VÀ ÂM NH C INSTOTIFY ẺẢẠ

GIẢNG VIÊN HƯỚNG DẪN: ThS NGUYỄN HỮU VĨNH SINH VIÊN TH C HI N: Ự Ệ 1 DƯƠNG LÊ PHƯỚC TRUNG

2 TRẦN MINH HI U Ế 1824801030053 1824801030067

BÌNH DƯƠNG, 7/2021

Trang 3

VIỆN KỸ THUẬT – CÔNG NGH Ệ

NHẬN XÉT VÀ CHẤM ĐIỂM C A GI NG VIÊN Ủ Ả

Họ và tên gi ng viên: ả Nguyễn Hữu Vĩnh

Tên đề tài: Xây dựng website mạng xã hội chia sẻ hình nh và âm nhạc Instotify ảNội dung nh n xét: ậ

GIẢNG VIÊN CH M Ấ(Ký, ghi rõ họ tên)

Trang 4

1.2 Lý do chọn đề tài 2

1.3 M c tiêu cụ ủa đề tài 2

2 Phương pháp nghiên cứu 2

3 Các chức năng 2

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 4

1 Khảo sát website tương tự 4

2 N n t ng công ngh 4ề ả ệ2.1 PHP 4

2.1 Use case đăng nhập 9

2.2 Use case đăng ký 10

2.3 Use case đăng xuất 11

2.4 Use case xem b n tin 12ả2.5 Use case đăng bài viết 132.6 Use case thích bài vi t 13ế2.7 Use case bình lu n vào bài vi t 14ậ ế2.8 Use case chia s bài vi t 15ẻ ế2.10 Use case hu k t b n 16ỷ ế ạ

Trang 5

2.11 Use case tìm ki m 17ế2.12 Use case nh n tin 18ắ

2.13 Use case xem t t c ấ ả tin nhắn 19

2.14 Use case xem thông báo 19

2.15 Use case xem g i ý kợ ết bạn 20

2.16 Use case ch nh sỉ ửa thông tin cá nhân 21

2.17 Use case ch nh sỉ ửa ảnh đại diện 22

2.18 Use case chỉnh ửa ả s nh bìa 23

2.19 Use case đổi mật khẩu 23

3 Sơ đồ tuần tự 24

3.1 Use case đăng nhập 24

3.2 Use case đăng ký 25

3.3 Use case đăng xuất 25

3.4 Use case xem b n tin 26ả3.5 Use case đăng bài viết 26

3.6 Use case thích bài vi t 27ế3.7 Use case bình lu n vào bài vi t 27ậ ế3.8 Use case chia s bài vi t 28ẻ ế3.9 Use case kết bạn 28

3.10 Use case hu k t b n 28ỷ ế ạ3.11 Use case tìm ki m 29ế3.12 Use case nh n tin 29ắ3.13 Use case xem t t c ấ ả tin nhắn 30

3.14 Use case xem thông báo 30

3.15 Use case xem g i ý kợ ết bạn 31

3.16 Use case ch nh s a ỉ ử thông tin cá nhân 31

3.17 Use case ch nh sỉ ửa ảnh đại diện 31

3.18 Use case ch nh sỉ ửa ảnh bìa 32

3.19 Use case đổi mật khẩu 32

4 Lược đồ cơ sở dữ liệu 33

CHƯƠNG 4: GIAO DIỆN 34

1 Đăng nhập 34

Trang 6

2 Đăng ký 34

3 Đăng xuất 35

4 Xem b n tin 35ả5 Đăng bài viết 37

6 Thích bài vi t 38ế7 Bình lu n vào bài vi t 38ậ ế8 Kết bạn và hu kỷ ết bạn 39

9 Tìm ki m 40ế10 Nh n tin 41ắ11 Thông báo 41

12 Xem gợi ý kế ạt b n 42

13 Ch nh sỉ ửa thông tin cá nhân, ảnh đại diệ ản, nh bìa 42

14 Các thành ph n khác trong trang cá nhân 44ầCHƯƠNG 5: TỔNG KẾT 49

1 Kết quả đạt được 49

2 H n ch 49ạ ế3 Hướng phát triển 49

CHƯƠNG 6: TÀI LIỆU THAM KHẢO 50

1 Sách 50

2 Interrnet 502.1 Ti ng Vi t 50ế ệ2.2 Ti ng Anh 50ế

Trang 7

i

DANH M C BỤ ẢNG

Bảng 1 - Các tác nhân 7

Bảng 2 - Các use case 7

Bảng 3 - Bảng đặ ả use case đăng nhậc t p 9

Bảng 4 - Bảng đặ ả use case đăng kýc t 10

Bảng 5 - Bảng đặ ả use case đăng xuấc t t 11

Bảng 6 - Bảng đặc ả use case xem b n tin 12t ảBảng 7 - Bảng đặ ả use case đăng bài viếc t t 13

Bảng 8 - Bảng đặ ảc t use case thích bài vi t 13ếBảng 9 - Bảng đặ ảc t use case bình lu n vào bài vi t 14ậ ếBảng 10 - Bảng đặ ảc t use case chia s bài vi t 15ẻ ếBảng 11 - Bảng đặ ảc t use case k t b n 16ế ạBảng 12 - Bảng đặ ảc t use case hu kỷ ết bạn 16

Bảng 13 - Bảng đặ ảc t use case tìm ki m 17ếBảng 14 - Bảng đặ ảc t use case nh n tin 18ắBảng 15 - Bảng đặ ảc t use case xem tất cả tin nh n 19ắBảng 16 - Bảng đặ ảc t use case xem thông báo 20

Bảng 17 - Bảng đặ ảc t use case xem gợi ý k t b n 20ế ạBảng 18 - Bảng đặ ảc t use case ch nh s a thông tin cá nhân 21ỉ ửBảng 19 - Bảng đặ ảc t use case ch nh sỉ ửa ảnh đại diện 22

Bảng 20 - Bảng đặ ảc t use case ch nh sỉ ửa ảnh bìa 23

Bảng 21 - Bảng đặ ả use case đổc t i mật khẩu 24

Trang 8

Hình 4 - Sơ đồ use case 9

Hình 5 - Sơ đồ tuầ ự ủa use case đăng nhận t c p 25

Hình 6 - Sơ đồ tuầ ự ủa use case đăng kýn t c 25

Hình 7 - Sơ đồ tuầ ự ủa use case đăng xuấn t c t 26

Hình 8 - Sơ đồ tuầ ự ủa use case xem bản t c n tin 26

Hình 9 - Sơ đồ tuầ ự ủa use case đăng bài viến t c t 27

Hình 10 - Sơ đồ tuầ ự ủa use case thích bài viến t c t 27

Hình 11 - Sơ đồ tuầ ự ủa use case bình luận t c n vào bài vi t 28ếHình 12 - Sơ đồ tuầ ự ủa use case chia sẻn t c bài vi t 28ếHình 13 - Sơ đồ tuầ ự ủa use case kết bạn t c n 28

Hình 14 - Sơ đồ tuầ ự ủa use case huỷ ế ạn t c k t b n 29

Hình 15 - Sơ đồ tuầ ự ủa use case tìm kiến t c m 29

Hình 16 - Sơ đồ tuầ ự ủa use case nhắn t c n tin 30

Hình 17 - Sơ đồ tuầ ự ủa use case xem tấ ả tin nhắn t c t c n 30

Hình 18 - Sơ đồ tuầ ự ủa use case xem thông báon t c 30

Hình 19 - Sơ đồ tuầ ự ủa use case xem gợn t c i ý kết bạn 31

Hình 20 - Sơ đồ tuầ ự ủa use case chỉn t c nh sửa thông tin cá nhân 31

Hình 21 - Sơ đồ tuầ ự ủa use case chỉn t c nh sửa ảnh đại diện 32

Hình 22 - Sơ đồ tuầ ự ủa use case chỉn t c nh sửa ảnh bìa 32

Hình 23 - Sơ đồ tuầ ự ủn t c a use case đ i mậổ t kh u 33ẩHình 24 - Sơ đồ cơ sở ữ liệ d u 33

Hình 25 Giao di- ện trang đăng nhập 34

Hình 26 Giao di- ện trang đăng ký 35

Hình 27 – Menu đăng xuất 35

Hình 28 Giao di- ện xem bài viết t i trang chạ ủ 36

Hình 29 Giao di- ện xem bài viết t i trang cá nhânạ 37

Hình 30 Khu v- ực đăng bài viết 37

Hình 31 - Cửa sổ đăng bài viết 38

Trang 9

iii

Hình 32 - Thích bài viết 38

Hình 33 - Phần bình lu n 39ậHình 34 - Kết bạn với người dùng mới, chưa nhấn nút Kết bạn 39

Hình 35 - Kết bạn với người dùng mới, đã nhấn nút K t b n 40ế ạHình 36 - Người dùng đã kết bạn 40

Hình 37 - Thanh tìm kiếm 41

Hình 38 Giao di - ện nh n tin 41ắHình 39 Giao di- ện thông báo thu nh 41ỏHình 40 Giao di- ện hi n th tể ị ất cả thông báo 42

Hình 41 Xem g- ợi ý k t bế ạn 42

Hình 43 - Trang chỉnh sửa thông tin cá nhân 43

Hình 44 - Biểu tượng máy ảnh để chỉnh sửa ảnh đại diện 43

Hình 45 - Nút chỉnh sửa ảnh bìa 44

Hình 46 - Trang cá nhân 44

Hình 47 - Phần giới thiệu thông tin cá nhân 45Hình 48 - Phần hi n th nh 45ể ị ảHình 49 - Phần hi n th b n bè 45ể ị ạHình 50 - Trang tổng h p nh 46ợ ảHình 51 - Trang tổng h p b n bè 47ợ ạHình 52 - Trang tổng h p bài hát 48ợ

Trang 10

iv

DANH M C Ụ CÁC KÝ T Ự VIẾT TẮT

Trang 11

Phát tri n ph n mể ầ ềm mã ngu n m ồ ở Viện K thuỹ ật – Công ngh ệ

Trang 1 Xây d ng website m ng xã h i chia s hình nh và âm nhự ạ ộ ẻ ả ạc Instorify

LỜI NÓI ĐẦU

Dưới sự phát triển của công nghệ thông tin hiện nay, việc gắng kết mọi người ở khắp nơi trở nên dễ dàng hơn bao giờ hết nhờ sự có mặt của các mạng xã hội

Nhu cầu sử dụng mạng xã hội của con người ngày càng tăng cao dẫn đến sự ra đời của rất nhiều mạng xã hội ở nhiều nền tảng khác nhau như web, mobile, …

Nắm bắt được nhu cầu cũng như xu hướng đó, chúng em đã quyết định chọn đề tài “Xây dựng website mạng xã hội chia sẻ hình ảnh và âm nhạc Instorify” làm đồ án môn học “Phát triển phần mềm mã nguồn mở”

Đề tài gồm các chương như sau: Chương 1: Tổng quanChương 2: Cơ sở lý thuyết

Chương 3: Phân tích và thiết kế hệ thốngChương 4: Giao diện

Chương 5: Tổng kếtChương 6: Tài liệu tham khảo

Thực hiện đề tài này là cơ hội để chúng em tìm hiểu, làm quen và thử sức với một lĩnh vực mới, trau dồi kiến thức và khả năng tự học Trong quá trình thực hiện, chúng em đã áp dụng được những kiến thức đã học trên lớp cũng như tìm hiểu thêm nhiều thông tin bổ ích

Mặc dù đã rất cố gắng thực hiện đề tài nhưng do năng lực cũng như hạn chế về thời gian nên chúng em khó tránh khỏi những sai sót, rất mong thầy, cô thông cảm bỏ qua Những góp ý của thầy, cô là bài học, là hành trang quý giá dành cho chúng em

Chúng em cũng xin cảm ơn thầy Nguyễn Hữu Vĩnh đã hướng dẫn một cách tận tình để chúng em có th hoàn thành đề tài này ể

Trang 12

CHƯƠNG 1: TỔNG QUAN

Chương này trình bày những tổng quan về đề tài: gi i thiớ ệu đề tài, mục tiêu, đối tượng và phương pháp nghiên cứu đề tài, các chức năng của website

1 Giới thiệu 1.1 Tên đề tài

Xây dựng website m ng xã h i chia s hình nh và âm nhạ ộ ẻ ả ạc Instorify

1.2 Lý do chọn đề tài

Cùng v i s phát tri n c a xã hớ ự ể ủ ội, phương tiện giao tiếp gi a mữ ọi ngườ ới nhau i vngày càng đa dạng, trong đó mạng xã hội đang trở thành xu hướng Nắm bắt được vấn đề đó, nhóm chúng em đã chọn đề tài “Xây dựng website mạng xã hội chia sẻ hình ảnh và âm nhạc Instorify” làm đồ án cho môn “Phát triển ph n m m mã ngu n mầ ề ồ ở”

1.3 M c tiêu cụ ủa đề tài

Ứng d ng các ki n th c v PHP, Lụ ế ứ ề aravel, MySQL và thi t k website xây ế ết đểdựng website m ng xã h i chia s hình nh v âm nhạ ộ ẻ ả à ạc Instorify với đầ đủy các tính năng

2 Phương pháp nghiên cứu

- Phương pháp nghiên c u lý thuy ứ ết:+ Nghiên cứu các công ngh ên quan ệ li+ Kh o sát cả ác website có chức năng tương tự+ Nghiên cứu các ph n mầ ềm hỗ trợ

- Phương pháp nghiên c u thứ ực nghiệm:

Xây dựng website mạng xã hội chia s hình nh vẻ ả à âm nh c ạ Instorify

3 Các chức năng

Website có nh ng ch c nữ ứ ăng cơ bản như sau:1 Đăng nhập

2 Đăng xuất 3 Đăng ký4 Đổi mật kh u ẩ5 Xem bản tin 6 Đăng bài viết 7 Thích bài viết 8 Bình luận vào bài vi t ế

Trang 13

9 Chia s bài vi t ẻ ế10 Kết bạn 11 Huỷ ết bạ k n 12 Tìm kiếm 13 Nhắn tin

14 Xem tấ ảt c tin nh n ắ15 Xem thông báo 16 Xem gợi ý kế ạt b n 17 Chỉnh sửa thông tin cá nhân18 Chỉnh sửa ảnh đại di n ệ19 Chỉnh sửa ảnh bìa

Trang 14

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT

Chương này trình bày các cơ sở lý thuyết được áp dụng để thực hiện đề tài, bao gồm khảo sát các website tương tự và các nền tảng công nghệ được áp d ng ụ

1 Kh o sát ả website tương tự- Tên website: Instagram

- Liên kết: https://www.instagram.com/

- Chức năng: chia sẻ hình ảnh, tương tác giữa người dùng v i bài vi t (thích, chia ớ ếsẻ, bình luận), tương tác giữa người dùng với nhau (theo dõi, nhắn tin), …

- Ưu điểm: Giao di n trệ ực quan, các chức năng dễ dàng ti p c n ế ậ

- Nhược điểm: Ch hỉ ỗ trợ ải lên các file có đị t nh d ng nh ho c video, giao diạ ả ặ ện không b t mắ ắt

Hình 1 - PHP

Trang 15

- PHP có thể được sử ụ d ng trên nhi u h ề ệ điều hành khác nhau * Nhược điểm:

- PHP còn h n ch v c u trúc a ngạ ế ề ấ ủ ữ pháp Nó không được thi t k g n ế ế ọgàng và không được đẹp mắt như những ngôn ngữ lập trình khác

- PHP ch có th hoỉ ể ạt động và s dử ụng được trên các ng d ng trong web ứ ụ

2.2 Laravel

* T ng quan: ổ

Laravel là một PHP framework, có mã ngu n m và miồ ở ễn phí, được xây d ng ựnhằm h ỗ trợ phát tri n các ph n mể ầ ềm, ứng d ng, theo ki n trúc MVC Hi n nay, Laravel ụ ế ệđang là PHP framework phổ biến nhất và tốt nhất Laravel Framework sở hữu một hệ sinh thái l n bao gớ ồm các tính năng như: Instant Deployment, Routing, ORM, DB query, Routing, …

Hình 2 - Laravel * Ưu điểm:

- S dử ụng các tính năng mới nh t cấ ủa PHP - Nguồn tài nguyên vô cùng lớn và s n có ẵ- Tích hợp với dịch vụ mail

Trang 27

3 Dòng sự ki n ệ Dòng s ự kiện chính: Use case này bắt đầu khi người

dùng muốn hu kỷ ết bạn với một tài kho n khác ả + Tại màn trang cá nhân, người dùng vào tab b n ạbè, tại đây người dùng tìm ki m tài kho n mu n hu ế ả ố ỷkết bạn và nh n Huấ ỷ kết bạn

+ H ệ thống x ử lý và lưu dữ liệ u vào hệ thống + Danh sách b n bè cạ ủa người dùng sẽ được c p ậnhật l i, nút huạ ỷ k t b n s chuy n thành nút kế ạ ẽ ể ết bạn

Dòng sự kiện khác: Không 4 Các yêu cầu

đặc biệt Không có 5 Trạng thái h ệ

thống trước khi thực hiện use

Đứng trang cá nhân, các chức năng đư c hiển th ở ợ ị

6 Trạng thái h ệthống sau khi thực hiện use

Nếu use case thành công, danh sách k t b n cế ạ ủa người dùng sẽ được cập nhật

dùng muố tìm kiến m một tài khoản khác

+ Tại màn hình chính, người dùng nh n vào ô tìm ấkiếm sau đó nhập tên tài khoản cần tìm rồi nhấn Enter

+ H ệ thống x ử lý và trả ữ liệ d u

+ Người dùng sẽ được chuyển đến trang hi n th ể ịkết quả tìm ki m ế

Trang 28

Dòng s ự kiện khác: N u tên tài kho n c n tìm không ế ả ầtồn t i, h ạ ệ thống s thông báo không tìm thẽ ấy và đưa người dùng về trang chủ

4 Các yêu cầu

Đứng màn hình chính, các chở ức năng được hiển thị

Nếu use case thành công, người dùng s ẽ được chuyển đến trang kết quả tìm kiếm

7 Điểm mở ộ r ng Không có

2.12 Use case nh n tin ắ

Đây là bảng đặc tả use case cho chức năng nhắn tin c a website ủBảng 14 - Bảng đặc tả use case nh n tin ắ

1 Tóm tắt Use case mô tả cách người dùng nh nn tin v i mắ ớ ột tài khoản khác

dùng muốn nh n tin vắ ới một tài kho n khác ả + Tại màn hình chính, người dùng tìm ki m tài ếkhoản mu n nh n tin t i phố ắ ạ ần người liên h và nh n ệ ấvào tài khoản đó C a s nh n tin s hiử ổ ắ ẽ ện ra, người dùng nh p tin nh n và nh n Enter ậ ắ ấ

+ Hệ thống xử lý ử, g i tin nhắn đi và lưu dữ liệu vào hệ thống

Tin nh n g+ ắ ửi đi sẽ được hi n th trong c a s ể ị ử ổnhắn tin

đặc biệt

Không có

Trang 29

5 Trạng thái h ệthống trước khi thực hiện use

Nếu use case thành công, c a s nh n tin s xu t hiử ổ ắ ẽ ấ ện và người dùng gửi tin nhắn thành công

2.13 Use case xem t t c tin nh n ấ ả ắ

Đây là bảng đặc tả use case cho chức năng xem tất cả tin nh n c a website ắ ủBảng 15 - Bảng đặc tả use case xem tất cả tin nh n ắ

1 Tóm tắt Use case mô tả cách người dùng xem t t cấ ả tin nh n ắ

dùng muốn xem tất cả tin nhắn đã gửi

+ Tại màn hình chính, người dùng nhấn vào biểu tượng tin nhắn, chọn Xem tất cả tin nhắn + H ệ thống x lý và tử ải dữ liệ u lên

+ Người dùng sẽ được chuyển đến trang xem tất cả tin nhắn

Nếu use case thành công, trang xem t t c tin nhấ ả ắn sẽ được hi n thể ị g m t t c tin nh n cồ ấ ả ắ ủa người dùng.7 Điểm mở ộ r ng Không có

2.14 Use case xem thông báo

Đây là bảng đặc tả use case cho chức năng xem thông báo c a website ủ

Trang 30

Bảng 16 - Bảng đặc tả use case xem thông báo

1 Tóm tắt Use case mô t ả cách người dùng xem t t c thông báo ấ ả

dùng muốn xem tất cả thông báo

+ Tại màn hình chính, người dùng nhấn vào biểu tượng thông báo, chọn Xem tất cả thông báo + H ệ thống x lý và tử ải dữ liệ u lên

+ Người dùng sẽ được chuyển đến trang xem tất cả thông báo

Nếu use case thành công, trang xem t t c thông báo ấ ảsẽ được hiển thị

2.15 Use case xem g i ý kợ ết bạn

Đây là bảng đặc tả use case cho chức năng xem gợi ý k t bế ạn c a website ủBảng 17 - Bảng đặc tả use case xem gợi ý kế ạt b n