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

Vì vậy, em quyết định xây dựng trang “WEBSITE CUNG CẤP THÔNG TIN THIÊN TAI “ .Chỉ với một cú click chuột, bạn có thể biết được những biến động đang xảy ra trên toàn thế giới 2.. HTML viế

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

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Ở 1

ĐỀ 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 5 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ôngnghệ thông tin và Truyền thông Việt-Hàn đã tạo điều kiện tốt cho nhóm đề tài thựchiện tốt Đồ án cơ sở 1

Đặc biệt em xin chân thành cảm ơn sự nhiệt tình hướng dẫn và đóng góp ý kiếncủa Cô Nguyễn Ngọc Huyền Trân đã giúp nhóm đề tài hoàn thành tốt Đồ án cơ sở 1

Em xin chân thành cảm ơn!

MỤC LỤC

MỞ ĐẦU 1

1 Giới thiệu 1

2 Mục tiêu, nhiệm vụ của đề tài: 1

3 Nội dung và kế hoạch thực hiện 1

4 Bố cục của bài báo cáo 2

CHƯƠNG I: TỔNG QUAN VỀ CƠ SỞ LÝ THUYẾT 3

1.1 Giới thiệu về HTML 3

1.1.1 HTML là gì? 3

1.1.2 Đặc điểm của HTML 3

1.1.3 Vai trò của HTML trong lập trình web 3

1.1.4 Ưu điểm và nhược điểm của HTML 3

1.2 Giới thiệu CSS 4

1.2.1 CSS là gì 4

1.2.2 CSS dùng để làm gì? 4

1.3 Giới thiệu JavaScrip 4

1.3.1 JavaScrip là gì? 4

1.3.2 JavaScrip dùng để làm gì? 4

1.3.3 Ưu điểm và nhược điểm của JavaScrip 4

1.4 Giới thiệu Bootstrap 5

1.4.1 Boostrap là gì? 5

1.4.2 Các file chính của Bootstrap 5

1.4.3 Lợi ích của Bootstrap 5

CHƯƠNG 2:PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 7

2.1 Phân tích hệ thống 7

2.1.1 Yêu cầu chức năng 7

2.1.2 Yêu cầu phi chức năng 7

2.1.3 Yêu cầu hệ thống 7

2.2 Thiết kế hệ thống 7

CHƯƠNG 3: XÂY DỰNG HỆ THỐNG 9

KẾT LUẬN 13

TÀI LIỆU THAM KHẢO 14

DANH MỤC HÌNH

Trang

Hình 3.1.1 Giao diện trang chủ……… ……….9

Hình 3.1.2.Tin Tức mới nhất ……….9

Hình 3.1.3 Tin tức tổng hợp ……… 10

Hình 3.1.4 Thông tin chi tiết……….………….10

Hình 3.1.5 Dự báo thời tiết hôm nay………11

Hình 3.1.6 Báo động thiên tai……….….…11

Hình 3.1.7.Thông tin liên hệ……… 12

MỞ ĐẦU

1 Giới thiệu :

Ngày nay công nghệ thông tin đã có những bước tiến phát triển mạnh mẽ

về cả chiều sâu và chiều rộng Máy tính điện tử giờ đây không còn là thứ quýhiếm mà đang ngày càng trở thành một công cụ làm việc và giải trí của conngười Những năm gần đây, việc cập nhật các thông tin cũng như thực hiện cácgiao dịch qua mạng internet ngày càng trở nên phổ biến

Trong những năm gần đây website tin tức ngày càng khẳng định vai trò củamình trên trong xã hội, đáp ứng đa dạng mục tiêu quan tâm của đông đảo ngườidùng

Hầu hết các độc giả ngày nay có xu hướng đọc tin tức trên điện thoại, máytính nhiều hơn là báo giấy Với website tin tức, họ dễ dàng truy cập và cập nhậttin tức mới từng phút từng giây trên các thiết bị của mình mà không cần phải tốntiền hay mất thời gian đi mua báo Và chắc chắn số lượng người đọc báo điện tử

sẽ nhiều hơn là người đọc báo giấy

