การวเคราะหและการจดท าฐานขอมลแหลงทองเทยวส าหรบผสงอายและผพการบนระบบแผนทออนไลน

The analysis and implementation of Tourism information for Elderly and Disabilities people

based on Web GIS

วทนาถ เจยะรตน

วทยานพนธระดบปรญญาตร เสนอภาควชาทรพยากรธรรมชาตและสงแวดลอม

คณะเกษตรศาสตร ทรพยากรธรรมชาตและสงแวดลอม มหาวทยาลยนเรศวร

เพอเปนสวนหนงของการศกษาหลกสตรปรญญาวทยาศาสตรบณฑต

สาขาวชาภมศาสตร

พฤศจกายน 2561

/nen^ivifwEnnisiiiiflifluasa^uifleiaiJ flnj^inw(?i'3f,ii?iPiivii^Ejiri'a5iiJjaaiPiuas^^Ln^aaii 1r

faiiomviEnuwusisfliiiJInjanfliiia'a "niiiifliiswiiaKnii^viifii^aiiauvifi-Jvla-JLviy'aLLasvivfnvl

^iijtfnvia^ivimwfuaimiriswwn'n" iwti?iijpiiii\jiSti?i'3'uvi^*ija^n'i<3^nwi^iw'wan?i(?i'3'iJTUjaji

an^nievnJlntn

\J^5it!\j1vii'3Viei/n?i?i'3i<wEJiPii?i^,3<ua!^?i ?mn/iSfli?iwi

wivi'U'ifnme?]ivii'VNEJ'in'35iiu8ai^Ltcis^in^aau

กตตกรรมประกาศ

ผวจยขอกราบขอบพระคณเปนอยางงสงในความกรณาของ ผชวยศาสตราจารย ดร.สทธชย ชส าโรง ทไดสละเวลาอนมคามาเปนทปรกษาพรอมทงใหค าแนะน า และใหแนวคดตลอดจนแกไขขอบกพรองของวทยานพนธดวยความเอาใจใสตลอดระยะเวลาในการท าวทยานพนธฉบบนจนท าใหวทยานพนธฉบบนส าเรจลลวงไดอยางสมบรณและทรงคณคา

กราบขอบพระคณคณาจารยสาขาวชาภมศาสตร คณะเกษตรศาสตร ทรพยากรธรรมชาตและสงแวดลอม ทชวยใหค าแนะน าในการจดท าระบบและถายทอดความรวทยาการอนมคณคายง ซงเปนประโยชนตอการวจยและดานการด าเนนชวตของผวจย และขอบพระคณเจาหนาททกทานตลอดจนรนพ และเพอนๆสาขาวชาภมศาสตร

เหนอสงอนใดขอกราบขอบพระคฯบดามารดา และครอบครวทเปดโอกาสใหไดรบการศกษา คอยใหก าลงใจพรอมกบการสนบสนนในทกๆดานอยางดทสดเสมอมา

คณคาและคณประโยชนอนพงจะมจากวทยานพนธฉบบน ผวจยขอมอบและอทศแดผมพระคณทกๆทาน ผวจยหวงเปนอยางยงวา งานวจยนจะเปนประโยชนตอการวเคราะหและการจ าท าฐานขอมลแหลงทองเทยวและทพกทรองรบนกทองเทยวผสงอายและผพการในประเทศ และผทมความสนใจไมมากกนอย

วทนาถ เจยะรตน

ชอเรอง การวเคราะหและการจดท าฐานขอมลแหลงทองเทยวส าหรบผสงอายและผพการ

ผวจย วทนาถ เจยะรตน

อาจารยทปรกษา ผชวยศาสตราจารย ดร.สทธชย ชส าโรง

ประเภทสารนพนธ วทยานพนธ วท.บ. สาขาวชาภมศาสตร,

มหาวทยาลยนเรศวร,2561

ค าส าคญ ผสงอาย, แผนทออนไลน, ระบบคนหาเสนทาง, การจดการฐานขอมล

บทคดยอ ปจจบนจ านวนผสงอายในประเทศไทยมแนวโนมเพมสงขนในอนาคตจากการคาดประมาณประชากรประเทศไทยสดสวนของประชากรสงอาย มแนวโนมทเพมสงขนอยางตอเนอง ดงนนการสงเสรมใหผสงอายไดออกไปทองเทยวจะชวยท าใหการมอายยนยาวมความสขทงทางกาย ใจ และอยในสงคมไดอยางมความสข อกทงเปนการสงเสรมการทองเทยวและเปนการกระตนเศรษฐกจของประเทศ ดานการทองเทยวแลวกลมผสงอายนบวาเปนกลมนกทองเทยวทมความส าคญและมคณภาพอยางมากตอการทองเทยว ในการทองเทยวส าหรบผสงอายแลวแหลงทองเทยวและทพกจ าเปนจะตองมความเหมาะสมและสามารถรองรบการเขาใชบรการของนกทองเทยวผสงอายได งานวจยนมวตถประสงคเพอวเคราะหและจดท าฐานขอมลแหลงทองเทยวทรองรบนกทองเทยวผสงอายและผพการ และเพอจดท าเวบแผนทออนไลนแสดงแหลงทองเทยวและทพกทรองรบนกทองเทยวผสงอายและผพการ และพฒนาระบบสบคนหาเสนทางทสนทสดจากสถานททองเทยวและทพกไปยงโรงพยาบาลทอยใกลเคยง จากผลงานวจยนจะชวยใหนกทองเทยวสงอายสะดวกสบายในการเดนทางมากขนและสามารถเปนตวชวยในการตดสนใจในการใชบรการแหลงทองเทยวไดงายขน

Title The analysis and implementation of Tourism information for Elderly and Disabilities people based on Web GIS

Author Witthanart Chiarat

Advisor Assistant Professor Dr.Sittichai Choosumrong

Academic Paper Thesis B.S. Name of Degree in Geography, Naresuan University, 2018

Keywords Elderly, Online Map, Route search, Database Management

Abstract

Currently, the number of ageing society in Thailand increasing every year. Thus, the promotion of the travelling for ageing society it could be make an happiness, both physically and socially happy for them. It also promotes tourism and stimulates the economy of the country. In terms of tourism, the elderly are considered to be important tourists and have a high quality of tourism.In travel for the elderly, travel and accommodation needs to be appropriate and able to accommodate the needs of older travelers. This research aims to analyze and develop a database of tourist destinations for elderly and disabled visitors. And to make an online map showing tourist attractions and accommodations for travelers, the elderly and the disabled. This research is to develop a database of tourist destinations for elderly travelers in the study area. Travel and tourism information systems

สารบญ

บทท หนา

บทท 1 .............................................................................................................................................................. 1

บทน า .................................................................................................................................................. 1

ทมาและความส าคญของปญหา........................................................................................................... 1

วตถประสงคของการวจย..................................................................................................................... 2

ประโยชนทคาดวจะไดรบ .................................................................................................................... 2

ความส าคญของงานวจย ...................................................................................................................... 2

ขอบเขตของการวจย ........................................................................................................................... 3

ขอตกลงเบองตน ................................................................................................................................. 3

นยามศพทเฉพาะ ................................................................................................................................. 4

สมมตฐานของการวจย ........................................................................................................................ 4

กรอบแนวคด ....................................................................................................................................... 4

บทท 2 .............................................................................................................................................................. 6

เอกสารและงานวจยทเกยวของ ........................................................................................................... 6

ระบบภมสารสนเทศผานเครอขายอนเตอรเนต หรอ Internet GIS/MIS ............................................ 6

ระบบฐานขอมลเชงพนท (Spatial Database System) .................................................................... 7

QGIS ................................................................................................................................................... 7

PostgreSQL/PostGIS ........................................................................................................................ 8

SQL ..................................................................................................................................................... 9

ภาษา PHP ........................................................................................................................................ 10

ภาษา HTML ..................................................................................................................................... 12

ภาษา JavaScript ............................................................................................................................. 13

pgRouting ........................................................................................................................................ 14

อลกอรทมของไดกสตรา .................................................................................................................... 16

Geoserver ........................................................................................................................................ 17

Open Data Kit ............................................................................................................................... 21

สารบญ(ตอ)

บทท หนา

การจดการฐานขอมล (Database Management) ........................................................................... 21

Web Map Application .................................................................................................................. 23

Web GIS / Web Map Application............................................................................................... 23

ประเภทการทองเทยว ....................................................................................................................... 23

เอกสารงานวจยทเกยวของ ................................................................................................................ 26

บทท 3 ............................................................................................................................................................ 31

ต าแหนงเปาหมายและพนทศกษาในการวจย .................................................................................... 31

เครองมอทใชในการวจย .................................................................................................................... 31

ปจจยทใชในการวเคราะห ................................................................................................................. 32

วธการด าเนนงานวจย ........................................................................................................................ 32

การออกส ารวจภาคสนามเพอจดเกบขอมล ....................................................................................... 32

น าเขาขอมลเขาสโปรแกรม QGIS...................................................................................................... 33

ออกแบบฐานขอมลและจดการขอมล ................................................................................................ 34

Entity Relationship Diagram (ER-Diagram) ............................................................................... 35

วเคราะหขอมลและการคนหาเสนทาง ............................................................................................... 36

ออกแบบการแสดงผลและพฒนาเวปไซต .......................................................................................... 40

การพฒนาและทดสอบระบบ ............................................................................................................. 44

บทท 4 ......................................................................................................................................................................................... 46

ผลการวจย......................................................................................................................................... 46

ผลจากการออกแบบฐานขอมล และ การจดการขอมล ..................................................................... 46

ผลจากการทดลองการคนหาดวยค าสง SQL ..................................................................................... 47

ผลจากการพฒนาระบบ ..................................................................................................................... 48

สวนหนาเวปแสดงผล ........................................................................................................................ 48

สารบญ(ตอ)

บทท หนา

บทท 5 ............................................................................................................................................................ 49

สรปและอภปรายผล .......................................................................................................................... 49

สรปผลการวจย.................................................................................................................................. 49

การจดท าฐานขอมลและการวเคราะหขอมล ..................................................................................... 49

การออกแบบ การจดท าเวปแผนทออนไลน ....................................................................................... 49

ระบบคนหาเสนทาง........................................................................................................................... 50

อภปรายผลการวจย ........................................................................................................................... 50

การออกแบบ การจดท าเวปแผนทออนไลน ....................................................................................... 50

ระบบการคนหาเสนทาง .................................................................................................................... 50

ขอเสนอแนะส าหรบการพฒนาตอไป ................................................................................................ 52

บรรณานกรม .................................................................................................................................................. 53

ภาคผนวก ก ................................................................................................................................................... 57

ภาคผนวก ข ................................................................................................................................................... 59

ภาคผนวก ค ................................................................................................................................................... 72

สารบญตาราง

ตาราง หนา

ตารางท 1ตารางอธบายพารามเตอรการรองขอ WMS GetCapabilities ............................................ 18 ตารางท 2ตารางอธบายพารามเตอรการรองขอ WMS GetMap ......................................................... 18 ตารางท 3ตารางอธบายพารามเตอรการรองขอ WMS GetFeatureInfo ............................................ 19 ตารางท 4ตารางอธบายพารามเตอรการรองขอ WFS GetCapabilities ............................................. 20

สารบญภาพ

ภาพท หนา

1. เสนทางจาก อ าเภอเมองจงหวดพษณโลก ไปยง อ าเภอเขาคอ จงหวดเพชรบรณ .............................3 2. กรอบแนวคด ……………………………………………………………………………………………………………………….5 3. ลกษณะขอมลเชงพนท .......................................................................................................................7 4. การท างานของกราฟ Dijkstra ……………………………………………………………………………………………..16 5. การออกแบบแบบสอบถาม ..............................................................................................................26 6. หนาแอปพลเคชน ODK ………………………………………………………………………………………………………27 7. ภาพไฟลCSVทไดจากส ารวจขอมล ……………………………………………………………………………………….28 8. แสดงต าแหนงของสถานททองเทยวและทพก ………………………………………………………………………..28 9. แสดงฐานขอมลในตารางของขอมลสถานททองเทยวทพก ...............................................................29 10. แสดงฐานขอมลในตารางของขอมลโรงพยาบาล ............................................................................ 29 11. ER Diagram ระบบฐานขอมล ……………………………………………………………………………………………..30 12. การท างานของกราฟ Dijkstra …………………………………………………………………………………………… 31 13. ขนตอนการ Download ขอมลจาก OpenStreeMap .………………………………………………………. 31 14. ขนตอนรนค าสง osm2pgrouting ..…………………………………………………………………………………… 32 15. แสดงขอมลทท าการเรยกจากฐานขอมล บนโปรแกรม QGIS ...…………………………………………………32 16. ค าสงการคนหาเสนทางจากจดหนงไปยงจดหนง โดยใชค าสง SQL ..………………………………………..33 17. แสดงการคนหาเสนทางจากจดหนงไปยงอกจดหนงบนโปรแกรม QGIS …………………………………….33 18. ค าสงในการใช pgRouting ผาน Geoserver …………………………………………………………………………34 19. รปแบบโครงสรางของการออกแบบการเขาระบบและแสดงผล ...………………………………………………34 20. โครงสรางหนาเวป ……………………………………………………………………………………………………………….35 21. ตวอยางการคนหาเสนทางผานหนาเวป ………………………………………………………………………………….39 22. โครงสรางตารางขอมลต าแหนงสถานททองเทยวและทพก ……………………………………………………….40 23. โครงสรางตารางขอมลต าแหนงของโรงพยาบาล ..............................................................................41 24. การทดสอบอลกอลทมส าหรบคนหาเสนทางจากสถานททองเทยวไปยงโรงพยาบาลทใกลทสด .......41 25. การแสดงผลการคนหาเสนทางจากฐานขอมลผานโปรแกรม QGIS ……………………………………………42 26. หนาเวปไซตผานระบบคอมพวเตอร และ สมารทโฟน ......................................................................43 27. แถบเมนการคนหาสถานททองเทยวและทพก ................................................................................43 28. แสดงผลลพธการคนหาสถานทและทพก …………………………………………………………………………….44 29. ผลลพธการคนหาเสนทางทสนทสด ……………………………………………………………………………………44 30. แสดงต าแหนงของปม Clear ……………………………………………………………………………………………….45

บทท 1

บทน า

ทมาและความส าคญของปญหา

ปจจบนจ านวนผสงอายในประเทศไทยมแนวโนมเพมสงขนในอนาคตจากการคาดประมาณประชากรประเทศไทยสดสวนของประชากรสงอาย มแนวโนมทเพมสงขนอยางตอเนอง จากรอยละ 13.2 ในพ.ศ.2553 เปนรอยละ 32.1 ในพ.ศ.2583 (ส านกงานสถตแหงชาต,2553) เนองมาจากคนไทยมอายยนยาวขน ดงนนการสงเสรมใหผสงอายไดออกไปทองเทยวจะชวยท าใหการมอายยนยาวมความสขทงทางกาย ใจ และอยในสงคมไดอยางมความสข อกทงเปนการสงเสรมการทองเทยวและเปนการกระตนเศรษฐกจของประเทศ ดานการทองเทยวแลวกลมผสงอายนบวาเปนกลมนกทองเทยวทมความส าคญและมคณภาพอยางมากตอการทองเทยวในสมยใหม เพราะเนองจากเปนกลมนกทองเทยวทสวนใหญไมท างานแลวหรอมเวลาท างานทนอยมเวลาวางในการทองเทยวมากกวากลมนกทองเทยวกลมอนและมเงนสะสมจากรายได ซงในปจจบนเทคโนโลยสารสนเทศและแผนทออนไลนเขามามบทบาทในชวตประจ าวนเปนอยางมาก โดยเฉพาะอยางยงในการทองเทยวประชาชนสวนใหญมกใชเทคโนโลยการระบต าแหนงบนพนโลก หรอ Global Positioning System (GPS) ในการน าทางและคนหา เพอทจะชวยอ านวยความสะดวกในการเดนทางเพอใหถงจดหมายไดเรวขนและยงรวมถงท าใหทราบเสนทางตาง ๆ เพอวางแผนกอนการออกเดนทาง

ในการทองเทยวส าหรบผสงอายแลวแหลงทองเทยวและทพกจ าเปนจะตองมความเหมาะสมและสามารถรองรบการเขาใชบรการของนกทองเทยวผสงอายไดอยางเหมาะสม นกทองเทยวสงอายจะตองมการศกษาขอมลเปนอยางดเกยวกบแหลงทองเทยวและทพก ซงขอมลทนกทองเทยวสงอายควรจะตองศกษาเพอเปนการวางแผนการทองเทยวเกยวกบแหลงทองเทยวและทพกนนไดแก ขอมลทวไปเกยวกบแหลงทองเทยวและทพก สภาพทางกายภาพของแหลงทองเทยวและทพก แตโดยสวนใหญ นกทองเทยวสงอายมกจะไมไดมการศกษาขอมลเกยวกบแหลงทองเทยวกอนทจะไปยงสถานทนน ซงดวยเหตผลนเอง อาจท าใหเกดปญหาตางๆทคาดไมถงได เนองจากนกทองเทยวผสงอายสวนใหญมกจะมปญหาดานสขภาพในดานตางๆ เชน ปญหาเรองความดนโลหตสง ปญหาขอและกระดก ปญหาโรคหวใจ และโรคประจ าตวตางๆ จากปญหาดานสขภาพนน เมอเกดอบตเหตหรอเกดอาการจากโรคประจ าตวเกดขนในแหลงทองเทยวและทพกทกจะท าใหเกดการบาดเจบหรอเสยชวตได ดงนนแหลงทองเทยวและทพกจงจะตองมสงอ านวยความสะดวกในการขนลงทพก หองน าทออกแบบส าหรบผสงอาย เครองมออปกรณทางการแพทยและพนกงานหรอผประกอบการแหลงทองเทยวและทพกมความรในการปฐมพยาบาลเบองตน และแหลงทองเทยวและทพกมต าแหนงใกลเคยงกบสถานพยาบาลมากแคไหน เปนการยงยากทจะเขาถงขอมลไดทงหมดและยากทจะตดสนใจเขาใชบรการรวมถงการเขาถงขอมลผานอนเทอรเนตและต าแหนงพกดทแสดงอยบน Google Map นนไมสามารถแสดงเพอท าใหทราบวาแหลงทองเทยวและทนน ๆ มสงทอ านวยความสะดวกใดบาง

2

จงท าใหยากตอการคนหา ซงในปจจบนเทคโนโลยของระบบสารสนเทศภมศาสตร(GIS)สามารถชวยการจดการขอมลเชงพนทใหมความสมพนธกนมากขนผานการน าเสนอบนเวปพฒนาเวปแอปพลเคชนท าใหสามารถวเคราะหขอมลไดงายขน

งานวจยนจงไดพฒนาระบบเพอคนหาต าแหนงสถานทแหลงทองเทยวและทพกทรองรบนกทองเทยวสงอายบนเวปแอปพลเคชนแสดงแผนทออนไลน ซงจะชวยใหนกทองเทยวสงอายหรอลกหลานทพาผสงอายมาทองเทยวสะดวกสบายในการเดนทางมากขนสามารถตดสนใจในการใชบรการแหลงทองเทยวไดงายขนและสามารถระบต าแหนงทอยขณะนนของตนได ท าใหทราบต าแหนงและระยะทางของแหลงทองเทยวและทพก รวมไปถงระยะทางจากแหลงทองเทยวและทพกไปสสถานพยาบาลทใกลทสด และการเขาถงฐานขอมลตาง ๆ ของแหลงทองเทยวและทพกทจะคอยใหบรการในดานตาง ๆ ได โดยผใชสามารถใชงานผานเวบเบราวเซอรไดทงในคอมพวเตอรและสมารทโฟน การศกษาวจยครงนเปนการจดท าฐานขอมลแหลงทองเทยวทรองรบนกทองเทยวผสงอายในขอบเขตพนทศกษา และระบบสบคนต าแหนงแหลงทองเทยวทรองรบนกทองเทยวผสงอายและผานแผนทออนไลนและสมารโฟน

วตถประสงคของการวจย 1. เพอวเคราะหและจดท าฐานขอมลแหลงทองเทยวและทพกทรองรบนกทองเทยวผสงอายและผ

พการ 2. เพอจดท าเวปแผนทออนไลนแสดงแหลงทองเทยวและทพกทรองรบนกทองเทยวผสงอายและผ

พการ

ประโยชนทคาดวจะไดรบ 1. ไดฐานขอมลแหลงทองเทยวทรองรบนกทองเทยวผสงอายและผพการ 2. ไดเวปแผนทออนไลนแสดงแหลงทองเทยวและทพกทรองรบนกทองเทยวผสงอายและผพการ

ความส าคญของงานวจย การจดเกบขอมลเชงพนทของสถานททองเทยวและทพกในระบบจดการฐานขอมล(DATABASE)เพอน ามาใชในการวเคราะหแหลงทองเทยวและทพกทเหมาะสมส าหรบนกทองเทยวสงอายผพการมาแสดงบนแผนททองเทยวส าหรบนกทองเทยวผสงอายและผพการ เพอเปนตวชวยในการเลอกใชบรการในสถานททองเทยวและทพกตางๆ และเพอเปนการสนบสนนสถานททองเทยวใหรองรบนกทองเทยวและผพการ ซงอาจจะเปนประโยชนตอนกทองเทยวผสงอายและผพการ หรอ นกทองเทยวทวไป

3

ขอบเขตของการวจย 1 ขอบเขตการวจย ขอบเขตพนทในการศกษาครงน ก าหนดพนทในเขต อ าเภอเมอง จงหวดพษณโลก อ าเภอเขาคอ จงหวดเพชรบรณ และเสนทางจาก อ าเภอเมองพษณโลก ถง อ าเภอเขาคอ จงหวดเพชรบรณ

ภาพท 1 เสนทางจากอ าเภอเมอง จงหวดพษณโลก ไปยง อ าเภอเขาคอ จงหวดเพชรบรณ

2 ขอบเขตวธการศกษา เปนการจดท าฐานขอมลแหลงทองเทยวและทพกทอยในเขตอ าเภอเมอง จงหวดพษณโลก ถง อ าเภอเขาคอ จงหวดเพชรบรณ ดวย PosgreSQL/PostGIS เพอน ามาวเคราะหดวยระบบสารสนเทศภมศาสตร(GIS) และจดท าแผนทออนไลนเพอแสดงแหลงทองเทยวและทพกทรองรบนกทองเทยวผสงอายและผพการ

ขอตกลงเบองตน

งานวจยครงนเปนการจดท าฐานขอมลสมตวอยางแหลงทองเทยวและทพกทเหมาะส าหรบนกทองเทยวผสงอายและผพการในขอบเขต อ าเภอเมอง จงหวดพษณโลก และ ในขอบเขตอ าเภอเขาคอ จงหวดเพชรบรณ และทอยในรศม 100 เมตร จากเสนทางหลกซงเปนเสนทางจากอ าเภอเมอง จงหวดพษณโลก ไปยงอ าเภอเขาคอ จงหวดเพชรบรณ

4

นยามศพทเฉพาะ นกทองเทยวผสงอาย คอ บคคลทเกษยณอายจากการทางานแลวซงมอายตงแต60 ปขนไป อกทง. ยงมเงน มเวลา และมสขภาพรางกายแขงแรงพอทจะเดนทางทองเทยวได แผนทออนไลน คอ การน าเสนอแผนทบนเครอขายอนเตอรเนต ระบบคนหาเสนทาง คอ ระบบการค านวณหาเสนทางจากสถานทตนทางไปยง สถานทปลายทาง การจดการฐานขอมล คอ การบรหารแหลงขอมลทถกเกบรวบรวมไวทศนยกลาง เพอตอบสนองตอการใชของโปรแกรมประยกตอยางมประสทธภาพและลดการซ าซอนของขอมล รวมทงความขดแยงของขอมลทเกดขนภายในองคการ ในอดตการเกบขอมลมกจะเปนอสระตอกนไมมการเชอมโยงของขอมลเกดการ สนเปลองพนทในการเกบขอมล Free and Open Source Software for Geospatial (FOSS4G) คอ ซอฟแวรรหสเปดทางดานภมสารสนเทศ ซงเปนสวนหนงของ OSGeo ทประกอบไปดวย Free Software, Free Data, มาตรฐานขอมล และ Open Hardware

สมมตฐานของการวจย การวเคราะหและการจดท าฐานขอมลแหลงทองเทยวและทพกทรองรบนกทองเทยวผสงอายและผพการเพอน ามาจดท าแผนทออนไลนจะสามารถสบคนหาแหลงทองเทยวทรองรบนกทองเทยวผสงอายและผพการไดและสามารถอ านวยความสะดวกในการคนหาแหลงทองเทยวและทพกได

กรอบแนวคด การวเคราะหและการจดท าฐานขอมลแหลงทองเทยวและทพกทรองรบนกทองเทยวผสงอายและผพการมกระบวนการดงตอไปน 1) เรมตนจากการเตรยมขอมลเกยวกบสถานททองเทยวและทพกในเขตพนทการศกษาโดยเกบขอมลต าแหนงสถานททองเทยวและทพก ประเภทแหลงทองเทยว ขอมลทวไปของสถานททองเทยวและทพก 2) น าพกดต าแหนงสถานททองเทยวและทพกเขาสโปรแกรม QGIS 3) น าขอมลทไดน าเขาสฐานขอมล PostgreSQL/PostGIS และท าการออกแบบฐานขอมล 4) ท าการวเคราะหขอมลและจดท าระบบคนหาเสนทางโดยใชฟงคชน OSM บนโปรแกรม QGIS ในการดาวนโหลดชนขอมลน าขอมลทไดสฐานขอมลซงออกแบบและทดสอบโดยกรใชค าสง SQL รวมกบฟงกชน PostgreSQL/PostGIS พรอมกบการใช pgRouting ซงเปนฟงก ชนการค านวณหาเสนทางจากสถานททองเทยวไปยงโรงพยาบาลทใกลทสดซงมแนวคดการค านวณจากอลกอรทม Dijkstra's Algorithm ซงเปนการคนหาทไดผลลพธเสนทางเดยวทสนทสดและท าการเรยกใชแผนทจาก Openlayer 5) ท าการออกแบบและพฒนาเวปไซตแสดงแผนทออนไลน ดวยภาษา HTML และชดค าสง JavaScript ท างานรวมกบภาษา PHP และค าสง SQL ในการเชอมตอกบฐานขอมลในการเรยกขอมลจากฐานขอมลและระบบการคนหาโดยระบเงอนไข และท าการเชอมตอเขากบระบบคนหาเสนทางโดยเรยกแผนทจาก Openlayer 6) ท าการทดสอบระบบผานบราวเซอรบนเครอขายอนเตอรเนต

5

ภาพท 2 กรอบแนวความคด

บทท 2

เอกสารและงานวจยทเกยวของ

ในการศกษาการวเคราะหและการจดท าฐานขอมลแหลงทองเทยวและทพกทรองรบนกทองเทยวผสงอายและผพการ ซงผวจยไดศกษาบททวนเอกสาร วรรณกรรม และงานวจยทเกยวของมาใชเปนแนวทางในการศกษาดงน

1. ระบบภมสารสนเทศผานเครอขายอนเตอรเนต หรอ Internet GIS/MIS เปนการประยกตใชระบบอนเตอรเนตกบระบบ งานเพอจดการขอมลภมสารสนเทศ GIS และน าขอมลดงกลาวมาชวยวเคราะหและแกปญหาตางๆ เพอเพมประสทธภาพของการจดการขอมลและใหกาวทนตอการเปลยนแปลง ตางๆ จงไดมการพฒนาการใชงานรวมกนของระบบภมสารสนเทศ GIS และระบบจดการขอมล MIS

