Báo cáo môn học Đồ án lập trình web nâng cao Đ t i xây dựng website chơi game online

1 Biểu đồ usecase tổng quát1 Admin Tác nhân quản lý là tác nhân giữ vai trò chính của hệ thống, là người điều hành, quản lý và theo dõi mọi hoạt động của hệ thống.. Tác nhân quản lý có t

TRƯỜNG ĐẠI HỌC ĐIỆN LỰC KHOA CÔNG NGHỆ THÔNG TIN

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

ĐỒ ÁN LẬP TRÌNH WEB NÂNG CAO Đ T I:

XÂY DỰNG WEBSITE CHƠI GAME ONLINE

Sinh viên thực hiện : Phan Xuân Hoàng

: Nguyễn Việt Hoàng

Giảng viên hướng dẫn : Phương Văn Cảnh

Hà Nội, tháng 5 năm 2024

Họ và tên giảng viên Chữ ký Ghi chú

MỤC LỤC

DANH MỤC HÌNH V BẢNG 4

LỜI MỞ ĐẦU 5

CHƯƠNG 1: KHẢO SÁT V XÁC LẬP DỰ ÁN 6

1.1 Giới thiệu đề tài 6

1.2 Xác lập dự án 6

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

1.1 Biểu đồ usecase tổng quát 7

1.2 Biểu đồ trình tự 9

1.2.1 Biểu đồ trình tự cho chức năng đăng nhập 9

1.2.2 Biểu đồ trình tự cho chức năng đăng ký 11

1.2.3 Biểu đồ trình tự cho chức năng quản lý trò chơi 12

1.2.4 Biểu đồ trình tự cho chức năng quản lý tài khoản 13

1.2.5 Biểu đồ trình tự cho chức năng thống kê 14

1.2.6 Biểu đồ trình tự cho chức năng tìm kiếm game 15

1.3 Biểu đồ lớp 16

CHƯƠNG 3: C I ĐẶT 17

3.1 Lựa chọn giải pháp công nghệ 17

3.2 Cài đặt 18

3.3 Giao diện 18

Kết luận 24

DANH MỤC HÌNH V BẢNG

Hình 2 1 Biểu đồ usecase tổng quát 8

Hình 2 2 Biểu đồ trình tự chức năng đăng nhập 10

Hình 2 3 Biểu đồ trình tự chức năng đăng ký 11

Hình 2 4 Biểu đồ trình tự chức năng quản lý trò chơi 12

Hình 2 5 Biểu đồ trình tự chức năng quản lý tài khoản 13

Hình 2 6 Biểu đồ trình tự chức năng thống kê 14

Hình 2 7 Biểu đồ trình tự chức năng tìm kiếm game 15

Hình 2 8 Biểu đồ lớp 16

Hình 3 1: Giao diên trang chủ 18 Hình 3 2: Giao diện đăng nhập 19

Hình 3 3: Giao diện điều hướng thông tin 19

Hình 3 4: Giao diện thông tin người dùng 20

Hình 3 5: Giao diện chỉnh sửa thông tin 20

Hình 3 6: Giao diện chỉnh sửa email 21

Hình 3 7: Giao diện thay đổi mật khẩu 21

Hình 3 8: Giao diện xóa tài khoản 22

Hình 3 9: Giao diện thông tin liên hệ 22

Hình 3 10: giao diện hiển thị nghững game đã thích, chơi 23

Hình 3 11: Giao diện khi chơi game 23

LỜI MỞ ĐẦU

Trong thời đại công nghệ ngày nay, sự bùng nổ của internet đã mở ra nhữngcánh cửa mới cho việc giải trí và giao lưu trực tuyến Trong số đó, việc xây dựngmột trang web chơi game online không chỉ là một dự án kỹ thuật mà còn là mộthành trình mang đầy tính sáng tạo và đam mê Trải qua những thách thức và cơhội, chúng ta có thể hiện thực hóa không gian giải trí độc đáo, nơi mà người chơikhông chỉ trải nghiệm trò chơi mà còn kết nối, giao lưu với cộng đồng rộng lớn.Website chơi game online không chỉ là nơi tập trung các trò chơi đa dạng màcòn là môi trường mà người chơi có thể thể hiện bản thân, xây dựng những mốiquan hệ mới và tận hưởng những trải nghiệm độc đáo Việc phát triển một trangweb chơi game đòi hỏi sự sáng tạo, kiến thức chuyên sâu về công nghệ và hiểu biếtvững về ngành công nghiệp game Qua đó, chúng ta có thể tạo nên không giansống động, hấp dẫn và đầy tính cạnh tranh, đồng thời tạo ra nguồn thu nhập và giátrị lâu dài

