ใบงานที่ 3 ความรู้ทั่วไปเกี่ยวกับ web application

1. ความหมายของ web application

คือ การพัฒนาระบบงานบนเว็บ ซึ่งมีข้อดีคือ ข้อมูลต่าง ๆ ในระบบมีการไหลเวียนในแบบ Online ทั้งแบบ Local (ภายในวง LAN) และ Global (ออกไปยังเครือข่ายอินเตอร์เน็ต) ทำให้เหมาะสำหรับงานที่ต้องการข้อมูลแบบ Real Time ระบบมีประสิทธิภาพ แต่ใช้งานง่าย เหมือนกับท่านทำกำลังท่องเว็บ ระบบงานที่พัฒนาขึ้นมาจะตรงกับความต้องการกับหน่วยงาน หรือห้างร้านมากที่สุด ไม่เหมือนกับโปรแกรมสำเร็จรูปทั่วไป ที่มักจะจัดทำระบบในแบบกว้าง ๆ ซึ่งมักจะไม่ตรงกับความต้องการที่แท้จริง ระบบสามารถโต้ตอบกับลูกค้า หรือผู้ใช้บริการแบบ Real Time ทำให้เกิดความประทับใจ เครื่องที่ใช้งานไม่จำเป็นต้องติดตั้งโปรแกรมใด ๆ เพิ่มเติมทั้งสิ้น

ตัวอย่างระบบงานที่เหมาะกับเว็บ แอพพลิเคชั่น เช่น ระบบการจองสินค้าหรือบริการต่าง ๆ เช่น การจองที่พัก การจองโปรแกรมทัวร์ การจองแผ่น CD-DVD ฯลฯ ระบบงานบุคลากร ระบบงานแผนการตลาด ระบบการสั่งซื้อแบบพิเศษ ระบบงานในโรงเรียน เช่น ระบบงานวัดและประเมินผล ระบบงานปกครอง ระบบงานห้องสมุด ระบบการลงทะเบียน เช็คเกรด ฯลฯ ระบบงานอื่น ๆ ที่ต้องการนำข้อมูลมา Online

ค่าใช้จ่ายในการทำเว็บ แอพพลิเคชั่น ปกติจะใช้วิธีการคำนวณจากขอบเขตของระบบงาน และปริมาณของข้อมูลที่ไหลเวียนในระบบ รวมถึงปัจจัยด้านอื่น ๆ ซึ่งทางเว็บ โปรแกรมเมอร์จะคำนวณราคาออกเป็นงาน ๆ ไป ซึ่งส่วนใหญ่จะมีค่าใช้จ่ายต่าง ๆ ต่อไปนี้รวมกัน ค่าจัดทำระบบงาน ค่าชื่อโดเมน และ Web Hosting (ในกรณีจะนำระบบออกทางเครือข่ายอินเตอร์เน็ต) ค่าบริการหลังการขาย ค่า Hardware และอุปกรณ์ด้านเครือข่าย เพิ่มเติม อื่น ๆ

Web Application คือ ส่วนมากคนมักจะคุ้นเคยกับ Desk top Application หรือโปรแกรมคอมพิวเตอร์ที่ติดตั้งบนคอมพิวเตอร็์ส่วนบุคคล เช่น โปรแกรมพวก Microsoft Office เช่นโปรแกรมพิพม์งาน หรือ Word Processor ที่ใช้พิมพ์งาน ซึ่งจะติดตั้งบนเครื่องคอมพิวเตอร์ของคุณ และใช้ได้ทีละคน

หากคุณทำงานที่บริษัทคุณจะคุ้นเคยกับโปรแกรมที่บริษัทใช้ เช่น ERP หรือ MRP หรือโปรแกรมห้องสมุด โปรแกรมพวกนี้มักจะเป็นโปรแกรมแบบ Client - Server คือโปรแกรมที่ใช้งานโดยคนหลายๆคนพร้อมๆกัน มีการเก็บข้อมูลไว้ที่ฐานข้อมูลกลาง ทำให้ทุกคนใช้ข้อมูลเดียวกัน ร่วมกันได้

โดยโปรแกรมจะถูกแบ่งออกเป็นสองส่วน คือส่วนหนึ่งถูกติดตั้งที่ Server ส่วนกลาง และอีกส่วนติดตั้งที่คอมพิวเตอร์ของผู้ใช้ หรือที่เรียกว่า Client ซึ่งทั้งสองส่วนจะทำงานร่วมกัน โดยโปรแกรมบน Server มักจะทำงานหลักๆ ที่จำเป็นเช่นการคำนวน การค้นหาข้อมูล การเก็บข้อมูล ส่วนโปรแกรมที่คอมพิวเตอร์ของเรา หรือที่เรียกว่า Client นั้นจะทำหน้าที่นำเสนอข้อมูล และรับข้อมูลจากผู้ใช้ หรือที่เรียกว่าเป็น User Interface โปรแกรมแบบนี้ซับซ้อนและดูแลยาก เพราะหากคุณ Upgrade โปรแกรมที่ Server คุณก็ต้อง Upgrade โปรแกรมที่ Client ด้วย ซึ่งเป็นเรื่องที่น่าปวดหัวเนื่องจาก Client มีหลายเครื่อง ยากที่ Upgrade ได้ครบ

ในระยะหลังๆนี้คุณคงได้ยินโปรแกรมอีกประเภทที่ได้รับความนิยมมากขึ้น โปรแกรมนั้นก็คือ Web Application เป็นโปรแกรมที่ติดตั้งที่ Server ซึ่ง Web Application สามารถใช้งานแทนโปรแกรมทั้งแบบ Desktop และแบบ Client - Server เช่น โปรแกรม Google Application ซึ่งใช้แทน Microsoft Office เช่นมีทั้ง Word Processor และหรือ Spread Sheet ที่ใช้แทน Excel

โดยเฉพาะโปรแกรมแบบ Client-Server หลายตัวก็กำลังแปลงตัวเป็น Web Application เพื่อตอบสนองความต้องการของลูกค้า เช่น SAP, Lotus Notes ฯลฯ

ข้อดีของ Web Application ตรงที่ Web Application ไม่ต้องใช้ Client Program ทำให้ไม่ต้อง Upgrade Client Program และสามารถใช้ผ่าน Internet Connection ที่มีความเร็วต่ำกว่า ทำให้ใช้โปรแกรมได้จากทุกแห่งในโลก

Web Application คือ แอปพลิเคชั่นที่เข้าถึงด้วย Web browser ผ่านเครือข่ายคอมพิวเตอร์อย่างอินเทอร์เน็ต หรือ อินทราเน็ต มี 11 Web Application ดังนี้
1. Bubbl.us เป็นโปรแกรมที่ใช้สำหรับสร้าง Mind map โดยทำงานบน Flash สามารถ Export file ออกมาเป็นไฟล์ภาพก็ได้
2. Buzzword ความสามารถของ Web App. คือ Online word processor นั่งเอง
3. Empressr เป็น App. ที่ใช้สำหรับสร้างภาพแบบ Sildeshows คือโปรแกรมที่ใช้สำหรับสร้างงาน presentation ใช้แทน powerpoint
4. Highrise เป็นชุดโปรแกรมบริหารจัดการลูกค้าสัมพันธ์ CRM
5. Jott เป็น Web app. ใช้ในการทำบันทึกให้กับตัวเอง บันทึกเสียง สามารถเรียกใช้เมื่อไหร่ก็ได้
6. Mint ใช้ในการจัดการบริหารเงินด้วยตัวเองโดยผ่านระบบออนไลน์
7. Nozbe สำหรับ Project management ทำหน้าที่บริการจัดการ project ต่างๆ
8. Sandy เป็นผู้ช่วยส่วนตัวในการจัดการเรื่องอีเมล์ด้วยภาษาธรรมชาติ
9. Vitalst ลักณะคล้าย Nozbe Todoist เป็นโปรแกรมที่อยู่ในกลุ่มเดียวกัน (Getting Thing Done=GTD)
10. Scrybe มีการรวมกันระหว่างปฎทินกับระบบแจ้งอีเมล์ สามารถสร้างตารางนัดหมายผ่านระบบออนไลน์และแจ้งทางอีเมล์ด้วย
11. Todoist มีลักษณะการทำงานที่คล้าย Nozbe เน้นไปในการวางแผนใช้ชีวิตประจำวันมากกว่า

Web 2.0 คือการกำหนดสิ่งที่เปลี่ยนแปลงไปของเทคโนโลยีเว็บ ว่ามีอะไรบ้าง คล้าย ๆ กับการกำหนดยุคปัจจุบันของเว็บว่าอยู่ในยุคที่ 2 ของการพัฒนา โดยมีองค์ประกอบที่สำคัญรวม ๆ เข้าด้วยกัน
คุณสมบัติของ Web 2.0
1. ให้ความสำคัญกับผู้เข้าชมเว็บไซต์
2. คุณสมบัติที่เรียกว่า RIA(Fich Internet Application)คือ Web 2.0 0tมี user interface ที่ดี
3.คุณสมบัติที่เรียกว่า mash-up เป็นส่วนสำคัญอีกส่วนหนึ่งของ Web 2.0 เช่น การสร้าง Web application เกี่ยวกับระบบการซื้อขายสินค้า online
เทคโนโลยีที่น่าสนใจ

1. AJAX
2. XML, Web services
3. Saas(Software as service)

2. ลักษณะการทำงานของ web application

ลักษณะการทำงานของโปรแกรมที่เขียนโดยยึดหลักการเป็น Web Application นั้น จะแตกต่างไปจากโปรแกรมแบบทั่วไปตรงที่ โปรแกรมโดยทั่วไปนั้น ไบนารีโค้ดของโปรแกรมทั้งหมด จะวางตัวอยู่บนเครื่องเวิร์คสเตชันในขณะที่กำลังรัน ในขณะที่โปรแกรมที่เขียนขึ้นโดยให้มีลักษณะเป็น Web Application นั้น โปรแกรมส่วนหนึ่งจะวางตัวอยู่บน Rendering Engine ซึ่งตัว Rendering Engine จะทำหน้าที่หลักๆ คือนำเอาชุดคำสั่งหรือรูปแบบโครงสร้างข้อมูลที่ใช้ในการแสดงผล นำมาแสดงผลบนพื้นที่ส่วนหนึ่งในจอภาพ โปรแกรมส่วนที่วางตัวอยู่บน Rendering Engine จะทำหน้าที่หลักๆ คือการเปลี่ยนแปลงแก้ไขสิ่งที่แสดงผล จัดการตรวจสอบข้อมูลที่รับเข้ามาเบื้องต้น และการประมวลบางส่วน แต่ส่วนการทำงานหลักๆ จะวางตัวอยู่บนเซอร์เวอร์ ซึ่งในทางปฏิบัติสามารถมีได้มากกว่าหนึ่งตัว ดังเช่น

