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

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

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

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

Điểm: Bằng s : ố Bằng chữ:

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

MỤC LỤC

DANH MỤC BẢNG i

DANH MỤC HÌNH ii

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

LỜI NÓI ĐẦU 1

CHƯƠNG 1: TỔNG QUAN 2

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

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.2 Laravel 5

2.3 MySQL 6

CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 7

1 Tác nhân 7

2 Các use case 7

3 Sơ đồ use case 8

2 Đặc tả use case 9

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 13 2.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ỷ ế ạ

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

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 50 2.1 Ti ng Vi t 50ế ệ 2.2 Ti ng Anh 50ế

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

ii

DANH MỤC HÌNH

Hình 1 - PHP 4

Hình 2 - Laravel 5

Hình 3 - MySQL 6

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

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 45 Hì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ợ

iv

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

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 quan

Chương 2: Cơ sở lý thuyết

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

Chương 4: Giao diện

Chương 5: Tổng kết

Chươ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 ể

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

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

đề đó, 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

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

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

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

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

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

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

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

* Ưu điểm:

- Thân thiên và tương thích cao với m i nọ gôn ng và trình duyữ ệt web

- Được sử ụ d ng mi n phí ễ

- PHP sử ụ d ng mã ngu n m , mang l i s linh ho t cho các l p trình viên ồ ở ạ ự ạ ậ

- Ngôn ngữ ậ l p trình PHP kết n i tố ới các hệ cơ sở ữ liệ d u thông d ng Bụ ởi

nó tích h p s n nhi u Database Client ợ ẵ ề

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

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

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

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

1 Tóm tắt Use case mô tả cách người dùng tìm ki m m t tài ế ộ

khoản trên website

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

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

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

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ủ

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

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

Dòng sự kiệ n khác: Không

4 Các yêu cầu

đặc biệt

Không có

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

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

5 Trạng thái h ệ

thống trước khi

thực hiện use

Đứng màn hình chính, 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, 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

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

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 ắ

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

6 Trạng thái h ệ

thống sau khi

thực hiện use

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 ủ

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

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

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

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

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