ĐẠI HỌC ĐÀ NẴNGKHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNGĐỒ ÁN CƠ SỞ 1Đề tài : Website Đoàn thanh niên

ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG ĐỒ ÁN CƠ SỞ Đề tài : Website Đoàn niên Sinh viên thực : TRẦN LÝ THẮNG LÊ ĐÌNH BẢO PHÚC Giảng viên hướng dẫn : TS NGUYỄN ANH TUẤN Lớp : 19IT3 Đà nẵng, tháng 08 năm 2020 ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG ĐỒ ÁN CƠ SỞ Đề tài : Website Đoàn niên Đà Nẵng, tháng 08 năm 2020 MỞ ĐẦU Đồn TNCS Hồ Chí Minh tổ chức trị - xã hội niên Việt Nam Đảng Cộng sản Việt Nam Chủ tịch Hồ Chí Minh sáng lập, lãnh đạo rèn luyện Hiện đa số bạn trẻ gia nhập Đoàn phần lớn bạn trẻ chưa tìm hiểu sâu Đồn luật lệ, nội quy Đồn Vì chúng tơi mang đến trang web giúp bạn trẻ hiểu thêm lý tưởng, mục đích, hoạt động Đoàn Mục tiêu : giúp người hiểu rõ lịch sử Đồn TNCS Hồ Chí Minh, giới thiệu cho người mục đích, lý tưởng Đồn TNCS Hồ Chí Minh Những bạn đồn viên nắm bắt tin tức đoàn tham gia phong trào lớn đồn Xung kích bảo vệ Tổ quốc Tuổi trẻ sáng tạo,… LỜI CẢM ƠN Lời đầu tiên, em xin gửi lời cảm ơn chân thành đến thầy cô Khoa Công nghệ Thông tin & Truyền Thông mang đến cho em thông tin, kiến thức môn Công nghệ Web truyền đạt kiến thức chuyên ngành bổ ích kỹ sống Đặc biệt, em xin cảm ơn tới giảng viên hướng dẫn ThS.Nguyễn Anh Tuấn– Giảng viên môn Công nghệ Web nâng cao, Lập trình mạng, Lập trình di động, Khoa Cơng nghệ Thơng tin & Truyền Thông, Trường Đại học Công nghệ Thông tin & Truyền thông Việt Hàn - Đại học Đà Nẵng tận tình hướng dẫn, góp ý theo sát giúp em hồn thành đồ án tốt 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 giúp trình nghiên cứu thực đề tài Em xin chân thành cảm ơn! NHẬN XÉT …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… NHẬN XÉT (Của giảng viên hướng dẫn) …… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… ……………………………………………………… …………………………… MỤC LỤC MỞ ĐẦU LỜI CẢM ƠN…………………………………………………………………….1 Chương Giới thiệu Error: Reference source not found 1.1 Tổng quan Error: Reference source not found 1.2 Phương pháp Error: Reference source not found 1.3 Cấu trúc đồ án Error: Reference source not found Chương Nghiên cứu tổng quan Error: Reference source not found 2.1 Công cụ thiết kế website Error: Reference source not found 2.2 Cơ sở lý thuyết ứng dụng .Error: Reference source not found 2.3 Một số thư viện hỗ trợ Error: Reference source not found 2.4 Khảo sát Error: Reference source not found Chương Phân tích thiết kế hệ thống Error: Reference source not found 3.1 Mơ hình tổng quan Error: Reference source not found 3.2 Triển khai xây dựng .Error: Reference source not found Chương 4: Kết luận hướng phát triển Error: Reference source not found 4.1 Kết luận Error: Reference source not found 4.2 Hướng phát triển Error: Reference source not found DANH MỤC TÀI LIỆU THAM KHẢO Error: Reference source not found DANH MỤC CỤM TỪ VIẾT TẮT STT Cụm từ Công nghệ phần mềm Công nghệ thông tin … Viết tắt CNPM CNTT Chương Giới thiệu 1.1 Tổng quan Đồn TNCS Hồ Chí Minh tổ chức trị - xã hội niên Việt Nam Đảng Cộng sản Việt Nam Chủ tịch Hồ Chí Minh sáng lập, lãnh đạo rèn luyện Hiện đa số bạn trẻ gia nhập Đoàn phần lớn bạn trẻ chưa tìm hiểu sâu Đoàn luật lệ, nội quy Đồn Vì chúng tơi mang đến trang web giúp bạn trẻ hiểu thêm lý tưởng, mục đích, hoạt động Đồn Mục tiêu : - Giúp bạn trẻ tìm hiểu thêm đoàn - Giới thiệu cho người mục đích, lý tưởng Đồn - Tổ chức chương trình phong trào có ích cho bạn trẻ - Tăng khả tương tác đoàn viên 1.2 Phương pháp - Đọc tài liệu tham khảo - Nắm vững HTML - Khảo sát trạng - Phân tích thiết kế hệ thống - Viết chương trình 1.3 Cấu trúc đồ án - Giới thiệu tổng quan phương pháp cấu trúc đồ án - Kiến thức tổng quan - Phân tích thiết kế hệ thống: Trình bày chức kết đạt trình xây dựng website - Kết luận hướng phát triển: tổng kết đề tài đưa phương hướng phát triển Chương Kiến thức tổng quan 2.1 Công cụ thiết kế website Sublime text trình soạn thảo văn tinh vi developer sử dụng rộng rãi Sublime text bao gồm hệ tính đa dạng Syntax Highlight, Auto Indentation, File Type Recognition, Sidebar, Macros, Plug-in Package cho phép làm việc với code base dễ dàng 2.2 Cơ sở lý thuyết, ứng dụng 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 HTML 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 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) 2.2.1 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 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 2.3 Một số thư viện hỗ trợ: 2.3.1 Thư viện Javascript JavaScript ngôn ngữ dạng script thường sử dụng cho việc lập trình web phía client, tn theo chuẩn ECMAScript Là ngôn ngữ linh động, cú pháp dễ sử dụng ngôn ngữ khác dễ dàng lập trình JavaScript khơng liên quan tới ngơn ngữ lập trình java, hầu hết trình duyệt ngày hỗ trợ Với javascript, ứng dụng web bạn trở nên vơ sinh động, mang tính trực quan tương tác cao JavaScript theo phiên hành ngơn ngữ lập trình kịch dựa đối tượng phát triển từ ý niệm nguyên mẫu Ngôn ngữ dùng rộng rãi cho trang web, dùng để tạo khả viết script sử dụng đối tượng nằm sẵn ứng dụng Giống Java, JavaScript có cú pháp tương tự ngơn ngữ lập trình C “.js” phần mở rộng thường dùng cho tập tin mã nguồn JavaScript 2.3.2 Thư viện BOOTSTRAP Bootstrap Framework có chứa HTML, CSS, JAVASCRIPT, Framework tiếng việt có nghĩa “khuôn khổ” giúp tiết kiệm thời gian, công sức việc xây dựng hai teamplate cho giao diện Desktop Mobile lỗi thời thay vào Responsive Responsive giúp website bạn hiển thị tương thích với kích thước hình nhờ bạn tùy chỉnh thị nhiều loại hình khác Ưu điểm Bootstrap: - Tiết kiệm thời gian: Boostrap giúp người thiết kế giao diện website tiết kiệm nhiều thời gian Các thư viện Bootstrap có đoạn mã sẵn sàng cho bạn áp dùng vào website Bạn khơng phải tốn nhiều thời gian để tự viết code cho giao diện - Tùy biến cao: Bạn hồn tồn dựa vào Bootstrap phát triển tảng giao diện Bootstrap cung cấp cho bạn hệ thống Grid System mặc định bao gồm 12 bột độ rộng 940px Bạn thay đổi, nâng cấp phát triển dựa tảng - Responsive Web Design: Với Bootstrap, việc phát triển giao diện website để phù hợp với đa thiết bị trở nên dễ dàng hết Đây xu hướng phát triển giao diện website ưu chuộng giới 2.3.3 Thư viện JQUERY JQuery thư viện kiểu JavaScript, tạo John Resig vào năm 2006 với phương châm tuyệt vời: Write less, more - Viết hơn, làm nhiều JQuery làm đơn giản hóa việc truyền tải HTML, xử lý kiện, tạo hiệu ứng động tương tác Ajax Với jQuery, khái niệm Rapid Web Development khơng cịn q xa lạ JQuery cơng cụ tiện ích JavaScript làm đơn giản hóa tác vụ đa dạng với việc viết code Dưới liệt kê số tính tối quan trọng hỗ trợ jQuery: Thao tác DOM − jQuery giúp dễ dàng lựa chọn phần tử DOM để traverse (duyệt) cách dễ dàng sử dụng CSS, chỉnh sửa nội dung chúng sử dụng phương tiện Selector mã nguồn mở, mà gọi Sizzle Xử lý kiện − jQuery giúp tương tác với người dùng tốt việc xử lý kiện đa dạng mà không làm cho HTML code rối tung lên với Event Handler Hỗ trợ AJAX − jQuery giúp bạn nhiều để phát triển site giàu tính phản hồi tốt sử dụng công nghệ AJAX Hiệu ứng − jQuery kèm với nhiều hiệu ứng đa dạng đẹp mắt mà bạn sử dụng Website Gọn nhẹ − jQuery thư viện gọn nhẹ - có kích cỡ khoảng 19KB (gzipped) Được hỗ trợ hầu hết trình duyệt đại − jQuery hỗ trợ hầu hết trình duyệt đại, làm việc tốt IE 6.0+, FF 2.0+, Safari 3.0+, Chrome Opera 9.0+ Cập nhật hỗ trợ công nghệ − jQuery hỗ trợ CSS3 Selector cú pháp XPath 2.4 Khảo sát Đối tượng khảo sát : Website “Doanthanhnien.vn’’ Hạn chế có : Website chức năng, khơng có chức đăng nhập dành cho đồn viên quản trị Chương Phân tích thiết kế hệ thống 3.1 Mơ hình tổng quan hệ thống Các yêu cầu chức : - Đăng ký tài khoản - Đăng nhập - Chỉnh sửa thơng tin người dùng - Có thể tham gia thi trực tuyến - Quản lí viết, bình luận - Quản lí người dùng - Quản lí lượt xem trang web Các yêu cầu hệ thống : - Website không phức tạp - Font chữ đơn giản, dễ nhìn, màu sắc bắt mắt - Website có giao diện điện thoại, tương ứng với trình duyệt - Hệ thống hoạt động mượt mà, xác 3.2 Triển khai xây dựng Trang chủ Hình Trang chủ Trang giới thiệu Hình Trang giới thiệu Trang chiến dịch tình nguyện hè Hình Trang chiến dịch tình nguyện hè Trang cơng tác giáo dục Hình Trang cơng tác giáo dục Trang phong trào Hình Trang phong trào Trang phong trào xung kích bảo vệ tổ quốc Hình Trang phong trào xung kích bảo vệ tổ quốc Trang phong trào tuổi trẻ sáng tạo Hình Trang phong trào tuổi trẻ sáng tạo Trang chương trình Hình Trang chương trình Trang chương trình học tập Hình Trang chương trình học tập Trang chương trình khởi nghiệp, lập nghiệp Hình 10 Trang chương trình khởi nghiệp, lập nghiệp Trang kỹ năng, thể chất, văn hóa Hình 11 Trang kỹ thể chất văn hóa Trang hội nhập quốc tế Hình 12 Trang hội nhập quốc tế Trang đăng nhập Hình 13 Trang đăng nhập Trang người dùng Hình 14 Trang người dùng Trang chức thi trực tuyến Hình 15 Trang thi trực tuyến Trang quản trị Hình 16 Trang quản trị Chương Kết luận Hướng phát triển 4.1 Kết luận: Kết đạt : - Hiểu cách hoạt động sử dụng JavaScript - Hiểu cách cài đặt sử dụng Bootstrap - Hiểu chức HTML để phát triển website quản lý - Đã cài đặt sử dụng thư viện ngồi - Đã cài đặt thành cơng Bootstrap - Đã thực tương đối chức toán quản lý ký túc xá sinh viên Hạn chế : - Website chưa đầy đủ chức năng, chưa có giao diện hỗ trợ cho thiết bị di động nhiều hạn chế khác thời gian có hạn 4.2 Hướng phát triển: Thường xuyên kiểm tra, sửa chữa, phát vấn đề phải giải nhanh chóng Cập nhật nhiều tính hỗ trợ người dùng Tìm hiểu sâu cách ứng dụng ngôn ngữ, công cụ thiết kế website để nâng cao mức độ hoàn thiện website DANH MỤC TÀI LIỆU THAM KHẢO Trang web Doanthanhnien.vn xem lần cuối ngày 04/08/2020