Trong bối cảnh này, đề tài về xây dựng website chơi game online không chỉmang lại những cơ hội kinh doanh mà còn góp phần làm phong phú thêm thế giớigiải trí trực tuyến Chúng ta sẽ cùng nhau khám phá và tìm hiểu về quá trình pháttriển, những thách thức đối mặt và những xu hướng mới nhất trong lĩnh vực này.Hãy cùng nhau bắt đầu hành trình khám phá sự hứa hẹn của thế giới game onlinequa trang web chúng ta sắp xây dựng

CHƯƠNG 1: KHẢO SÁT V XÁC LẬP DỰ ÁN

1.1 Giới thiệu đề tài

Việt Nam đang là một trong những nước có tốc độ phát triển cao, điều đó cũng

có nghĩa cuộc sống của người dân đang được cải thiện đáng kể Người dân hiệnnay không chỉ còn chú ý đến cái ăn, cái mặc mà họ còn đặc biệt quan tâm đến cáchình thức vui chơi giải trí, xả stress ngoài giờ học và giờ làm việc căng thẳng Hiệnnay, giới trẻ nói riêng có rất nhiều hình thức giải trí bằng việc sử dụng các dịch vụnhư xem phim, café, chơi games… Vì vậy sau khi tìm hiểu và quan sát, nhómchúng em đã nhận ra rằng website chơi game online đang rất thành công trên thịtrường game Nhìn nhận thấy thị trường sản phẩm này đang rất tiềm năng ở Việtnam nên nhóm chúng em đã thực hiện sản phẩm này

1.2 Xác lập dự án

* Phân Tích Yêu Cầu:

 Xác định mục tiêu chính của trang web (ví dụ: cung cấp nền tảng chơi game

đa người trực tuyến, xây dựng cộng đồng game, etc.)

 Xác định yêu cầu chức năng và phi chức năng

 Nắm rõ các tính năng cần thiết như đăng nhập, tạo và quản lý tài khoản, tínhnăng chơi game, thống kê

 Đặc điểm đặc biệt của trang web, ví dụ: tích hợp trò chơi cụ thể, hệ thốngcấp độ, giải thưởng, v.v

*Nghiên Cứu và Phân Tích Thị Trường:

 Xem xét các trang web chơi game tương tự để hiểu về xu hướng và yêu cầucủa thị trường

 Phân tích đối thủ để xác định ưu điểm và điểm yếu.

*Thiết Kế Giao Diện Người Dùng (UI) và Trải Nghiệm Người Dùng (UX):

 Xác định cấu trúc trang web và các trang chính

 Thiết kế giao diện người dùng thân thiện và dễ sử dụng

 Xác định các yếu tố trải nghiệm người dùng, bao gồm cách thức sử dụngtrang web và tương tác với người dùng

*Phát Triển và Lập Trình:

 Chọn công nghệ và ngôn ngữ lập trình phù hợp

 Xây dựng cơ sở dữ liệu cho hệ thống

 Phát triển các tính năng cần thiết, chẳng hạn như hệ thống đăng nhập, chơigame, và quản lý tài khoản

 Triển khai trang web trên môi trường sản phẩm cuối cùng

 Tiếp cận chiến lược quảng bá để thu hút người chơi

*Duy Trì và Nâng Cấp:

 Xây dựng kế hoạch duy trì để đảm bảo tính ổn định và bảo mật

 Phát triển kế hoạch nâng cấp để cải thiện tính năng và trải nghiệm ngườidùng

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

1.1 Biểu đồ usecase tổng quát

Hình 2 1 Biểu đồ usecase tổng quát

1 Admin Tác nhân quản lý là tác nhân giữ