1.1 ระบบสารสนเทศทางภมศาสตร (Graphic Information System หรอ GIS) คอ กระบวนการท างานเกยวกบขอมลชงพนท (spatial data) ดวยระบบคอมพวเตอร โดยการก าหนดขอมลเชงบรรยายหรอขอมลคณลกษณะ (attribute data) และสารสนเทศ เชน ทอย บานเลขท ทมความสมพนธกบต าแหนงในเชงพนท (spatial data) เชน ต าแหนงบาน ถนน แมน า เปนตน ในรปของ ตารางขอมล และ ฐานขอมล ระบบ GIS ประกอบไปดวยชดของเครองมอทมความสามารถในการเกบรวบรวม ปรบปรงและการสบคนขอมล เพอจดเตรยม ปรบแตง วเคราะหและการแสดงผลขอมลเชงพนท เพอใหสอดคลองตามวตถประสงคการใชงาน ซงรปแบบและความสมพนธของขอมลเชงพนททงหลาย จะสามารถน ามาวเคราะหดวย GIS ใหสอความหมายในเรองการเปลยนแปลงทสมพนธกบชวงเวลาได 1.2 ระบบสารสนเทศเพอการจดการ (Management Information System หรอ MIS) หมายถง ระบบคอมพวเตอร หรอขนตอนทชวยในการจดเกบสารสนเทศเพอใชในการบรหารและการจดการองคกรไดอยางมประสทธภาพ ระบบสารสนเทศเพอการจดการนจะมสวนครอบคลมถง บคคล เอกสาร เทคโนโลย และขนตอนในการท างาน เพอทจะแกปญหาทางธรกจไมวาทาง ราคา สนคา บรการ หรอกลยทธตางๆ ระบบสารสนเทศเพอการจดการจะแตกตางจากระบบสารสนเทศทวไป กลาวคอระบบนจะใชในการวเคราะหระบบอนๆ เพอน ามาประยกตใช ในทางวชาการค าวาระบบสารสนเทศเพอการจดการนถกใชในสวนของรปแบบการจดการขอมล เชน ระบบผเชยวชาญ หรอ ระบบชวยในการตดสนใจ (http://www.thaiwater.net/web/index.php/knowledge/ 130- knowledge/298-igis.html)

7

2. ระบบฐานขอมลเชงพนท (Spatial Database System) ระบบจะมงเนนขอมลทเกยวกบพนท ซงขอมลเหลานสามารถแบงลกษณะของขอมลเชงพนทเปน 3 ลกษณะ ดงน 1.จด (Point) เปนลกษณะทใชแสดงต าแหนงของพนทนนๆ เชน จดสถานทส าคญ 2. เสน (Line) เปนลกษณะทใชแสดงลกษณะเชอมตอของพนทโดยทวไปจะแสดงเปนกลมของ เสน (Polyline) เชน ทางน า ทางถนน เปนตน 3. รปปด (Polygon) เปนลกษณะทใชแสดงพนทหรอขอบเขต เชน พนทจงหวด พนททะเลสาบ เปนตน ดงภาพท 1 จะแสดงลกษณะขอมลเชงพนททง 3 ลกษณะ

รป a รป b รป c

ภาพท 3 ลกษณะขอมลเชงพนทแบบ a) จด, b) เสน, c) รปปด (http://www.thaiwater.net/web/index.php/knowledge/130-knowledge/298-igis.html)

3. QGIS QGIS เปนโปรแกรมดาน GIS แบบมออาชพทสรางขนและเปนซอฟตแวรรหสเปดทไมเสยคาใชจาย (Free and Open Source Software – FOSS) สามารถท างานบน Linux, Unix, Mac OSX, Windows และ Android และสนบสนนรปแบบเวกเตอรราสเตอรและฐานขอมลจ านวนมากและมฟงกชนตางๆ QGIS สนบสนน shapefiles, coverages, geodatabases, dxf, MapInfo, PostGIS และรปแบบอน ๆ นอกจากนยงสนบสนนบรการเวบรวมถง Web Map Service และ Web Feature Service เพอใหสามารถใชขอมลจากแหลงขอมลภายนอกไดท างานรวมกบแพคเกจ GIS แบบโอเพนซอรสอน ๆ รวมถง PostGIS, GRASS GIS และ MapServer ปลกอนทเขยนดวยภาษา Python หรอ C + + จะขยายขดความสามารถของ QGIS ปลกอนสามารถก าหนดพกดทางภมศาสตรไดโดยใช Google Geocoding API ท าหนาทประมวลผลทางภมศาสตรคลายคลงกบเครองมอมาตรฐานทพบใน ArcGIS และเชอมตอกบ PostgreSQL / PostGIS, SpatiaLite และฐานขอมล MySQL ในป ค.ศ. 2002 กลมนกพฒนาจากประเทศเยอรมน ไดพฒนา Desktop GIS ชอวา QGIS ทสามารถเรยกใชขอมลเวกเตอร ราสเตอร ในรปแบบทเปนมาตรฐานแพรหลาย เชน Shapefile และ GeoTIFF QGIS สามารถแกไข Shape File format ได ซง QGIS ไดพฒนาบนพนฐานของ Qt ทเปนไลบรารส าหรบ Graphical User Interface (GUI) ทใชงานไดทง UNIX, Window และ Mac ในการพฒนาใชภาษา C++ เปนหลก นอกจากน QGIS ยงเชอมตอกบ Geospatial RDBMS เชน PostGIS/PostgreSQL ซงสามารถ

8

อานและเขยนฟเจอรทจดเกบใน PostGIS ไดโดยตรง สามารถ เชอมตอกบ GRASS GIS ไดท าใหสามารถเรยกดขอมลทจดเกบใน GRASS GIS โดยตรง และสามารถ เรยกใชฟงกชนตาง ๆ ของ GRASS ได ซงจะสนบสนนการวเคราะหเชงพนท (Spatial Analysis) ใน เบองตน และการแสดงผลขอมลเชงต าแหนงในรปแบบของแผนท การสรางและการแกไขขอมลเชง ต าแหนง (Spatial Data) และขอมลตาราง (Attribute Data) สามารถจดการขอมลไดงายโดยใช เครองมอตาม GUI ทก าหนดไวและนอกจากนนยงสามารถเขยนค าสงโ ป ร แ ก ร ม เ พ ม เ ต ม ด ว ย script ท เ ป น ภ า ษ า python ไ ด อ ก ด ว ย (http://gis.pwa.co.th/manual/1290764142.pdf)

4. PostgreSQL/PostGIS PostgreSQL คอ ระบบจดการฐานขอมลเชงวตถ สมพนธ เปนโปรแกรม OpenSource ท สามารถน าไปใชงานไดโดยไมมคาใชจายใดๆ เปนจดการฐานขอมลแบบ object-relational database management System หรอ (ORDBMS) ซงมตนแบบระบบฐานขอมลPOSTGRES 4.2 ของมหาวทยาลยแคลฟอร เนย วทยาลยเขตเบอรกเลย (UC Berkeley) ตงแตป ค.ศ. 1977 จดเปน Open Source Software ทมประวตยาวนานมากทสดตวหนงโพสตเกรสควเอล (PostgreSQL) หรอนยมเรยกวา โพสตเกรส (Postgres) เปนระบบจดการ ฐานขอมลในลกษณะของซอฟตแวรเสรภายใตสญญาอนญาตบเอสด ชอเดมของซอฟตแวรคอ โพสต เกรส ซงตอมาไดถกเปลยนเปนโพสตเกรสควเอล โดยประกาศออกมาจากทมหลกในป 2550 ชอของ โพสตเกรสมาจากชอ post-Ingres ซงหมายถงตวซอฟตแวรทพฒนาตอจากซอฟตแวรชออนเกรส ท าหนาทเปนตวกลางสอสารขอมลสงภาษาใหฐานขอมล เพอจดการและควบคมความถกตอง ความ ซบซอน และความสมพนธระหวางขอมลตางๆภายในฐานขอมล สวนประกอบของระบบ PostgreSQL องคประกอบพนฐานของระบบ PostgreSQL server ซงแสดงในดานซายของ pgAdmin III ม 5 อยาง คอ

1.Tablesspace เปนทตงทางกายภาพของ Objects

2.Databases เปนออบเจกตหลกของฐานขอมลใน PostgreSQL ซงเกบขอมลทงหมดทจะใชในระบบ เมอผใชเชอมตอกบ Database server จะเปนการเชอมตอกบ Database objects และเขาถงออบเจกตทงหมดในฐานขอมล ฐานขอมลแตละตวจะประกอบดวย objects 4 ชนดคอ Casts, Language, Replications, และ Schemas

3.Schemas (แสดงตอจากฐานขอมลแตละตว) เปน object ทส าคญทสดในฐานขอมล ซง schemas จะเกบ object อน ๆ อกหลายชนดเพอเกบขอมลในฐานขอมล

4.Gruop Roles ใชเพอก าหนดสทธการเขาถงแบบกลมของ user โดยมนจะท าหนาทควบคมการเขาถงในระดบ server

5.Login Roles

หรอ user account คอผใชฐานขอมล โดยผดแลฐานขอมลจะเปนผสรางใหกบแตละคน

9

PostGIS คอ สวนขยายเพมเตมทท าใหฐานขอมล PostgreSQL สามารถรองรบขอมลดาน สารสนเทศรมศาสตร (GIS) คอสนบสนนขอมลทสมพนธเชงพนท (Spatial) มการเพมเตมในสวน ฐานขอมลเชงวตถสมพนธ (object - reletionnal database system) ของ PostgreSQL ใหม การรองรบระบบสารสนเทศภมศาสตร (GIS Object) เขามาเกบไวในฐานขอมล (Database) PostGIS สนบสนน GIST indexs กบ R-tree indexs และฟงกชน เพอใชเปนพนฐานในการวเคราะห GIS Object (สทธชย ชส าโรง,2559)

5. SQL SQL ยอมาจาก Structured Query Language คอภาษาทใชในการเขยนโปรแกรม เพอจดการกบฐานขอมลโดยเฉพาะ เปนภาษามาตราฐานบนระบบฐานขอมลเชงสมพนธและเปนระบบเปด (open system) หมายถงเราสามารถใชค าสง sql กบฐานขอมลชนดใดกได และ ค าสงงานเดยวกนเมอสงงานผาน ระบบฐานขอมลทแตกตางกนจะได ผลลพธเหมอนกน ท าใหเราสามารถเลอกใชฐานขอมล ชนดใดกไ ดโดยไมตดยดกบฐานขอมลใดฐานขอมลหนง นอกจากนแลว SQL ยงเปนชอโปรแกรมฐานขอมล ซงโปรแกรม SQL เปนโปรแกรมฐานขอมลทมโครงสรางของภาษาทเขาใจงาย ไมซบซอน มประสทธภาพการท างานสง สามารถท างานทซบซอนไดโดยใชค าสงเพยงไมกค าสง โปรแกรม SQL จงเหมาะทจะใชกบระบบฐานขอมลเชงสมพนธ และเปนภาษาหนง ซงแบงการท างานไดเปน 4 ประเภท ดงน 1. Select query ใชส าหรบดงขอมลทตองการ

2. Update query ใชส าหรบแกไขขอมล

3. Insert query ใชส าหรบการเพมขอมล

4. Delete query ใชส าหรบลบขอมลออกไป

ปจจบนมซอฟตแวรระบบจดการฐานขอมล (DBMS ) ทสนบสนนการใชค าสง SQL เชน Oracle , DB2, MS-SQL, MS-Access

นอกจากนภาษา SQL ถกน ามาใชเขยนรวมกบโปรแกรมภาษาตางๆ เชน ภาษา c/C++ , VisualBasic และ Java

ประโยชนของภาษา SQL

1. สรางฐานขอมลและ ตาราง

2. สนบสนนการจดการฐานขอมล ซงประกอบดวย การเพม การปรบปรง และการลบขอมล

3. สนบสนนการเรยกใชหรอ คนหาขอมล

ประเภทของค าสงภาษา SQL

1. ภาษานยามขอมล(Data Definition Language : DDL) เปนค าสงทใชในการสรางฐานขอมล ก าหนดโครงสรางขอมลวาม Attribute ใด

ชนดของขอมล รวมทงการเปลยนแปลงตาราง และการสรางดชน ค าสง : CREATE,DROP,ALTER

10

2. ภาษาจดการขอมล (Data Manipulation Language :DML) เปนค าสงทใชในการเรยกใช เพม ลบ และเปลยนแปลงขอมลในตาราง ค าสง : SELECT,INSERT,UPDATE,DELETE

3. ภาษาควบคมขอมล (Data Control Language : DCL) เปนค าสงทใชในการก าหนดสทธการอนญาต หรอ ยกเลก การเขาถงฐานขอมล เพอปองกนความปลอดภยของฐานขอมล ค าสง : GRANT,REVOKE (http://www.mindphp.com/คมอ/73-คออะไร/2127-php-คออะไร.html)

6. ภาษา PHP ภาษา PHP คอ ภาษาคอมพวเตอรในลกษณะเซรฟเวอร-ไซด สครปต โดยลขสทธอยในลกษณะโอเพน

ซอรส ภาษาพเอชพใชส าหรบจดท าเวบไซต และแสดงผลออกมาในรปแบบ HTML โดยมรากฐานโครงสรางค าสงมาจากภาษา ภาษาซ ภาษาจาวา และ ภาษาเพรล ซง ภาษาพเอชพ นนงายตอการเรยนร ซงเปาหมายหลกของภาษาน คอใหนกพฒนาเวบไซตสามารถเขยน เวบเพจ ทมความตอบโตไดอยางรวดเรว คณสมบต การแสดงผลของพเอชพ จะปรากฏในลกษณะHTML ซงจะไมแสดงค าสงทผใชเขยน ซงเปนลกษณะเดนทพเอชพแตกตางจากภาษาในลกษณะไคลเอนต-ไซด สครปต เชน ภาษาจาวาสครปต ทผชมเวบไซตสามารถอาน ดและคดลอกค าสงไปใชเองได นอกจากนพเอชพยงเปนภาษาทเรยนรและเรมตนไดไมยาก โดยมเครองมอชวยเหลอและคมอทสามารถหาอานไดฟรบนอนเทอรเนต ความสามารถการประมวลผลหลกของพเอชพ ไดแก การสรางเนอหาอตโนมตจดการค าสง การอานขอมลจากผใชและประมวลผล การอานขอมลจากดาตาเบส ความสามารถจดการกบคกก ซงท างานเชนเดยวกบโปรแกรมในลกษณะCGI คณสมบตอนเชน การประมวลผลตามบรรทดค าสง (command line scripting) ท าใหผเขยนโปรแกรมสรางสครปตพเอชพ ท างานผานพเอชพ พารเซอร (PHP parser) โดยไมตองผานเซรฟเวอรหรอเบราวเซอร ซงมลกษณะเหมอนกบ Cron (ใน ยนกซหรอลนกซ) หรอ Task Scheduler (ในวนโดวส) สครปตเหลานสามารถน าไปใชในแบบ Simple text processing tasks ได การแสดงผลของพเอชพ ถงแมวาจดประสงคหลกใชในการแสดงผล HTML แตยงสามารถสราง XHTML หรอ XML ได นอกจากนสามารถท างานรวมกบค าสงเสรมตางๆ ซงสามารถแสดงผลขอมลหลก PDF แฟลช (โดยใช libswf และ Ming) พเอชพมความสามารถอยางมากในการท างานเปนประมวลผลขอความ จาก POSIX Extended หรอ รปแบบ Perl ทวไป เพอแปลงเปนเอกสาร XML ในการแปลงและเขาสเอกสาร XML เรารองรบมาตรฐาน SAX และ DOM สามารถใชรปแบบ XSLT ของเราเพอแปลงเอกสาร XML เมอใชพเอชพในการท าอคอมเมรซ สามารถท างานรวมกบโปรแกรมอน เชน Cybercash payment, CyberMUT, VeriSign Payflow Pro และ CCVS functions เพอใชในการสรางโปรแกรมท าธรกรรมทางการเงน การรองรบPHP ค าสงของพเอชพ สามารถสรางผานทางโปรแกรมแกไขขอความทวไป เชน โนตแพด หรอ vi ซงท าใหการท างานพเอชพ สามารถท างานไดในระบบปฏบตการหลกเกอบทงหมด โดยเมอเขยนค าสงแลวน ามาประมวลผล Apache, Microsoft Internet Information Services (IIS) , Personal Web Server, Netscape แ ล ะ iPlanet servers, Oreilly Website Pro server, Caudium, Xitami, OmniHTTPd, และอนๆ อกมากมาย. ส าหรบสวนหลกของ PHP ยงม Module ในการรองรบ CGI มาตรฐาน ซ ง PHP สามารถท างานเปนตวประมวลผล CGI ดวย และดวย PHP, คณมอสรภาพในการเลอก ระบบปฏบตการ และ เวบเซรฟเวอร นอกจากนคณยงสามารถใชสรางโปรแกรมโครงสราง สรางโปรแกรมเชงวตถ (OOP) หรอสรางโปรแกรมทรวมทงสองอยางเขาดวยกน แมวาความสามารถของค าสง OOP มาตรฐาน

11

ในเวอรชนนยงไมสมบรณ แตตวไลบรารทงหลายของโปรแกรม และตวโปรแกรมประยกต (รวมถง PEAR library) ไดถกเขยนขนโดยใชรปแบบการเขยนแบบ OOP เทานน PHP สามารถท างานรวมกบฐานขอมลไดหลายชนด ซงฐานขอมลสวนหนงทรองรบไดแก ออราเคล dBase PostgreSQL IBM DB2 MySQL Informix ODBC โครงสรางของฐานขอมลแบบ DBX ซงท าใหพเอชพใชกบฐานขอมลอะไรกไดทรองรบรปแบบน และ PHP ยงรองรบ ODBC (Open Database Connection) ซงเปนมาตรฐานการเชอมตอฐานขอมลทใชกนแพรหลายอกดวย คณสามารถเชอมตอกบฐานขอมลตางๆ ทรองรบมาตรฐานโลกนได PHP ยงสามารถรองรบการสอสารกบการบรการในโพรโทคอลตางๆ เชน LDAP IMAP SNMP NNTP POP3 HTTP COM (บนวนโดวส) และอนๆ อกมากมาย คณสามารถเปด Socket บนเครอขายโดยตรง และ ตอบโตโดยใช โพรโทคอลใดๆ กได PHP มการรองรบส าหรบการแลกเปลยนขอมลแบบ WDDX Complex กบ Web Programming อนๆ ทวไปได พดถงในสวน Interconnection, พเอชพมการรองรบส าหรบ Java objects ใหเปลยนมนเปน PHP Object แลวใชงาน คณยงสามารถใชรปแบบ CORBA เพอเขาส Remote Object ไดเชนกน โครงสรางของภาษา PHP ในชวงแรกภาษาทนยมใชงานบนระบบเครอขาย คอ ภาษา HTML (Hypertext Markup Language) แตภาษา HTML มลกษณะเปน Static คอ ภาษาทมลกษณะของขอมลคงท ซงไมเพยงพอตอความตองการในปจจบนทนยมใชระบบเครอขาย Internet เปนศนยกลางในการตดตอระหวางกน ท าใหตองการใชเวบไซตทมลกษณะเปนแบบ Dynamic คอ เวบไซตทขอมลสามารถเปลยนแปลงไดโดยอตโนมตตามเงอนไขตาง ๆ ทผเขยนเวบไซตเปนผก าหนด และการควบคมการท างานเหลานจะกระท าโดยโปรแกรมภาษาสครปต เชน ภาษา PHP ซงเปนภาษาหนงทไดรบความนยมเปนอยางมากในปจจบน PHP ถกสรางขนในป ค.ศ.1994 โดย Rasmus Lerdorf ตอมามผใหความสนใจเปนจ านวนมาก จงไดออกเปนแพคเกจ "Personal Home Page" ซงเปนทมาของ PHP โดยภาษา PHP เปนแบบ Server Side Script และเปน Open Source พอกลางป ค.ศ.1995 เขากไดพฒนาตวแปลภาษา PHP ขนมาใหม โดยใชชอวา PHP/FI เวอรชน 2 ซงไดเพมความสามารถในการรบขอมลทสงมาจากฟอรมของ HTML (จงม ชอวา FI หรอ Form Interpreter) นอกจากนนยงเพมความสามารถในการตดตอกบฐานขอมลอกดวย จงท าใหผคนเรมหนมาสนใจ PHP กนมากขน ในป 1997 มผรวมพฒนา PHP เพมอก 2 คน คอ Zeev Suraski และ Andi Gutmans (กลมทเรยกตวเองวา Zend ซงยอมาจาก Zeev และ Andi ) โดยไดแกไขขอบกพรองตางๆ และเพมเตมเครองมอใหมากขน ภาษา PHP มลกษณะเปน embedded script หมายความวาเราสามารถฝงค าสง PHP ไวในเวบเพจรวมกบค าสง(Tag) ของ HTML ได และสรางไฟลทมนามสกลเปน .php, .php3 หรอ .php4 ซงไวยากรณทใชใน PHP เปนการน ารปแบบของภาษาตางๆ มารวมกนไดแก C, Perl และ Java ท าใหผใชทมพนฐานของภาษาเหลานอยแลวสามารถศกษา และใชงานภาษานไดไมยาก ความสามารถของภาษา PHP - เปนภาษาทมลกษณะเปนแบบ Open source ผใชสามารถ Download และน า Source code ของ PHP ไปใชไดโดยไมเสยคาใชจาย - เปนสครปตแบบ Server Side Script ดงนนจงท างานบนเวบเซรฟเวอร ไมสงผลกบการท างานของเครอง Client โดย PHP จะอานโคด และท างานทเซรฟเวอร จากนนจงสงผลลพธทไดจากการประมวลผลมาทเครองของผใชในรปแบบของ HTML ซงโคดของ PHP นผใชจะไมสามารถมองเหนได - PHP สามารถท างานไดในระบบปฎบตการทตางชนดกน เชน Unix, Windows, Mac OS หรอ Risc OS อยางมประสทธภาพ เนองจาก PHP เปนสครปตทตองท างานบนเซรฟเวอร ดงนนคอมพวเตอรส าหรบเรยกใชค าสง PHP จงจ าเปนตองตดตงโปรแกรมเวบเซรฟเวอรไวดวย เพอใหสามารถประมวลผล PHP ได - PHP สามารถท างานไดในเวบเซรฟเวอร

12

หลายชนด เชน Personal Web Server (PWS), Apache, OmniHttpd และ Internet Information Service (IIS) เปนตน - ภาษา PHP สนบสนนการเขยนโปรแกรมเชงวตถ (Object Oriented Programming) - PHP มความสามารถในการท างานรวมกบระบบจดการฐานขอมลทหลากหลาย ซงระบบจดการฐานขอมลทสนบสนนการท างานของ PHP เชน Oracle, MySQL, FilePro, Solid, FrontBase, mSQL และ MS SQL เปนตน - PHP อนญาตใหผใชสรางเวบไซตซงท างานผานโปรโตคอลชนดตางๆ ได เชน LDAP, IMAP, SNMP, POP3 และ HTTP เปนตน - โคด PHP สามารถเขยน และอานในรปแบบของ XML ได ลกษณะเดนของ PHP

1.ใชไดฟร 2. PHP เปนโปร แกรมวงขาง Sever ดงนนขดความสามารถไมจ ากด 3. Conlatfun นนคอPHP วงบนเครอง UNIX, Linux, Windows ไดหมด 4.เรยนรงาย เนองจาก

PHP ฝงเขาไปใน HTML และใชโครงสรางและไวยากรณภาษางายๆ 5.เรวและมประสทธภาพ โดยเฉพาะเมอใชกบ Apache Xserve เพราะไมตองใชโปรแกรมจาก

ภายนอก 6.ใชรวมกบ XML ไดทนท 7.ใชกบระบบแฟมขอมลได

8.ใชกบขอมลตวอกษรไดอยางมประสทธภาพ 9.ใชกบโครงสรางขอมล แบบ Scalar, Array, Associative array 10.ใชกบการประมวลผลภาพได

(Peerapas Phongeratiyut, 2558)

7. ภาษา HTML คอ ภาษาหลกทใชในการเขยนเวบเพจ โดยใช Tag ในการก าหนดการแสดงผล HTML ยอมาจากค าวา Hypertext Markup Language โดย Hypertext หมายถง ขอความทเ ชอมตอกนผานลง (Hyperlink) Markup language หมายถงภาษาทใช Tag ในการก าหนดการแสดงผลสงตางๆทแสดงอยบนเวบเพจ ดงนน HTML จงหมายถง ภาษาทใช Tag ในการก าหนดการแสดงผลเวบเพจทตางกเชอมถงกนใน Hyperspace ผาน Hyperlink ความเปนมาของ HTML เรมขนเมอป 1980 เมอ Tim Berners Lee เสนอตนแบบส าหรบนกวจยใน CERN เพอแลกเปลยนเอกสาร ขอมลดานการวจย โดยใชชอวา Enquire ในป 1990 เคาไดเขยนโปรแกรมเบราเซอร และทดลองรนบนเซฟเวอรทเคาพฒนาขน HTML ไดรบการรจกจาก HTML Tag HTML ถกพฒนาจาก SGML และ Tim กคดเสมอนวา HTML เปนโปรแกรมยอยของ SGML อยในตอนนน ตอมาในป 1996 เพอก าหนดมาตรฐานใหตรงกน W3C World Wide Web Consortium จงเปนผก าหนดสเปกทงหมดของ HTML และป 1999 HTML 4.01 กถอก าเนดขน โดยม HTML 5 ซงเปน Web Hypertext Application ถกพฒนาตอมาในป 2004 นอกจากนยงมการพฒนาไปเปน XHTML ซง คอ Extended HTML ซงมความสามารถและมาตรฐานทรดกมกวาอกดวย โดยอยภายใตการควบคมของ W3C (World Wide Web Consortium) โครงสรางของภาษา HTML การเขยนโฮมเพจดวยภาษา HTML นน เอกสาร HTML จะประกอบดวย สวนประกอบ 2 สวน ดงน 1) สวน Head คอสวนทจะเปนหว (Header) ของหนาเอกสารทวไป หรอสวนชอ เรอง (Title) ของหนาตางการท างานในระบบ Windows

13

2) สวน Body จะเปนสวนเนอหาของเอกสารนนๆ ซงจะประกอบดวย Tag ค าสง ในการจดรปแบบ หรอตกแตงเอกสาร HTML โ ด ย ท ง สอ ง ส ว น ด ง ก ล า วจ ะ อย ภ า ย ใ น Tag โ ด ย ค า ส ง เ ร ม ต นข อ ง เ อก ส า ร HTML ค อ <HTML>....</HTML> ค าสงเรมตนการเขยนเวบ <HEAD>....</HEAD> เปนสวนหวของเวบเพจ บอกคณสมบตของเวบเพจ <TITLE>....</TITLE> ใชบอกชอของเวบเพจ <BODY>....</BODY> เปนสวนส าคญทสด เพราะเปนสวนทแสดงเนอหาทงหมด ซงรวมถง ขอความ รปภาพ เสยง ตาราง การเชอมโยง (link) ( http://www.codingbasic.com/html.html)

8. ภาษา JavaScript JavaScript คอ ภาษาคอมพวเตอรส าหรบการเขยนโปรแกรมบนระบบอนเตอรเนตท ก าลงไดรบความนยมอยางสง JavaScript เปนสครปตเชงวตถ (Script) ซงในการสราง และ พฒนาเวบไซด (ใชรวมกบ HTML) เพอใหเวบไซดของเราดมการเคลอนไหว สามารถตอบสนอง ผใชงานไดมากขน ซงมวธการท างานในลกษณะ "แปลความและด าเนนงานไปทละค าสง " (Interpret) หรอเรยกวา (Object Oriented Programming) มเปาหมายในการออกแบบ และ พฒนาโปรแกรมในระบบอนเตอรเนต ส าหรบผเขยนดวยภาษา HTML สามารถท างานขาม แพลตฟอรมได โดยท างานรวมกบ ภาษา HTML และภาษา Java ไดทงทางดาน Client และ Server JavaScript ถกพฒนาขนโดย (Netscape Communications Corporation) โดยใชชอ วา Live Script ออกมาพรอมกบ Netscape Navigator 2.0 เพอใชสรางเวบเพจโดยตดตอกบ เซรฟเวอรแบบ Live Wire ตอมา Netscape จงไดรวมมอกบบรษทซนไมโครซสเตมสปรบปรง ระบบของบราวเซอร เพอใหสามารถตดตอใชงานกบภาษาจาวาได และไดปรบปรง LiveScript ใหมเมอป 2538 แลวตงชอใหมวา JavaScript สามารถท าใหการสรางเวบเพจมลกเลนตางๆ มากมาย และยงสามารถโตตอบกบผใชไดอยางทนท เชน การใชเมาสคลกหรอการกรอกขอความ ในฟอรม เปนตน เนองจาก JavaScript ชวยใหผพฒนาสามารถสรางเวบเพจไดตรงกบความตองการ และมความนาสนใจมากขน ประกอบกบเปนภาษาเปดทใครกสามารถน าไปใชได ดงนนจงไดรบ ความนยมเปนอยางสง มการใชงานกนอยางกวางขวาง รวมทงไดถกก าหนดใหเปนมาตรฐานโดย ECMA การท างานของ JavaScript จะตองมการแปลค าสง ซงขนตอนนจะถกจดการโดย บราวเซอร (เรยกวาเปน client-side Script) ดงนน JavaScript จงสามารถท างานไดเฉพาะบน บราวเซอรทสนบสนน ซงปจจบนบราวเซอรเกอบทงหมดกสนบสนน JavaScript แลว อยางไรก ตามสงทตองระวงคอ JavaScript มการพฒนาเวอรชนใหมๆ ออกมาดวย ดงนนถาน าโคดของ เวอรชนใหมไปรนบนบราวเซอรรนเกาทยงไมสนบสนนกอาจจะท าใหเกด error ได การท างานของ JavaScript 1. JavaScript ท าใหสามารถใชเขยนโปรแกรมแบบงายๆ โดยไมตองพงภาษาอน

2 JavaScript มค าสงทตอบสนองกบผใชงาน เชน เมอผใชคลกทปมหรอ Checkbok กสามารถสง

3. ใหเปดหนาตางใหมได ท าใหเวบไซดของเรามปฏสมพนธกบผใชงานมากขน

14

4. JavaScript สามารถเขยนหรอเปลยนแปลง HTML Element ได นนคอสามารถ เปลยนแปลงรปแบบการแสดงผลของเวบไซตได หรอหนาแสดงเนอหาสามารถซอนหรอแสดง เนอหาไดแบบงายๆ

5. JavaScript สามารถตรวจสอบขอมลได

6. JavaScript สามารถใชในการตรวจสอบผใชได เชน ตรวจสอบวาผใช ใช Web Browser อะไร

7. JavaScript สราง Cookies (เกบขอมลของผใชในคอมพวเตอรของผใชเอง) ขอดและขอเสยของ JavaScript การท างานของ JavaScript เกดขนบนบราวเซอร (เรยกวาเปน client-side script) ดงนนไมวาจะใชเซรฟเวอรอะไร กยงคงสามารถใช JavaScript ในเวบเพจได ตางกบภาษา - สครปตอนๆ เชน Per, PHP, หรอ ASP ซงตองแปลความ และท างานทตวเครองเซรฟเวอร (เรยกวา server-side script) ดงนนจงตองใชบนเซรฟเวอรทสนบสนนภาษาเทานเทานนจาก ลกษณะดงกลาวกท าให JavaScript มขอจ ากด คอ ไมสามารถรบและสงขอมลตางๆ กบ เซรฟเวอรโดยตรง เชน การอานไฟลจากเซรฟเวอร เพอน ามาแสดงบนเวบเพจหรอรบ ขอมลจาก ผชม เพอน าไปเกบบนเซรฟเวอร เปนตน (www2.cvc.ac.th/trasai/t51/39012009/JavaScript) 9. Open Source

เปนซอฟตแวรประเภทฟรอกชนดหนงโดยจะเปดให ผ ใชงานสามารถเหน Source Code ของโปรแกรมทพฒนาขน หรอน าเอาโปรแกรมหรอซอฟตแวรนน ๆ ไปพฒนาตอ ยอดในแนวทางของอน ๆกไดแตกตองอยภายใตขอตกลงและขอก าหนดของผพฒนา Open Source อาจเรยกไดอกแบบวา “ซอฟตแวรเสร” ซ ง ไมมขอจ ากดในการน าเอาไปใชงาน Open Source ยงรวมไปถงระบบปฏบ ตการ Linux ซ ง เปนระบบปฏบตการทเปดใหผใชงานไดใชงาน รวมถงมนกพฒนาระบบทงหลายน าเอา Linux มาสรางประโยชนใหสงคมออนไลนมากมาย ไมวา จะน าเอาไป Config เปน Web Server ทน าเอาซอฟตแวรเสรอยางเชน PHP และ PosgreSQL รวม ไปถง phppgAdmin มาใชงาน ซอฟตแวรเหลานลวนแลวแตเปนซอฟตแวร Open Source ดวยกน ทงสน แตถาเปนซอฟตแวร Open Source ในฝงของระบบปฏบตการ Windows เชนโปรแกรมเวบ เบราวเซอร Firefox กถอวาเปนซอฟตแวร Open Source ทสามารถน าเอา Source Code มา พฒนาตอยอดไดเองเชนกน (https://downloaddd.in.th/knowledge/faq/open-source)

10. pgRouting pgRouting Library เปนเครองมอในการวเคราะหค านวนหาเสนทางจากสถานพยาบาลไปยงต าแหนงของสถานททองเทยวหากเกดกรณเหตฉกเฉนขน pgRouting Library ซงเปนเครองมอทใชในการวเคราะหหาเสนทางทสนทสด ตามระยะทางเสนทางสญจรปกตดงน pgRouting เปนเครองมอทท างานรวมกบฐานขอมลเชงพนท PostgreSQL/PostGIS โดยเพมฟงกชนการค านวณหาระยะทาง (Network Analysis) และการวเคราะหโครงขายอนๆ(pgRouting Contributors, 2013) pgRouting ไดพฒนามาจาก pgDijkstra เขยนโดย Sylvain Pasche จาก camptocamp ตอมาไดมการน าไปพฒนาตอโดยบรษท Orkney ประเทศญปน และเปลยนชอใหม เปน pgRouting อยางเปนทางการ (Kastl and Junod, 2011) วตถประสงคหลกของ pgRouting คอ จดหาฟงกชนส าหรบการใชงานใน PostgreSQL/PostGIS เพอสรางเครองมอในการค านวนหาระยะทาง ซงจะคลายๆ กบ ชดค าสงในโปรแกรมบางโปรแกรม เชน ค าสงการคนหาระยะทางทใกลทสดใน

15

โปรแกรม ArcGIS Desktop หรอการขอเสนทางใน Google Maps ไมเฉพาะในเรองของระยะทางบนถนนเทานน แตสามารถ ใชไดกบขอมลอะไรกไดทเกยวกบระยะทาง การสนเปลองเวลา น ามน เงน เชน เสนทางเกยวกบการเดนเรอ และระบบเนตเวรคแมขายบนอนเตอรเนต เปนตน นอกจาก pgRouting สามารถค านวณหาระยะทางทสนทสดและเรวทสดแลว pgRouting ยงสามารถชวยในการวางแผนการเดนทางในการจดสงสนคาหลายๆ ทในการเดนทางครงเดยวกน เชน จะไปสงของใหลกคาทงหมด 4 ท โดยเรมตนเดนทางจากโรงงานผผลต ควรจะ ไปสงของใหลกคารายใดกอนหลง ตามล าดบ เพอชวยในการประหยดเวลาและน ามน ซงฟงกชนของ pgRouting มทงหมดดงน

Topology Functions pgr_createTopology - to create a topology based on the geometry. pgr_createVerticesTable - to reconstruct the vertices table based on the source and target information. pgr_analyzeGraph - to analyze the edges and vertices of the edge table. pgr_analyzeOneway - to analyze directionality of the edges. pgr_nodeNetwork -to create nodes to a not noded edge table. Routing Functions All pairs - All pair of vertices.

pgr_floydWarshall - Floyd-Warshall’s Algorithm pgr_johnson- Johnson’s Algorithm pgr_astar - Shortest Path A* pgr_bdAstar - Bi-directional A* Shortest Path pgr_bdDijkstra - Bi-directional Dijkstra Shortest Path

dijkstra - Dijkstra family functions pgr_dijkstra - Dijkstra’s shortest path algorithm. pgr_dijkstraCost - Use pgr_dijkstra to calculate the costs of the shortest paths. Driving Distance - Driving Distance pgr_drivingDistance - Driving Distance

Post processing pgr_alphaShape - Alpha shape computation pgr_pointsAsPolygon - Polygon around set of points pgr_ksp - K-Shortest Path pgr_trsp - Turn Restriction Shortest Path (TRSP) pgr_tsp - Traveling Sales Person

ซงงสวนใหญฟงกชนการคนหาเสนทางทสนทสดทใชมดงน 1.ฟงกชน One to One เสนทางจากNodeหนงไปยงอกNodeหนง 2.ฟงกชน One to Many เสนทางจากNodeหนงไปยงอกหลายNode

16

3.ฟงกชน Many to One เสนทางจากหลายNodeไปยงอกNodeหนง 4.ฟงกชน Many to Many เสนทางจากหลายNodeไปยงอกหลายNodeหนง

ซงปจบน pgRouting เปนเวอรชน 2.5 สามารถดไดจาก(https://workshop.pgrouting.org/2.5/) (Choosumrong et al., 2012)

11. อลกอรทมของไดกสตรา อลกอรทมของไดกสตรา (Dijkstra's algorithm) ทเปนหลกการค านวณทางคณตศาสตรของ Dijkstra (E.W. Dijkstra, 1959) ซงเปนการน าเอาทฤษฎกราฟมาใชในการ านวนหาเสนทางการสญจรจากสถานททองเทยวไปยงโรงพยาบาล โดยใชเวอรเทกซ (Vertex) และเสน (Edge) แทนถนนทเชอมตอกน ก าหนดระยะทางระหวางจดเปนตวเลขลงไปในกราฟ โดยเรยกกราฟดงกลาววากราฟถวงน าหนก (Weighted Graph) คอกราฟทเสนเชอมทกเสนมคาน าหนกทมคาเปนจ านวนจรงทไมตดลบ (พระวฒน และสเพชร จรขจรกล , 2557) ส าหรบการค านวณหาเสนทางทสนทสด จากจดเรมตน (start_vid) ไปยงจดสนสด (end_vid) ซงสามารถค านวณเสนทางไดทงแบบ directed graph และ undirected graph (pgRouting Contributors, 2013) ดงสตร จากสตร 𝐺 = (𝑉, 𝐸) (1) เมอ V(G) คอ เซตของเวอรเทกซ (Vertex) ในกราฟ E(G) คอ เซตของเสน (Edge) ในกราฟ 𝑉(𝑥) = min{𝑉(𝑥), 𝑊(𝑥) + 𝑑(𝑦)} (2)

d(y) = dist(v,y) | min { distance from node start to node y} W(x) = weight (i,j) | Distance from i to j : edge (i,j)

ภาพท 4 การท างานของกราฟ Dijkstra

(ทมา: Choosumrong et al., 2011) กราฟถวงคาน าหนก Gd = (V,E) จะถกก าหนดโดย เซตของเวอรเทกซ (V)

17

V = source ∪ target ∪ startvid ∪ endvidเซตของเสน (E)

(pgRouting Contributors, 2013)

12. Geoserver GeoServer เปนแมขายแผนทแบบ open source ทรองรบมาตรฐาน ISO/OGC ทง WMS WFS และ WCS นอกจากนนยงรองรบการก าหนดการแสดงผลดวย Style Layer Description (SLD) และการคดกรอง การเขาถงขอมลดวย มาตรฐาน Filter Encoding ขดความสามารถนเกดจากการผนวกรวมความสามารถของซอฟตแวร GeoTools Geoserver พฒนาดวย Java ดงนน Geoserver จง เปน Serverlet การใชงาน Geoserver สามารถเชอมตอกบขอมลภมศาสตรไดหลากหลาย ทงในรปแบบของ Vector ทเปน file based เ ชน Shapefile หร อ Geospatial Database เ ชน PostGIS, Oracle, ArcSDE, DB2, MySQL และ SQL Server เปนตน หรอเชอมตอกบขอมลทเปน Raster เชน ArcGrid และ GeoTIFF เปนตน การเรยกใชและปรบแตง Map Service โดยใช Geoserver สามารถท างานผานทาง Web Browser ไดทงสน ซง WMS และ WFS มลายละเอยดดงตอไปน 12.1.การใหบรการแผนทออนไลนในรปแบบ WMS (Web Map Service) WMS (Web Map Service) เปนขอก าหนดมาตรฐานทใหอนเทอรเฟสแบบ HTTP ส าหรบการรองขอภาพแผนททมพกดจากฐานขอมลภมสารสนเทศทถกเผยแพรผานเครอขาย Internet/Intranet การรองขอผาน WMS จะระบถงชนขอมลภมศาสตรและพนททสนใจทจะประมวลผล การตอบสนองจากการรองขอจะอยในลกษณะของภาพแผนททมพกด (เชน JPEG, PNG, ฯลฯ) ซงสามารถแสดงผลไดบนเบราวเซอร กอนทจะเขาใชบรการ ผใชจะตองรวาระบบใหบรการนนๆ มอะไรใหบรการอยบาง ระบบใหบรการทสนบสนนมาตรฐาน OGC สามารถตรวจสอบรายละเอยดการใหบรการในสวนของรปแผนทได ผานการรองขอตามมาตรฐาน WMS และ เร ยก ใ ชบรการจากรายการ Request ต วอย า ง เ ชน WMS_get. . . . (GetCapabilities, GetMap, GetFeatureInfo, etc) ตามดวยความตองการในการรองขออนๆ WMS (Web Map Service) ประกอบดวย 3 Operation หลก ดงน 1.GetCapabilities คอการรองขอขอมลรายละเอยด คณสมบต และความสามารถของแมขายเพอขอใชบรการแผนท ในรปแบบ XML เชน Name (ชอชนขอมล), BoundingBox (ขอบเขตขอมล), Style (การแสดงผล), SRS (ระบบพกด) และอนๆ เปนตน โดยมตวอยางโครงสรางของเอกสารการรองขอดงน

http://localhost:8080/geoserver/wms?&request=getCapabilities &layers=Workspace:Layername&bbox=97,5,105,20&styles=administrator &srs=EPSG:4326

18

ตารางท 1ตารางอธบายพารามเตอรการรองขอ WMS GetCapabilities

ล าดบ พารามเตอร ค าอธบาย 1 bbox คาพกดสองจดประกอบเปนรปสเหลยมผนผา คอ พกดลางซาย (x,y) และ พกดบน

ขวา (x,y) ตามล าดบ ทงนตองสมพนธกบระบบพกดทระบในตวแปร srs ดวย 2 styles เลอก style ส าหรบแสดงผลท WMS เตรยมไวให (ถาไมระบจะใช default ท

ผใชบรการก าหนดไว) 3 format ฟอรแมทของภาพแผนททจะสงกลบมาใหผขอใชบรการ 4 request ชอของ operation ดงเชน GetMap, GetCapabilities เปนตน 5 layers ชอของชนขอมลแบบเรยงล าดบโดยมเครองหมาย “,” ขน 6 srs ระบบพกด EPSG:4326 (ระบบพกดภมศาสตร)

2.GetMap คอการรองขอภาพแผนท ผใชสามารถระบชอชนขอมล ขอบเขตพนท ขนาดจดภาพ และรปแบบแรสเตอร แมขายจะตอบสนองดวยภาพแผนท ท Web browser ทวไปอานได เชน GIF PNG JPEG TIFF และอนๆ เปนตน โดยมตวอยางโครงสรางของเอกสารการรองขอดงน ตารางท 2ตารางอธบายพารามเตอรการรองขอ WMS GetMap

ล าดบ พารามเตอร ค าอธบาย 1 bbox คาพกดสองจดประกอบเปนรปสเหลยมผนผา คอ พกดลางซาย (x,y) และ พกดบน

ขวา (x,y) ตามล าดบ ทงนตองสมพนธกบระบบพกดทระบในตวแปร srs ดวย 2 styles เลอก style ส าหรบแสดงผลท WMS เตรยมไวให (ถาไมระบจะใช default ท

ผใชบรการก าหนดไว) 3 format ฟอรแมทของภาพแผนททจะสงกลบมาใหผขอใชบรการ 4 request ชอของ operation ดงเชน GetMap, GetCapabilities เปนตน 5 layers ชอของชนขอมลแบบเรยงล าดบโดยมเครองหมาย “,” ขน 6 width ความกวางของภาพแผนท (หนวย: pixel) 7 height ความสงของภาพแผนท (หนวย: pixel) 8 srs ระบบพกด EPSG:4326 (ระบบพกดภมศาสตร)

3. GetFeatureInfo คอการรองขอระบบใหบรการแผนท เพอท าการคนคนขอมลแผนทดวยเงอนไขทาง ต าแหนง ซงสามารถขอผาน GetFeatureInfo ได ผใชสามารถระบพกด x, y ของจดอางองสมพทธ ทวไปเทยบกบภาพแผนท แมขายจะตอบกลบดวยขอมล Attribute ในรปแบบ HTML GML หรอรปแบบ ASCII อยางงาย โดยมตวอยางโครงสรางของเอกสารการรองขอดงน

http://localhost:80/geoserver/wms?bbox=97,5,105,20&styles=administrator &format=image/png&request=GetMap&layers=Workspacename:Layername &width=550&height=250&srs=EPSG:4326

19

ตารางท 3ตารางอธบายพารามเตอรการรองขอ WMS GetFeatureInfo ล าดบ พารามเตอร ค าอธบาย 1 bbox คาพกดสองจดประกอบเปนรปสเหลยมผนผา คอ พกดลางซาย (x,y) และ พกด

บนขวา (x,y) ตามล าดบ ทงนตองสมพนธกบระบบพกดทระบในตวแปร srs ดวย 2 styles เลอก style ส าหรบแสดงผลท WMS เตรยมไวให (ถาไมระบจะใช default ท

ผใชบรการก าหนดไว) 3 format ฟอรแมทของภาพแผนททจะสงกลบมาใหผขอใชบรการ 4 info_format รปแบบของผลลพธ (default เปน text/plain) 5 request ชอของ operation ดงเชน GetMap, GetCapabilities เปนตน 6 layers ชอของชนขอมลแบบเรยงล าดบโดยมเครองหมาย “,” ขน 7 query_layers ชอชนขอมลทจะสบคน 8 width ความกวางของภาพแผนท (หนวย: pixel) 9 height ความสงของภาพแผนท (หนวย: pixel) 10 x ต าแหนงของพกดทจะสบคนในแนวแกน x (หนวย: pixel) 11 y ต าแหนงของพกดทจะสบคนในแนวแกน y (หนวย: pixel)

12.2 การใหบรการแผนทออนไลนในรปแบบ WFS (Web Feature Service) Web Feature Service (WFS) เปนขอก าหนดมาตรฐานทใชในการเขาถงขอมลปรภมชนดเวกเตอร จากผใหบรการขอมล โดยผใชสามารถเขาถงขอมลดวยการดาวนโหลดขอมลภมสารสนเทศผานระบบอนเตอรเนตหรอสามารถเรยกมาวเคราะหเชงพนทได การท างานของ Web Feature Service สามารถแบงไดเปน 2 ประเภท ไดแก Basic WFS (การใชงานตดตอผาน http อยางงาย) และ Transaction WFS (การเรยกใชชนดเปนระเบยน หรอ WFS-T) (สรรเพชร ชอนธไพศาล, 2556) Basic WFS ประกอบดวย 3 Operation ดงน 1.GetCapabilities คอการตรวจสอบคณสมบต และความสามารถของแมขายเพอขอใชบรการแผนท รปแบบการตอบกลบทสามารถท างานได มกจะเรยกใชเปนค าสงแรกเพอสรางเปน User Interface ในกรณทผใชบรการตองการทราบขอมลเกยวกบคณสมบตของ WFS ทเปดใหบรการ ดงเชน มขอมลอะไรบาง มโอเปอเ ร ช น ท ใ ห เ ร ย ก ใ ช ง า น อ ะ ไ ร บ า ง น น ผ ใ ช บ ร ก า ร จ ะ ต อ ง เ ร ย ก ข อ ม ล เ ห ล า น ผ า น โอเปอเรชน WFS:GetCapabilities ซง สงท WFS สงกลบมาใหกบผขอใชบรการนน คอ ไฟลขอความ ทมโครงสรางเปน XML สวนใหญมกจะเรยกวา "เอกสาร WFS:GetCapabilities" ตามชอโอเปอเรชน หรอเรยกสน ๆ วา "เอกสาร Capabilities"

20

ตารางท 4ตารางอธบายพารามเตอรการรองขอ WFS GetCapabilities

ล าดบ พารามเตอร ค าอธบาย 1 ows:ServiceIndentification ขอมลเกยวกบตวบรการเอง ดงเชน ชอ, เวอรชน, ค าส าคญ

(keyword) เปนตน 2 ows:ServiceProvider ขอมลเกยวกบผใหบรการ ดงเชน ชอหนวยงาน, เบอรโทรศพท,

ทอย เปนตน 3 ows:OperationsMetadata ขอมลเกยวกบโอเปอเรชน (ฟงกชน) ทใหบรการ ดงเชน

GetCapabilities, GetFeature, DescribeFeatureType เปนตน

4 wfs:FeatureTypeList ขอมลเกยวกบ feature type และโอเปอเรชนของแต feature ทใหบรการ ดงเชน ชอ, ค าอธบาย, ระบบพกด, กรอบขอมล (Bounding box) เปนตน

5 wfs:ServesGMLObjectType แสดงขอมล GML Object ทสนบสนนและไมไดรางมาจาก gml:AbstractFeatureType ทใชรวมกบโอเปอเรชน GetGMLObject

6 ogc:Filter_Capabilities แสดงขอมลเกยวกบโอเปอเรชน หรอฟงกชนทสามารถใชในการสบคน หรอกรองขอมลทสนบสนนใน WFS น

2.DescribeFeatureType คอ การบรรยายโครงสรางของ feature ทจะใหบรการ เชน รายละเอยดของข อ ม ล attribute ท ป ร ะ ก อ บ อ ย ด ว ย ก น เ ม อ ท ร า บ ว า WFS ท จ ะ ข อ ใ ช บ ร ก า ร ม ข อ ม ล ชออะไรอยบางแลว จากนนตองการทราบวาขอมลดงกลาวมโครงสรางอยางไรนน ผใชบรการสามารถรองขอขอมลเหลานไดผานโอเปอเรชน WFS:DescribeFeatureType ซงเอกสารทตอบกลบมาจะอธบายโครงสรางของขอมล ดงเชน ชอ , ชนด เปนตน และเพอใหการพฒนา Application สามารถเลอกหรอไมเ ลอก ขอมลอรรถาธบาย รวมทงเตรยมวธการแสดงผลทเหมาะสมได 3 . GetFeature ค อ ก า ร เ ร ย ก ด ข อ ม ล ห ร อ ก า ร เ ข า ถ ง ข อ ม ล feature อ า จม เ ง อ น ไ ขก ารกรอ ง ของการเลอกผาน FilterEncoding เชน จงหวดทขน ตนดวย “จงหวด*” ผลลพธของขอมลจะอย ในรปแบบ GML ผ ใ ชบรการ WFS สามารถขอขอมลเหลาน ไ ด ดวยโอเปอเร ชน WFS:GetFeature ซ งบรการ WFS จะสงขอมลกลบมาใหค ารองขอขอมล WFS:GetFeature โดยม ตวอยาง โครงสราง ของเอกสารการรองขอดงน

http://localhost/geoserver/wfs?request=GetFeature&version=1.0.0

&typeName=Workspacename:Layername&outputFormat=GML2

21

13. Open Data Kit (ODK) ODK เปนระบบทชวยส ารวจจดเกบขอมลภาคสนามผานอปกรณไรสายทสามารถท างานไดทงบน

ระบบ Online และ Offline ซง OKD จะประกอบดวย 3 เครองมอ คอ ODK Build , ODK Collect และ ODK Aggregate ซง ODK Buile เปนการสรางแบบฟอรมส าหรบ ODK Collect ซงแบบฟอรมไดรบการพฒนาเปน XLS โดยใชโปรแกรม Microsoft Excel หลงจากนนท าการแปลง XLSform เปน .XML แลว แบบฟอรม .XML จะถกอพโหลดไปยง ODK Aggregat โดยเราสามารถดาวนโหลดแบบฟอรมไวท ODK Collect ในอปกรณเคลอนทบนระบบปฏบตการ Androin ซงเปนแบบฟอรมทใชในการส ารวจภาคสนาม เมอมการส ารวจจดเกบขอมลภาคสนาม ขอมลดงกลาวถกอพโหลดไปยง ODK Aggregate Server ซงระบบนจะใช PostgreSQL รวมกบ ODK Aggregate เปนฐานขอมล สวน Geoserver จะถกเชอมตอกบฐานขอมล แลวน าขอมลทอพโหลดมาแสดงบนแผนทออนไลน 13.1 ODK bulid เปนสวนหนงของชดเครองมอ Open Data Kit ไดรบอนญาตภายใตใบอนญาต Apache 2.0 สามารถคนหาซอรสโคดไดท GitHub เวปในการออกแบบแบบฟอรมทผใชสามารถออกแบบไดดวยตนเองเปนโปรแกรมประยกตเวป HTML5 13.2 ODK collect ODK Collect คอแอนดรอยดโอเพนซอรสทใชแทนรปแบบกระดาษทใชในการรวบรวมขอมลจากการส ารวจ สนบสนนประเภทค าถามและค าตอบทหลากหลายและออกแบบมาเพอท างานไดดโดยไมตองเชอมตอเครอขาย เกบรวบรวมฟอรมเปนล าดบของอนพทปอนขอมลทใชตรรกะแบบฟอรมขอ จ ากด ในการเขาและการท าซ าโครงสรางยอย ผใชท างานผานพรอมตและสามารถบนทกการสงไดทกเมอ การสงทสมบรณสามารถสงไปยง (และฟอรมใหมทดาวนโหลดจาก) เซรฟเวอร collect สนบสนนสถานทเสยงภาพวดโอบารโคดลายเซนหลายทางเลอกขอความฟรและค าตอบตวเลข แมจะยอมรบค าตอบจากแอปอน ๆ บนอปกรณ 13.3 ODK Aggregate ODK Aggregate คอ Open sourec เวป server ทไว เกบขอมลจาก ODK Collect สามารถ วเคราะหขอมล แสดงขอมล จากแอปพลเคชน ODK Collect หรอ โปรแกรมทสามารถสงขอมลเขามาได สนบสนนการ สงขอมลระยะไกลของทกขอม ลและสามารถออกแบบไ ด ทกๆระบบปฏบ ตการ(https://docs.opendatakit.org/collect-intro/)

14. การจดการฐานขอมล (Database Management) การจดการฐานขอมล (Database Management) ฐานขอมล (Database) เปนศนยรวมของขอมลตาง ๆ ทมความสมพนธกน โดยจะม กระบวนการจดหมวดหมขอมลอยางมระเบยบแบบแผน กอใหเกดฐานขอมลทเปนแหลงรวมขอมล จากแผนกตาง ๆ ทถกน ามาจดเกบรวมกนไวภายใตฐานขอมลเพยงชดเดยว ระบบฐานขอมล (Database System) เปนระบบทรวบรวมกลมของขอมลทม ความสมพนธซงกนและกนไวดวยกนและสามารถเรยกใชความสมพนธนน ๆ ไดอยางมระบบ ใน ระบบฐานขอมลประกอบดวยแฟมขอมลหลายแฟมทมขอมลเกยวของสมพนธกนเขาไวดวยกน อยางเปนระบบและเปดโอกาสผใชสามารถใชงานและดแลรกษาปองกนขอมลเหลานไดอยางม ประสทธภาพ โดยมซอฟตแวรทเปรยบเสมอนสอกลางระหวางผใชและโปรแกรมตางๆ ทเกยวของ กบการใชฐานขอมล ซงเรยกวา ระบบจดการฐานขอมล หรอ DBMS (Database Management System) ซงมหนาทชวยใหผใชเขาถงขอมลไดงายสะดวกและมประสทธภาพ

22

ทงนผใชสามารถ โตตอบกบฐานขอมลไดโดยผานชดค าสง SQLหรอน าชดคาสง SQL ไปผนวกลงในโปรแกรม ประยกตเพอใชงานรวมกบโปรแกรมทเขยนขนกไดเชน ไดเขยนโคดโปรแกรมดวยภาษา Visual Basic หรอ PHP ซงภายในโปรแกรมมโมดลประมวลผลตาง ๆ พรอมกบโมดลทใชโตตอบกบ ฐานขอมลดวยชดค าสงภาษา SQL (สทธชย ชส าโรง, 2559, หนา 11-13) 14.1 รปแบบของระบบฐานขอมลแบงเปน 3 ประเภท คอ 1) ฐานขอมลเชงสมพนธ (Relational Database) เปนการเกบขอมลใน รปแบบทเปนตาราง (Table) หรอเรยกวา รเลชน (Relation) มลกษณะเปน 2 มต คอเปนแถวและ เปนคอลมน การเชอมโยงขอมลระหวางตารางจะเชอมโยงโดยใชแอททรบวต (Attribute) หรอ คอลมนทเหมอนกนทงสองตารางเปนตวเชอมโยงขอมล 2) ฐานขอมลแบบล าดบชน (Hierarchical Database) เปน โครงสรางท จดเกบขอมลในลกษณะความสมพนธแบบพอ ลก หรอเปนโครงสรางรปแบบ ตนไม Tree ขอมล ทจดเกบในทน คอ ระเบยน (Record) ซงประกอบดวยคาของเขตขอมล Field ของ เอนทตหนงๆ 3) ฐานขอมลแบบเครอขาย (Network Database) เปนการรวมระเบยน ตาง ๆ และความสมพนธระหวางระเบยนแตจะตางกบฐานขอมลเชงสมพนธคอ ในฐานขอมลเชง สมพนธจะแฝงความสมพนธเอาไว โดยระเบยนทมความสมพนธกน จะตองมคาของขอมลในแอท ทรบวตหนงทเหมอนกนแตฐานขอมลแบบเครอขาย จะแสดงความสมพนธ อยางชดเจน

14.2 ความสมพนธ ความสมพนธ (relationship) เปนการอธบายความสมพนธระหวางเอนทตทม ความความสมพนธกน วามความสมพนธกนอยางไร โดยในอ-อารไดอะแกรมใชสญลกษณรป สเหลยมขาวหลามตดทมชอของความสมพนธนนก ากบอยภายใน และเชอมตอกบเอนทตท เกยวของกบความสมพนธดวยเสนตรง 1) ความสมพนธแบบหนงตอหนง (one to one relationship หรอ 1:1) คอขอมลในเอนทตหนง ทมความสมพนธกบขอมลในอกหนงเอนทตเพยงขอมลเดยว ตวอยางเชน นกศกษาแตละคนจะมสตบตรไดเพยงใบเดยวเทานน และสตบตรหนงใบกเปนของนกศกษาได เพยงคนเดยวเทานนเชนกน 2) ความสมพนธแบบหนงตอกลม (one to many relationship หรอ 1:M) หมายถง ขอมลในเอนทตหนง มความสมพนธกบขอมลในอกหนงเอนทตมากกวาหนงขอมล ตวอยางเชน ลกคาหนงคนมใบเสรจไดหลายใบ เนองจากลกคาหนงคนอาจมาซอสนคาหลายครง แตใบเสรจหนงใบตองเปนของลกคาเพยงคนเดยวเทานน 3) ความสมพนธแบบกลมตอกลม (many to many relationship หรอ M:M) หมายถง ขอมลมากกวาหนงขอมลในเอนทตหนง มความสมพนธกบขอมลในอกหนงเอนทต มากกวาหนงขอมล ตวอยางเชน นกศกษาหนงคนสามารถลงทะเบยนเรยนไดหลายวชา และวชาแตละวชามนกศกษาลงทะเบยนเรยนไดหลายคน(สทธชย ชส าโรง, 2559, หนา 11-13)