ในลักษณะ Web Application แบบเบื้องต้น ฝั่งเซอร์เวอร์จะประกอบไปด้วยเว็บเซอร์เวอร์ ซึ่งทำหน้าที่เชื่อมต่อกับไคลเอนต์ตามโปรโตคอล HTTP/HTTPS โดยนอกจากเว็บเซอร์เวอร์จะทำหน้าที่ส่งไฟล์ที่เกี่ยวเนื่องกับการแสดงผลตามมาตรฐาน HTTP ตามปกติทั่วไปแล้ว เว็บเซอร์เวอร์จะมีส่วนประมวลผลซึ่งอาจจะเป็นตัวแปลภาษา เช่น Script Engine ของภาษา PHP หรืออาจจะมีการติดตั้ง .NET Framework ซึ่งมีส่วนแปลภาษา CLR (Common Language Runtime) ที่ใช้แปลภาษา intermediate จากโค้ดที่เขียนด้วย VB.NET หรือ C#.NET หรืออาจจะเป็น J2EE ที่มีส่วนแปลไบต์โค้ดของคลาสที่ได้จากโปรแกรมภาษาจาวา เป็นต้น

ในฝั่งไคลเอนต์ ซึ่งเป็นฝั่งที่ทำหน้าที่ร้องขอข้อมูลและโค้ดโปรแกรมบางส่วนจากเซอร์เวอร์ มีองค์ประกอบล่างสุดคือ Web Client ที่ทำหน้าที่เชื่อมต่อกับเว็บเซอร์เวอร์ตามโปรโตคอล HTTP/HTTPS ซึ่งในที่นี้คือเว็บบราวเซอร์ กลไกการทำงานที่สำคัญของเว็บบราวเซอร์ก็คือ Rendering Engine หรือส่วนสร้างภาพเพื่อนำมาแสดงบนหน้าจอ ข้อมูลที่ไคลเอนต์ได้รับมาเพื่อนำมาแสดงผลในฟอร์แมต DHTML,XHTML จะถูกนำมาจัดเก็บในโครงสร้างข้อมูลเชิงวัตถุตามมาตรฐาน Document Object Model (DOM) โดยในการอ่านข้อมูลแสดงเอกสารครั้งแรก จะเริ่มต้นด้วยการจัดสร้างโครงสร้าง DOM และสร้างภาพหน้าจอ โดยภายในไฟล์ DHTML/XHTML อาจจะมีส่วนโปรแกรมติดมาด้วยในมาตรฐานของจาวาสคริปต์ (ซึ่งได้รับการรับรองมาตรฐานกลางในชื่อ ECMAScript แต่จาวาสคริปต์และ JScript ที่ใช้อยู่ในปัจจุบันไม่ได้ตรงตามมาตรฐาน ECMAScript ร้อยเปอร์เซนต์) โค้ดโปรแกรมส่วนที่เป็นจาวาสคริปต์จะถูกส่งให้กับ Script Engine ในตัวเว็บบราวเซอร์ให้ทำงานตามที่เรากำหนด (ซึ่งเราจะกล่าวในรายละเอียดในครั้งถัดๆ ไป)

เมื่อหน้าจอแรกถูกวาดบนหน้าต่างของบราวเซอร์ โปรแกรมในฝั่งไคลเอนต์(บนบราวเซอร์)จะถูกเรียกใช้งานตามเหตุการณ์ที่ผู้พัฒนาโปรแกรมได้กำหนดไว้ หน้าที่หลักๆ ของโปรแกรมในฝั่งไคลเอนต์มักจะมีดังเช่น

- เปลี่ยนแปลงหน้าตาการแสดงผลบนส่วนใดส่วนหนึ่งของหน้าต่างของบราวเซอร์ ซึ่งอาจจะส่งผลเป็นการภายในซับเฟรม หรือข้ามซับเฟรม แล้วแต่ผู้เขียนโปรแกรมจะกำหนดในโค้ดที่เขียนด้วยจาวาสคริปต์

- ตอบสนองต่อเหตุการณ์ต่างๆ ที่เกิดขึ้นเมื่อผู้ใช้กระทำสิ่งหนึ่งสิ่งใดต่อองค์ประกอบในตัวเอกสารที่กำลังแสดงอยู่ เช่นเปลี่ยนแปลงแก้ไขฟอร์ม คลิก เลื่อนเมาส์ ไปในบริเวณที่กำหนด ฯลฯ ไปจนถึงตอบสนองต่อเหตุการณ์อื่นๆ เช่น ฐานเวลา เป็นต้น

- ตรวจสอบการป้อนข้อมูลจากผู้ใช้เบื้องต้น

- ส่งข้อมูลให้เซอร์เวอร์ และ/หรือ ร้องขอข้อมูลเพิ่มเติมจากฝั่งเซอร์เวอร์

- เรียกใช้เมธอดที่วางอยู่บนฝั่งเซอร์เวอร์ เพื่อกระทำงานอย่างใดอย่างหนึ่งตามต้องการ แล้วส่งผลกลับมายังไคลเอนต์

- ร้องขอข้อมูลการแสดงผลในซับเฟรมปัจจุบันหรือซับเฟรมอื่นจากเซอร์เวอร์

- ประมวลผลอื่นใดตามแต่กำหนด

เราจะเห็นว่า การทำงานของ Web Application นั้นไม่ได้จบสิ้นอยู่แค่การโหลดหน้าเว็บมาแสดงเท่านั้น แต่หลังจากหน้าเว็บได้โหลดเสร็จสิ้นแล้ว ยังมีกลไกการทำงานที่เกิดขึ้นสำหรับหน้าเว็บนั้นๆ และที่สำคัญ กลไกการทำงานดังกล่าวยังรวมไปถึงการร้องขอข้อมูลเพิ่มเติม หรือการเรียกใช้โปรแกรมย่อย หรือเมธอดที่ฝังตัวอยู่บนฝั่งเซอร์เวอร์

ข้อดีของการออกแบบ Web Application ที่เห็นได้ชัดก็คือ โค้ดโปรแกรมทั้งหมดอยู่ที่ฝั่งเซอร์เวอร์ และมีโค้ดโปรแกรมบางส่วนจะถูกโหลดขึ้นบนไคลเอนต์เมื่อต้องการจะทำงาน ส่วนโค้ดที่เหลือจะยังคงค้างอยู่ที่ฝั่งเซอร์เวอร์ ทำให้การพัฒนาซอฟต์แวร์ที่ต้องมีการปรับปรุงแก้ไขบ่อย สามารถกระทำได้โดยง่ายโดยไม่ต้องทำระบบโหลด patch หรืออัปเดตเวอร์ชันใหม่ๆ ให้กับไคลเอนต์จำนวนมากบ่อยๆ และโปรแกรมบางประเภทที่ต้องใช้ข้อมูลส่วนกลางเป็นจำนวนมากแต่จะไม่ได้ใช้ทั้งหมดในคราวเดียว ผู้พัฒนาโปรแกรมสามารถที่จะส่งข้อมูลเบื้องต้นบางส่วนให้กับไคลเอนต์ไปก่อน และเมื่อผู้ใช้ต้องการข้อมูลส่วนอื่นๆ เพิ่มเติม จึงค่อยส่งข้อมูลที่เหลือให้ การทำเช่นนี้จะทำให้ไม่ต้องส่งข้อมูลทั้งหมดไปยังผู้ใช้ในคราวเดียว โดยเฉพาะในกรณีที่ผู้ใช้งานอาจจะไม่ต้องการข้อมูลทั้งหมดนั้น การเลือกส่งเท่าที่ร้องขอจะช่วยลดปริมาณข้อมูลที่ต้องส่งผ่านระบบเครือข่ายลงได้

สำหรับข้อเสียของ Web Application ที่เห็นได้ก็มีดังเช่น ไม่เหมาะสมสำหรับโปรแกรมที่ออกแบบมาเพื่อใช้งานกับข้อมูลส่วนบุคคลที่ไม่จำเป็นต้องแบ่งปันให้กับผู้อื่น รวมถึงข้อมูลที่อาจจะมีความลับสูง (ถ้าต้องส่งผ่านอินเทอร์เน็ต ที่แม้จะเข้ารหัสไว้แล้ว แต่อาจจะถูกเจาะและถอดรหัสนำข้อมูลออกมาไปใช้ได้) เป็นต้น

ในการออกแบบระบบ Web Application ผู้ออกแบบพัฒนาอาจจะดึงเอาส่วนที่เว็บเซอร์เวอร์ จะต้องติดต่อกับเซอร์เวอร์ประเภทอื่น เช่นกับดาต้าเบสเซอร์เวอร์ โดยแบ่งส่วนดังกล่าวแยกออกมาตั้งเป็นเซอร์เวอร์ต่างหากที่ทำหน้าที่ติดต่อโดยเฉพาะ ดังตัวอย่างเช่น

จากรูป เราจะเห็นว่า ไคลเอนต์มีการเชื่อมต่อกับเว็บเซอร์เวอร์ และมีการส่งข้อมูลควบคุมการแสดงหน้าตาของเว็บรวมทั้งข้อมูลและ/หรือ การเรียกใช้เมธอดจากเว็บเซอร์เวอร์ แต่ข้อมูลที่จัดเก็บไว้ในดาต้าเบสเซอร์เวอร์นั้น เว็บเซอร์เวอร์จะไม่เข้าถึงโดยตรง โดยเว็บเซอร์เวอร์จะติดต่อร้องขอข้อมูลจากเซอร์เวอร์ที่ให้บริการเว็บเซอร์วิส และเว็บเซอร์วิสก็จะติดต่อกับดาต้าเบสเซอร์เวอร์อีกทีหนึ่ง การออกแบบลักษณะนี้เรียกว่า three-tier ซึ่งมีข้อดีคือ หากเว็บเซอร์เวอร์ถูกเจาะ แฮกเกอร์จะยังไม่ได้รายละเอียดในการล็อกอินเข้าสู่ดาต้าเบสเซอร์เวอร์ และเราสามารถเซ็ตไฟล์วอลล์ให้กับเว็บเซอร์เวอร์ที่ให้บริการเว็บเซอร์วิสรวมทั้งดาต้าเบสเซอร์เวอร์ และสามารถกำหนดไอพีที่จะติดต่อขอใช้เว็บเซอร์วิส ทำให้การเจาะระบบเป็นไปได้โดยลำบากมากขึ้น ส่งผลให้ระบบมีความปลอดภัยสูง รวมทั้งหากจะต้องการเปลี่ยนแปลงโครงสร้างฐานข้อมูล และกรรมวิธีการ query ฐานข้อมูล ก็สามารถกระทำได้โดยกระทำกับเว็บเซอร์วิสโดยไม่จำเป็นต้องไปกระทำกับเว็บเซอร์เวอร์ที่ติดต่อกับผู้ใช้ โดยเฉพาะถ้าออกแบบระบบโดยยึดหลักการออกแบบเชิงวัตถุอย่างเคร่งครัด จะทำให้การแก้ไขโค้ดบนเว็บเซอร์เวอร์ที่ติดต่อกับผู้ใช้น้อยที่สุดเมื่อต้องมีการเปลี่ยนแปลงวิธีการจัดการกับฐานข้อมูล