vai trò chính của hệ thống, là người điều hành, quản lý và theo dõi mọi hoạt động của hệ thống

Tác nhân quản lý có thể thực hiện các chức năng có trong hệ thống như: Đăng nhập, quản lý tài khoản, quản lý

Người chơi

Người chơi có thể tham gia chơi game mà không cần đăng nhập và tìm kiếm game hoặc thể loại game muốn chơi

1.2Biểu đồ trình tự

1.2.1 Biểu đồ trình tự cho chức năng đăng nhập

Hình 2 2 Biểu đồ trình tự chức năng đăng nhập

* Chức năng: Đăng nhập

* Tác nhân kích hoạt: Admin, Người đăng game

* Tóm tắt: Người dùng khi muốn vào hệ thống phải đăng nhập để thực hiệncác chức năng riêng biệt Tài khoản người dùng sẽ do người quản lý tạo ra

* Dòng sự kiện chính:

* Tác nhân tiến hành mở giao diện đăng nhập

* Tác nhân điền tên đăng nhập (username) và mật khẩu (password) củamình vào khung đăng nhập

* Hệ thống tiến hành kiểm tra dữ liệu và xác minh thông tin tác nhân gửivào

* Thông tin chính xác hệ thống đưa tác nhân truy cập hệ thống

* Nếu tác nhân đưa thông tin tài khoản hoặc mật khẩu không trùng với dữliệu hệ thống Hệ thống thông báo đăng nhập thất bại và thoát.

* Kết thúc quá trình đăng nhập

* Kết quả trả về: Thông báo tác nhân có đăng nhập thành công hay không

1.2.2 Biểu đồ trình tự cho chức năng đăng ký

Hình 2 3 Biểu đồ trình tự chức năng đăng ký

* Chức năng: Đăng Ký

* Tác nhân kích hoạt: Admin, Người đăng game

* Tóm tắt: Người dùng khi muốn vào hệ thống phải đăng nhập vào hệ thốngphải có tài khoản Nếu chưa có tài khoản thì phải tiến hành đăng ký tài khoản

* Dòng sự kiện chính:

* Tác nhân tiến hành mở giao diện đăng ký

* Tác nhân điền tên đăng nhập (username), mật khẩu (password) và thôngtin cá nhân của mình của mình vào khung đăng ký.

* Hệ thống tiến hành kiểm tra dữ liệu và xác minh thông tin tác nhân gửivào

* Thông tin hợp lệ hệ thống lưu thông tin tác nhân vào hệ thống

* Nếu tác nhân đưa thông tin không hợp lệ với dữ liệu hệ thống Hệ thốngthông báo đăng ký thất bại và nhập lại

* Kết thúc quá trình đăng ký

* Kết quả trả về: Thông báo tác nhân có đăng ký thành công hay không

1.2.3 Biểu đồ trình tự cho chức năng quản lý trò chơi

Hình 2 4 Biểu đồ trình tự chức năng quản lý trò chơi

* Chức năng: Quản lý trò chơi

* Tác nhân kích hoạt: Admin, Người đăng game

* Tóm tắt: Chức năng quản lý trò chơi cho phép người dùng có thể chỉnhsửa, thêm mới hoặc xóa trò chơi

* Dòng sự kiện chính:

* Tác nhân chọn trò chơi cần tiến hành sửa, xóa hoặc thêm mới trò chơi

* Hệ thống sẽ gửi thông tin và tiến hành kiểm tra thông tin

* Thông tin hợp lệ hệ thống lưu thông tin vào cơ sở dữ liệu và thông báocho người dùng còn thông tin không hợp lệ thì làm lại bước 1

* Kết quả trả về: Thông báo tác nhân có thành công hay không

1.2.4 Biểu đồ trình tự cho chức năng quản lý tài khoản

Hình 2 5 Biểu đồ trình tự chức năng quản lý tài khoản

* Chức năng: Quản lý tài khoản

* Tác nhân kích hoạt: Admin, Người đăng game

* Tóm tắt: Chức năng quản lý tài khoản cho phép người dùng có thể chỉnhsửa, thêm mới hoặc xóa tài khoản

* Dòng sự kiện chính:

* Tác nhân chọn tài khoản cần tiến hành sửa, xóa hoặc thêm mới

* Hệ thống sẽ gửi thông tin và tiến hành kiểm tra thông tin

* Thông tin hợp lệ hệ thống lưu thông tin vào cơ sở dữ liệu và thông báo chongười dùng còn thông tin không hợp lệ thì làm lại bước 1

* Kết quả trả về: Thông báo tác nhân có thành công hay không

1.2.5 Biểu đồ trình tự cho chức năng thống kê

Hình 2 6 Biểu đồ trình tự chức năng thống kê

* Chức năng: Thống kê

* Tác nhân kích hoạt: Admin, Người đăng game

* Tóm tắt: Chức năng thống kê cho phép người dùng có thể thống kê doanhthu hàng tháng

* Dòng sự kiện chính:

* Tác nhân chọn chức năng yêu cầu thống kê

* Hệ thống sẽ tiến hành kiểm tra thông tin

* Hệ thống sẽ xuất thông tin ra cho người dùng

* Kết quả trả về: Bảng báo cáo doanh thu cho người dùng

1.2.6 Biểu đồ trình tự cho chức năng tìm kiếm game

Hình 2 7 Biểu đồ trình tự chức năng tìm kiếm game

* Chức năng: Tìm kiếm game

* Tác nhân kích hoạt: Người chơi game

* Tóm tắt: Tác nhân khi muốn tìm kiếm game thì nhập tên game tìm kiếm

* Dòng sự kiện chính:

* Tác nhân tiến hành mở giao di ện hệ thống

* Tác nhân tiến hành chọn chức năng tìm kiếm

* Tác nhân nhập tên game cần tìm vào form tìm kiếm

* Hệ thống kiểm tra thông tin và trả về kết quả

1.3Biểu đồ lớp

Hình 2 8 Biểu đồ lớp

CHƯƠNG 3: C I ĐẶT 3.1 Lựa chọn giải pháp công nghệ

- Ngôn ngữ thực hiện: Node js, js, typescript, sass, tailwind

- Hệ quản trị cơ sở dữ liệu: Mongodb

- Công cụ hỗ trợ: Visual studio code

"tailwindcss": "^3.4.1"

}

-Framework: Next js, express js

3.2 Cài đặt

- Giao diện được thiết kế dựa trên yêu cầu đề ra

- Cơ sở dữ liệu chạy ở máy chủ render

3.3 Giao diện

Hình 3 1: Giao diên trang chủ

Hình 3 2: Giao diện đăng nhập

Hình 3 3: Giao diện điều hướng thông tin

Hình 3 4: Giao diện thông tin người dùng

Hình 3 5: Giao diện chỉnh sửa thông tin

Hình 3 6: Giao diện chỉnh sửa email

Hình 3 7: Giao diện thay đổi mật khẩu

Hình 3 8: Giao diện xóa tài khoản

Hình 3 9: Giao diện thông tin liên hệ

Hình 3 10: giao diện hiển thị nghững game đã thích, chơi

Hình 3 11: Giao diện khi chơi game

Kết luận

Sau một thời gian tập trung triển khai đề tài, chúng em đã hoàn thành đượcXâydựng website chơi game online gameHub với giao diện đẹp, các thao tác sửdụng dễ dàng, thân thiện với người dùng Saukhi hoàn thành xong được đượcWebsite chơi game online, chúng em có thêm những kỹ năng nền tảng để xây dựngđược một website áp dụng các kiến thức javascript đã học vào việc phát triển ứngdụng web Bên cạnh đó, chúng em cũng được mở rộng thêm các kiến thức chuyênngành mới nhờ việc tìm hiểu một số kiến thức lập trình để áp dụng vào việc pháttriển ứng dụng này Nhờ vậy, kỹ năng tự học và vận dụng các kỹ năng mới của emđược nâng cao hơn Khi thực hiện và hoàn thành dự án, em cũng đã biết thêmđược nhiều kinh nghiệm quý giá khi xây dựng website nói riêng và phát triển phầnmềm Những kỹnăng này sẽ nền tảng để giúp em nâng cao trình độ bản thân, kinhnghiệm trong thực tế để có thể làm việc ngoài các doanh nghiệp sau này