23

15. Web Map Application Web Map Application เปนระบบ Web GIS ทผใชงานสามารถใชงานผานเวบเบราวเซอร เชน Internet explorer, Google chrome หรอ firefox โดยผใชไมจ าเปนตองตดตง ซอฟตแวรลงบนเครองคอมพวเตอร ตวอย าง Web Map Application ไ ดแก Google Map API Map Server ของCAT-GIFT (Government Information For Thailand) เปนตน ซงขอดของระบบ Web GIS แบบ Web Map Application คอสามารถท างานไดกบเครองคอมพวเตอรทก Platform และประหยดคาใชจายในการจดหาซอฟตแวร แตขอเสยคอในการใชงานตองเชอมตอกบ อนเตอรเนตตลอดเวลา (https://mdsoft.co.th/%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1%E0%B8%A3%E0%B8%B9%E0%B9%89/359-web-application.html)

16. Web GIS / Web Map Application Web GIS เปนระบบ GIS หนงทใชเทคโนโลยเวบเพอการสอสารระหวางองคประกอบ ตาง ๆ ในระบบ

ซงประกอบดวยเครองมอทใชในการจดเกบ เรยกคน จดการ วเคราะหขอมลเชง พนทหรอขอมลภมศาสตร โดยแสดงผลผานระบบอนเตอรเนต ซงอยางนอยทสด Web GIS ตองม หนงลกขาย (a client ) และหนงเซรฟเวอร (a server) ทท างานบนระบบปฏบตการทเปน desktop app หรอ web browser app ทใหผใชสามารถสอสารผาน server และ server จะท าหนาทเปน Web server app ดวย

Map Application เปนระบบ Web GIS ทผใชงานสามารถใชงานผานเวบเบราวเซอร เชน Internet explorer Mozilla หรอ Netscape โดยผใชไมจ าเปนตองตดตง ซอฟตแวรลงบนเครองคอมพวเตอร ตวอยาง Web Map Application ไดแก Google Map API Map Server ของCAT-GIFT (Government Information For Thailand) เปนตน ซงขอดของระบบ Web GIS แบบ Web Map Application คอสามารถท างานไดกบเครองคอมพวเตอรทก Platform และประหยดคาใชจายในการจดหาซอฟตแวร แตขอเสยคอในการใชงานตองเชอมตอกบ อนเตอรเนตตลอดเวลา (http:/bpgis.blogspot.com/)

17. ประเภทการทองเทยว การทองเทยวแหงประเทศไทยแบงตามความส าคญ และ สภาพแวดลอม ได 12 ประเภทดงน 1. แหลงทองเทยวเชงนเวศ : (Eco-tourism) หมายถง แหลงทองเทยวทมลกษณะทางธรรมชาตทเปนเอกลกษณเฉพาะทองถน โดยอาจมเรองราวทางวฒธรรมทเกยวเนองกบระบบนเวศทเกยวของโดย การจดการการทองเทยวในแหลงนน จะตองมกระบวนการเรยนรรวมกนของผทเกยวของมกจกรรมทสงเสรม ใหเกดการเรยนรเกยวกบระบบนเวศนน มการจดการสงแวดลอมและการทองเทยวอยางมสวนรวมของทองถน เพอมงเนนใหเกดจตส านกตอการรกษาระบบนเวศอยางยงยน 2. แหลงทองเทยวทางศลปะวทยาการ : (Arts and Sciences Educational Attraction Standard) หมายถง แหลงทองเทยวหรอกจกรรมทสามารถตอบสนองความสนใจพเศษของนกทองเทยว ซงมรปแบบของการทองเทยวทชดเจนเปนรปแบบการทองเทยวแบบใหมทเกดขน แหลงทองเทยวประเภทนสามารถเพมเตมไดอกมากมายตามความนยมของคนในแตละยคสมย เมอมการระบชดวากจกรรมนนๆ สามารถใหความรและดงดดนกทองเทยวได ปจจบนมปรากฏอยหลายๆ แหง ตวอยาง เชน พพธภณฑเฉพาะทาง แหลงทองเทยว

24

เพอการศกษาทางวทยาศาสตร อตสาหกรรมและเทคโนโลย และ MICE (Meeting & Incentives & Conventions & Exhibitions) เปนตน 3. แหลงทองเทยวทางประวตศาสตร : (Historical Attraction) หมายถง แหลงทองเทยวทมความส าคญและคณคาทางประวตศาสตร โบราณคด และศาสนา รวมถงสถานทหรออาคารสงกอสรางทมอายเกาแกหรอเคยมเหตการณ ส าคญเกดขนในประวตศาสตร เชนโบราณสถาน อทยานประวตศาสตร ชมชนโบราณ ก าแพงเมอง คเมอง พพธภณฑ วด ศาสนสถาน และสงกอสรางทมคณคาทางศลปะและสถาปตยกรรม 4. แหลงทองเทยวทางธรรมชาต : (Natural Attraction) หมายถง สถานททเปดใชเพอการทองเทยว โดยมทรพยากรธรรม ชาตเปนสงดงดดใจใหนกทองเทยวมาเยอน ซงทรพยากรธรรมชาตเหลานอาจจะเปนความงดงามตามสภาพธรรมชาต ความ แปลกตาของสภาพธรรมชาต สณฐานทส าคญทางธรณวทยาและภมศาสตรอนเปนเอกลกษณหรอเปนสญลกษณ ของทองถน นนๆ สภาพแวดลอมทางธรรมชาตทมลกษณะพเศษ (Special Environmental Features) หรอสภาพแวดลอมทมคณคาทาง วชาการกได 5. แหลงทองเทยวเพอนนทนาการ : (Recreational Attraction) หมายถง แหลงทองเทยวทมนษยสรางขน เพอการพกผอนและเสรมสรางสขภาพ ใหความสนกสนาน รนรม บนเทง และการศกษาหาความร แมไมมความส าคญในแงประวตศาสตร โบราณคด ศาสนาศลปวฒนธรรม แตมลกษณะเปนแหลงทองเทยวรวมสมย ตวอยางเชน ยานบนเทงหรอสถานบนเทง สวนสตว สวนสนกและสวนสาธารณะลกษณะพเศษ สวนสาธารณะ และสนามกฬา 6. แหลงทองเทยวทางวฒนธรรม : (Cultural Attraction) หมายถง แหลงทองเทยวทมคณคาทาง ศลปะและขนบธรรมเนยมประเพณทบรรพบรษไดสรางสมและถายทอดเปนมรดกสบทอดกนมา แหลงทองเทยวประเภทนประกอบดวย งานประเพณ วถชวตความเปนอยของผคน การแสดงศลปวฒนธรรม สนคาพนเมอง การแตงกาย ภาษา ชนเผา เปนตน ตวอยางของแหลงทองเทยวทส าคญของประเทศไทยในประเภทนไดแก ตลาดน าด าเนนสะดวก งานแสดงของชางจงหวดสรนทร งานรมบอสราง ประเพณลอยกระทง ประเพณสงกรานต เปนตน 7. แหลงทองเทยวเชงสขภาพน าพรอนธรรมชาต : ในการจดท าเกณฑมาตรฐานส าหรบแหลงทอง เทยวน าพรอนธรรมชาต มจดประสงคเพอเปนกรอบแนวทางในการจดการแหลง ทองเทยวประเภทน าพรอน ธรรมชาตอยางชดเจน โดยเนนในดานการก าหนดมาตรฐานทจ าเปนส าหรบการบรการตางๆ เนองจากการทองเทยวประเภทนจะตองค านงถงดานความปลอดภยของนกทอง เทยวเปนส าคญ และตองไมสงผลกระทบตอ ทรพยากรธรรมชาตและสงแวดลอม เนองจากน าพรอน จดเปนแหลงทองเทยวประเภทธรรมชาตประเภทหนง ซงหากไมมการก าหนดมาตรฐานทชดเจน การด าเนนกจกรรมการทองเทยวใดๆ อาจสงผลกระทบตอแหลงน าพรอนธรรมชาตได นอกจากน การจดท าเกณฑมาตรฐานแหลงทองเทยวเชงสขภาพน าพรอนธรรมชาต ยงมเปาหมายเพอใหหนวยงานทรบผดชอบดแลแหลงทองเทยวไดน าไปใช เปน เครองมอในการตรวจสอบมาตรฐานแหลงทองเทยวของตน และยงสามารถใชเปนขอมล ทส าคญเพอประกอบการตดสนใจ ของนกทองเทยว รวมทงเปนการเพมมาตรฐานแหลงทองเทยว เชงสขภาพ น าพรอนธรรมชาต ของประเทศไทยใหเปนทยอมรบทงในและตางประเทศเพมมากขน

25

8. แหลงทองเทยวประเภทชายหาด : (Beach Attraction) หมายถง สถานททเปดใชเพอการทองเทยว โดยมชายหาดเปนทรพยากรธรรมชาตทดงดดใจใหนกทองเทยวมาเยอน โดยมวตถ ประสงคเพอความเพลดเพลนและนนทนาการในรปแบบทใกลชดกบ ธรรมชาตและอาจเสรมกจกรรมเพอการศกษาหาความรเขาไปดวย ซงกจกรรมการทองเทยวทเกดขนบรเวณชายหาด ไดแก การเลนน า การอาบแดด กฬาทางน า การนงพกผอน รบประทานอาหาร เปนตน 9. แหลงทองเทยวประเภทน าตก : สถานททเปดใชเพอการทองเทยว โดยมนาตกเปนทรพยากรธรรมชาตทดงดดใจใหนกทองเทยวมาเยอน โดยมวตถประสงคเพอ ความเพลดเพลนและนนทนาการในรปแบบทใกลชดกบ ธรรมชาตและอาจเสรมกจกรรมเพอการศกษาหาความรเขาไปดวย ซงกจกรรมการทองเ ทยวทเกดขนในแหลงน าตก ไดแก การวายนา การนงพกผอน รบประทานอาหาร การเดนส ารวจนาตก การลองแกงการดนก และการตกปลา เปนตน 10. แหลงทองเทยวทางธรรมชาตประเภทถ า : แหลงทองเทยวประเภทถ า หมายถง สถานททเปดใชเพอการทองเทยว โดยมถ าเปนทรพยากรธรรมชาตทดงดดใจใหนกทองเทยวทมาเยอน โดยมวตถประสงคเพอความเพลดเพลนและนนทนาการในรปแบบทใกลชดกบ ธรรมชาตและอาจเสรมกจกรรมเพอการศกษาหาความรเขาไปดวย ซงกจกรรมการทองเทยวทเกดขนในแหลงทองเทยวประเภทถ า ไดแก การเขาชมบรรยากาศและหนงอกหนยอยภายในถ า การศกษาดานโบราณคดของมนษยยคตางๆ ทเคยอาศยในถ า การนมสการพระพทธรป การใหอาหารสตว การปกนกและรบประทานอาหาร เปนตน 11. แหลงทองเทยวทางธรรมชาตประเภท เกาะ : การประเมนมาตรฐานแหลงทองเทยวประเภท เกาะสามารถแบงไดเปน 3 องคประกอบ ซงมจ านวนตวชวดทงหมด 47 ตวชวด โดยแตละตวชวดมคาคะแนนสงสดเทากบ 5 คะแนน จงมคาคะแนนรวมทงสน 235 คะแนน โดยการใหคะแนนจะใหความส าคญกบองคประกอบคณคาดานการทองเทยวและความ เสยงตอการถกท าลายมากทสด เนองจากเปนแรงดงดดใจส าคญส าหรบใหนกทองเทยวเขาไปเทยวชมแหลง ทองเทยว สวนองคประกอบดานการบรหารจดการมความส าคญของคะแนนรองลงมา และองคประกอบดานศกยภาพในการพฒนาดานการทองเทยวมความส าคญของ คะแนน นอยทสด 12. แหลงทองเทยวทางธรรมชาตประเภท แกง : แหลงทองเทยวประเภทแกง หมายถง สถานททเปดใชเพอการทองเทยว โดยมแกงเปนทรพยากรธรรมชาตทดงดดใจใหนกทอง เทยวมาเยอน และมวตถประสงคเพอความเพลดเพลนและนนทนาการในรปแบบทใกลชดกบ ธรรมชาต โดยมกจกรรมการทองเทยวหลก ไดแก การลองแกง การพายเรอ การพกแรม และการเดนปา ซงอาจเสรมกจกรรมเพอการศกษาธรรมชาตเขาไปดวย ไดแกการดนก การส ารวจธรรมชาต การศกษาพนธพชตางๆ เปนตน (การทองเทยวแหงประเทศไทย)

26

เอกสารงานวจยทเกยวของ จกรกฤษณ แสนพรหม (2556) ศกษาความจ าเปนของสงอ านวยความสะดวกส าหรบนกทองเทยวผสงอาย และ ผสงอายในพนทกรณศกษาสถานททองเทยวซงเปนพระธาตบรวารของ พระธาตพนม จงหวดนครพนม เพอประเมนความจ าเปนของสงอ านวยความ สะดวกส าหรบนกทองเทยวผสงอายและผสงอายในพนท และ เพอจดล าดบความส าคญของพระธาต บรวารของพระธาตพนมในการตดตงสงอ านวยความสะดวกส าหรบนกทองเทยวผสงอายและ ผสงอายในพนท พบวาความจ าเปนของสงอ านวยความสะดวกส าหรบนกทองเทยวผสงอาย คอ ปายแจงขอมล และแผนทภายในวดอยในต าแหนงทมองเหนไดชดเจนทงกลางวนและกลางคน สวนผสงอายใน พนท คอ ทจอดรถ ส าหรบการจดล าดบความส าคญของพระธาตบรวารของพระธาตพนมในความ จ าเปนของสงอ านวยความสะดวก พบวา นกทองเทยวผสงอาย ใหพระธาตเรณเปนล าดบแรก ผสงอายในพนทใหพระธาตประสทธ เปนล าดบแรก และการเปรยบเทยบผทเปนโรคกบความ จ าเปนในการตดตงราวจบพบวาโรคตามว/ตาฟาง/ตาตอ โรคเจบเขา/ขอเสอม/กระดกพรน โรคหตง/ หหนวก/ไดยนไมชดเจน โรคความดนโลหตสง โรคหวใจ มความจ าเปนตอการตดตงราวจบใน หองน าอยางมนยส าคญทางสถต ( P-value < 0.05 ) ยกเวน โรคเบาหวาน ชงชย หมหอง และคณะ (2559) พฒนาระบบสนบสนนการ ตดสนใจเชงพนทส าหรบการพจารณาจดสรรผเขาพกอาศยในหอพกบคลากรของมหาวทยาลย นเรศวร ในรปแบบเวบแผนทออนไลนผานเครอขายอนเตอรเนต และสามารถวเคราะหต าแหนง หมบานของผใชบรการทสามารถขอหอพกและไมสามารถขอหอพกของมหาวทยาลยนเรศวร โดย การพฒนาระบบ ใชซอฟตแวรรหสเปด (FOSS4G) ในการพฒนาระบบ โดยการน าเขาฐานขอมล เชงพนท PostgreSQLPostGIS และใชเครองมอ poRouting algorithm เขามาชวยในการ วเคราะหระบบโครงขายถนนในการบรการเสนทางในระยะทสนทสดดวยฟงกชน pgDjkstra สวน การวเคราะหพนทใหบรการไดเปรยบเทยบการวเคราะห 2 วธการคอ 1) วเคราะหแบบรศม 25 กโลเมตร โดยใชฟงกชน ST_Buffer และ 2) วเคราะหแบบพนทใหบรการซงค านวณจากระยะทาง สญจร 25 กโลเมตร โดยใชฟงกชน pgr_drivingDistance และ par_alphaShape จากการศกษา พบวาระบบทพฒนาขนสามารถน าไปใชสนบสนนงานบรการสวสดการหอพกบคลากรได เมอทราบ ต าแหนงหมบานของผใชบรการและพนทใหบรการในรศม 25 กโลเมตร ท าใหสามารถวเคราะห สทธการขอหอพกบคลากรได โดยน าขอมลต าแหนงหมบานมาวเคราะหรวมกบพนทใหบรการดวย ฟงกชน ST_within ถาหากวาต าแหนงหมบานอยในพนทใหบรการแสดงวาผขอใชบรการกไม สามารถขอหอพกได แตถาต าแหนงหมบานอยนอกพนทใหบรการแสดงวาสามารถขอหอพกได เ รทรรณรต กลมย และ วรารตน ทองกวด (2557) ศกษาระบบสนบสนนการตดสนใจเลอก ซอบานจดสรรบนเครอขาย โดยใชภาษา HTML, PHP, JavaScript, Google Maps API ในการ ออกแบบและพฒนาเวบแอพพลเคชนและจดการฐานขอมลดวย PostgreSQLPostGIS และใชอลกอรทมในการเรยกขอมลระยะทางตามเสนทางถนนจากเงอนไขปจจยตาง ๆ โดยใชบรการของ Google Maps APIDistance Matrix Service เพอนามาใชในการเลอกบานทเหมาะสมทสดตาม น าหนกปจจยของเงอนไขทก าหนดโดยผลลพธไดตรงตามความตองการของผใชและเพม ประสทธภาพการตดสนใจ