นอกจากนี้ เรายังอาจออกแบบระบบให้มีลักษณะผสมผสานได้ เช่น เราอาจออกแบบให้มีเว็บเซอร์วิสส่วนหนึ่งฝั่งอยู่ที่เว็บเซอร์เวอร์ที่ใช้ติดต่อกับผู้ใช้ และออกแบบ Web Application ที่กระทำงานอย่างใดอย่างหนึ่งโดยติดต่อกับเว็บเซอร์วิสดังกล่าว และออกแบบ Appplication ธรรมดาที่อาจจะเขียนด้วย C# C++ Delphi หรือภาษาอื่นใด ที่มีการติดต่อกับเว็บเซอร์วิสตัวเดียวกัน การออกแบบผสมผสานสองลักษณะนี้ ช่วยสร้างความยืดหยุ่นให้กับการออกแบบระบบซอฟต์แวร์ที่อาจจะต้องมีบริการบางตัวกระทำผ่านเว็บบราวเซอร์ และบริการบางตัวกระทำผ่าน Back Office หรือจากหน้าเคาน์เตอร์บริการของเจ้าหน้าที่ โดยทำให้เราสามารถออกแบบโค้ดให้ใช้ร่วมกันระหว่างเว็บและโปรแกรมที่รันบนเครื่องปกติได้ โดยหากมีการเปลี่ยนแปลงการประมวลผลในส่วนที่เป็นโค้ดที่ใช้ร่วมกัน ก็จะสามารถแก้ไขเพียงจุดเดียว และผลจะเกิดกับโปรแกรมทั้งสองประเภทโดยอัตโนมัติ

การทำงานของ Web Application นั้น โปรแกรมส่วนหนึ่งจะวางตัวอยู่บน Rendering Engine ซึ่งตัวRendering Engine จะทำหน้าที่หลักๆ คือนำเอาชุดคำสั่งหรือรูปแบบโครงสร้างข้อมูลที่ใช้ในการแสดงผล นำมาแสดงผลบนพื้นที่ส่วนหนึ่งในจอภาพ โปรแกรมส่วนที่วางตัวอยู่บน Rendering Engine จะทำหน้าที่หลักๆ คือการเปลี่ยนแปลงแก้ไขสิ่งที่แสดงผล จัดการตรวจสอบข้อมูลที่รับเข้ามาเบื้องต้น และการประมวลบางส่วน แต่ส่วนการทำงานหลักๆ จะวางตัวอยู่บนเซอร์เวอร์

ในลักษณะ Web Application แบบเบื้องต้น ฝั่งเซอร์เวอร์จะประกอบไปด้วยเว็บเซอร์เวอร์ ซึ่งทำหน้าที่เชื่อมต่อกับไคลเอนต์ตามโปรโตคอล HTTP/HTTPS โดยนอกจากเว็บเซอร์เวอร์จะทำหน้าที่ส่งไฟล์ที่เกี่ยวเนื่องกับการแสดงผลตามมาตรฐาน HTTP ตามปกติทั่วไปแล้ว เว็บเซอร์เวอร์จะมีส่วนประมวลผลซึ่งอาจจะเป็นตัวแปลภาษา เช่น Script Engine ของภาษา PHP หรืออาจจะมีการติดตั้ง .NET Framework ซึ่งมีส่วนแปลภาษา CLR (Common Language Runtime) ที่ใช้แปลภาษา intermediate จากโค้ดที่เขียนด้วย VB.NET หรือC#.NET หรืออาจจะเป็น J2EE ที่มีส่วนแปลไบต์โค้ดของคลาสที่ได้จากโปรแกรมภาษาจาวา เป็นต้น

3. ความแตกต่างระหว่าง web application กับ web services

ต่างกัน อันเนื่องจากจุดกำเนิด และ จุดประสงค์ของทั้งสองอย่างนั้น ต่างกัน Web Services นั้นเกิดมาจากการที่ Web Application ถูกพัฒนาได้จากหลาย ภาษา เช่น asp jsp php perl .... ทำให้การที่จะนำมารวมเพื่อร่วมทำงานด้วยกันนั้นเป็นเรื่องที่ยากลำบาก (เหมือนคุยกันคนละภาษา) Web Services จึงเหมือนกับภาษาสากล ที่ทำให้แต่ละ Web Application ทำงานร่วมกันได้ โดยผ่าน SOAP ที่มี รูปแบบเป็น XML ซึ่งเป็นเหมือนภาษาอังกฤษ เครื่องมือที่ใช้ในการสร้าง Web Services นั้น มีหลายตัว อาทิ เช่น AXIS วิธีทำนั้นก้อไม่ยาก ยิ่งถ้าใช้ IDE จะง่ายมากแค่ คลิ้กๆ ไม่กี่ทีก้อเสร็จแล้ว ความท้าทายไม่ได้อยู่ที่การสร้าง แต่กลับอยู่ที่การนำไปใช้มากกว่า
จากประสบการณ์ ณ ขณะนี้ ที่ใช้อยู่ พบปัญหาอยู่บ้าง เนื่องจากว่า SOAP นั้น จะวิ่งอยู่บน HTTP .... ทำให้ต้องเสีย overhead ในการ encode และ decode ข้อมูล (ถึงแม้ จะไม่กี่ millisecond ก้อตาม แต่เมื่อรวมกันเยอะๆ ก้อเป็น วินาที เหมือนกัน) ยิ่งถ้า บน HTTPS ละก้อไม่ต้องพูดถึงเลย จึงอยากจะบอกไว้ว่า ถ้าต้องการพัฒนา application ที่ต้องการความเร็วแล้ว ขอให้คิดมากๆ ก่อนที่จะใช้ Web Services

Web services

เป็น platform ในการแลกเปลี่ยนข้อมูลระหว่าง device
มี 2 แบบคือ SOAP และ REST แต่ SOAP ทุกวันนี้ไม่ค่อยได้เห็นแล้ว อาจจะมีใช้แต่ภายในองค์กร
สื่อสารกันด้วย message เช่น XML/JSON
ช่วงยุค Web 2.0 เราจะได้ยินคำว่า Web API ซึ่งมันก็คือ Web services นั่นเอง การแลกเปลี่ยนข้อมูลเดี๋ยวนี้นิยมใช้ JSON มากกว่า XML
ไม่จำเป็นต้องมี GUI ติดต่อกับ user เพราะจุดประสงค์ไม่ได้มีไว้ให้ end-user ใช้แต่ให้โปรแกรมหรือแอปฯ อื่นเรียกใช้อีกที
ยกตัวอย่างเช่น Twitter API, Facebook API, RSS feed

Web application

มันคือโปรแกรมประยุกต์เหมือนเราใช้โปรแกรมบน desktop แต่ย้ายมาอยู่บนเว็บใช้งานผ่าน browser แทน
ในแง่การใช้งานคนใช้งานคือ end-user จึงจำเป็นต้องมี GUI

ยกตัวอย่างเช่น Google maps, Google docs, โปรแกรมวาด chart Cacoo, Evernote on web, Youtube, etc.

4. ยกตัวอย่าง web application ที่สนใจ (รายละเอียดของระบบ, จุดเด่น, จุดด้อย, หากจะพัฒนาต่อจะพัฒนาต่ออย่างไร ใช้ภาษาอะไร เครื่องมืออะไร ฯลฯ)

web application ที่นำเสนอวันนี้ คิดว่าหลายๆคนคงจะรู้จัก และเคยลองสัมผัสกันมาบางแล้ว นั้นก็คือ google map แผนที่รอบโลก นั้นเอง

Google แผนที่ คือบริการแผนที่ซึ่งคุณสามารถดูในเว็บเบราว์เซอร์ของคุณ ขึ้นอยู่กับตำแหน่งของคุณ คุณสามารถดูแผนที่พื้นฐานหรือแผนที่ที่กำหนดเองและข้อมูลธุรกิจท้องถิ่น รวมถึงตำแหน่งของธุรกิจข้อมูลที่อยู่ติดต่อ และเส้นทางการขับขี่ด้วย คลิกและลากแผนที่เพื่อดูส่วนที่ติดกันได้ทันที ดูภาพจากดาวเทียมของตำแหน่งที่ต้องการ ซึ่งคุณสามารถขยายและกวาดดูได้

คู่มือนี้จะอธิบายให้ทราบว่าผู้ใช้ทุกคนที่มีการเชื่อมต่ออินเทอร์เน็ตและเว็บเบราว์เซอร์ที่สนับสนุน จะสามารถใช้บริการฟรีนี้ในคอมพิวเตอร์เดสก์ท็อปหรือแลปท็อปได้อย่างไร โปรดทราบว่าคุณลักษณะบางอย่างที่แนะนำไว้ในที่นี้อาจยังไม่มีให้ใช้งานในประเทศของคุณ

กูเกิลกำลังทำงานร่วมกับองค์กรต่างๆ ในประเทศไทย เพื่อพัฒนาและนำเสนอแมปเพล็ตเพิ่มเติมสาหรับเมืองไทย ซึ่งจะช่วยแบ่งปันข้อมูลที่หลากหลายและมีประโยชน์ ทั้งยังเชื่อมโยงผู้ใช้จาก Google Maps ไปยังเว็บไซต์ขององค์กรเหล่านี้ นอกจากนั้น กูเกิลยังเชิญชวนให้นักพัฒนาสร้างแมปเพล็ตของตนเอง และแบ่งปันร่วมกับผู้ใช้กูเกิลหลายล้านคนในประเทศไทยและประเทศอื่นๆ ทั่วโลก ข้อมูลเพิ่มเติมเกี่ยวกับแมปเพล็ตมีอยู่ที่: http://code.google.com/apis/maps/documentation/mapplets/