Chúng ta đều biết rằng thảm họa thiên nhiên xảy ra khắp nơi trên thế giới,

và chúng có thể tàn phá hoàn toàn cuộc sống của con người cũng như môi trườngsống của chúng ta Có rất nhiều nguyên nhân tự nhiên khác nhau dẫn đến thảmhọa thiên nhiên, và nhận thức được những nguyên nhân này sẽ giúp chúng tachuẩn bị tốt hơn khi chúng xảy đến

Vì vậy, em quyết định xây dựng trang “WEBSITE CUNG CẤP THÔNG

TIN THIÊN TAI “ Chỉ với một cú click chuột, bạn có thể biết được những biến

động đang xảy ra trên toàn thế giới

2 Mục tiêu, nhiệm vụ của đề tài:

Giúp người xem dễ dàng nắm bắt được các thông tin quan trọng Dễ dàngtruycập các nội dung chi tiết khác khi có nhu cầu

Đăng tải các thông tin quan trọng của website Giúp người xem dễ dàng nắmbắt thông tin có trên website

Hiển thị các thông tin giới thiệu, tìm kiếm, hình ảnh,

Các thông tin có thể bao gồm: hình ảnh giới thiệu hoặc chương trình/sự kiện,tin tức nổi bật, thông tin liên hệ

Tăng tính tương tác và phản hồi các đánh giá giữa khách hàng

3 Nội dung và 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 như sau: Có liênquan, hữu ích, gây được sự quan tâm

Những tiêu chí đó được áp dụng rộng rãi nhưng mỗi nhà báo hay mỗi cơquan báo chí đều sử dụng chúng theo một bối cảnh đặc thù để nhấn mạnh ý nghĩatheo cách riêng Cái bối cảnh ấy do chính công chúng tạo ra

Bạn đang đọc một bài báo đăng trên báo in Trên truyền hình, một bài viếtnhư thế sẽ có ít chi tiết hơn, nhưng bạn sẽ nhìn thấy đoạn băng quay cảnh nhữngnhân vật chính đang tranh luận Còn ở báo trực tuyến, một bài báo như thế sẽ baogồm cả chi tiết và đoạn phim – cộng thêm sự kết nối dễ dàng đến những bài báoliên quan và những tư liệu đằng sau vụ việc Cách trình bày sẽ khác nhau ở mỗiloại hình, nhưng những giá trị của tin tức đã làm cho nó trở nên quan trọng và kỹnăng tường thuật sự việc cũng như những yêu cầu kể lại câu chuyện sẽ có sựgiống nhau

Sự liên quan, hữu ích và gây được quan tâm là những định hướng kháiquát để thẩm định giá trị thông tin của bất kỳ sự kiện, vấn đề hay nhân vật nào.Cùng với những tiêu chí rõ ràng đó, những yếu tố đặc trưng hơn tiềm tàng trongmỗi câu chuyện Quan trọng nhất là những yếu tố sau:

•Tác động: Đây là một cách khác đểđo mức độ liên quan và hữu ích Có bao

nhiêu người bị ảnh hưởng bởi một sự kiện hay một ý tưởng? Nó ảnh hưởng đến

họ nghiêm trọng như thế nào?

•Xung đột: Đây là một đề tài muôn thuở trong mọi câu chuyện, dù được thuật lại

bởi báo chí, văn chương hay kịch nghệ Những cuộc đấu tranh giữa người vớingười, giữa các quốc gia hay với sức mạnh thiên nhiên đều lôi cuốn người ta đọc.Xung đột chính là một yếu tố cơ bản của đời sống, các nhà báo phải tỉnh táo trướccám dỗ muốn làm cho câu chuyện tăng thêm kịch tính hoặc đơn giản hóa tháiquá

•Mới lạ: Đây là một yếu tố khác phổ biến cả trong báo chí lẫn các loại hình khác.

Con người hay sự kiện có thể gây được hấp dẫn và do đó có giá trị thông tin chỉ

vì yếu tố đặc biệt hay kỳ quái

•Gần gũi: Thông thường, người ta thích thú và quan tâm đến những gì diễn ra

