ĐỒ ÁN CƠ SỞ 1ĐỀ TÀI: WEBSITE CUNG CẤPTHÔNG TIN THIÊN TAI

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & 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 THÔNG TIN THIÊN TAI Sinh viên thực : TRẦN VĂN NHẬT KIN Lớp : 20IT9 Giảng viên hướng dẫn : TS NGUYỄN NGỌC HUYỀN TRÂN Đà nẵng, tháng năm 2021 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & 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 THÔNG TIN THIÊN TAI Sinh viên thực hiện: Trần Văn Nhật Kin – 20IT967 Giảng viên hướng dẫn: TS Nguyễn Ngọc Huyền Trân Đà Nẵng, tháng năm 2021 NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… LỜI CẢM ƠN Em xin chân thành cảm ơn Khoa Công nghệ thông tin Trường Đại học Công nghệ thông tin Truyền thông Việt-Hàn tạo điều kiện tốt cho nhóm đề tài thực tốt Đồ án sở Đặc biệt em xin chân thành cảm ơn nhiệt tình hướng dẫn đóng góp ý kiến Cơ Nguyễn Ngọc Huyền Trân giúp nhóm đề tài hồn thành tốt Đồ án sở Em xin chân thành cảm ơn! MỤC LỤC MỞ ĐẦU 1 Giới thiệu Mục tiêu, nhiệm vụ đề tài: Nội dung kế hoạch thực Bố cục báo cáo CHƯƠNG I: TỔNG QUAN VỀ CƠ SỞ LÝ THUYẾT 1.1 Giới thiệu HTML 1.1.1 HTML gì? .3 1.1.2 Đặc điểm HTML 1.1.3 Vai trò HTML lập trình web 1.1.4 Ưu điểm nhược điểm HTML 1.2 Giới thiệu CSS 1.2.1 CSS .4 1.2.2 CSS dùng để làm gì? 1.3 Giới thiệu JavaScrip 1.3.1 gì? JavaScrip 1.3.2 JavaScrip dùng để làm gì? 1.3.3 Ưu điểm nhược điểm JavaScrip .4 1.4 Giới thiệu Bootstrap 1.4.1 Boostrap gì? 1.4.2 Các file Bootstrap 1.4.3 Lợi ích Bootstrap CHƯƠNG 2:PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 2.1 Phân tích hệ thống .7 2.1.1 Yêu cầu chức 2.1.2 Yêu cầu phi chức 2.1.3 2.2 Yêu cầu hệ thống .7 Thiết kế hệ thống CHƯƠNG 3: XÂY DỰNG HỆ THỐNG KẾT LUẬN 13 TÀI LIỆU THAM KHẢO 14 DANH MỤC HÌNH Trang 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 MỞ ĐẦU 1.Giới thiệu : Ngày cơng nghệ thơng tin có bước tiến phát triển mạnh mẽ chiều sâu chiều rộng Máy tính điện tử khơng thứ quý mà ngày trở thành cơng cụ làm việc giải trí người Những năm gần đây, việc cập nhật thông tin thực giao dịch qua mạng internet ngày trở nên phổ biến Trong năm gần website tin tức ngày khẳng định vai trị xã hội, đáp ứng đa dạng mục tiêu quan tâm đông đảo người dùng Hầu hết độc giả ngày có xu hướng đọc tin tức điện thoại, máy tính nhiều báo giấy Với website tin tức, họ dễ dàng truy cập cập nhật tin tức phút giây thiết bị mà không cần phải tốn tiền hay thời gian mua báo Và chắn số lượng người đọc báo điện tử nhiều người đọc báo giấy Chúng ta biết thảm họa thiên nhiên xảy khắp nơi giới, chúng tàn phá hoàn toàn sống người mơi trường sống Có nhiều nguyên nhân tự nhiên khác dẫn đến thảm họa thiên nhiên, nhận thức nguyên nhân giúp chuẩn bị tốt chúng xảy đến Vì vậy, em định xây dựng trang “WEBSITE CUNG CẤP THÔNG TIN THIÊN TAI “ Chỉ với cú click chuột, bạn biết biến động xảy toàn giới Mục tiêu, nhiệm vụ đề tài: Giúp người xem dễ dàng nắm bắt thông tin quan trọng Dễ dàng truycập nội dung chi tiết khác có nhu cầu Đăng tải thơng tin quan trọng website Giúp người xem dễ dàng nắm bắt thông tin có website Hiển thị thơng tin giới thiệu, tìm kiếm, hình ảnh, Các thơng tin bao gồm: hình ảnh giới thiệu chương trình/sự kiện, tin tức bật, thơng tin liên hệ Tăng tính tương tác phản hồi đánh giá khách hàng Nội dung kế hoạch thực hiện: Tiêu chí dùng để xác định tin tức có thểđược tóm gọn lại sau: Có liên quan, hữu ích, gây quan tâm Những tiêu chí áp dụng rộng rãi nhà báo hay quan báo chí sử dụng chúng theo bối cảnh đặc thù để nhấn mạnh ý nghĩa theo cách riêng Cái bối cảnh cơng chúng tạo Bạn đọc báo đăng báo in Trên truyền hình, viết có chi tiết hơn, bạn nhìn thấy đoạn băng quay cảnh nhân vật tranh luận Còn báo trực tuyến, báo bao gồm chi tiết đoạn phim – cộng thêm kết nối dễ dàng đến báo liên quan tư liệu đằng sau vụ việc Cách trình bày khác loại hình, giá trị tin tức làm cho trở nên quan trọng kỹ tường thuật việc yêu cầu kể lại câu chuyện có giống Sự liên quan, hữu ích gây quan tâm định hướng khái quát để thẩm định giá trị thông tin kiện, vấn đề hay nhân vật Cùng với tiêu chí rõ ràng đó, yếu tố đặc trưng tiềm tàng câu chuyện Quan trọng yếu tố sau: •Tác động: Đây cách khác đểđo mức độ liên quan hữu ích Có người bị ảnh hưởng kiện hay ý tưởng? Nó ảnh hưởng đến họ nghiêm trọng nào? •Xung đột: Đây đề tài mn thuở câu chuyện, dù thuật lại báo chí, văn chương hay kịch nghệ Những đấu tranh người với người, quốc gia hay với sức mạnh thiên nhiên lôi người ta đọc Xung đột yếu tố đời sống, nhà báo phải tỉnh táo trước cám dỗ muốn làm cho câu chuyện tăng thêm kịch tính đơn giản hóa thái q •Mới lạ: Đây yếu tố khác phổ biến báo chí lẫn loại hình khác Con người hay kiện gây hấp dẫn có giá trị thơng tin yếu tố đặc biệt hay kỳ qi •Gần gũi: Thơng thường, người ta thích thú quan tâm đến diễn gần nơi họở Khi họ đọc hay nghe tin nước hay tin giới, họ thường muốn biết có liên can đến cộng đồng họ •Cấp thời: Tin địi hỏi phải Nếu tin thích đáng hữu ích, hẳn phải lúc Ví dụ viết vấn đề thiên tai phải đối mặt trước hình thành có ích sau Bố cục báo cáo Sau phần Mở đầu, báo cáo trình bày ba chương, cụ thể sau: Chương Tổng quan sở lý thuyết Chương Phân tích thiết kế hệ thống website cung cấp thơng tin thiên tai Chương Xây dựng kế hệ thống website cung cấp thông tin thiên tai Cuối Kết luận, Tài liệu tham khảo Phụ lục liên quan đến đề tài CHƯƠNG I: TỔNG QUAN VỀ CƠ SỞ LÝ THUYẾT 1.1 Giới thiệu HTML 1.1.1 HTML gì? HTML viết tắt Hypertext Markup Language ngơn ngữ lập trình dùng để xây dựng cấu trúc lại thành phần có Website 1.1.2 Đặc điểm HTML HTML có nhiều thẻ định dạng, bạn trình bày trang Web dễ dàng, hiệu với ngôn ngữ đánh dấu siêu văn Với tơi, ngơn ngữ đánh dấu dễ dàng đơn giản để sử dụng Chúng ta sử dụng để thiết kế trang Web với văn cách linh hoạt Một đặc điểm theo tơi thú vị HTML liên kết đến trang Web khác Nhờ ngôn ngữ đánh dấu này, bạn thêm Video, hình ảnh, âm vào để Website hấp dẫn, đẹp mắt dễ tương tác Đặc biệt, HTML hiển thị tảng khác Linux, Windows, Max tảng độc lập 1.1.3 Vai trò HTML lập trình web HTML loại ngơn ngữ đánh dấu siêu văn Như đề cập trên, giúp cấu thành cấu trúc Website, làm cho trang Web trở thành hệ thống hồn chỉnh Cụ thể, ngơn ngữ đánh dấu siêu văn giúp bố cục, chia khung sườn thành phần trang Web Đồng thời, cịn hỗ trợ khai báo File kỹ thuật số nhạc, Video, hình ảnh,… Nếu muốn Website có cấu trúc tốt, sử dụng nhiều loại yếu tố văn bản,bạn cần đến HTML Theo quan điểm tơi, lập trình viên lựa chọn ngơn ngữ lập trình riêng cho Website tùy vào mục đích sử dụng Nhưng HTML thực chất chứa yếu tố cần thiết cho thể loại 12Website Trang Web bạn cần đến ngôn ngữ HTML để hiển thị nội dung cho người truy cập Điều dù trang bạn xây dựng tảng nào, giao tiếp với ngơn ngữ lập trình để xử lý liệu Theo biết, trước bắt tay vào thiết kế, làm việc trang Web nhà phát triển Web, lập trình viên phải học HTML loại ngôn ngữ 1.1.4 Ưu điểm nhược điểm HTML 1.1.4.1 Ưu điểm HTML sử dụng để tạo bố cục, cấu trúc trang web Nó có số ưu điểm sau: • Có nhiều tài nguyên hỗ trợ với cộng đồng người dùng vơ lớn • Có thể hoạt động mượt mà hầu hết trình duyệt • Học HTML đơn giản • Các markup sử dụng HTML thường ngắn gọn, có độ đồng cao • Sử dụng mã nguồn mở, hồn tồn miễn phí • HTML chuẩn web vận hành W3C • Dễ dàng để tích hợp với loại ngơn ngữ backend (ví dụ như: PHP, Node.js, …) 1.1.4.2 Nhược Điểm Bên cạnh ưu điểm, HTML có nhược điểm định Cụ thể sau: • Chỉ áp dụng chủ yếu cho web tĩnh Nếu muốn tạo tính động, lập trình viên phải dùng thêm JavaScript ngơn ngữ backend bên thứ (ví dụ như: PHP) • Mỗi trang HTML cần tạo riêng biệt, có có nhiều yếu tố trùng lặp header, footer.13 • Khó để kiểm sốt cách đọc hiển thị file HTML trình duyệt (ví dụ, số trình duyệt cũ khơng render tag Do đó, dù HTML document có sử dụng tag trình duyệt khơng đọc được) • Một vài trình duyệt cịn chậm cập nhật để hỗ trợ tính HTML 1.2 Giới thiệu CSS 1.2.1 CSS CSS viết tắt Cascading Style Sheets Đây ngôn style sheet sử dụng để mô tả giao diện định dạng tài liệu viết ngôn ngữ đánh dấu (markup) Nó cung cấp tính bổ sung cho HTML.Nó thường sử dụng với HTML để thay đổi phong cách trang web giao diện người dùng Nó sử dụng với loại tài liệu XML bao gồm XML đơn giản, SVG XUL 1.2.2 CSS dùng để làm gì? Giải vấn đề lớn Trước có CSS, thẻ phông chữ, màu sắc, kiểu nền, xếp phần tử, đường viền kích thước phải lặp lại trang web Đây q trình dài tốn thời gian cơng sức Tiết kiệm nhiều thời gian Định nghĩa kiểu CSS lưu tệp CSS bên ngồi thay đổi tồn trang web cách thay đổi tệp Cung cấp thêm thuộc tính CSS cung cấp thuộc tính chi tiết HTML để định nghĩa giao diện trang web.14 1.3.Giới thiệu JavaScrip 1.3.1 JavaScrip gì? JavaScript ngơn ngữ lập trình website, tích hợp nhúng HTML giúp website sống động JavaScript cho phép kiểm soát hành vi trang web tốt so với sử dụng HTML 1.3.2 JavaScrip dùng để làm gì? JavaScript ứng dụng nhiều lĩnh vực: Lập trình website, xây dựng ứng dụng cho website máy chủ,ứng dụng di động, app, trò chơi Khi tải trang web, trình duyệt phân tích cú pháp HTML tạo loại liệu gọi DOM từ nội dung DOM thể chế độ xem trực tiếp trang web với mã JavaScript Đoạn mã thực cập nhật cho DOM trình bày cho người dùng Trình duyệt ghi nhận kiện giao diện người dùng như: di chuyển chuột, nhấp chuột, v.v Sau đó, tùy theo phản hồi người dùng, đoạn mã thực cơng việc lập trình tương ứng Sử dụng tất tiện ích này, bạn xây dựng ứng dụng nhỏ để phục vụ cho vài mục đích cho phép 1.3.3 Ưu điểm nhược điểm JavaScrip 1.3.3.1 Ưu điểm JavaScript có nhiều ưu điểm vượt trội so với đối thủ khác, chẳng hạn như: • JavaScript ngơn ngữ lập trình dễ học • Lỗi JavaScript dễ phát dễ sửa • JavaScript hoạt động nhiều trình duyệt, tảng • JavaScript giúp website tương tác tốt với khách truy cập • JavaScript nhanh nhẹ ngơn ngữ lập trình khác.15 1.3.3.2 Nhược điểm Một số khuyết điểm JavaScript kể đến như: • Dễ bị khai thác • Có thể dùng để thực thi mã độc máy tính người dùng • Có thể bị triển khai khác tùy thiết bị dẫn đến việc không đồng 1.4.Giới thiệu Bootstrap 1.4.1 Boostrap gì? Bootstrap framework bao gồm HTML, CSS JavaScript template dùng để phát triển website chuẩn responsive Bootstrap cho phép trình thiết kế website diễn nhanh chóng dễdàng dựa thành tố sẵn có typography, forms, buttons, tables, grids, navigation, image carousels… Bootstrap sưu tập miễn phí mã nguồn mở công cụdùng để tạo mẫu webiste hồn chỉnh Với thuộc tính giao diện quy định sẵn kích thước, màu sắc, độ cao, độ rộng…, designer sáng tạo nhiều sản phẩm mẻ tiết kiệm thời gian làm việc với framework trình thiết kế giao diện website 1.4.2 Các file Bootstrap • Bootstrap.CSS • Bootstrap.JS • Glyphicons16 1.4.2.1 Bootstrap.CSS Nó Framework CSS có chức quản lý xếp bố cục trang Web HTML có nhiệm vụ quản lý cấu trúc nội dung CSS xử lý bố cục Website Hàm CSS không giới hạn kiểu văn mà dùng định dạng bảng, bố cục hình Bạn cần thời gian để CSS ghi nhớ hết tất khai báo chọn 1.4.2.2 Bootstrap.JS Là phần cốt lõi chứa File JavaScript, chịu trách nhiệm cho việc tương tác Website Là thư viện JavaScript mã nguồn mở, đa tảng giúp bạn thêm nhiều chức vào trang Web 1.4.2.3 Glyphicons Trong giao diện trang Web, phần khơng thể thiếu Icons Chúng thường liên kết với liệu định hành động giao diện người dùng Bootstrap dùng Glyphicons để đáp ứng nhu cầu mởkhóa Halflings Glyphicons 1.4.3 Lợi ích Bootstrap Dễ dàng thao tác Cơ chế hoạt động Bootstrap dựa xu hướng mã nguồn mở HTML, CSS Javascript Người dùng cần trang bị kiến thức mã sử dụng Bootstrap hiệu Bên cạnh đó,các mã nguồn dễ dàng thay đổi chỉnh sửa tùy ý Tùy chỉnh dễ dàng Bootstrap tạo từ mã nguồn mở cho phép designer linh hoạt Giờ lựa chọn thuộc tính, phần tử phù hợp Chất lượng sản phẩm đầu hoàn hảo Bootstrap sáng tạo lập trình viên giỏi khắp giới.Bootstrap nghiên cứu thử nghiệm thiết bị Được kiểm tra nhiều lần trước đưa vào sử dụng Do đó, chọn 17 Bootstrap, bạn tin tạo nên sản phẩm với chất lượng tốt Độ tương thích cao Điểm cộng lớn Bootstrap khả tương thích với trình duyệt tảng Đây điều quan trọng cần thiết trải nghiệm người dùng Sử dụng Grid System với hai bộtiền xử lý Less Sass, Bootstrap mặc định hỗ trợ Responsive ưu tiên cho giao diện thiết bị di động Bootstrap có khả tự động điều chỉnh kích thước trang website theo khung browser Mục đích để phù hợp với hình máy tính để bàn, tablet hay laptop CHƯƠNG 2:PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG Giới thiệu sơ lược hệ thống xây dựng Website có bố cục xếp hợp lí, dễ quan sát: logo góc trái, menu ngang giao diện phần điều hướng trang web, góc menu bên phải tìm kiếm, menu dọc trang chủ,tin tức tổng hợp, dự báo thời tiết, báo động thiên tai, điều giúp người sử dụng dễ dàng chọn lọc Phần nội dung trang web phần cuối thông tin số điện thoại, địa chỉ,… 2.1 Phân tích hệ thống 2.1.1 Yêu cầu chức Sau hoàn thiện Website hiển thị đầy đủ giao diện chức trang web tin tức thiên tai như: Tin tức tổng hợp Tìm kiếm từ khóa Hiển thị tin tức ngồi nước Dự Báo Thời Tiết Báo Động Thiên Tai Liên hệ tổng đài giải thắc mắc vấn đề 2.1.2 Yêu cầu phi chức Để đảm bảo website/hệ thống phần mềm hoạt động tốt thì: Website chạy 24/24 Thiết kế đơn giản, thân thiện với người dùng Luôn sẵn sàng hỗ trợ người dùng gặp khó khăn Đảm bảo cung cấp thơng tin nhanh 2.1.3 Yêu cầu hệ thống Website hoạt động tốt hệ điều hành hỗ trợ trình duyệt web IE, Firefox, Chrome, coccoc,… 2.2 Thiết kế hệ thống Thiết kế giao diện gồm phần : Phần Header khu vực giới thiệu trang web nằm (đỉnh) trang web gồm có :  Logo  Menu điều hướng Phần Menu điều hướng thành phần thiếu website Thanh điều hướng có nhiệm vụ hiển thị danh mục nội dung website trình bày theo cấp bậc Gồm có :  Trang chủ  Tin tức tổng hợp  Trong nước    Ngoài nước Dự báo thời tiết Báo động thiên tai Phần body chứa nội dung trang web hiển thị tin tức cập nhập,thông tin tin tức, , v.v Phần footer hay gọi chân trang nằm vị trí cuối trang web Chân trang hiển thị thông tin gồm :  Địa liên hệ  Link liên kết đến trang mạng xã hội Các chức : Tìm kiếm sản phẩm : Chức cho phép người dùng tìm kiếm từ khóa liên quan quan để dễ dàng tiết kiệm thời gian Tin tức : Chức cho phép người dùng xem chi tiết thông tin sản phẩm hàng tên hàng, đánh giá, đơn giá, số hiệu,… Chương : Triển khai xây dựng Hình 3.1.1 Giao diện trang chủ Trên menu trang chủ, người dùng dễ dàng truy cập vào tính trang web tin tổng hợp, Dự báo thời tiết hôm nay, báo động thiên tai Hình 3.1.2.Tin Tức Trong trang trang chủ có hiển thị tin tức nhất,mọi người dễ dàng biết mà không cần sử dụng menu Hình 3.1.3 Tin tức tổng hợp Tồn tin tức đưa lên trang tin tổng hợp, cịn người sử dụng cịn biết thơng tin nước ngồi nước có nhu cầu Hình 3.1.4 Thơng tin chi tiết Tồn thơng tin nội dung điều có tin tức bạn đọc 10 Hình 3.1.5 Dự báo thời tiết hơm Dự báo thời tiết adim cập nhập liên tục ngày Hình 3.1.6 Báo động thiên tai Khi có tin tức thiên tai cấp độ đến admin đăng hệ thống đảm bảo người dùng biết diễn biến , tình hình để phịng tránh 11 Hình 3.1.7.Thơng tin liên hệ Ở cuối trang ,có phần hiển thị thơng tin liên hệ để khách hàng dễ dàng liên lạc cần thiết 12 Kết luận Mặc dù trang web em chưa hồn chỉnh cịn nhiều lỗi sai đồng thời mày mò thêm nhiều kiến thức trình thiết kế, làm mà trước khơng thể làm Qua chúng em rút phải thật chăm cố gắng học hỏi thêm cịn vơ vàn kiến thức trước mắt Em có thêm nhiều kinh nghiệm thiết kế web,những chức trang web hiểu biết tình hình người dùng ➢ Hướng phát triển: Bổ sung hồn thiện trang có Chỉnh sửa thêm phần giao diện Tăng cường chế độ bảo mật cho website 13 DANH MỤC TÀI LIỆU THAM KHẢO Tiếng Việt: “Lập trình sở liệu” Tập - Quyển ,Phạm Hữu Khang , Nhà xuất Lao động Xã Hội, Năm 2005 “Lập trình sở liệu” Tập - Quyển ,Phạm Hữu Khang , Nhà xuất Lao động Xã Hội, Năm 2005 “SQL Server”, Phạm Hữu Khang , Nhà xuất Lao động Xã Hội, Năm 2005 www.google.com.vn 14