Tài liệu Phát triển trang web giới thiệu khu du lịch atk định hoá dựa trên công nghệ webgis

LỜI CẢM ƠN Em xin chân thành cảm ơn thầy – TS. Nguyễn Văn Tảo và TS. Nguyễn Hải Minh đã tận tâm và nhiệt tình dạy bảo trong suốt thời gian học và làm đồ án tốt nghiệp, thầy đã dành nhiều thời gian quý báu để tận tình chỉ bảo, hướng dẫn, định hướng cho em thực hiện đồ án, giúp em học hỏi những kinh nghiệm quý báu và đã đạt được những thành quả nhất định. Em xin chân thành cảm ơn các thầy cô trong khoa Công nghệ thông tin đã nhiệt tình dạy bảo và tạo điều kiện cho em trong suốt quá trình được học tại trường. Em xin cảm ơn bạn bè và nhất là các thành viên trong gia đình đã tạo mọi điều kiện tốt nhất, động viên, cổ vũ em trong suốt quá trình học tập và làm đồ án tốt nghiệp. Do khả năng và trình độ có hạn, kinh nghiệm thực tế chưa nhiều nên đồ án tốt nghiệp của em không tránh khỏi những thiếu sót. Em rất mong nhận được sự chỉ bảo của các thầy cô và ý kiến đóng góp của thầy cô và các bạn. Cuối cùng em xin được gửi tới các thầy, các cô, các anh, các chị cùng toàn thể các bạn một lời chúc tốt đẹp nhất, sức khỏe, thịnh vượng và phát triển. Chúc các thầy cô đạt được nhiều thành công hơn nữa trong công cuộc trồng người. Em xin chân thành cảm ơn! Thái Nguyên, tháng 6 năm 2016 Sinh viên Phạm Thị Thanh Huyền 1 LỜI CAM ĐOAN Tôi xin cam đoan đây là công trình nghiên cứu của riêng tôi và được sự hướng dẫn của TS. Nguyễn Văn Tảo và TS Nguyễn Hải Minh . Các nội dung và kết quả trong đề tài này là trung thực và chưa công bố dưới bất kỳ hình thức nào trước đây. Những thông tin và bài viết, thống kê số liệu phục vụ cho việc phân tích, nhận xét, đánh giá được tôi thu thập từ các nguồn khác nhau và có ghi rõ nguồn trong từng bài viết và phần tài liệu tham khảo. Nếu phát hiện có bất kỳ sự gian lận nào tôi xin hoàn toàn chịu trách nhiệm về nội dung đồ án của mình trước mọi người và hội đồng nhà trường. Thái Nguyên, tháng 6 năm 2016 2 MỤC LỤC LỜI CẢM ƠN 1 LỜI CAM ĐOAN 2 DANH MỤC HÌNH ẢNH 5 LỜI MỞ ĐẦU 8 CHƯƠNG 1. CƠ SỞ LÝ THUYẾT 10 1.1 Các công cụ phát triển Web........................................................................10 1.1.1 Ngôn ngữ lập trình PHP. .....................................................................10 1.1.2 Hệ quản trị Cơ sở dữ liệu MySQL ......................................................11 1.1.3 Ngôn ngữ kịch bản JavaScript.............................................................12 1.2 Hệ thống thông tin địa lý ............................................................................16 1.2.1 Giới thiệu GIS .....................................................................................16 1.2.2 Giới thiệu về WebGis ..........................................................................21 1.2.3 Google Map API ................................................................................24 CHƯƠNG 2. BÀI TOÁN QUẢNG BÁ VÀ TIỀM NĂNG DU LỊCH CỦA KHU DU LỊCH ATK ĐỊNH HOÁ 36 2.1 Về ATK Định Hoá......................................................................................36 2.1.1 Tiềm năng du lịch ATK Định Hoá ......................................................36 2.1.2 Giải pháp phát triển du lịch bền vững ở ATK Định Hóa ....................37 2.2 Bài toán quảng bá du lịch ...........................................................................38 2.2.1 Các website quảng bá du lịch về ATK Định Hoá ...............................38 2.2.2 Yêu cầu của bài toán ...........................................................................40 2.2.3 Tóm tắt nội dung và hoạt động của website ........................................41 2.3 Phân tích, thiết kế các chức năng của hệ thống ..........................................42 2.3.1 Xác định các tác nhân..........................................................................42 2.3.2 Các chức năng hệ thống cần có ...........................................................42 3 2.3.3 Biểu đồ Usecase ..................................................................................43 2.3.4 Biểu đồ Trình tự ..................................................................................57 2.3.5 Biểu đồ Hoạt động...............................................................................65 2.3.6 Biểu đồ Lớp.........................................................................................68 2.3.7 Biểu đồ Thành phần ............................................................................68 2.3.8 Biểu đồ Triển khai...............................................................................69 2.4 Phân tích thiết kế dữ liệu hệ thống .........................................................69 2.4.1. Mô tả dữ liệu ......................................................................................69 2.4.2 Mô tả chi tiết các bảng .......................................................................69 2.4.3. Biểu đồ quan hệ CSDL.......................................................................73 CHƯƠNG 3. XÂY DỰNG CHƯƠNG TRÌNH 74 3.1 Mô tả bài toán .............................................................................................74 3.2 Môi trường cài đặt ......................................................................................74 3.2.1 Các công cụ sử dụng để xây dựng chương trình .................................74 3.2.2 Thử nghiệm trên Localhost .................................................................74 3.3. Giao diện website ......................................................................................74 3.3.1 Giao diện trang chủ .............................................................................74 3.3.2. Giao diện bản đồ.................................................................................78 3.4 Giao diện trang quản trị .............................................................................80 KẾT LUẬN 85 TÀI LIỆU THAM KHẢO 86 4 DANH MỤC HÌNH ẢNH Hình 1.1 Kiến trúc hệ thống WebGis................................................................... 22 Hình 1.2 Tạo API key .......................................................................................... 26 Hình 1.3 Tạo API key .......................................................................................... 26 Hình 1.4 Tạo API key .......................................................................................... 27 Hình 1.5 Tạo Markers trên bản đồ ....................................................................... 32 Hình 1.6 Tạo Polyline trên bản đồ ....................................................................... 33 Hình 1.7 Tạo Polygon trên bản đồ ....................................................................... 34 Hình 1.8 Tạo Infowindows trên bản đồ ............................................................... 34 Hình 2.1 Trang web atkthainguyen.org................................................................ 38 Hình 2.2 Trang web thainguyentourism.vn.......................................................... 39 Hình 2.3 Biểu đồ UseCase Tổng quát.................................................................. 43 Hình 2.4 Phân rã Usecase Quản lý địa điểm........................................................ 44 Hình 2.5 Phân rã Usecase Quản lý loại địa điểm................................................. 44 Hình 2.6 Phân rã Usecase Quản lý tin tức ........................................................... 45 Hình 2.7 Phân rã Usecase Quản lý bài viết.......................................................... 45 Hình 2.8 Phân rã Usecase Tìm đường đi ............................................................. 46 Hình 2.9 Biểu đồ trình tự cho UC Đăng nhập...................................................... 57 Hình 2.10 Biểu đồ trình tự cho UC Thêm địa điểm du lịch................................. 57 Hình 2.11 Biểu đồ trình tự cho UC Sửa địa điểm du lịch .................................... 58 Hình 2.12 Biểu đồ trình tự cho UC Xoá địa điểm du lịch ................................... 58 5 Hình 2.13 Biểu đồ trình tự cho UC Thêm loại địa điểm du lịch.......................... 59 Hình 2.14 Biểu đồ trình tự cho UC Xoá loại địa điểm ........................................ 59 Hình 2.15 Biểu đồ trình tự cho UC Sửa loại địa điểm......................................... 60 Hình 2.16 Biểu đồ trình tự cho use case Thêm tin tức......................................... 60 Hình 2.17 Biểu đồ trình tự cho use case Sửa tin tức............................................ 61 Hình 2.18 Biểu đồ trình tự cho use case Xoá tin tức ........................................... 61 Hình 2.19 Biểu đồ trình tự cho use case Thêm bài viết. ...................................... 62 Hình 2.20 Biểu đồ trình tự cho use case Sửa bài viết .......................................... 62 Hình 2.21 Biểu đồ trình tự cho use case Xoá bài viết.......................................... 63 Hình 2.22 Biểu đồ trình tự cho use case Xem thông tin địa điểm du lịch. .......... 63 Hình 2.23 Biểu đồ trình tự cho use case Hiện chỉ dẫn......................................... 64 Hình 2.24 Biểu đồ trình tự cho use case Tìm đường đi trên Map........................ 64 Hình 2.25 Biểu đồ trình tự cho use case Liên hệ . ............................................... 65 Hình 2.26 Biểu đồ hoạt động cho usecase Đăng nhập......................................... 65 Hình 2.27 Biểu đồ hoạt động cho usecase Quản lý địa điểm du lịch................... 66 Hình 2.28 Biểu đồ hoạt động cho usecase Quản lý loại địa điểm du lịch............ 66 Hình 2.29 Biểu đồ hoạt động cho usecase Xem thông tin địa điểm du lịch. ....... 67 Hình 2.30 Biểu đồ hoạt động cho usecase Tìm đường đi trên Map..................... 67 Hình 2.31 Biểu đồ Lớp......................................................................................... 68 Hình 2.32 Biểu đồ Thành phần ............................................................................ 68 Hình 2.33 Biểu đồ Triển khai............................................................................... 69 Hình 2.34 Sơ đồ quan hệ thực thể........................................................................ 73 6 Hình 3.1 Giao diện trang chủ ............................................................................... 75 Hình 3.2 Giao diện giới thiệu về ATK Định Hoá ................................................ 77 Hình 3.3 Giao diện thông tin địa điểm du lịch..................................................... 77 Hình 3.4 Giao diện thông tin địa điểm du lịch trên bản đồ.................................. 78 Hình 3.5 Giao diện chỉ dẫn đường đi ................................................................... 79 Hình 3.6 Giao diện liên hệ của người dùng ......................................................... 80 Hình 3.7 Giao diện đăng nhập quản trị ................................................................ 80 Hình 3.8 Giao diện Quản lý địa điểm du lịch ...................................................... 81 Hình 3.9 Giao diện Quản lý loại địa điểm du lịch ............................................... 82 Hình 3.10 Giao diện Quản lý bài viết .................................................................. 82 Hình 3.11 Giao diện Quản lý tin tức .................................................................... 83 Hình 3.12 Danh sách các đặc sản của vùng ATK ................................................ 83 Hình 3.13 Giao diện Quản lý tour du lịch............................................................ 84 7 LỜI MỞ ĐẦU GIS-Geography Information System (Hệ thống thông tin địa lý) ra đời và phát triển mạnh trong những thời gian gần đây. Cùng với sự bùng nổ về cộng nghệ của Internet, GIS cũng đã phát triển công nghệ cho phép chia sẻ thông tin thông qua mạng toàn cầu bằng cách kết hợp GIS và Web. Công nghệ Web và GIS ngày càng phát triển đòi hỏi việc xem bản đồ trên Internet được chú trọng và sự kết hợp này tạo thành WebGIS đáp ứng được nhu cầu trên. WebGIS là xu hướng phổ biến không chỉ hiển thị được dạng thông tin thuần tuý mà còn hiển thị không gian hữu ích cho người sử dụng. Bên cạnh đó, khu du lịch ATK chưa có một ứng dụng cụ thể nào để có thể tìm kiếm và tra cứu thông tin cũng như là quảng bá các điểm du lịch và các di tích lịch sử. Vì những lý do này, đề tài “Phát triển trang Web giới thiệu Khu du lịch ATK Định Hoá dựa trên công nghệ WebGis ” là đề tài mà em lựa chọn làm đồ án tốt nghiệp. Nội dung chính của đề tài là nghiên cứu nền tảng công nghệ GIS, từ đó đưa ra các giải pháp về bản đồ trực tuyến, khả năng xây dựng ứng dụng bản đồ trên ngôn ngữ lập trình và từ đó xây dựng website bản đồ trực tuyến giới thiệu về khu du lịch ATK-Định Hoá. Mục đích của bài đồ án này là ứng dụng của GIS vào trong việc xây dựng website quảng bá du lịch ATK-Định Hoá. Từ đó nhận ra tầm quan trọng của nó trong cuộc sống hiện đại với kỹ thuật ngày càng phát triển mạnh mẽ.  Mục tiêu nghiên cứu:  Tìm hiểu hệ thống GIS, nghiên cứu các công cụ và ngôn ngữ để hỗ trợ cho việc thiết kế WebGIS.  Ứng dụng GIS vào việc xây dựng trang web giới thiệu và quảng bá du lịch ATK-Định Hoá.  Phạm vi nghiên cứu:  Về giới hạn địa lý: Nghiên cứu và xây dựng hệ thống thông tin địa lý hỗ 8 trợ công tác quản lý các điểm du lịch của ATK( An toàn khu) Định Hoá.  Về phần mềm sử dụng: Sử dụng phần mềm MapInfo và Google Map API để xây dựng hệ thống giới thiệu và quản lý các điểm du lịch của Chiến khu Việt Bắc- ATK Định Hoá.  Bố cục đề tài: Gồm 3 chương: Chương 1: Cơ sở lý thuyết. Các công cụ xây dựng và phát triển Web. Hệ thống thông tin địa lý (GIS) Chương 2: Bài toán quảng bá và tiềm năng du lịch của Khu du lịch ATK Định Hoá. Chương 3: Xây dựng Website quảng bá Khu du lịch ATK Định Hoá. Mô tả bài toán. Cài đặt chương trình. Thiết kế giao diện. Thái Nguyên, tháng 6 năm 2016 9 CHƯƠNG 1. CƠ SỞ LÝ THUYẾT 1.1 Các công cụ phát triển Web  Ngôn ngữ lập trình PHP.  Lịch sử ra đời của PHP PHP ra đời khoảng năm 1994, do một người phát minh mang tên Rasmus Lerdorf và được nhiều người phát triển cho đến ngày hôm nay. PHP được sử dụng khá nhiều trong các ứng dụng Web về thương mại điện tử, tính đến năm 2001 có khoảng 5 triệu tên miền sử dụng mã nguồn PHP. PHP là một phiên bản mã nguồn mở, điều đó cho phép bạn có thể làm việc trên mã nguồn, thêm, chỉnh sửa, sử dụng hay phân phối chúng.  Tại sao nên dùng PHP Để thiết kế Web động có rất nhiều ngôn ngữ lập trình khác nhau để lựa chọn, mặc dù cấu hình và tính năng khác nhau nhưng chúng vẫn đưa ra những kết quả giống nhau. Chúng ta có thể lựa chọn cho mình một ngôn ngữ: ASP, PHP, Java, Perl… và một số loại khác nữa. Vậy tại sao chúng ta lại nên chọn PHP. Rất đơn giản, có những lý do sau mà khi lập trình Web chúng ta không nên bỏ qua sự lựa chọn tuyệt vời này. PHP được sử dụng làm Web động vì nó nhanh, dễ dàng, tốt hơn so với các giải pháp khác. PHP có khả năng thực hiện và tích hợp chặt chẽ với hầu hết các cơ sở dữ liệu có sẵn, tính linh động, bền vững và khả năng phát triển không giới hạn. Đặc biệt PHP là mã nguồn mở do đó tất cả các đặc tính trên đều miễn phí, và chính vì mã nguồn mở sẵn có nên cộng đồng các nhà phát triển Web luôn có ý thức cải tiến nó, nâng cao để khắc phục các lỗi trong các chương trình này. PHP vừa dễ với người mới sử dụng, vừa có thể đáp ứng mọi yêu cầu của các lập trình viên chuyên nghiệp, mọi ý tưởng của các bạn PHP có thể đáp ứng một cách xuất sắc. 10 Cách đây không lâu, ASP vốn được xem là ngôn ngữ kịch bản phổ biến nhất, vậy mà bây giờ PHP đã bắt kịp ASP, bằng chứng là nó đã có mặt trên 12 triệu Website.  Sử dụng PHP Để có thể biên dịch các mã lệnh PHP thì khi bạn đưa mã nguồn lên Webserver bạn cần phải cấu hình PHP trên Server có cài IIS (Internet Information Server). Tuy nhiên đa số các Webserver hiện nay đều hỗ trợ các trình biên dịch mã lệnh PHP cho nên chúng ta không cần phải quá quan tâm tới việc cài đặt cấu hình PHP trên Server. Để có thể test các ứng dụng PHP trên máy tính khi đang thiết kế mã nguồn, bạn có thể cài trình biên dịch mã lệnh PHP từ bộ cài AppServ hoặc một số bộ cài khác. Cũng cần lưu ý khi trên máy bạn cài đồng thời nhiều trình biên dịch mã nguồn, bạn nên cài PHP ở một cổng (port) khác để tránh xung đột, hoặc khi bạn biên dịch mã nguồn PHP thì nên tạm thời tắt các Webserver khác trong IIS. 1.1.2 Hệ quản trị Cơ sở dữ liệu MySQL  Giới thiệu MySQL là ứng dụng cơ sở dữ liệu mã nguồn mở phổ biến nhất hiện nay và được sử dụng phối hợp với PHP cho các ứng dụng Web có quy mô vừa và nhỏ. Tuy không phải là một cơ sở dữ liệu lớn nhưng chúng cũng có trình giao diện trên Windows hay Linux, cho phép người dùng có thể thao tác các hành động liên quan đến cơ sở dữ liệu. Cũng giống như các cơ sở dữ liệu, khi làm việc với cơ sở dữ liệu MySQL, bạn đăng ký kết nối, tạo cơ sở dữ liệu, quản lý người dùng, phân quyền sử dụng, thiết kế đối tượng Table của cơ sở dữ liệu và xử lý dữ liệu.  Mục đích sử dụng cơ sở dữ liệu Mục đích sử dụng cơ sở dữ liệu bao gồm các chức năng: lưu trữ (storage), truy cập (accessibility), tổ chức (organization) và xử lý (manipulation).  Lưu trữ: Lưu trữ trên đĩa và có thể chuyển đổi dữ liệu từ cơ sở dữ liệu 11 này sang cơ sở dữ liệu khác, nếu bạn sử dụng cho quy mô nhỏ, bạn có thể chọn cơ sở dữ liệu nhỏ như: Microsoft Excel, Microsoft Access, MySQL, Microsoft Visual FoxPro,... Nếu ứng dụng có quy mô lớn, bạn có thể chọn cơ sở dữ liệu có quy mô lớn như: Oracle, SQL Server,…  Truy cập: Truy cập dữ liệu phụ thuộc vào mục đích và yêu cầu của người sử dụng, ở mức độ mang tính cục bộ, truy cập cơ sở dữ liệu ngay trong cơ sở dữ liệu với nhau, nhằm trao đổi hay xử lý dữ liệu ngay bên trong chính nó, nhưng do mục đích và yêu cầu người dùng vượt ra ngoài cơ sở dữ liệu, nên bạn cần có các phương thức truy cập dữ liệu giữa các cơ sở dữ liệu với nhau như: Microsoft Access với SQL Server, hay SQL Server và cơ sở dữ liệu Oracle…  Tổ chức: Tổ chức cơ sở dữ liệu phụ thuộc vào mô hình cơ sở dữ liệu, phân tích và thiết kế cơ sở dữ liệu tức là tổ chức cơ sở dữ liệu phụ thuộc vào đặc điểm riêng của từng ứng dụng. Tuy nhiên khi tổ chức cơ sở dữ liệu cần phải tuân theo một số tiêu chuẩn của hệ thống cơ sở dữ liệu nhằm tăng tính tối ưu khi truy cập và xử lý.  Xử lý: Tùy vào nhu cầu tính toán và truy vấn cơ sở dữ liệu với các mục đích khác nhau, cần phải sử dụng các phát biểu truy vấn cùng các phép toán, phát biểu của cơ sở dữ liệu để xuất ra kết quả như yêu cầu. Để thao tác hay xử lý dữ liệu bên trong chính cơ sở dữ liệu ta sử dụng các ngôn ngữ lập trình như: PHP, C++, Java, Visual Basic,… 1.1.3 Ngôn ngữ kịch bản JavaScript  Giới thiệu về JavaScript JavaScript là một ngôn ngữ kịch bản (scripting language) được dùng để tạo các script ở máy client (client-side script) và máy server (server-side script). Các script ở máy client được thực thi tại trình duyệt, các script ở máy server được thực hiện trên server. Phần này sẽ giới thiệu về ngôn ngữ JavaScript, và cách chèn một script vào trong tài liệu HTML. JavaScript được phát triển như là một giải pháp cho vấn đề nêu trên. 12 JavaScript là một ngôn ngữ kịch bản được Sun Microsystems và Netscape phát triển. Nó được dùng để tạo các trang Web động và tương tác trên Internet. Đối với những người phát triển HTML, JavaScript rất hữu ích trong việc xây dựng các hệ thống HTML có thể tương tác với người dùng. Sun Microsystems đã viết ra một ngôn ngữ phức tạp và mạnh mẽ mà chúng ta đã biết đó là ngôn ngữ Java. Mặc dù Java có tính khả dụng cao nhưng nó lại phù hợp nhất đối với các nhà lập trình có kinh nghiệm và cho các công việc phức tạp hơn. Netscape Communications nhận thấy nhu cầu cần một ngôn ngữ thiết kế web có khả năng tương tác với người sử dụng hay với các Java Applet, dễ sử dụng ngay cả với những người lập trình ít kinh nghiệm. Mục tiêu của JavaScript là nhằm cung cấp cho các nhà phát triển Web một số khả năng và quyền điều khiển chức năng cho trang Web. Mã JavaScript có khả năng nhúng trong tài liệu HTML để điều khiển nội dung của trang Web và kiểm tra sự hợp lệ của dữ liệu mà người dùng nhập vào. Khi một trang hiển thị trong trình duyệt, các câu lệnh được trình duyệt thông dịch và thực thi. JavaScript là một ngôn ngữ kịch bản dựa trên đối tượng nhằm phát triển các ứng dụng Internet chạy trên phía client và phía server. Các ứng dụng client được chạy trong một trình duyệt như Netscape Navigator hoặc Internet Explorer, và các ứng dụng server chạy trên một Web server như Microsoft’s Internet Information Server hoặc Netscape Enterprise Server.  Hiệu ứng và quy tắc JavaScript JavaScript là một ngôn ngữ lập trình được nhúng được trong các trang HTML. JavaScript nâng cao tính động và khả năng tương tác cho website bằng cách sử dụng các hiệu ứng của nó như thực hiện các phép tính, kiểm tra form, viết các trò chơi, bổ sung các hiệu ứng đặc biệt, tuỳ biến các chọn lựa đồ hoạ, tạo ra các mật khẩu bảo mật và hơn thế nữa. Chúng ta có thể sử dụng JavaScript để: 13  Tương tác với người dùng: Chúng ta có thể viết mã để đáp lại các sự kiện. Các sự kiện này sẽ có thể phát sinh bởi người dùng hay được phát sinh từ hệ thống.  Thay đổi nội dung động: Mã JavaScript có thể dùng để thay đổi nội dung và vị trí các phần tử một cách động trên một trang nhằm đáp lại sự tương tác với người dùng.  Kiểm tra tính hợp lệ dữ liệu: Chúng ta có thể viết mã nhằm kiểm tra tính hợp lệ của dữ liệu do người dùng nhập vào trước khi nó được gửi lên Web server để xử lý. Giống như các ngôn ngữ khác, JavaScript cũng tuân thủ một số quy tắc ngữ pháp căn bản. Việc nắm vững các quy tắc ngữ pháp này có thể giúp ta đọc được script và tự viết các script không bị lỗi. Một số trong các luật này bao gồm:  Dùng Caps. JavaScript phân biệt chữ hoa chữ thường.  Dùng Pairs. Trong JavaScript, luôn luôn có cặp ký hiệu mở và đóng. Lỗi sẽ xuất hiện khi bỏ sót hoặc đặt sai một trong hai ký hiệu này.  Dùng Spaces (các ký tự trắng). Như HTML, JavaScript thường bỏ qua ký tự trắng. Trong JavaScript, ta có thể thêm vào các ký tự trắng hoặc các tab giúp cho ta dễ dàng đọc hay sửa các file script.  Dùng Chú thích (Comments). Các chú thích giúp ta ghi chú về chức năng của đoạn script, thời gian và người tạo ra đoạn script. Mặc dù cả client-side JavaScript và server-side JavaScript đều dựa trên một ngôn ngữ nền tảng như nhau, nhưng mỗi loại còn có thêm những tính năng chuyên biệt phù hợp với môi trường mà nó chạy. Nghĩa là client-side JavaScript bao gồm các đối tượng được định nghĩa sẵn chỉ có thể sử dụng trên trình duyệt, Server-side JavaScript bao gồm các đối tượng và các hàm được định nghĩa sẵn chỉ có thể sử dùng trong các ứng dụng phía server (server-side applications). 14  Các công cụ JavaScript và IDE, và môi trường thực thi Các công cụ sinh mã JavaScript và IDE giúp tạo ra mã JavaScript rất hữu hiệu. Các công cụ này còn giúp ta nhanh chóng phát triển website của mình. Một vài công cụ JavaScript và IDE được đề cập sau đây:  Dialog Box. Công cụ này tự động tạo mã để sinh ra các hộp thoại tuỳ biến trên các trình duyệt khác nhau (alert, confirm, prompt,...) mang lại kiểu dáng chuyên nghiệp cho website.  Pop-up Menu builder. Chỉ cần đưa vào các lựa chọn, công cụ này sẽ tự động tạo ra các pop-up menu trên các trình duyệt khác nhau.  Remotes. Tự động sinh mã để mở ra một cửa sổ popup. Như chúng ta đã biết, JavaScript có thể được chạy trên máy khách (client) và máy chủ (server). Bên phía máy khách, trình duyệt sẽ thực thi mã lệnh JavaScript trong trang web khi mở nó. Bên phía máy chủ, mã JavaScript sẽ được thực thi tại máy chủ và do máy chủ thực hiện. Client-side Java Script Khi máy client yêu cầu một trang HTML, server sẽ kiểm tra xem trang đó có chứa script hay không. Nếu nó chứa các client-side script, server sẽ chuyển toàn bộ tài liệu bao gồm mã lệnh JavaScript và nội dung HTML của nó cho trình duyệt. Khi trình duyệt nhận được tài liệu đó, nó thực thi các mã lệnh HTML và JavaScript mà không cần bất kì sự tương tác nào với server. JavaScript trên Web Server Chúng ta có thể nhúng các lệnh JavaScript chạy trên server (server-side script) vào trong tài liệu HTML. Quá trình tạo ra các ứng dụng server-side là một quá trình gồm hai giai đoạn. Các trang HTML có chứa các câu lệnh JavaScript của cả client-side và server-side đều được tạo ra cùng với các file JavaScript. Tất cả các file này sẽ được biên dịch thành dạng mã thực thi được là bytecode. Khi trình duyệt yêu cầu trang HTML, run-time engine sẽ thực thi mã lệnh 15 server-side JavaScript rồi trả trang HTML về cho trình duyệt. Một số công dụng của script server-side bao gồm:  Kết nối vào các cơ sở dữ liệu.  Chia sẻ thông tin cho những người dùng của một ứng dụng.  Truy cập vào hệ thống file trên server.  Nhúng JavaScript vào trong trang Web Chúng ta có thể chèn các lệnh JavaScript vào trong một tài liệu HTML theo những cách sau đây:  Nhúng các câu lệnh trực tiếp vào trong tài liệu bằng cách sử dụng thẻ