A Comprehensive Course on GIS (Part 2 - Web GIS)

Khóa học GIS Toàn Diện (Phần 2 - Web GIS)

Làm chủ HTML, CSS, Bootstrap, JavaScript, jQuery, PHP cơ bản, các thư viện Leaflet, TurfJS & Echarts cùng API GeoServer

4.7

(35 đánh giá)

361 học viên

Giảng viên

Shoaib Shahzad Obaidi

Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao

50.000đ 1.239.000đ -96%

✓ Xem giỏ hàng và thanh toán

Bao gồm phụ đề tiếng Việt, tiếng Anh

29.5 giờ video

154 bài giảng

9 bài quiz

Truy cập vĩnh viễn

Học trên mọi thiết bị

Cập nhật: 31/05/2026

#Gis #Javascript #Leaflet #Web Mapping

Bạn sẽ học được gì

HTML + CSS + Bootstrap + JavaScript

jQuery + PHP cơ bản

Leaflet + Turf JS

Chart JS + API GeoServer (WMS & WFS)

Yêu cầu

Yêu cầu tiên quyết: phải hoàn thành Phần 1 của khóa học có tên "Khóa học Phát triển GIS Toàn Diện (Phần 1: Công cụ GIS)"

Đối tượng phù hợp

Khóa học này dành cho các nhà phát triển GIS Web muốn phân tích hoặc trực quan hóa dữ liệu không gian trên trình duyệt và tạo bản đồ trực tuyến tương tác từ dữ liệu đó.

Người mới bắt đầu lập trình Web

Nội dung khóa học

6 phần • 154 bài giảng

1 Tổng quan chung về khóa học - Web GIS

2 Ôn lại kiến thức đã học ở Phần 1

3 Khung khóa học & HTML là gì (HTML Phần 01)

4 Tạo ứng dụng Web HTML đầu tiên của bạn (HTML Phần 02)

5 Các thẻ: header, paragraph, a link, img, input, button, hr, br (HTML Phần 03)

6 Các thẻ: header, body, html, meta & một số thuộc tính HTML (HTML Phần 04)

7 Các thẻ: pre, b, i, em, mark, small, ins, sub, sup, abbr (HTML Phần 05)

8 Thẻ address, bdo, thuộc tính dir, comment (HTML Phần 07)

9 Màu sắc RGB, RGBA, thập lục phân, HSL, HSLA, đường dẫn (HTML Phần 08)

10 Thuộc tính mailto và bookmark (HTML Phần 09)

11 Thẻ img và source cùng với favicon (HTML Phần 10)

12 Các thẻ table (HTML Phần 11)

13 Kiểu dáng table, danh sách có thứ tự và không thứ tự (HTML Phần 12)

14 Thẻ span, id và tên class (HTML Phần 13)

15 Iframe nhúng web, youtube, facebook, instagram (HTML Phần 14)

16 Bố cục trang web dùng thuộc tính float trong CSS (HTML Phần 15)

17 Bàn về tính tương thích của ứng dụng, các thẻ kbd, samp, code - HTML Phần 16

18 Thẻ ngữ nghĩa và phi ngữ nghĩa, thẻ form (HTML Phần 17)

19 Thuộc tính của thẻ input (HTML Phần 18)

20 Đa phương tiện HTML, thẻ object (HTML Phần 19)

21 Giới thiệu về CSS và các loại CSS (CSS Phần 01)

22 Liên kết CSS ngoài với tài liệu HTML (CSS Phần 02)

23 Thuộc tính Padding (CSS Phần 03)

24 Thuộc tính Text trong CSS (CSS Phần 04)

25 Thuộc tính Font trong CSS và Google Fonts (CSS Phần 05)

26 Nhập biểu tượng từ Internet (CSS Phần 06)

27 Nhập ảnh từ Internet, đổ bóng chữ và khối (CSS Phần 07)

28 Thuộc tính Position trong CSS (CSS Phần 08)

29 Thuộc tính overflow, float và display (CSS Phần 09)

30 Ví dụ về thuộc tính Position và bộ chọn CSS (CSS Phần 10)

31 Bộ kết hợp CSS (CSS Phần 11)

32 Phần tử giả CSS (CSS Phần 12)

33 Tạo header trên và thanh bên (CSS Phần 13)

34 Tạo nút thả xuống (CSS Phần 14)

35 Bài tập CSS (CSS Phần 15)

36 Thuộc tính action, for, name & tạo kiểu input dựa trên loại (CSS Phần 16)

37 Tạo bố cục trang theo cột tương thích (CSS Phần 01)

38 Quy tắc !important, hàm calc và biến trong CSS (CSS Phần 17)

39 Biến cục bộ và toàn cục trong CSS, nhập nhiều ảnh (CSS Phần 19)

40 Thuộc tính CSS: inset, currentColor, word-wrap, writing-mode (CSS Phần 20)

41 Thuộc tính CSS: transform & transition (CSS Phần 21)

