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

lOMoARcPSD|20681854 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: SINH VIÊN THỰC HIỆN: ThS NGUYỄN HỮU VĨNH DƯƠNG LÊ PHƯỚC TRUNG 1824801030053 TRẦN MINH HIẾU 1824801030067 BÌNH DƯƠNG, 7/2021 lOMoARcPSD|20681854 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: SINH VIÊN THỰC HIỆN: ThS NGUYỄN HỮU VĨNH DƯƠNG LÊ PHƯỚC TRUNG 1824801030053 TRẦN MINH HIẾU 1824801030067 BÌNH DƯƠNG, 7/2021 lOMoARcPSD|20681854 VIỆN KỸ THUẬT – CÔNG NGHỆ NHẬN XÉT VÀ CHẤM ĐIỂM CỦA GIẢNG VIÊN Họ 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 â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) NGUYỄN HỮU VĨNH lOMoARcPSD|20681854 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 CHƯƠNG 1: TỔNG QUAN Giới thiệu 1.1 Tên đề tài 1.2 Lý chọn đề tài 1.3 Mục tiêu đề tài 2 Phương pháp nghiên cứu Các chức CHƯƠNG 2: CƠ SỞ LÝ THUYẾT Khảo sát website tương tự Nền tảng công nghệ 2.1 PHP 2.2 Laravel 2.3 MySQL CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG Tác nhân Các use case Sơ đồ use case Đặc tả use case 2.1 Use case đăng nhập 2.2 Use case đăng ký 10 2.3 Use case đăng xuất 11 2.4 Use case xem tin 12 2.5 Use case đăng viết 13 2.6 Use case thích viết 13 2.7 Use case bình luận vào viết 14 2.8 Use case chia sẻ viết 15 2.10 Use case huỷ kết bạn 16 lOMoARcPSD|20681854 2.11 Use case tìm kiếm 17 2.12 Use case nhắn tin 18 2.13 Use case xem tất 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 sửa ảnh bìa 23 2.19 Use case đổi mật 23 Sơ đồ 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 tin 26 3.5 Use case đăng viết 26 3.6 Use case thích viết 27 3.7 Use case bình luận vào viết 27 3.8 Use case chia sẻ 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 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 32 Lược đồ sở liệu 33 CHƯƠNG 4: GIAO DIỆN 34 Đăng nhập 34 lOMoARcPSD|20681854 Đăng ký 34 Đăng xuất 35 Xem tin 35 Đăng viết 37 Thích viết 38 Bình luận vào viết 38 Kết bạn huỷ kết bạn 39 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 trang cá nhân 44 CHƯƠNG 5: TỔNG KẾT 49 Kết đạt 49 Hạn chế 49 Hướng phát triển 49 CHƯƠNG 6: TÀI LIỆU THAM KHẢO 50 Sách 50 Interrnet 50 2.1 Tiếng Việt 50 2.2 Tiếng Anh 50 lOMoARcPSD|20681854 DANH MỤC BẢNG Bảng - Các tác nhân Bảng - Các use case Bảng - Bảng đặc tả use case đăng nhập Bảng - Bảng đặc tả use case đăng ký 10 Bảng - Bảng đặc tả use case đăng xuất 11 Bảng - Bảng đặc tả use case xem tin 12 Bảng - Bảng đặc tả use case đăng viết 13 Bảng - Bảng đặc tả use case thích viết 13 Bảng - Bảng đặc tả use case bình luận vào viết 14 Bảng 10 - Bảng đặc tả use case chia sẻ 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 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 đặc tả use case đổi mật 24 i lOMoARcPSD|20681854 DANH MỤC HÌNH Hình - PHP Hình - Laravel Hình - MySQL Hình - Sơ đồ use case Hình - Sơ đồ use case đăng nhập 25 Hình - Sơ đồ use case đăng ký 25 Hình - Sơ đồ use case đăng xuất 26 Hình - Sơ đồ use case xem tin 26 Hình - Sơ đồ use case đăng viết 27 Hình 10 - Sơ đồ use case thích viết 27 Hình 11 - Sơ đồ use case bình luận vào viết 28 Hình 12 - Sơ đồ use case chia sẻ viết 28 Hình 13 - Sơ đồ use case kết bạn 28 Hình 14 - Sơ đồ use case huỷ kết bạn 29 Hình 15 - Sơ đồ use case tìm kiếm 29 Hình 16 - Sơ đồ use case nhắn tin 30 Hình 17 - Sơ đồ use case xem tất tin nhắn 30 Hình 18 - Sơ đồ use case xem thông báo 30 Hình 19 - Sơ đồ use case xem gợi ý kết bạn 31 Hình 20 - Sơ đồ use case chỉnh sửa thông tin cá nhân 31 Hình 21 - Sơ đồ use case chỉnh sửa ảnh đại diện 32 Hình 22 - Sơ đồ use case chỉnh sửa ảnh bìa 32 Hình 23 - Sơ đồ use case đổi mật 33 Hình 24 - Sơ đồ sở liệ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 viết trang chủ 36 Hình 29 - Giao diện xem viết trang cá nhân 37 Hình 30 - Khu vực đăng viết 37 Hình 31 - Cửa sổ đăng viết 38 ii lOMoARcPSD|20681854 Phát triển phần mềm mã nguồn mở Viện Kỹ thuật – Cơng nghệ LỜI NĨI ĐẦU Dưới phát triển công nghệ thông tin nay, việc gắng kết người khắp nơi trở nên dễ dàng hết nhờ có mặt mạng xã hội Nhu cầu sử dụng mạng xã hội người ngày tăng cao dẫn đến đời nhiều mạng xã hội nhiều tảng khác web, mobile, … Nắm bắt nhu cầu xu hướng đó, chúng em định chọn đề tài “Xây dựng website mạng xã hội chia sẻ hình ảnh â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 chương sau: Chương 1: Tổng quan Chương 2: Cơ sở lý thuyết Chương 3: Phân tích 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 đề tài hội để chúng em tìm hiểu, làm quen thử sức với lĩnh vực mới, trau dồi kiến thức khả tự học Trong trình thực hiện, chúng em áp dụng kiến thức học lớp tìm hiểu thêm nhiều thơng tin bổ ích Mặc dù cố gắng thực đề tài lực hạn chế thời gian nên chúng em khó tránh khỏi sai sót, mong thầy, thơng cảm bỏ qua Những góp ý thầy, học, hành trang quý giá dành cho chúng em Chúng em xin cảm ơn thầy Nguyễn Hữu Vĩnh hướng dẫn cách tận tình để chúng em hồn thành đề tài Xây dựng website mạng xã hội chia sẻ hình ảnh âm nhạc Instorify Trang lOMoARcPSD|20681854 Phát triển phần mềm mã nguồn mở Viện Kỹ thuật – Công nghệ CHƯƠNG 1: TỔNG QUAN Chương trình bày tổng quan đề tài: giới thiệu đề tài, mục tiêu, đối tượng phương pháp nghiên cứu đề tài, chức website 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 âm nhạc Instorify 1.2 Lý chọn đề tài Cùng với phát triển xã hội, phương tiện giao tiếp người với ngày đa dạng, mạng xã hội trở thành xu hướng Nắm bắt 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 â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 đề tài Ứng dụng kiến thức PHP, Laravel, MySQL thiết kết website để xây dựng website mạng xã hội chia sẻ hình ảnh âm nhạc Instorify với đầy đủ tính Phương pháp nghiên cứu - Phương pháp nghiên cứu lý thuyết: + Nghiên cứu công nghệ liên quan + Khảo sát website có chức tương tự + Nghiên cứu 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 âm nhạc Instorify Các chức Website có chức sau: Đăng nhập Đăng xuất Đăng ký Đổi mật Xem tin Đăng viết Thích viết Bình luận vào viết Xây dựng website mạng xã hội chia sẻ hình ảnh âm nhạc Instorify Trang lOMoARcPSD|20681854 Phát triển phần mềm mã nguồn mở Viện Kỹ thuật – Công nghệ Mô tả: Người dùng sử dụng chức để xem viết mà thân người dùng khác đăng lên Phần hiển thị trang chủ trang cá nhân người dùng Hình 28 - Giao diện xem viết trang chủ Xây dựng website mạng xã hội chia sẻ hình ảnh âm nhạc Instorify Downloaded by heo ninh (ninhheo7@gmail.com) Trang 36 lOMoARcPSD|20681854 Phát triển phần mềm mã nguồn mở Viện Kỹ thuật – Cơng nghệ Hình 29 - Giao diện xem viết trang cá nhân Đăng viết Mô tả: Người dùng sửa dụng chức để đăng viết lên website Tại trang chủ trang cá nhân có đăng viết Hình 30 - Khu vực đăng viết Sau click vào ô đăng viết, cửa sổ ra, người dùng nhập trạng thái chọn ảnh ảnh kèm hát để tải lên website Xây dựng website mạng xã hội chia sẻ hình ảnh âm nhạc Instorify Downloaded by heo ninh (ninhheo7@gmail.com) Trang 37 lOMoARcPSD|20681854 Phát triển phần mềm mã nguồn mở Viện Kỹ thuật – Cơng nghệ Hình 31 - Cửa sổ đăng viết Thích viết Mơ tả: Bên viết có phần u thích, bình luận, chia sẻ Người dùng nhấn vào biểu tượng hình trái tim để thích viết Khi người dùng nhấn thích trái tim chuyển sang màu đỏ, ngược lại trái tim có màu trắng Hình 32 - Thích viết Bình luận vào viết Mơ tả: Bên viết cố phần để người dùng bình luận Người dùng nhập bình luận vào bình luận nhấn Enter, bình luận hiển thị bên viết Xây dựng website mạng xã hội chia sẻ hình ảnh âm nhạc Instorify Downloaded by heo ninh (ninhheo7@gmail.com) Trang 38 lOMoARcPSD|20681854 Phát triển phần mềm mã nguồn mở Viện Kỹ thuật – Cơng nghệ Hình 33 - Phần bình luận Kết bạn huỷ kết bạn Mô tả: Người dùng sử dụng chức để kết bạn huỷ kết bạn với người dùng khác Với tài khoản chưa kết bạn, vào trang cá nhân người xuất nút kết bạn, nhấn vào kết bạn chuyển sang trạng thái chờ người dùng chấp nhận Với tài khoản kết bạn, vào trang cá nhân xuất nút huỷ kết bạn, người dùng nhấn vào xố tài khoản khỏi danh sách bạn bè 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 Xây dựng website mạng xã hội chia sẻ hình ảnh âm nhạc Instorify Downloaded by heo ninh (ninhheo7@gmail.com) Trang 39 lOMoARcPSD|20681854 Phát triển phần mềm mã nguồn mở Viện Kỹ thuật – Cơng nghệ Hình 35 - Kết bạn với người dùng mới, nhấn nút Kết bạn Hình 36 - Người dùng kết bạn Tìm kiếm Mơ tả: Người dùng sử dụng chức để tìm kiếm người dùng theo tên tài khoản Xây dựng website mạng xã hội chia sẻ hình ảnh âm nhạc Instorify Downloaded by heo ninh (ninhheo7@gmail.com) Trang 40 lOMoARcPSD|20681854 Phát triển phần mềm mã nguồn mở Viện Kỹ thuật – Công nghệ Hình 37 - Thanh tìm kiếm 10 Nhắn tin Mơ tả: Người dùng sử dụng chức để nhắn tin với người dùng khác Hình 38 - Giao diện nhắn tin 11 Thông báo Mô tả: Người dùng sử dụng chức để xem thơng báo có người dùng thích, bình luận chia sẻ viết Hình 39 - Giao diện thơng báo thu nhỏ Xây dựng website mạng xã hội chia sẻ hình ảnh âm nhạc Instorify Downloaded by heo ninh (ninhheo7@gmail.com) Trang 41 lOMoARcPSD|20681854 Phát triển phần mềm mã nguồn mở Viện Kỹ thuật – Cơng nghệ Hình 40 - Giao diện hiển thị tất thông báo 12 Xem gợi ý kết bạn Mô tả: Người dùng sử dụng chức để xem gợi ý bạn bè Hình 41 - Xem gợi ý kết bạn 13 Chỉnh sửa thông tin cá nhân, ảnh đại diện, ảnh bìa Mơ tả: Người dùng sử dụng chức để chỉnh sửa thông tin cá nhân, đổi ảnh đại diện ảnh bìa Để chỉnh sửa thông tin cá nhân, người dùng nhấn vào nút Chỉnh sửa thông tin cá nhân, người dùng chuyển sang trang cập nhật thông tin cá nhân nhấn cập nhật Để đổi ảnh đại diện, người dùng nhấn vào biểu tượng máy ảnh ảnh đại diện Để đổi ảnh bìa, người dùng nhấn vào nút Chỉnh sửa ảnh bìa Xây dựng website mạng xã hội chia sẻ hình ảnh âm nhạc Instorify Downloaded by heo ninh (ninhheo7@gmail.com) Trang 42 lOMoARcPSD|20681854 Phát triển phần mềm mã nguồn mở Viện Kỹ thuật – Công nghệ Hình 42 - Nút chỉnh sửa trang cá nhân Hình 43 - Trang chỉnh sửa thơng tin cá nhân Hình 44 - Biểu tượng máy ảnh để chỉnh sửa ảnh đại diện Xây dựng website mạng xã hội chia sẻ hình ảnh âm nhạc Instorify Downloaded by heo ninh (ninhheo7@gmail.com) Trang 43 lOMoARcPSD|20681854 Phát triển phần mềm mã nguồn mở Viện Kỹ thuật – Cơng nghệ Hình 45 - Nút chỉnh sửa ảnh bìa 14 Các thành phần khác trang cá nhân Hình 46 - Trang cá nhân - Phần giới thiệu: Giới thiệu thông tin cá nhân người dùng Xây dựng website mạng xã hội chia sẻ hình ảnh âm nhạc Instorify Downloaded by heo ninh (ninhheo7@gmail.com) Trang 44 lOMoARcPSD|20681854 Phát triển phần mềm mã nguồn mở Viện Kỹ thuật – Cơng nghệ Hình 47 - Phần giới thiệu thông tin cá nhân - Phần hiển thị ảnh: Hiển thị ảnh mà người dùng đăng Hình 48 - Phần hiển thị ảnh - Phần bạn bè: Hiển thị danh sách bạn bè người dùng Hình 49 - Phần hiển thị bạn bè - Trang tổng hợp ảnh: Tổng hợp tất ảnh người dùng Xây dựng website mạng xã hội chia sẻ hình ảnh âm nhạc Instorify Downloaded by heo ninh (ninhheo7@gmail.com) Trang 45 lOMoARcPSD|20681854 Phát triển phần mềm mã nguồn mở Viện Kỹ thuật – Cơng nghệ Hình 50 - Trang tổng hợp ảnh - Trang tổng hợp bạn bè: Hiển thị tất bạn bè người dùng Xây dựng website mạng xã hội chia sẻ hình ảnh âm nhạc Instorify Downloaded by heo ninh (ninhheo7@gmail.com) Trang 46 lOMoARcPSD|20681854 Phát triển phần mềm mã nguồn mở Viện Kỹ thuật – Cơng nghệ Hình 51 - Trang tổng hợp bạn bè - Trang tổng hợp hát: Tổng hợp tất hát mà người dùng đăng Xây dựng website mạng xã hội chia sẻ hình ảnh âm nhạc Instorify Downloaded by heo ninh (ninhheo7@gmail.com) Trang 47 lOMoARcPSD|20681854 Phát triển phần mềm mã nguồn mở Viện Kỹ thuật – Cơng nghệ Hình 52 - Trang tổng hợp hát Xây dựng website mạng xã hội chia sẻ hình ảnh âm nhạc Instorify Downloaded by heo ninh (ninhheo7@gmail.com) Trang 48 lOMoARcPSD|20681854 Phát triển phần mềm mã nguồn mở Viện Kỹ thuật – Công nghệ CHƯƠNG 5: TỔNG KẾT Sau trình tìm hiểu thực đề tài này, chúng em rút kinh nghiệm riêng cho thân Bên cạnh kết khả quan đạt được, đề tài chúng em gặp phải hạn chế, từ chúng em đưa hướng phát triển cho đề tài Kết đạt - Hồn thành phân tích đề tài ứng dụng kiến thức học vào đề tài - Thiết kế giao diện bắt mắt - Các chức đề tài hoàn thành tương đối Hạn chế - Một số chức chưa giống với mô tả - Một số chức chưa hoàn thiện - Một số giao diện chưa hợp lý Hướng phát triển - Tối ưu giao diện chức hoàn thành - Phát triển chức chưa hoàn thành - Bổ sung chức thiếu Xây dựng website mạng xã hội chia sẻ hình ảnh âm nhạc Instorify Downloaded by heo ninh (ninhheo7@gmail.com) Trang 49 lOMoARcPSD|20681854 Phát triển phần mềm mã nguồn mở Viện Kỹ thuật – Công nghệ CHƯƠNG 6: TÀI LIỆU THAM KHẢO Sách [1] Laravel: Up & Running: A Framework for Building Modern PHP Apps – Matt Stauffer – Xuất ngày 21/11/2016 [2] Learning PHP, MySQL, JavaScript, CSS & HTML5: A Step-by-Step Guide to Creating Dynamic Websites 3rd Edition – Robin Nixon – Xuất tháng 7/2009 Interrnet 2.1 Tiếng Việt [1] Bài giảng môn Phát triển phần mềm mã nguồn mở - Viện Kỹ thuật – Công nghệ trường Đại học Thủ Dầu Một [2] Hướng dẫn sử dụng laravel framework Windows – Nguyễn Thanh Phong – 7/7/2016 https://bitly.com.vn/o666u3 2.2 Tiếng Anh [1] Website Instagram https://www.instagram.com/ [2] Laravel’s Documentation https://laravel.com/docs/8.x [3] PHP Tutorial – W3School https://www.w3schools.com/php/ [4] Winku - Social Network Corporate Responsive Template https://bitly.com.vn/8q2bet Xây dựng website mạng xã hội chia sẻ hình ảnh âm nhạc Instorify Downloaded by heo ninh (ninhheo7@gmail.com) Trang 50 ... 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... xu hướng đó, chúng em định chọn đề tài ? ?Xây dựng website mạng xã hội chia sẻ hình ảnh â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 chương sau: Chương 1: Tổng... chia sẻ hình ảnh â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 đề tài Ứng dụng kiến thức PHP, Laravel, MySQL thiết kết website để xây dựng website mạng xã hội