Ngày nay, với sự phát triển mạnh mẽ của khoa học công nghệ, Công nghệ Thông tin là một trong những ngành có vị thế dẫn đầu và có vai trò rất lớn trong sự phát triển chung đó. Các ứng dụng của công nghệ thông tin được áp dụng trong mọi lĩnh vực nghiên cứu khoa học cũng như trong mọi lĩnh vực của đời sống. Là một phần của Công nghệ Thông tin, Công nghệ web đang có được sự phát triển mạnh mẽ và phổ biến rất nhanh bởi những lợi ích mà nó mang lại cho cộng đồng là rất lớn. Bằng việc lựa chọn và thực hiện đề tài “công thông tin điện tử và giải trí dành cho game thủ”, em thấy việc ngành giải trí của làng game đang có sức hút rất lớn và giới trẻ đang rất đam mê với chủ đề này và cần một thứ gì đó có thể giúp ích cho họ về việc nắm bắt thông tin. Website cổng thông tin điện tử dành cho game thủ sẽ giúp mọi người có thể giải quyết các vấn đề mà người dùng cần và còn giúp các doanh nghiệp có thể cộng tác vào trang website để quảng bá thương hiệu của mình. Website giúp cho mọi người dễ dàng tiếp cận được các thông tin nóng và mới nhất đến từ các tựa game mà người dùng cần nắm bắt, tìm hiểu và học hỏi hay chỉ đơn giản xem các tỷ số và phân tích đến từ các đội tuyển Esports mà mình yêu thích
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT - HÀN KHOA KHOA HỌC MÁY TÍNH BÁO CÁO ĐỒ ÁN TỐT NGHIỆP NGÀNH: CƠNG NGHỆ THƠNG TIN KHĨA HỌC: 2018 – 2021 ĐỀ TÀI: THIẾT KẾ & XÂY DỰNG WEBSITE CỔNG THƠNG TIN ĐIỆN TỬ GIẢI TRÍ DÀNH CHO GAME THỦ Giảng viên hướng dẫn : VÕ HÙNG CƯỜNG Sinh viên thực hiện: ĐỖ HUY CƯỜNG Lớp: 18I1 MSSV: 181C900004 Tp Đà Nẵng, tháng năm 2021 LỜI CẢM ƠN Trước tiên em xin gửi lời cảm ơn chân thành sâu sắc tới thầy cô giáo trường Đại học Công nghệ Thông tin Truyền thông Việt Hàn - Đại học Đà Nẵng nói chung thầy cô giáo khoa Công nghệ Thông tin nói riêng tận tình giảng dạy, truyền đạt cho em kiến thức, kinh nghiệm quý báu suốt thời gian hai năm học vừa qua Đặc biệt em xin gửi lời cảm ơn đến thầy Võ Hùng Cường tận tình giúp đỡ, trực tiếp bảo, huớng dẫn em suốt trình thực đồ án Trong thời gian học tập làm việc, em không ngừng tiếp thu thêm nhiều kiến thức bổ ích mà học tập tinh thần làm việc, thái độ nghiên cứu khoa học nghiêm túc, hiệu quả, điều cần thiết cho em trình học tập công tác sau Sau xin gửi lời cảm ơn chân thành tới gia đình, bạn bè động viên, đóng góp ý kiến giúp đỡ em trình học tập, nghiên cứu hồn thành khố luận tốt nghiệp Một lần nữa, em xin chân thành cảm ơn! NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… ………………………………………………………………………………………………… Đà Nẵng, ngày… tháng… năm 2021 GIẢNG VIÊN HƯỚNG DẪN VÕ HÙNG CƯỜNG MỤC LỤC CHƯƠNG 1: TỔNG QUAN VỀ CƠNG NGHỆ THẾT KẾ WEBSITE……………… 1.1 Tìm hiểu ngơn ngữ lập trình 1.1.1 Ngôn ngữ HTML 1.1.2 Ngôn ngữ CSS 1.1.3 Ngơn ngữ lập trình PHP 1.1.4 Framework LARAVEL 1.1.5 Mơ hình MVC 1.2 Một số thư viện hỗ trợ 1.2.1 Thư viện Javascript 1.2.2 Thư viện Ajax 1.2.3 Thư viện BOOTSTRAP 1.2.4 Thư viện JQUERY 1.3 Cơ sở liệu MySQL 1.3.1 Khái niệm sở liệu MySQL 1.3.2 Các thành phần MySQL CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG WEBSITE…………………… ……… 2.1 Khảo sát đặc tả yêu cầu 2.1.1 Phần quản lý admin 2.1.2 Giao diện người dùng 2.2 Các yêu cầu phi chức 2.3 Phân tích thiết kế hệ thống 2.3.1 Các chức hệ thống 2.3.2 Các tác nhân hệ thống 10 2.4 Biểu đồ use case 11 2.4.1 Biểu đồ Use – case tổng quát 11 2.4.2 Use case đăng nhập 12 2.4.3 Use case quản lý thể loại viết 13 2.4.4 Use case quản lý viết 13 2.4.5 Use case quản lý nhân viên 15 2.5 Biểu đồ 15 2.6 Biểu đồ, danh sách đối tượng 19 2.7 Thiết kế sở liệu 19 2.7.1 Danh sách bảng 19 2.7.2 Bảng product 20 2.7.3 Bảng type_products 20 2.7.4 Bảng tbl_admin 20 2.7.5 Bảng user 21 2.7.6 Bảng comments 21 CHƯƠNG 3: THIẾT KẾ VÀ XÂY DỰNG WEBSITE………………… ……………………… ….21 3.1 Giao diện hiển thị 21 3.1.2 Giao diện danh mục viết 23 3.1.3 Giao diện chi tiết viết 26 3.1.4 Giao diện tìm kiếm viết 27 3.2 Giao diện quản trị 27 3.2.1 Giao diện đăng nhập 27 3.2.2 Giao diện trang tổng quát admin 28 3.2.3 Giao diện quản lý thể loại viết 29 3.2.4 Giao diện quản lý viết 31 3.2.5 Giao diện quản lý nhân viên 33 KẾT LUẬN…………………………………………………….…………………………………………… ………… …….36 TÀI LIỆU THAM KHẢO…………………………………………………….……………….…………………… …37 DANH MỤC BẢNG BIỂU Bảng – yêu cầu phi chức website Bảng – Bảng chức Admin 10 Bảng – Bảng chức người dùng 11 Bảng – Danh sách đối tượng 19 Bảng – Danh sách bảng 20 Bảng – Bảng products 20 Bảng – Bảng type_products 20 Bảng – Bảng tbl_admin 21 Bảng – Bảng user 21 Bảng 10 – Bảng comments 21 DANH MỤC HÌNH ẢNH Hình – Biểu đồ Use case tổng quát 11 Hình – Use case đăng nhập 12 Hình – Biểu đồ Use case quản lý thể loại viết 13 Hình – Biểu đồ Use case quản lý viết 14 Hình – Biểu đồ Use case quản lý nhân viên 15 Hình – Biểu đồ chức đăng nhập 16 Hình – Biểu đồ quản lý thể loại viết 16 Hình – Biểu đồ quản lý viết 17 Hình – Biểu đồ quản lý nhân viên 18 Hình 10 – Mơ hình liệu quan hệ 19 Hình 11 – Giao diện tin hot trang chủ 22 Hình 12 – Giao diện Esports video đáng ý trang chủ 22 Hình 13 – Giao diện list tin tức cập nhật 23 Hình 14 – Giao diện mục GAME PC 23 Hình 15 – Giao diện mục GAME MOBILE 24 Hình 16 – Giao diện mục KHÁM PHÁ 24 Hình 17 – Giao diện mục ESPORTS 25 Hình 18 – Giao diện mục TIN TỨC 25 Hình 19 – Giao diện chi tiết viết 26 Hình 20 – Giao diện bình luận viết 26 Hình 21 – Giao diện tìm kiếm viết 27 Hình 22 – Giao diện đăng nhập admin 28 Hình 23 – Giao diện tổng quát dashboard 28 Hình 24 – Giao diện quản lý thể loại viết 29 Hình 25 – Giao diện thêm thể loại 30 Hình 26 – Giao diện sửa thể loại 30 Hình 27 – Giao diện xóa thể loại 31 Hình 28 – Giao diện quản lý viết 31 Hình 29 – Giao diện thêm viết 32 Hình 30 – Giao diện sửa viết 32 Hình 31 – Giao diện xóa viết 33 Hình 32 – Giao diện quản lý nhân viên 33 Hình 33 – Giao diện thêm tài khoản nhân viên 34 Hình 34 – Giao diện sủa tài khoản nhân viên 34 Hình 35 – Giao diện xóa tài khoản nhân viên 35 XÂY DỰNG WEBSITE CỔNG THÔNG TIN ĐIỆN TỬ GIẢI TRÍ DÀNH CHO GAME THỦ LỜI MỞ ĐẦU Ngày nay, với phát triển mạnh mẽ khoa học công nghệ, Công nghệ Thông tin ngành có vị dẫn đầu có vai trị lớn phát triển chung Các ứng dụng công nghệ thông tin áp dụng lĩnh vực nghiên cứu khoa học lĩnh vực đời sống Là phần Cơng nghệ Thơng tin, Cơng nghệ web có phát triển mạnh mẽ phổ biến nhanh lợi ích mà mang lại cho cộng đồng lớn Bằng việc lựa chọn thực đề tài “công thông tin điện tử giải trí dành cho game thủ”, em thấy việc ngành giải trí làng game có sức hút lớn giới trẻ đam mê với chủ đề cần thứ giúp ích cho họ việc nắm bắt thơng tin Website cổng thông tin điện tử dành cho game thủ giúp người giải vấn đề mà người dùng cần giúp doanh nghiệp cộng tác vào trang website để quảng bá thương hiệu Website giúp cho người dễ dàng tiếp cận thơng tin nóng đến từ tựa game mà người dùng cần nắm bắt, tìm hiểu học hỏi hay đơn giản xem tỷ số phân tích đến từ đội tuyển Esports mà u thích Nội dung đề tài gồm chương: Chương 1: Tổng quan cơng nghệ thiết kế Website Chương 2: Phân tích thiết kế hệ thống Website Chương 3: Thiết kế xây dựng Website ĐỖ HUY CƯỜNG – 18I1 XÂY DỰNG WEBSITE CỔNG THƠNG TIN ĐIỆN TỬ GIẢI TRÍ DÀNH CHO GAME THỦ CHƯƠNG 1: TỔNG QUAN VỀ CÔNG NGHỆ THIẾT KẾ WEBSITE 1.1 Tìm hiểu ngơn ngữ lập trình 1.1.1 Ngơn ngữ HTML HTML (HyperText Markup Language) – Ngôn ngữ đánh dấu siêu văn sử dụng để tạo tài liệu truy cập mạng Tài liệu HTML tạo nhờ dùng thẻ phần tử HTML File lưu máy chủ dịch vụ web với phần mở rộng “.htm” “.html” Các trình duyệt đọc tập tin HTMLvà hiển thị chúng dạng trang web Các thẻ HTML ẩn đi, hiển thị nội dung văn đối tượng khác: hình ảnh, media Với trình duyệt khác hiển thị tập HTML với kết định Các trang HTML gửi qua mạng internet theo giao thức HTTP HTML cho phép nhúng thêm đối tượng hình ảnh, âm mà cịn cho phép nhúng kịch vào ngơn ngữ kịch Javascript để tạo hiệu ứng động cho trang web Để trình bày trang web hiệu HTML cho phép sử dụng kết hợp với CSS HTML cho phép nhúng thêm đối tượng hình ảnh, âm mà cịn cho phép nhúng kịch vào ngơn ngữ kịch Javascript để tạo hiệu ứng động cho trang web HTML chuẩn ngôn ngữ internet tạo phát triển tổ chức World Wide Web Consortium cịn viết tắc W3C Trước HTML xuất theo chuẩn RFC HTML tương thích với hệ điều hành trình duyệt Khả dễ học, dễ viết ưu điểm HTML việc soạn thảo địi hỏi đơn giản, dùng word, notepad hay trình soạn thảo văn để viết cần lưu với định dạng “.html “ “.htm” tạo file chứa HTML Hiện nay, phiên HTML HTML5 với nhiều tính ưu việt so với phiên cũ HTML cải tiến nhiều đặc biệt hỗ trợ mạnh mẽ phần tử multimedia mà không cần plugin Một tập tin HTML bao gồm đoạn văn HTML, tạo lên thẻ HTML HTML5 nói chung mạnh mẽ nhiều khơng tốc độ độ thích ứng cao mà khả hỗ trợ API (Application Programming Interface - giao diện lập trình ứng dụng) DOM (Document Object Model – đối tượng thao tác văn bản) 1.1.2 Ngôn ngữ CSS CSS (Cascading Style Sheets) ngôn ngữ quy định cách trình bày cho tài liệu viết HTML, XHTML, XML, SVG, hay UML,…CSS quy định cách hiển thị thẻ HTML cách quy định thuộc tính thẻ (font chữ, kích thước, màu sắc ) CSS có cấu trúc đơn giản sử dụng từ tiếng anh để đặt tên cho thuộc tính CSS sử dụng viết trực tiếp xen lẫn vào mã HTML tham chiếu từ file css riêng biệt Hiện CSS thường viết riêng thành tập tin với mở rộng “.css” Chính mà trang web có sử dụng CSS mã HTML trở nên ngắn gọn Ngồi có ĐỖ HUY CƯỜNG – 18I1 XÂY DỰNG WEBSITE CỔNG THÔNG TIN ĐIỆN TỬ GIẢI TRÍ DÀNH CHO GAME THỦ thể sử dụng tập tin CSS cho nhiều website tiết kiệm nhiều thời gian công sức Một đặc điểm quan trọng tính kế thừa CSS giảm số lượng dòng code mà đạt yêu cầu Tuy nhiên, CSS trình duyệt hiểu theo kiểu riêng Do vậy, việc trình bày nội dung trình duyệt khác không thống CSS cung cấp hàng trăm thuộc tính trình bày dành cho đối tượng với sáng tạo cao kết hợp thuộc tính giúp mang lại hiệu 1.1.3 Ngơn ngữ lập trình PHP PHP (Hypertext Preprocessor) ngơn ngữ lập trình kịch hay loại mã lệnh chủ yếu dùng để phát triển ứng dụng viết cho máy chủ, mã nguồn mở, dùng cho mục đích tổng quát Nó thích hợp với web dễ dàng nhúng vào trang HTML Do tối ưu hóa cho ứng dụng web, tốc độ nhanh, nhỏ gọn, cú pháp giống ngơn ngữ lập trình C ngơn ngữ lập trình Java, dễ học thời gian xây dựng sản phẩm tương đối ngắn so với ngơn ngữ khác nên PHP nhanh chóng trở thành ngơn ngữ lập trình web phổ biến giới Một tập tin PHP có phần mở rộng *.php, chứa văn bản, mã nguồn HTML, CSS, Javascript, Jquery đương nhiên chứa mã nguồn PHP Đối với trang PHP có yêu cầu xem trang web Server tiến hành phát sinh trang web từ mã nguồn PHP sang mã nguồn HTML, sau chuyển mã nguồn trình duyệt web để người dùng xem Vì trình duyệt web khơng thể đọc mã nguồn PHP mà đọc mã nguồn HTML 1.1.4 Framework Laravel Laravel PHP framework mã nguồn mở miễn phí, phát triển Taylor Otwell nhắm vào mục tiêu hỗ trợ phát triển ứng dụng web theo kiếm trúc model-viewcontroller (MVC) Những tính bật Laravel bao gồm cú pháp dễ hiểu – rõ ràng , hệ thống đóng gói modular quản lý gói phụ thuộc, nhiều cách khác để truy cập vào sở liệu quan hệ, nhiều tiện ích khác hỗ trợ việc triển khai vào bảo trì ứng dụng Vào khoảng Tháng năm 2015, lập trình viên có bình chọn PHP framework phổ biến nhất, Laravel giành vị trí quán quân cho PHP framework phổ biến năm 2015, theo sau Symfony2, Nette, CodeIgniter, Yii2 vào số khác Trước đó, Tháng 2014, Laravel trở thành project PHP phổ biến theo dõi nhiều Github Laravel phát hành theo giấy phép MIT, với source code lưu trữ Github Laravel ứng dụng MVC hoàn chỉnh tương đối dễ tiếp cận phù hợp với người lập trình PHP ĐỖ HUY CƯỜNG – 18I1 ... tích thiết kế hệ thống Website Chương 3: Thiết kế xây dựng Website ĐỖ HUY CƯỜNG – 18I1 XÂY DỰNG WEBSITE CỔNG THƠNG TIN ĐIỆN TỬ GIẢI TRÍ DÀNH CHO GAME THỦ CHƯƠNG 1: TỔNG QUAN VỀ CÔNG NGHỆ THIẾT KẾ... “công thông tin điện tử giải trí dành cho game thủ? ??, em thấy việc ngành giải trí làng game có sức hút lớn giới trẻ đam mê với chủ đề cần thứ giúp ích cho họ việc nắm bắt thơng tin Website cổng thông. .. CƯỜNG – 18I1 XÂY DỰNG WEBSITE CỔNG THÔNG TIN ĐIỆN TỬ GIẢI TRÍ DÀNH CHO GAME THỦ thể sử dụng tập tin CSS cho nhiều website tiết kiệm nhiều thời gian công sức Một đặc điểm quan trọng tính kế thừa CSS