ประวัติ Google Maps กูเกิล อิงค์ (NASDAQ: GOOG) เปิดตัว Google Maps ประเทศไทย (http://maps.google.co.th) ซึ่งเป็นแพลตฟอร์มการค้นหาแบบใหม่ที่จะช่วยให้ผู้ใช้ชาวไทยสามารถค้นหาข้อมูลทางภูมิศาสตร์ เช่น แผนที่ออนไลน์ ภาพถ่ายดาวเทียม เส้นทางการขับรถ ที่อยู่ และรายชื่อองค์กรธุรกิจ บนเครื่องพีซีหรือโทรศัพท์มือถือ และเป็นภาษาไทย นอกจากนั้น แพลตฟอร์มการทางานร่วมกันแบบเปิดกว้างนี้เปิดโอกาสให้ผู้ใช้ องค์กรธุรกิจ และนักพัฒนาในเมืองไทยสามารถแลกเปลี่ยนแผนที่และความรู้เกี่ยวกับท้องถิ่น เพื่อสร้างภาพรวมของประเทศไทยตามมุมมองและประสบการณ์ของคนไทย ประเทศไทยเป็นประเทศแรกในภูมิภาคเอเชียตะวันออกเฉียงใต้ที่กูเกิลได้เปิดตัว Google Maps เวอร์ชั่นท้องถิ่น พร้อมข้อมูลเกี่ยวกับถนนหนทาง ที่อยู่ ของบริษัทห้างร้านและองค์กรธุรกิจหลายแสนแห่งทั่วประเทศ เพื่อให้ผู้ใช้สามารถค้นหาข้อมูลเกี่ยวกับท้องถิ่นได้อย่างสะดวกรวดเร็วและครบถ้วนสมบูรณ์ Google Maps จะแสดงชื่อสถานที่เป็นภาษาไทยและภาษาอังกฤษ เพื่อให้ชาวไทยและชาวต่างชาติสามารถสร้างข้อมูลและแบ่งปันให้คาแนะนาที่เป็นประโยชน์เกี่ยวกับเมืองไทย ซึ่งจะช่วยปรับปรุงคุณภาพของแผนที่ประเทศไทยที่ใช้งานง่ายและครบถ้วนสมบูรณ์มากที่สุด นอกเหนือจากการค้นหาพิกัดทางภูมิศาสตร์ในระดับท้องถิ่นแล้ว ข้อมูลและเครื่องมือบน Google Maps ประเทศไทย และเว็บไซต์ต่างๆ ยังผสานรวมอย่างกลมกลืนเข้ากับชีวิตประจาวันของผู้ใช้ชาวไทย องค์กรต่างๆ ในเมืองไทย เช่น HSBC (everydaydiningdelight.com), ไอซีเว็บ (bkkmenu.com), โครงการอันเนื่องมาจากพระราชดาริ , ไทยทิคเก็ตเมเจอร์, การท่องเที่ยวแห่งประเทศไทย, แวร์ อิน ไทยแลนด์ และสเปซ ไมเนอร์ สนับสนุนการพัฒนา Google Maps เพื่อให้ผู้ใช้สามารถค้นหาตาแหน่งขององค์กรธุรกิจและสถานที่ที่น่าสนใจ ตรวจสอบกิจกรรมและภาพยนตร์ที่กาลังฉายในละแวกใกล้เคียง แนะนาสถานที่ท่องเที่ยวให้แก่เพื่อนชาวต่างชาติ และแม้กระทั่งค้นหาร้านอาหารและร้านค้าต่างๆ

คุณพรทิพย์ กองชุน ผู้จัดการฝ่ายการตลาดประจาประเทศไทยของกูเกิล เอเชียตะวันออกเฉียงใต้ กล่าวว่า “เรารู้สึกยินดีที่ได้เพิ่มความสะดวกรวดเร็วให้แก่ผู้ใช้ในเมืองไทยสาหรับการค้นหาข้อมูลทางภูมิศาสตร์ในระดับท้องถิ่น ซึ่งจะสามารถนาไปใช้งานในชีวิตประจาวัน แพลตฟอร์มรุ่นใหม่นี้ยังช่วยให้ผู้ใช้ องค์กรธุรกิจ และนักพัฒนาสามารถนาเสนอและแลกเปลี่ยนข้อมูลเกี่ยวกับประเทศไทย เพื่อปรับปรุงคุณภาพของกูเกิล แมปส์อย่างต่อเนื่อง และเพื่อให้เป็นแผนที่ประเทศไทยแบบเสมือนจริงที่มีข้อมูลครบถ้วนและเหมาะสมที่สุดสาหรับคนไทยทุกคน”

“กูเกิลมุ่งเน้นการจัดระเบียบข้อมูลของโลกเพื่อให้สามารถเข้าถึงได้ง่ายและเป็นประโยชน์สาหรับทุกๆ คน การเปิดตัว Google Maps ประเทศไทย ในวันนี้ เป็นอีกย่างก้าวที่สาคัญในการช่วยให้ผู้ใช้ชาวไทยสามารถค้นหาข้อมูลทางภูมิศาสตร์ตามที่ต้องการเป็นภาษาไทย โดยคลิกเมาส์เพียงไม่กี่ครั้งเท่านั้น” มร. แอนดรู แมคกลินชีย์ ผู้จัดการฝ่ายการตลาดของกูเกิล เอเชียตะวันออกเฉียงใต้ กล่าว ไม่ว่าจะเพื่อการทางานหรือความบันเทิง Google Maps ประเทศไทย นาเสนอแพลตฟอร์มแบบเปิดที่รองรับการทางานร่วมกันได้อย่างยืดหยุ่นสาหรับผู้ใช้ องค์กรธุรกิจ และนักพัฒนา

ฟีเจอร์สาคัญที่จะเป็นประโยชน์แก่ผู้ใช้ชาวไทย ได้แก่: ค้นหาตาแหน่ง: เพียงแค่พิมพ์ที่อยู่หรือชื่ออาคาร ผู้ใช้ก็จะไปยังปลายทางที่ต้องการบนแผนที่หรือภาพถ่ายดาวเทียม ตัวอย่างเช่น ลองตรวจสอบสวนลุมพินี, สยามสแควร์ ซอย 3, ปาย และแม้กระทั่งวัดร่องขุ่น จังหวัดเชียงราย

„ ขอเส้นทาง: ผู้ใช้สามารถค้นหาเส้นทางระหว่างตาแหน่งที่ตั้งสองแห่งขึ้นไป และสามารถคลิกและลากเส้นทางเพื่อเปลี่ยนแปลง นอกจากนี้ผู้ใช้ยังสามารถพิมพ์เส้นทางดังกล่าว ขอเส้นทางสาหรับการเดินทางกลับ หรือเปลี่ยนแปลงเส้นทางเพื่อหลีกเลี่ยงทางด่วนที่ต้องเสียค่าธรรมเนียม ตัวอย่างเช่น คุณสามารถค้นหา “สนามหลวง” และขอเส้นทางมาจากถนนแจ้งวัฒนะ

„ ค้นหาธุรกิจ: ผู้ใช้สามารถค้นหาองค์กรธุรกิจ โดยเพียงแค่พิมพ์ชื่อหรือประเภทธุรกิจ รายชื่อองค์กรธุรกิจ พร้อมสถานที่ตั้ง ที่อยู่ หมายเลขโทรศัพท์ และแม้กระทั่งเว็บไซต์ขององค์กรนั้นๆ ก็จะปรากฏขึ้น และจากนั้นผู้ใช้จะสามารถคลิกที่ชื่อธุรกิจเพื่อดูตาแหน่งบนแผนที่ ตัวอย่างเช่น ลองค้นหาคาว่า “ร้านหนังสือ” เพื่อแสดงรายชื่อธุรกิจที่เกี่ยวข้องกับร้านหนังสือ หรือค้นหา “ซีเอ็ด บุ๊คเซ็นเตอร์”” เพื่อดูสถานที่ตั้ง ที่อยู่ และรายละเอียดติดต่อของ แต่ละร้านบนแผนที่ ด้วยดัชนีเว็บเพจหลายพันล้านรายการของกูเกิล และความร่วมมือกับผู้ให้บริการข้อมูลในท้องถิ่น เช่น แวร์ อิน ไทยแลนด์, สเปซ ไมเนอร์, ไอซีเว็บ (bkkmenu.com) และ HSBC (everydaydiningdelight.com) ทาให้ผลลัพธ์การค้นหาตาแหน่งทางภูมิศาสตร์ประกอบด้วยข้อมูลต่างๆ ที่เกี่ยวข้อง เช่น ภาพถ่าย วิดีโอ เมนู บทวิจารณ์ และข้อมูลอื่นๆ ที่เป็นประโยชน์

„ แผนที่ของฉัน: ฟีเจอร์แผนที่ของฉัน (My Maps) ช่วยให้ผู้ใช้สามารถสร้างแผนที่แบบกาหนดเองได้อย่างสะดวกและรวดเร็วสาหรับการใช้งานส่วนตัวหรือแบ่งปันกับคนอื่นๆ ผู้ใช้จะสามารถปรับแต่งแผนที่ของตนเองโดยใช้เครื่องหมายต่างๆ ในแผนที่ของฉัน หรือเพิ่มข้อความ ภาพถ่าย และวิดีโอลงในแผนที่ นอกจากนี้ยังสามารถวาดเส้นและรูปร่างเพื่อเน้นเส้นทางและพื้นที่ หรือเพิ่ม HTML เพื่อปรับแต่งแผนที่เพิ่มเติม ผู้ใช้สามารถเลือกที่ซ่อนแผนที่ของตนเองหรือแบ่งปันกับคนอื่นๆ ผ่านทางการค้นหา แผนที่ของฉันเปิดโอกาสให้ผู้ใช้ได้สร้างแผนที่ที่มีเนื้อหามากมายตามความสนใจ ประสบการณ์ และความต้องการส่วนตัว เช่น แผนที่แสดงร้านอาหารที่โปรดปราน หรือแผนที่แสดงสถานที่ท่องเที่ยวที่ชื่นชอบเป็นพิเศษ นอกจากนั้น ยังสามารถสร้างแผนที่ของฉันเพื่อแบ่งปันข้อมูลทางภูมิศาสตร์ร่วมกับผู้ใช้ Google Maps คนอื่นๆ ได้อีกด้วย ตัวอย่างเช่น Thailandtourism.org ได้สร้างแผนที่ซึ่งประกอบด้วยสถานที่ท่องเที่ยว 3,000 แห่ง แผนที่ดังกล่าวจะเป็นประโยชน์แก่นักท่องเที่ยวชาวไทยและชาวต่างชาติที่ต้องการวางแผนการเดินทางไปยังสถานที่ต่างๆ ในเมืองไทย อีกตัวอย่างหนึ่งก็คือ แผนที่ของโครงการอันเนื่องมาจากพระราชดาริ ซึ่งจะช่วยให้นักเรียนนักศึกษาได้เรียนรู้เกี่ยวกับโครงการต่างๆ ตามพระราชดาริ เช่น โครงการเขื่อนป่าสักชลสิทธิ์ เป็นต้น

„ Google Maps สาหรับอุปกรณ์พกพา: Google Maps สาหรับอุปกรณ์พกพา (Google Maps for Mobile) ขยายขีดความสามารถด้านการค้นหาแบบไดนามิกของ Google Maps ประเทศไทย ไปสู่โทรศัพท์มือถือ ช่วยให้ผู้ใช้สามารถค้นหาที่อยู่และตรวจสอบแผนที่ในขณะเดินทาง Google Maps for Mobile สามารถดาวน์โหลดบนโทรศัพท์มือถือของคุณได้ฟรี ที่ http://m.google.co.th อย่างไรก็ตาม ผู้ให้บริการโทรคมนาคมอาจคิดค่าธรรมเนียมในการถ่ายโอนข้อมูลสาหรับการดาวน์โหลดหรือการใช้งานผลิตภัณฑ์ องค์กรธุรกิจและนักพัฒนาจะสามารถใช้ฟีเจอร์สำคัญๆ ดังต่อไปนี้: ? ศูนย์ธุรกิจท้องถิ่น: ศูนย์ธุรกิจท้องถิ่น (Local Business Center) ช่วยให้องค์กรและบริษัทต่างๆ ของไทยสามารถเพิ่มรายชื่อธุรกิจของตนไว้บน Google Maps ได้ฟรี เพื่อให้ผู้ใช้สามารถ “ค้นพบ” บริษัทนั้นๆ ได้บนแผนที่ของกูเกิล เครื่องมือสาหรับการสร้างโอกาสทางธุรกิจโดยไม่ต้องเสียค่าใช้จ่ายใดๆ นี้เป็นประโยชน์อย่างมากต่อองค์กรธุรกิจขนาดกลางและขนาดย่อม ขั้นตอนการลงทะเบียนก็ง่ายดาย เพียงคลิกไปที่ google.co.th/local/add เพื่อเพิ่มชื่อธุรกิจของคุณ และคุณก็ไม่ต้องเป็นกังวลเกี่ยวกับเนื้อหาที่ไม่อัปเดตหรือกำหนดเวลาสิ้นสุดการเผยแพร่ข้อมูลอีกต่อไป ทุกสิ่งทุกอย่างสามารถดาเนินการได้บนระบบออนไลน์ โดยบริษัทต่างๆ จะสามารถอัปเดตรายละเอียดเกี่ยวกับธุรกิจ เช่น ข้อมูลติดต่อ เวลาเปิดทาการ และข้อมูลอื่นๆ ที่เป็นประโยชน์ บน Google Maps ได้อย่างสะดวกและรวดเร็ว ทุกที่ ทุกเวลา Maps API: Maps API เป็นชุดเครื่องมือฟรีที่ใช้ Javascript หรือ Flash ช่วยให้สามารถฝัง Google Maps ไว้บนเว็บไซต์อื่นๆ แผนที่แบบฝังตัวนี้จะสามารถทางานแบบอินเทอร์แอคทีฟได้อย่างสมบูรณ์ ทั้งยังรองรับการปรับแต่งตามต้องการ เช่น เพิ่มไอคอนระบุตาแหน่งที่ตั้ง ภาพถ่าย และ “หน้าต่างข้อมูล” แบบเงา เพื่อแสดงข้อมูลเพิ่มเติมที่มีประโยชน์ สาหรับองค์กรธุรกิจของไทย Maps API จะช่วยให้บริษัทสามารถสร้างประสบการณ์ที่ดีต่อลูกค้าเมื่อลูกค้าเยี่ยมชมเว็บไซต์ของบริษัท ทั้งยังช่วยเพิ่มความน่าสนใจให้กับเว็บไซต์เพื่อสร้างโอกาสใหม่ๆ ทางด้านธุรกิจ ตัวอย่างของเว็บไซต์ท้องถิ่นที่ใช้ Maps API อยู่ในขณะนี้ ได้แก่ everydaydiningdelight.com, bkkmenu.com และ thailandtourism.org

Maps API ทาให้โปรแกรมคอมพิวเตอร์แบบกาหนดเองสามารถโต้ตอบกับระบบ Google Maps ซึ่งนับเป็นเครื่องยืนยันถึงความมุ่งมั่นอย่างต่อเนื่องของกูเกิลในการส่งเสริมนวัตกรรมและการให้ความช่วยเหลือแก่ชุมชนนักพัฒนา อ่านรายละเอียดเพิ่มเติมเกี่ยวกับ Maps API ได้ที่ http://code.google.com/apis/maps/

แมปเพล็ต: แมปเพล็ต (Mapplet) คือโปรแกรมขนาดเล็กที่พัฒนาโดยบุคคลอื่น และสามารถเพิ่มลงในGoogle Maps ประเทศไทยได้โดยตรง ด้วยการคลิกเมาส์เพียงครั้งเดียว ผู้ใช้ก็จะสามารถปรับแต่ง Google Maps ด้วยการเพิ่มเติมเครื่องมือที่เป็นประโยชน์ซึ่งสร้างขึ้นสาหรับประเทศไทยโดยเฉพาะ เช่น ตารางเวลาการฉายภาพยนตร์ สาหรับค้นหารายชื่อภาพยนตร์ที่กำลังฉายอยู่ในปัจจุบัน ตามตำแหน่งที่ตั้งของโรงภาพยนตร์ รวมถึงรายการกิจกรรมจากไทยทิคเก็ตเมเจอร์ (thaiticketmajor.com) สาหรับค้นหากิจกรรมที่น่าสนใจ เช่น แม่นาคพระโขนง เดอะมิวสิคัล โดยแสดงข้อมูลตามชื่อกิจกรรมหรือหมวดหมู่

Google map

ข้อดี

- สามารถดูแผนที่ที่เราสนใจได้

- เพื่อความสะดวกก่อนการเดินทางไปที่ไหน

- การดูสภาพพื้นที่ที่เราจะไป

- สามารถดูการจราจรได้

- ดูภาพถนนหนทางในภาพจริงได้

ข้อเสีย

- POI น้อยไปหน่อยเหมาะกับไว้ดูถนนหนทางมากกว่าสถานที่

- ต้องต่อเน็ต (GPRS/EDGE/Wifi/3G) ตลออดเวลา เพราะไม่มีแผนที่ในตัวเอง ต้องโหลดมาแสดงผลตลอดเวลา

ต้องการพัฒนาต่อ ก็คือ ป้อนข้อมูลเกี่ยวกับสถานที่เพิ่มมากขึ้น ค้นหาข้อมูลเกี่ยวกับสถานที่ต่าง ๆ แล้วทำฐานข้อมูลลงบน google map

ภาษาที่ใช้ในการพัฒนาต่อ

1. html/ xhtml

2. Javascript

3. PHP

ตัวอย่างวิธีการสร้าง แผนที่

เริ่มต้นการ Google Map API
ก่อนอื่นเราต้องทำการยื่นคำขอ API Key สำหรับ URL ของเว็บไซต์ที่จะใช้บริการ Google Maps API เว็บไซต์นั้นเป็นที่ที่เราจะนำเว็บเพจที่มี Google Maps เป็นองค์ประกอบไปวางไว้ หากไม่ใส่ API Key ลงไปจะไม่สามารถใช้บริการ Google Maps API ได้
(URL ที่ยื่นคำขอรับ API Key:- http://www.google.com/apis/maps/signup.html)
*แต่ถ้ารันบนเครื่องผู้ใช้เอง(localhost)ยังไม่จำเป็นต้องใส่ API Key ก็ได้
เค้าโครงของแฟ้มข้อมูล HTML สำหรับการสร้าง Google Maps API อย่างง่าย

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>My Google Maps Mash-up</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg..." type="text/javascript"></script>
</head>
<body onload='initialize()' onunload='unloadGmap()'>


</body>
</html>

ผมจะขอข้ามข้อมูลเบื่องต้นทั้งหมดไปแล้วเริ่มอธิบาย API ที่ผมใช้หลักๆเพื้อใช้ในการแสดงผล และเชื่อมต่อฐานข้อมูลเลย
เพราะว่าข้อมูลทั่วไปได้มีผู้จัดทำไว้แล้วให้เข้าไปลองศึกษาได้ที่
http://www.lecturer.eng.chula.ac.th/fsvskk/gglmap2/get-start-gmap-apiv2.html)
API ในการใช้เพื่อหาพิกัดบนแผนที่
ตัวอย่างที่ 1 เมื่อมีการขยับแผนที่ให้เก็บค่าจุดกลางแผนที่แล้วทำการแสดงผลค่า Lat Lng อยู่ใต้แผนที่

GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
document.getElementById("message").innerHTML = center.toString();
});

