NGUYỄN DUY HUY BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI NGUYỄN DUY HUY CÔNG NGHỆ THÔNG TIN NGHIÊN CỨU ỨNG DỤNG CÔNG NGHỆ AJAX VÀ GOOGLE MAPS API ĐỂ THIẾT KẾ WEBSITE QUẢN LÝ BẢN ĐỒ TRỰC TUYẾN CÁC MỎ KHAI THÁC KHOÁNG SẢN Ở VIỆT NAM LUẬN VĂN THẠC SĨ KHOA HỌC CÔNG NGHỆ THÔNG TIN 2009 Hà Nội – 2011 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI - NGUYỄN DUY HUY NGHIÊN CỨU ỨNG DỤNG CÔNG NGHỆ AJAX VÀ GOOGLE MAPS API ĐỂ THIẾT KẾ WEBSITE QUẢN LÝ BẢN ĐỒ TRỰC TUYẾN CÁC MỎ KHAI THÁC KHỐNG SẢN Ở VIỆT NAM Chun ngành: Cơng nghệ thơng tin LUẬN VĂN THẠC SĨ KHOA HỌC CÔNG NGHỆ THÔNG TIN NGƯỜI HƯỚNG DẪN KHOA HỌC: TS Cao Tuấn Dũng Hà Nội – 2011 LỜI CAM ĐOAN Tôi Nguyễn Duy Huy, học viên lớp Cao học Công nghệ Thông tin K2009, Trường Đại học Bách Khoa Hà Nội xin cam kết: Luận văn tốt nghiệp cơng trình nghiên cứu thân hướng dẫn TS Cao Tuấn Dũng – Bộ môn Công nghệ Phần mềm - Viện Công nghệ Thông tin Truyền thông – Trường Đại học Bách Khoa Hà Nội Các kết nêu luận văn tốt nghiệp trung thực, khơng chép tồn văn cơng trình khác Hà Nội ngày 05 tháng 11 năm 2011 Tác giả luận văn Nguyễn Duy Huy MỤC LỤC LỜI CAM ĐOAN MỤC LỤC DANH MỤC THUẬT NGỮ VÀ CHỮ VIẾT TẮT DANH MỤC BẢNG BIỂU DANH MỤC HÌNH VẼ LỜI CẢM ƠN MỞ ĐẦU 10 Tính cấp thiết đề tài 10 Mục đích nghiên cứu 13 Nhiệm vụ nghiên cứu 13 Phạm vi nghiên cứu 13 Bố cục luận văn 13 Phương pháp nghiên cứu 14 Chương 1: TỔNG QUAN VỀ AJAX 15 1.1 Khái niệm AJAX 15 1.2 Ưu nhược điểm AJAX 17 1.2.1 Ưu điểm 17 1.2.2 Nhược điểm 17 1.3 Giới thiệu số cơng nghệ AJAX 17 1.3.1 HTML 18 1.3.2 CSS 18 1.3.3 DOM 20 1.3.4 XML 21 1.3.5 XML httpRequest 22 1.3.6 XML JavaScript 28 1.3.7 Gửi request xử lý response 29 1.3.8 Xử lý respone Server 30 1.4 Các bước xây dựng ứng dụng AJAX 31 Tóm tắt chương 32 Chương 2: TỔNG QUAN VỀ GOOGLE MAPS 33 2.1 Giới thiệu chung Google Maps 33 2.2 Tạo đồ Google Maps 34 2.2.1 Bắt đầu với đồ đơn giản 34 2.2.2 Thêm thành phần chuyển hướng 36 2.2.3 Thiết lập đồ khởi tạo 37 2.2.4 Thêm điểm cửa sổ hiển thị thông tin đồ 37 2.3 Các hàm API Google Maps 39 2.4 Các đối tượng 40 2.4.1 Gmap2 40 2.4.2 GlatLng 41 2.4.3 GlatLngBounds 42 2.5 Các đối tượng điều khiển đồ 42 2.5.1 Panning 42 2.5.2 Zooming 43 2.5.3 Thay đổi loại đồ 43 2.5.4 GoverviewMap 44 2.6 Thêm liệu người dùng 44 2.6.1 Gmarker 44 2.6.2 GIcon 45 2.6.3 Cửa sổ thông tin 46 2.6.4 Gpolyline 47 2.7 Các kiện 47 2.7.1 Gevents 47 2.7.2 GbrowserIsCompatible 48 2.7.3 Các kiện Gmap 48 2.7.4 Các kiện Gmarker 49 2.8 AJAX Google Maps 49 2.8.1 DHTML AJAX 49 2.8.2 GXmlHttp 50 Tóm tắt chương 51 Chương 3: THIẾT KẾ WEBSITE QUẢN LÝ BẢN ĐỒ TRỰC TUYẾN CÁC MỎ KHAI THÁC KHOÁNG SẢN Ở VIỆT NAM 52 3.1 Giới thiệu chung 52 3.2 Phân tích thiết kế hệ thống chức 53 3.2.1 Xây dựng biểu đồ phân cấp chức 53 3.2.1.1 Phân tích yêu cầu toán 53 3.2.1.2 Biểu đồ phân cấp chức 55 3.2.2 Sơ đồ hoạt động hệ thống 57 3.2.3 Sơ đồ giải thuật hệ thống 57 3.2.4 Đưa đồ Google Maps vào website 59 3.2.4.1 Lý chọn đồ Google Maps 59 3.2.4.2 Các bước đưa đồ vào website 59 3.2.5 Mô tả đối tượng mỏ 61 3.2.5.1 Xác định thông số đối tượng mỏ 61 3.2.5.2 Xây dựng đối tượng mỏ 63 3.3 Phân tích thiết kế hệ thống liệu 66 3.3.1 Thiết kế thực thể 66 3.3.2 Thiết kế sở liệu 68 3.3.2.1 Lựa chọn hệ QTCSDL 68 3.3.2.2 Thiết kế CSDL MySQL 69 3.3.2.3 Thiết kế sở liệu XML 71 3.3.3 Kết nối với CSDL 73 3.4 Thiết kế website 74 3.4.1 Lựa chọn mơ hình thiết kế 74 3.4.2 Thiết kế giao diện 3.4.3 Xây dựng website 81 3.4.4 Cài đặt chạy thử nghiệm 89 Tóm chương 90 KẾT LUẬN 91 Nhiệm vụ hoàn thành 91 Các đóng góp khoa học 91 Hướng phát triển luận văn 92 TÀI LIỆU THAM KHẢO 93 DANH MỤC THUẬT NGỮ VÀ CHỮ VIẾT TẮT TT Chữ viết tắt Cụm từ viết tắt AJAX Asynchronous JavaScript and XML XML eXtensible Markup Language HTML HyperText Markup Language XHTML Extensible HyperText Markup Language CSS Cascading Style Sheets W3C World Wide Web Consortium DOM Document Object Model XSLT XSL Transformations ECMA European Computer Manufacturers Association 10 HTTP HyperText Transfer Protocol 11 SGML Standard Generalized Markup Language 12 DHTML Dynamic HyperText Markup Language 13 IE Internet Explorer 14 UI User Interface 15 URL Uniform Resource Locator 16 JSP JavaServer Pages/Java Scripting Preprocessor 17 PHP Hypertext Preprocessor 18 API Application Programming Interface 19 Zoom Chức Phóng to/Thu nhỏ đồ 20 Click Kích chuột 21 Table Bảng định nghĩa file HTML 22 CSDL Cơ sở liệu 23 HQTCSDL Hệ quản trị Cơ sở liệu DANH MỤC BẢNG BIỂU Bảng 1.1: Các phương thức đối tượng XMLHttpRequest 24 Bảng 1.2: Các thuộc tính đối tượng XMLHttpRequest 24 Bảng 1.3: Các mã trạng thái Response 26 Bảng 3.1: Bảng mô tả thực thể tb_mininglist 68 Bảng 3.2: Bảng mô tả thực thể tb_news 69 Bảng 3.3: Bảng mô tả thực thể tb_chart 69 Bảng 3.4: Bảng mô tả thực thể tb_image 70 Bảng 3.5: Bảng mô tả thực thể tb_members 70 DANH MỤC HÌNH VẼ Hình 1.1: Ứng dụng web truyền thống/AJAX 16 Hình 1.2: Mơ hình cổ điển 17 Hình 1.3: Mơ hình AJAX 17 Hình 1.4: Mơ hình tương tác chuẩn ứng dụng AJAX 27 Hình 2.1: Hình ảnh đồ Google Maps 34 Hình 2.2: Ứng dụng đồ Google Maps đơn giản 37 Hình 2.3: Thêm điều khiển vào đồ 37 Hình 2.4: Thay đổi loại đồ hiển thị 39 Hình 2.5: Thêm liệu người dùng vào đồ 39 Hình 2.6: Các đối tượng Google Maps 41 Hình 2.7: Đối tượng đồ - Gmap2 42 Hình 2.8: Đối tượng Panning 44 Hình 2.9: Các điều khiển Phóng to/Thu nhỏ đồ 45 Hình 2.10: Các điều khiển thay đổi loại đồ 45 Hình 2.11: Gmarker 46 Hình 2.12: GIcon mặc định với cửa sổ hiển thị thông tin 47 Hình 2.13: Tạo icon với GIcon 48 Hình 3.1: Biểu đồ phân cấp chức 58 Hình 3.2: Sơ đồ hoạt động hệ thống 59 Hình 3.3: Sơ đồ giải thuật hệ thống 60 Hình 3.4: Giao diện đồ Google Maps website 64 Hình 3.5: Minh họa phương thức displaymap() 68 Hình 3.6: Bảng tb_mininglist 72 Hình 3.7: Bảng tb_news 72 Hình 3.8: Bảng tb_bieudo 72 Hình 3.9: Bảng tb_hinhanh 72 Hình 3.10: Bảng tb_members 73 Hình 3.11: Luồng xử lý mơ hình 77 Hình 3.12: So sánh mơ hình MVC với mơ hình lớp 78 Hình 3.13: Mơ hình MVC 79 Hình 3.14: Các ký hiệu mỏ đồ 84 Hình 3.15: Giao diện trang chủ website 85 Hình 3.16: Chức Tìm kiếm mỏ 85 Hình 3.17: Kết Tìm kiếm mỏ 86 Hình 3.18: Giao diện trang Tin tức 86 Hình 3.19: Giao diện trang Xem biểu đồ lượng than tiêu thụ 87 Hình 3.20: Giao diện trang Hình ảnh 88 Hình 3.21: Giao diện trang Liên hệ 88 Hình 3.22: Giao diện trang Liên hệ 89 Hình 3.23: Giao diên trang đăng nhập Quản trị hệ thống 89 Hình 3.24: Giao diện trang Quản trị 90 Hình 3.25: Giao diện trang Quản trị tài khoản 91 Hình 3.26: Giao diện trang Quản trị mỏ 91 Hình 3.22: Giao diện trang Quản trị biểu đồ 91 ... DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI - NGUYỄN DUY HUY NGHIÊN CỨU ỨNG DỤNG CÔNG NGHỆ AJAX VÀ GOOGLE MAPS API ĐỂ THIẾT KẾ WEBSITE QUẢN LÝ BẢN ĐỒ TRỰC TUYẾN CÁC MỎ KHAI THÁC... dựng website quản lý đồ trực tuyến mỏ khai thác khống sản Việt Nam: • Ứng dụng công nghệ AJAX, công nghệ thiết kế web quan trọng hệ web 2.0 nhiều lập trình web tin dùng • Ứng dụng đồ Google Maps, ... ứng số lượng lớn người dùng truy cập đồng thời v.v… 89 Tóm tắt chương Chương trình bày việc thiết kế website quản lý đồ trực tuyến mỏ khai thác khoáng sản Việt Nam Website thiết kế dựa công nghệ