Untitled TRƯỜNG ĐẠI HỌC ĐIỆN LỰC KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO CHUYÊN ĐỀ HỌC PHẦN NGÔN NGỮ KỊCH BẢN ĐỀ TÀI MẠNG XÃ HỘI BUZZ Sinh viên thực hiện CHU VIỆT QUÂN NGUYỄN TRUNG ĐỨC Giảng viên hướng dẫn P[.]
lOMoARcPSD|12114775 TRƯỜNG ĐẠI HỌC ĐIỆN LỰC KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO CHUYÊN ĐỀ HỌC PHẦN NGÔN NGỮ KỊCH BẢN ĐỀ TÀI: MẠNG XÃ HỘI BUZZ Sinh viên thực : CHU VIỆT QUÂN NGUYỄN TRUNG ĐỨC Giảng viên hướng dẫn: PHƯƠNG VĂN CẢNH Ngành : CÔNG NGHỆ THÔNG TIN Chuyên ngành : CÔNG NGHỆ PHẦN MỀM Lớp : D13CNPM3 Khóa : 2018-2023 Hà Nội, tháng 11 năm 2021 Downloaded by Vu Vu (quangchinhlas199@gmail.com) lOMoARcPSD|12114775 PHIẾU CHẤM ĐIỂM Sinh viên thực hiện: STT Họ Và Tên Chu Việt Quân Nguyễn Trung Đức Nội dung thực Điểm Chữ Ký Giảng viên chấm: Họ tên Giáo viên chấm 1: Chữ ký Ghi Giáo viên chấm 2: Downloaded by Vu Vu (quangchinhlas199@gmail.com) lOMoARcPSD|12114775 MỤC LỤC LỜI CẢM ƠN LỜI NÓI ĐẦU CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI 1.1.Lý chọn đề tài 1.2.Công cụ lập trình ngơn ngữ sử dụng 1.3.Giới thiệu ngơn ngữ lập trình NodeJS 1.4.Giới thiệu ReactJs 1.5.Giới thiệu hệ quản trị sở liệu MongoDB, MySQL, MySQL Workbench CHƯƠNG : KHẢO SÁT HỆ THỐNG VÀ THIẾT KẾ HỆ THỐNG (UML) 2.1 Khảo sát trạng 2.2 Mơ tả tốn 2.3.Đặc tả chức hệ thống .9 CHƯƠNG GIAO DIỆN WEBSITE 18 3.1 Giao diện đăng nhập, đăng ký Đăng nhập: 18 3.2 Giao diện trang thông tin cá nhân .19 3.3 Giao diện trang chủ .20 3.4 Giao diện đăng 20 3.5 Giao diện trang 404 21 KẾT LUẬN 22 * Hạn chế 22 * Hướng phát triển 22 TÀI LIỆU THAM KHẢO 23 Downloaded by Vu Vu (quangchinhlas199@gmail.com) lOMoARcPSD|12114775 LỜI CẢM ƠN Trên thực tế, khơng có thành công mà không gắn liền với hỗ trợ, giúp đỡ dù hay nhiều, dù trực tiếp hay gián tiếp người khác Trong suốt quãng thời gian từ bắt đầu học tập trường Đại học đến nay, chúng em nhận nhiều quan tâm, giúp đỡ thầy cơ, gia đình bạn bè Với lịng biết ơn sâu sắc nhất, chúng em xin gửi đến thầy cô Khoa công nghệ thông tin- trường Đại Học Điện Lực với kinh nghiệm tâm huyết để truyền đạt vơ vàn kiến thức quý báu cho chúng em suốt thời gian học tập trường Và đặc biệt, kỳ này, chúng em học mơn học hữu ích sinh viên ngành Cơng Nghệ Thơng Tin Đó môn: “Ngôn ngữ kịch bản” Chúng em xin chân thành cảm ơn thầy Phương Văn Cảnh tận tâm giảng dạy chúng em qua buổi học lớp buổi học online thời gian dịch COVID-19 Trong thời gian học tập thực hành hướng dân thầy, chúng em thu nhiều kiến thức bổ ích, mà cịn truyền cảm hứng môn “Ngôn ngữ kịch bản” Nếu khơng có lời hướng dẫn, dạy bảo thầy có lẽ báo cáo khơng thể hoàn thành Mặc dù cố gắng hoàn thiện báo cáo với tất nỗ lực, nhiên, cịn thiếu kinh nghiệm, tìm hiểu xây dựng báo cáo thời gian có hạn, kiến thức hạn chế, nhiều bỡ ngỡ, nên báo cáo “Mạng xã hội Buzz” chắn tránh khỏi thiếu sót Em mong nhận quan tâm, thơng cảm đóng góp q báu thầy cô bạn để báo cáo hoàn thiện Một lần nữa, em xin chân thành cảm ơn mong nhận đóng góp người Nhóm em xin chân thành cám ơn! Hà nội,tháng 11 năm 2021 Sinh viên thực Chu Việt Quân Nguyễn Trung Đức Downloaded by Vu Vu (quangchinhlas199@gmail.com) lOMoARcPSD|12114775 LỜI NĨI ĐẦU Ngày nay, cơng nghệ thông tin trở thành phần thiếu lĩnh vực đời sống Với việc ứng dụng công nghệ đời sống mạng xã hội, đăng tải khoảnh khắc lên cho người biết thêm bình luận Với mục đích học tập tốt môn Ngôn ngữ kịch bước đầu tiếp cận với quy trình thực tế công nghệ thông tin chúng em xin chọn đề tài “Mạng xã hội Buzz” Trong trình thực phân tích tốn đặt ra, lần chúng em thực hệ thống nên khơng tránh khỏi sai sót Chúng em mong thầy tham khảo góp ý để website chúng em hoàn thiện thêm Downloaded by Vu Vu (quangchinhlas199@gmail.com) lOMoARcPSD|12114775 CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI 1.1.Lý chọn đề tài Ngày bối cảnh tồn cầu hóa với phát triển vượt bậc khoa học kĩ thuật, nhiều dịch vụ công nghệ truyền thông đời nhằm đáp ứng nhu cầu ngày cao người Một dịch vụ truyền thông đại chúng hàng đầu Internet đặc biệt mạng xã hội Dự án “Mạng xã hội kết nối người chơi game: Play with me” tạo Website nhằm mang đến cho người dùng đăng tải viết, bình luận, bày tỏ cảm xúc với người dùng xung quanh Ngồi hệ thống có tính gợi ý cho người dùng người có sở thích, tương đồng để chơi game, kết bạn với 1.2.Cơng cụ lập trình ngơn ngữ sử dụng - Hệ quản trị sở liệu: MongoDB Cloud - Cơng cụ lập trình: Visual Studio Code - Ngơn ngữ lập trình: NodeJS, ReactJS 1.3.Giới thiệu ngơn ngữ lập trình NodeJS NodeJS tảng phía máy chủ xây dựng cơng cụ JavaScript Google Chrome (V8 Engine) Node.js phát triển Ryan Dahl năm 2009 phiên v0.10.36 Định nghĩa Node.js cung cấp https://nodejs.org Node.js môi trường thời gian chạy đa tảng nguồn mở để phát triển ứng dụng mạng phía máy chủ Các ứng dụng Node.js viết JavaScript chạy OS X, Microsoft Windows Linux Node.js cung cấp thư viên phong phú gồm nhiều mô-đun JavaScript khác giúp đơn giản hóa việc phát triển ứng dụng web cách sử dụng Node.js đến mức độ lớn Downloaded by Vu Vu (quangchinhlas199@gmail.com) lOMoARcPSD|12114775 Node.js = Runtime Environment + JavaScript Library Downloaded by Vu Vu (quangchinhlas199@gmail.com) lOMoARcPSD|12114775 1.4.Giới thiệu ReactJs ReactJS môt thư viện JavaScript mã nguồn mở để xây dựng thành phần giao diện tái sử dụng với xu hướng Single Page Application, đặc điểm tăng hiệu cho ứng dụng công nghệ sử dụng DOM ảo (Virtual DOM) Nó tạo Jordan Walke, kĩ sư phần mềm Facebook React lần đầu sử dụng cho ứng dụng Newsfeed Facebook năm 2011 sau triển khai cho Instagram Mục tiêu react đơn giản để phát triển Tất trạng thái tập trung thời điểm, cách chia giao diện người dùng thành tập hợp thành phần (components) 1.5.Giới thiệu hệ quản trị sở liệu MongoDB, MySQL, MySQL Workbench MongoDB chương trình sở liệu mã nguồn mở thiết kế theo kiểu hướng đối tượng bảng cấu trúc cách linh hoạt cho phép liệu lưu bảng không cần phải tuân theo dạng cấu trúc định Chính cấu trúc linh hoạt nên MongoDB dùng để lưu trữ liệu có cấu trúc phức tạp đa dạng không cố định (hay gọi Big Data) MongoDB sở liệu dựa Document, Collection giữ Document khác Số trường, nội dung kích cỡ Document khác với Document khác.Các thư viện Framework hỗ trợ MySQL Server máy tính hay hệ máy tính cài đặt phần mềm MySQL dành cho server để giúp bạn lưu trữ liệu đó, để máy khách truy cập vào quản lý Dữ liệu đặt bảng, bảng có mối liên hệ với MySQL server nhanh, an Downloaded by Vu Vu (quangchinhlas199@gmail.com) lOMoARcPSD|12114775 toàn, đáng tin cậy Phần mềm MySQL miễn phí phát triển, phân phối hỗ trợ Oracle Corporation MySQL Workbench chương trình giúp cho người lập trình giao tiếp với hệ sở liệu MySQL thay phải sử dụng lệnh Command-line phức tạp thời gian MySQL Workbench thiết kế đơn giản, dễ sử dụng thích ứng với nhiều hệ điều hành Microsoft Windowns, Max OS, Linux hay Ubuntu Downloaded by Vu Vu (quangchinhlas199@gmail.com) lOMoARcPSD|12114775 CHƯƠNG : KHẢO SÁT HỆ THỐNG VÀ THIẾT KẾ HỆ THỐNG (UML) 2.1 Khảo sát trạng Ngày bối cảnh tồn cầu hóa với phát triển vượt bậc khoa học kĩ thuật, nhiều dịch vụ công nghệ truyền thông đời nhằm đáp ứng nhu cầu ngày cao người Một dịch vụ truyền thông đại chúng hàng đầu Internet đặc biệt mạng xã hội Sự phát triển mạnh mẽ hệ thống mạng Internet mạng xã hội góp phần đưa người kết bạn làm quen, đưa ý kiến riêng vào vấn đề mạng xã hội Theo biểu đồ này, mạng xã hội Zing Me dẫn đầu với 4.6 triệu ng ƣời dùng Yahoo, Facebook, Yume khoảng cách không xa Đường đỏ số phút sử dụng mạng xã hội tháng, tính số lượt sử dụng (visit) nhân với số phút lượt Theo đó, thấy mạng xã hội hệ Zing Me, Facebook, GoOnline có số phút sử dụng cao người dùng, bật Zing Me với tỉ phút Facebook với 880 triệu phút 2.2 Mơ tả tốn 2.2.1.Các chức hệ thống * Front-end - Người dùng tài khoản: hệ thống cho phép đăng ký tài khoản với yêu cầu nhập thông tin chi tiết người dùng họ tên, địa email, số điện thoại, username, password, - Người dùng đăng nhập vào website mạng xã hội đăng nhập thành cơng tài khoản mật khẩu: + Người dùng thêm sửa xóa thơng tin cá nhân Downloaded by Vu Vu (quangchinhlas199@gmail.com) lOMoARcPSD|12114775 + Xem thông tin, viết người dùng đăng tải lên + Người dùng đăng viết kèm ảnh, tag, icon Đồng thời xóa, sửa viết + Người dùng like,u thích viết bạn bè mạng xã hội + Bình luận vào viết, xóa sửa tùy ý người dùng + Hệ thống có cung cấp chức chat người dùng với * Back-end Trả thông tin người dùng, viết, comment, tin nhắn - Lưu trữ thông tin người dùng,thông tin viết,thông tin like, comment, ảnh server - Đăng nhập, đăng ký đăng xuất tài khoản - Nhắn tin , trò chuyện 2.2.2.Yêu cầu chức Vai trò Chức - Đăng nhập, đăng ký, đăng xuất - Quản lý thông tin cá nhân Người dùng - Quản lý viết - Thả icon vào biết - Bình luận 2.2.3.Yêu cầu phi chức - Giao diện thân thiện, dễ dùng, hấp dẫn, dễ tìm kiếm thơng tin, thao tác gọn gàng, đơn giản - Hệ thống chạy chức năng, hiệu ổn định - Đáp ứng hầu hết yêu cầu người dùng 10 Downloaded by Vu Vu (quangchinhlas199@gmail.com) lOMoARcPSD|12114775 2.3.Đặc tả chức hệ thống 2.3.1 UseCase diagram 2.3.1.1 Use tổng quan Hình 2.3.1.1 Use case tổng quan 2.3.1.2 mơ tả usecase -Bảng thích: Name Tên Use Case Description Tóm gọn tương tác thể Use Case Actor Những đối tượng thực tương tác Use Case Pre-condition Điều kiện cần để Use Case thực thành công PostNhững thứ xuất sau Use Case thưc condition Trigger Basic flow Điều kiện kích hoạt Use Case xảy Luồng tương tác Actor System để Use Case thực thành công 11 Downloaded by Vu Vu (quangchinhlas199@gmail.com) lOMoARcPSD|12114775 Exception Luồng tương tác ngoại lệ Actor System mà Use flow Case thực thất bại - Use case ĐĂNG NHẬP: Name Đăng nhập Description Cho phép actor đăng nhập vào hệ thống Actor User Pre-condition Actor có tài khoản tạo sẵn Post-condition Nếu đăng nhập thành công – truy cập vào Website Trigger Actor nhấn [Đăng nhập] Nhấn [Đăng nhập] Basic flow Exception flow Hiển thị hình đăng nhập Actor nhập tên đăng nhập mật Nhấn nút [Đăng nhập] nhấn Enter Nếu thất bại nhập thông tin không hợp lệ: Thông báo lỗi - Use case ĐĂNG XUẤT: Name Đăng xuất Description Cho phép actor đăng xuất khỏi tài khoản hệ thống Actor Pre-condition Post-condition User Đăng nhập vào thành công vào hệ thống Đăng xuất tài khoản – quay lại trang Đăng nhập Trigger Actor nhấn [Đăng xuất] Basic flow Nhấn [Đăng xuất] Exception flow - Use case ĐĂNG KÝ: Name Đăng ký 12 Downloaded by Vu Vu (quangchinhlas199@gmail.com) lOMoARcPSD|12114775 Description Cho phép actor tạo tài khoản thành viên Actor User Pre-condition Actor phải điền đầy đủ thông tin định dạng Post-condition Tài khoản thành viên tạo Trigger Actor nhấn [Đăng ký] Nhập thông tin tài khoản Basic flow Exception Nhấn [Đăng ký] Thông báo kết đăng ký Nhập thông tin không định dạng – thông báo lỗi Đăng ký không thành công – thông báo lỗi - Use case QUẢN LÝ THÔNG TIN CÁ NHÂN CỦA TÀI KHOẢN: Name Quản lý thông tin cá nhân tài khoản Description Cho phép actor xem thông tin cá nhân tài khoản Actor User Pre-condition Đăng nhập Post-condition Thông tin cá nhân actor load Trigger Nhấn [Thông tin tài khoản] Nhấn [Thông tin tài khoản] Basic flow Load thông tin tài khoản Exception - Use case Bài viết: Name Quản lý Bài viết Description Cho phép like, yêu thích, comment viết Actor User Pre-condition Đăng nhập 13 Downloaded by Vu Vu (quangchinhlas199@gmail.com) lOMoARcPSD|12114775 Post-condition Thông tin viết actor, bạn bè load Trigger Login thành công Nhấn vào tab [Post] Login thành công Basic flow Load viết tài khoản Exception 2.3.2 Sequence diagram (Biểu đồ tuần tự) 2.3.2.1 Biểu đồ cho chức Đăng Nhập Hình 2.3.2.1 Biểu đồ cho chức Đăng Nhập 14 Downloaded by Vu Vu (quangchinhlas199@gmail.com) lOMoARcPSD|12114775 2.3.2.2 Biểu đồ đăng ký Hình 2.3.2.2 Biểu đồ cho chức Đăng Ký 2.3.2.3 Biểu đồ quản lý tài khoản Hình 2.3.2.3 Biểu đồ cho quản lý tài khoản 15 Downloaded by Vu Vu (quangchinhlas199@gmail.com) lOMoARcPSD|12114775 2.3.2.4 Biểu đồ viết Hình 2.3.2.4 Biểu đồ cho viết 2.3.2.5 Biểu đồ bình luận Hình 2.3.2.5 Biểu đồ cho bình luận 16 Downloaded by Vu Vu (quangchinhlas199@gmail.com) lOMoARcPSD|12114775 2.3.2.6 Biểu đồ thơng tin cá nhân Hình 2.3.2.6 Biểu đồ cho thông tin cá nhân 2.3.3 Class diagram (Biểu đồ lớp) 17 Downloaded by Vu Vu (quangchinhlas199@gmail.com) lOMoARcPSD|12114775 18 Downloaded by Vu Vu (quangchinhlas199@gmail.com) lOMoARcPSD|12114775 CHƯƠNG GIAO DIỆN WEBSITE 3.1 Giao diện đăng nhập, đăng ký Đăng nhập: Đăng ký: 19 Downloaded by Vu Vu (quangchinhlas199@gmail.com)