ในส่วนของbodyให้ใส่ <div id="message"></div>เพื่อแสดงผลได้เลย
คลิกเพื่อดูผลงานตัวอย่างที่ 1 ที่ทำเสร็จแล้ว
*ถ้าต้องการโหลดไปเก็ไว้หรือเพื่อดูโคดให้กดคลิกขวาเลือก Save Target As
ตัวอย่างที่ 2 เมื่อคลิกบนแผนที่ให้แสดงหน้าต่างขึ้นมาเพื่อบอกค่าพิกัด

GEvent.addListener(map,"click", function(overlay,latlng) {
if (overlay) {
return;
}
var tileCoordinate = new GPoint();
var tilePoint = new GPoint();
var currentProjection = G_NORMAL_MAP.getProjection();
tilePoint = currentProjection.fromLatLngToPixel(latlng, map.getZoom());
tileCoordinate.x = Math.floor(tilePoint.x / 256);
tileCoordinate.y = Math.floor(tilePoint.y / 256);
var myHtml = "Latitude: " + latlng.lat() + "<br/>Longitude: " + latlng.lng() +
"<br/>The Tile Coordinate is:<br/> x: " + tileCoordinate.x +
"<br/> y: " + tileCoordinate.y + "<br/> at zoom level " + map.getZoom();
map.openInfoWindow(latlng, myHtml);
});

คลิกเพื่อดูผลงานตัวอย่างที่ 2 ที่ทำเสร็จแล้ว

ตัวอย่างที่ 3 ทำการส่งค่าตำแหน่งที่ทำการคลิก เพื่อส่งข้อมูลไปที่หน้าต่อไป โดยในตัวอย่างนี้จะส่งค่า lat และ lng

*ในหน้าที่รับค่าจะต้องทำการกระกาศค่าตัวแปรก่อนเพื่อให้เรียกใช้งานได้เช่นจากตัวอย่างนี้ส่งค่า lat และ lng ก็ให้ประกาศก่อนด้วยว่า

<?php
$lat = $_GET["lat"];
$lng = $_GET["lng"];
?>

คลิกเพื่อดูผลงานตัวอย่างที่ 3 ที่ทำเสร็จแล้ว
หน้าคลิกเลือกตำแหนง
หน้ารับค่า
การสร้างและปรับแต่ง Marker
ตัวอย่างที่ 4 การสร้าง Marker ด้วยการคลิกบนแผนที่มีคำสั่งในการใช้งานดังนี้

GEvent.addListener(map, "click", function(marker, point) {
map.addOverlay(new GMarker(point));});

map.addOverlay(new GMarker(point)); คือคำสังใหนการสร้างMarkersซึ่งเราสามารถปรับแต่งMarkersได้เองได้ดังตัวอย่าง
var icongreen = new GIcon();
icongreen.image = 'http://newsirius13.thport.com/picture/c003.png';
icongreen.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
icongreen.iconSize = new GSize(20, 22);
icongreen.shadowSize = new GSize(1, 1);
icongreen.iconAnchor = new GPoint(12, 8);
icongreen.infoWindowAnchor = new GPoint(5, 1);

GEvent.addListener(map, "click", function(marker, point) {
map.addOverlay(new GMarker(point, icongreen));});

ในตัวอย่างนี้จำทำการสร้างตัวแปลขึ้นมา1ตัว ชื่อ icongreen เพื่อเก็บการตั้งค่าต่างๆของ Markers และเรียกใช้โดย
ให้ใส่ตัวแปลลงไปในคำสังสร้างMarkerนั้นคือ new GMarker(point, "ใส่ตัวแปลที่ต้องการ(ในตัวอย่างคือicongreen)") ก็จะได้ Markersตามรูปแบบที่เราได้ปรับแต่งตามต้องการ
คลิกเพื่อดูผลงานตัวอย่างการสร้างและMarkerที่โดนปรับแต่ง(ให้กดคลิกบนแผนที่จะทำการสร้างMarker ขึ้นมา)
การเชื่อมต่อฐานข้อมูล เพื่อแปลงMysql ให้เป็นไฟร์ Xml เพื่อใช้ในการสร้าง Marker บนแผนที่
ตัวอย่างที่ 5 การเชื่อมต่อฐานข้อมูล
เพื่อความสะดวกจึงขอแนะนำให้สร้างไฟร์ประกาศตัวแปลสำหรับเชื่อมต่อMysql แยกไว้1ไฟร์โดยสมมุติว่าชื่อ phpsql_dbinfo.php เมื่อต้องการใช้ก็ให้ทำการ require("phpsqlinfo_dbinfo.php"); โดยประกาศตัวแปลดังนี้ (สมมุติว่าใช้บน localhost)
(โหลดหน้า phpsqlinfo_dbinfo.php)

<?
$username="(ปกติรันบนlocalhostมักจะเป็นคำว่า root)";
$password="(ใส่ตามที่ตั้งไว้)";
$database="(ใส่ชื่อฐานข้อมูล)";
$hostname = "(ปกติรันบนlocalhostก็ใช้คำว่าlocalhost)";
?>