27

ชงชย หมหอง (2558) การพฒนากระบวนการวเคราะหเชงพนทผานการประมวลผลบนเวบ : กรณศกษาการใหบรการเสนทางแบบพลวต ส าหรบแบบจ าลอง สถานการณฉกเฉนดวยซอฟแวรรหสเปด ศกษาการเตรยมความพรอมและรบมอกบภยพบตหรอสถานการณฉกเฉนตาง ๆ ใหม ประสทธภาพมระบบสนบสนนการตดสนใจเชงพนททดและมประสทธภาพ ท าให มกลไกทใชในการน าเขาขอมลเชงพนท สามารถน าเสนอโครงสรางของพนทและความสมพนธของพนท สามารถเพมเตมเครองมอในการวเคราะหเชงพนทและการวเคราะหเชงภมศาสตร และ สามารถน าเสนอผลในหลากหลายรปแบบ อกหนงปจจยทส าคญในการรบมอกบสถานการณ ฉกเฉนจากภยพบตตาง ๆ คอการท างานรวมกนจากหลาย ๆ หนวยงาน เชน หนวยงานภาครฐ/ เอกชน หนวยงานปกครองทองถน ทหาร ต ารวจ อาสาสมคร และประชาชน ทงนผเขารวมกบการ รบมอกบสถานการณฉกเฉนน ตองเขาใจในรายละเอยดของเหตการณนนเปนอยางด สามารถสงการ เพอขอใชทรพยากรทจ าเปนตอการเขาชวยเหลอ สามารถประสานงานขอความชวยเหลอจาก หนวยงานตาง ๆ สามารถตดสนใจทจะด าเนนการลดผลกระทบไดอยางทนทวงท

ณรงค พลรกษ (2557) โครงการการจดการการทองเทยวชมชนในพนทชายฝงทะเลภาคตะวนออก: ชลบร ระยอง จนทบร และตราด ศกษาและเกบรวบรวมขอมลแหลงทองเทยวชมชนในจงหวดท อยชายฝงทะเลภาคตะวนออกของประเทศไทย ไดแก จงหวดชลบร ระยอง จนทบร และตราด จากนน จงน ามาจดท าเปนฐานขอมลในรปแบบแผนทเชงเลข (Digital Map) ในระบบสารสนเทศทางภมศาสตร และท าการประเมนคณภาพแหลงทองเทยวชมชน ตอมาท าการเผยแพรขอมลและแผนทแหลงทองเทยว ชมชนผานทางเวบไซต หรอ Web Map Services ซงนกทองเทยวและผทสนใจสามารถท าการสบคน ขอมลแหลงทองเทยวชมชน ไดแก ขอมลทวไป และรปภาพ รวมทงนกทองเทยวสามารถคนหาเสนทาง และรายละเอยดการเดนทางจากแหลงทองเทยวชมชนทสนใจผาน Web Map Services ไดแก เสนทาง ระยะทาง เวลาในการเดนทาง และแผนท ในสวนทสองเปนการศกษาและส ารวจพฤตกรรม ทศนคต และความตองการของนกทองเทยวทมตอการทองเทยวชมชน ซงสามารถน ามาใชในการก าหนด มาตรการในการพฒนาใหเปนแหลงทองเทยวทางเลอกทดแทนแหลงทองเทยวหลกในแตละจงหวด

เพญประไพ ภทอง และคณะ (2559) ระบบสารสนเทศภมศาสตรเพอการทองเทยวทางธรรมชาตในต าบลคลองศก อ าเภอพนม จงหวดสราษฎรธาน การน าระบบสารสนเทศ ภมศาสตร (GIS) ซงเปนเทคโนโลยทมประสทธภาพในการวเคราะหเชงพนท สามารถน าไปประยกตใชใน หลายดานรวมถงการน ามาสรางฐานขอมลแหลงทองเทยวและสงอ านวนความสะดวกทรองรบการ พฒนาการทองเทยว พรอมกบการวเคราะหหาเสนทางทองเทยวดวยวธการโครงขาย (Network Analysis)เพอแกไขปญหาในการเขาถงแหลงทองเทยวทางธรรมชาตเพอชวยสงเสรมและพฒนา การทองเทยวในพนทต าบลคลองศก อ าเภอพนม จงหวดสราษฎรธาน ใหดยงขน

นพรตน สรยศ (2560) การพฒนาระบบคนหาต าแหนงและบรการอซอมรถบนระบบแผนทออนไลนดวยซอฟตแวรรหสเปด ในการศกษานระบบคนหาและ สนบสนนการตดสนใจไดถกพฒนาขนโดยการส ารวจเกบขอมลการซอมของสถานบรการอซอมรถ ในพนทศกษาและ PostgreSQUIPostGIS เพอมาจดท าฐานขอมลอซอมรถทเปนปจจบน และ พฒนาระบบการคนหาดวย ภาษา PHP, JavaScript, HTML พรอมกบการน า Google Distance Matrix มาใชในการคนหาเสนทางและเรยกใช KML file ในการแสดงผลส าหรบเรยกด

28

คณสมบต ตาง ๆ เพอสนบสนนการตดสนใจในการคนต าแหนงสถานบรการการอซอมรถทใกลเคยงผานระบบ แผนทออนไลน จากผลการศกษาครงนผใชรถสะดวกในการคนหาอซอมรถในบรเวณใกลเคยงทได มการรวบรวมขอมลไวในฐานขอมลบนแผนทออนไลนไดจรงเมอเกดภาวะฉกเฉนหรอรถเสย ระหวางการเดนทางไดตรงตามความตองการซงระบบชวยในการตดสนใจในการคนหาเพอเลอกใช บรการอซอมรถและชวยลดเวลาในการคนหา

อรอนงค จนอน และคณะ (2557) ศกษาการจดเตรยมการเวบแอพพลเคชนส าหรบระบบสนบสนนการตดสนใจเลอก รสอรททพกเขาคอ: กรณศกษาอ าเภอเขาคอ จงหวดเพชรบรณเพอจดท าฐานขอมลเชงพนทของการเลอกทพกในอ าเภอเขาคอ เพอ พฒนาระบบสนบสนนการตดสนใจเลอกรสอรททพกบรเวณเขาคอบนเครอขายอนเตอรเนต กรณศกษาอ าเภอเขาคอ จงหวดเพชรบรณ โดยเรมเกบขอมลพกดของสถานท ไดแก ต าแหนง สอรททพก ต าแหนงสถานททองเทยว ต าแหนงตลาด ต าแหนงรานสะดวกซอ และต าแหนง รานอาหาร เกบขอมลราคา และประเภททพก ไดแก รสอรทบานเดยว รสอรทหองพกโรงแรม กาง เตนท จากนนน าเขาคาพกดจากเครอง GPS ลงไปในโปรแกรม Quantum GIS โดยก าหนดคาใหม คาพกดเปน WGS 84 LatLon (EPSG:4326) และน าขอมลเขาสระบบฐานขอมล PostgreSQL / PostGIS จะไดฐานขอมล 5 ขอมล ไดแก ขอมลรสอรททพก ขอมลสถานททองเทยว ขอมลตลาด ขอมลรานสะดวกซอ และขอมลรานอาหาร จากนนเขยนท าการเขยนชดค าสงบนเวปไซต ดวย ภาษา JavaScript ภาษา PHP และภาษา HTML และน าสวนระบบแสดงต าแหนงไปเชอมตอกบ Google Maps AP เพอเปนการแสดงต าแหนงของรสอรททพกและสถานทตางๆ ทอยในฐานขอมล ซงจะค านวณ ผลต าแหนงทกครงเมอผใชระบบคนหาตามเงอนไขทไดก าหนดไว จากผลการทดลอง โดยการใหผใชระบบเลอกเงอนไงตามความตองการในการเลอกใชบรการระบบสนบสนนการ ตดสนใจเลอกรสอรททพกเขาคอสามารถชวยในการตดสนใจเลอกไดงายขน

อาครา ราชเวยง (2559) การพฒนาระบบสารสนเทศทางภมศาสตรเพอสงเสรมอตสาหกรรมทองเทยว สประชาคม อาเซยนจงหวดกาญจนบร ศกษาการพฒนาระบบสารสนเทศทางภมศาสตร เพอสงเสรมอตสาหกรรมทองเทยวสประชาคมอาเซยนจงหวดกาญจนบร ผลการศกษาท าใหสามารถ ทราบการขยายตวขออตสาหกรรมทองเทยว คณภาพและวถชวตทเปลยนแปลงไปในดานเศรษฐกจ สงคมของประชาชนในทองถน ทส าคญ สามารถท าใหนกทองเทยวทราบถงสถานทตงของททองเทยวไดชดเจนโดยระบต าแหนงของสถานท ทองเทยวตางๆ ลงในแผนทจงหวดกาญจนบร โดยการน าคาขอมลพกดต าแหนงของสถานท ทองเทยวลงในโปรแกรมArcGIS ท าใหสามารถดทตงของสถานททองเทยวนนไดดยงขน โดยจงหวดกาญจนบร มสถานททองเทยวทงหมด 42 สถานททองเทยว โดยสามารถแบงได ดงน1. รปแบบการทองเทยวในแหลงธรรมชาตทงหมดม 25 สถานททองเทยว 2. รปแบบการ ทองเทยวในแหลงวฒนธรรม ทงหมดม 13 สถานททองเทยว และ 3. รปแบบการทองเทยวในความสนใจพเศษ ทงหมดม 4 สถานททองเทยว

Sittichai Choosumrong Venkatesh Raghavan and Eugenio Realini (2010 ) ศ กษาและ เ สน อแนวทางในการคนหาเสนทางทสนทสด ใชเวลานอยทสดและมความปลอดภยโดยใช อลกอรทม poRouting ในการก าหนดเสนทางโดยการปรบเปลยนการท างานของ pgRouting โดย น า Djkstra มาใช และใชเสนทางแบบไดนามกในการปรบเปลยนขอมลตามเงอนไขของถนน ส าหรบการออกแบบพฒนาระบบและโปรแกรม

29

ทางภมศาสตรจะใช PostGIS และ poRouting ซง เปนสวนขยายใหกบ PostgreSQL, DEMS ซงระบบทพฒนาขนนจะเปนประโยชนในการจดการ การจราจรชวยเหลอในภาวะฉกเฉน

Sheng-Yuan Yang , Chun-Liang Hsu (2015) บรการตามต าแหนงและระบบขอมลหลกของ Google แผนทเพอแนะน าสถานททองเทยว พฒนาบรการทองตามต าแหนงซงไดรบการสนบสนนระบบ Dr.What-Info เชนระบบตวแทนหลกหลายระบบเกยวกบขอมลโดยใช Google Maps และเทคโนโลยการจดจ าภาพในฐานะผใหบรการขอมลการทองเทยวและเปนผวางแผนเสนทาง นกทองเทยว ผใชสามารถสนกสนานในระหวางการเดนทางในวนหยดผานทางอนเตอรเฟสทงายตอการใชงานรวมฟงกชน GPS มารทโฟนเครองอานรหส QR / Bar และสามารถเขาถงฐานขอมลระบบคลาวดไดอยางงายเพอคนหาบรการเวบทจ าเปนทงหมด โดยเฉพาะอยางยงเมอพจารณาถงแหลงโบราณคดในเมองนวไทเปประเทศไตหวนเพอจดประสงคในการทดสอบระบบทน าเสนอนจะแสดงใหเหนไมเพยง แตในฐานะผใหบรการขอมลสถานททองเทยวทเปนทนยมเทานน แตยงเปนอปกรณน าทาง GPS ทมประสทธภาพสงเพอแนะน าผใชทตองการ สถานททองเทยว การพฒนาระบบการแสดงผลและการทดลองและการเปรยบเทยบทสอดคลองกน R.V. Hari Ginardia et al. (2017) ฐานขอมลพนฐานของเมอง Madiun ทเรยกวา RDTR และ RTRW ไดรบการพฒนาขนในปพ. ศ. 2560 และไดรบการรบรองโดย Indonesian Geospatial Information Agency (BIG) แผนทดจทลละเอยดและแมนย านควรใชโดยหนวยงานการวางแผนพฒนาเมอง Madiun (Bappeda) และหนวยงานอน ๆ ในรฐบาลเมอง Madiun เปนแผนทอางองของพวกเขา มการพฒนาแผนทดจทลจ านวนมากขนทดานบนของแผนทอางองนซงรวมถงแผนท Madiun City Asset ซงจะบนทกอาคารและพนททงหมดทรฐบาล Madiun เพอปรบปรงการใชงานและการท างานของแผนทสนทรพยนระบบการจดการสนทรพยบนพนฐานของ WebGIS วธการพฒนาระบบคอน าตก แผนท ArcGIS ใชเปนแพลตฟอรมแผนทออนไลนส าหรบแผนทภาพของทดนและสงปลกสรางในเมอง Madiun แผนผงเนอหาปจจบนมขอมลสนทรพยมากกวา 400 รายการพรอมดวย 17 หมวดหม ระบบการจดการสนทรพย WebGIS นสนบสนนการจดการทชาญฉลาดในเมอง Madiun เพอพฒนา Madiun Smartcity

บทท 3 ในการศกษาเรองการวเคราะหและจดท าฐานขอมลแหลงทองเทยวส าหรบผสงอาย และผพการ ในเขต

อ าเภอเมอง จงหวดพษณโลก – เขาคอ ครงนมเครองมอและรายละเอยดขนตอนการด าเนนการดงตอไปน

1.ต าแหนงเปาหมายและพนทศกษาในการวจย 1.1 ต าแหนงเปาหมาย คอ ขอมลต าแหนงสถานททองเทยวและทพก,ต าแหนงโรงพยาบาล 1.2 พนทศกษา เปนการเกบขอมลในระยะทางจากแยกอนโดจนไปตามถนนหมายเลข12 ไปจนถง อ.เขาคอ จงหวดเพชรบรณ

2.เครองมอทใชในการวจย 2.1 ขอมลทใชในการศกษา เปนขอมลทไดจากการส ารวจแบบสอบถามจากสถานททองเทยวและทพกในขอบเขตพนทการศกษาโดยใชแอปพลเคชน ODK Collect 2.2 อปกรณและโปรแกรมคอมพวเตอร เครองมอทใชในการพฒนาเวปไซตและจดท าฐานขอมลมดงน

เครองมอทใชในภาคสนาม - สมาทโฟนพรอมแอปพลเคชนODK Collect

ดานโปรแกรมและซอฟตแวร - เครองมอทใชในการศกษาครงน ผวจยไดเลอกใชซอรฟแวรรหสเปดในการท างาน ไดแก

Desktop GIS : QGIS1 ,Web server : Openlayers2 , PostgreSQL/PostGIS3 , pgAdmin III4 , Geoserver5 , ODK Collect6 เปนตน

1 https://www.qgis.org/

2 https://openlayers.org/

3 https://www.postgresql.org/

4 https://www.pgadmin.org/

5 http://geoserver.org/

6 https://docs.opendatakit.org/collect-intro/

32

3.ปจจยทใชในการวเคราะห เปนปจจยทใชในการวเคราะหส าหรบเพอคนหาต าแหนงของสถานททองเทยวและทพก โดย การศกษาวจยครงนจะเลอกปจจยทเกยวของกบการใหบรการของสถานททองเทยวและทพก ไดแก

- สงอ านวยความสะดวกส าหรบผสงอายและผพการ เชน ทางลาดชน หองน าส าหรบผพการ ทางเดนส าหรบผพการทางสายตา ราวบนไดส าหรบผสงอาย ฯลฯ

- ความรในการปฐมพยาบาลเบองตน - ระยะทางระหวางสถานททองเทยว,ทพก กบ โรงพยาบาลทใกลทสด

4.วธการด าเนนงานวจย 4.1 ออกแบบแบบสอบถาม การออกแบบแบบส ารวจโดยใชเวป ODK Build และใชแอปพลเคชน ODK Collect ผานระบบสมารทโฟนส าหรบลงพนทเกบขอมลภาคสนามในพนทศกษาในเสนทางจากสแยกอนโดจนถงอ าเภอเขาคอจงหวดเพชรบรณ ส ารวจและเกบขอมลตางๆ เชน ต าแหนงสถานททองเทยว ต าแหนงทพก ต าแหนงสถานพยาบาล ขอมลเกยวกบสงอ านวยความสะดวกของผสงอายแตละสถานท ขอมลทวไปของแหลงทองเทยว ขอมลทวไปของทพก จะไดทงขอมลเชงพนท และขอมลเชงบรรยาย

ภาพท 5 ภาพการออกแบบแบบสอบถาม

4.2 การออกส ารวจภาคสนามเพอจดเกบขอมล เปนการด าเนนการส ารวจขอมลต าแหนงสถานททองเทยวและทพก โดยใชแอปพลเคชน ODK Collect ผานระบบสมารทโฟนส าหรบเกบขอมล ชอของสถานททองเทยวและทพก ต าแหนงสถานททองเทยวและทพก ความรในการปฐมพยาบาลเบองตนเมอเกดอบตเหตหรอเกดอาการเจบปวย รปภาพของสถานท

33

ทองเทยวและทพก รปภาพสงอ านวยความสะดวกส าหรบผสงอายและผพการ เพอน าขอมลทไดมาวเคราะหสถานททองเทยวและทพกส าหรบนกทองเทยวผสงอายและผพการ

ภาพท 6 ภาพแสดงหนาแอปพลเคชน ODK ทใชในการท าแบบสอบถาม

4.3 น าเขาขอมลเขาสโปรแกรม QGIS น าเขาขอมลทไดจากแบบสอบถามซงจะไดขอมลอยในรปเปนของไฟล CSV ซงสามารถน าเขาขอมลเขาสโปรแกรมQGIS ได เพอแสดงจดพกดของต าแหนงสถานททองเทยวและทพกทไดท าการส ารวจซงจะใชคอลม Lat Lon ในการก าหนดพกด เปน X Y กจะสามารถแสดงต าแหนงสถานททองเทยวและทพก

ภาพท 7 ภาพไฟลCSVทไดจากส ารวจขอมล

34

ภาพท 8 ภาพแสดงต าแหนงของสถานททองเทยวและทพกจากการน าเขาไฟล CSV

4.4 ออกแบบฐานขอมลและจดการขอมล น าขอมลทไดจากการส ารวจจะเขาสฐานขอมลทในเซฟเวอรทจดเตรยมไว และ สามารถสงออกขอมล

ไปยงโปรแกรมเพอจดการฐานขอมลบนโปรแกรม pgAdmin III โดยใชค าสง SQL ซงขอมลทเกยวของจะมคอลมน geom ทเปนชนดขอมล Geometry (point,4326) ซงเปนขอมล เชงพนทประเภทจด (point) ทแสดงเปนระบบพกดภมศาสตร WGS 84 Lat/Lon (EPSG:4326) จากนนน าขอมลจากฐานขอมลทไดมาแสดงจดต าแหนงบนซอฟตแวร QGIS ใน ระบบปฏบตการ Linux ubuntu บน OSGeolive

ภาพท 9 ภาพแสดงฐานขอมลในตารางของขอมลสถานททองเทยวทพก

35

ภาพท 10 ภาพแสดงฐานขอมลในตารางของขอมลโรงพยาบาล

4.5 Entity Relationship Diagram (ER-Diagram) เปนขนตอนการออกแบบฐานขอมล โดยโยงความสมพนธกนของแตละตารางเพอ ท าใหแตละตารางสามารถใชขอมลรวมกนได โดยใชคอลมน geom เปนตวเชอมกนแตละตาราง

ภาพท 11 ER Diagram ระบบฐานขอมล โดยความสมพนธ 1:M คอเมอเกดอบตเหต 1 หนงสถานท จะมหลายโรงพยาบาลคอยรองรบ

36

4.6 วเคราะหขอมลและการคนหาเสนทาง การวเคราะหและจ าแนกประเภทของขอมล เชน ประเภทของแหลงทองเทยว ประเภทของทพก

ขอมลทจ าแนกประเภทแลวไปยงฐานขอมล น าขอมลทไดมาวเคราะหแหลงทพกทสามารถรองรบนกทองเทยวผสงอาย วเคราะหจากสงทอ านวยความสะดวก และ สถานททใกลกบสถานพยาบาล และน าขอมลทไดมาท าการพฒนาระบบคนหาเสนทางจากสถานททองเทยวและทพกไปยงโรงพยาบาลทอยใกลเคยง

งานวจยในครงน ไดพฒนาตอยอดจาก อลกอรทมของไดกสตรา (Dijkstra's algorithm) ทเปนหลกการค านวณทางคณตศาสตรของ Dijkstra (E.W. Dijkstra, 1959) ซงเปนการน าเอาทฤษฎกราฟ โดยใชเวอรเทกซ (Vertex) และเสน (Edge) แทนถนนทเชอมตอกน ก าหนดระยะทางระหวางจดเปนตวเลขลงไปในกราฟ โดยเรยกกราฟดงกลาววากราฟถวงน าหนก (Weighted Graph) คอกราฟทเสนเชอมทกเสนมคาน าหนกทมคาเปนจ านวนจรงทไมตดลบ (พระวฒน และสเพชร จรขจรกล, 2557) ส าหรบการค านวณหาเสนทางทสนทสด จากจดเรมตน (start_vid) ไปยงจดสนสด (end_vid) ซงสามารถค านวณเสนทางไดทงแบบ directed graph และ undirected graph (pgRouting Contributors, 2013) ดงสตรดานลาง

จากสตร G = (V,E) เมอ

V(G) คอ เซตของเวอรเทกซ (Vertex) ในกราฟ E(G) คอ เซตของเสน (Edge) ในกราฟ

V(x) = min{𝑉(𝑥), 𝑊(𝑥) + 𝑑(𝑦)} d(y) = dist(v,y) | min { distance from node start to node y} W(x) = weight (i,j) | Distance from i to j : edge (i,j)

ภาพท 12 การท างานของกราฟ Dijkstra (ทมา: Choosumrong et al., 2011(b))

กราฟถวงคาน าหนก Gd = (V,E) จะถกก าหนดโดย เซตของเวอรเทกซ (V) V = source ∪ target ∪ startvid ∪ endvid เซตของเสน (E)

37

{(sourcei, targeti, costi) เมอ cost >= 0} if reverse_cost =∅ E = {(sourcei, targeti, costi) เมอ cost >= 0} ∪{(sourcei, targeti, revese_costi) เมอ revese_cost >= 0} if reverse_cost ≠ ∅ 4.6.1 การจดเตรยมขอมลเพอใชในการท างาน pgrouting เพอคนหาเสนทาง ท าการจดเตรยมขอมลโดยการใชโปรแกรมQGIS ท าการดาวนโหลดขอมลถนนจากฟงชน OSM บนโปรแกรมQGIS เพอใชในการคนหาเสนทาง

ภาพท 13 ขนตอนการ Download ขอมลจาก OpenStreeMap

จากนนท าการใชโปรแกรม pgAdmin III เพอสรางฐานขอมลโดยใชค าสง SQL และใสฟงชน PostGIS และ pgRouting ใหกบฐานขอมล และ ท าการอปโหลดขอมลจาก OSM เขาสฐานขอมลโดยใชค าสง ผาน LXTerminal

ภาพท 14 ขนตอนรนค าสง osm2pgrouting บน terminal ใน Ubuntu

38

จะไดฐานขอมลทขอมลของพนท และท าการเชอมตอฐานขอมลเขากบโปรแกรม QGIS เพอเรยกขอมลจากฐานขอมลมาแสดงบนโปรแกรม QGIS ขอมลทเรยกมาจะมขอมลของถนนในพนทศกษา และขอมล Vertext

ภาพท 15 ภาพแสดงขอมลทท าการเรยกจากฐานขอมล บนโปรแกรม QGIS

Node ทเปนตวเลขของจดแตละจด จากนนท าการเชอมขอมลจากฐานขอมลเขากบ Geoserver เพอใชในการเรยกขอมลเซอรวซผานหนาเวปตอไป

ภาพท 16 ค าสงการคนหาเสนทางจากจดหนงไปยงจดหนง โดยใชค าสง SQL และท าการแสดงขอมลการ

คนหาผานโปรแกรม QGIS

39

ภาพท 17 แสดงการคนหาเสนทางจากจดหนงไปยงอกจดหนงบนโปรแกรม QGIS

ภาพท 18 ภาพค าสงในการใช pgRouting ผาน Geoserver

40

4.7 ออกแบบการแสดงผลและพฒนาเวปไซต ในสวนของการออกแบบการเขาระบบและแสดงผลของระบบนสามารถแสดงรายละเอยด ไดในรปแบบโครงสรางของระบบการเขาระบบและแสดงผล ซงไดออกแบบในรปแบบโครงสรางเปน ล าดบชน (Hierarchical Structure)

ภาพท 19 รปแบบโครงสรางของการออกแบบการเขาระบบและแสดงผล

การออกแบบการแสดงผลของระบบแผนทออนไลนดวยซอฟตแวรรหสเปด ไดมงเนนการออกแบบใหแสดงขอมลทสามารถเขาใจไดงาย โดยการออกแบบในสวนนไดท าการออกแบบโครงสรางหนาเวบเปน 2 สวน คอ 1) แถบเมน และ 2) สวนทแสดงผลลพธและแสดงแผนท

ภาพท 20 โครงสรางหนาเวป

41

