XÂY DỰNG WEBSITE GIỚI THIỆU QUẢN lý TV ANIME ATARASHI SEKAI PROJECT

lOMoARcPSD|20681854 TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT VIỆN KỸ THUẬT – CƠNG NGHỆ ĐỒ ÁN MƠN HỌC LẬP TRÌNH WEB XÂY DỰNG WEBSITE GIỚI THIỆU & QUẢN LÝ TV ANIME ATARASHI SEKAI PROJECT GVHD: THS NGUYỄN HỮU VĨNH SVTH: Nguyễn Anh Hào Trần Tiến Đạt MSSV: 1824801030064 1824801030161 LỚP: D18PM01 & D18PM03 Tháng 11/2020 Giới thiệu webside Yakusoku no uta lOMoARcPSD|20681854 Đồ án mơn Lập trình Website 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 GIỚI THIỆU & QUẢN LÝ TV ANIME ATARASHI SEKAI PROJECT 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 Giới thiệu & quản lý webside Atarashi Sekai Project lOMoARcPSD|20681854 Đồ án mơn Lập trình Website LỜI NĨI ĐẦU Hiện nay, Nhật Bản, Anime mắt, trước đó, cơng ty ln phải thiết kế trang web riêng để quản bá Anime để đưa đến fan, người xem nhanh nội dung, thông báo, ngày phát hành, tin, kiện nhanh sác Và TV Anime Atarashi Sekai Project (新しいセカイプロジェクト(Dự án giới mới)) tác giả Aoki Daisuke không ngoại lệ Đây tác phầm thứ hai ông sau tác phẩm đình đám Yakusoku no uta! (約束の歌！) Tác phẩm đưa lên website để đưa đến gần fan, người xem Và website giới thiệu quản lý thật quan trọng với tác phẩm Ngoài tên Atarashi Seikai Project, tác phẩm gọi New World Project Đề tài tiểu luận gồm phần phân chương sau: Chương 1: Tổng quan đề tài Chương 2: Giới thiệu công nghệ Chương 3: Giao diện website Chương 4: Tổng quan câu chuyện Atarashi Sekai Project Chương 5: Kết luận hướng phát triển Link tài nguyên: https://github.com/aokidai/Atarashi_Sekai_Project Giới thiệu & quản lý webside Atarashi Sekai Project lOMoARcPSD|20681854 Đồ án môn Lập trình Website MỤC LỤC CHƯƠNG 1: GIỚI THIỆU TỔNG QUAN Tên Đề Tài Mục Tiêu Đề Tài Ý Nghĩa Của Đề Tài Đối Tượng Của Đề Tài Một Số Trang Chính Của Website CHƯƠNG 2: GIỚI THIỆU CÔNG NGHỆ Giới Thiệu Về HTML 1.1 HTML gì? 1.2 Công dụng HTML 1.3 Định dạng HTML 1.4 Cấu trúc trang HTML Giới thiệu Visual Studio Code Giới thiệu Adobe Dreamweaver 11 Visual Studio 12 Ngôn ngữ CSS 15 Bootstrap 16 Ngôn ngữ Javascript 18 Giới thiệu & quản lý webside Atarashi Sekai Project lOMoARcPSD|20681854 Đồ án mơn Lập trình Website ASP.Net 23 ADO.Net 24 CHƯƠNG 3: GIAO DIỆN CHƯƠNG TRÌNH 27 Cấu trúc Giao diện 27 Cấu trúc liệu 27 Đặc tả Giao diện 28 3.1 Trang chủ 28 3.2 News 30 3.3 Story 30 3.4 Staff/Cast 31 3.5 Character 32 3.6 On Air 33 3.7 Movie 34 3.8 Music 35 3.9 Bru-Ray & DVD 35 3.10 Books 37 3.11 Special 38 3.12 Goods 38 CHƯƠNG 4: TỔNG QUAN VỀ WEB VÀ TÁC PHẨM 39 Giới thiệu & quản lý webside Atarashi Sekai Project lOMoARcPSD|20681854 Đồ án mơn Lập trình Website Câu truyện Atarashi Sekai Project 39 1.1 Về nhân vật 39 1.2 Về nội dung 39 Tổng quan Website: Các điểm mạnh Website: 40 CHƯƠNG 5: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 42 Kết đạt được: 42 Việc chưa làm được: 42 Hướng phát triển đề tài 42 TÀI LIỆU THAM KHẢO 43 Giới thiệu & quản lý webside Atarashi Sekai Project lOMoARcPSD|20681854 Đồ án mơn Lập trình Website CHƯƠNG 1: GIỚI THIỆU TỔNG QUAN Tên Đề Tài + XÂY DỰNG WEBSITE GIỚI THIỆU & QUẢN LÝ TV ANIME ATARASHI SEKAI PROJECT Mục Tiêu Đề Tài + Thiết kế, xây dựng website giới thiệu Anime Atarashi Sekai Project đơn giản, nhẹ nhàn, dể tiếp cận cho người xem Ý Nghĩa Của Đề Tài + Tạo nơi mà người xem nắn bắt thông tin Anime + Quảng bá thương hiệu Đối Tượng Của Đề Tài + Đối tượng website người xem Anime Nhật Bản Một Số Trang Chính Của Website + Trang chủ: Tổng quan Anime Atarashi Sekai Project + Tin tức (News): Cập nhật thông tin Anime + Câu truyện (Story): Tổng quan cốt truyện tập phim Anime + Nhân viên/ Diển viên (Staff/Cast): Thông tin nhân viên Anime diển viên lòng tiếng cho nhân vật + Nhân vật (Character): Giới thiệu nhân vật Anime + Ngày phát sóng (On Air): Đưa nhìn tổng quan ngày phát sóng kênh chương trình truyền hình + Phim (Movie): Nơi tung clip PV Anime + Âm nhạc (Music): Giới thiệu đưa ngày phát hành hát OP, ED khác Anime + Bru-Ray & DVD: Đưa ngày phát hành đĩa Anime sau phát sóng TV + Sách (Books): Nơi cung cấp link mua truyện tranh chưa chuyển thể Anime Giới thiệu & quản lý webside Atarashi Sekai Project lOMoARcPSD|20681854 Đồ án mơn Lập trình Website + Tốt (Goods): Bán sản phâm Anime + Đặc biệt (Special): Trình bày chương trình đặc biệt TV Anime buổi Stream Seiyuu, Giới thiệu & quản lý webside Atarashi Sekai Project lOMoARcPSD|20681854 Đồ án mơn Lập trình Website CHƯƠNG 2: GIỚI THIỆU CÔNG NGHỆ Giới Thiệu Về HTML 1.1 HTML gì? HTML (Hypertext Markup Language-Ngơn ngữ đánh dấu siêu văn bản) ngôn ngữ đánh dấu chuẩn dùng soạn thảo tài liệu World Wide Web, rõ trang Web hiển thị trình duyệt Ngơn ngữ HTML dùng tag đoạn mã lệnh trình duyệt (Web browsers) cách hiển thị thành phần trang text graphics HTML ngôn ngữ xác định cấu trúc thông tin HTML sử dụng loạt thẻ thuộc tính dùng để thị văn thông tin khác, cung cấp siêu liên kết tới tài liệu khác 1.2 Công dụng HTML Thiết kế nội dung hình thức trang web Xuất tài liệu trực tuyến hay truy xuất thông tin trực tuyến cách dùng liên kết chèn vào trang web Tạo biểu mẫu trực tuyến nhằm thu thập thông tin người dùng, quản lý giao dịch… Thêm vào đối tượng hình ảnh video, âm thanh… 1.3 Định dạng HTML Là tập tin có phần mở rộng htm html Là tập tin văn túy, có chứa mã đặc biệt gọi Tag(thẻ), thường đặt xung quanh khối văn Có thể viết nhiều trình soạn thảo: Microsoft Fontpage, notepad…và sử dụng nhiều Adobe Dreamweaver Giới thiệu & quản lý webside Atarashi Sekai Project lOMoARcPSD|20681854 Đồ án mơn Lập trình Website 1.4 Cấu trúc trang HTML Giới thiệu Visual Studio Code Visual Studio Code trình biên tập mã phát triển Microsoft dành cho Windows, Linux MacOS Nó hỗ trợ chức debug, kèm với Git, có syntax highlighting, tự hồn thành mã thơng minh, snippets, cải tiến mã nguồn Nó cho phép tùy chỉnh, đó, người dùng thay đổi theme, phím tắt, cá tùy chọn khác Nó miễn phí phần mềm mã nguồn mở, gói tải xuống có giấy phép Visual Studio Code dựa Electron, tảng sử dụng để triển khai ứng dụng Node.js máy tính cá nhân chạy động bố trí Blink Mặc dù sử dụng tảng Electron phần mềm khác Atom, thực dựa trình biên tập Visual Studio Online (tên mã "Monaco") Trong khảo sát vào năm 2018 Stack Overflow, Visual Studio Code xếp hạng trình biên tập mã phổ biến nhất, với 34.9% 75398 người trả lời tuyên bố sử dụng Visual Studio Code công bố, mắt phiên thử nghiệm vào ngày 29 tháng năm 2015 Microsoft hội nghị Build 2015 Vào ngày 18 tháng 11 năm 2015, Visual Studio Code phát hành giấy phép MIT mã nguồn đưa lên GitHub Chức Extesion (tiện ích mở rộng) cơng bố Giới thiệu & quản lý webside Atarashi Sekai Project lOMoARcPSD|20681854 Đồ án mơn Lập trình Website ✓ Phần bên trái: Chứa nọi dung đặc biệt web bao gờm phần tin tức, video, twitter link ⚫ Phần Logo nơi lại trang chủ 3.1.1 Về trang Login - Đây cửa sổ pop-up trang chủ - Mục tiêu: Cho người xem đăng nhập tài khoản có vào website 3.1.2 Về trang Create Account - Đây cửa sổ pop-up trang chủ - Mục tiêu: Cho người xem tạo tài khoản website - Trong cửa sổ tảo tài khoản này, trang bị JS để bắt lỗi người dùng không nhập tên, email, Giới thiệu & quản lý webside Atarashi Sekai Project Downloaded by heo ninh (ninhheo7@gmail.com) 29 lOMoARcPSD|20681854 Đồ án mơn Lập trình Website 3.2 News - Mục đích: Là nơi người xem cập nhật thơng tin Atarashi Sekai Project - Các tin cập nhật liên tục từ Admin kết nối xuống Cơ sở dử liệu 3.3 Story - Mục đích: + Là nơi người xem nắm sơ cốt truyện Atarashi Sekai Project + Không thế, nơi giúp người xem cập nhật tình trạng phát sóng Anime theo dổi cốt truyện tập tập phim phát sóng Giới thiệu & quản lý webside Atarashi Sekai Project Downloaded by heo ninh (ninhheo7@gmail.com) 30 lOMoARcPSD|20681854 Đồ án mơn Lập trình Website 3.4 Staff/Cast - Mục đích: Cho người xem biết nhân viên xây dụng Anime diển viên lòng tiếng cho nhân vật Anime Giới thiệu & quản lý webside Atarashi Sekai Project Downloaded by heo ninh (ninhheo7@gmail.com) 31 lOMoARcPSD|20681854 Đồ án mơn Lập trình Website 3.5 Character - Mục tiêu: Tổng quan nhân vật Atarashi Sekai Project Giới thiệu & quản lý webside Atarashi Sekai Project Downloaded by heo ninh (ninhheo7@gmail.com) 32 lOMoARcPSD|20681854 Đồ án mơn Lập trình Website 3.6 On Air - Mục tiêu: Cho người xem biết lịch phát sóng Anime thời gian* kênh truyền hình* *Múi giờ: +9 Tokyo, Osaka Nhật Bản **Các kênh truyền hình khả dụng Nhật Giới thiệu & quản lý webside Atarashi Sekai Project Downloaded by heo ninh (ninhheo7@gmail.com) 33 lOMoARcPSD|20681854 Đồ án mơn Lập trình Website 3.7 Movie - Mục đích: + Cơng chiếu PV Anime + Chiếu Reviews tập trước sau phát sóng Giới thiệu & quản lý webside Atarashi Sekai Project Downloaded by heo ninh (ninhheo7@gmail.com) 34 lOMoARcPSD|20681854 Đồ án mơn Lập trình Website 3.8 Music - Về phần Music, chia nhỏ thành phần khác - Mục đích: Cho người xem tìm tên, ngày phát hành, tác giả, hát xuất Atarashi Sekai Project - Các Music gơm lại chiếu trang - Các loại nhạc bao gờm OP, ED, SoundTrack 3.9 Bru-Ray & DVD - Mục đích: Là nơi đưa ngày bán, giá bán tập Anime - Bru-Ray & DVD khơng có trang nên mạc định nhấp vào, trang chuyển trực tiếp đến trang 第 巻 3.9.1 Campign Privilege - Là trang tổng quan giá tiền, ngày bán Atarashi Sekai Project 3.9.2 第 巻 (Tập 1) - Như trình bày trên, nhấp vào Bru-Ray & DVD, trang xuất Đây trang đưa thông tin tập DVD Giới thiệu & quản lý webside Atarashi Sekai Project Downloaded by heo ninh (ninhheo7@gmail.com) 35 lOMoARcPSD|20681854 Đồ án mơn Lập trình Website 3.9.3 第 巻 (Tập 2) - Đây trang đưa thông tin tập DVD Giới thiệu & quản lý webside Atarashi Sekai Project Downloaded by heo ninh (ninhheo7@gmail.com) 36 lOMoARcPSD|20681854 Đồ án mơn Lập trình Website 3.9.4 第 巻 (Tập 3) - Đây trang đưa thông tin tập DVD 3.10 Books - Mục đích: Là nơi đưa link để đẩn đến trang bán sách đối tác - Các sách đưa bao gồm Truyện tranh sách tiểu thuyết câu truyện Atarashi Sekai Project Giới thiệu & quản lý webside Atarashi Sekai Project Downloaded by heo ninh (ninhheo7@gmail.com) 37 lOMoARcPSD|20681854 Đồ án môn Lập trình Website 3.11 Special - Mục đích: Là trang đặc biệt chuyên cung cấp buổi biểu diển, Stream Seiyuu với khán giả 3.12 Goods - Mục đích: Là trang bán mặt hàng liên quan đến Anime - Tuy nhiên, Anime chưa phát hành nên gian hàng trống Giới thiệu & quản lý webside Atarashi Sekai Project Downloaded by heo ninh (ninhheo7@gmail.com) 38 lOMoARcPSD|20681854 Đồ án mơn Lập trình Website CHƯƠNG 4: TỔNG QUAN VỀ WEB VÀ TÁC PHẨM Câu truyện Atarashi Sekai Project 1.1 Về nhân vật - Trong Atarashi Sekai Project, ta có nhân vật có nhân vật Yuna (ユナ) Fina (フィナ) - Về nhân vật Yuna 15 tuổi, CV: Maki Kawase, cô gái xinh đẹp bị game thủ bỏ rơi Một ngày nọ, lúc với việc gửi đến giới khác, nhận trang bị học tăng cường thể chất, phép thuật tuyệt vời nhiều kỹ khác …… Nhưng khơng hiểu lại trang phục gấu Không tháo thiết bị Cô ta quay đầu nhanh nhẹn tính tình sảng khối bẻ măng, muốn nói nói rõ ràng không dự cho dù đối phương Mặt khác, anh khơng giỏi việc xây dựng mối quan hệ thân thiết người với Tuy nhiên, thuộc tính chị em Ngọt cho trẻ em Một người sành ăn tham lam, thích ăn ngon Ngun tắc hành động thường "thức ăn" - Về nhân vật Fina 10 tuổi, CV: Azumi Waki, Là nhân viên chăm có nụ cười dễ thương ln tận tâm Anh có mẹ ốm em gái nhỏ ba tuổi, vừa làm vừa nuôi sống gia đình Bạn tiêu diệt qi vật Tơi người rắn rỏi, không giỏi thể cảm xúc Cuộc gặp gỡ định mệnh với Yuna với trang bị gấu, cuối trở thành đối tác công khai riêng tư 1.2 Về nội dung Cơ gái xinh đẹp Yuna thích sống thối mái Game thủ bị bỏ rơi VRMMORPG "World Fantasy Online" Một ngày nọ, đăng nhập bình thường, có điều khác với bình thường Có lẽ trò chơi? Hay giới khác? Và trang bị Yuna hạ cánh Nó đóng gói với "quần áo gấu", "găng tay gấu" "giày gấu" Gấu……? Gấu……? Gấu ……? Gấu ……? "Đây gì?!?" Con gấu,! Hơn nữa, gấu không gấu Với phép thuật kỹ mạnh giới, Đó siêu gấu vô lý! Một chinh phục giới dường Mục đích Yuna với sức mạnh vĩ đại-đó !? Giới thiệu & quản lý webside Atarashi Sekai Project Downloaded by heo ninh (ninhheo7@gmail.com) 39 lOMoARcPSD|20681854 Đồ án môn Lập trình Website Ngay giới này, sống hạnh phúc tự do! Một phiêu lưu gấu câu chuyện hàng ngày gấu đứa trẻ gấu bất khả chiến bại mạnh bắt đầu ♪ Tổng quan Website: Các điểm mạnh Website: - Web nhúng sản trang Twitter chạy Real-live để người dùng cập nhật thơng tin từ Twitter @aokidaisuke91 - Được đính sẳn trang Youtube để người xem xem trực tiếp PV Anime - Top tin tức Anime cập nhật liên tục trang chủ Giới thiệu & quản lý webside Atarashi Sekai Project Downloaded by heo ninh (ninhheo7@gmail.com) 40 lOMoARcPSD|20681854 Đồ án môn Lập trình Website - - Các link liên kế mở tab mở tab theo quy tắc để người dùng dể dàng theo dỏi trình ghé thăm Website Các đánh dấu màu để dể dàng theo dổi menu Đặc biệt, title có logo trang web Hơn nữa, rê chuột vào từ tiếng Anh menu, xuất hướng dẫn tiếng Nhật giúp người xem dể dàng tiếp cận Giới thiệu & quản lý webside Atarashi Sekai Project Downloaded by heo ninh (ninhheo7@gmail.com) 41 lOMoARcPSD|20681854 Đồ án mơn Lập trình Website CHƯƠNG 5: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Kết đạt được: - - Thiết kế thành công website giới thiệu Anime Atarashi Sekai Project, đáp ứng yêu cầu người xem Tìm hiểu nắm công cụ để Thiết kế website như: Visual studio code, Adobe Dreamweaver CS6 ngơn ngữ lập trình Website như: HTML, Javascript, CSS Lập trình sữ dụng thành thạo công cụ SQL Server, ASP.Net ADO.Net Giao diện website thiết kế đơn giản, thân thiện dễ sử dụng Việc chưa làm được: - Việc biểu diễn thông tin website chưa linh hoạt Phân tích thiết kế chưa hồn chỉnh Nhiều chức thiếu chưa sử dụng Các chữ, khung cịn bị chạy, chư đạt tính thẩm mĩ cao Hướng phát triển đề tài Vì thời gian khơng cho phép kiến thức thiết kế lập trình nên website cịn hạn chế vấn đề chưa tìm hiểu rõ kỹ đề tài Vì đề tài cịn có nhiều thiếu sót, mong thầy giúp đỡ chúng em nhiều em tiếp tục tìm hiểu sâu cơng nghệ này, nhằm mục đích Lập trình website: ➢ Giao diện đẹp, thân thiện với người dùng, có nhiều chức tương tác tốt với người dùng ➢ Thiết kế, xây dựn lập trình bổ sung tính cịn thiếu hay chưa thật hồn chỉnh q trình sử dụng Giới thiệu & quản lý webside Atarashi Sekai Project Downloaded by heo ninh (ninhheo7@gmail.com) 42 lOMoARcPSD|20681854 Đồ án môn Lập trình Website TÀI LIỆU THAM KHẢO - Tài liệu giảng mơn “Lập trình web” thầy Nguyễn Hữu Vĩnh - Website Hiepsiit: http://www.hiepsiit.com - Website W3schools: https://www.w3schools.com/ - Các website tham khảo: + バンドリ！：https://bang-dream.com/ + 恋する小惑星：http://koiastv.com/ + Re: ステージ！: http://rst-project.com/ + 空のメソッド：http://sora-no-method.jp/ + ラブライブ！：http://www.lovelive-anime.jp/ ＋くまクマ熊べアー: https://kumakumakumabear.com/ + 約束の歌！: https://github.com/aokidai/Website-Yakusoku-no-uta + 痛いのは嫌なので防御力に極振りしたいと思います。：https://bofuri.jp/ ⚫ Các nguồn tài nguyên upload github: https://github.com/aokidai/Atarashi_Sekai_Project Giới thiệu & quản lý webside Atarashi Sekai Project Downloaded by heo ninh (ninhheo7@gmail.com) 43 ... 43 Giới thiệu & quản lý webside Atarashi Sekai Project lOMoARcPSD|20681854 Đồ án mơn Lập trình Website CHƯƠNG 1: GIỚI THIỆU TỔNG QUAN Tên Đề Tài + XÂY DỰNG WEBSITE GIỚI THIỆU & QUẢN LÝ TV ANIME. .. trình Website 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 GIỚI THIỆU & QUẢN LÝ TV ANIME ATARASHI SEKAI PROJECT. .. https://github.com/aokidai /Atarashi_ Sekai_ Project Giới thiệu & quản lý webside Atarashi Sekai Project lOMoARcPSD|20681854 Đồ án môn Lập trình Website MỤC LỤC CHƯƠNG 1: GIỚI THIỆU TỔNG QUAN