Header Page of 161 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƢỜNG ĐẠI HỌC NÔNG LÂM THÀNH PHỐ HỒ CHÍ MINH TIỂU LUẬN TỐT NGHIỆP ỨNG DỤNG WEBGIS HỖ TRỢ TRA CỨU THÔNG TIN LOÀI BƢỚM Ở VIỆT NAM Họ tên sinh viên: NGUYỄN THỊ NGỌC MAI Ngành: HỆ THỐNG THÔNG TIN ĐỊA LÝ Niên khóa: 2012 – 2016 Tháng 6/2016 Footer Page of 161 Header Page of 161 ỨNG DỤNG WEBGIS HỖ TRỢ TRA CỨU THÔNG TIN LOÀI BƢỚM Ở VIỆT NAM Tác giả Nguyễn Thị Ngọc Mai Tiểu luận đƣợc đệ trình để đáp ứng yêu cầu cấp Kĩ sƣ ngành Hệ thống Thông tin Địa lý Giáo viên hƣớng dẫn ThS LÊ VĂN PHẬN Tháng 06 năm 2016 i Footer Page of 161 Header Page of 161 LỜI CẢM ƠN Lời em xin chân thành cảm ơn sâu sắc đến thầy ThS Lê Văn Phận, Tổ trưởng tổ CNTT – Quản trị mạng – Phòng Hành Chính – trường Đại học Nông Lâm thành phố Hồ Chí Minh, thầy bảo, hướng dẫn tận tình giúp đỡ em suốt thời gian qua Em cảm ơn Ban Giám Hiệu Trường Đại Học Nông Lâm TP Hồ Chí Minh, quý thầy cô đặc biệt thầy PGS.TS Nguyễn Kim Lợi toàn thể quý thầy cô Trường Đại Học Nông Lâm TP Hồ Chí Minh tận tình truyền dạy kiến thức cho suốt bốn năm học Cảm ơn anh chị khóa bạn lớp 12GI hướng dẫn, giúp đỡ suốt trình học tập trường Cuối cùng, vô biết ơn giúp đỡ, động viên gia đình giúp hoàn thành tiểu luận Bản thân em cố gắng nỗ lực để thực đề tài, nhiên đề tài tiểu luận không tránh khỏi thiếu sót hạn chế Em mong nhận chia sẻ, góp ý từ phía quý Thầy Cô bạn để đề tài hoàn thiện tốt Nguyễn Thị Ngọc Mai Khoa Môi trường Tài nguyên Trường Đại học Nông Lâm TP Hồ Chí Minh Số điện thoại: 0988697152 Email: nguyenthingocmai0507@gmail.com ii Footer Page of 161 Header Page of 161 TÓM TẮT Đề tài “Ứng dụng WebGis hỗ trợ tra cứu thông tin loài bướm Việt Nam” ngày 01/03/2016 đến ngày 31/05/2016 với liệu thí điểm thông tin oài bướm có mặt Việt Nam Mục tiêu đề tài cung cấp thông tin loài bướm đến người dùng thông qua dịch vụ Google Maps API thiết bị kết nối Internet Giải pháp chọn tích hợp Web Sever với ngôn ngữ lập trình PHP, hệ sở liệu SQL server chạy đồ Google Maps API Sau hoàn thành, đề tài WebGis thu kết cụ thể sau: Xây dựng trang WebGis với chức hiển thị, truy vấn, tìm kiếm người dùng cập nhật thông tin iii Footer Page of 161 Header Page of 161 MỤC LỤC LỜI CẢM ƠN ii TÓM TẮT iii MỤC LỤC .iv DANH MỤC VIẾT TẮT vi DANH MỤC BẢNG BIỂU vii DANH MỤC HÌNH ẢNH vii CHƢƠNG ĐẶT VẤN ĐỀ 1.1 Tính cấp thiết đề tài 1.2 Mục tiêu đề tài .1 1.2.1 Mục tiêu chung 1.2.2 Mục tiêu cụ thể 1.3 Giới hạn phạm vi đề tài CHƢƠNG TỔNG QUAN NGHIÊN CỨU 2.1 Tổng quan loài bƣớm .3 2.1.1 Cấu tạo hình thái loài bƣớm 2.1.2 Vòng đời loài bƣớm .4 2.1.3 Tập tính - sinh thái .4 2.2 Tổng quan khu vực nghiên cứu .5 2.2.1 Địa lý 2.2.2 Khí hậu 2.3 Hệ thống thông tin địa lý (GIS) 2.3.1 Khái niệm 2.3.2 Các thành phần GIS 2.4 Công nghệ Webgis 2.4.1 Khái niệm 2.4.2 Kiến trúc chung 2.5 Các ngôn ngữ lập trình HTML, PHP, Javascript 2.5.1 Ngôn ngữ HTML 2.5.2 Ngôn ngữ PHP 2.5.3 Ngôn ngữ Javarscript 10 iv Footer Page of 161 Header Page of 161 2.6 Microsoft SQL server 2008 .10 2.7 Google Maps API 11 2.8 Các nghiên cứu liên quan đến WebGis giới Việt Nam .11 CHƢƠNG PHƢƠNG PHÁP NGHIÊN CỨU 12 3.1 Phân tích, thiết kế xây dựng hệ CSDL .13 3.1.1 Phân tích 13 3.1.2 Thiết kế 13 3.1.3 Xây dựng sở liệu .15 3.2 Thiết kế chức 16 3.3 Thiết kế giao diện 19 3.3.1 Giao diện tổng quát ngƣời quản trị 19 3.3.2 Giao diện tổng quát ngƣời dùng 20 3.4 Xây dựng trang Web 22 CHƢƠNG KẾT QUẢ 27 4.1 Giao diện trang Web cho ngƣời dùng 27 4.1.1 Trang chủ 27 4.1.2 Giao diện đăng nhập/đăng ký ngƣời dùng .28 4.1.3 Giao diện trang liên hệ .29 4.2 Giao diện trang Web cho ngƣời quản lý 29 4.2.1 Giao diện đăng nhập 29 4.2.2 Giao diện quản lý liệu 30 CHƢƠNG KẾT LUẬN VÀ KIẾN NGHỊ 31 5.1 Kết luận 31 5.2 Đề xuất hƣớng nghiên cứu phát triển 31 TÀI LIỆU THAM KHẢO 32 v Footer Page of 161 Header Page of 161 DANH MỤC VIẾT TẮT CSDL: Cơ sở liệu GIS: Geographic Information System (Hệ thống thông tin địa lý) SQL: Structured Query Language (Ngôn ngữ truy vấn mang tính cấu trúc) API: Application Programming Interface (Giao diện lập trình ứng dụng) HTML: Hyper Text Markup Language (Ngôn ngữ đánh dấu siêu văn bản) PHP: Hypertext Preprocessor (Bộ tiền xử lý siêu văn bản) vi Footer Page of 161 Header Page of 161 DANH MỤC BẢNG BIỂU Bảng 3.1: Mô tả thuộc tính bảng phân bố 15 Bảng 3.2: Mô tả thuộc tính bảng thông tin loài 16 Bảng 3.3: Chức người quản trị 18 Bảng 3.4: Chức người dùng 19 vii Footer Page of 161 Header Page of 161 DANH MỤC HÌNH ẢNH Hình 2.1: Bướm cối xay gió thường Hình 2.2: Vị trí địa lý Việt Nam Hình 2.3: Kiến trúc hệ thống WebGis Hình 3.1 : Sơ đồ phương pháp nghiên cứu 12 Hình 3.2: Mô hình thực thể kết hợp 14 Hình 3.3 : Mô hình quan hệ CSDL 15 Hình 3.4: Sơ đồ thiết kế chức 17 Hình 3.5: Thiết kế giao diện đăng nhập 20 Hình 3.6: Trang giao diện thêm/xóa/sửa liệu 20 Hình 3.7: Giao diện đăng ký người dùng cần cập nhật thông tin 21 Hình 3.8: Trang giao diện hiển thị thông tin 21 Hình 3.9: Sơ đồ tổ chức trang Web 22 Hình 3.10: Sơ đồ giải thuật toán đăng nhập hệ thống 23 Hình 3.11: Sơ đồ giải thuật toán thêm đối tượng 24 Hình 3.12: Sơ đồ giải thuật toán xóa đối tượng 24 Hình 3.13: Sơ đồ giải thuật toán sửa đối tượng 25 Hình 3.14: Sơ đồ giải thuật tìm kiếm, hiển thị thông tin lên đồ 26 Hình 4.1: Giao diện trang chủ sử dụng công cụ tìm kiếm 27 Hình 4.2: Giao diện trang chủ lựa chọn xem thông tin thuộc tính 28 Hình 4.3: Giao diện đăng kí thành viên cho người dùng 28 Hình 4.4: Giao diện trang liên hệ 29 Hình 4.5: Giao diện trang đăng nhập 29 Hình 4.6: Giao diện trang cập nhật thông tin 30 viii Footer Page of 161 Header Page 10 of 161 CHƢƠNG ĐẶT VẤN ĐỀ 1.1 Tính cấp thiết đề tài Ngày nay, lưu trữ thông tin giấy gây khó khăn cho việc tìm kiếm, cập nhật chỉnh sửa thuộc tính đối tượng, điều mạng lưới Internet đáp ứng đủ yêu cầu Điều cần đặt vấn đề làm để đưa liệu lên mạng Internet tra cứu cách dễ dàng Trong thời gian gần đây, WebGis xu hướng phổ biến, với kết hợp Gis Web giúp người quản lý người dùng dễ dàng truy cập thông tin thuộc tính thông tin đồ cách nhanh chóng Việt Nam coi nước thuộc vùng Đông Nam Á giàu đa dạng sinh học Ở Việt Nam khác biệt lớn khí hậu từ vùng gần xích đạo tới giáp vùng cận nhiệt đới, với đa dạng địa hình tạo nên đa dạng thiên nhiên mà Việt Nam có tính đa dạng sinh học cao Với đa dạng sinh học tạo nên cho Việt Nam có 1010 loài bướm, số có nhiều loài bướm đặc hữu Việt Nam, nhiều loài bướm phát chưa đặt tên (Vũ Văn Liên, 2010) Với số lượng loài lớn gây khó khăn việc tìm kiếm, lưu trữ truy vấn thông tin loài Chính lý trên, đề tài “Ứng dụng WebGis hỗ trợ tra cứu thông tin loài bướm Việt Nam” thực để tìm kiếm lưu trữ thông tin cần thiết dễ dàng 1.2 Mục tiêu đề tài 1.2.1 Mục tiêu chung Ứng dụng WebGis để hỗ trợ tra cứu thông tin loài bướm Việt Nam 1.2.2 Mục tiêu cụ thể Xây dựng sở liệu địa lý thông tin loài bướm Xây dựng giao diện trang WebGis với chức tìm kiếm, hiển thị địa điểm mật độ loài con/10m2, tương tác cập nhật thông tin người dùng Footer Page 10 of 161 Header Page 27 of 161 Chức web phân nhánh cho người quản trị người dùng  Chức ngƣời quản trị Bảng 3.3: Chức ngƣời quản trị Chức Thao tác Đăng nhập Nhập tên đăng nhập mật Nhập vào hệ Kết thống Nhập sai yêu cầu nhập lại Thêm Điền thông tin bấm Thêm Sau thực xong để lưu liệu cập nhật Quản lý liệu Xóa Tìm theo mã thông tin bấm Sau thực xong Xóa để lưu Sửa liệu bị xóa Hiển thị thông tin sửa lại Sau thực xong sau bấm Sửa để lưu  Chức ngƣời dùng 18 Footer Page 27 of 161 liệu sửa lại Header Page 28 of 161 Bảng 3.4: Chức ngƣời dùng Chức Thao tác Đăng nhập/ Đăng ký Nhập tên đăng nhập mật Nhập vào hệ Kết Nếu nhấp thống vào để đăng kí người dùng Nhập sai yêu cầu nhập lại Có thể di chuyển, phóng to Sau thực xong Tƣơng tác Hiển thị với đồ thu nhỏ cách nhấp chuột liệu hiển thị cho hiển thị thông tin dạng điểm thuộc tính kèm theo Tìm kiếm dựa vào việc gõ tên Hiển thị thông tin loài Tìm kiếm dạng điểm loài Cập nhật Thêm Cập nhật thông tin bấm Sau thực xong Thêm tự lưu liệu lưu lại 3.3 Thiết kế giao diện 3.3.1 Giao diện tổng quát ngƣời quản trị Giao diện tổng quát người quản trị bao gồm: đăng nhập, quản lý liệu  Giao diện đăng nhập 19 Footer Page 28 of 161 Header Page 29 of 161 Header Menu Username: Đăng nhập Password: Đăng ký Footer Hình 3.5: Thiết kế giao diện đăng nhập  Giao diện trang thêm, xóa, sửa liệu Header Menu Thông tin loài Thêm/ xóa Sửa Phân bố Thêm/ Xóa Sửa Footer Hình 3.6: Trang giao diện thêm/xóa/sửa liệu 3.3.2 Giao diện tổng quát ngƣời dùng Giao diện tổng quát người dùng bao gồm: đăng nhập/đăng ký, cập nhật liệu, hiển thị thông tin 20 Footer Page 29 of 161 Header Page 30 of 161  Giao diện đăng ký Header Menu Họ tên: Năm sinh: Địa chỉ: Số điện thoại: Tên đăng nhập: Mật khẩu: Footer Hình 3.7: Giao diện đăng ký người dùng cần cập nhật thông tin  Giao diện hiển thị thông tin Header Menu Bản đồ hiển thị Thông tin hiển thị Footer Hình 3.8: Trang giao diện hiển thị thông tin 21 Footer Page 30 of 161 Header Page 31 of 161 3.4 Xây dựng trang Web  Sơ đồ tổ chức trang Web Trang web Trang chủ Giới thiệu Đăng nhập Cập nhật Hỗ trợ Người dùng Đăng ký Tìm kiếm Thêm Quản lý Thêm Quản lý Xóa Sửa Hình 3.9: Sơ đồ tổ chức trang Web Mô tả tổ chức trang Web sau: Trang chủ: Hiển thị thông tin, tìm kiếm liệu hiển thị lên đồ Giới thiệu: Giới thiệu sơ lược bí mật xoay xung quanh loài bướm Đăng nhập: Đối với người dùng: Nếu chưa có tên đăng nhập mật nhấp vào mục đăng ký lấy tài khoản nhập lại khoản đăng ký để đăng nhập Đối với quản lý: Chỉ cần nhập tên mật để vào Cập nhật: Đối với người dùng cần đăng nhập để thêm thông tin loài Đối với quản lý thêm, xóa, sửa liệu 22 Footer Page 31 of 161 Header Page 32 of 161 Hỗ trợ: Nếu có ý kiến, thắc mắc hay lỗi gửi vào gửi vào trang để người quản lý chỉnh sửa lại  Sơ đồ giải thuật quản lý Sơ đồ đăng nhập hệ thống (hình 3.10) Đăng nhập Nhập user, pass Sai Đúng Thêm Quản lý liệu Xóa Sửa Kết thúc Hệ CSDL Hình 3.10: Sơ đồ giải thuật toán đăng nhập hệ thống Sơ đồ giải thuật toán quản lý thêm đối tượng (hình 3.11) 23 Footer Page 32 of 161 Header Page 33 of 161 Trang quản lý Nhập tọa độ Nhập thông tin Phương thức Tọa độ Chuyển đổi Dạng không gian POST Biến mang thông tin Phương thức POST Insert into CSDL Hình 3.11: Sơ đồ giải thuật toán thêm đối tượng Sơ đồ giải thuật toán xóa đối tượng (hình 3.12) đun Trang quản lý Nhập ID id = gid Delete sai Báo lỗi Hình 3.12: Sơ đồ giải thuật toán xóa đối tượng Sơ đồ giải thuật toán sửa đối tượng (hình 3.13) 24 Footer Page 33 of 161 CSDL Header Page 34 of 161 đun Trang quản lý Nhập ID id = gid select Báo lỗi Dạng không gian Chuyển đổi Tọa độ Phương thức Nhập tọa độ POST Biến mang thông tin Nhập thông tin Phương thức POST Update CSDL Hình 3.13: Sơ đồ giải thuật toán sửa đối tượng 25 Footer Page 34 of 161 Hiển thị thông tin đối tượng Header Page 35 of 161  Sơ đồ giải thuật tìm kiếm, hiển thị thông tin lên đồ CSDL Thông tin select Tọa độ thuộc tính Tọa độ Dịch vụ Google Map API Hiển thị tọa độ google map thông tin thuộc tính kèm theo id = name Sai Nhập tên Báo lỗi Hình 3.14: Sơ đồ giải thuật tìm kiếm, hiển thị thông tin lên đồ Tóm lại, đề tài xây dựng WebGis lập trình code ngôn ngữ HTML, PHP, sử dụng hệ quản trị CSDL Microsoft SQL Server sử dụng Google Maps API làm lớp đồ 26 Footer Page 35 of 161 Header Page 36 of 161 CHƢƠNG KẾT QUẢ 4.1 Giao diện trang Web cho ngƣời dùng 4.1.1 Trang chủ Trang chủ thể đồ tra cứu thông tin loài bướm Việt Nam gồm có 02 nội dung chính: Nhập thông tin loài bướm cần tìm kiếm bấm nút “Tìm kiếm” Kết hiển thị đồ loài bướm nhiều tọa độ mà người phát có cá thể hay quần thể tìm thấy ghi nhận Hình 4.1: Giao diện trang chủ sử dụng công cụ tìm kiếm Phần đồ: Sau tìm kiếm hiển thị loài tìm kiếm đồ với mật độ cá thể hay quần thể tìm thấy (1con/10m2) tương tác với lớp đồ thuộc tính loài sau: Xem thông tin loài bướm : Bấm chọn vào đối tượng đồ để xem thông tin thuộc tính 27 Footer Page 36 of 161 Header Page 37 of 161 Các chức tương tác đồ : Phóng to, thu nhỏ, di chuyển đồ Hình 4.2: Giao diện trang chủ lựa chọn xem thông tin thuộc tính 4.1.2 Giao diện đăng nhập/đăng ký ngƣời dùng Như nói trên, người dùng muốn cập nhật thông tin thiếu cần phải có tài khoản để cập nhật thêm thông tin Hình 4.3: Giao diện đăng kí thành viên cho người dùng 28 Footer Page 37 of 161 Header Page 38 of 161 4.1.3 Giao diện trang liên hệ Đối với người dùng có thắc mắc hay cần sửa lỗi thông tin thiếu sót người sử dụng vào trang liên hệ gửi thông tin về, hệ thống gửi mail để người quản lý chỉnh sửa lại sai sót Hình 4.4: Giao diện trang liên hệ 4.2 Giao diện trang Web cho ngƣời quản lý 4.2.1 Giao diện đăng nhập Người quản trị muốn chỉnh sửa, cập nhật thông tin trang Web phải nhập tài khoản dành cho người quản trị đẻ quản lý liệu Hình 4.5: Giao diện trang đăng nhập 29 Footer Page 38 of 161 Header Page 39 of 161 4.2.2 Giao diện quản lý liệu Sau đăng nhập thành công, người quản trị thêm loài mới, xóa hay sửa đổi thông tin đối tượng Hình 4.6: Giao diện trang cập nhật thông tin 30 Footer Page 39 of 161 Header Page 40 of 161 CHƢƠNG KẾT LUẬN VÀ KIẾN NGHỊ 5.1 Kết luận Đề tài “Ứng dụng WebGis hỗ trợ tra cứu thông tin loài bướm Việt Nam” xây dựng với mục tiêu đạt sau: Hiển thị thông tin loài bướm Việt Nam với chức tương tác đồ Tìm kiếm theo thuộc tính tên loài Quản lý sở liệu Website Bên cạnh tồn nhiều mặt hạn chế như: Giao diện chưa chuyên nghiệp Hệ thống quản lý chưa hoàn thiện Chức tương tác thuộc tính không gian Thông tin loài thiếu sót 5.2 Đề xuất hƣớng nghiên cứu phát triển Đề hoàn thiện đề tài ứng dụng vào vào công sưu tầm tìm kiếm loài bướm cần nghiên cứu phát triển nội dung sau: Thiết kế giao diện chuyên nghiệp Xây dựng nguồn liệu đầu vào phong phú chi tiết Nghiên cứu xây dựng thêm chức thống kê, phân tích liệu WebGIS Cần nhiều người lĩnh vực hợp tác chung để Website hoàn thiện 31 Footer Page 40 of 161 Header Page 41 of 161 TÀI LIỆU THAM KHẢO Tiếng Việt 1) Nguyễn Kim Lợi, Trần Thống Nhất, 2009 Hệ thống thông tin địa lý – Phần mềm ArcView 3.3 NXB Nông nghiệp, Tr – 34 2) Phạm Thị Phép, 2013.Ứng dụng Công nghệ WebGIS mã nguồn mở phục vụ công tác quảng bá du lịch Khóa luận tốt nghiệp, Đại học Nông Lâm TP Hồ Chí Minh, Việt Nam 3) Trần Thị Kim Liên, 2014 Ứng dụng WebGIS xây dựng đồ tra cứu thông tin du lịch tỉnh Bình Thuận Khóa luận tốt nghiệp, Đại học Nông Lâm TP Hồ Chí Minh, Việt Nam 4) Nguyễn Thị Thu Cúc, 2003 Giáo trình côn trùng đại cương Trường đại học Cần Thơ, Khoa Nông Nghiệp, Bộ môn bảo vệ Thực vật 5) Climate GIS, 2011 Kiến trúc WebGIS Địa :< http://climatechangegis.blogspot.com/2011/05/kien-truc-cua-WebGis _1829.html > [Truy cập ngày 10-05-2016] 6) Sinh vật rừng Việt Nam, 2014 Tra cứu lớp bướm Địa chỉ:< http://www.vncreatures.net/kqtracuu.php?ID=1&tenloai=&Submit=Tra+c% E1%BB%A9u&type=nhom&ch=&loai=3&radio=V> [Truy cập ngày 1004-2016] Tiếng Anh 7) Google Developers, 2013 Google Maps JavaScript API v3 Available at: < https://developers.google.com/maps/documentation/javascript/examples/ma p-simple > [ Accessed 30 April 2016] 8) W3school.com, 2013 Easy Learning with "Show PHP Available at: < http://www.w3schools.com/php/showphp.asp?filename=demo_intro> [ Accessed 30 April 2016] 32 Footer Page 41 of 161 ... tài Ứng dụng WebGis hỗ trợ tra cứu thông tin loài bướm Việt Nam ngày 01/03/2016 đến ngày 31/05/2016 với liệu thí điểm thông tin oài bướm có mặt Việt Nam Mục tiêu đề tài cung cấp thông tin loài. ..Header Page of 161 ỨNG DỤNG WEBGIS HỖ TRỢ TRA CỨU THÔNG TIN LOÀI BƢỚM Ở VIỆT NAM Tác giả Nguyễn Thị Ngọc Mai Tiểu luận đƣợc đệ trình để đáp ứng yêu cầu cấp Kĩ sƣ ngành Hệ thống Thông tin Địa lý Giáo... thông tin loài Chính lý trên, đề tài Ứng dụng WebGis hỗ trợ tra cứu thông tin loài bướm Việt Nam thực để tìm kiếm lưu trữ thông tin cần thiết dễ dàng 1.2 Mục tiêu đề tài 1.2.1 Mục tiêu chung Ứng