ในสวนการพฒนาเวปไซตเปนการเขยนชดค าสงเพอเขยนโปรแกรมบนเวบไซตโดยใชภาษา JavaScript ภาษา PHP ภาษา CSS และภาษา HTML เพอออกแบบหนาเวบและแสดงผลพรอมกบการเรยกขอมลจากฐานขอมลโดยใช Geoserver ในการเรยก และใชฟงกชนจาก PostgreSQL/PostGIS เปนเครองมอในการวเคราะหผลลพธการคนหาตามเงอนไขตาง ๆ โดยม PHP เปนตวรบและเชอมตอกบฐานขอมลมาแสดงเปนขอมลจดของผลลพธหรอต าแหนงของสถานททองเทยวและทพกบนแผนท และมการเรยกใชฟงคชน pgRouting และเพอค านวณหาระยะทางทสนทสดและเรวทสดจากสถานททองเทยวและทพกไปยงโรงพยาบาลทอยใกลเคยง

1 . ก า ร เ ข ย น ช ด ค า ส ง ด ว ย ภ า ษ า PHP เ พ อ เ ช อ ม ก บ ร ะ บ บ ฐ า น ข อ ม ( PostgreSQL/PostGIS )

การประกาศตวแปลเพอเชอมตอกบฐานขอมล

2. การเขยนชดค าสงดวยภาษา PHP เพอวเคราะหหาผลลพธโดยการระบเงอนไขการคนหา SQL

42

ค าสงส าหรบการรบคาการคนหาสถานทโดยระบเงอนไข

ค าสงการเรยกจดจากฐานขอมลมาแสดง

43

3.การเขยนชดค าสง Script เพอเชอมกบ Geoserver ในการเรยกเซอรวซมาแสดงบนเวปแสดงผล

ประกาศตวแปลเพอเชอมตอกบ Geoserver

4. การเขยนชดค าสงดวยภาษา JavaScript เพอเรยกแผนทจาก OpenLayers และผลลพธมาแสดง

ค าสงส าหรบเรยกแผนทมาแสดง

44

5. ชดค าสง JavaScript การคลกคนหาเสนทางทสนทสด โดยใชฟงกชpgRouting ในการคนเสนทาง

4.8 การพฒนาและทดสอบระบบ เพอใหระบบทไดจากการพฒนาใหสามารถใชงานไดจรง ขนตอนนจะเปนขนตอนในการทดลองระบบ โดยก าหนดเงอนไขของการคนหาสถานททองเทยวและทพกตามความตองการของผใชผานเวปบราวเซอรผานระบบอนเตอรเนต ระบบจะท าการเรยกขอมลจากฐานขอมล เชน ขอมลต าแหนงของสถานททองเทยวและทพก ต าแหนงของโรงพยาบาล เพอใชในการค านวณหาเสนทางทสนทสดและใชเวลานอยทสดจากสถานททองเทยวและทพกไปยงโรงพยาบาลทอยใกลเคยง โดยค านวณจากเงอนไขตางๆ เพอตรวจสอบวามความถกตองแมนย ามากนอยเพยงใด และเกดความผดพลาดในระบบและเชงเทคนคหรอไม รวมถงตรวจสอบความสะดวกในการใชงานหรอไม

45

ภาพท 21 ตวอยางการคนหาเสนทางผานหนาเวป

บทท 4

ผลการวจย

จากบทท 3 ทกลาวไวเพอใหฐานขอมลและระบบทพฒนาขนมาครงนสามารถใชงานไดตามวตถประสงคในบทนเปนการจดการขอมลและพฒนาและทดสอบระบบ โดยผใชเปดเวปแผนทออนไลนเพอชวยในการตดสนใจในการเลอกสถานททองเทยวทเหมาะสมโดยเรองตามเงอนไขทตองการผานเวปแผนทออนไลนแลวใหระบบระบต าแหนงของสถานททองเทยวและทพกทตองการใหตรงตามเงอนไขทระบมากทสดเพอชวยในการตดสนใจเขาใชบรการของสถานทนนๆและสามารถดลายละเอยดเกยวกบสถานทไดและระบบยงสามารถคนหาเสนทางทสนทสดในการเดนทางจากสถานททองเทยวและทพกไปยงโรงพยาบาลทใกลทสดเมอเกดอบตเหตฉกเฉนอกดวย และจากการค านวณตามเงอนไขนน ระบบจะมความถกตองมากนอยแคไหนและมความผดพลาดในเชงเทคนคหรอไม และระบบจะชวยในการตดสนใจของผใชงานไดหรอไม และมความสะดวกและรวดเรวมากนอยเพยงใด โดยจะน าเสนอผลดงตอไปน

1. ผลจากการออกแบบฐานขอมล และ การจดการขอมล เปนผลลพธทไดจากการน าเขาขอมลเขาสฐานขอมลเชงสมพนธ PostgreSQL/PostGIS ซงไดจากลงพนทส ารวจและการจดการขอมลในบทท 3 ทไดกลาวไวขางตนแลวเพอใหระบบสามารถ วเคราะหจดการกบขอมลไดงายขน ซงจะไดตารางฐานขอมลดงตอไปน

ภาพท 22 โครงสรางตารางขอมลต าแหนงสถานททองเทยวและทพกและขอมลลายละเอยดตางๆ จ านวน 100 Record

47

ภาพท 23 โครงสรางตารางขอมลต าแหนงของโรงพยาบาลและขอมลลายละเอยดตางๆ จ านวน 16 Record

2. ผลจากการทดลองการคนหาดวยค าสง SQL จากการเตรยมขอมลเพอใชในการคนหาเสนทางในบทท 3 เปนการท าการคนหาโดยใชค าสง SQL ท างานรวมกบ PostgreSQL/PostGIS เพอใหไดผลลพธ คอต าแหนงของสถานททองเทยวและทพกทไดถกก าหนดเงอนไขตามทก าหนดและสามารถคนหาเสนทางทสนทสดของสถานทจากทถกเลอกไปยงโรงพยาบาล ซงเปนการท างานขอตารางขอมลทเชอมตอกนในฐานขอมล โดยท าการเลอกต าแหนงของสถานททองเ ทยวและทพกทตองการใชบรการตามเงอนไข ผลลพธของการคนหาเสนทางจะแสดงตารางขอมลเสนทางทสนทสดในการเดนทาง ดงภาพ 24 และ 25

ภาพท 24 การทดสอบอลกอลทมส าหรบคนหาเสนทางจากสถานททองเทยวไปยงโรงพยาบาลทใกลทสด

48

ภาพท 25 การแสดงผลการคนหาเสนทางจากฐานขอมลผานโปรแกรม QGIS

3. ผลจากการพฒนาระบบ ส าหรบหนาเวปแผนทออนไลน(Web Interface) จะเปนหนาแสดงผลของระบบแผนทออนไลนเพอสอสารกบผใชไดโดยตรง โดยระบบจะมการทดสอบอย 2 ระบบ คอระบบส าหรบคอมพวเตอร และระบบส าหรบสมารทโฟน โดยการออกแบบหนาเวปจะสามารถท าใหผใชงานไดเขาใจงาย สะดวกและรวดเรว โดยจะใช OpenStreetMap เปน Base Map ทใหบรการแผนทและการระบต าแหนงตางๆ ในการออกแบบหนาเวปจะใชค าสง HTML ,Javascript ในการออกแบบหนาเวป เครองมอในการใชงาน ใหสามรถตอบสนองกบผใชงานได และใชGeoserverเพอท าการเชอมตอกบฐานขอมล

สวนหนาเวปแสดงผล เมอผใชงานเปดใชงานผานเบราวเซอร เชน Google chrome , Mozilla firefox หรอ Internet Explorer เขาเมนในสวนของระบบการคนหา กจะปรากฏหนาแสดงผลดงภาพท 26

49

ภาพท 26 (a) หนาเวปไซตระบบคนหาสถานทและทพก (b) หนาเวปไซตทใชงานผานสมารทโฟน ผใชสามารถระบเงอนไขการคนหาสถานททองเทยวและทพกทตองการ ซงจะม 4 เงอนไขการคนหาประกอบดวย ทางลาดชน ทจอดรถผสงอายและผพการ ราวจบ เครองมอปฐมพยาบาลเบองตน เมอผใชตองการสงอ านวยความสะดวก สามารถเรองเงอนไขการคนหาทค าวา YES หรอไมตองการใหเลอกค าวา NO เมอระบเงอนไขทตองการแลวกดคนหา

ภาพท 27 แถบเมนการคนหาสถานททองเทยวและทพก

หลงจากระบเงอนไขการคนหาระบบจะท าการคนหาสถานททองเทยวและทตรงกบความตองการของผใช(คนหาจากฐานขอมล)ปรากฏสถานททองเทยวและทพกทตรงตามเงอนไขการคนหา โดยท าการเรยกใช BaseMap จาก Open layer

50

ภาพท 28 แสดงผลลพธการคนหาสถานทและทพก

เมอปรากฏสถานททองเทยวและทพกทตองการ ระบบสามารถคนหาเสนทางทสนทสดจากสถานททองเทยวและทพกไปยงโรงพยาบาลทใกลทสดโดยผใช กด icon สถานททองเทยวและพก และ กด icon โรงพยาบาล ระบบจะท าการค านวณคนหาเสนทางทสนทสดจากฟงกชน pgRouting ซงเปนการเรยกเซอรวซผาน Geoserver

ภาพท 29 ผลลพธการคนหาเสนทางทสนทสด

51

ผใชสามารถเลอกเปลยนสถานททองเทยวและโรงพยาบาลเพอท าการหาเสนทางใหมไดโดยกดปม Clear ซงสามารถคนหาเสนทางใหมได

ภาพท 30 แสดงต าแหนงของปม Clear

บทท 5

สรปและอภปรายผล

จากาการศกษาการวเคราะหและการจดท าฐานขอมลแหลงทองเทยวและทพกทรองรบนกทองเทยวผสงอายและผพการ เปนการจดท าฐานขอมลและการศกษาพฒนาระบบคนหาต าแหนงสถานททองเทยวทรองรบนกทองเทยวผสงอายและผพการผานระบบแผนทออนไลนโดยการใชซอฟตแวรรหสเปดในการพฒนา โดยเรมจากการเกบรวมรวบขอมลผานกระบวนการจดการฐานขอมลและจดท าระบบประมวลผลและแสดงผลผานเวปแผนทออนไลน ซงสามารถสรปไดดงน

สรปผลการวจย 1.การจดท าฐานขอมลและการวเคราะหขอมล ในการจดท าฐานขอมลแหลงทองเทยวและทพกทรองรบนกทองเทยวสงอายและผพการไดมการใชซอฟตแวรรหสเปดในการจดการฐานขอมลโดยเรมจากการใชแอปพลเคชนในการเกบรวบรวมขอมลภาคสนามโดยใชแอนดรอยดโอเพนซอรสผานระบบสมารทโฟนแทนการใชกระดาษในการเกบรวบรวมขอมลซงเกบรวบรวมเขาสฐานขอมลไดโดยตรงโดยสารมารถเกบขอมลเชงพนทไดและสามารถสบคนขอมลไดโดยผานค าสงSQLซงงานตอการใชงาน ซงงายตอการแกไขและการจดการฐานขอมลและน าขอมลมาวเคราะหในการจดท าระบบคนหาสถานททองเทยวและทพกตามเงอนไขการคนหา ซงผลลพธทไดจะไดฐานขอมลแหลงทองเทยวและทพกส าหรบนกทองเทยวผสงอายและผพการในขอบเขตพนทการศกษา และน าขอมลทไดจากฐานขอมลทไดมาวเคราะหสถานททองเทยวและทพกทรองรบนกทองเทยวผสงอายและผพการตามขอก าหนดเบองตนของการวจย

2.การออกแบบ การจดท าเวปแผนทออนไลน ในการจดท าเวปแผนทออนไลนในการคนหาสถานททองเทยวและทพกทรองรบนกทองเทยวผสงอายและผพการซงจะสามารถชวยสนบสนนการตดสนใจในการเลอกเขาใชบรการของสถานททองเทยวและทพกซงสะดวกในการวางแผนการทองเทยว โดยระบบถกออกแบบดวยภาษา HTML และพฒนาระบบโดยการใชภาษา PHP ใหท างานรวมกบฐานขอมล PostgreSQL/PostGIS ชดค าสง JavaScrip และท างานรวมกบ Openlayersในการเรยกแผนทขนมา และ Geoserver ในการเชอมตอกบฐานขอมลเพอเรยกฟงกชนในการคนหาเสนทาง เมอผใชเปดเขาสหนาเวปไซตพรอมระบเงอนไขการคนหาสถานททองเทยวและทพกทตองการเพอท าการคนหาสถานททองเทยวและทพกตามเงอนไขทระบ ซงจะมเงอนไขทตองระบคอสงอ านวยความสะดวกทตองการไดแก ทจอดรถส าหรบผพการและผสงอาย ทางลาดส าหรบรถวลแชร ราวจบขนบนได ราวจบในหองน า อปกรณปฐมพยาบาลเบองตน และในสวนความสามารถในการชวยเหลอพยาบาลเบองตนกจะมเงอนไขการคนหาไดแก กระดกหก เปนลมความดนต าหนามดเวยนศรษะ เกดบาดแผล ถกงพษกด เมอท าการคนหาสถานททองเทยวและทพกทตองการแลว ระบบจะท าการคนหาสถานททองเทยวและทพกจากฐานขอมลดวยค าสงSQL และเรยกไฟลแสดงลายละเอยดของสถานททองเทยวและทพก เชน รปภาพสงอ านวยความสะดวก รปเกยวกบสถานท เบอรตดตอ และระบบยงมฟงกชนการคนหาเสนทางทสนทสดจากสถานททองเทยวและทพกไปยงโรงพยาบาลทใกลทสด จากการทดสอบและการตรวจสอบผลลพธทแสดงผลผานเวป

50

แผนทออนไลนโดยการคนหาจากดารก าหนดเงอนไขการคนหา โดยมผลลพธทไดจากการคนหาคอ ต าแหนงของสถานททองเทยวและทพกส าหรบผสงอายและผพการตามเงอนไขของการคนหาขางตน และเมอตรวจสอบแลวพบวาปรากฏต าแหนงของสถานททองเทยวและทพกบนแผนทจรงพรอมกบแสดงเสนทางจากสถานททองเทยวและทพกไปยงโรงพยาบาลได

3.ระบบคนหาเสนทาง จากการพฒนาระบบในการคนหาเสนทางทใกลทสดโดยใชอลกอลทม pgRouting ระบบสามารถคนหาเสนทางจากสถานททองเทยวและทพกไปยงโรงพยาบาลทใกลทสดเมอเกดภาวะฉกเฉนไดตรงตามเสนทางสญจรจรง เพอลดเวลาในการเดนทางในการน าพาผปวยไปยงโรงพยาบาล และสามารถชวยสนบสนนการตดสนใจในการเลอกใชบรการของผใชไดและชวยในการวางแผนการทองเทยวส าหรบผใชได อภปรายผลการวจย 1.การออกแบบ การจดท าเวปแผนทออนไลน จากการศกษาการวเคราะหและการจดท าฐานขอมลแหลงทองเทยวและทพกทรองรบนกทองเทยวผสงอายและผพการ ในสวนการออกแบบและการจดท าเวปแผนทออนไลนจากทกลาวมาขางตน การใชภาษา HTML PHP และ JavaScript ในการออกแบบและพฒนาระบบมผลลพธทใกลเคยงกบงานของ นพรตน สรยศ (2560) ทศกษาการพฒนาระบบคนหาต าแหนงและบรการอซอมรถบนระบบแผนทออนไลนดวยซอฟตแวรรหสเปดกรณศกษา เสนทางจากแยกรองเขม จงหวดแพร ไปยงอทยานแหงชาตศรนาน และ อรอนงค จนอน กนกกร รงเรอง (2557) ทศกษาการจดเตรยมเวบแอพพลเคชนส าหรบระบบสนบสนนการตดสนใจ เลอกรสอรททพกเขาคอ กรณศกษาอ าเภอเขาคอ จงหวดเพชรบรณ ซงใชภาษา HTML ท างานรวมกบภาษา PHP และ JavaScript และระบบจดการฐานขอมลในการแสดงขอมลผานระบบอนเตอรเนต แตในความแตกตางและความโดดเดนของงานวจยนจะเปนในสวนของการใชงานทมความสะดวกและมความทนสมยมากขน และเมอมขอมลทเพมขนมาใหมสามารถน าเขาขอมลผานหนาเวปเขาสฐานขอมลไดโดยตรง และการออกแบบใหระบบสามารถระบเงอนไขจะชวยให ผใชคนหาและตดสนใจไดงายขน และในสวนของระบบการคนหามการใช pgRouting เขามาเพอใชในการพฒนาระบบโดยเขามาใชเพอเพมความสามารถในการหา ระยะทางโดยพจารณาจากสถานการณและสภาวะของถนนจะท าใหระบบมการคนหาเสนทางไดแมนย าและดขนและเมอมขอมลทเพมขนมาใหมสามารถน าเขาขอมลผานหนาเวปเขาสฐานขอมลไดโดยตรง ซงถาหากน ามาพฒนารวมกนกบระบบการจดเตรยมเวบแอพพลเคชนส าหรบระบบสนบสนนการตดสนใจเลอกรสอรททพกเขาคอจะสามารถเพมประสทธภาพการคนหาไดดขนและระบบมคณภาพเพอใหงายตอการตดสนใจและเพองายตอการวางแผนการเดนทาง

2.ระบบการคนหาเสนทาง ในการศกษาครงนจากการคนหาสถานททองเทยวและทพกทระบบเงอนไขแลวจะมฟงกชนเสรมในการคนหาเสนทางทสนทสดจากสถานททองเทยวและทพกไปยงโรงพยาบาลทใกลทสด เพอรองรบเมอเกดภาวะฉกเฉนใหสามารถน าพาผปวยไปยงโรงพยาบาลใหไดโดยเรวมากทสด ซงระบบปฎบตการทใชในการพฒนาระบบเปนระบบปฎบตการ Linux Ubuntu บน OSGeolive 11 ซงเปนโอเพนซอรส ซงจะมโปรแกรมดานภม

51

สารสนเทศตดตงอยภายในและมเครองมอในการจดการฐานขอมล โปรแกรมทใชไดแก QGIS ในการจดการกบชนขอมล pgAdminIII ในการจดการฐานขอมล โดยประยกตฟงกชนpgRouting ในการค านวณคนหาเสนทางทสนทสดจากจดหนงไปยงอกจดหนง ท างานรวมกนกบ PostgreSQL/PostGIS และน าขอมลและชดค าสงน าขนส Geoserver โดยใชงานค าสงSQL ซงสามารถท างานไดอยางมประสทธภาพ โดยใชภาษา JavaScript ในการเรยกชนขอมลมาแสดงในฟงกชนเสรมส าหรบการคนหาเสนทางของเวปไซตแผนทออนไลน ซงการท างานรวมกนนท าใหระบบการท างานมประสทธภาพมากขนและมการท างานทหลากหลายแตกตางกนไปเพอตอบสนองความตองการของผใชงาน จากกระบวนการทกลาวมาแลวนนเปนเครองมอในการพฒนาระบบการคนหาเสนทางทสนทสดจากสถานททองเทยวและทพกไปยงโรงพยาบาลทใกลทสดและเมอน ามาประยกตใชในงานวจยนสอดคลองกบงานของ ชงชย หมหอง และคณะ (2559) ทพฒนาระบบสนบสนนการตดสนใจเชงพนทส าหรบการพจารณาจดสรรผเขาพก อาศยในหอพกบคลากรของมหาวทยาลยนเรศวร ในรปแบบเวบแผนทออนไลนผานเครอขาย อนเตอรเนตดวยซอฟตแวรรหสเปด (FOSS4G) โดยการน าเขาฐานขอมลเชงพนท PostgreSQL/PostGIS และใชเครองมอ pgRouting algorithm เขามาชวยในการวเคราะหระบบ โครงขายถนนในการบรการเสนทางในระยะทสนทสดดวยฟงกชน pgDijkstra และงานวจยของ พชรา รกษาคม (2559) ทพฒนาระบบคนหาเสนทางทเหมาะสมทสดในการเขาถงผปวยฉกเฉนบนระบบออนไลนใน เขตอ าเภอเมองพษณโลกระบบสนบสนนการตดสนใจในการเขาถงผปวยน มการพฒนาขนดวยภาษา PHP ใหท างานรวมกบฐานขอมล PostgreSQL/PostGIS และชดค าสง JavaScript ทท างานรวมกบ Google Maps API ไดท าการออกแบบฐานขอมลและพฒนาระบบสนบสนนการตดสนใจในการเขาถงผปวยฉกเฉนส าหรบศนยรบแจงเหตและสงการ โดยระบบคนหาเสนทางและการเขาถงผปวยน สามารถแสดงต าแหนงของบานผปวยฉกเฉนบนแผนทออนไลน จากงานทกลาวมาขางขนเปนตวอยางงานวจยทมวตถประสงคทแตกตางกนออกไปเมอไดท าการทบทวนงานวจยเหลาน จงท าใหเกดการวเคราะหและการจดท าฐานขอมลสถานททองเทยวและทพกทรองรบนกทองเทยวผสงอาย ซงท าใหมความสะดวกและการเขาถงขอมลไดงาย โดยครงนระบบไดมความแตกตางจากเวปไซตและแอปพลเคชนอนๆ โดยมการน าเสนอเวปไซตทรองรบการใชงานของผสงอาย โดยการปรบโหมดผใชงานท าใหการแสดงผลของเวปไซตมขนาดตวหนกสอทใหญขนมากกวาผใชปกต และการน าเทคโนโลยเเอนดรอยโอเพนซอรส มาจดการกบขอมลในการส ารวจภาคสนามเพอใหงายตอการส ารวจเพอรองรบการเพมขนของสถานททองเทยวและทพกในอนาคต และนอกจากนยงไดใสเนอหาแนะน าสถานททองเทยวทนาสนใจและการแนะน าการทองเทยวเพอสงเสรมการทองเทยว และการจดท าระบบการคนหาเสนทางจากสถานททองเทยวและทพกไปยงโรงพยาบาล เพอชวยในการตดสนใจในการเลอกใชบรการสถานททองเทยวและทพกไดงายขน นอกจากนนยงมสวนของการตดตอกบผพฒนาเพอใชในการแลกเปลยนความคดเหน จากทมการทดสอบและพฒนาจงสรปจดออนจดแขงของระบบไดดงตอไปน

52

ขอเสนอแนะส าหรบการพฒนาตอไป 1. พฒนาใหระบบสามารถใชงานแบบออฟไลน เพอลดปญหาการใชงานในพนททไมม สญญาณมอถอ หรออนเทอรเนต 2. ควรมการพฒนาเพอเรยกต าแหนงปจจบน เพอส าหรบการคนหาเสนทางจากต าแหนงปจจบนไปยงสถานททองเทยวและทพก 3. ควรพฒนาใหระบบมขอมลแบบเรยลไทม เชน จ านวนของหองพกทสามารถเขาพกได 4. ควรพฒนาตอยอดใหเปนแอปพลเคชนทสามารถใชกบสมารทโฟนได เพอความสะดวกตอผใชงาน

บรรณานกรม

54

บรรณานกรม

ค าสง SQL, http://www.mindphp.com/คมอ/73-คออะไร/2127-php-คออะไร.html (สบคนเมอ 6 เมษายน 2561)

ชงชย หมหอง (2558) การพฒนากระบวนการวเคราะหเชงพนทผานการประมวลผลบนเวบ : กรณศกษา การใหบรการเสนทางแบบพลวต ส าหรบแบบจ าลอง สถานการณฉกเฉนดวยซอฟแวรรหสเปด.

วทยานพนธ วท.ม.ภมสารสนเทศศาสตร. มหาวทยาลยนเรศวร. พษณโลก ชงชย หมหอง สทธชย ชส าโรง และ ศกดดา หอมหวน. (2559). พฒนาระบบสนบสนนการตดสนใจเชง พนท ส าหรบการพจารณาจดสรรผเขาพกอาศย ในหอพกบคลากรของมหาวทยาลยนเรศวร มหาวทยาลยนเรศวร. พษณโลก. นพรตน สรยศ. (2560). การพฒนาระบบคนหาต าแหนงและบรการอซอมรถบนระบบแผนท ออนไลนดวยซอฟตแวรรหสเปด. วทยานพนธ วท.บ.ภมศาสตร. มหาวทยาลยนเรศวร. พษณโลก. พระวฒน แกลววการณ และ สเพชร จรขจรกล. (2557). การประยกตระบบสารสนเทศภมศาสตรเพอการ วเคราะหพน ทการใหบรการศนยการแพทยฉกเฉน จงหวดเลย. Thai Journal of Science and Technology, 3(3), 137-147. [3].

ภาษา HTML, http://www.codingbasic.com/html.html (สบคนเมอ 5 เมษายน 2561)

ภาษา PHP, http://marcuscode.com/lang/php/introduction (สบคน 5 เมษายน 2561)

ภาษา JavaScript,www2.cvc.ac.th/trsai/t51/39012009/JavaScript.doc (สบคน 7 เมษายน 2560)

ระบบสารสนเทศภมศาสตรเบองตน. สบคนเมอ 2 กนยายน 2560, จาก http://www.sahavicha.com/UserFiles/File/GIS.doc สทธชย ชส าโรง. (2559).เอกสารประกอบการสอนรายวชาการจดการฐานขอมลและ ฐานขอมลภม สารสนเทศ 104333. พษณโลก.

55

สถาบนสารสนเทศทรพยากรน าและการเกษตร (องคการมหาชน). (2561). ระบบภมสารสนเทศผาน เครอขายอนเตอรเนต หรอ Internet GIS/MIS, http://www.thaiwater.net/web/index.php/knowledge/130-knowledge/298- igis.html (สบคนเมอ 5 เมษายน 2561)

สถาบนสารสนเทศทรพยากรน าและการเกษตร (องคการมหาชน). (2561). ระบบฐานขอมลเชงพนท

(Spatial Database System), http://www.thaiwater.net/web/index.php/knowledge/ 130- knowledge/298-igis.html (สบคนเมอ 5 เมษายน 2561)

อรอนงค จนอน และ กนกกร รงเรอง. (2557). การจดเตรยมเวบแอพพลเคชนส าหรบระบบสนบสนนการ ตดสนใจเลอกรสอรททพกเขาคอ: กรณศกษา อ าเภอเขาคอ จงหวดเพชรบรณ ภาคนพนธ วท.บ. สาขาวชาภมศาสตร มหาวทยาลยนเรศวร. พษณโลก.

อาครา ราชเวยง. (16-17 ธนวาคม 2559). การพฒนาระบบสารสนเทศทางภมศาสตรเพอสงเสรม อตสาหกรรมทองเทยว สประชาคมอาเซยนจงหวดกาญจนบร ในการประชม: การจดการธรกจและ เทคโนโลย ดจทล. มหาวทยาลยเทคโนโลยราชมงคลรตนโกสนทร. นครปฐม.

Choosumrong, S., Raghavan, V. and Bozon, N. (2012). Multi-Criteria Emergency Route Planning Based on Analytical Hierarchy Process and pgRouting, Geoinformatics, 23(4), 159- 168. Dijkstra, E. W. (1959), A note on two problems in connexion with graphs. Numerische Mathematik, 1,269-271. Kastl, D., and Junod, F. (2011). pgRouting Workshop Manual. Retrieved from http://workshop.pgrouting.org. ODK Collect, https://docs.opendatakit.org/collect-intro/(สบคน 6 เมษายน 2561) pgRouting Contributors. (2013). pgRouting Manual (2.0.0). Retrieved from http://docs.pgrouting.org/2.0/en/doc/index.html.

56

Google Maps API,http://at-information.blogspot.com/2013/02/api.html (สบคนเมอ 5 เมษายน

2561)

QGIS, http://gis.pwa.co.th/manual/1290764142.pdf (สบคนเมอ 6 เมษายน 2561)

Web Map Application Web GIS, http:/bpgis.blogspot.com/ (สบคนเมอ 10 เมษายน 2561)

ภาคผนวก ก แบบส ารวจสอบถามเพอเกบขอมลสถานททองเทยวและทพกดวยแอปพลเคชน ODK Collect

58

แบบส ารวจสอบถามเพอเกบขอมลสถานททองเทยวและทพกดวยแอปพลเคชน ODK Collect

ภาคผนวก ข คมอการใชเวปไซตแผนทออนไลนแสดงแผนทสถานททองเทยวและทพกและระบบคนหา

60

คมอการใชเวปไซตแผนทออนไลนแสดงแผนทสถานททองเทยวและทพกและระบบคนหา

สวนแสดงผลผานคอมพวเตอร

มลายละเอยดการแสดงผลผานทางหนาจอการใชงานดงน

เมน หนาแรก (ผใชทวไป) แสดงหนาแรกของเวปไซตเมอเรมตนการใชงาน

ภาพท 1 ภาพหนาแรกของเวปไซต (ผใชทวไป)

61

เมน แผนทสถานททองเทยว (ผใชทวไป) จะแสดงเมนยอย “คนหา” ส าหรบคนหาสถานททองเทยวและทพกโดยระบเงอนไขการคนหา โดยม Base Map ทเรยกมาจาก Open layer และมเครองมอดงในภาพท 2

- เครองมอ Zoom In Zoom Out - เครองมอ Base Map Layer

ภาพท 2 แสดงหนาระบบการคนหา

62

- แถบเครองมอการคนหา

ผใชสามารถระบเงอนไขการคนหาสถานททองเทยวและทพกทตองการ ซงจะม 4 เงอนไขการคนหาประกอบดวย ทางลาดชน ทจอดรถผสงอายและผพการ ราวจบ เครองมอปฐมพยาบาลเบองตน เมอผใชตองการสงอ านวยความสะดวก สามารถเรองเงอนไขการคนหาทค าวา YES หรอไมตองการใหเลอกค าวา NOเมอระบเงอนไขทตองการแลวกดคนหา

ภาพท 3 ภาพแสดงแถบเมนการคนหา

63

หลงจากระบเงอนไขการคนหาระบบจะท าการคนหาสถานททองเทยวและทตรงกบความตองการของผใช(คนหาจากฐานขอมล)ปรากฏสถานททองเทยวและทพกทตรงตามเงอนไขการคนหา โดยท าการเรยกใช BaseMap จาก Open layer

ภาพท 4 ภาพแสดงผลลพธการคนหาสถานททองเทยวและทพก

เมอปรากฏสถานททองเทยวและทพกทตองการ ระบบสามารถคนหาเสนทางทสนทสดจากสถานททองเทยวและทพกไปยงโรงพยาบาลทใกลทสดโดยผใช กด icon สถานททองเทยวและพก และ กด icon โรงพยาบาล ระบบจะท าการค านวณคนหาเสนทางทสนทสดจากฟงกชน pgRouting ซงเปนการเรยกเซอรวซผาน Geoserve

ภาพท 5 ภาพแสดงผลลพธการคนหาเสนทางทสนทสด

64

ผใชสามารถเลอกเปลยนสถานททองเทยวและโรงพยาบาลเพอท าการหาเสนทางใหมไดโดยกดปม Clear ซงสามารถคนหาเสนทางใหมได

ภาพท 6 แสดงต าแหนงของปม Clear

เมนสถานทนาร (ผใชงานทวไป) แสดงสถานททองเทยวและทพกทมอยในฐานขอมล

ภาพท 6 ภาพแสดงหนาเมนสถานทนาร

65

ในหนานจะแสดงขอมลทวไปเกยวกบสถานททองเทยวและทพก ผใชสามารถกดปม Zoom หรอ กดทรปภาพเพอ ขยายดรปได

ภาพท 7 ภาพแสดงต าแหนงปม Zoom

ภาพท 8 ภาพแสดงผลลพธเมอกดปม Zoom

66

ในหนานกจะแสดงขอมลทเปนประโยชนตางๆ เกรดความร

ภาพท 9 ภาพแสดงขอมลเกรดความร

เมน เกยวกบเรา (ผใชทวไป) แสดงในสวนของผพฒนาระบบ

ภาพท 10 ภาพแสดงหนาเมนเกยวกบเรา

67

ภาพท 11 ภาพแสดงหนาเมนเกยวกบเรา

เมน เขาสระบบ (ผดแลระบบ) ในสวนของหนานใหผดแลระบบใส User Password เพอท าการ Login เขาสระบบ เมอท าการ Login แลวผดแลระบบสามรถแกไขขอมลในระบบฐานขอมลไดผานทางหนาเวป

ภาพท 12 ภาพแสดงหนาเมน Login

68

เมอท าการ Login เขาสระบบแลวจะปรากฏแถบเมน Service เพอใชในการแกไขขอมล

ภาพท 13 ภาพแสดงหนาเมน Service

- เมน Insert