42 CSS keyframes cho hiệu ứng động (CSS Phần 22)

43 Tooltip, phản chiếu ảnh, -webkit-mask-image & kiểu nút (CSS Phần 23)

44 Con trỏ mũi tên hoạt ảnh & phân trang (CSS Phần 24)

45 Bố cục nhiều cột, điều chỉnh kích thước textarea, display flex (CSS Phần 25)

46 Tiếp tục về display flex (CSS Phần 26)

47 CSS Grid (CSS Phần 27)

48 CSS media query (CSS Phần 28)

49 CSS media query chế độ dọc & ngang (CSS Phần 29)

50 Bắt đầu với khung CSS Bootstrap (Bootstrap Phần 01)

51 Kiểu dáng Bootstrap (Bootstrap Phần 02)

52 Kiểu dáng Bootstrap (Bootstrap Phần 03)

53 Kiểu dáng Bootstrap (Bootstrap Phần 04)

54 Trang Web Portfolio (Phần 1)

55 Trang Web Portfolio (Phần 2)

56 Trang Web Portfolio (Phần 3)

57 Trang Web Portfolio (Phần 4)

58 Trang Web Portfolio (Phần 5)

59 Trang Web Portfolio (Phần 6)

60 Trang Web Portfolio (Phần 7)

61 Trang Web Portfolio (Phần 8)

62 Trang Web Portfolio (Phần 9)

63 Trang Web Portfolio (Phần 10)

64 Giới thiệu về JavaScript (JS Phần 01)

65 document, getElementById, innerHTML, file JS ngoài (JS Phần 02)

66 Câu lệnh, cú pháp, biến, toán tử gán và so sánh trong JS (JS Phần 03)

67 Định danh, biến, biến số học (JS Phần 04)

68 Toán tử số học & gán (JS Phần 05)

69 Hàm & đối tượng trong JS (JS Phần 06).mp4

70 Tiếp tục về đối tượng trong JavaScript (JS Phần 07)

71 Hàm cắt chuỗi (JS Phần 08)

72 Tiếp tục về hàm xử lý chuỗi (JS Phần 09)

73 Định dạng dữ liệu Number và chuyển đổi (JS Phần 10)

74 Mảng trong JavaScript (JS Phần 11)

75 Mảng trong JS, các hàm pop, push, shift, unshift (JS Phần 12).mp4

76 Hàm xử lý chuỗi, concat, join, splice, slice, foreach, map, filter, find, include

77 Hàm Date và Math (JS Phần 14)

78 Kiểu dữ liệu Boolean và toán tử logic trong JavaScript (JS Phần 15)

79 Câu lệnh if (JS Phần 16)

80 Câu lệnh switch trong JavaScript (JS Phần 17)

81 Vòng lặp for & for in (JS Phần 18)

82 Vòng lặp while & do while (JS Phần 19)

83 getElementById, onmouseover, onmousemove, onkeydown, event.keyCode, thao tác CSS

84 getElementsByClassName, getElementByTagName (JS Phần 21)

85 Hàm thời gian setTimeout, clearInterval (JS Phần 22)

86 Làm việc với Ví dụ 02 (JS Phần 23)

87 Ví dụ 03, 04 & 05 (JS Phần 24)

88 Trang Web Portfolio (Phần 1)

89 Trang Web Portfolio (Phần 2)

90 Trang Web Portfolio (Phần 3)

91 Trang Web Portfolio (Phần 4)

1 Giới thiệu và cấu hình jQuery cùng hiệu ứng FadeInOut

2 Thao tác với HTML và CSS

3 Các hàm click, hide, show và toggle có sẵn

4 Các hàm slides, animate có sẵn và vòng lặp each

5 Hiển thị mật khẩu khi click vào checkbox

6 Giới thiệu về PHP và cài đặt máy chủ XAMPP

7 Echo, print, comment, biến và phương thức GET

8 Các loại hàm và toán tử trong PHP

9 Điều kiện If, elseif và switch

10 Dự án ví dụ - Xây dựng máy tính cơ bản

11 Các loại vòng lặp trong PHP

12 Hàm do người dùng định nghĩa (thêm số tiền và tăng lương theo tỷ lệ phần trăm)

13 Tiếp tục về hàm do người dùng định nghĩa

14 Thêm trang dịch vụ và chèn header & footer vào trang đó

15 Trang Đăng ký (Phần 1)

16 Trang Đăng ký (Phần 2)

17 Trang Đăng ký (Phần 3)

18 Trang Đăng nhập

19 Đăng xuất

20 Bản địa hóa (Phần 1)

21 Bản địa hóa (Phần 2)

22 Bản địa hóa (Phần 3)

23 Yêu cầu của Giảng viên

1 Giới thiệu về Leaflet và tạo OSM

2 Thêm các lớp nền khác nhau vào bản đồ, bao gồm marker và popup

3 Thêm Circle và Polygon vào bản đồ

4 Thêm watermark và file geojson vào bản đồ