gần nơi họở Khi họ đọc hay nghe một tin trong nước hay tin thế giới, họ thườngmuốn biết nó có liên can gì đến cộng đồng của chính họ

•Cấp thời: Tin đòi hỏi phải mới Nếu tin thích đáng và hữu ích, nó hẳn phải đúng

lúc Ví dụ như khi viết về một vấn đề thiên tai phải đối mặt trước khi nó hìnhthành thì sẽ có ích hơn là sau đấy

4 Bố cục của bài báo cáo

Sau phần Mở đầu, báo cáo được trình bày trong ba chương, cụ thể như sau:

Chương 1 Tổng quan về cơ sở lý thuyết.

Chương 2 Phân tích thiết kế hệ thống website cung cấp thông tin thiên tai.

Chương 3 Xây dựng kế hệ thống website cung cấp thông tin thiên tai

Cuối cùng là Kết luận, Tài liệu tham khảo và 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 về HTML

1.1.1 HTML là gì?

HTML viết tắt của Hypertext Markup Language là ngôn ngữ lập trình dùng

để xây dựng và cấu trúc lại các thành phần có trong Website

1.1.2 Đặc điểm của HTML

HTML có nhiều thẻ định dạng, do đó bạn có thể trình bày trang Web dễdàng, hiệu quả với ngôn ngữ đánh dấu siêu văn bản này Với tôi, nó là một ngônngữ đánh dấu dễ dàng và đơn giản để sử dụng Chúng ta có thể sử dụng nó đểthiết kế trang Web cùng với văn bản một cách linh hoạt

Một đặc điểm theo tôi khá thú vị là HTML có thể liên kết đến các trangWeb khác Nhờ ngôn ngữ đánh dấu này, bạn có thể thêm các Video, hình ảnh, âmthanh vào để các Website hấp dẫn, đẹp mắt và dễ tương tác hơn

Đặc biệt, HTML có thể hiển thị trên bất kỳ nền tảng nào khác như Linux,Windows, và Max vì nó là một nền tảng độc lập

1.1.3 Vai trò của HTML trong lập trình web

HTML là một loại ngôn ngữ đánh dấu siêu văn bản Như tôi đã đề cập ởtrên, nó giúp cấu thành các cấu trúc cơ bản của một Website, làm cho trang Webtrở thành một hệ thống hoàn chỉnh Cụ thể, ngôn ngữ đánh dấu siêu văn bản nàygiúp bố cục, chia khung sườn các thành phần trang Web Đồng thời, nó còn hỗtrợ khai báo các File kỹ thuật số như 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ố trong vănbản,bạn sẽ cần đến HTML Theo quan điểm của tôi, lập trình viên có thể lựa chọnngô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 những yếu tố cần thiết cho mọi thể loại12Website Trang Web của bạn sẽ cần đến ngôn ngữ HTML để hiển thị nội dungcho người truy cập Điều này đúng dù trang của bạn xây dựng trên bất kỳ nềntảng nào, giao tiếp với bất kỳ ngôn ngữ lập trình nào để xử lý dữ liệu

Theo tôi được biết, trước khi bắt tay vào thiết kế, làm việc trên một trangWeb thì nhà phát triển Web, lập trình viên đều phải học HTML như một loạingôn ngữ cơ bản

1.1.4 Ưu điểm và nhược điểm của HTML

1.1.4.1 Ưu điểm

HTML được sử dụng để tạo bố cục, cấu trúc trang web Nó có một số

ưu điểm sau:

• Có nhiều tài nguyên hỗ trợ với cộng đồng người dùng vô cùng lớn

• Có thể hoạt động mượt mà trên hầu hết mọi trình duyệt hiện nay

• Học HTML khá đơn giản

• Các markup sử dụng trong HTML thường ngắn gọn, có độ đồng nhất cao

• Sử dụng mã nguồn mở, hoàn toàn miễn phí

• HTML là chuẩn web được vận hành bởi W3C

• Dễ dàng để tích hợp với các 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ũng có các nhược điểm nhất định Cụ thể nhưsau:

• Chỉ được áp dụng chủ yếu cho web tĩnh Nếu muốn tạo các tính năng động, lậptrình viên phải dùng thêm JavaScript hoặc ngôn ngữ backend của bên thứ 3 (ví dụnhư: PHP)

• Mỗi trang HTML cần được tạo riêng biệt, ngay có khi có nhiều yếu tố trùng lặpnhư header, footer.13

• Khó để kiểm soát cách đọc và hiển thị file HTML của trình duyệt (ví dụ, một sốtrình duyệt cũ không render được tag mới Do đó, dù trong HTML document có

sử dụng các tag này thì trình duyệt cũng không đọc được)

• Một vài trình duyệt còn chậm cập nhật để hỗ trợ tính năng mới của HTML

1.2 Giới thiệu CSS

1.2.1 CSS là gì

CSS là viết tắt của Cascading Style Sheets Đây là một ngôn style sheetđược sử dụng để mô tả giao diện và định dạng của một tài liệu viết bằng ngônngữ đánh dấu (markup) Nó cung cấp một tính năng bổ sung cho HTML.Nóthường được sử dụng với HTML để thay đổi phong cách của trang web và giaodiện người dùng Nó cũng có thể được sử dụng với bất kỳ loại tài liệu XML nàobao gồm cả XML đơn giản, SVG và XUL

1.2.2 CSS dùng để làm gì?

Giải quyết một vấn đề lớn

Trước khi có CSS, các thẻ như phông chữ, màu sắc, kiểu nền, các sắp xếpphần tử, đường viền và kích thước phải được lặp lại trên mọi trang web Đây làmột quá trình rất dài tốn thời gian và công sức

Tiết kiệm rất nhiều thời gian

Định nghĩa kiểu CSS được lưu trong các tệp CSS bên ngoài vì vậy có thểthay đổi toàn bộ trang web bằng cách thay đổi chỉ một tệp

Cung cấp thêm các thuộc tính

CSS cung cấp các thuộc tính chi tiết hơn HTML để định nghĩa giao diệncủa trang web.14

1.3.Giới thiệu JavaScrip

1.3.1 JavaScrip là gì?

JavaScript là một ngôn ngữ lập trình website, được tích hợp và nhúng trongHTML giúp website sống động hơn JavaScript cho phép kiểm soát các hành vicủa trang web tốt hơn so với khi chỉ sử dụng mỗi

HTML

1.3.2 JavaScrip dùng để làm gì?

JavaScript có thể được ứng dụng trong rất nhiều lĩnh vực: Lập trìnhwebsite, xây dựng ứng dụng cho website máy chủ,ứng dụng di động, app, tròchơi

Khi tải một trang web, trình duyệt phân tích cú pháp HTML và tạo ra mộtloại dữ liệu gọi là DOM từ nội dung DOM thể hiện chế độ xem trực tiếp củatrang web với mã JavaScript Đoạn mã này thực hiện cập nhật cho DOM và đượctrình bày ngay lập tức cho người dùng

Trình duyệt cũng ghi nhận các sự kiện giao diện người dùng như: dichuyển chuột, nhấp chuột, v.v Sau đó, tùy theo phản hồi của người dùng, đoạn

mã sẽ thực hiện công việc được lập trình tương ứng Sử dụng tất cả các tiện íchnày, bạn có thể xây dựng các ứng dụng nhỏ để phục vụ cho một vài mục đíchđược cho phép

1.3.3 Ưu điểm và nhược điểm của JavaScrip

1.3.3.1 Ưu điểm

JavaScript có rất nhiều ưu điểm vượt trội hơn so với các đối thủ khác,chẳng hạn như:

• JavaScript là ngôn ngữ lập trình dễ học

• Lỗi của JavaScript dễ phát hiện hơn và vì vậy dễ sửa hơn

• JavaScript hoạt động trên nhiều trình duyệt, nền tảng

• JavaScript giúp website tương tác tốt hơn với khách truy cập

• JavaScript nhanh hơn và nhẹ hơn các 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 của JavaScript có thể kể đến như:

• Dễ bị khai thác

• Có thể được dùng để thực thi mã độc trên máy tính của người dùng

• Có thể bị triển khai khác nhau tùy từng thiết bị dẫn đến việc