เปนเมนทใชในการเพมขอมลใหมเขาสฐานขอมลขอมลทสามารถเพมเขาไปไดเชน ID Name

Longitude Latgitude และ Category

ภาพท 14 ภาพแสดงหนา Insert

69

ภาพท 15 ภาพแสดงหนา Insert

- เมน Update

เปนเมนทใชในการแกไขขอมลทมอยในฐานขอมล สามารถแกไขไดเชน ID Name

Longitude Latgitude และ Category

ภาพท 16 ภาพแสดงหนา Update

70

ภาพท 17 ภาพแสดงหนา Update

- เมน Delete

เปนเมนทใชในการลบขอมลทมอยในฐานขอมล สามารถลบไดจากตาราง ID

ภาพท 18 ภาพแสดงหนา Delete

71

ภาพท 19 ภาพแสดงหนา Delete

- เมน Select เปนเมนทใชส าหรบการแสดงตารางฐานขอมล

ภาพท 20 ภาพแสดงหนา select

ภาคผนวก ค โคดทใชในการพฒนาระบบ

73

โคดหนาแรกของเวปไซตระบบคนหาสถานททองเทยวและทพก ไฟล index.html <!DOCTYPE HTML> <!-- Aesthetic by gettemplates.co Twitter: http://twitter.com/gettemplateco URL: http://gettemplates.co --> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Landmark</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Free HTML5 Website Template by GetTemplates.co" /> <meta name="keywords" content="free website templates, free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" /> <meta name="author" content="GetTemplates.co" /> <!-- Facebook and Twitter integration --> <meta property="og:title" content=""/> <meta property="og:image" content=""/> <meta property="og:url" content=""/> <meta property="og:site_name" content=""/> <meta property="og:description" content=""/> <meta name="twitter:title" content="" /> <meta name="twitter:image" content="" /> <meta name="twitter:url" content="" /> <meta name="twitter:card" content="" /> <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet"> <!-- Animate.css --> <link rel="stylesheet" href="css/animate.css">

74

<!-- Icomoon Icon Fonts--> <link rel="stylesheet" href="css/icomoon.css"> <!-- Themify Icons--> <link rel="stylesheet" href="css/themify-icons.css"> <!-- Bootstrap --> <link rel="stylesheet" href="css/bootstrap.css"> <!-- Magnific Popup --> <link rel="stylesheet" href="css/magnific-popup.css"> <!-- Magnific Popup --> <link rel="stylesheet" href="css/bootstrap-datepicker.min.css"> <!-- Owl Carousel --> <link rel="stylesheet" href="css/owl.carousel.min.css"> <link rel="stylesheet" href="css/owl.theme.default.min.css"> <!-- Theme style --> <link rel="stylesheet" href="css/style.css"> <!-- Modernizr JS --> <script src="js/modernizr-2.6.2.min.js"></script> <!-- FOR IE9 below --> <!--[if lt IE 9]> <script src="js/respond.min.js"></script> <![endif]--> </head> <body> <div class="gtco-loader"></div> <div id="page">

75

<!-- <div class="page-inner"> --> <nav class="gtco-nav" role="navigation"> <div class="gtco-container"> <div class="row"> <div class="col-sm-4 col-xs-12"> </div> <div class="col-xs-8 text-right menu-1"> <ul> <li><a href="index.html"><font size="5">หนาเเรก</font></a></li> <li class="has-dropdown"> <li class="has-dropdown"> <a href="#"><font size="5">แผนทสถานททองเทยว</font></a> <ul class="dropdown"> <li><a href="indextravel.html"><font size="5">การคนหา</font></a></li> </ul> <a href="landmark.html"><font size="5">สถานทนาร</font></a> <li><a href="contact.html"><font size="5">เกยวกบเรา</font></a></li> <li><a href="login.html"><font size="5">เขาสระบบ</font></a></li> </ul> </div> </div> </div> </nav> <header id="gtco-header" class=" gtco-cover-md" role="banner" style="background-image: url(images/travel2.png)"> <div class="overlay"></div> <div class="gtco-container">

76

<div class="row"> <div class="col-md-12 col-md-offset-0 text-left"> <div class="row row-mt-15em"> <div class="col-md-8 mt-text animate-" data-animate-effect="none"> <br><br><br><br><br><h1><center><center><font color="NONE"></font></center></center></h1><br><br><br><br><br><br><br><br> </div> <div class="col-md-4 col-md-push-1 animate-box" data-animate-effect="fadeInRight"> </div> </div> </header><br> <div id="fh5co-client-section"> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3 text-center fh5co-heading"> <h2>ทมาเเละความส าคญ</h2> </div> </div> <div class="row"> <div class="col-md-6 text-center"> <div class="testimony"> <span class="quote"><i class="icon-quote-right"></i></span> <blockquote> <p>ปจจบนจ านวนผสงอายในประเทศไทยมแนวโนมเพมสงขนดานการทองเทยวแลวกลมผสงอายนบวาเปนกลมนกทองเทยวทมความส าคญและมคณภาพอยางมากตอการทองเทยวในสมยใหม เพราะเนองจากเปนกลมนกทองเทยวทสวนใหญไมท างานแลวหรอมเวลาท างานทนอยมเวลาวางในการทองเทยวมากกวากลมนกทองเทยวกลมอนและมเงนสะสมจากรายได ซงในปจจบนเทคโนโลยสารสนเทศและแผนทออนไลนเขามามบทบาทในชวตประจ าวนเปนอยางมาก โดยเฉพาะอยางยงในการทองเทยวประชาชนสวนใหญมกใชเทคโนโลยGPSในการน าทางและคนหา เพอทจะชวยอ านวยความสะดวกในการเดนทางเพอใหถงจดหมายไดเรวขนและยงรวมถงท าใหทราบเสนทางตาง ๆ เพอวางแผนกอนการออกเดนทาง</p> <span> </span>

77

</blockquote> </div> </div> <div class="col-md-6 text-center"> <div class="testimony"> <span class="quote"><i class="icon-quote-right"></i></span> <blockquote> <img src="table.png" width="600" height="350"> <span><a href="#" class="icon-google-plus googleplus-color"></a></span> </blockquote> </div> </div> </div> </div> </div> <br> <div id="fh5co-client-section"> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3 text-center fh5co-heading"> <h2>ปญหาเเละความส าคญ</h2> </div> </div> <div class="row"> <div class="col-md-6 text-center"> <div class="testimony"> <span class="quote"><i class="icon-quote-right"></i></span> <blockquote> <img src="l1.png" width="500" height="350"> <span> </span> </blockquote> </div> </div>

78

<div class="col-md-6 text-center"> <div class="testimony"> <span class="quote"><i class="icon-quote-right"></i></span> <blockquote> <br><br> <p>ปญหาของการทองเทยวส าหรบผสงอายและผพการ สวนใหญจะเปนเรอง สาธารณประโภค เครองอ านวยความสะดวก เครองมอชวยชวตเบองตน ฯลฯ เนองจากนกทองทองกลมนจ าเปนทจะตองไดรบขอมลขาวสาร การชวยเหลอมากกวาคนปกตปจจบนแหลงทองเทยวหลายแหงยงไมมขอมลเหลานใหบรการส าหรบนกทองเทยว ท าใหเปนปญหาส าหรบการวางแผนหรอการเดนทางไปเทยวของคนกลมน</p> <span><a href="#" class="icon-google-plus googleplus-color"></a></span> </blockquote> </div> </div> </div> </div> </div> <hr noshade="noshade"size="50" width="100%"> <footer id="gtco-footer" role="contentinfo"> <div class="gtco-container"> <div class="row row-p b-md"> <div class="col-md-4"> <div class="gtco-widget"> <h3>About Us</h3> <p>เวปไซตนเปนสวนหนงของวทยานพนธระดบปรญาตร เรอง การวเคราะหเเละการจดท าฐานขอมลแหลงทองเทยวทรองรบนกทองเทยวผสงอายเเละผพการ จดท าโดย นายวทนาถ เจยะรตน นสตสาขาวชาภมศาสตร มหาวทยาลยนเศวร</p> <img src="images/015.jpg" width="150" height="100"> <img src="images/016.jpg" width="100" height="100"> </div> </div>

79

<div class="col-md-3 col-md-push-1"> <div class="gtco-widget"> <h3>ชองทางการตดตอ</h3> <ul class="gtco-quick-contact"> <li><a href="#"><i class="icon-phone"></i>0885067937</a></li> <li><a href="#"><i class="icon-mail2"></i>Vittanart.p@hotmail.</a></li> <li><a href="#"><i class="icon-chat"></i> Live Chat</a></li> </ul> </div> </div> <div class="col-md-3 col-md-push-1"> <div class="gtco-widget"> <h3>เวปไซตทเกยวของ</h3> <ul class="gtco-quick-contact"> <li><a href="https://thai.tourismthailand.org/home"><img src="images/017.png" width="50" height="50"></i>การทองเทยวแหงประเทศไทย</a></li> <li><a href="https://th.tripadvisor.com/Attractions-g303918-Activities-Phitsanulok_Phitsanulok_Province.html"><img src="images/018.png" width="70" height="50"></i>tripadvisor</a></li> <li><a href="http://www.painaidii.com/diary/diary-detail/002004/lang/th/"><img src="images/019.png" width="60" height="50"></i>painaidii</a></li> </ul> </div> </div> </div> </footer> <!-- </div> --> </div> <div class="gototop js-top"> <a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a> </div>

80

<!-- jQuery --> <script src="js/jquery.min.js"></script> <!-- jQuery Easing --> <script src="js/jquery.easing.1.3.js"></script> <!-- Bootstrap --> <script src="js/bootstrap.min.js"></script> <!-- Waypoints --> <script src="js/jquery.waypoints.min.js"></script> <!-- Carousel --> <script src="js/owl.carousel.min.js"></script> <!-- countTo --> <script src="js/jquery.countTo.js"></script> <!-- Stellar Parallax --> <script src="js/jquery.stellar.min.js"></script> <!-- Magnific Popup --> <script src="js/jquery.magnific-popup.min.js"></script> <script src="js/magnific-popup-options.js"></script> <!-- Datepicker --> <script src="js/bootstrap-datepicker.min.js"></script> <!-- Main --> <script src="js/main.js"></script> </body> </html>

81

โคดหนาระบบการคนหาสถานททองเทยวและทพกทรองรบนกทองเทยวผสงอายและผพการ ไฟล indextravel.html <!DOCTYPE html> <html> <head> <title>travel_khaokho</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css"> <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script> <link rel="stylesheet" href="popup.css"> <script src="http://rawgit.com/walkermatt/ol3-layerswitcher/master/src/ol3-layerswitcher.js"type="text/javascript"></script> <link rel="stylesheet" href="http://rawgit.com/walkermatt/ol3-layerswitcher/master/src/ol3-layerswitcher.css"type="text/css"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <style> .ol-popup { position: absolute; background-color: white; -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); padding: 15px; border-radius: 10px; border: 1px solid #cccccc; bottom: 12px; left: -50px; min-width: 280px; } .ol-popup:after, .ol-popup:before {

82

top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .ol-popup:after { border-top-color: white; border-width: 10px; left: 48px; margin-left: -10px; } .ol-popup:before { border-top-color: #cccccc; border-width: px; left: 48px; margin-left: -11px; } .ol-popup-closer { text-decoration: none; position: absolute; top: 2px; right: 8px; } .ol-popup-closer:after { content: "X"; } header { background-color:#1E90FF; color:white; text-align:left; padding:5px;

83

} nav { line-height:30px; background-color:#87CEFA; height:250px; width:300px; float:left; padding:5px; } section { width:1050px; height:500px; float:left; padding:10px; } footer { background-color:#1E90FF; color:white; clear:both; text-align:center; padding:5px; } </style> </head> <body> <form name="fromControl" action="showpg.html" method = "post" onSubmit = "return validataForm()"> <form action="#"> <header> <h1>ระบบการคนหา</h1> <p></p> </header>

84

<nav> <b>ทางลาดชน: </b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <select name="ramp" id="ramp" > <option value="all" >all</option> <option value="Y">YES</option> <option value="N">NO</option> </select><br> <b>ทจอดรถผสงอาย,คนพการ:</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <select name="parking" id="parking" > <option value="all" >all</option> <option value="Y">YES</option> <option value="N">NO</option> </select> <br> <b>ราวจบ:</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <select name="handle" id="handle" > <option value="all" >all</option> <option value="Y">YES</option> <option value="N">NO</option> </select> <br> <b>เครองมอปฐมพยาบาลเบองตน:</b>&nbsp;&nbsp;&nbsp; <select name="aid" id="aid" > <option value="all" >all</option> <option value="Y">YES</option>

85

<option value="N">NO</option> </select> <br> <br><p align="center"> <button type="submit" class="btn btn-info btn-sm"><font size="5">คนหา</font></button> <a href="index.html" class="btn btn-info btn-sm"><font size="5">กลบหนาเเรก</font></a> </p> </nav> <section> <div class="container-fluid"> <div class="row-fluid"> <div class="span12"> <div id="map" > <div id="popup" class="ol-popup"> <a href="#" id="popup-closer" class="ol-popup-closer"></a> <div id="popup-content"></div></div> </div> </div> </div> </div> </section> <footer> Geography&Naresuan University </footer> <script> var attribution = new ol.Attribution({ html: 'Tiles &copy; <a href="http://services.arcgisonline.com/ArcGIS/' + 'rest/services/World_Topo_Map/MapServer">ArcGIS</a>' }); var view = new ol.View({ center: ol.proj.fromLonLat([101.025413,16.768016]),

86

zoom:10 }); /** * Elements that make up the popup. */ var container = document.getElementById('popup'); var content = document.getElementById('popup-content'); var closer = document.getElementById('popup-closer'); /** * Add a click handler to hide the popup. * @return {boolean} Don't follow the href. */ closer.onclick = function() { overlay.setPosition(undefined); closer.blur(); return false; }; /** * Create an overlay to anchor the popup to the map. */ var overlay = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({ element: container, autoPan: true, autoPanAnimation: { duration: 250 } })); //MAP

87

var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Group({ 'title': 'Base maps', layers:[ new ol.layer.Tile({ title: 'Topography', source: new ol.source.XYZ({attributions: [attribution],url: 'http://server.arcgisonline.com/ArcGIS/rest/services/' +'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'}), type: 'base', visible:false }), new ol.layer.Tile({ title: 'Street', source: new ol.source.XYZ({attributions: [attribution],url: 'http://server.arcgisonline.com/ArcGIS/rest/services/' +'World_Street_Map/MapServer/tile/{z}/{y}/{x}'}), type: 'base', visible:false }), new ol.layer.Tile({ title: 'Imagery', source: new ol.source.XYZ({attributions: [attribution],url: 'http://server.arcgisonline.com/ArcGIS/rest/services/' +'World_Imagery/MapServer/tile/{z}/{y}/{x}'}), type: 'base', visible:false }), new ol.layer.Tile({ title: 'OSM', source: new ol.source.OSM(),

88

type: 'base', visible: true }), new ol.layer.Tile({ title: 'Watercolor', source: new ol.source.Stamen({layer: 'watercolor'}), type: 'base', visible: false }), ] }) ], overlays: [overlay], view: view, controls: ol.control.defaults({ }).extend([ new ol.control.ScaleLine() ]), }); var layerSwitcher = new ol.control.LayerSwitcher({ tipLabel:'Legende' }); map.addControl(layerSwitcher); /** * Add a click handler to the map to render the popup. */ map.on('singleclick', function(evt) { var coordinate = evt.coordinate;

89

//แสดงคาพกดเปน องศา ลปดา var hdms = ol.coordinate.toStringHDMS(ol.proj.transform( coordinate, 'EPSG:3857', 'EPSG:4326')); //แสดงพกดทศนยม var outt = ol.coordinate.toStringXY(ol.proj.transform( coordinate, 'EPSG:3857', 'EPSG:4326'),3); var out = ol.proj.transform(coordinate, 'EPSG:3857', 'EPSG:4326'); document.getElementById("lat").value= out[1]; document.getElementById("lon").value= out[0]; content.innerHTML = '<p>ต าแหนงทคณคลก:</p><code>' + outt + '</code>'; overlay.setPosition(coordinate); }); function validataForm(){ var f6 = document.getElementById("lat").value; if (f6 =="" ){ alert("Please click the location on the map"); c1 = false; } else { c1 = true; } return c1 ; } </script> </body> </html>

90

โคดหนาแสดงผลการคนหาสถานททองเทยวและทพก ไฟล showpg.html <!DOCTYPE html> <html> <head> <title>travel</title> <meta charset="utf-8"> <link href="https://openlayers.org/en/v4.6.5/css/ol.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css"> <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script> <link rel="stylesheet" href="popup.css"> <script src="http://rawgit.com/walkermatt/ol3-layerswitcher/master/src/ol3-layerswitcher.js"type="text/javascript"></script> <link rel="stylesheet" href="http://rawgit.com/walkermatt/ol3-layerswitcher/master/src/ol3-layerswitcher.css"type="text/css"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <style> /* Style the element with the id "myHeader" */ #myHeader { background-color: #1E90FF; color: black; padding: 40px; text-align: center; } /* Style all elements with the class name "city" */ .name { background-color: #87CEFA;

91

color: white; padding: 10px; } </style> </head> <body> <!-- A unique element --> <h1 id="myHeader"><font color="white" >ผลลพธการคนหา</font></h1> <!-- Multiple similar elements --> <h2 class="name">ระบบคนหาเสนทาง</h2> <iframe src="ol3.html" height="700" width="1330"></iframe> <a href="indextravel.html" class="btn btn-info btn-sm"><font size="5">กลบหนาคนหา</font></a><a href="index.html" class="btn btn-info btn-sm"><font size="5">กลบหนาเเรก</font></a> </body> </html>

92

โคดระบบคนหาเสนทางทสนทสด ไฟล ol3.html <!DOCTYPE html> <html> <head> <title>ol3 pgRouting client</title> <meta charset="utf-8"> <link href="https://openlayers.org/en/v4.6.5/css/ol.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css"> <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script> <link rel="stylesheet" href="popup.css"> <script src="http://rawgit.com/walkermatt/ol3-layerswitcher/master/src/ol3-layerswitcher.js"type="text/javascript"></script> <link rel="stylesheet" href="http://rawgit.com/walkermatt/ol3-layerswitcher/master/src/ol3-layerswitcher.css"type="text/css"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <style> <style> #map { width: 50%; height: 100px; } </style> </head> <body> <div id="map"></div> <button class="btn btn-info btn-sm"id="clear"><font size="5">clear</font></button> <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script> <script type="text/javascript">

93

/* var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ //center: ol.proj.transform([7.1192, 50.7149], 'EPSG:4326', 'EPSG:3857'), center: ol.proj.transform([100.3810, 16.8257], 'EPSG:4326', 'EPSG:3857'), zoom: 13 }), controls: ol.control.defaults({ attributionOptions: { collapsible: false } }) }); */ var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), new ol.layer.Vector({ source: new ol.source.Vector({ url: 'mark.kml', format: new ol.format.KML({ extractStyles: true,

94

extractAttributes: true, maxDepth: 2 }) }) }) ], view: new ol.View({ center: ol.proj.transform([ 101.0255, 16.7676], 'EPSG:4326', 'EPSG:3857'), zoom: 13 }) }); var params = { LAYERS: 'pgrouting:pgrouting', FORMAT: 'image/png' } // The "start" and "destination" features. var startPoint = new ol.Feature(); var destPoint = new ol.Feature(); // The vector layer used to display the "start" and "destination" features. var vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [startPoint, destPoint] }) }); var source = new ol.source.Vector({ url: "landmark_KML.kml", format: new ol.format.KML({ projection: 'EPSG:4326', extractStyles: true }) });

95

function styleFunction(feature) { var style = new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'red', width: 9 }) }) return [style]; } var layer = new ol.layer.Vector({ source: source, style: styleFunction }); map.addLayer(layer); map.addLayer(vectorLayer); // A transform function to convert coordinates from EPSG:3857 // to EPSG:4326. var transform = ol.proj.getTransform('EPSG:3857', 'EPSG:4326'); // Register a map click listener. map.on('click', function(event) { if (startPoint.getGeometry() == null) { // First click. startPoint.setGeometry(new ol.geom.Point(event.coordinate)); } else if (destPoint.getGeometry() == null) { // Second click. destPoint.setGeometry(new ol.geom.Point(event.coordinate)); // Transform the coordinates from the map projection (EPSG:3857) // to the server projection (EPSG:4326). var startCoord = transform(startPoint.getGeometry().getCoordinates()); var destCoord = transform(destPoint.getGeometry().getCoordinates());

96