5 Thêm Layer và Tile Layer Group

6 GeoJSON và bindPopup

7 Sự kiện trong Leaflet

8 Thông báo Bài tập

9 Giải thích Bài tập

10 Giải thích Mã nguồn Bài tập

11 Dự án các Tỉnh Afghanistan (Phần 1)

12 Dự án các Tỉnh Afghanistan (Phần 2)

13 Dự án các Tỉnh Afghanistan (Phần 3)

14 Dự án các Tỉnh Afghanistan (Phần 4)

15 Lời giải Bài tập

16 Dự án Marker Cluster (Phần 1)

17 Dự án Marker Cluster (Phần 2)

18 Bản đồ nhiệt trong Leaflet

19 Cơ bản về Openlayers + Mapbox

1 Giới thiệu về TurfJS, tạo điểm và tính khoảng cách giữa các điểm

2 MultiPoints, MultiLines, Polygon, cùng Points với polygon

3 Buffer, fitBounds, Tâm Polygon, Giao nhau, Hợp nhất, Hiệu, Khoảng cách điểm-đường

4 Đa giác quanh điểm, lineOffset, làm mịn đa giác, dịch chuyển và co giãn đa giác

5 Đa tuyến thành đa giác, đa giác thành đường, giao điểm đường, chồng lấn đường

6 Điểm ngoài đa giác, điểm gần nhất

7 Thêm chức năng phóng to vào Bản đồ Afghanistan (Dự án 1)

8 Thêm thanh trượt để lọc các tỉnh theo diện tích và hiển thị tâm của tỉnh

1 Giới thiệu về Echarts và trực quan hóa dữ liệu bằng biểu đồ cột

2 Thêm biểu đồ kết hợp cột-đường, biểu đồ tròn và biểu đồ vùng

3 Dự án Afghanistan (Phần 1)

4 Dự án Afghanistan (Phần 2)

1 Giới thiệu về Geoserver và xuất bản lớp afg_provinces

2 Yêu cầu WMS từ Geoserver và tạo kiểu cho các đối tượng

3 Yêu cầu WFS từ Geoserver và tạo kiểu cho các đối tượng

4 WFS với CQL_Filtering trong nút thả xuống

5 Thêm tùy chọn All và None vào chức năng thả xuống

6 Kết luận

7 Phần 3 của khóa học

8 Các khóa học GIS khác

9 Kết nối với chúng tôi

Giới thiệu khóa học

Welcome to the second part of our comprehensive GIS series, where we dive into the exciting world of Web GIS. This hands-on course is designed to empower you with the skills and knowledge necessary to become a master of web technologies and build interactive, dynamic, and visually appealing Geographic Information Systems (GIS) applications.

In this advanced course, we will take your GIS expertise to the next level, focusing on the integration of web development technologies with spatial data to create cutting-edge mapping applications. Through a combination of theoretical lessons, practical exercises, and real-world projects, you'll gain a strong understanding of the following key areas:

HTML Fundamentals: We will start from the basics of HTML, the backbone of web development, and gradually explore the essential tags and structures required to create web pages.

CSS Styling: Learn how to add style and formatting to your web pages using Cascading Style Sheets (CSS) to create visually appealing interfaces for your GIS applications.

Bootstrap Framework: Discover the power of Bootstrap, a popular front-end framework that will enable you to build responsive, mobile-friendly web GIS interfaces efficiently.

JavaScript Essentials: Dive into the world of JavaScript, a versatile programming language used for adding interactivity to web pages, and apply it to manipulate and visualize geographic data.

jQuery Library: Explore jQuery, a fast and lightweight JavaScript library, to simplify and enhance the handling of events, animations, and AJAX interactions in your GIS applications.

PHP Basics: Get introduced to PHP, a server-side scripting language, to perform dynamic data processing and integration within your Web GIS projects.

Leaflet Library: Learn how to use Leaflet, a powerful open-source JavaScript library, to create interactive and customizable maps with various base-maps and overlays.

TurfJS Library: Delve into TurfJS, a geospatial analysis library, to perform complex spatial operations and manipulations directly in the browser.

Echarts Library: Discover Echarts, a powerful charting and visualization library, to create stunning data visualizations for your Web GIS applications.
GeoServer API: Utilize GeoServer's API for Web Map Service (WMS) and Web Feature Service (WFS) to access and manipulate geospatial data for map rendering and feature querying in web applications.

By the end of this course, you will have honed your skills in HTML, CSS, JavaScript, and various libraries essential for Web GIS development. You will be equipped to design, develop, and deploy sophisticated GIS applications that leverage the capabilities of modern web technologies to showcase and analyze spatial data effectively.

Whether you are a GIS professional, a web developer looking to venture into the geospatial domain, or a student with a passion for maps and data, this course will empower you to unlock the true potential of Web GIS and contribute to the evolving field of geospatial technology.

Join us on this exciting journey of mastering Web GIS, and let's map the world together!