ĐỒ ÁN CƠ SỞ 1 ĐỀ TÀI: WEBSITE CUNG CẤP TÀI LIỆU CHO KÌ THI THPT

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 ĐỒ ÁN CƠ SỞ ĐỀ TÀI: WEBSITE CUNG CẤP TÀI LIỆU CHO KÌ THI THPT Sinh viên thực : NGUYỄN CÔNG LÂM NGUYỄN VĂN DŨNG Giảng viên hướng dẫn : NGUYỄN THANH BÌNH Lớp : 20IT1 Đà nẵng, tháng năm 2021 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 ĐỒ ÁN CƠ SỞ ĐỀ TÀI: WEBSITE CUNG CẤP TÀI LIỆU CHO KÌ THI THPT Sinh viên thực : Giảng viên hướng dẫn : Lớp : NGUYỄN CÔNG LÂM NGUYỄN VĂN DŨNG NGUYỄN THANH BÌNH 20IT1 Đà Nẵng, tháng năm 2021 MỞ ĐẦU Giới Thiệu Ngày nay, sống kỷ nguyên tin học nhờ vượt bậc bùng nổ mạnh mẽ công nghệ thông tin, Công nghệ thơng tin khơng ngừng dừng lại mục đích phục vụ cho khoa học kĩ thuật mà sâu vào đời sống, trị, kinh tế, xã hội, trở nên thân thiện, gần gũi, mang lại nhiều lợi ích cho người Công nghệ thông tin ngày khẳng định tính hữu ích sức mạnh phương diện, ngành nghề sống, thời đại kinh tế thị trường Đi kèm theo đó, hệ thống website phát triển không ngường với đủ lĩnh vực: văn hố, thời sự, khoa học cơng nghệ, làm đẹp, nấu ăn, thể thao, ca nhạc, phim ảnh, giáo dục, y tế… Tuy nhiên, để tạo trang web có sức sống bền lâu thân phải mạng lại lợi ích cho nhiều người Giao diện bắt mắt yếu tố quan trọng để người xem click chuột đến website bạn Những yếu tố định giữ chân đọc giả lại nội dung mà website cung cấp Trong thời gian tháng , giúp đỡ thầy giáo Nguyễn Thanh Bình Đại Học Công Nghệ Thông Tin Và Truyền Thông Việt Hàn – Đại Học Đà Nẵng, chúng em hoàn thành báo với đề tài thiết kế giao diện website cung cấp tài liệu cho Trung học phổ thông Mục tiêu Mục tiêu đề tài thiết kế giao diện website cung cấp tài liệu cho học sinh trung học phổ thơng ơn thi tốt nghiệp - Tìm hiểu tài liệu môn học thi tốt nghiệp(tốn, lý, hố, anh,sử…) - Tìm hiểu phương pháp giải nhanh - Tìm hiểu đề thi Phạm vi Cung cấp tài liệu cho học sinh Trung học phổ thông ôn thi học sinh ôn thi năm tới Phương pháp nghiên - Nghiên cứu quy trình phân tích, thiết kế website - Nghiên cứu cách sử dụng công nghệ cần thiết để thiết kế, xây dựng website như: HTML5, CSS, Javascript, Bootstrap Nội dung tiến độ nghiên cứu Thời gian Nội dung thực Người thực Từ 20/3/2012 đến Khảo sát trạng Nguyễn Văn Dũng 28/3/2021 Từ 29/3/2021 đến trang website học tập Nguyễn Cơng Lâm Tìm hiểu công nghệ xây Nguyễn Văn Dũng 5/4/2021 dựng website tìm tài liệu Nguyễn Cơng Lâm Từ 6/4/2021 đến học học tập Thiết kế giao 20/4/2021 Từ 21/4/2021 đến chủ,trang đăng nhập, đăng ký Nguyễn Công Lâm Thiết kế giao diện tài liệu, đề Nguyễn Văn Dũng 6/5/2021 Từ 7/5/2021 đến thi, đề minh hoạ Nguyễn Công Lâm Sử lỗi giao diện website Nguyễn Văn Dũng 14/5/2021 Từ 14/5/2021 đến hoàn thiện Viết báo cáo 22/5/2021 Từ 22/5/2021 đến Nguyễn Cơng Lâm Hồn thiện website nộp lên Nguyễn Công Lâm 26/5/2021 hệ thống diện trang Nguyễn Văn Dũng Nguyễn Công Lâm Nguyễn Văn Dũng LỜI CẢM ƠN Để thực hoàn thành tốt đồ án này, em nhận giúp đỡ hướng dẫn tận tình thầy thuộc Đại Học Công Nghệ Thông Tin Và Truyền Thông Việt Hàn – Đại Học Đà Nẵng Em xin cảm ơn thầy cô thuộc môn chuyên ngành cung cấp cho chúng em thông tin, kiến thức vô quý báu cần thiết suốt thời gian để em thực hồn thành đồ án Đặc biệt em xin chân thành cảm ơn thầy Nguyễn Thanh Bình, người trực tiếp hướng dẫn chúng em thời gian thực đồ án Cuối cùng, xin chân thành cảm ơn bạn ngành công nghệ thông tin ủng hộ, giúp đỡ, chia sẻ kiến thức, kinh nghiệm tài liệu có giúp chúng tơi q trình nghiên cứu thực đề tài Do giới hạn mặt thời gian kiến thức kinh nghiệm thực tiễn nên đề tài khơng tránh khỏi sai sót Em mong nhận thông cảm quý thầy mong đón nhận góp ý thầy cô bạn Em xin chân thành cảm ơn! NHẬN XÉT (Của giảng viên hướng dẫn) ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… ……………………………………………………………………………… MỤC LỤC Chương Giới thiệu thiết kế giao diện website 1.1Tổng quan đề tài 1.2Phương pháp, kết .8 1.3Cấu trúc đồ án 1.4Các hệ thống website tương tự .9 1.5Các công cụ hỗ trợ thực thiết kế website Chương Nghiên cứu tổng quan .12 2.1Các phương pháp 12 2.2Hạn chế, tồn phương pháp 12 2.3Kết luận 13 Chương Triển khai xây dựng 14 3.1Tìm hiểu layout website 14 3.2Thiết kế trang chủ website 14 3.3Thiết kế trang tài liệu chi tiết .16 Chương Kết luận hướng phát triển 20 4.1Kết luận 20 4.2Hướng phát triển 20 DANH MỤC CỤM TỪ VIẾT TẮT STT Cụm từ Trung học phổ thông Công nghệ thông tin Viết tắt THPT CNTT tối ưu cho hệ điều hành Windows Hỗ trợ mạnh mẽ cho cộng đồng nhiều Plugins, snippets, code auto complete, highlight beautiful, tùy biến giao diện, phím tắt, nhiều thứ khác Phát triển tích cực với hỗ trợ Microsoft Các tài liệu thức trì tốt Có hỗ trợ tích cực cộng đồng với tất plugin bạn cần Nếu gửi lỗi GitHub, bạn thường nhận phản hồi vịng ngày Thực tính tìm kiếm thay vơ dễ dàng, giúp cho nhanh chóng chỉnh sửa đoạn code bị lỗi Tự động báo lỗi trình viết chương trình Phần mềm Bracker tích hợp sẵn tính Quick Edit giúp cho người dễ dàng nhanh chóng soạn thảo chương trình Tự động báo lỗi lập trình javascript với công cụ JSLint Nhược điểm phần mềm chưa tối ưu hồn tồn ngơn ngữ, khó giải gặp lỗi bug, code, Các phím tắt mặc định khơng có ý nghĩa người dùng phải cấu hình lại gần tất chúng Các phần mềm chia cột thi tập tin Đối với eclipse, phần mềm tốn dung lượng nhớ Một số phần mềm cần phải trả phí Sublime Text…  Các công cụ hỗ trợ việc thiết kế : Thư viện Bootstrap thư viện sẵn có nên việc sử dụng giúp bạn phát triển nhanh chóng website Rất dễ sử dụng, viết html, css, javascript nên bạn cần có kiến thức sử dụng bootstrap tốt Tính Responsive hữu ích: Bootstrap xây dựng sẵn reponsive css thiết bị mobiles, tablets, desktops nên bạn không thời gian viết đống css lằng nhằng Tương thích với trình duyệt: Nó tương thích với tất trình duyệt (Chrome, Firefox, Internet Explorer, Safari, and Opera) Javascript giúp tăng tính tương tác website Script chạy trình duyệt người dùng thay server thường sử dụng thư viện bên thứ nên tăng thêm chức cho website mà code từ đầu 10 Photoshop CS6 để khắc phục hầu hết lỗi hình ảnh Photoshop cho phép bạn đổi màu, thêm bớt, xoá bỏ vật thể Bạn dễ dàng tạo hiệu ứng tuyệt đẹp photoshop Responsive để làm cho website tự điều chỉnh kích thước theo hình, giúp cho người dùng có trải nghiệm tối ưu mà không ảnh hưởng loại thiết bị mà họ dùng để truy cập vào website Lợi ích trang web tải cách nhanh chóng mà khơng bị biến dạng, người dùng không cần phải resize tay 11 Chương Nghiên cứu tổng quan 8.1 Các phương pháp  Thu thập thông tin Website liên quan đến cung cấp tài Website liên quan đến cung liệu Các tài liệu liên quan đến ơn tập cấp tài liệu uy tín Các tài liệu đề trọng vào môn học Không trọng đến chất lượng kiến thức nâng cao Không trọng đưa thông tin tài liệu đưa phương pháp giải nhanh Bảng Nghiên cứu tổng quan.1 Bảng so sánh phương pháp  Xây dựng website Hình 2.1 Visual Studio Code 8.2 Hạn chế, tồn phương pháp  Website cung cấp tài liệu cho THPT - Hạn chế:  Hầu hết website không đầu tư nhiều 12  Lượng thông tin chất lượng tài liệu không kiểm chứng  Không đầu tư nhiều chất lượng tài liệu ơn tập  Ít đưa tài liệu giải ngắn gọn - Tồn  Nhiều tài liệu đưa phương pháp giải khác  Tài liệu giải nhanh sai công thức  Tài liệu đưa không kiểm chứng nhiều  Gây hoang mang cho học sinh THPT  Website cung cấp tài liệu cho THPT uy tín - Hạn chế:  Đầu tư giao diện  Chưa sâu vào số tài liệu quan trọng  Tài liệu nhiều thơng tin  Ít tài liệu cung cấp việc giải nhanh - Tồn  Tài liệu dành cho học sinh THPT cịn cũ khơng cập nhật lại  Thông tin tài liệu cịn 8.3 Kết luận Mạng Internet nơi lưu trữ nhiều thông tin tài liệu cục lớn nhờ nhóm chúng em thu thập nhiều kiến thức, tư liệu, thông tin,…cần thiết để đưa vào website.Nhưng việc tìm kiếm tài liệu chất lượng khó khăn nhiều trang website khác đưa tài liệu khác không đồng 13 14 Chương Triển khai xây dựng 9.1 Tìm hiểu layout website Thơng qua việc tìm hiểu layout số website nhóm chúng em nhận website bao gồm phần:  Header: Phần đầu trang, khu vực người ta thường đặt logo, banner, hiệu website/blog  Content: Phần nội dung, nội dung viết danh sách viết;  Footer : Phân trang, khu vực website Đây nơi dành để giới thiệu ngắn gọn website/blog, thông tin liên hệ, đồ,… 9.2 Thiết kế trang chủ website Trang chủ website phần đập vào mắt người dùng, trang chủ cần phải có màu sắc hài hòa , giao diện đơn giản,dễ sử dụng  Thiết kế header Logo: Hình 3.1 Logo website Logo website chúng em sử dụng hình ảnh người vòng tay lại tượng trưng cho cộng đồng với mong muốn đem lại nguồn tài liệu đa dạng phong phú cho sĩ tử trước kì thi THPT tới  Bố cục website Bố cục website nhóm chúng em bao gồm :  Trang chủ 15  Đề thi  Đề minh họa  Tin tức  Đăng nhập  Đăng kí Hình 3.1: Trang chủ Hình 3.2: Hình ảnh tài liệu trang chủ 16 Hình 3.3: Footer trang chủ 9.3 Thiết kế trang tài liệu chi tiết  Trang chủ Trang chủ hiển thị thơng tin website nhóm chúng em như:  - Các tài liệu cho môn học - Các cơng thức giải nhanh,từ khóa học nhanh dễ nhớ - Một số đề thi trường THPT nước Đề thi Đề thi hiển thị tất đề thi theo môn cập nhật ngày giúp cho em biết thêm số dạng tập nơi khác giúp cho em củng cố nắm kiến thức dạng khác Hình 3.4 : trang đề thi mơn tốn 17  Đề minh họa Đề minh họa hiển thị danh sách đề minh họa qua năm ,các em lấy làm sở để kiểm tra thực lực thân đến đâu Hình 3.5 Đề minh hoạ Hình 3.6 Đề minh hoạ 18  Tin tức Tin tức hiển thị thông tin liên quan đến giáo dục nước Hình 3.7 Trang tin tức  Đăng nhập/ Đăng ký 19 Hình 3.5: Đăng nhập Hình 3.6 Đăng ký 20 Chương 10 Kết luận hướng phát triển 10.1 Kết luận Trong trình làm đồ án, chúng em gặp nhiều khó khăn giúp đỡ tận tình thầy, nhóm em hồn thành đồ án Chúng em tìm hiểu tham khảo trang web chuyên cung cấp tài liệu tailieugiangday.com,tailieuso.net… Từ nhóm đưa ý tưởng, định hướng giao diện web Trong làm đồ án kiến thức có hạn nên khơng tránh khỏi sai sót , mong thầy bạn đóng góp ý kiến để đồ án hoàn thiện tốt hơn, để đáp ứng với nhu cầu thực tế Cuối chúng em xin chân thành cảm ơn giúp đỡ thầy trình làm đồ án, để đồ án hoàn thành 10.2 Hướng phát triển Đối thủ cạnh tranh: Hiện mạng có nhiều trang web chuyên cung cấp tài liệu như: 123doc.org, slideshare.net, violet.vn, tuyensinh247.com , hocmai.vn, vietjack.com,… Hướng phát triển trang web tương lai:  Trở trành trang web tin cậy cho hàng nghìn em học sinh nước  Tối ưu hóa trang để website hồn thiện 21 TÀI LIỆU THAM KHẢO I Sách Đinh Xuân Lâm _Những thực hành HTML_Nhà xuất Thống kê,2001 Bùi Thanh Vân-Ngô Ánh Tuyết_Tin học ứng dụng_Nhà xuất Giáo dục,2000 AptechLimeted_HTML NextGen Web_Năm xuất 2013 II Các trang web https://www.google.com.vn/ https://www.w3schools.com/ https://hoc247.net/ https://www-fbvn.fujifilm.com/vi-VN/Sustainability/Fuji-XeroxLearning-Materials-Project-For-the-Children-of-Tomorrow https://thuvien.hufi.edu.vn/Page/website-hoc-lieu-mo-nuoc-ngoai https://thuvien.hoasen.edu.vn/vi/dich-vu/ho-tro-tai-lieu-hoc-tap29.html http://www.tailieugiangday.com/ 22 PHỤ LỤC Mã nguồn Website: Hình Mã nguồn Trang chủ Hình Mã nguồn trang đăng nhập 23 24