var viewparams = [ 'x1:' + startCoord[0], 'y1:' + startCoord[1], 'x2:' + destCoord[0], 'y2:' + destCoord[1] ]; params.viewparams = viewparams.join(';'); result = new ol.layer.Image({ source: new ol.source.ImageWMS({ url: 'http://localhost:8088/geoserver/pgrouting/wms?', params: params }) }); map.addLayer(result); } }); var clearButton = document.getElementById('clear'); clearButton.addEventListener('click', function(event) { // Reset the "start" and "destination" features. startPoint.setGeometry(null); destPoint.setGeometry(null); // Remove the result layer. map.removeLayer(result); }); </script> </body> </html>

97

โคดหนาแสดงสถานททองเทยวและทพกจากฐานขอมล ไฟล landmark.html <!DOCTYPE HTML> <!-- Aesthetic by gettemplates.co Twitter: http://twitter.com/gettemplateco URL: http://gettemplates.co --> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Landmark Phitsanulok</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Free HTML5 Website Template by GetTemplates.co" /> <meta name="keywords" content="free website templates, free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" /> <meta name="author" content="GetTemplates.co" /> <!-- Facebook and Twitter integration --> <meta property="og:title" content=""/> <meta property="og:image" content=""/> <meta property="og:url" content=""/> <meta property="og:site_name" content=""/> <meta property="og:description" content=""/> <meta name="twitter:title" content="" /> <meta name="twitter:image" content="" /> <meta name="twitter:url" content="" /> <meta name="twitter:card" content="" /> <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">

98

<!-- Animate.css --> <link rel="stylesheet" href="css/animate.css"> <!-- Icomoon Icon Fonts--> <link rel="stylesheet" href="css/icomoon.css"> <!-- Themify Icons--> <link rel="stylesheet" href="css/themify-icons.css"> <!-- Bootstrap --> <link rel="stylesheet" href="css/bootstrap.css"> <!-- Magnific Popup --> <link rel="stylesheet" href="css/magnific-popup.css"> <!-- Magnific Popup --> <link rel="stylesheet" href="css/bootstrap-datepicker.min.css"> <!-- Owl Carousel --> <link rel="stylesheet" href="css/owl.carousel.min.css"> <link rel="stylesheet" href="css/owl.theme.default.min.css"> <!-- Theme style --> <link rel="stylesheet" href="css/style.css"> <!-- Modernizr JS --> <script src="js/modernizr-2.6.2.min.js"></script> <!-- FOR IE9 below --> <!--[if lt IE 9]> <script src="js/respond.min.js"></script> <![endif]--> </head> <body> <div class="gtco-loader"></div> <div id="page">

99

<!-- <div class="page-inner"> --> <nav class="gtco-nav" role="navigation"> <div class="gtco-container"> <div class="row"> <div class="col-sm-4 col-xs-12"> </div> <div class="col-xs-8 text-right menu-1"> <ul> <li><a href="index.html"><font size="5">หนาหลก</font></a></li> <li class="has-dropdown"> <li class="has-dropdown"> <a href="#"><font size="5">แผนทสถานททองเทยว</font></a> <ul class="dropdown"> <li><a href="indextravel.html"><font size="5">การคนหา</font></a></li> </ul> <a href="landmark.html"><font size="5">สถานทนาร</font></a> <li><a href="contact.html"><font size="5">เกยวกบเรา</font></a></li> <li><a href="login.html"><font size="5">เขาสระบบ</font></a></li> </ul> </div> </div> </div> </nav> <header id="gtco-header" class="" role="" style="background-image: url(images/2222.png)"> <div class="overlay"></div> <div class="gtco-container">

100

<div class="row"> <div class="col-md-2 col-md-offset-0 text-center"> <div class="row row-mt-5em"> <div class="col-md-12 mt-text animate-box" data-animate-effect="fadeInUp"> </div> </div> </div> </div> </div> </header> <div class="gtco-section"> <div class="gtco-container"> <div class="row"> <div class="col-md-8 col-md-offset-2 text-center gtco-heading"> <h2><font size="6">แหลงทองเทยวเเละทพกทนาสนใจ</font></h2> </div> </div> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-6"> <a href="images/001.jpg" class="fh5co-card-item image-popup"> <figure> <div class="overlay"><i class="ti-plus"></i></div> <img src="images/001.jpg" alt="Image" class="img-responsive"> </figure> <div class="fh5co-text"> <h2>วดผาซอนแกว</h2> <p>วดพระธาตผาซอนแกว หรอวดพระธาตผาแกว นตงอยบรเวณเนนเขาในหมบานทางแดง เขาคอ จ.เพชรบรณ ซงทเรยกกนวา "ผาซอนแกว" นนเนองจากมภเขาสงใหญซอนกนเปนทวเขา</p>

101

<p><span class="btn btn-primary">Zoom</span></p> </div> </a> </div> <div class="col-lg-4 col-md-4 col-sm-6"> <a href="images/003.jpg" class="fh5co-card-item image-popup"> <figure> <div class="overlay"><i class="ti-plus"></i></div> <img src="images/003.jpg" alt="Image" class="img-responsive"> </figure> <div class="fh5co-text"> <h2>Pino Latte Resort & Cafe</h2> <p> ซงเปนหนงในทพกและคาเฟยอดฮตส าหรบคนทเดนทางมาเทยวเขาคอ ตงอยบนยอดเขาสง ดานบนเปนรานคาเฟฮปๆ ดดแปลงมาจากตคอนเทนเนอรเนนความเรยบงายแตดหรหรา</p> <p><span class="btn btn-primary">Zoom</span></p> </div> </a> </div> <div class="col-lg-4 col-md-4 col-sm-6"> <a href="images/004.jpg" class="fh5co-card-item image-popup"> <figure> <div class="overlay"><i class="ti-plus"></i></div> <img src="images/004.jpg" alt="Image" class="img-responsive"> </figure> <div class="fh5co-text"> <h2> ทงกงหนลม เขาคอ</h2> <p>กงหนลมยกษใหญ ทตงเรยงรายอยบนเนนเขาสง ในหมบานเพชรด า สามารถมองเหนววทวทศนไดกวางไกลไปถงวดผาซอนแกว ซงนอกจากจะเปนแหลงผลตกระแสไฟฟาแลว ยงเปดเปนแหลงทองเทยว</p> <p><span class="btn btn-primary">Zoom</span></p> </div> </a> </div> <div class="col-lg-4 col-md-4 col-sm-6">

102

<a href="images/005.jpg" class="fh5co-card-item image-popup"> <figure> <div class="overlay"><i class="ti-plus"></i></div> <img src="images/005.jpg" alt="Image" class="img-responsive"> </figure> <div class="fh5co-text"> <h2>Bluesky Garden</h2> <p>“BlueskyGarden”สวนดอกไมสไตลองกฤษ บรรยากาศเหมอนเดนเลนอยในยโรป ทามกลางหบเขาและธรรมชาตสวนดอกไมบนพนทกวา 30 ไรแตละโซนปลกดอกไมพชพรรณสวยงามแตกตางกน มมมถายรปสวยงาม</p> <p><span class="btn btn-primary">Zoom</span></p> </div> </a> </div> <div class="col-lg-4 col-md-4 col-sm-6"> <a href="images/006.jpg" class="fh5co-card-item image-popup"> <figure> <div class="overlay"><i class="ti-plus"></i></div> <img src="images/006.jpg" alt="Image" class="img-responsive"> </figure> <div class="fh5co-text"> <h2>โรงแรมอมพเรยลภแกว ฮลล รสอรท</h2> <p>โรงแรมอมพเรยลภแกว ฮลล รสอรท เขาคอ จ.เพชรบรณ กตอบโจทยแอด ดวยอากาศทบรสทธสดชนเหมอนไดพกผอนอยบนเทอกเขาแอลป อณหภมเฉลยตลอดทงปอยทประมาณ 18 – 25 องศาเซลเซยสเทานน </p> <p><span class="btn btn-primary">Zoom</span></p> </div> </a> </div> <div class="col-lg-4 col-md-4 col-sm-6"> <a href="images/007.jpg" class="fh5co-card-item image-popup"> <figure> <div class="overlay"><i class="ti-plus"></i></div>

103

<img src="images/007.jpg" alt="Image" class="img-responsive"> </figure> <div class="fh5co-text"> <h2>ภแกว รสอรท แอนด แอดเวนเจอร ปารค เขาคอ</h2> <p>ภแกว ตงอยบนเขาแกว รมถนนหมายเลข 12 (พษณโลก-หลมสก) ทนมบานหลากหลายสไตล ใหเอนกายทามกลางอากาศสดชนบานพกเลกๆ สหวาน หรอ บานพกสไตลสบสองปนนาประยกต.... </p> <p><span class="btn btn-primary">Zoom</span></p> </div> </a> </div> </div> </div> </div> <div class="gtco-cover gtco-cover-sm" style="background-image: url(images/014.jpg)" data-stellar-background-ratio="0.1"> <div class="gtco-container text"> <br><center><h1>เกรดความร..พาผสงอายเทยว เตรยมตวอยางไรบาง</h1></center><br> <p><font size="4" color="black">การทองเทยวทมผสงอายรวมเดนทางดวย ผทดแลหรอผทพาไป กตองมการวางแผนและเตรยมตวเตรยมความพรอมส าหรบการพาผสงอายเทยว ตองมการเตรยมตวและเตรยมความพรอมอยางไรกนบาง……….</font></p> <p><font size="4" color="black">1.ยาสามามญประจ าบาน หรอ ยาประจ าตว ของทาน ผสงอาย หากมโรคประจ าตว แลว สงส าคญทสด คอการทานยาใหตรงตอเวลา ฉะนนเราตองเตรยมยาททานทานเปนประจ าไปดวย หรอ ยาสามญประจ าบาน บางครงอาจเกดเหตการณทไมคาดคด กบคนในครอบครว เชน เดกๆวงเลนแลว เกด หกลม อยางนอยๆ ยงม ตวชวยเหลอยามฉกเฉน </font></p> <center><img src="images/0011.png" width="200" height="150"></center> <p><font size="4" color="black">2.สถานททองเทยว เราควรมการเตรยมตว หาขอมลในสถานททองเทยวและเสนทางตางๆ รวมถงทพกใหเหมาะสม กบการไปทองเทยวของครอบครว เพราจะท าใหเราไดมการวางแผนดานเวลา ไดถกตอง เนองจาก การมผสงอายไปเทยวดวยแลว เวลาเปนสงทส าคญมากเพราะหากมเวลาทยดยาวเกนไป หรอ ใชเวลามากเกนไป อาจท าใหทาน เหนอยลา ไมสดชน การไปเทยวครงน อาจไมสนกสนานมความสขกเปนได ฉะนน เราควรมการวางแผนและศกษาสถานททองเทยวตางๆใหด ทสดคะ</font></p>

104

</div> </div> </div> </div> <footer id="gtco-footer" role="contentinfo"> <div class="gtco-container"> <div class="row row-p b-md"> <div class="col-md-4"> <div class="gtco-widget"> <h3>About Us</h3> <p>เวปไซตนเปนสวนหนงของวทยานพนธระดบปรญาตร เรอง การวเคราะหเเละการจดท าฐานขอมลแหลงทองเทยวทรองรบนกทองเทยวผสงอายเเละผพการ จดท าโดย นายวทนาถ เจยะรตน นสตสาขาวชาภมศาสตร มหาวทยาลยนเศวร</p> <img src="images/015.jpg" width="150" height="100"> <img src="images/016.jpg" width="100" height="100"> </div> </div> <div class="col-md-3 col-md-push-1"> <div class="gtco-widget"> <h3>ชองทางการตดตอ</h3> <ul class="gtco-quick-contact"> <li><a href="#"><i class="icon-phone"></i>0885067937</a></li> <li><a href="#"><i class="icon-mail2"></i>Vittanart.p@hotmail.</a></li> <li><a href="#"><i class="icon-chat"></i> Live Chat</a></li> </ul> </div> </div>

105

<div class="col-md-3 col-md-push-1"> <div class="gtco-widget"> <h3>เวปไซตทเกยวของ</h3> <ul class="gtco-quick-contact"> <li><a href="https://thai.tourismthailand.org/home"><img src="images/017.png" width="50" height="50"></i>การทองเทยวแหงประเทศไทย</a></li> <li><a href="https://th.tripadvisor.com/Attractions-g303918-Activities-Phitsanulok_Phitsanulok_Province.html"><img src="images/018.png" width="70" height="50"></i>tripadvisor</a></li> <li><a href="http://www.painaidii.com/diary/diary-detail/002004/lang/th/"><img src="images/019.png" width="60" height="50"></i>painaidii</a></li> </ul> </div> </div> </div> </footer> <!-- </div> --> </div> <div class="gototop js-top"> <a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a> </div> <!-- jQuery --> <script src="js/jquery.min.js"></script> <!-- jQuery Easing --> <script src="js/jquery.easing.1.3.js"></script> <!-- Bootstrap --> <script src="js/bootstrap.min.js"></script> <!-- Waypoints --> <script src="js/jquery.waypoints.min.js"></script>

106

<!-- Carousel --> <script src="js/owl.carousel.min.js"></script> <!-- countTo --> <script src="js/jquery.countTo.js"></script> <!-- Stellar Parallax --> <script src="js/jquery.stellar.min.js"></script> <!-- Magnific Popup --> <script src="js/jquery.magnific-popup.min.js"></script> <script src="js/magnific-popup-options.js"></script> <!-- Datepicker --> <script src="js/bootstrap-datepicker.min.js"></script> <!-- Main --> <script src="js/main.js"></script> </body> </html>

107

โคดหนาการตดตอผดแลระบบ ไฟล contact.html <!DOCTYPE HTML> <!-- Aesthetic by gettemplates.co Twitter: http://twitter.com/gettemplateco URL: http://gettemplates.co --> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Landmark Phitsanulok</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Free HTML5 Website Template by GetTemplates.co" /> <meta name="keywords" content="free website templates, free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" /> <meta name="author" content="GetTemplates.co" /> <!-- Facebook and Twitter integration --> <meta property="og:title" content=""/> <meta property="og:image" content=""/> <meta property="og:url" content=""/> <meta property="og:site_name" content=""/> <meta property="og:description" content=""/> <meta name="twitter:title" content="" /> <meta name="twitter:image" content="" /> <meta name="twitter:url" content="" /> <meta name="twitter:card" content="" /> <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">

108

<!-- Animate.css --> <link rel="stylesheet" href="css/animate.css"> <!-- Icomoon Icon Fonts--> <link rel="stylesheet" href="css/icomoon.css"> <!-- Themify Icons--> <link rel="stylesheet" href="css/themify-icons.css"> <!-- Bootstrap --> <link rel="stylesheet" href="css/bootstrap.css"> <!-- Magnific Popup --> <link rel="stylesheet" href="css/magnific-popup.css"> <!-- Magnific Popup --> <link rel="stylesheet" href="css/bootstrap-datepicker.min.css"> <!-- Owl Carousel --> <link rel="stylesheet" href="css/owl.carousel.min.css"> <link rel="stylesheet" href="css/owl.theme.default.min.css"> <!-- Theme style --> <link rel="stylesheet" href="css/style.css"> <!-- Modernizr JS --> <script src="js/modernizr-2.6.2.min.js"></script> <!-- FOR IE9 below --> <!--[if lt IE 9]> <script src="js/respond.min.js"></script> <![endif]--> </head> <body> <div class="gtco-loader"></div>

109

<div id="page"> <!-- <div class="page-inner"> --> <nav class="gtco-nav" role="navigation"> <div class="gtco-container"> <div class="row"> <div class="col-sm-4 col-xs-12"> </div> <div class="col-xs-8 text-right menu-1"> <ul> <li><a href="index.html"><font size="5">หนาหลก</font></a></li> <li class="has-dropdown"> <li class="has-dropdown"> <a href="#"><font size="5">แผนทสถานททองเทยว</font></a> <ul class="dropdown"> <li><a href="indextravel.html"><font size="5">การคนหา</font></a></li> </ul> <a href="landmark.html"><font size="5">สถานทนาร</font></a> <li><a href="contact.html"><font size="5">เกยวกบเรา</font></a></li> <li><a href="login.html"><font size="5">เขาสระบบ</font></a></li> </ul> </div> </div> </div> </nav> <header id="gtco-header" class="" role="" style="background-image: url(images/2222.png)"> <div class="overlay"></div> <div class="gtco-container">

110

<div class="row"> <div class="col-md-2 col-md-offset-0 text-center"> <div class="row row-mt-5em"> <div class="col-md-12 mt-text animate-box" data-animate-effect="fadeInUp"> </div> </div> </div> </div> </div> </header> </header> <div class="" style="background-image: url(images/)" data-stellar-background-ratio="0.5"> <div class="gtco-container text"> <br><center><h1><font color="black">เวปไซตนถกพฒนาโดย</font></h1></center><br> <img src="images/vtn.jpg" width="300" height="250"> <h2><font color="black"><p>นายวทนาถ เจยะรตน นสตสาขาวชาภมศาสตร นสตชนปท 4 มหาวทยาลยนเรศวร</p></font></h2> <hr> <br><center><h1><font color="black">อาจารยทปรกษา</font></h1></center><br> <img src="images/aj2.jpg" width="300" height="250"> <h2><font color="black"><p>ผ.ศ.ดร.สทธชย ชส าโรง E-mail : sittichaic@nu.ac.th</p></font></h2> <hr> <br>

111

</div> </div> <footer id="gtco-footer" role="contentinfo"> <div class="gtco-container"> <div class="row row-p b-md"> <div class="col-md-4"> <div class="gtco-widget"> <h3>About Us</h3> <p>เวปไซตนเปนสวนหนงของวทยานพนธระดบปรญาตร เรอง การวเคราะหเเละการจดท าฐานขอมลแหลงทองเทยวทรองรบนกทองเทยวผสงอายเเละผพการ จดท าโดย นายวทนาถ เจยะรตน นสตสาขาวชาภมศาสตร มหาวทยาลยนเศวร</p> <img src="images/015.jpg" width="150" height="100"> <img src="images/016.jpg" width="100" height="100"> </div> </div> <div class="col-md-3 col-md-push-1"> <div class="gtco-widget"> <h3>ชองทางการตดตอ</h3> <ul class="gtco-quick-contact"> <li><a href="#"><i class="icon-phone"></i>0885067937</a></li> <li><a href="#"><i class="icon-mail2"></i>Vittanart.p@hotmail.</a></li> <li><a href="#"><i class="icon-chat"></i> Live Chat</a></li> </ul> </div> </div>

112

<div class="col-md-3 col-md-push-1"> <div class="gtco-widget"> <h3>เวปไซตทเกยวของ</h3> <ul class="gtco-quick-contact"> <li><a href="https://thai.tourismthailand.org/home"><img src="images/017.png" width="50" height="50"></i>การทองเทยวแหงประเทศไทย</a></li> <li><a href="https://th.tripadvisor.com/Attractions-g303918-Activities-Phitsanulok_Phitsanulok_Province.html"><img src="images/018.png" width="70" height="50"></i>tripadvisor</a></li> <li><a href="http://www.painaidii.com/diary/diary-detail/002004/lang/th/"><img src="images/019.png" width="60" height="50"></i>painaidii</a></li> </ul> </div> </div> </div> </footer> <!-- </div> --> </div> <div class="gototop js-top"> <a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a> </div> <!-- jQuery --> <script src="js/jquery.min.js"></script> <!-- jQuery Easing --> <script src="js/jquery.easing.1.3.js"></script> <!-- Bootstrap --> <script src="js/bootstrap.min.js"></script> <!-- Waypoints -->

113

<script src="js/jquery.waypoints.min.js"></script> <!-- Carousel --> <script src="js/owl.carousel.min.js"></script> <!-- countTo --> <script src="js/jquery.countTo.js"></script> <!-- Stellar Parallax --> <script src="js/jquery.stellar.min.js"></script> <!-- Magnific Popup --> <script src="js/jquery.magnific-popup.min.js"></script> <script src="js/magnific-popup-options.js"></script> <!-- Datepicker --> <script src="js/bootstrap-datepicker.min.js"></script> <!-- Main --> <script src="js/main.js"></script> </body> </html>

114

โคดหนาระบบ Login ไฟล login.html <!DOCTYPE html> <html lang="en"> <BODY background="images/img_1.jpg" align="center"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags must come first in the head; any other head content must come after these tags --> <title>Login</title> <!-- Bootstrap --> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> </head> <body> <br><br><br><br><br><br><br><br><br><br><div class="container">

115

<div class="row"> <div class="col-md-12"> <h3 align="center"> Form Login </h3> <form name="formlogin" action="./check.php" method="POST" id="login"> <div class="row"> <label class="col-md-4" style="text-align:right"> Username </label> <div class="col-md-4"> <input type="text" name="username" class="form-control" required placeholder="username" /> </div> </div> <div class="row"> <br> <label class="col-md-4" style="text-align:right"> Password </label> <div class="col-md-4"> <input type="password" name="password" class="form-control" required placeholder="password" /> </div> </div> <div class="row"> <div class="col-md-4"> </div> <div class="col-md-4"> <br /><input name="remember" type="checkbox" value="Remember me" autocomplete="off" /> จ าไวในระบบ </div> <div class="col-md-4"> </div> &nbsp; &nbsp; &nbsp; <br /> <div class="col-md-12"> <p align="center">

116

<a href="register.html" class="btn btn-info btn-sm"> สมครสมาชก </a> <button type="submit" class="btn btn-primary btn-sm" id="btn" value="Signin"> เขาสระบบ </button> </p> </div> <br> </form> </div> </div> </div> <!--start footer--> <p align="center"> </p> <!--end footer--> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> </body> </html>

117

โคดหนาส าหรบสมครเพอเขาสระบบ ไฟล register.html <!DOCTYPE html> <html lang="en"> <BODY background="images/014.jpg" align="center"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags must come first in the head; any other head content must come after these tags --> <title>Login</title> <!-- Bootstrap --> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> </head> <body>

118

<head> <title>REGISTER</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head> <body> <form name="form1" method="post" action="save_register.php"> <br><br><br><br><br><br><br><br><br><br><center>Register Form <br> <table width="400" border="1" style="width: 400px"> <tbody> <tr> <td width="125"> &nbsp;Username</td> <td width="180"> <input name="username" type="text" id="username" size="20"> </td> </tr> <tr> <td> &nbsp;Password</td> <td><input name="pass" type="password" id="pass">

119

</td> </tr> <tr> <td> &nbsp;Confirm Password</td> <td><input name="pass" type="password" id="pass"> </td> </tr> <tr> </tr> <tr> </select> </td> </tr> </tbody> </table> </center> <br> <center><input type="submit" name="Submit" value="Register"></center> </form> <!--start footer--> <p align="center"> </p> <!--end footer-->

120

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> </body> </html> โคดส าหรบเชอมตอกบฐานในการสมครเพอเขาสระบบ ไฟล save_register.php <html> <BODY background="images/014.jpg" align="center"> <DIV align="center"> <br><br><br><br><br><br><br> <form action="./service.html" method="post"> //โคดส าหรบเชอมตอฐานขอมล <?php /* get the incoming ID and password hash */ $username = $_POST["username"]; $password = ($_POST["password"]); /* establish a connection with the database */ $conn = pg_Connect("host='localhost'port='5432' user='user' password='user' dbname='ims' "); if (!$conn) print "Error:Could not connect to database.<br>\n"; /* SQL statement to query the database */ $result= pg_Exec($conn, "insert into admin (username,pass) values ('$username','$pass');"); /* Allow access if a matching record was found, else deny access. */

121

if (pg_NumRows($result)>0) { echo "<h3> Welcome $username</h3>"; echo "You can update database now"; echo "<br />"; echo "<br />"; echo '<a href="update.php"> Update now</a>'; echo "<br />"; echo "<br />"; echo '<a href="/navigateCM"> Cancel and back to main page</a>'; echo "<br />"; echo "<br />"; } else { echo '<font color="red"><h3> REGISTER Successful</h3></font><br>'; echo "<h3> Welcome $username You can Update data </h3>"; echo '<button onClick="service.html">Home</button>'; //echo($result); } ?> //โคดส าหรบเชอมตอฐานขอมล <?PHP $counter_file = "counter_dbprint.txt"; //if the file doesn't exist Then we start the count at 1 if(!file_exists($counter_file)) { exec(" echo 1 > $counter_file") ; }

122

//open the counter file and read the count $fp = fopen($counter_file, "r+"); $count = fgets($fp, 10); $count += 1; //overwrite the old count fseek($fp, 0); fwrite($fp, $count, 10); fclose($fp); ?> </TABLE> <?PHP //<a href="../index.html"> Back to main map</a><br><br> //display the counter ?> </BODY> </body> </html>

123

โคดหนาส าหรบเพมขอมลเขาสฐานขอมล (สวนหนารบคา) ไฟล insert.php <!DOCTYPE HTML> <!-- Aesthetic by gettemplates.co Twitter: http://twitter.com/gettemplateco URL: http://gettemplates.co --> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Landmark Phitsanulok</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Free HTML5 Website Template by GetTemplates.co" /> <meta name="keywords" content="free website templates, free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" /> <meta name="author" content="GetTemplates.co" /> <!-- Facebook and Twitter integration --> <meta property="og:title" content=""/> <meta property="og:image" content=""/> <meta property="og:url" content=""/> <meta property="og:site_name" content=""/> <meta property="og:description" content=""/> <meta name="twitter:title" content="" /> <meta name="twitter:image" content="" /> <meta name="twitter:url" content="" /> <meta name="twitter:card" content="" />

124

<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet"> <!-- Animate.css --> <link rel="stylesheet" href="css/animate.css"> <!-- Icomoon Icon Fonts--> <link rel="stylesheet" href="css/icomoon.css"> <!-- Themify Icons--> <link rel="stylesheet" href="css/themify-icons.css"> <!-- Bootstrap --> <link rel="stylesheet" href="css/bootstrap.css"> <!-- Magnific Popup --> <link rel="stylesheet" href="css/magnific-popup.css"> <!-- Magnific Popup --> <link rel="stylesheet" href="css/bootstrap-datepicker.min.css"> <!-- Owl Carousel --> <link rel="stylesheet" href="css/owl.carousel.min.css"> <link rel="stylesheet" href="css/owl.theme.default.min.css"> <!-- Theme style --> <link rel="stylesheet" href="css/style.css"> <!-- Modernizr JS --> <script src="js/modernizr-2.6.2.min.js"></script> <!-- FOR IE9 below --> <!--[if lt IE 9]> <script src="js/respond.min.js"></script> <![endif]--> </head> <body>

125

<div class="gtco-loader"></div> <div id="page"> <!-- <div class="page-inner"> --> <nav class="gtco-nav" role="navigation"> <div class="gtco-container"> <div class="row"> <div class="col-sm-4 col-xs-12"> </div> <div class="col-xs-8 text-right menu-1"> <ul> <li><a href="service.html">Home</a></li> <li class="has-dropdown"> <a href="#">Service</a> <ul class="dropdown"> <li><a href="insert.php">Insert</a></li> <li><a href="update.php">Update</a></li> <li><a href="delete.php">Delete</a></li> <li><a href="select.php">Select</a></li> </ul> <li class="has-dropdown"> <a href="#">ShowMap</a> <ul class="dropdown"> <li><a href="showmaplogin.html">Map</a></li>

126

<li><a href="http://localhost/works/travel/kml/cc/welcome/showmapKMLlogin.php">MapKML</a></li> </ul> <li><a href="contact1.html">Contact</a></li> <li><a href="index.html">Logout</a></li> </ul> </div> </div> </div> </nav> <header id="gtco-header" class="" role="" style="background-image: url(images/028.png)"> <div class="overlay"></div> <div class="gtco-container"> <div class="row"> <div "> <div class="row row-mt-5em"> <div class="col-md-12 mt-text animate-box" data-animate-effect="fadeInUp"> <center><h1>Insert DATA</h1></center> </div> </div> </div> </div> </div> </header> <style> <br>

127

} table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } </style> </head> <body> </HEAD> <TABLE> <BODY background="images/014.jpg" align="center"> <TABLE> <DIV align="center"> <br> <P><h2>ตารางเเสดงฐานขอมลพกดแหลงทองเทยว</h2></P><br><br>

128

<Table Border="1" align="center"> <TR bgcolor=""> <TH>ID</TH> <TH>NAME</TH> <TH>LON</TH> <TH>LAT</TH> <TH>CATEGORY</TH> </TR></DIV> <?PHP $db = pg_connect("host=localhost dbname=ims port=5432 user=user password=user"); if(!$db){ echo " connection ERROR\n"; } else { echo ""; } $sql="select id,name,lon,lat,category from pitlok_mark order by id limit 10"; $result = pg_Exec($db,$sql); $num=pg_NumRows($result); $i = 0; while ($i < $num) { echo "<TR><TD>"; echo pg_Result($result, $i, "id"); echo "</TD><TD>"; echo pg_Result($result, $i, "name"); echo "</TD><TD>"; echo pg_Result($result, $i, "lon"); echo "</TD><TD>"; echo pg_Result($result, $i, "lat"); echo "</TD><TD>"; echo pg_Result($result, $i, "category");

129

$i++; } pg_FreeResult($result); pg_Close($db); ?> </table><br><br> <center><font size="6">เพมขอมลเขาสฐานขอมล</font><br><br></center> <center><form action="insert1.php" method="post"> <table> <tr> <td><font size="4"color="Black">ID :</font></td> <td><input type="text" name="id"></td> </tr> <tr> <td><font size="4"color="Black">NAME:</font></td> <td><input type="text" name="name"></td> </tr> <tr> <td><font size="4"color="Black">LONGITUDE:</font></td> <td><input type="text" name="lon"></td> </tr> <tr> <td><font size="4"color="Black">LATITUDE:</font></td> <td><input type="text" name="lat"></td> </tr> <tr> <td><font size="4"color="Black">CATEGORY:</font></td> <td><input type="text" name="category"></td> </tr> <tr> <td></td>

130

<td><input class="btn btn-default" type="submit" value="Insert"style="font-size:20px;"></td> </tr> </table> </style> </form></center> <form action="insert1.php" method="post"> <br> <hr width="100%" size="1000"><p> <footer id="gtco-footer" role="contentinfo"> <div class="gtco-container"> <div class="row row-p b-md"> <div class="col-md-4"> <div class="gtco-widget"> <h3>About Us</h3> <p>เวปไซตนสวนหนงในวชา Internet Mapping จดท าโดย นายวทนาถ เจยะรตน นสตสาขาวชาภมศาสตร มหาวทยาลยนเศวร</p> <img src="images/015.jpg" width="150" height="100"> <img src="images/016.jpg" width="100" height="100"> </div> </div> <div class="col-md-3 col-md-push-1"> <div class="gtco-widget"> <h3>ชองทางการตดตอ</h3> <ul class="gtco-quick-contact"> <li><a href="#"><i class="icon-phone"></i>0885067937</a></li>

131

<li><a href="#"><i class="icon-mail2"></i>Vittanart.p@hotmail.</a></li> <li><a href="#"><i class="icon-chat"></i> Live Chat</a></li> </ul> </div> </div> <div class="col-md-3 col-md-push-1"> <div class="gtco-widget"> <h3>เวปไซตทเกยวของ</h3> <ul class="gtco-quick-contact"> <li><a href="https://thai.tourismthailand.org/home"><img src="images/017.png" width="50" height="50"></i>การทองเทยวแหงประเทศไทย</a></li> <li><a href="https://th.tripadvisor.com/Attractions-g303918-Activities-Phitsanulok_Phitsanulok_Province.html"><img src="images/018.png" width="70" height="50"></i>tripadvisor</a></li> <li><a href="http://www.painaidii.com/diary/diary-detail/002004/lang/th/"><img src="images/019.png" width="60" height="50"></i>painaidii</a></li> </ul> </div> </div>

132

</div> </footer> <!-- </div> --> </div> <div class="gototop js-top"> <a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a> </div> <!-- jQuery --> <script src="js/jquery.min.js"></script> <!-- jQuery Easing --> <script src="js/jquery.easing.1.3.js"></script> <!-- Bootstrap --> <script src="js/bootstrap.min.js"></script> <!-- Waypoints --> <script src="js/jquery.waypoints.min.js"></script> <!-- Carousel --> <script src="js/owl.carousel.min.js"></script> <!-- countTo --> <script src="js/jquery.countTo.js"></script> <!-- Stellar Parallax --> <script src="js/jquery.stellar.min.js"></script> <!-- Magnific Popup --> <script src="js/jquery.magnific-popup.min.js"></script> <script src="js/magnific-popup-options.js"></script>

133

<!-- Datepicker --> <script src="js/bootstrap-datepicker.min.js"></script> <!-- Main --> <script src="js/main.js"></script> </body> </HTML>

134

โคดหนาส าหรบเพมขอมลเขาสฐานขอมล (สวนค าสงเพมขอมลเขาสฐานขอมล) ไฟล insert1.php <!DOCTYPE HTML> <!-- Aesthetic by gettemplates.co Twitter: http://twitter.com/gettemplateco URL: http://gettemplates.co --> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Landmark Phitsanulok</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Free HTML5 Website Template by GetTemplates.co" /> <meta name="keywords" content="free website templates, free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" /> <meta name="author" content="GetTemplates.co" /> <!-- Facebook and Twitter integration --> <meta property="og:title" content=""/> <meta property="og:image" content=""/> <meta property="og:url" content=""/> <meta property="og:site_name" content=""/> <meta property="og:description" content=""/> <meta name="twitter:title" content="" /> <meta name="twitter:image" content="" /> <meta name="twitter:url" content="" /> <meta name="twitter:card" content="" />

135

<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet"> <!-- Animate.css --> <link rel="stylesheet" href="css/animate.css"> <!-- Icomoon Icon Fonts--> <link rel="stylesheet" href="css/icomoon.css"> <!-- Themify Icons--> <link rel="stylesheet" href="css/themify-icons.css"> <!-- Bootstrap --> <link rel="stylesheet" href="css/bootstrap.css"> <!-- Magnific Popup --> <link rel="stylesheet" href="css/magnific-popup.css"> <!-- Magnific Popup --> <link rel="stylesheet" href="css/bootstrap-datepicker.min.css"> <!-- Owl Carousel --> <link rel="stylesheet" href="css/owl.carousel.min.css"> <link rel="stylesheet" href="css/owl.theme.default.min.css"> <!-- Theme style --> <link rel="stylesheet" href="css/style.css"> <!-- Modernizr JS --> <script src="js/modernizr-2.6.2.min.js"></script> <!-- FOR IE9 below --> <!--[if lt IE 9]> <script src="js/respond.min.js"></script> <![endif]--> </head> <body>

136

<div class="gtco-loader"></div> <div id="page"> <!-- <div class="page-inner"> --> <nav class="gtco-nav" role="navigation"> <div class="gtco-container"> <div class="row"> <div class="col-sm-4 col-xs-12"> </div> <div class="col-xs-8 text-right menu-1"> <ul> <li><a href="service.html">Home</a></li> <li class="has-dropdown"> <a href="#">Service</a> <ul class="dropdown"> <li><a href="insert.php">Insert</a></li> <li><a href="update.php">Update</a></li> <li><a href="delete.php">Delete</a></li> <li><a href="select.php">Select</a></li> </ul> <li class="has-dropdown"> <a href="#">ShowMap</a> <ul class="dropdown"> <li><a href="showmaplogin.html">Map</a></li>

137

<li><a href="http://localhost/works/travel/kml/cc/welcome/showmapKMLlogin.php">MapKML</a></li> </ul> <li><a href="contact1.html">Contact</a></li> <li><a href="index.html">Logout</a></li> </ul> </div> </div> </div> </nav> <header id="gtco-header" class="" role="" style="background-image: url(images/028.png)"> <div class="overlay"></div> <div class="gtco-container"> <div class="row"> <div "> <div class="row row-mt-5em"> <div class="col-md-12 mt-text animate-box" data-animate-effect="fadeInUp"> <center><h1>Insert DATA</h1></center> </div> </div> </div> </div> </div> </header> <style> <br>

138

} table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } </style> </head> <body> </HEAD> <?PHP $db = pg_connect("host=localhost dbname=ims port=5432 user=user password=user"); $id = $_POST["id"]; $name = $_POST["name"]; $lon = $_POST["lon"]; $lat = $_POST["lat"]; $category = $_POST["category"]; if(!$db) {

139

echo "An error occurred.\n"; exit; } $result=pg_Exec($db, "insert into pitlok_mark (id,name,lon,lat,category,geom) values ('$id','$name','$lon','$lat','$category',ST_GeomFromText('MULTIPOINT($lon $lat)',4326)) ;"); if (!$result) { echo "Can't find the data.\n"; exit; } else { echo "Insert ส าเรจ!"; } pg_Close($db); ?> <BODY background="images/014.jpg" align="center"> <TABLE> <DIV align="center"> <P><h2>ตารางเเสดงฐานขอมลพกดแหลงทองเทยว</h2></P> <Table Border="1" align="center"> <TR bgcolor=""> <TH>ID</TH> <TH>NAME</TH> <TH>LON</TH> <TH>LAT</TH> <TH>CATEGORY</TH> </TR> </DIV> <?PHP $db = pg_connect("host=localhost dbname=ims port=5432 user=user password=user"); if(!$db){ echo "Bomp connection ERROR\n"; } else {

140

echo ""; } $sql="select id,name,lon,lat,category from pitlok_mark order by id limit 50"; $result = pg_Exec($db,$sql); $num=pg_NumRows($result); $i = 0; while ($i < $num) { echo "<TR><TD>"; echo pg_Result($result, $i, "id"); echo "</TD><TD>"; echo pg_Result($result, $i, "name"); echo "</TD><TD>"; echo pg_Result($result, $i, "lon"); echo "</TD><TD>"; echo pg_Result($result, $i, "lat"); echo "</TD><TD>"; echo pg_Result($result, $i, "category"); $i++; } pg_FreeResult($result); pg_Close($db); ?> </BODY> </table> <br> <center><h2><a href="insert.php">BACK</a></h2></center><br> <hr width="100%" size="1000"><p> <footer id="gtco-footer" role="contentinfo"> <div class="gtco-container">

141

<div class="row row-p b-md"> <div class="col-md-4"> <div class="gtco-widget"> <h3>About Us</h3> <p>เวปไซตนสวนหนงในวชา Internet Mapping จดท าโดย นายวทนาถ เจยะรตน นสตสาขาวชาภมศาสตร มหาวทยาลยนเศวร</p> <img src="images/015.jpg" width="150" height="100"> <img src="images/016.jpg" width="100" height="100"> </div> </div> <div class="col-md-3 col-md-push-1"> <div class="gtco-widget"> <h3>ชองทางการตดตอ</h3> <ul class="gtco-quick-contact"> <li><a href="#"><i class="icon-phone"></i>0885067937</a></li> <li><a href="#"><i class="icon-mail2"></i>Vittanart.p@hotmail.</a></li> <li><a href="#"><i class="icon-chat"></i> Live Chat</a></li> </ul> </div> </div> <div class="col-md-3 col-md-push-1">

142

<div class="gtco-widget"> <h3>เวปไซตทเกยวของ</h3> <ul class="gtco-quick-contact"> <li><a href="https://thai.tourismthailand.org/home"><img src="images/017.png" width="50" height="50"></i>การทองเทยวแหงประเทศไทย</a></li> <li><a href="https://th.tripadvisor.com/Attractions-g303918-Activities-Phitsanulok_Phitsanulok_Province.html"><img src="images/018.png" width="70" height="50"></i>tripadvisor</a></li> <li><a href="http://www.painaidii.com/diary/diary-detail/002004/lang/th/"><img src="images/019.png" width="60" height="50"></i>painaidii</a></li> </ul> </div> </div> </div> </footer> <!-- </div> --> </div> <div class="gototop js-top"> <a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a> </div> <!-- jQuery --> <script src="js/jquery.min.js"></script> <!-- jQuery Easing --> <script src="js/jquery.easing.1.3.js"></script> <!-- Bootstrap --> <script src="js/bootstrap.min.js"></script>

143

<!-- Waypoints --> <script src="js/jquery.waypoints.min.js"></script> <!-- Carousel --> <script src="js/owl.carousel.min.js"></script> <!-- countTo --> <script src="js/jquery.countTo.js"></script> <!-- Stellar Parallax --> <script src="js/jquery.stellar.min.js"></script> <!-- Magnific Popup --> <script src="js/jquery.magnific-popup.min.js"></script> <script src="js/magnific-popup-options.js"></script> <!-- Datepicker --> <script src="js/bootstrap-datepicker.min.js"></script> <!-- Main --> <script src="js/main.js"></script> </body> </HTML>

144

โคดหนาส าหรบแกไขขอมลในฐานขอมล (สวนรบคาการแกไขขอมล) ไฟล update.php <!DOCTYPE HTML> <!-- Aesthetic by gettemplates.co Twitter: http://twitter.com/gettemplateco URL: http://gettemplates.co --> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Landmark Phitsanulok</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Free HTML5 Website Template by GetTemplates.co" /> <meta name="keywords" content="free website templates, free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" /> <meta name="author" content="GetTemplates.co" /> <!-- Facebook and Twitter integration --> <meta property="og:title" content=""/> <meta property="og:image" content=""/> <meta property="og:url" content=""/> <meta property="og:site_name" content=""/> <meta property="og:description" content=""/> <meta name="twitter:title" content="" /> <meta name="twitter:image" content="" /> <meta name="twitter:url" content="" /> <meta name="twitter:card" content="" />

145

<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet"> <!-- Animate.css --> <link rel="stylesheet" href="css/animate.css"> <!-- Icomoon Icon Fonts--> <link rel="stylesheet" href="css/icomoon.css"> <!-- Themify Icons--> <link rel="stylesheet" href="css/themify-icons.css"> <!-- Bootstrap --> <link rel="stylesheet" href="css/bootstrap.css"> <!-- Magnific Popup --> <link rel="stylesheet" href="css/magnific-popup.css"> <!-- Magnific Popup --> <link rel="stylesheet" href="css/bootstrap-datepicker.min.css"> <!-- Owl Carousel --> <link rel="stylesheet" href="css/owl.carousel.min.css"> <link rel="stylesheet" href="css/owl.theme.default.min.css"> <!-- Theme style --> <link rel="stylesheet" href="css/style.css"> <!-- Modernizr JS --> <script src="js/modernizr-2.6.2.min.js"></script> <!-- FOR IE9 below --> <!--[if lt IE 9]> <script src="js/respond.min.js"></script> <![endif]--> </head> <body>

146

<div class="gtco-loader"></div> <div id="page"> <!-- <div class="page-inner"> --> <nav class="gtco-nav" role="navigation"> <div class="gtco-container"> <div class="row"> <div class="col-sm-4 col-xs-12"> </div> <div class="col-xs-8 text-right menu-1"> <ul> <li><a href="service.html">Home</a></li> <li class="has-dropdown"> <a href="#">Service</a> <ul class="dropdown"> <li><a href="insert.php">Insert</a></li> <li><a href="update.php">Update</a></li> <li><a href="delete.php">Delete</a></li> <li><a href="select.php">Select</a></li> </ul> <li class="has-dropdown"> <a href="#">ShowMap</a> <ul class="dropdown"> <li><a href="showmaplogin.html">Map</a></li>

147

<li><a href="http://localhost/works/travel/kml/cc/welcome/showmapKMLlogin.php">MapKML</a></li> </ul> <li><a href="contact1.html">Contact</a></li> <li><a href="index.html">Logout</a></li> </ul> </div> </div> </div> </nav> <header id="gtco-header" class="" role="" style="background-image: url(images/028.png)"> <div class="overlay"></div> <div class="gtco-container"> <div class="row"> <div "> <div class="row row-mt-5em"> <div class="col-md-12 mt-text animate-box" data-animate-effect="fadeInUp"> <center><h1>Update DATA</h1></center> </div> </div> </div> </div> </div> </header> <style> <br>

148

} table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } </style> </head> <body> </HEAD> <TABLE> <BODY background="images/014.jpg" align="center"> <TABLE> <DIV align="center"> <P><h2>ตารางเเสดงฐานขอมลพกดแหลงทองเทยว</h2></P> <Table Border="1" align="center"> <TR bgcolor=""> <TH>ID</TH> <TH>NAME</TH> <TH>LAT</TH> <TH>LON</TH> <TH>CATEGORY</TH> </TR></DIV>

149