กับการทดสอบเล็กๆอาจไม่มีปัญหาแต่เพื่อความสะดวกในการแก้ไขเมื่อระบบมีความใหญ่มากขึ้นก็ควรทำแยกไว้

ตัวอย่างที่ 6 การเปลี่ยนจากฐานข้อมูลMysql ให้เป็น Xml (โดนในที่นี้คือไฟร์ phpsqlajax_markers.php ซึ่งจะถูกเรียกใช้ในตัวอย่างต่อๆไป)
(โหลดหน้า phpsqlajax_markers.php )

<?php
require("phpsqlinfo_dbinfo.php");

function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','<',$htmlStr);
$xmlStr=str_replace('>','>',$xmlStr);
$xmlStr=str_replace('"','"',$xmlStr);
$xmlStr=str_replace("'",''',$xmlStr);
$xmlStr=str_replace("&",'&',$xmlStr);
return $xmlStr;
}

$connection=mysql_connect ($hostname, $username, $password);
mysql_query("SET NAMES UTF8",$connection);
if (!$connection) {
die('Not connected : ' . mysql_error());
}

$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
die ('Can\'t use db : ' . mysql_error());
}

$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");

// Start XML file, echo parent node

echo '<markers>';

// Iterate through the rows, printing XML nodes for each

while ($row = @mysql_fetch_assoc($result)){

// ADD TO XML DOCUMENT NODE

echo '<marker ';
echo 'name="' . parseToXML($row['name']) . '" ';
echo 'address="' . $row['address'] . '" ';
echo 'lat="' . $row['lat'] . '" ';
echo 'lng="' . $row['lng'] . '" ';
echo 'type="' . $row['type'] . '" ';
echo '/>';

}

// End XML file
echo '</markers>';
?>

จากตัวอย่างจะเห็นได้ว่าเมื่อเชื่อมต่อแล้วประกาศ header("Content-type: text/xml");แล้วก็จะสามารถใส่เงื่อนไขการแสดงข้อมูลออกมาได้ตามควมต้องการ
***หมายเหตุ การส่งข้อมูลไปเก็บที่ Mysql และการเรียกใช้ข้อมูลจาก Mysql ที่เป็นภาษาไทยไม่ให้ภาษาผิดเพี้ยนให้ใส่tagคำสั่ง
mysql_query("SET NAMES UTF8",$con); ลงไปหลังคำสั่งเชื่อมต่อ mysql_connect
****และต้องกำหนดตัวอักษรของฐานข้อมูลเป็นประเภท UTF8 เท้านั้น(จะเป็นUTF8แบบใหนก็ได้)
การบันทึกลงฐานข้อมูล
การบันทึกลงฐานข้อมูลมี2วิธีหลักๆคือ
1.ส่งค่าละติจูต และ ลองติจูต ไปอีกหน้าเพื่อกรอกข้อมูลที่เหลือแล้วค่อยทำการบันทึกข้อมูล
2.บันทึกการกรอกข้อมูลจากหน้าแสดงแผนที่

ก่อนอื่นเริ่มต้นการสร้างฐานข้อมูลขึ้นมาก่อนดั่งตัวอย่าง
(โหลดไฟร์Mysql phpsqlinfo_createtable.sql:)

CREATE TABLE `markers` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`name` VARCHAR( 60 ) NOT NULL ,
`address` VARCHAR( 80 ) NOT NULL ,
`lat` FLOAT( 10, 6 ) NOT NULL ,
`lng` FLOAT( 10, 6 ) NOT NULL ,
`type` VARCHAR( 30 ) NOT NULL
) ENGINE = MYISAM ;

ตัวอย่างที่ 7 ส่งค่าละติจูต และ ลองติจูต ไปอีกหน้าเพื่อกรอกข้อมูลที่เหลือแล้วค่อยทำการบันทึกข้อมูล
ในตัวอย่างที่ 7 นี้ให้ย้อนกลับไปดูตัวอย่างที่ 3 เพราะในตัวอย่างที่3เราสามารถส่งค่า ละติจูต และ ลองติจูตไปสู่หน้าต่อไปได้แล้ว ซึ่งที่เหลือคือการออกแบบหน้ากรอกข้อมูล และหน้าเชื่อต่อฐานข้อมูล ซึางผมขอยกตัวอย่างง่ายๆเช่น
หน้าแผนที่ที่จะทำการส่งค่าละติจูต และ ลองติจูต ในตัวอย่างนี้ขอตั้งชื่อว่า ex_7.php
(โหลดหน้า ex_7.php)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>ตัวอย่างที่3</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAKaJQ6galA0QmFhNdQzYuwRQnaT__a1y-hZdnJBN4Ggj_4W3wVRTkKlGxp0EJvRTbiAqcn-FCYSTDog"
type="text/javascript"></script>
<script src="js/gmaps.CircleOverlay.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var geocoder;

map.openInfoWindow(latlng, myHtml);
}
});
}

function Addpoint(lat,lon){
window.location="ex_7b.php?lat="+lat+"&lng="+lon;
}
//]]>

</script>
<style type="text/css">

</style></head>
<body onload="load(),initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 600px; height: 400px"></div>
</body>
</html>

เมื่อสร้างหน้าส่งค่าเสร็จแล้วให้สร้างหน้ารับค่าเพื่อกรอกข้อมูลเพิ่มเติ่มขึ้นมา ให้ตั้งชื่อว่า ex_7b.php ซึ่งมีโคดตามข้างล้างนี้
โดยตั้งแต่ส่วนนี้ที่เหลือจะเป็นรูปแบบ php ปกติทั้งหมดจึงง่ายต่อการเขียนโปรแกรม(โดนสวนตัวผู้ทำเวบนี้ชอบวิธีนี้มากกว่าเลยใช้วิธีนี้เป็นหลัก)
(โหลดหน้า ex_7b.php )

<?php
$lat = $_GET["lat"];
$lng = $_GET["lng"];
?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>เพิ่มข้อมูลฟาร์มไก่</title>
<style type="text/css">

</style></head>

<body>
<form action="ex_7c.php" method="get">
<table width="442" height="0" border="0" align="center" cellpadding="2">
<tr>
<td width="143" align="right" valign="top">ชื่อ</td>
<td width="300" valign="top"><div align="left" >
<input type="text" name="fname" value= ""/>
</div></td>
</tr>
<tr>
<td align="right" valign="top">ประเภท</td>
<td valign="top">
</span>
<label>
<input name="type" type="radio" value="เปิด" checked>
เปิด</label>
<label>
<input name="type" type="radio" value="ปิด">
ปิด</label></td>
</tr>
<tr>
<td align="right" valign="top">ที่อยู่</td>
<td valign="top"><div align="left">
<textarea name="faddress" cols="30" rows="10" class="textarea" >Address</textarea>
</div></td>
</tr>
<tr>
<td align="right" valign="top">ละติจูต</td>
<td valign="top"><div align="left">
<input type="text" name="flat" value=<? echo $lat ?> />
</br>
</div></td>
</tr>
<tr>
<td align="right" valign="top">ลองติจูต</td>
<td valign="top"><div align="left">
<input type="text" name="flng" value=<? echo $lng ?> />
</br>
</div></td>
</tr>
<tr>
<td colspan="2" align="center"><div align="center">
<input type="submit" name="button" value="ทำการเพิ่มรายชื่อฟาร์ม" />
</div></td>
</tr>
</table>
</form>
</body>
</html>

และสุดท้าย ให้สร้างหน้าphpเพื่อทำการบันทึกข้อมูลลงMysql ในตัวอย่างนี้ให้มีชื่อว่า ex_7c.php
(โหลดหน้า ex_7c.php)

<?php

require("phpsql_dbinfo.php");
$con =mysql_connect ($hostname, $username, $password);
mysql_query("SET NAMES UTF8",$con);

if (!$con) { die('ติดต่อฐานข้อมูลไม่ได้: ' . mysql_error());
}
mysql_select_db($database, $con);

$sql = mysql_query("INSERT INTO markers (name, address, type, flat, flng)
VALUES('$_GET[name]','$_GET[address]','$_GET[type]',$_GET[flat],$_GET[flng]) ");

<div align="center">
<p><label></label>  </p>
<table width="200" border="0">
<tr>
<td><div align="center"> บันทึกข้อมูลเรียบร้อย </a></div></td>
</tr>
</table>
<p> </p>
</div>

***หมายเหตุ การส่งข้อมูลไปเก็บที่ Mysql และการเรียกใช้ข้อมูลจาก Mysql ที่เป็นภาษาไทยไม่ให้ภาษาผิดเพี้ยนให้ใส่tagคำสั่ง
mysql_query("SET NAMES UTF8",$con); ลงไปหลังคำสั่งเชื่อมต่อ mysql_connect
****และต้องกำหนดตัวอักษรของฐานข้อมูลเป็นประเภท UTF8 เท้านั้น(จะเป็นUTF8แบบใหนก็ได้)

ตัวอย่างที่ 8 การบันทึกค่าจากหน้าแผนที่
ในตัวอย่างที่8นี้อาจดูซับซ้อนแต่มีความสะดวกสบายมากกว่าเมื่อเทียบกับตัวอย่างที่7
เริ่มต้นสร้างไฟร์ php เพื่อใช้บันทึกข้อมูลลงฐานข้อมูล Mysql ขึ้นมาก่อนในตั้วอย่างตั้งชื่อไฟร์ว่า phpsqlinfo_addrow.php
(โหลดไฟร์ php phpsqlinfo_addrow.php)

<?php
require("phpsqlinfo_dbinfo.php");

// Gets data from URL parameters
$name = $_GET['name'];
$address = $_GET['address'];
$lat = $_GET['lat'];
$lng = $_GET['lng'];
$type = $_GET['type'];

// Opens a connection to a MySQL server
$connection=mysql_connect ("localhost", $username, $password);
if (!$connection) {
die('Not connected : ' . mysql_error());
}

// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
die ('Can\'t use db : ' . mysql_error());
}

// Insert new row with user data
$query = sprintf("INSERT INTO markers " .
" (id, name, address, lat, lng, type ) " .
" VALUES (NULL, '%s', '%s', '%s', '%s', '%s');",
mysql_real_escape_string($name),
mysql_real_escape_string($address),
mysql_real_escape_string($lat),
mysql_real_escape_string($lng),
mysql_real_escape_string($type));

$result = mysql_query($query);

if (!$result) {
die('Invalid query: ' . mysql_error());
}
?>

สร้างหน้าแสดงแผนที่ ที่ใช้ในการบันทึกค่าโดยตั้งชื่อว่า phpsqlinfo_add.html โดยมีAPI สำคัญดั่งนี้
(โหลดไฟร์ html phpsqlinfo_add.html):

var marker;

GEvent.addListener(map, "click", function(overlay, latlng) {
if (latlng) {
marker = new GMarker(latlng, {draggable:true});
GEvent.addListener(marker, "click", function() {
var html = "<table>" +
"<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" +
"<tr><td>Address:</td> <td><input type='text' id='address'/></td> </tr>" +
"<tr><td>Type:</td> <td><select id='type'>" +
"<option value='bar' SELECTED>bar</option>" +
"<option value='restaurant'>restaurant</option>" +
"</select> </td></tr>" +
"<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";

marker.openInfoWindow(html);
});
map.addOverlay(marker);
}
});

จากตัวอย่างจะเห็นว่าทำการสร้างหน้าต่าง html ขึ้นมาเมื่อมีการคลิกที่แผนที่ โดยสร้างตารางกรอกข้อมูลขึ้นมาในตัวแปล html แล้วทำการแสดงผลด้วยคำสั่ง marker.openInfoWindow(html); จากนั้นสร้าง function saveData ขึ้นมาเพื่อทำการบันทึกข้อมูลที่กรอกรลงในหน้าต่าง html และให้ตัวแปล url สร้างแอสเดสเพื่อส่งข้อมูล โดยในต้วอย่างคือ var url = "phpsqlinfo_addrow.php?.....และใช้ GDownloadUrl(url, function(data, responseCode) เพื่อทำการโหลดตัวแปล url ที่เราสร้างขึ้นมาเพื่อทำการส่งข้อมูลไปบัททึกตามแอดเดสที่ตัวแปล url สร้างไว้

การสร้าง Marker จากฐานข้อมูล

ตัวอย่างที่ 9 การสร้างตำแหน่ง Marker(จุดบนแผนที่) และ sidebar(แถบแสดงข้อมูลจุดบนแผนที่) บนแผนที่จากฐานข้อมูล

GDownloadUrl("phpsqlajax_markers.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
var sidebar = document.getElementById('sidebar');
sidebar.innerHTML = '';
if (markers.length == 0) {
sidebar.innerHTML = 'No results found.';
return;
}
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = "cross";
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, name, address, type);
map.addOverlay(marker);
var sidebarEntry = createSidebarEntry(marker, name, address);
sidebar.appendChild(sidebarEntry);
bounds.extend(point) ;
}
});
}

function createMarker(point, name, address, type) {
var marker = new GMarker(point, customIcons[type]);
var html = "<b>ชื่อสถานที่ : " + name + "</b> <br/>ที่อยู่ : " + address;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
}); return marker;
}

function createSidebarEntry(marker, name, address) {
var div = document.createElement('div');
var html = "<b>ชื่อ : " + name + "</b> <br/>ที่อยู่ : " + address ;
div.innerHTML = html;
div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
GEvent.addDomListener(div, 'click', function() {
GEvent.trigger(marker, 'click');
});
GEvent.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#eee';
});
GEvent.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#fff';
});
return div;
}

จากโคดตัวอย่างนี้จะทำการโหลดข้อมูลจาก phpsqlajax_markers.php(ตัวอย่างที่6) ขึ้นมาโดยข้อมูลที่มาจาก phpsqlajax_markers.php จะถูกเปลี่ยนจาก Mysql ให้อยู่ในรูปแบบของ Xml เพื่อทำการสร้าง Marker ขึ้นมาบนแผนที่ โดยข้อมูลจะถูกสร้างขึ้นมาและเก็บไว้ที่ตัวแปล sidebar เพื่อเก็บไว้ใช้แสดงข้อมูล โดยคำสั่งfor (var i = 0; i < markers.length; i++) จะทำการวนลูปสร้าง พิกัดขึ้นมาจนครบ โดยผู้ใช้จะต้องประกาศตัวแปล ที่ผู้ส่งมาจาก phpsqlajax_markers.php ก่อนเพื่อใช้งาน โดนในตัวอย่างที่ 5 จะเรียก name(ชื่อ), address(ที่อยู่), type(รูปแบบmarkerที่ให้แสดง) และ point(พิกัด) เพื่อสำหรับเรียกใช้งานการแสดงผลของฟังชั้นcreateMarkerและ createSidebarEntry
function createMarker เพื้อใช้ในการแสดงผล Marker ออกมาด้วยคำสั่ง map.addOverlay(marker); และ
function createSidebarEntry เพื้อสร้างการแสดงผลในส่วน body ของ Html เพื่อเรียกใช้งานได้ให้ไปสู่พิกัดที่เก็บไว้ได้ทันที่เมื่อเลือก
คลิกเพื่อดูผลงานตัวอย่างที่ 9 ที่ทำเสร็จแล้ว
ดูผลงานของผู้พัฒนาระบบ
โหลดตัวอย่างเพื่อติดตั้งและทดสอบด้วยตัวเอง โดยจะมีตัว importMysql และไฟร์ต่างๆที่ต้องใช้
(การใช้งานให้เอาไฟร์thpor_3594038_demo.sql ทำการimportMysql และแก้ไขข้อมูลการเชื่อมต่อที่ไฟร์ phpsql_dbinfo.php )
การค้นหาสถานที่บนแผนที่ และฐานข้อมูล
การค้นหาจะแบ่งออกเป็น 2 แบบคือค้นหาจากฐานข้อมูลของGoogle Map และ การค้นหาจากฐานข้อมูล Mysql ที่ต้องใช้ในการค้นหา
ตัวอย่างที่ 10 การค้นหาสถาที่ หรือที่อยู่บนแผนที่ ด้วย Google API เพื่อหาจากฐานข้อมูลของ Google Map
1.สร้างตัวรับข้อมูลการพิมพ์

จากตัวอย่างข้างบนเป็นการสร้างฟอร์มตัวรับการพิมพ์ข้อมูลเพื่อไปทำการค้นหาที่ฟังชั้น showAddress
2.สร้าง API ในการค้นหา

จากตัวอย่างจะเห็นว่า ฟังชั้น showAddress จะได้รับข้อมูลมาและนำไปหาที่GoogleMap ด้วย API geocoder
ดูตัวอย่างที่ 10 ที่ทำเสร็จแล้ว
ตัวอย่างที่ 11 ค้นหาจากฐานข้อมูล Mysql ที่ต้องการแล้วนำมาแสดงผล
1.ก่อนอื่นทำการสร้างฐานข้อมูลขึ้นมาโดยที่มีข้อมูลใส่หรับใช้งาน ให้โหลดได้จาก ตัวอย่างฐานข้อมูล ให้ทำการ import ลงMysql เพื่อใช้สำหรับการค้นหา
2.สร้างหน้าสำหรับสร้างตัวแปลที่ใช้ในการติดต่อฐานข้อมูล
(โหลดหน้า phpsql_dbinfo.php)

3.ทำการสร้างหน้า php ที่ใช้ในการค้นหา Mysql ในตัวอย่างนี้ใช้ชื่อว่า search.php
(โหลดหน้า search.php )

<?php

require("phpsql_dbinfo.php");

// Get parameters from URL

$fsearch = $_GET["fsearch"];

$asearch = $_GET["asearch"];

// Start XML file, create parent node

$dom = new DOMDocument("1.0");

$node = $dom->createElement("markers");

$parnode = $dom->appendChild($node);

// Opens a connection to a mySQL server

$connection=mysql_connect ($hostname, $username, $password);

mysql_query("SET NAMES UTF8",$connection);
if (!$connection) {

die("Not connected : " . mysql_error());
}

// Set the active mySQL database

$db_selected = mysql_select_db($database, $connection);

if (!$db_selected) {

die ("Can\'t use db : " . mysql_error());
}

$query = "select * from farm where $fsearch like '%$asearch%' ";
$result = mysql_query($query);

if (!$result) {
die("Invalid query: " . mysql_error());
}

header("Content-type: text/xml");

// Iterate through the rows, adding XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
$node = $dom->createElement("marker");
$newnode = $parnode->appendChild($node);
$newnode->setAttribute("name", $row['fname']);
$newnode->setAttribute("address", $row['faddress']);
$newnode->setAttribute("idfarm", $row['idfarm']);
$newnode->setAttribute("fproducer", $row['fproducer']);
$newnode->setAttribute("fcollection", $row['fcollection']);
$newnode->setAttribute("type", $row['type']);
$newnode->setAttribute("fid", $row['fid']);
$newnode->setAttribute("lat", $row['flat']);
$newnode->setAttribute("lng", $row['flng']);
}

echo $dom->saveXML();
?>

4.สร้างAPIสำหรับทำการส่งค่าตัวแปล asearch และ fsearch ไปค้นที่ search.php และแสดงค่าผลการค้นหาที่พบ

function searchLocationsNear() {
var asearch = document.getElementById('asearch').value;
var fsearch = document.getElementById('fsearch').value;
var searchUrl = "search.php?fsearch=" + fsearch + "&asearch=" + asearch ;
GDownloadUrl(searchUrl, function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName('marker');

var sidebar3 = document.getElementById('sidebar3');
sidebar3.innerHTML = '';
if (markers.length == 0) {
sidebar3.innerHTML = 'No results found.';
map.setCenter(new GLatLng(13.8196,100.0601), 11);
return;
}

var bounds = new GLatLngBounds();
for (var i = 0; i < markers.length; i++) {
var fid = markers[i].getAttribute("id");
var idfarm = markers[i].getAttribute("idfarm");
var fproducer = markers[i].getAttribute("fproducer");
var fcollection = markers[i].getAttribute("fcollection");
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, name, address, type, idfarm, fproducer, fcollection, fid);
map.addOverlay(marker);

var sidebarEntry = createSidebarEntry(marker, name, address);
sidebar3.appendChild(sidebarEntry);
bounds.extend(point);
}
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
});
}

5.สร้างฟร์อมรับค่าตัวแปล asearch และ fsearch ในส่วนของ body html

<input name="text" type="text" id="asearch" value="ใส่ข้อมูลที่จะใช้ค้นหา" size="30"/>
ค้นหาจาก:
<select id="fsearch">

<option value="fname" selected>ชื่อฟาร์ม</option>
<option value="idfarm" >หรัสฟาร์ม</option>
<option value="faddress" >ที่อยู่</option>
</select>
<input type="button" onclick="searchLocationsNear()" value="เริ่มค้นหา"/>

โดยให้นำคำสั่งข้อ4 และ ข้อ5 ไปใช้ร่วมกับหน้าแสดงแผนที่ จะได้กังตัวอย่างหน้า ex__11.htm ดังต่อไปนี้
(โหลดหน้า ex__11.htm )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>ทำการแจ้งเตือน และ แสดงข้อมูลฟาร์มไก่</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAKaJQ6galA0QmFhNdQzYuwRQnaT__a1y-hZdnJBN4Ggj_4W3wVRTkKlGxp0EJvRTbiAqcn-FCYSTDog"
type="text/javascript"></script>
<script src="js/gmaps.CircleOverlay.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var circle = null;
var circle2 = null;
var map;
var geocoder;

var iconBlue = new GIcon();
iconBlue.image = 'http://newsirius13.thport.com/picture/c004.png';
iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconBlue.iconSize = new GSize(20, 22);
iconBlue.shadowSize = new GSize(1, 1);
iconBlue.iconAnchor = new GPoint(12, 8);
iconBlue.infoWindowAnchor = new GPoint(5, 1);

var icongreen = new GIcon();
icongreen.image = 'http://newsirius13.thport.com/picture/c003.png';
icongreen.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
icongreen.iconSize = new GSize(20, 22);
icongreen.shadowSize = new GSize(1, 1);
icongreen.iconAnchor = new GPoint(12, 8);
icongreen.infoWindowAnchor = new GPoint(5, 1);

var customIcons = [];
customIcons["ปิด"] = iconBlue;
customIcons["เปิด"] = icongreen;

var sidebarEntry = createSidebarEntry(marker, name, address);
sidebar3.appendChild(sidebarEntry);
bounds.extend(point);
}
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
});
}

function createMarker(point, name, address, type, idfarm, fproducer, fcollection, fid) {
var marker = new GMarker(point, customIcons[type]);
var html = "<table width=300><tr><td>"+"หมายเลขสมาชิก:"+ idfarm +"<br>"+ "ชื่อฟาร์ม:" + name +"<br>"+"ชื่อผู้ประกอบการ:"+fproducer +"<br>"+"จำนวนไก่ที่เลี้ยง"+fcollection +"ตัว"+"<br>"+ "เป็นโรงเรือนประเภท" + type+"<br>"+"ที่อยู่:"+address+ "</td></tr></table>";
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});

return marker;
}
function createSidebarEntry(marker, name, address) {
var div = document.createElement('div');
var html = "<b>" + name + "</b> <br/>" + address + "<br/> ------------------------------ <br/>" ;
div.innerHTML = html;
div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
GEvent.addDomListener(div, 'click', function() {
GEvent.trigger(marker, 'click');
});
GEvent.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#eee';
});
GEvent.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#fff';
});
return div;
}
//]]>

</script>
<style type="text/css">

</style></head>
<body onload="load(),initialize()" onunload="GUnload()">
<form action="#" onsubmit="showAddress(this.address.value); return false">
<table>
<tbody>
<tr>
<td width="600" height="402" rowspan="2"><div id="map_canvas" style="width: 600px; height: 400px"></div> </td>
<td width="180" height="402" valign="top"><div align="center"> <img src="http://newsirius13.thport.com/picture/bg/bt2003.gif" alt="" width="180" height="36" />
<input name="text" type="text" id="asearch" value="ใส่ข้อมูลที่จะใช้ค้นหา" size="30"/>
ค้นหาจาก:
<select id="fsearch">

<option value="fname" selected>ชื่อฟาร์ม</option>
<option value="idfarm" >หรัสฟาร์ม</option>
<option value="faddress" >ที่อยู่</option>
</select>
<input type="button" onclick="searchLocationsNear()" value="เริ่มค้นหา"/>
</p>
</div>
<div id="sidebar3" style="overflow: auto; height: 295px; font-size: 11px; color: #000"></div>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

คลิกโหลดตัวอย่างที่ 11
ดูตัวอย่างของผู้พัฒนาเวบนี้
โหลดตัวอย่างที่ 11 เพื่อติดตั้งและทดสอบด้วยตัวเอง โดยจะมีตัว importMysql และไฟร์ต่างๆที่ต้องใช้
(การใช้งานให้เอาไฟร์thpor_3594038_demo.sql ทำการimportMysql และแก้ไขข้อมูลการเชื่อมต่อที่ไฟร์ phpsql_dbinfo.php )

การสร้างวงกลมจากระยะรัศมีบนแผนที่
ตัวอย่างที่ 12 สร้างวงกลมที่มีรัศมี 10กิโลเมตร ขึ้นมาตรงจุดกึงกลางบนแผนที่
1.สร้างJava เพื่อใช้สำหรับสร้างวงกลมบนแผนที่Google Mapโดยให้ไฟร์นี้มีชื่อว่า gmaps.CircleOverlay.js
(โหลดหน้า gmaps.CircleOverlay.js )

var CircleOverlay = function(latLng, radius, strokeColor, strokeWidth, strokeOpacity, fillColor, fillOpacity) {
this.latLng = latLng;
this.radius = radius;
this.strokeColor = strokeColor;
this.strokeWidth = strokeWidth;
this.strokeOpacity = strokeOpacity;
this.fillColor = fillColor;
this.fillOpacity = fillOpacity;
}

CircleOverlay.prototype = GOverlay;

CircleOverlay.prototype.initialize = function(map) {
this.map = map;
}

CircleOverlay.prototype.clear = function() {
if(this.polygon != null && this.map != null) {
this.map.removeOverlay(this.polygon);
}
}

CircleOverlay.prototype.redraw = function(force) {
var d2r = Math.PI / 180;
circleLatLngs = new Array();
var circleLat = this.radius * 0.014483; //Convert statute miles into degrees latitude
var circleLng = circleLat / Math.cos(this.latLng.lat() * d2r);
var numPoints = 40;

for (var i = 0; i < numPoints + 1; i++) {
var theta = Math.PI * (i / (numPoints / 2));
var vertexLat = this.latLng.lat() + (circleLat * Math.sin(theta));
var vertexLng = this.latLng.lng() + (circleLng * Math.cos(theta));
var vertextLatLng = new GLatLng(vertexLat, vertexLng);
circleLatLngs.push(vertextLatLng);
}

this.clear();
this.polygon = new GPolygon(circleLatLngs, this.strokeColor, this.strokeWidth, this.strokeOpacity, this.fillColor, this.fillOpacity);
this.map.addOverlay(this.polygon);
}

CircleOverlay.prototype.remove = function() {
this.clear();
}

CircleOverlay.prototype.containsLatLng = function(latLng) {

if(this.polygon.containsLatLng) {
return this.polygon.containsLatLng(latLng);
}
}

CircleOverlay.prototype.setRadius = function(radius) {
this.radius = radius;
}

CircleOverlay.prototype.setLatLng = function(latLng) {
this.latLng = latLng;
}

จากตัวอย่างvar circleLat = this.radius * 0.014483; เป็นการคิดคำนวนสร้างวงกลมด้วยค่า ไมร์ ถ้าต้องการค่าเป็น กิโลเมตร ให้ทำการหาร 1.62 เพิ่มเข้าไป หรือให้เปลี่ยน จาก * 0.014483 เป็น *0.00894 แทน ก็จะได้วิธีคิดแบบเป็นกิโลเมตร

2.การสร้างวงกลมขึ้นมาที่จุด Markers บนแผนที่ ด้วยการเรียกใช้ไฟร์Javaที่สร้างไว้ในข้อ1มาใช้งาน โดยตั้งชื่อหน้านี้ว่า circle.html
(โหลดหน้า circle.html )

<html>
<head>
<title>GMaps Circle Test</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAOzwQ7Lh4CqiMto5Mx5BruhS-xyZmcPPoBCehH0LrfEv4pktlHxSKTILYLRlghp_oPDcwTo3STVXADg" type="text/javascript"></script>
<script src="gmaps.CircleOverlay.js" type="text/javascript"></script>
<script type="text/javascript">
var circle = null;
var circleRadius = 50; // Miles
var map = null;
var isCompatible = GBrowserIsCompatible();

//<![CDATA[
function load() {
if (isCompatible) {
// Create Map
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(42, -74), 6);
// Add controls
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());

// Create and add the circle
circle = new CircleOverlay(map.getCenter(), circleRadius, "#336699", 1, 1, '#336699', 0.25);
map.addOverlay(circle);
}
}
//]]>
</script>
</head>
<body onLoad="load()" onUnload="GUnload()">
<div id="map" style="width: 400px; height: 300px; border: 1px solid #666666;"></div>
</body>
</html>

จากตัวอย่างข้อ2นี้จะเห็นได้ว่าเราทำการเรียกJavaมาใช้งาน ด้วยคำสั่ง<script src="gmaps.CircleOverlay.js" type="text/javascript"></script> และการแสดงผลวงกลมจะอยู่กลางหน้าจอ เพราะที่CircleOverlayกำหนดให้อยู่ที่จุด map.getCenter()
และในตัวแปล circle = new CircleOverlay(map.getCenter(), circleRadius, "#336699", 1, 1, '#336699', 0.25); ก็คือการกำหน่อยค่าต่างๆไปส่งไปที่ไฟร์ Java ที่ตัวแปลCircleOverlayซึ่งมีความหมายการใช้งานดังนี้
CircleOverlay = function(latLng(ที่ตั้ง), radius(รัศมี), strokeColor(สีของเส้นวงกลม), strokeWidth(ความกว้างของเส้นวงกลม), strokeOpacity(ความชัดเจนของเส้นวงกลม), fillColor(สีของพื้นที่ในวงกลม), fillOpacity(ความชัดเจนของสีพื้นที่ในวงกลม))
โดยผู้ใช้งานสามารถนำไปดัดแปลงใช้งานได้ตามความเหมาะสม
วิธีสร้างแผนที่ของเราเองบน Google Maps
ก่อนอื่นเลย ต้องสมัครสมาชิกกับ google ก่อนนะครับ สำหรับใครที่ยังไม่มี คลิ๊กที่นี่ เพื่อสมัครสมาชิกครับ จากนั้นก็ทำการลงชื่อเข้าใช้งานครับ

เมื่อล็อคอินแล้ว ให้เข้าไปที่เว็บไซต์ http://google.com/maps เพื่อมาที่หน้าแรกของ Google maps ก็จะเห็นเมนู ตั้งค่าตำแหน่งเริ่มต้น เราก็คลิกที่เมนูนี้แล้วพิมพ์คำว่า thailand ลงไปแล้วก็กดปุ่มบันทึก เพื่อที่จะให้แผนที่ Focus มาที่ประเทศไทย

คลิกที่เมนู แผนที่ของฉัน แล้วก็คลิกที่เมนู สร้างแผนที่ใหม่ แล้วก็จะมีช่องให้กรอกรายละเอียด คือ ชื่อและก็คำอธิบาย ก็ให้ใส่รายละเอียดเข้าไปตัวอย่างดังรูปครับ อยากเพิ่งกดบันทึก

จากนั้นก็ค้นหาสถานที่ ที่คุณต้องการเช่นที่อยู่หรือสถานที่ของคุณ ด้วยการซูมและลากไปเรื่อยๆ จนเจอสถานที่นั้นๆ ขั้นตอนต่อไปจะเป็นขั้นตอนการปักหมุด หรือทำตำแหน่งในแผนที่ของคุณครับ เลือกที่ไอคอนดังรูป แล้วก็กำหนดจุดไปได้เลย

เมื่อได้กำหนดสถานที่ที่ต้องการเป็นที่เรียบร้อยแล้ว ต่อไปจะเป็นการนำลิงค์แผนที่ ที่ได้ไปใช้งานกัน คลิ๊กไอคอนตามลูกศรสีแดง แล้วเลือก Code ในแถบสีแดงไปใช้ได้ทันที

นำ Code ทีได้ไปแปะไว้ในส่วนที่คุณต้องการแสดงแผนที่ครับ

ตัวอย่าง Code ที่ได้

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.th/maps?ll=13.865966,100.572066&spn=0.005635,0.009602&t=m&z=17&vpsrc=6&msa=0
&msid=205101037010145101883.0004ae754e18a12db01a2"></iframe><br /><small>ดู <a href="http://maps.google.co.th/maps?ll=13.865966,100.572066&spn=0.005635,0.009602&t=m&z=17&vpsrc=6&msa=0
&msid=205101037010145101883.0004ae754e18a12db01a2&source=embed" style="color:#0000FF;text-align:left">ชื่อสถานที่</a> ในแผนที่ขนาดใหญ่กว่า</small>

เทคโนโลยีเว็บ 2

วันพฤหัสบดีที่ 4 กรกฎาคม พ.ศ. 2556

ใบงานที่ 3

Web services

ไม่มีความคิดเห็น:

แสดงความคิดเห็น