Bootstrap là một bộ sưu tập miễn phí của các mã nguồn mở và côngcụdùng để tạo ra một mẫu webiste hoàn chỉnh Với các thuộc tính về giao diệnđược quy định sẵn như kích thước, màu sắc, độ cao, độ rộng…, các designer cóthể sáng tạo nhiều sản phẩm mới mẻ nhưng vẫn tiết kiệm thời gian khi làm việcvới framework này trong quá trình thiết kế giao diện website

1.4.2 Các file chính của Bootstrap

Hàm CSS không chỉ giới hạn ở kiểu văn bản mà còn dùng định dạng nhưbảng, bố cục hình Bạn cần mất một ít thời gian để CSS ghi nhớ hết tất cả cáckhai báo và bộ chọn

Bootstrap dùng Glyphicons để đáp ứng nhu cầu trên và nó đã mởkhóa bộHalflings Glyphicons

1.4.3 Lợi ích của Bootstrap

Dễ dàng thao tác

Cơ chế hoạt động của Bootstrap là dựa trên xu hướng mã nguồn mởHTML, CSS và Javascript Người dùng cần trang bị kiến thức cơ bản 3 mã nàymới có thể sử dụng Bootstrap hiệu quả Bên cạnh đó,các mã nguồn này cũng cóthể dễ dàng thay đổi và chỉnh sửa tùy ý

Tùy chỉnh dễ dàng

Bootstrap được tạo ra từ các mã nguồn mở cho phép designer linh hoạthơn Giờ đây có thể lựa chọn những thuộc tính, phần tử phù hợp

Chất lượng sản phẩm đầu ra hoàn hảo

Bootstrap là sáng tạo của các lập trình viên giỏi trên khắp thếgiới.Bootstrap đã được nghiên cứu và thử nghiệm trên các thiết bị Được kiểm tranhiều lần trước khi đưa vào sử dụng Do đó, khi chọn 17 Bootstrap, bạn có thể tinrằng mình sẽ tạo nên những sản phẩm với chất lượng tốt nhất

Độ tương thích cao

Điểm cộng lớn nhất của Bootstrap là khả năng tương thích với mọi trìnhduyệt và nền tảng Đây là một điều cực kì quan trọng và cần thiết trong trảinghiệm người dùng Sử dụng Grid System cùng với hai bộtiền xử lý Less và Sass,Bootstrap mặc định hỗ trợ Responsive và ưu tiên cho các giao diện trên thiết bị diđộng hơn Bootstrap có khả năng tự động điều chỉnh kích thước trang websitetheo khung browser Mục đích để phù hợp với màn hình của 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 về hệ thống sắp xây dựng

Website có bố cục được sắp xếp hợp lí, dễ quan sát: logo chính ở góc trái,menu ngang ở giao diện chính là các phần thanh điều hướng của trang web, gócthanh menu bên phải là thanh tìm kiếm, menu dọc là trang chủ,tin tức tổng hợp,

dự báo thời tiết, báo động thiên tai, điều này giúp người sử dụng dễ dàng chọnlọc Phần giữa là nội dung trang web và phần cuối cùng là thông tin cơ bản về 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 năng

Sau khi hoàn thiện Website hiển thị đầy đủ các giao diện chức cơ bản củamột 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 trong và ngoài nước

Dự Báo Thời Tiết

Báo Động Thiên Tai

Liên hệ tổng đài giải quyết mọi thắc mắc và vấn đề

2.1.2 Yêu cầu phi chức năng

Để đảm bảo một website/hệ thống hoặc một 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ợ khi người dùng gặp khó khăn

Đảm bảo cung cấp thông tin nhanh nhất có thể

2.1.3 Yêu cầu hệ thống

Website có thể hoạt động tốt trên các hệ điều hành hỗ trợ các trình duyệtweb như IE, Firefox, Chrome, coccoc,…

2.2 Thiết kế hệ thống

Thiết kế giao diện gồm 4 phần :

Phần Header là khu vực giới thiệu về trang web nằm trên cùng (đỉnh)

của trang web gồm có :

 Logo

 Menu điều hướng