<?PHP $db = pg_connect("host=localhost dbname=ims port=5432 user=user password=user"); if(!$db){ echo "Bomp connection ERROR\n"; } else { echo ""; } $sql="select id,name,lat,lon,category from pitlok_mark order by id limit 10"; $result = pg_Exec($db,$sql); $num=pg_NumRows($result); $i = 0; while ($i < $num) { echo "<TR><TD>"; echo pg_Result($result, $i, "id"); echo "</TD><TD>"; echo pg_Result($result, $i, "name"); echo "</TD><TD>"; echo pg_Result($result, $i, "lat"); echo "</TD><TD>"; echo pg_Result($result, $i, "lon"); echo "</TD><TD>"; echo pg_Result($result, $i, "category"); $i++; } pg_FreeResult($result); pg_Close($db); ?> </table> <center><form action="update1.php" method="post"> <br> <table>

150

<tr> <td><font size="4"color="Black">ID :</font></td> <td><input type="text" name="id"></td> </tr> <tr> <td><font size="4"color="Black">NAME:</font></td> <td><input type="text" name="name"></td> </tr> <tr> <td><font size="4"color="Black">LATITUDE:</font></td> <td><input type="text" name="lat"></td> </tr> <tr> <td><font size="4"color="Black">LONGITUDE:</font></td> <td><input type="text" name="lon"></td> </tr> <tr> <td><font size="4"color="Black">CATEGORY:</font></td> <td><input type="text" name="category"></td> </tr> <tr> <td></td> <td><input class="btn btn-default" type="submit" value="Update"style="font-size:20px;"></td> </tr> </table> </style> </form></center> <form action="update1.php" method="post"> <br> <hr width="100%" size="1000"><p> <footer id="gtco-footer" role="contentinfo"> <div class="gtco-container">

151

<div class="row row-p b-md"> <div class="col-md-4"> <div class="gtco-widget"> <h3>About Us</h3> <p>เวปไซตนสวนหนงในวชา Internet Mapping จดท าโดย นายวทนาถ เจยะรตน นสตสาขาวชาภมศาสตร มหาวทยาลยนเศวร</p> <img src="images/015.jpg" width="150" height="100"> <img src="images/016.jpg" width="100" height="100"> </div> </div> <div class="col-md-3 col-md-push-1"> <div class="gtco-widget"> <h3>ชองทางการตดตอ</h3> <ul class="gtco-quick-contact"> <li><a href="#"><i class="icon-phone"></i>0885067937</a></li> <li><a href="#"><i class="icon-mail2"></i>Vittanart.p@hotmail.</a></li> <li><a href="#"><i class="icon-chat"></i> Live Chat</a></li> </ul> </div> </div> <div class="col-md-3 col-md-push-1">

152

<div class="gtco-widget"> <h3>เวปไซตทเกยวของ</h3> <ul class="gtco-quick-contact"> <li><a href="https://thai.tourismthailand.org/home"><img src="images/017.png" width="50" height="50"></i>การทองเทยวแหงประเทศไทย</a></li> <li><a href="https://th.tripadvisor.com/Attractions-g303918-Activities-Phitsanulok_Phitsanulok_Province.html"><img src="images/018.png" width="70" height="50"></i>tripadvisor</a></li> <li><a href="http://www.painaidii.com/diary/diary-detail/002004/lang/th/"><img src="images/019.png" width="60" height="50"></i>painaidii</a></li> </ul> </div> </div> </div> </footer> <!-- </div> --> </div> <div class="gototop js-top"> <a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a> </div> <!-- jQuery --> <script src="js/jquery.min.js"></script> <!-- jQuery Easing --> <script src="js/jquery.easing.1.3.js"></script> <!-- Bootstrap -->

153

<script src="js/bootstrap.min.js"></script> <!-- Waypoints --> <script src="js/jquery.waypoints.min.js"></script> <!-- Carousel --> <script src="js/owl.carousel.min.js"></script> <!-- countTo --> <script src="js/jquery.countTo.js"></script> <!-- Stellar Parallax --> <script src="js/jquery.stellar.min.js"></script> <!-- Magnific Popup --> <script src="js/jquery.magnific-popup.min.js"></script> <script src="js/magnific-popup-options.js"></script> <!-- Datepicker --> <script src="js/bootstrap-datepicker.min.js"></script> <!-- Main --> <script src="js/main.js"></script> </body> </HTML>

154

โคดหนาส าหรบแกไขขอมลในฐานขอมล (สวนค าสงแกไขขอมลในฐานขอมล) ไฟล update1.php <!DOCTYPE HTML> <!-- Aesthetic by gettemplates.co Twitter: http://twitter.com/gettemplateco URL: http://gettemplates.co --> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Landmark Phitsanulok</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Free HTML5 Website Template by GetTemplates.co" /> <meta name="keywords" content="free website templates, free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" /> <meta name="author" content="GetTemplates.co" /> <!-- Facebook and Twitter integration --> <meta property="og:title" content=""/> <meta property="og:image" content=""/> <meta property="og:url" content=""/> <meta property="og:site_name" content=""/> <meta property="og:description" content=""/> <meta name="twitter:title" content="" /> <meta name="twitter:image" content="" /> <meta name="twitter:url" content="" /> <meta name="twitter:card" content="" />

155

<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet"> <!-- Animate.css --> <link rel="stylesheet" href="css/animate.css"> <!-- Icomoon Icon Fonts--> <link rel="stylesheet" href="css/icomoon.css"> <!-- Themify Icons--> <link rel="stylesheet" href="css/themify-icons.css"> <!-- Bootstrap --> <link rel="stylesheet" href="css/bootstrap.css"> <!-- Magnific Popup --> <link rel="stylesheet" href="css/magnific-popup.css"> <!-- Magnific Popup --> <link rel="stylesheet" href="css/bootstrap-datepicker.min.css"> <!-- Owl Carousel --> <link rel="stylesheet" href="css/owl.carousel.min.css"> <link rel="stylesheet" href="css/owl.theme.default.min.css"> <!-- Theme style --> <link rel="stylesheet" href="css/style.css"> <!-- Modernizr JS --> <script src="js/modernizr-2.6.2.min.js"></script> <!-- FOR IE9 below --> <!--[if lt IE 9]> <script src="js/respond.min.js"></script> <![endif]--> </head> <body>

156

<div class="gtco-loader"></div> <div id="page"> <!-- <div class="page-inner"> --> <nav class="gtco-nav" role="navigation"> <div class="gtco-container"> <div class="row"> <div class="col-sm-4 col-xs-12"> </div> <div class="col-xs-8 text-right menu-1"> <ul> <li><a href="service.html">Home</a></li> <li class="has-dropdown"> <a href="#">Service</a> <ul class="dropdown"> <li><a href="insert.php">Insert</a></li> <li><a href="update.php">Update</a></li> <li><a href="delete.php">Delete</a></li> <li><a href="select.php">Select</a></li> </ul> <li class="has-dropdown"> <a href="#">ShowMap</a> <ul class="dropdown"> <li><a href="showmaplogin.html">Map</a></li>

157

<li><a href="http://localhost/works/travel/kml/cc/welcome/showmapKMLlogin.php">MapKML</a></li> </ul> <li><a href="contact1.html">Contact</a></li> <li><a href="index.html">Logout</a></li> </ul> </div> </div> </div> </nav> <header id="gtco-header" class="" role="" style="background-image: url(images/028.png)"> <div class="overlay"></div> <div class="gtco-container"> <div class="row"> <div "> <div class="row row-mt-5em"> <div class="col-md-12 mt-text animate-box" data-animate-effect="fadeInUp"> <center><h1>Update DATA</h1></center> </div> </div> </div> </div> </div> </header> <style> <br>

158

} table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } </style> </head> <body> </HEAD> <body> </HEAD> <?PHP $db = pg_connect("host=localhost dbname=ims port=5432 user=user password=user"); $id = $_POST["id"]; $name = $_POST["name"]; $lat = $_POST["lat"]; $lon = $_POST["lon"]; $category = $_POST["category"]; if(!$db) { echo "An error occurred.\n";

159

exit; } $result=pg_Exec($db, "update landmark_phitlok set name='$name',lat='$lat',lon='$lon',category='$category' WHERE id='$id';"); if (!$result) { echo "Can't find the data.\n"; exit; } else { echo "Update ส าเรจ!"; } pg_Close($db); ?> <BODY background="images/014.jpg" align="center"> <TABLE> <DIV align="center"> <P><h2>ตารางเเสดงฐานขอมลพกดแหลงทองเทยว</h2></P> <Table Border="1" align="center"> <TR> <TH>ID</TH> <TH>NAME</TH> <TH>LAT</TH> <TH>LON</TH> <TH>CATEGORY</TH> </TR> </DIV> <?PHP $db = pg_connect("host=localhost dbname=ims port=5432 user=user password=user"); if(!$db){ echo "connection ERROR\n"; } else {

160

echo ""; } $sql="select id,name,lat,lon,category from pitlok_mark order by id limit 40"; $result = pg_Exec($db,$sql); $num=pg_NumRows($result); $i = 0; while ($i < $num) { echo "<TR><TD>"; echo pg_Result($result, $i, "id"); echo "</TD><TD>"; echo pg_Result($result, $i, "name"); echo "</TD><TD>"; echo pg_Result($result, $i, "lat"); echo "</TD><TD>"; echo pg_Result($result, $i, "lon"); echo "</TD><TD>"; echo pg_Result($result, $i, "category"); $i++; } pg_FreeResult($result); pg_Close($db); ?> </BODY> </table> <center><h2><a href="update.php">BACK</a><h2></center><br> <br> <hr width="100%" size="1000"><p> <footer id="gtco-footer" role="contentinfo">

161

<div class="gtco-container"> <div class="row row-p b-md"> <div class="col-md-4"> <div class="gtco-widget"> <h3>About Us</h3> <p>เวปไซตนสวนหนงในวชา Internet Mapping จดท าโดย นายวทนาถ เจยะรตน นสตสาขาวชาภมศาสตร มหาวทยาลยนเศวร</p> <img src="images/015.jpg" width="150" height="100"> <img src="images/016.jpg" width="100" height="100"> </div> </div> <div class="col-md-3 col-md-push-1"> <div class="gtco-widget"> <h3>ชองทางการตดตอ</h3> <ul class="gtco-quick-contact"> <li><a href="#"><i class="icon-phone"></i>0885067937</a></li> <li><a href="#"><i class="icon-mail2"></i>Vittanart.p@hotmail.</a></li> <li><a href="#"><i class="icon-chat"></i> Live Chat</a></li> </ul> </div> </div> <div class="col-md-3 col-md-push-1"> <div class="gtco-widget"> <h3>เวปไซตทเกยวของ</h3> <ul class="gtco-quick-contact"> <li><a href="https://thai.tourismthailand.org/home"><img src="images/017.png" width="50" height="50"></i>การทองเทยวแหงประเทศไทย</a></li>

162

<li><a href="https://th.tripadvisor.com/Attractions-g303918-Activities-Phitsanulok_Phitsanulok_Province.html"><img src="images/018.png" width="70" height="50"></i>tripadvisor</a></li> <li><a href="http://www.painaidii.com/diary/diary-detail/002004/lang/th/"><img src="images/019.png" width="60" height="50"></i>painaidii</a></li> </ul> </div> </div> </div> </footer> <!-- </div> --> </div> <div class="gototop js-top"> <a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a> </div> <!-- jQuery --> <script src="js/jquery.min.js"></script> <!-- jQuery Easing --> <script src="js/jquery.easing.1.3.js"></script> <!-- Bootstrap --> <script src="js/bootstrap.min.js"></script> <!-- Waypoints --> <script src="js/jquery.waypoints.min.js"></script> <!-- Carousel --> <script src="js/owl.carousel.min.js"></script> <!-- countTo --> <script src="js/jquery.countTo.js"></script>

163

<!-- Stellar Parallax --> <script src="js/jquery.stellar.min.js"></script> <!-- Magnific Popup --> <script src="js/jquery.magnific-popup.min.js"></script> <script src="js/magnific-popup-options.js"></script> <!-- Datepicker --> <script src="js/bootstrap-datepicker.min.js"></script> <!-- Main --> <script src="js/main.js"></script> </body> </HTML>

164

โคดหนาส าหรบการลบขอมลทอยในฐานขอมล (สวนการรบคา) ไฟล Delete.php <!DOCTYPE HTML> <!-- Aesthetic by gettemplates.co Twitter: http://twitter.com/gettemplateco URL: http://gettemplates.co --> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Landmark Phitsanulok</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Free HTML5 Website Template by GetTemplates.co" /> <meta name="keywords" content="free website templates, free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" /> <meta name="author" content="GetTemplates.co" /> <!-- Facebook and Twitter integration --> <meta property="og:title" content=""/> <meta property="og:image" content=""/> <meta property="og:url" content=""/> <meta property="og:site_name" content=""/> <meta property="og:description" content=""/> <meta name="twitter:title" content="" /> <meta name="twitter:image" content="" /> <meta name="twitter:url" content="" /> <meta name="twitter:card" content="" />

165

<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet"> <!-- Animate.css --> <link rel="stylesheet" href="css/animate.css"> <!-- Icomoon Icon Fonts--> <link rel="stylesheet" href="css/icomoon.css"> <!-- Themify Icons--> <link rel="stylesheet" href="css/themify-icons.css"> <!-- Bootstrap --> <link rel="stylesheet" href="css/bootstrap.css"> <!-- Magnific Popup --> <link rel="stylesheet" href="css/magnific-popup.css"> <!-- Magnific Popup --> <link rel="stylesheet" href="css/bootstrap-datepicker.min.css"> <!-- Owl Carousel --> <link rel="stylesheet" href="css/owl.carousel.min.css"> <link rel="stylesheet" href="css/owl.theme.default.min.css"> <!-- Theme style --> <link rel="stylesheet" href="css/style.css"> <!-- Modernizr JS --> <script src="js/modernizr-2.6.2.min.js"></script> <!-- FOR IE9 below --> <!--[if lt IE 9]> <script src="js/respond.min.js"></script> <![endif]--> </head> <body>

166

<div class="gtco-loader"></div> <div id="page"> <!-- <div class="page-inner"> --> <nav class="gtco-nav" role="navigation"> <div class="gtco-container"> <div class="row"> <div class="col-sm-4 col-xs-12"> </div> <div class="col-xs-8 text-right menu-1"> <ul> <li><a href="service.html">Home</a></li> <li class="has-dropdown"> <a href="#">Service</a> <ul class="dropdown"> <li><a href="insert.php">Insert</a></li> <li><a href="update.php">Update</a></li> <li><a href="delete.php">Delete</a></li> <li><a href="select.php">Select</a></li> </ul> <li class="has-dropdown"> <a href="#">ShowMap</a> <ul class="dropdown"> <li><a href="showmaplogin.html">Map</a></li>

167

<li><a href="http://localhost/works/travel/kml/cc/welcome/showmapKMLlogin.php">MapKML</a></li> </ul> <li><a href="contact1.html">Contact</a></li> <li><a href="index.html">Logout</a></li> </ul> </div> </div> </div> </nav> <header id="gtco-header" class="" role="" style="background-image: url(images/028.png)"> <div class="overlay"></div> <div class="gtco-container"> <div class="row"> <div "> <div class="row row-mt-5em"> <div class="col-md-12 mt-text animate-box" data-animate-effect="fadeInUp"> <center><h1>Delete DATA</h1></center> </div> </div> </div> </div> </div> </header> <style> <br>

168

} table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } </style> </head> <body> </HEAD> <TABLE> <BODY background="images/014.jpg" align="center"> <TABLE> <DIV align="center"> <P><h2>ตารางเเสดงฐานขอมลพกดแหลงทองเทยว</h2></P> <Table Border="1" align="center"> <TR bgcolor=""> <TH>ID</TH> <TH>NAME</TH> <TH>LON</TH> <TH>LAT</TH> <TH>CATEGORY</TH> </TR></DIV>

169

<?PHP $db = pg_connect("host=localhost dbname=ims port=5432 user=user password=user"); if(!$db){ echo "Bomp connection ERROR\n"; } else { echo ""; } $sql="select id,name,lon,lat,category from pitlok_mark order by id limit 50"; $result = pg_Exec($db,$sql); $num=pg_NumRows($result); $i = 0; while ($i < $num) { echo "<TR><TD>"; echo pg_Result($result, $i, "id"); echo "</TD><TD>"; echo pg_Result($result, $i, "name"); echo "</TD><TD>"; echo pg_Result($result, $i, "lon"); echo "</TD><TD>"; echo pg_Result($result, $i, "lat"); echo "</TD><TD>"; echo pg_Result($result, $i, "category"); $i++; } pg_FreeResult($result); pg_Close($db); ?> </table> <form action="delete1.php" method="post"> <br>

170

<center><p>ระบ ID ขอมลทตองการลบ<p><br><br> ID:<input type="text" name="id"><input type="submit" value="Delete"/></center> <br> <hr width="100%" size="1000"><p> <footer id="gtco-footer" role="contentinfo"> <div class="gtco-container"> <div class="row row-p b-md"> <div class="col-md-4"> <div class="gtco-widget"> <h3>About Us</h3> <p>เวปไซตนสวนหนงในวชา Internet Mapping จดท าโดย นายวทนาถ เจยะรตน นสตสาขาวชาภมศาสตร มหาวทยาลยนเศวร</p> <img src="images/015.jpg" width="150" height="100"> <img src="images/016.jpg" width="100" height="100"> </div> </div> <div class="col-md-3 col-md-push-1"> <div class="gtco-widget"> <h3>ชองทางการตดตอ</h3> <ul class="gtco-quick-contact"> <li><a href="#"><i class="icon-phone"></i>0885067937</a></li> <li><a href="#"><i class="icon-mail2"></i>Vittanart.p@hotmail.</a></li> <li><a href="#"><i class="icon-chat"></i> Live Chat</a></li> </ul> </div> </div>

171

<div class="col-md-3 col-md-push-1"> <div class="gtco-widget"> <h3>เวปไซตทเกยวของ</h3> <ul class="gtco-quick-contact"> <li><a href="https://thai.tourismthailand.org/home"><img src="images/017.png" width="50" height="50"></i>การทองเทยวแหงประเทศไทย</a></li> <li><a href="https://th.tripadvisor.com/Attractions-g303918-Activities-Phitsanulok_Phitsanulok_Province.html"><img src="images/018.png" width="70" height="50"></i>tripadvisor</a></li> <li><a href="http://www.painaidii.com/diary/diary-detail/002004/lang/th/"><img src="images/019.png" width="60" height="50"></i>painaidii</a></li> </ul> </div> </div> </div> </footer> <!-- </div> --> </div> <div class="gototop js-top"> <a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a> </div> <!-- jQuery --> <script src="js/jquery.min.js"></script> <!-- jQuery Easing -->

172

<script src="js/jquery.easing.1.3.js"></script> <!-- Bootstrap --> <script src="js/bootstrap.min.js"></script> <!-- Waypoints --> <script src="js/jquery.waypoints.min.js"></script> <!-- Carousel --> <script src="js/owl.carousel.min.js"></script> <!-- countTo --> <script src="js/jquery.countTo.js"></script> <!-- Stellar Parallax --> <script src="js/jquery.stellar.min.js"></script> <!-- Magnific Popup --> <script src="js/jquery.magnific-popup.min.js"></script> <script src="js/magnific-popup-options.js"></script> <!-- Datepicker --> <script src="js/bootstrap-datepicker.min.js"></script> <!-- Main --> <script src="js/main.js"></script> </body> </HTML>

173

โคดหนาส าหรบการลบขอมลทอยในฐานขอมล (สวนค าสงการลบขอมลในฐานขอมล) ไฟล Delete1.php <!DOCTYPE HTML> <!-- Aesthetic by gettemplates.co Twitter: http://twitter.com/gettemplateco URL: http://gettemplates.co --> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Landmark Phitsanulok</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Free HTML5 Website Template by GetTemplates.co" /> <meta name="keywords" content="free website templates, free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" /> <meta name="author" content="GetTemplates.co" /> <!-- Facebook and Twitter integration --> <meta property="og:title" content=""/> <meta property="og:image" content=""/> <meta property="og:url" content=""/> <meta property="og:site_name" content=""/> <meta property="og:description" content=""/> <meta name="twitter:title" content="" /> <meta name="twitter:image" content="" /> <meta name="twitter:url" content="" /> <meta name="twitter:card" content="" />

174

<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet"> <!-- Animate.css --> <link rel="stylesheet" href="css/animate.css"> <!-- Icomoon Icon Fonts--> <link rel="stylesheet" href="css/icomoon.css"> <!-- Themify Icons--> <link rel="stylesheet" href="css/themify-icons.css"> <!-- Bootstrap --> <link rel="stylesheet" href="css/bootstrap.css"> <!-- Magnific Popup --> <link rel="stylesheet" href="css/magnific-popup.css"> <!-- Magnific Popup --> <link rel="stylesheet" href="css/bootstrap-datepicker.min.css"> <!-- Owl Carousel --> <link rel="stylesheet" href="css/owl.carousel.min.css"> <link rel="stylesheet" href="css/owl.theme.default.min.css"> <!-- Theme style --> <link rel="stylesheet" href="css/style.css"> <!-- Modernizr JS --> <script src="js/modernizr-2.6.2.min.js"></script> <!-- FOR IE9 below --> <!--[if lt IE 9]> <script src="js/respond.min.js"></script> <![endif]--> </head> <body>

175

<div class="gtco-loader"></div> <div id="page"> <!-- <div class="page-inner"> --> <nav class="gtco-nav" role="navigation"> <div class="gtco-container"> <div class="row"> <div class="col-sm-4 col-xs-12"> </div> <div class="col-xs-8 text-right menu-1"> <ul> <li><a href="service.html">Home</a></li> <li class="has-dropdown"> <a href="#">Service</a> <ul class="dropdown"> <li><a href="insert.php">Insert</a></li> <li><a href="update.php">Update</a></li> <li><a href="delete.php">Delete</a></li> <li><a href="select.php">Select</a></li> </ul> <li class="has-dropdown"> <a href="#">ShowMap</a> <ul class="dropdown"> <li><a href="showmaplogin.html">Map</a></li>

176

<li><a href="http://localhost/works/travel/kml/cc/welcome/showmapKMLlogin.php">MapKML</a></li> </ul> <li><a href="contact1.html">Contact</a></li> <li><a href="index.html">Logout</a></li> </ul> </div> </div> </div> </nav> <header id="gtco-header" class="" role="" style="background-image: url(images/028.png)"> <div class="overlay"></div> <div class="gtco-container"> <div class="row"> <div "> <div class="row row-mt-5em"> <div class="col-md-12 mt-text animate-box" data-animate-effect="fadeInUp"> <center><h1>Delete DATA</h1></center> </div> </div> </div> </div> </div> </header> <style> <br>

177

} table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } </style> </head> <body> </HEAD> <?PHP $db = pg_connect("host=localhost dbname=ims port=5432 user=user password=user"); $id = $_POST["id"]; $name = $_POST["name"]; $lon = $_POST["lon"]; $lat = $_POST["lat"]; $category = $_POST["category"]; if(!$db) { echo "An error occurred.\n"; exit;

178

} $result=pg_Exec($db, "Delete from pitlok_mark WHERE id=$id ;"); if (!$result) { echo "Can't find the data.\n"; exit; } else { echo "Delete ส าเรจ!"; } pg_Close($db); ?> <BODY background="images/014.jpg" align="center"> <TABLE> <DIV align="center"> <P><h2>View Database Records</h2></P> <Table Border="1" align="center"> <TR bgcolor=""> <TH>ID</TH> <TH>NAME</TH> <TH>LON</TH> <TH>LAT</TH> <TH>CATEGORY</TH> </TR> </DIV> <?PHP $db = pg_connect("host=localhost dbname=ims port=5432 user=user password=user"); if(!$db){ echo "Bomp connection ERROR\n"; } else { echo ""; }

179

$sql="select id,name,lat,lon,category from pitlok_mark order by id limit 40"; $result = pg_Exec($db,$sql); $num=pg_NumRows($result); $i = 0; while ($i < $num) { echo "<TR><TD>"; echo pg_Result($result, $i, "id"); echo "</TD><TD>"; echo pg_Result($result, $i, "name"); echo "</TD><TD>"; echo pg_Result($result, $i, "lon"); echo "</TD><TD>"; echo pg_Result($result, $i, "lat"); echo "</TD><TD>"; echo pg_Result($result, $i, "category"); $i++; } pg_FreeResult($result); pg_Close($db); ?> </BODY> </table> <center><h2><a href="delete.php">BACK</a></h2></center><br> <br> <hr width="100%" size="1000"><p> <footer id="gtco-footer" role="contentinfo"> <div class="gtco-container"> <div class="row row-p b-md">

180

<div class="col-md-4"> <div class="gtco-widget"> <h3>About Us</h3> <p>เวปไซตนสวนหนงในวชา Internet Mapping จดท าโดย นายวทนาถ เจยะรตน นสตสาขาวชาภมศาสตร มหาวทยาลยนเศวร</p> <img src="images/015.jpg" width="150" height="100"> <img src="images/016.jpg" width="100" height="100"> </div> </div> <div class="col-md-3 col-md-push-1"> <div class="gtco-widget"> <h3>ชองทางการตดตอ</h3> <ul class="gtco-quick-contact"> <li><a href="#"><i class="icon-phone"></i>0885067937</a></li> <li><a href="#"><i class="icon-mail2"></i>Vittanart.p@hotmail.</a></li> <li><a href="#"><i class="icon-chat"></i> Live Chat</a></li> </ul> </div> </div> <div class="col-md-3 col-md-push-1"> <div class="gtco-widget"> <h3>เวปไซตทเกยวของ</h3> <ul class="gtco-quick-contact"> <li><a href="https://thai.tourismthailand.org/home"><img src="images/017.png" width="50" height="50"></i>การทองเทยวแหงประเทศไทย</a></li> <li><a href="https://th.tripadvisor.com/Attractions-g303918-Activities-

181

Phitsanulok_Phitsanulok_Province.html"><img src="images/018.png" width="70" height="50"></i>tripadvisor</a></li> <li><a href="http://www.painaidii.com/diary/diary-detail/002004/lang/th/"><img src="images/019.png" width="60" height="50"></i>painaidii</a></li> </ul> </div> </div> </div> </footer> <!-- </div> --> </div> <div class="gototop js-top"> <a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a> </div> <!-- jQuery --> <script src="js/jquery.min.js"></script> <!-- jQuery Easing --> <script src="js/jquery.easing.1.3.js"></script> <!-- Bootstrap --> <script src="js/bootstrap.min.js"></script> <!-- Waypoints --> <script src="js/jquery.waypoints.min.js"></script> <!-- Carousel --> <script src="js/owl.carousel.min.js"></script> <!-- countTo --> <script src="js/jquery.countTo.js"></script> <!-- Stellar Parallax -->

182

<script src="js/jquery.stellar.min.js"></script> <!-- Magnific Popup --> <script src="js/jquery.magnific-popup.min.js"></script> <script src="js/magnific-popup-options.js"></script> <!-- Datepicker --> <script src="js/bootstrap-datepicker.min.js"></script> <!-- Main --> <script src="js/main.js"></script> </body> </HTML>

183

ประวตผวจย

184

ประวตผวจย ชอ – สกล วทนาถ เจยะรตน วน เดอน ปเกด 30 เมษายน 2539 ทอยปจจบน 174 หม 1 ต าบลตาลชม อ าเภอเวยงสา จงหวดนาน 55110 ประวตการศกษา พ.ศ.2558-ปจจบน วท.บ (ภมศาสตร) มหาวทยาลยนเรศวร เกรดเฉลย 2.64 พ.ศ.2552-2557 ระดบมธยมศกษา (วทย-คณต) โรงเรยนศรสวสดวทยาคารจงหวดนาน ต าบลเจดย อ าเภอเมอง จงหวดนาน เกรดเฉลย 2.22 พ.ศ.2546-2551 ระดบประถมศกษา โรงเรยนราชานบาล ต าบลในเมอง อ าเภอเมอง จงหวดนาน

กจกรรมทเขารวม เขารวมอบรมในรายวชาโฟโตแกรมเมตร (104331) ของ ดร.นฐพล มหาวค ภาคการศกษาท1 ป การศกษา 2559 ระหวางวนท 29-30 ตลาคม 2559 ณ คณะเกษตรศาสตร ทรพยากรธรรมชาต และสงแวดลอม มหาวทยาลยนเรศวร

เปนคณะผจดกจกรรม “คายสานสมพนธภมศาสตร” ระหวางวนท 24-26 กมภาพนธ 2561 ณ อทยานภ หนรองกลา จงหวดพษณโลก

อบรมการพฒนาระบบฐานขอมลผสงอายเพอรองรบการเปลยนแปลงและตดตามการดแลดวยระบบ GIS ระหวางวนท 8-9 เมษายน 2561 ณ จงหวดอตรดตถ

อบรมการจดท าระบบฐานขอมลภาคสนามแบบเรยลไทมบนระบบแผนทออนไลน ระหวางวนท 20 -21 เมษายน 2561 ณ โรงแรมดอมเพรสนาน จงหวดนาน

รงวดพนท วนท 28 พฤษภาคม 2561 ณ อ าเภอวงทอง จงหวดพษณโลก อบรมการจดท าระบบฐานขอมลภาคสนามแบบเรยลไทมบนระบบแผนทออนไลน ระหวางวนท 7-8

มถนายน 2561 ณ โรงแรมนวรตน จงหวดก าแพงเพชร ดทฝกงาน 16-17 กค โครงการฝกอบรมหลกสตรการจดท าแผนทและขอมลถนนทางหลวงทองถน ส าหรบบคลากรของกรม

ทางหลวงชนบท ระหวางวนท 17-19 กรกฏาคม 2561 ณ มหาวทยาลยราชภฎพระนคร โครงการฝกอบรมหลกสตรการจดท าแผนทและขอมลถนนทางหลวงทองถน ส าหรบบคลากรของกรม

ทางหลวงชนบท วนท 2 สงหาคม 2561 ณ มหาวทยาลยนเรศวร โครงการฝกอบรมหลกสตรการจดท าแผนทและขอมลถนนทางหลวงทองถน ส าหรบบคลากรของกรม

ทางหลวงชนบท ระหวางวนท 15-16 สงหาคม 2561 ณ มหาวทยาลยราชภฏสวนดสตนครนายก โครงการฝกอบรมหลกสตรการจดท าแผนทและขอมลถนนทางหลวงทองถน ส าหรบบคลากรของกรม

ทางหลวงชนบท ระหวางวนท 10-13 ธนวาคม 2561 ณ มหาวทยาลยบรพา จงหวดชลบร

185

พธไหวครและสวมงอบประจ าปการศกษา 2561 วนท 13 กนยายน 2561 ณ อาคารขวญเมอง มหาวทยาลยนเรศวร

โครงการอบรมเชงปฎบตการ เรอง “การพฒนาและวเคราะหและการพยากรณน า ทวมและภยแลง ดวยเทคโนโลยดจทล” จดโดย กรมอตนยมวทยา ระหวางวนท 9 – 13 กรกฎาคม 2561 ณ โรงแรม ไบรทตน กรงเทพมหานคร โครงการปรบปรงชนขอมลภมสารสนเทศของหนวยงาน (ขอมล FGDS) ใหเปนไปตามขอก าหนดของมาตรฐาน FGDS (26 จงหวด) ระหวางวนท 23-24 กนยายน 2561 ณ ศาลากลางจงหวดพษณโลก

โครงการปรบปรงชนขอมลภมสารสนเทศของหนวยงาน (ขอมล FGDS) ใหเปนไปตามขอก าหนดของมาตรฐาน FGDS (26 จงหวด) ระหวางวนท 29 กนยายน และ 1 ตลาคม 2561 ณ ศนยราชการจงหวดก าแพงเพชร

โครงการปรบปรงชนขอมลภมสารสนเทศของหนวยงาน (ขอมล FGDS) ใหเปนไปตามขอก าหนดของมาตรฐาน FGDS (26 จงหวด) ระหวางวนท 2-3 ตลาคม 2561 ณ ศาลากลางจงหวดนครสวรรค

โครงการปรบปรงชนขอมลภมสารสนเทศของหนวยงาน (ขอมล FGDS) ใหเปนไปตามขอก าหนดของมาตรฐาน FGDS (26 จงหวด) ระหวางวนท 9-10 ตลาคม 2561 ณ ศาลากลางจงหวดพจตร

186

ผลงานตพมพ Witthanart Chairat and Sittichai Choosumrong .(2018). The Development of Decision Support System for Tourism in an Ageing Population based on Web Map Application using FOSS4G. Thai Geographical Journal. 1(43), 1-10. Witthanart Chairat and Sittichai Choosumrong .(2018). The Analysis and Implementation of Tourism Information for Elderly and Disabilities people based on Web GIS. “The 3nd Naresuan Conference on Natural Resources, Geoinformation and Environment”, On December 14, 2018 at the Faculty of Agriculture. Natural Resources and

Environment Naresuan University.