Đang tải... (xem toàn văn)
Nhóm thực hiện Nhóm 064 Trang 8 MỞ ĐẦUĐể phục vụ nhu cầu ngày càng cao của người dùng trong việc xemphim trực tuyến, tôi đã quyết định xây dựng một trang web xem phim với cáctính năng
lOMoARcPSD|39475011 BỘ CÔNG THƯƠNG TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP HÀ NỘI - BÁO CÁO BÀI TẬP LỚN HỌC PHẦN CÔNG CỤ PHÁT TRIỂN PHẦN MỀM TÌM HIỂU VÀ ỨNG DỤNG REACTJS ĐỂ XÂY DỰNG WEBSITE XEM PHIM Giảng viên hướng dẫn : ThS Nguyễn Thái Cường Nhóm : 06 Sinh viên : Hoàng Minh Đức Nguyễn Văn Dũng Mai Xuân Hải Hoàng Đức Hiếu Phan Bá Toàn Hà Nội – Năm 2023 Downloaded by bong bong (bongbong1@gmail.com) lOMoARcPSD|39475011 MỤC LỤC MỤC LỤC HÌNH VẼ i DANH MỤC BẢNG BIỂU ii LỜI CẢM ƠN 1 MỞ ĐẦU 2 CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 4 1.1 Tổng quan về website xem phim 4 1.2 Các công cụ thiết kế website phim .5 1.2.1 NodeJS 5 1.2.2 Javascript 6 1.2.3 ReactJS 7 1.3 Kiến trúc phần mềm 9 CHƯƠNG 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 10 2.1 Phân tích yêu cầu 10 2.2 Các yêu cầu phi chức năng 11 2.3 Biểu đồ use case 11 2.3.1 Biểu đồ use case tổng quan 11 2.4 Mô tả chi tiết use case 14 2.4.1 Mô tả use case Đăng nhập 14 2.4.2 Mô tả use case Đăng ký 15 2.4.3 Mô tả use case Tìm kiếm 17 2.4.4 Mô tả use case Yêu thích phim 18 2.4.5 Mô tả use case Xem Phim 19 2.4.6 Mô tả use case Xem lịch sử phim 20 Downloaded by bong bong (bongbong1@gmail.com) lOMoARcPSD|39475011 2.4.7 Mô tả use case Xem chi tiết phim 20 2.5 Biểu đồ trình tự 22 2.5.1 Chức năng đăng nhập 22 2.5.2 Chức năng đăng ký .23 2.5.3 Chức năng tìm kiếm .24 2.5.4 Chức năng yêu thích phim 25 2.5.5 Chức năng xem phim 26 2.5.6 Chức năng xem lịch sử phim 26 2.5.7 Chức năng xem chi tiết 26 2.6 Thiết kế cơ sở dữ liệu 32 2.6.1 Quan hệ giữa các bảng 32 2.6.2 Chi tiết các bảng 32 2.7 Thiết kế giao diện 35 2.7.1 Màn hình đăng nhập .35 2.7.2 Màn hình đăng ký 35 2.7.3 Màn hình tìm kiếm phim 36 2.7.4 Màn hình yêu thích phim .37 2.7.5 Màn hình xem phim .37 2.7.6 Màn hình xem lịch sử 38 2.7.7 Màn hình xem chi tiết phim CHƯƠNG 3 CÀI ĐẶT CHƯƠNG TRÌNH VÀ KIỂM THỬ HỆ THỐNG 39 3.1 Cài đặt chương trình 39 3.2 Website xem phim .40 3.2.1 Màn hình chức năng đăng nhập 40 Downloaded by bong bong (bongbong1@gmail.com) lOMoARcPSD|39475011 3.2.2 Màn hình chức năng đăng ký .42 3.2.3 Màn hình chức năng tìm kiếm 44 3.2.4 Màn hình chức năng xem yêu thích .44 3.2.5 Màn hình chức năng xem phim 3.2.6 Màn hình chức nắng xem lịch sử 3.2.7 Màn hình chức năng xem chi tiết phim 3.3 Kiểm thử phần mềm khai báo y tế điện tử 46 3.3.1 Kiểm thử chức năng đăng nhập 46 3.3.2 Kiểm thử chức năng đăng ký .48 3.3.3 Kiểm thử chức năng tìm kiếm 49 3.3.4 Kiểm thử chức năng xem yêu thích 55 3.3.5 Kiểm thử chức năng xem phim 56 KẾT LUẬN 59 TÀI LIỆU THAM KHẢO .60 PHỤ LỤC 61 Downloaded by bong bong (bongbong1@gmail.com) lOMoARcPSD|39475011 MỤC LỤC HÌNH ẢNH Hình 1: Biểu đồ use case tổng quan 10 Hình 2: Biểu đồ trình tự chức năng đăng nhập 17 Hình 3: Biểu đồ trình tự chức năng đăng ký .17 Hình 4: Biểu đồ trình tự chức năng tìm kiếm 18 Hình 5: Biểu đồ trình tự chức năng xem yêu thích phim 18 Hình 6: Biều đồ trình tự chức năng xem phim 19 Hình 7: Biều đồ trình tự chức xem lịch sử phim .19 Hình 8: Biều đồ trình tự chức xem chi tiết phim .20 Hình 9: Cơ sở dữ liệu 21 Hình 10: Giao diện đăng nhập 24 Hình 11: Giao diện đăng ký .24 Hình 12: Giao diện tìm kiếm .24 Hình 13: Giao diện xem yêu thích phim 25 Hình 14: Màn hình xem phim 26 Hình 15: Màn hình xem lịch sử phim 26 Hình 16: Màn hình xem chi tiết phim 27 Hình 17: Màn hình khởi chạy dự án 28 Hình 18: Mở terminal chạy chương trình 28 Hình 19: Màn hình đăng nhập 29 Hình 20: Màn hình đăng ký .30 Hình 21: Màn hình trang chủ .30 Hình 22: Màn hình hướng dẫn tìm kiếm 31 Hình 23: Màn hình xem yêu thích phim 32 Hình 24: Màn hình xem phim 32 Hình 25: Màn hình xem lịch sử phim 33 Hình 26: Màn hình xem chi tiết phim 33 Downloaded by bong bong (bongbong1@gmail.com) lOMoARcPSD|39475011 MỤC LỤC BẢNG BIỂU Bảng 1: Các yêu cầu phi chức năng .9 Bảng 2: Chi tiết bảng Tai Khoan .21 Bảng 3: Chi tiết bảng Phim 22 Bảng 4: Chi tiết bảng The Loai Phim 22 Bảng 5: Chi tiết bảng Quang Cao Phim 23 Bảng 6: Chi tiết bảng Yeu Thich Phim 23 Bảng 7: Kiểm thử chức năng đăng nhập 34 Bảng 8: Kiểm thử chức năng đăng ký .35 Bảng 9: Kiểm thử chức năng tìm kiếm 36 Bảng 10: Kiểm thử chức năng xem yêu thích 37 Bảng 11: Kiểm thử chức năng xem phim 38 Downloaded by bong bong (bongbong1@gmail.com) lOMoARcPSD|39475011 LỜI CẢM ƠN Là một sinh viên trường đại học Công nghiệp Hà Nội, báo cáo thực nghiệm là minh chứng cho những kiến thức đã có sau khi học môn này Trong quá trình hoàn thành báo cáo, ngoài sự cố gắng của nhóm, nhóm em cũng nhận được sự hướng dẫn tận tình của thầy cô cùng các anh chị bạn bè Qua đây, nhóm em xin chân thành cảm ơn khoa Công nghệ thông tin, trường đại học Công nghiệp Hà Nội đã trang bị kiến thức cho em trong suốt quá trình học tập và tạo cơ hội để em được làm báo cáo thực nghiệm Đặc biệt, nhóm em cảm ơn tới thầy ThS Nguyễn Thái Cường đã luôn giúp đỡ, hướng dẫn, chỉ bảo tận tình để nhóm em hoàn thành tốt báo cáo này Nhóm em đã cố gắng hoàn thành báo cáo nhưng vẫn rất mong nhận được sự đóng góp ý của thầy cô và các bạn để đồ án của em được hoàn thiện hơn Nhóm thực hiện Nhóm 064 Downloaded by bong bong (bongbong1@gmail.com) lOMoARcPSD|39475011 PA MỞ ĐẦU Để phục vụ nhu cầu ngày càng cao của người dùng trong việc xem phim trực tuyến, tôi đã quyết định xây dựng một trang web xem phim với các tính năng và chức năng đầy đủ và tiện ích Trang web của nhóm em có thể hỗ trợ người dùng tìm kiếm và xem các bộ phim yêu thích, đồng thời cung cấp thông tin chi tiết về các bộ phim, bao gồm đạo diễn, diễn viên, nội dung và đánh giá của người dùng Ngoài ra, trang web còn có tính năng đề xuất các bộ phim mới và nổi bật dựa trên sở thích của người dùng Trang web xem phim của chúng em cũng được thiết kế với giao diện đơn giản, trực quan và thân thiện với người dùng Tốc độ tải trang web cũng được tối ưu hóa để đảm bảo người dùng có thể truy cập và xem phim một cách nhanh chóng và dễ dàng Trong quá trình xây dựng trang web xem phim này, chúng em đã sử dụng các công nghệ và công cụ hiện đại nhất để đảm bảo tính năng và chất lượng của trang web Bên cạnh đó, chúng em cũng đã gặp một số thách thức trong quá trình xây dựng, nhưng đã tìm ra các giải pháp để vượt qua những thách thức đó Hy vọng rằng báo cáo này sẽ giúp mọi người hiểu rõ hơn về quá trình nghiên cứu và phát triển của chúng em trong việc xây dựng trang web xem phim này Báo cáo này cũng sẽ cung cấp chi tiết về các tính năng và chức năng của trang web, cũng như các công nghệ và công cụ được sử dụng để xây dựng trang web này Downloaded by bong bong (bongbong1@gmail.com) lOMoARcPSD|39475011 1 Tên đề tài Tìm hiểu và ứng dụng ReactJS để xây dựng website xem phim 2 Lý do chọn đề tài Xây dựng một website xem phim là một đề tài thú vị và hấp dẫn, đặc biệt là đối với những người yêu thích phim và công nghệ Nó cũng có thể giúp bạn tìm hiểu thêm về thiết kế web, lập trình và quản lý cơ sở dữ liệu Xây dựng một website xem phim có độ phức tạp khá cao, vì vậy nó là một thách thức thực sự đối với sinh viên Nó yêu cầu bạn có kiến thức về nhiều lĩnh vực khác nhau, bao gồm cả thiết kế giao diện, lập trình, quản lý cơ sở dữ liệu và bảo mật Xây dựng một website xem phim phù hợp để làm bài tập lớn vì nó đòi hỏi bạn phải tập trung và chi tiết trong việc lên kế hoạch, thực hiện và hoàn thiện dự án Nó sẽ giúp bạn phát triển kỹ năng quản lý thời gian, xử lý các vấn đề phức tạp và làm việc theo nhóm Sau khi hoàn thành dự án, bạn có thể sử dụng website xem phim của mình để chia sẻ với bạn bè hoặc cộng đồng trực tuyến Tóm lại, đề tài xây dựng website xem phim là một lựa chọn tuyệt vời để làm bài tập lớn vì nó thú vị, yêu cầu độ phức tạp cao và có tiềm năng ứng dụng cao 3 Mục tiêu nghiên cứu - Tổng hợp được các kiến thức về NodeJS và ReactJS để áp dụng vào xây dựng Website đặt phòng - Nghiên cứu, khảo sát thực tế các ứng dụng website đặt phòng - Phát biểu được bài toán cần xử lý cho một ứng dụng website đặt phòng - Nghiên cứu và đưa ra hướng làm cũng như công cụ công nghệ trong việc phát triển ứng dụng website đặt phòng - Phân tích thiết kế cho hệ thống thông tin đặt phòng - Cài đặt và triển khai web 4 Nội dung nghiên cứu - Khảo sát yêu cầu và nhu cầu của người dùng - Nghiên cứu, phân tích yêu cầu về chức năng, phi chức năng của website - Thiết kế và phát triển hệ thống website xem phim: Downloaded by bong bong (bongbong1@gmail.com) lOMoARcPSD|39475011 o Xây dựng các chức năng cho người dùng: đăng nhập, đăng ký, xem phim, tìm kiếm, yêu thích, bình luận, o Xây dựng các chức năng cho Admin: Quản lý tài khoản, quản lý phim, bảo trì các chức năng của website,… - Cài đặt website và kiểm thử các chức năng 5 Phương pháp thực hiện - Nghiên cứu lý thuyết kết hợp cùng khảo sát thực tế một số website xem phim lớn, từ đó phân tích và thiết kế hệ thống website xem phim - Nghiên cứu về ngôn ngữ NodeJS và ReactJS - Phát triển ứng dụng web trong phạm vi thử nghiệm 6 Bố cục đề tài (Nội dung chính đề tài chia thành 3 chương) Chương 1: Cơ sở lý thuyết Giới thiệu về các công cụ để ứng dụng vào phát triển website: NodeJS, Javascript và ReactJS Chương 2: Phân tích thiết kế hệ thống Phân tích tích yêu cầu, mô tả các biểu đồ use case, biểu đồ trình tự, sơ đồ hoạt động và thiết kế giao diện của từng chức năng của website Chương 3: Cài đặt chương trình và kiểm thử hệ thống Mô tả cách cài đặt website, hướng dẫn sử dụng, kết quả đạt được và thử nghiệm website Downloaded by bong bong (bongbong1@gmail.com)