การพฒนาระบบสนบสนนการตดสนใจแบบระบบสารสนเทศภมศาสตรบนเวบ

: สถานทซอสนคาในกรงเทพมหานคร

Development of a Web-based GIS Decision Support System

: Where to Shop in Bangkok

โดย

นนทนา เดชพลมาตย

การพฒนาระบบสนบสนนการตดสนใจแบบระบบสารสนเทศภมศาสตรบนเวบ

: สถานทซอสนคาในกรงเทพมหานคร

Development of a Web-based GIS Decision Support System

: Where to Shop in Bangkok

โดย

นนทนา เดชพลมาตย

รายงานนเปนสวนหนงของรายวชา 2205412 SENIOR PROJECT IN GEOGRAPHY ภาควชาภมศาสตร คณะอกษรศาสตร จฬาลงกรณมหาวทยาลย

ภาคเรยนท 2 ปการศกษา 2556

ก

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

ขอขอบพระคณ ผชวยศาสตราจารย ดร.พรรณ ชวนศรวฒน อาจารยทปรกษาโครงการ ผคอย

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

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

ใหค าแนะน าในการด าเนนโครงการ ตลอดจนค าสงสอนในบทเรยนตางๆซงขาพเจาไดส งสมมา สง

เหลานลวนมสวนในการพฒนาความคด ความร และทกษะความสามารถใหสามารถด าเนนโครงการ

ส าเรจลลวงไปไดดวยด

ขอขอบพระคณ เจาของขอมลตางๆทขาพเจาไดระบถงในบรรณานกรม ถงแมจะไมรจกกนแต

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

กลายเปนภาพทสมบรณไดในทสด

ขอขอบคณ เพอนๆทกคนของขาพเจา ทงเพอนสนท เพอนในภาควชาและนอกภาควชา รวมไป

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

ความทกขและยนดกบความสขของขาพเจาดวยความเขาใจ และเปนก าลงใจทดเสมอมา

ทายทสด ขอขอบพระคณครอบครวส าหรบก าลงใจและการสนบสนนในทกๆเรอง โดยเฉพาะแม

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

ทกๆวน และเปนผสรางพลงในการท างานของขาพเจาตลอดมา

ดวยความหวงลกๆทตองการท าใหแผนทเปนเรองใกลตวทกคน

...แมแตตอนทจะไปซเปอรมารเกต

นนทนา เดชพลมาตย

ข

ชอโครงการ การพฒนาระบบสนบสนนการตดสนใจแบบระบบสารสนเทศภมศาสตรบนเวบ

: สถานทซอสนคาในกรงเทพมหานคร

ผท าโครงการ นางสาวนนทนา เดชพลมาตย

อาจารยทปรกษา ผชวยศาสตราจารย ดร.พรรณ ชวนศรวฒน

ปการศกษา 2556

บทคดยอ

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

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

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

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

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

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

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

เลอกซอสนคา ณ ซเปอรมารเกตดวยตวเองเพราะสามารถมนใจในคณภาพของสนคาจากการไดจบตอง

สนคาจรงกอนซอและไดเปนเจาของสนคาทนทหลงการซอ

อยางไรกตาม ผศกษาสงเกตไดวาผบรโภคทเลอกซอสนคาทงแบบออนไลนและแบบดงเดมยง

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

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

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

พฒนาระบบสนบสนนการตดสนใจแบบระบบสารสนเทศภมศาสตรบนเวบ โดยมวตถประสงคเพอให

ระบบสามารถแสดงและเปรยบเทยบราคาสนคาของเทสโก โลตส, ทอปส, บกซ, แมกซแวล, ฟดแลนด,

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

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

ภาษา HTML, CSS, JavaScript และ jQuery โดยใช Bootstrap เปนโครงสรางในการพฒนาหนาตาของ

เวบไซต การพฒนาระบบจะแบงออกเปน 2 สวน คอ สวนของแผนทและสวนของรานคา ในสวนของ

แผนทนน ผศกษาตองเขยนโปรแกรมเพอเรยกใชคณสมบต Geolocation ของ HTML เวอรช นท 5 ใน

ค

การแสดงต าแหนงปจจบนของผใชงานลงบนแผนท Google Maps ทตองเขยนโปรแกรมเพอเรยกใช

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

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

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

ทสดไปจนถงไกลทสดเพอแสดงในรปแบบของ thumbnail บรเวณดานขางแผนท รวมทงเรยกใชฟงกช น

จดเสนทางของ Google Maps เพอท างานในสวนของการน าทางไปยงซเปอรมารเกตสาขาทผใช

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

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

และสสนตางๆใหมความสวยงามนาใชงาน

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

ผบรโภคในการเปรยบเทยบราคาสนคาทวางขายในซเปอรมารเกตรายตางๆไดอยางสะดวกสบายมาก

ขนโดยไมจ าเปนตองส ารวจราคาสนคาดวยตวเอง นอกจากนผใชยงสามารถเขาถงระบบแผนทแสดง

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

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

ตองการอนจะชวยอ านวยความสะดวกในการวางแผนเดนทางไปซอสนคา ณ สถานทจรงมากขน

ง

สารบญ

เรอง หนา

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

บทคดยอ ข

สารบญรปภาพ ฉ

สารบญตาราง ซ

บทท 1 บทน า

1.1 ทมาและความส าคญ 1

1.2 วตถประสงคของโครงงาน 2

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

1.4 สมมตฐาน 3

1.5 ขอบเขตของการวจยโครงงาน 3

1.6 แผนการด าเนนงาน 4

บทท 2 หลกการและทฤษฎทเกยวของ

2.1 ภาษาเอชทเอมแอล (HTML) 5

2.2 ภาษาซเอสเอส (CSS) 6

2.3 ภาษาจาวาสครปต (JavaScript) 7

2.4 ภาษาเจเควยร (jQuery) 7

2.5 บตสแตรป (Bootstrap) 8

2.6 คกก (Cookie) 9

2.7 Geolocation และ Google Maps API 9

บทท 3 ระเบยบวธการด าเนนโครงงาน

3.1 ศกษาความรเพมเตม 11

3.2 ส ารวจและเกบขอมล 11

3.2.1 ต าแหนงทต งของซเปอรมารเกตในกรงเทพมหานคร 11

3.2.2 ขอมลสนคา 12

จ

สารบญ (ตอ)

เรอง หนา

3.3 สรางฐานขอมลและออกแบบการท างานของระบบ 14

3.4 พฒนาเวบไซต 19

3.4.1 การพฒนาสวนของแผนท 19

3.4.2 การพฒนาสวนของรานคา 20

บทท 4 ผลการด าเนนงาน

4.1 หนาหลกของเวบไซต 22

4.2 สวนของรานคา 26

4.3 สวนของแผนท 33

บทท 5 ผลการด าเนนงานและขอเสนอแนะ

5.1 ผลการด าเนนงาน 39

5.2 ขอเสนอแนะ 40

บรรณานกรม 41

ฉ

สารบญรปภาพ

รปภาพ หนา

ภาพท 2-1 การคนหาขอมลพกดดวยการสงขอมล

ของผใชงานไปยง Location Information Server 10

ภาพท 3-1 แผนภาพแสดงการท างานในสวนของรานคา

เมอผใชเลอกรวมราคาสนคาในตะกรา 16

ภาพท 3-2 แผนภาพแสดงการท างานในสวนของแผนท 17

ภาพท 3-3 แผนภาพแสดงโครงสรางของเวบไซต (Site Map) 18

ภาพท 4-1 แสดงหนาหลกของเวบไซต 22

ภาพท 4-2 แสดงแถบเมนตางๆของเวบไซต 23

ภาพท 4-3 แสดง Banner บนหนาหลกของเวบไซต 24

ภาพท 4-4 แสดงสวนทแนะน าเวบไซตแกผใชงาน 25

ภาพท 4-5 แสดงสวนของรานคา 26

ภาพท 4-6 Banner แสดงประเภทของสนคา 5 หมวดหลกในสวนของรานคา 27

ภาพท 4-7 แสดงรายการสนคาพรอมราคาทวางขายในซเปอรมารเกตแตละราย 28

ภาพท 4-8 แสดงปมเพอใหผใชคลกเลอกซเปอรมารเกต

ในกรณทตองการรวมราคาสนคาในตะกรา 28

ภาพท 4-9 แสดง Message box เมอผใชคลกเลอกซเปอรมารเกต 28

ภาพท 4-10 แสดงตะกราสนคาหลงจากการเลอกซเปอรมารเกต

โดยผใชยงไมไดหยบสนคาใสตะกรา 29

ภาพท 4-11 แสดงตะกราสนคาหลงจากการเลอกซเปอรมารเกต

โดยผใชหยบสนคาใสตะกราแลว 29

ช

สารบญรปภาพ (ตอ)

รปภาพ หนา

ภาพท 4-12 แสดงหนาตะกราสนคา 30

ภาพท 4-13 แสดงสวนสอนวธการใชงานเวบไซต (ขนาดยอ) ในสวนรานคา 31

ภาพท 4-14 แสดงลงคเชอมโยงไปยงสวนของแผนท 32

ภาพท 4-15 แสดงสวนของแผนท 33

ภาพท 4-16 แสดง Banner ของแผนทซเปอรมารเกตรายตางๆ 34

ภาพท 4-17 แสดงสวนประกอบภายใน thumbnail 35

ภาพท 4-18 แสดงผลจากการคลกท thumbnail 35

ภาพท 4-19 แสดงการใชต าแหนงปจจบนในการจดเสนทาง (1) 36

ภาพท 4-20 แสดงการใชต าแหนงปจจบนในการจดเสนทาง (2) 37

ภาพท 4-21 แสดงการใชต าแหนงทผใชก าหนดเองในการจดเสนทาง (1) 37

ภาพท 4-22 แสดงการใชต าแหนงทผใชก าหนดเองในการจดเสนทาง (2) 38

ซ

สารบญตาราง

ตาราง หนา

ตารางท 1-1 ตารางแสดงแผนการด าเนนงาน 4

ตารางท 3-1 ตารางแสดงจ านวนสาขาของซเปอรมารเกต

ในกรงเทพมหานครทไดเกบขอมล 12

ตารางท 3-2 ตารางสรปจ านวนสนคาทไดเกบราคา 13

ตารางท 3-3 ตารางแสดงประเภทของขอมลทเกบภายในตาราง 14

ตารางท 3-4 ตารางแสดงชอของตารางตางๆภายในฐานขอมลเดยวกน 14

1

บทท 1

บทน า

1.1 ทมาและความส าคญ

พฤตกรรมของคนไทยในปจจบนมแนวโนมทจะสบคนขอมลจากอนเตอรเนตกอนน าไปใช

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

ความเจรญกาวหนาทางเทคโนโลยทผบรโภคสามารถเขาถงขอมลขาวสารบนโลกอนเตอรเนตไดมากขน

ทงจากคอมพวเตอรตงโตะ คอมพวเตอรพกพา สมารทโฟน หรออปกรณอนๆ จงเหนไดวามระบบ

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

ไดอยางสะดวกและรวดเรวทนใจ เชนเดยวกนกบผคาปลกรายใหญอยาง เทสโก โลตส , ทอปส หรอ บก

ซ ทตางมกลยทธทางการตลาดในการกระตนยอดขายโดยการเพมชองทางการคาออนไลนหรออ

คอมเมรซ (E-Commerce) ทงในรปแบบของเวบไซตและแอพพลเคชนบนสมารทโฟน โดยผบรโภค

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

รายการสงเสรมการขาย (Promotions) และต าแหนงทต งของสาขาตางๆโดยน าเสนอบน Google Maps

สวนฟดแลนด, แมกซแวล, กรเมต มารเกตและโฮมเฟรชมารทนนยงไมมระบบการสงซอสนคาออนไลน

ผานทางเวบไซตและแอพพลเคชนบนสมารทโฟน แตใหขอมลต าแหนงทต งสาขาตางๆไวอยางครบถวน

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

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

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

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

สนคาทนทโดยไมตองรอรบการจดสงทอาจเกดการขดของหรอกนเวลายาวนานกวาทคาดไว

อยางไรกตาม ผศกษาพบวาการเลอกซอสนคาจากซเปอรมารเกตทงแบบออนไลนและแบบดงเดม

นน ผบรโภคอาจตองซอสนคาชนดใดชนดหน งจากซเปอรมารเกตรายหน งในราคาทสงกวา

ซเปอรมารเกตอกราย (ทงแบบทรตวและไมรตว) หรอในกรณการซอแบบดงเดม ผบรโภคอาจตอง

เดนทางไปยงซเปอรมารเกตสาขาหนงเพอซอสนคาโดยไมทราบวามสาขาทวางขายสนคาชนดเดยวกน

แตอยในต าแหนงทใกลกวา จงน ามาซงคาใชจายทสงกวาเพราะตองใชเวลาและระยะทางในการเดนทาง

ทมากกวา ถงแมจะซอสนคาในราคาทรวมแลวเทากนกตาม จากตวอยางของสถานการณขางตนจะเหน

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

2

อยางชดเจนและเขาถงไดอยางสะดวก รวมไปถงขอมลแนะน าซเปอรมารเกตสาขาทเหมาะสมทสด

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

ราคาถกทสด ณ ต าแหนงทใกลทสด หรอเปนสาขาตามทผใชตองการ จงท าใหตองเสยคาใชจายในการ

ซอสนคาและการเดนทางทสงกวาโดยไมจ าเปน

ดวยเหตน ผศกษาจงเกดแนวคดในการพฒนาเวบไซตตนแบบเพอแสดงรายการสนคาตางๆของ

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

ผบรโภคสามารถเลอกสนคา รวมราคาสนคาทตองการซอทงหมดอยางคราวๆ เปรยบเทยบราคาระหวาง

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

ซเปอรมารเกตในสาขาทเหมาะสม ซงถอเปนโอกาสทผศกษาจะไดตอยอดความรดานเทคนคทาง

ภมศาสตรโดยน ามาใชในการพฒนาเวบไซตเพอชวยในการตดสนใจเลอกซอสนคาทสามารถประหยด

คาใชจายในชวตประจ าวนมากขนไดอยางเปนรปธรรม

1.2 วตถประสงคของโครงงาน

เพอพฒนาระบบสนบสนนการตดสนใจแบบระบบสารสนเทศภมศาสตรบนเวบเพอแสดงและ

เปรยบเทยบราคาสนคาของเทสโก โลตส, ทอปส, บกซ, แมกซแวล, ฟดแลนด, กรเมตมารเกตและโฮ

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

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

ประโยชนตอผศกษา/ผพฒนา (1) ไดฝกฝนทกษะการเขยนโปรแกรมโดยการน าความรดานเทคนคทางภมศาสตรมาตอ

ยอดในการพฒนาเวบไซต

(2) ไดศกษาเพมเตมเกยวกบเทคโนโลยและเครองมอทใชในการพฒนาระบบ

(3) ไดฝกการท างานทเปนระบบ ด าเนนงานใหเปนไปตามขนตอนทวางแผนไว

(4) ไดรจกสงเกตและเปรยบเทยบราคาสนคากอนตดสนใจซอมากขนในฐานะผบรโภค

3

ประโยชนตอผใชงาน (1) ไดรบความสะดวกสบายในการตดสนใจเลอกซอสนคามากขนเพราะไมตองเปรยบเทยบ

ราคาสนคาดวยตวเอง (2) สามารถใชประโยชนจากขอมลในเวบไซตเพอประกอบการตดสนใจเดนทางไปเลอกซอ

สนคาจากซเปอรมารเกตในสาขาทเหมาะสม

(3) มสวนชวยในการประหยดคาใชจายในการเดนทางและซอสนคามากขน

1.4 สมมตฐาน

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

การเขาถงซเปอรมารเกตผานระบบงานเดยวกนบนอนเตอรเนต

1.5 ขอบเขตของการวจยโครงงาน

การศกษาในครงนไดก าหนดพนทในการรวบรวมขอมลต าแหนงของรานซเปอรมารเกตสาขาตางๆ

ไวภายในพนทกรงเทพมหานคร โดยแบงเปนเทสโก โลตส 264 สาขา (โลตส ไฮเปอรมารเกต 21 สาขา,

โลตส คมคา 1 สาขา, ตลาด โลตส 7 สาขา และโลตส เอกซเพรส 235 สาขา), ทอปส 99 สาขา (เซ

นทรล ฟดฮอลล 2 สาขา, ทอปส มารเกต 28 สาขา, ทอปส ซเปอร 26 สาขา และทอปส เดล 43 สาขา),

บกซ 80 สาขา (บกซ 22 สาขา, บกซ เอกซตรา 7 สาขา, บกซ มารเกต 8 สาขา และมนบกซ 43 สาขา),

แมกซแวล 54 สาขา (แมกซแวล 15 สาขา และแมกซแวลทนใจ 39 สาขา), ฟดแลนด 10 สาขา, กรเมต

มารเกต 4 สาขา และโฮมเฟรชมารท 4 สาขา รวมเปนซเปอรมารเกตทงสน 515 แหง

เนองจากเวบไซตทพฒนาขนจะเปนเพยงเวบไซตตนแบบทตองอาศยการพฒนาตอไปเทานน

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

ซเปอรมารเกตลงบนฐานขอมลไดหมดทกประเภทและทกยหอ จงเลอกเกบขอมลของสนคาเพยง 5

ประเภทหลก ไดแก อาหารและเครองดม (ขนมขบเคยว), สนคาบรโภค (ขาว, เครองปรงอาหาร และ

บะหมกงส าเรจรป), ผลตภณฑในครวเรอน (กระดาษช าระ, น ายาลางจาน, ผงซกฟอก และน ายาปรบผา

นม), ผลตภณฑเพอสขภาพและความงาม (ผลตภณฑดแลชองปาก, ผลตภณฑดแลผว, ผลตภณฑดแล

เสนผม และสบ) และผลตภณฑส าหรบสตวเลยง (อาหารสนขและอาหารแมว)

4

1.6 แผนการด าเนนงาน

เรมตงแตวนท 8 พฤศจกายน 2556 ถงวนท 14 มนาคม 2557 รวมระยะเวลาทงสน 126 วน

แผนการด าเนนงานพ.ย. ธ.ค. ม.ค. ก.พ. ม.ค.

1. ศกษาความรเพมเตม2. ส ารวจและเกบขอมล - ต ำแหนงทต งซเปอรมำรเกต - ขอมลสนคำ3. ท าฐานขอมลและออกแบบระบบ4. พฒนาเวบไซต5. ทดสอบการใชงานและแกไขปรบปรง

เดอน

ตารางท 1-1 ตารางแสดงแผนการด าเนนงาน

5

บทท 2

หลกการและทฤษฎทเกยวของ

ในสวนนผศกษาจะกลาวถงหลกการและทฤษฎตางๆทเกยวของและเปนพนฐานความรทใชใน

การพฒนาระบบสารสนเทศภมศาสตรบนเวบ อนไดแก ภาษาเอชทเอมแอล (HTML), ภาษาซเอสเอส

(CSS), ภาษาจาวาสครปต (JavaScript), ภาษาเจเควยร (jQuery), บตสแตรป (Bootstrap), คกก

(Cookie), Geolocation และ Google Maps API

2.1 ภาษาเอชทเอมแอล (HTML)

HTML ยอมาจาก HyperText Markup Language เปนภาษาทใชส าหรบสรางเวบเพจ โดยเวบ

เพจทสรางขนจะถกแสดงผลผานเวบบราวเซอร เชน Internet Explorer, Google Chrome, Firefox,

Safari เปนตน ภาษา HTML นนเปนภาษาในลกษณะแทก (Tag) โดยแทกจะอยภายในเครองหมาย <

และเครองหมาย > โดยสามารถแบงแทกของ HTML ไดเปน 2 ประเภท คอ

(1) HTML ทประกอบดวยแทกเปด และแทกปด เชน <TABLE> </TABLE> เปนตน

(2) HTML ทประกอบดวยแทกเปดเพยงอยางเดยว เชน <BR>, <IMG> เปนตน

โครงสรางของภาษา HTML

<HTML>

<HEAD>

สวนหวของเอกสาร HTML

<TITLE> สวนหวเรองของเอกสาร HTML </TITLE>

</HEAD>

<BODY>

สวนเนอหาของเอกสาร HTML

</BODY>

</HTML>

ทงนภายในสวนเนอหาของเอกสาร HTML ผใชสามารถระบแทกการท างานตางๆของ HTML

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

วศน และอรพน ประวตบรสทธ, 2556)

6

2.2 ภาษาซเอสเอส (CSS)

CSS ยอมาจาก Cascading Style Sheets เปนภาษาทใชตกแตงรปแบบการแสดงผลของเวบเพจใหสวยงามดวยการก าหนดสไตลการตกแตงแลวน าไปใชงานกบเวบเพจทกหนาทเขยนขนดวยภาษา HTML ท าใหสามารถก าหนดรปแบบการตกแตงเวบเพจทงหมดใหแสดงผลออกมาในรปแบบเดยวกนไดตามทตองการ โดยรปแบบการก าหนดสไตลของ CSS เปนดงตอไปน

<STYLE> Selector { Attribute1:Value1; [Attribute2:Value2; …] } </STYLE> ทงนสามารถน าสไตลทก าหนดดวย CSS ไปเรยกใชในหนาเวบเพจทเขยนขนดวยภาษา HTML

ได 3 วธดงน (1) External Style Sheet

เปนการก าหนดสไตลของ CSS ลงในไฟลทมนามสกล .css ซงภายในไฟลจะประกอบดวยสวนของ CSS เทานน ไมมการเขยนแทก HTML ใดๆไวภายในไฟล วธดงกลาวท าใหงายตอการปรบเปลยนสไตลของเวบเพจในภายหลงเพราะสามารถแกไขทไฟล .css เพยงไฟลเดยว ไมตองแกไขไฟล HTML ทกไฟลทมการก าหนดสไตลของ CSS ไวภายในไฟล โดยการเรยกใชเปนดงน

<HEAD> <LINK REL = “stylesheet” TYPE = “text/css” HREF = “ชอไฟล.css”> </HEAD>

(2) Internal Style Sheet

เปนการก าหนดสไตลของ CSS ไวภายในไฟล HTML ดวย Internal Style Sheet เพอก าหนดสไตลเพมเตมใหกบหนาเวบเพจหนงๆ นอกเหนอจากทก าหนดไวใน External Style Sheet ซงประโยชนคอชวยใหการปรบเปลยนสไตลการแสดงผลของ Selector บางตวในหนาเวบเพจนนใหอยในรปแบบเฉพาะทตองการได ซงการเรยกใชมรปแบบดงตอไปน

<HEAD>

<LINK REL = “stylesheet” TYPE = “text/css” HREF = “ชอไฟล.css”> <STYLE>

/* ก าหนดสไตลเพมเตมดวย Internal Style Sheet ลงในสวนน */ </STYLE>

</HEAD>

7

(3) Inline Style Sheet เปนการก าหนดสไตลของ CSS แบบเฉพาะเจาะจงไปทแทก HTML ตวใดตวหนง โดย

มรปแบบดงน

<แทกของ HTML STYLE = “ก าหนดสไตลของ CSS”> ขอความ </แทกของ HTML>

2.3 ภาษาจาวาสครปต (JavaScript)

JavaScript เปนภาษาทใชส าหรบจดการพฤตกรรมตางๆของเวบเพจ โดยเปนสวนส าคญทชวย

ใหเวบเพจสามารถสอสารและโตตอบกบผใชงานได ค าส งของ JavaScript จะถกประมวลผลบนเวบ

บราวเซอรของผใชงานจงสามารถท างานไดอยางรวดเรวเพราะไมตองตดตอไปยงเวบเซรฟเวอรเพอ

ประมวลผลค าส ง (กงวาน อศวไชยวศน และอรพน ประวตบรสทธ, 2556)

ต าแหนงของการก าหนดโปรแกรมภาษา JavaScript ไวในเวบเพจรวมกบภาษา HTML ม

ดงตอไปน

(1) ก าหนด JavaScript ไวภายใตแทก <SCRIPT TYPE = “text/javascript”> </SCRIPT> ซง

ระบอยในสวน <HEAD> </HEAD> ของโปรแกรมภาษา HTML

(2) ก าหนด JavaScript ไวในไฟล .js จากนนอางองไฟล .js ในไฟล .html ภายใตสวนของ

<HEAD> </HEAD> ดวยค าส ง <SCRIPT SRC = “ชอไฟลโปรแกรมจาวาสครปต.js”>

</SCRIPT>

(3) ก าหนด JavaScript ไวภายใตแทก <SCRIPT TYPE = “text/javascript”> </SCRIPT> ซง

ระบอยในสวน <BODY> </BODY> ของโปรแกรมภาษา HTML

2.4 ภาษาเจเควยร (jQuery)

jQuery คอ ไลบรารของโคดจาวาสครปต (JavaScript Library) ซงเปนสวนหนงของการสราง

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

ตองเสยเวลาในการพฒนาโคดโปรแกรมใหยงยากซบซอนและยงชวยในการเขยนและเรยกใชงาน

JavaScript และ AJAX1 ไดงายขน (ส านกเทคโนโลยสารสนเทศ, 2553)

1 AJAX (Asynchronous JavaScript and XML) หมายถง การตดตอกนแบบ Asynchronous (ท างานไดโดยไมตองรอผลลพธ)

ของ JavaScript และ XML ซงเปนการรบ-สงขอมลระหวาง browser จาก front-end ดวย JavaScript กบ back-end ท server ในรปแบบ XML และสามารถรบ-สงขอมลในรปแบบ text, html และ JSON ไดดวยเชนกน ผศกษาขอไมกลาวถงรายละเอยดการท างานของ AJAX ในรายงานฉบบน เนองจากไมเกยวของกบโครงงาน

8

สามารถสรปความสามารถของ jQuery ไดดงตอไปน

(1) เขาถงอลเมนตในเอกสาร สามารถเขยนโคดเพอคนหาขอมลทตองการจากเอกสาร HTML มาท าการตรวจสอบ

หรอจดการตอไปไดอยางรวดเรวและงายดายมากขน

(2) แกไขการแสดงผลของเวบเพจ CSS เปนวธทมประสทธภาพในการน าเอกสารมาแสดงผลบนหนาจอ แตเนองจากเวบ

บราวเซอรแตละรนไมไดสนบสนนใหเปนมาตรฐานเดยวกนทงหมด ทงนการใช jQuery จะ

ท าใหการก าหนดสไตลดวยไลบรารนเปนมาตรฐานเดยวกนในบราวเซอรทกรน นอกจากน

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

จะแสดงผลบนหนาจอไปแลวกตาม

(3) แกไขคอนเทนตของเอกสาร

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

สามารถเขยนโครงสรางของ HTML ขนมาใหมทงหมด หรอตอเตมจากโครงสรางเดม

(4) โตตอบกบการท างานของผใช สามารถดกจบอเวนต (Event) ทมอยหลากหลาย เชน เมอผใชคลกทลงก เปนตน เพอ

ก าหนดการท างานโตตอบกบผใชไดตามทตองการ

(5) แสดงภาพเคลอนไหวในเอกสาร เชน สามารถท าใหอลเมนตแสดงเปนภาพจางๆ และคอยๆปรากฏขนมาบนหนาจอ

รวมถงการทนกพฒนาสามารถใชเครองมอในการสรางเอฟเฟกตใหมๆขนเองไดอกดวย

(6) ดงขอมลจากเซรฟเวอรโดยไมตองรเฟรชเพจ รปแบบการเขยนโคดดงกลาวเปนทรจกกนในชอทเรยกวา AJAX (Asynchronous

JavaScript And XML) ซงชวยใหนกพฒนาเวบสามารถสรางเวบไซตทสามารถโตตอบกบ

ผใชไดอยางรวดเรว

(7) ท าใหงานทวไปของจาวาสครปตงายขน นอกจากคณสมบตเฉพาะของ jQuery แลว ไลบรารยงไดปรบปรงงานพนฐานของจาวา

สครปต เชน ค าส งในการท างานแบบวนซ าและการจดการกบอารเรย เปนตน

2.5 บตสแตรป (Bootstrap)

Bootstrap เปน Front-End Framework ชนดหนงทถกพฒนาขนโดยบรษท Twitter ท าหนาทเปนชดโคดทชวยใหผพฒนาสวนดานหนาของเวบไซตหรอ Front-End (คอสวนทผใชเวบไซตมองเหน ซงถกเขยนขนดวย HTML, CSS และ JavaScript) สามารถท างานไดอยางสะดวกมากขน เพราะมการ

9

รวบรวมชดค าส งภาษา HTML และ CSS แบบส าเรจรปทใชในการจดวาง Layout เวบเพจ, ตวอกษร, ปม, แถบเมน และอนๆ เตรยมไว ใหผพฒนาเวบไซตโดยใช Bootstrap สามารถคดลอกชดค าส งสวนทตองการไปปรบแตงเวบเพจเพมเตมไดอยางอสระ รวดเรว และเปนระบบมากขน โดยไมจ าเปนตองเรมตนเขยนชดค าส งตางๆใหมทงหมดตงแตแรก

ในการเรมตนใชงานนน สามารถเขาไปดาวนโหลดไดทเวบไซต http://getbootstrap.com/ และท าการแตกไฟลออกมา ซงจะพบ 3 โฟลเดอรดวยกน คอ css (เกบ style sheets ของ Bootstrap), img (เกบ sprite images ของ icon ตางๆ) และ js (เกบ jQuery plugins ตางๆ) โดยนกพฒนาสามารถน าไฟลในโฟลเดอรดงกลาวไปไวในโฟลเดอรเดยวกบทเกบขอมลเวบไซตทพฒนาขน และเรยกใชโดยอางองไฟลนนๆภายในโคดของหนาเวบทตองการใช Bootstrap ได

2.6 คกก (Cookie)

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

เครองของผใชงาน ทงนสามารถเรยกใชงานคกกไดผานทางโปรโตคอล HTTP

เวบบราวเซอรจะท าหนาทรบสงคาคกกระหวางเครองของผใชงานกบเซรฟเวอร โดยเมอคกกถก

สรางจากเซรฟเวอร เวบบราวเซอรจะรบคกกมาเกบไวยงเครองของผใชงาน และเมอผใชงานกลบมา

ท างานทเวบไซตอกครงผานทางเวบบราวเซอรเดม ตวเวบบราวเซอรจะท าการอานขอมลของคกกสงไป

ยงเซรฟเวอร ท าใหเซรฟเวอรรรายละเอยดขอมลของผใชงานและน าขอมลนนมาแสดงผลได คกกจง

เปรยบเสมอนหนวยความจ าขนาดเลกส าหรบเวบไซต (กงวาน อศวไชยวศน และอรพน ประวตบรสทธ,

2556)

2.7 Geolocation และ Google Maps API

Geolocation มาจากค าวา Geographic รวมกบ Location หมายถง ต าแหนงทางภมศาสตรบน

โลกทระบถงต าแหนงพกดทอยปจจบนของสถานทตางๆ ทงน Geolocation เปนคณสมบตหนงใน

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

น าคาพกดนไปใชประโยชนอนๆได เชน การทเวบไซต Foursquare น าหลกการของ Geolocation มาใช

งานรวมกบ Google Maps API ในการแสดงแผนทเมอผใชเลอก check-in สถานท โดยจะวาดแผนทใน

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

มหลกการคนหาพกดทแตกตางไปจากอปกรณ GPS ทรบสญญาณจากดาวเทยมเปนขอมลพกดมา

แสดงผลบนแผนทของตวอปกรณ แตจะมหลกการดงน

(1) โทรศพทมอถอจะใชต าแหนง Cell Site ของเครอขายโทรศพทมอถอในการคนหาพกด

(2) คอมพวเตอรในเครอขายอนเตอรเนตทวไปจะใช IP Address เปนขอมลในการคนหาพกด

10

(3) คอมพวเตอรในเครออนเตอรเนตไรสาย (Wireless LAN หรอ Wi-Fi) จะใชต าแหนงของ

Access Point ในการคนหาพกด

ทงนการคนหาขอมลพกดจะท าไดแมนย าเพยงใดกขนอยกบขอมลของผใชงานท Geolocation

API สงไปยงเซรฟเวอรวาประกอบดวยอะไรบาง เชน หากผใชงานเรยกใช Geolocation API ผานทาง

เวบบราวเซอรของเครองคอมพวเตอรบนเครอขายอนเตอรเนตทวไป ขอมลทจะถกสงไปยงเซรฟเวอร

นนจะเปน IP Address ซงเซรฟเวอรจะน าคานไปตรวจสอบกบฐานขอมลทเกบขอมลพกดต าแหนง

ตางๆบนโลก เพอใหไดคาพกดออกมา

ส าหรบบางสถานทนน Location Information Server อาจเกบขอมลพกดลงในฐานขอมลแบบไม

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

กลาวคอ พกดทแสดงออกมาอาจเปนคาพกดของบรเวณใกลเคยงกบต าแหนงปจจบนทผใชงานอยก

เปนได (กงวาน อศวไชยวศน และอรพน ประวตบรสทธ, 2556)

ภาพท 2-1 การคนหาขอมลพกดดวยการสงขอมลของผใชงานไปยง Location Information Server

(กงวาน อศวไชยวศน และอรพน ประวตบรสทธ, 2556)

สวน Google Maps นนเปน API ส าหรบการแสดงผลแผนทโดยอางองขอมลจากภาพถาย

ดาวเทยมเปนหลก โดยปจจบนมการพฒนาถงเวอรช นท 3 ซงแผนทของ Google Maps นนจะแสดง

รายละเอยดของถนน ตรอกหรอซอย คลองหรอแมน า แสดงเสนทางทเปนทางเดนเทา รถยนต หรอรถ

ขนสงสาธารณะ และแสดงประเทศทส าคญในโลก รวมถงประเทศไทย ซงผใชงานสามารถดแผนทใน

ต าแหนงทคนหา รวมถงคลกเมาสเลอนดแผนทในบรเวณทใกลเคยงได

11

บทท 3

ระเบยบวธการด าเนนโครงงาน

หลงจากการทบทวนหลกการและทฤษฎทเกยวของกบโครงงานแลว ในบทนจะกลาวถงระเบยบ

วธการด าเนนโครงงานตงแตการศกษาความรเพมเตมจากหนงสอและบทความในอนเตอรเนตเพอสราง

ความเขาใจและเปนพนฐานความรในการพฒนาระบบ รวมไปถงข นตอนของการส ารวจและเกบขอมล

ต าแหนงทตงซเปอรมารเกตและขอมลสนคา, การน าขอมลทไดมาสรางฐานขอมลและออกแบบการ

ท างานของระบบ และขนตอนการพฒนาเวบไซต

3.1 ศกษาความรเพมเตม

ในขนตอนแรกนถอเปนขนทตองใชเวลาพอสมควร เนองจากการพฒนาระบบจ าเปนตองใช

ความรดานการเขยนโปรแกรมคอมพวเตอรดวยภาษาทผศกษาไมคนเคยมากอน จงไดก าหนดชวงเวลา

ในการด าเนนงานในขนตอนนไวประมาณ 3 เดอน คอ ตงแตเดอนพฤศจกายน 2556 - กมภาพนธ 2557

เพอศกษาการท างานและสรางความคนเคยกบการเขยนโปรแกรมดวยภาษาเอชทเอมแอล (HTML),

ภาษาซเอสเอส (CSS), ภาษาจาวาสครปต (JavaScript), ภาษาเจเควยร (jQuery), ศกษาวธการใช

งานบตสแตรป (Bootstrap), ศกษาหลกการท างานคกก (Cookie) เพอใชในการเกบขอมลซเปอรมารเกต

และสนคาทผใชเลอกใสตะกราเพอรวมราคา, การใชงาน Geolocation และ Google Maps API

ทงนผศกษาไดศกษาความรเพมเตมจากหนงสอและอนเตอรเนตเปนหลก ซงแหลงขอมลตางๆ

จะระบไวทบรรณานกรมทายรายงานฉบบนเพอเปนประโยชนแกผท ตองการคนควาตอไป

3.2 ส ารวจและเกบขอมล

โครงงานชนนตองอาศยขอมล 2 สวนดวยกน คอ ขอมลต าแหนงทตงของซเปอรมารเกตใน

กรงเทพมหานครและขอมลของสนคาทจะน ามาแสดงบนเวบไซตทพฒนาขน

3.2.1 ต าแหนงทต งของซเปอรมารเกตในกรงเทพมหานคร

ผศกษาไดท าการรวบรวมขอมลต าแหนงทตง (คาพกดละตจดและลองจจด) และทอยของ

ซเปอรมารเกตทง 7 รายในพนทกรงเทพมหานคร รวม 515 จด และจดเกบไวในไฟล Microsoft Excel

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

การ Search หาคาพกดใน Google Maps ซงมรายละเอยดจ านวนสาขาดงตอไปน

12

ซเปอรมารเกต จ านวนสาขา

เทสโก โลตส (264 สาขา)

โลตส ไฮเปอรมารเกต 21 โลตส คมคา 1 ตลาด โลตส 7

โลตส เอกซเพรส 235

ทอปส (99 สาขา)

เซนทรล ฟดฮอลล 2 ทอปส มารเกต 28 ทอปส ซเปอร 26 ทอปส เดล 43

บกซ (80 สาขา)

บกซ 22 บกซ เอกซตรา 7 บกซ มารเกต 8 มนบกซ 43

แมกซแวล (54 สาขา)

แมกซแวล 15 แมกซแวลทนใจ 39

ฟดแลนด (10 สาขา)

10

กรเมต มารเกต (4 สาขา)

4

โฮมเฟรชมารท (4 สาขา)

4

รวม 515 ตารางท 3-1 ตารางแสดงจ านวนสาขาของซเปอรมารเกตในกรงเทพมหานครทไดเกบขอมล

3.2.2 ขอมลสนคา

ในสวนนผศกษาไดจดหมวดหมของสนคาทจะแสดงบนเวบไซตออกเปน 5 ประเภท

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

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

เทานน ทงนขอมลของสนคาแตละชนจะมองคประกอบดงตอไปน

(1) รปภาพสนคา: สบคนจากเวบไซตรานคาออนไลนของซเปอรมารเกต ไดแก เทสโก

โลตส, ทอปส และบกซ

13

(2) ราคาสนคา: เกบขอมลจากการลงพนทส ารวจราคาสนคาทวางขายในเทสโก โลตส

สาขาออนนช, ทอปส สาขาแฟชน ไอสแลนด, บกซ สาขาแฟชนไอสแลนด, แมกซ

แวล สาขาถนนนวมนทร, ฟดแลนด สาขารามอนทรา, กรเมต มารเกต สาขาเดอะ

พรอเมอนาด และโฮมเฟรชมารท สาขาเดอะมอลล บางกะป นอกจากนยงส ารวจ

ราคาจากเวบไซตรานคาออนไลนของซเปอรมารเกต ไดแก เทสโก โลตส, ทอปส

และบกซ ซงราคาทใชแสดงบนเวบไซตนนจะเปนราคา ณ วนท 28 พฤศจกายน

25562

(3) รายละเอยดของสนคา: ไดแก ชอสนคา, ตราสนคา, ขนาดหรอปรมาณหรอน าหนก

ของสนคา

ประเภทหลก ประเภทยอย จ านวนสนคา (ชน) อาหารและเครองดม

(รวม 5 ชน) ขนมขบเคยว 5

สนคาบรโภค (รวม 16 ชน)

ขาว 6 เครองปรงอาหาร 8 บะหมกงส าเรจรป 2

ผลตภณฑในครวเรอน (รวม 18 ชน)

กระดาษช าระ 8 น ายาลางจาน 2 ผงซกฟอก 4

น ายาปรบผานม 4

ผลตภณฑเพอสขภาพและความงาม (รวม 14 ชน)

ผลตภณฑดแลชองปาก 4 ผลตภณฑดแลผว 3

ผลตภณฑดแลเสนผม 4 สบ 3

ผลตภณฑส าหรบสตวเลยง (รวม 4 ชน)

อาหารสนข 2 อาหารแมว 2

รวม 57 ตารางท 3-2 ตารางสรปจ านวนสนคาทไดเกบราคา

2 ผศกษาทราบดวาราคาของสนคาสามารถเปลยนแปลงไดเสมอตามกลยทธการตลาดของซเปอรมารเกตรายตางๆ เวบไซตท

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

14

3.3 สรางฐานขอมลและออกแบบการท างานของระบบ

1. ตดตงโปรแกรม XAMPP3 เพอจ าลองใหคอมพวเตอรของผศกษาเปน Web Server

2. ภายใตระบบการจดการฐานขอมล MySQL4 สรางฐานขอมลชอ “SeniorProj_db” และเพม

ตารางขอมลต าแหนงทต งของซเปอรมารเกต โดยแตละตารางจะประกอบดวย field ดงตอไปน

ชอ field ขอมล id เลขประจ าซเปอรมารเกต

name ชอและสาขาซเปอรมารเกต address ทอย

lat ละตจด lng ลองจจด type ประเภทรานคา

ตารางท 3-3 ตารางแสดงประเภทของขอมลทเกบภายในตาราง

ชอฐานขอมล ชอตาราง

SeniorProj_db

Lotus Tops BigC

Maxvalu Foodland

GourmetMarket HomeFreshMart

ตารางท 3-4 ตารางแสดงชอของตารางตางๆภายในฐานขอมลเดยวกน

3 XAMPP เปนโปรแกรม Web Server Utility ทไดรวบรวมโปรแกรม Opensoftware ตางๆเขาดวยกน เชน Web Server, PHP

Interpreter, Database เพอความสะดวกในการตดตง โดยไมตองตดตงทละโปรแกรม อนเปนการลดความซบซอนและท าใหใชงานไดงายยงขน เมอตดตงแลวจะสามารถจ าลองเครองตวเองใหเปน Web Server เพอใชทดสอบสครปตหรอเวบไซตไดโดยไมตองเชอมตอ Internet

4 MySQL คอ ระบบการจดการฐานขอมล หรอ DBMS (Database Management System) ซงเปนซอฟตแวรทดแลจดการ

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

15

3. ออกแบบการท างานของระบบ

ในสวนนผศกษาไดออกแบบการท างานของระบบโดยแบงเปน 2 สวนหลก คอ

(1) สวนของรานคา

ท าหนาทเสมอนเวบไซตรานคา E-Commerce ทวไป โดยผใชสามารถ

เรยกดสนคาตางๆไดตามประเภทหลก 5 ประเภท หรอตามประเภทยอยได

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

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

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

เปรยบเทยบราคาสนคามากกวา 1 ชนได

สรางการเชอมโยงไปยงสวนของแผนทและการน าทางไปยงซเปอรมารเกต

ทวางขายสนคาในราคาทเหมาะสมทสด ณ สาขาทมต าแหนงใกลทสด

(2) สวนของแผนทและการน าทาง

เรยกใชแผนทของ Google Maps (Google Maps API) พรอมหมดแสดง

ต าแหนงทต งของซเปอรมารเกตแตละสาขาภายในพนทกรงเทพมหานคร

โดยดงพกดมาจากฐานขอมลทสรางไว

สามารถปกหมดแสดงต าแหนงปจจบนของผใชงานเวบไซตได

สามารถแนะน าซเปอรมารเกตสาขาทอยใกลต าแหนงปจจบนของผใชมาก

ทสด โดยเรยงล าดบสาขาทอยใกลมากสดจนถงไกลทสดได

สามารถจดเสนทางไปยงรานคาทผใชตองการได ทงจากต าแหนงปจจบน

ไปยงรานคา หรอจากต าแหนงทผใชก าหนดเองไปยงรานคาได

16

ใช ไม

ไม ใช

update

ภาพท 3-1 แผนภาพแสดงการท างานในสวนของรานคาเมอผใชเลอกรวมราคาสนคาในตะกรา

เรมตน

ตรวจสอบ cookie วาผใช

เคยเลอก supermarket ท

ตองการรวมราคาไวหรอไม

แสดงชอ supermarket ในสวนบนของตะกราสนคา

ใหผใชเลอก supermarket ทตองการรวมราคาสนคาในตะกรา

ตรวจสอบ cookie วา

ตะกราสนคาวางหรอไม

แสดงขอความในสวนตะกราสนคาวา “ตะกรายงวาง: คณยงไมไดเลอกสนคานะคะ ”

แสดงรายการสนคาในตะกรา จากการเลอกของผใช พรอมรวมราคา

ผใชกดปม “หยบใสตะกรา”

Alert “ คณเลอกรวมราคาสนคาของ (ชอ supermarket) ”

เกบชดขอมลราคาสนคาทกชนบนเพจของ supermarket ทผใชเลอกไวใน array “selected_price”

สราง cookie (ชดราคาสนคา) เกบไวใน memory

สราง cookie (ชอ supermarket) เกบไวใน memory

สนสด

17

เรมตน

ตรวจสอบวาบราวเซอรของ

ผใชรองรบการท างานของ

Geolocation API หรอไม

ผใชอนญาตใหบราวเซอร

ใชต าแหนงปจจบนหรอไม

สรางหมดแสดงต าแหนงปจจบนและลงคแสดงทอยปจจบนของผใช

แสดงแผนท Google Maps และแสดงสวนของ panel ดานขาง

โหลดต าแหนงของ supermarket จากฐานขอมลมาสรางหมดแสดงบนแผนท

ค านวณระยะทางจากต าแหนงปจจบนของผใชไปยง supermarket แตละแหง

เกบไวในตวแปรหนง

สราง infowindow เพอแสดงขอมลของ supermarket เมอผใชคลกทหมดสาขา

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

Alert “ เวบบราวเซอรของคณไมรองรบการท างานของ Geolocation API ”

Alert “ Geocoder failed due to: ” +status ใช

ใช ไม

ภาพท 3-2 แผนภาพแสดงการท างานในสวนของแผนท

เมอผใชกดทลงคทอยปจจบน ระบบจะสงคาพกดเกบไวใชในการค านวณเสนทางตอไปในฐานะจดเรมตน

ดงขอมลชอ, สาขา, ทอยของ supermarket รวมถงระยะทางทระบบไดค านวณไวและ sort distance จากใกลทสดไปถงไกลทสด มาแสดง

บน thumbnail ใน panel ดานขาง

ผใชกดปม “น าทาง”

ระบบท าการค านวณและจดเสนทางทเหมาะสมใหกบผใช โดยแสดงเสนทางใน panel ดานขางแผนท

สนสด

ไม

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

18

หนาหลก

Tesco Lotus

Tops

BigC

Foodland

Maxvalu

Home Fresh Mart

Gourmet Market

อาหารและเครองดม

ขนมขบเคยว

สนคาบรโภค

ขาว

เครองปรงอาหาร

บะหมกงส าเรจรป

ผลตภณฑในครวเรอน

กระดาษช าระ

น ายาลางจาน

ผงซกฟอก

น ายาปรบผานม

ผลตภณฑ เพอสขภาพและความงาม

ผลตภณฑดแลชองปาก

ผลตภณฑดแลผว

ผลตภณฑดแลเสนผม

สบ

ผลตภณฑส าหรบสตวเลยง

อาหารสนข

อาหารแมว

ตะกราสนคา

Home Fresh Mart & Gourmet Market

Tesco Lotus

Tops

BigC

Foodland

Maxvalu

ลงคเวบไซตหลก ของซเปอรมารเกต

ภาพท 3-3 แผนภาพแสดงโครงสรางของเวบไซต (Site Map)

คนหา SUPERMARKET สาขาทใกลคณ

19

ในการออกแบบโลโกเวบไซต, หมดรานคา และ Banner ตางๆภายในเวบไซตนน ผ

ศกษาไดใชโปรแกรมตกแตงภาพ Photoshop ในการออกแบบเปนหลก

3.4 พฒนาเวบไซต

ผศกษาไดแบงข นตอนการพฒนาเวบไซตออกเปน 2 สวน คอ การพฒนาสวนของแผนท และ

การพฒนาสวนของรานคา โดยมรายละเอยดดงตอไปน

3.4.1 การพฒนาสวนของแผนท

(1) ตดตงโปรแกรมทใชในการเขยนโคด ในทนผศกษาใชโปรแกรม Sublime Text 2

(2) ดาวนโหลดและตดตง Bootstrap, JavaScript, CSS ทจ าเปนในการท างานไวใน

คอมพวเตอร โดยใหไฟลเหลานอยภายในโฟลเดอร htdocs (เปนโฟลเดอรภายในเซรฟเวอร

จ าลองของเครองคอมพวเตอรผศกษา)

(3) เขยนโคดเพอเรยกใช Geolocation และ Google Maps API เพอแสดงแผนทและ

ปกหมดแสดงต าแหนงปจจบนของผใช

(4) เขยนโคดเชอมตอกบฐานขอมล MySQL เพอน าเขาต าแหนงของซเปอรมารเกต

และปกหมดแสดงต าแหนงสาขาตางๆลงบนแผนท พรอมกบสราง infowindow เพอแสดงขอมล

ชอซเปอรมารเกต, สาขา และทอย เมอผใชคลกทหมดสาขาใดๆ

(5) เขยนโคดเพอใส input box 2 แหงไวดานบนสวนของแผนทเพอใหผใชกรอก

ต าแหนงเรมตน และสาขาเปาหมาย พรอมทงใส button เพอเปนปม “น าทาง” โดยชองทผใช

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

ต าแหนงเรมตนไดเชนกน

(6) เขยนโคดเพอสรางลงคขอความแสดงทอยปจจบนของผใชไวใต input box (ไมใช

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

เปนคาพกดเกบไวใชในการค านวณเสนทางตอไปในฐานะจดเรมตน

(7) เรยกใชฟงกช น route เสนทาง (directionsService.route) ของ Google Maps เพอ

จดเสนทางทเหมาะสม โดยก าหนดให travel mode เปนการขบรถยนต (driving) และสามารถ

เสนอเสนทางทใชทางดวนได ทงนจะใชขอมลต าแหนงเรมตนและเปาหมายจาก input box ใน

ขอ 5

20

(8) สราง panel ไวดานขางแผนทเพอเปนพนทในการวาง thumbnail แสดงขอมลชอ

ซเปอรมารเกต, สาขา, ทอย และระยะทางจากต าแหนงปจจบนของผใช โดย thumbnail ทแสดง

นจะมการเรยงล าดบตามระยะทางใกลทสดไปจนถงไกลทสดจากต าแหนงปจจบน

(9) เขยนโคดเพอสรางฟงกช นจดล าดบของ thumbnail ตามระยะทาง (sort by

distance)

(10) เขยนโคดเพอสรางความเชอมโยงกบหมดสาขา เมอมการคลกท thumbnail

ซเปอรมารเกตสาขาใด หนาจอแผนทจะ zoom ไปยงหมดสาขานน พรอมทงแสดง infowindow

ขนในเวลาเดยวกน

3.4.2 การพฒนาสวนของรานคา

(1) ดาวนโหลดเทมเพลตรานคาทแจกฟรจากเวบไซต www.bootstrappage.com เพอ

ความสะดวกในการพฒนาระบบรานคามากขนในชวงเวลาทจ ากด

(2) ดาวนโหลด jQuery Plug-in: Shopping Cart จากเวบไซต http://codecanyon.net

เพออ านวยความสะดวกในการพฒนาระบบรานคา โดยมคณสมบตทผใชงานสามารถเลอก

สนคา, ใชงานระบบตะกรา และระบบรวมราคาสนคา

(3) น าโคดทไดจากขอ 1 และ 2 มาใชรวมกน พรอมทงปรบแกโคดใหเหมาะสมกบการ

ท างานตามทไดออกแบบระบบไว โดยมการปรบแกดงตอไปน

ปรบแตงหนาตาของเวบไซต ใชโลโก, banner, ขอความ, รปภาพสนคา, สราง

ลงคตางๆ ใหเปนไปตามทไดออกแบบไว

เพมรายการสนคาทไดเกบขอมลไวลงในระบบรานคา

ปรบแกสกลเงน, ภาษาทใชในระบบตะกราสนคา

เพมคกก (Cookie) เพอใหระบบจดจ าชอของซเปอรมารเกตทผใชเลอก ซงจะ

ระบไวดานบนของตะกราสนคาเสมอ รวมไปถงการสรางคกกเพอใหระบบจดจ า

ชดราคาสนคาของซเปอรมารเกตรายทผใชเลอกไว อนเปนประโยชนในการ

แสดงขอมลตอผใชเมอมการ refresh หนา หรอการเขาไปสวนอนๆของเวบไซต

โดยขอมลจะยงคงอย

21

เพมคณสมบตในการแสดงราคาสนคาของซเปอรมารเกตทง 7 แหง และเขยน

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

สนคามากกวา 1 ชนขนไปได โดยจะดงขอมลจากชดราคาของซเปอรมารเกตท

ผใชเลอกและถกเกบไวในคกก

เพมระบบการสงพมพรายการสนคาในตะกราทผใชเลอก

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

ท างานสอดคลองกนตามเปาหมาย

22

บทท 4

ผลการด าเนนงาน

4.1 หนาหลกของเวบไซต

ภาพท 4-1 แสดงหนาหลกของเวบไซต

ส าหรบสวนหนาหลกของเวบไซตจะประกอบไปดวยโลโก/ชอของเวบไซตคอ “SHOP-PIN”

(ออกเสยงเหมอน “ชอป-ปง”) โดยน าค าวา SHOP ทหมายถงการซอสนคา รวมกบค าวา PIN ทแปลวา

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

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

โลโก

Banner เคลอนไหว

แถบเมน

ตะกราสนคา

แนะน า เวบไซต

ลงคเวบไซต หลกของ

ซเปอรมารเกต

23

ภาพท 4-2 แสดงแถบเมนตางๆของเวบไซต

สวนตอมาคอแถบเมนดานบนทผใชสามารถเลอกดแผนทใน “คนหา SUPERMARKET สาขาท

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

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

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

เหนอแถบเมนสนคา 5 ประเภทหลกดงภาพ โดยระบบจะแสดงประเภทสนคายอยเพอใหงายตอการ

คนหาสนคาในระบบมากขน

นอกจากนในบรเวณดานบนขวาสดของเวบไซตจะมลงค “ตะกราสนคา” เพอน าผใชไปยงตะกรา

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

24

ภาพท 4-3 แสดง Banner บนหนาหลกของเวบไซต

อาจสงเกตไดวาบรเวณกลางหนาหลกของเวบไซตจะปรากฏ Banner ขนาดใหญทมการ

เคลอนไหวเปลยนแปลงรปภาพอยเสมอ สวนนจะท าหนาทแนะน าวธการใชงานเวบไซตอยางคราวๆ

ใหแกผใช ซงแบงเปน 5 ข นตอน คอ (1) เลอกสนคา (2) เทยบราคา (3) หยบใสตะกรา (4) รวมราคา

สนคาทงหมดและเลอกซเปอรมารเกตทตองการ (5) กางแผนท ทงนผศกษาไดท าให Banner เหลานม

สสนทสดใสและตวอกษรขนาดใหญเพอเปนจดเดนของหนาหลกและใชภาษาทเปนกนเองเพอสราง

ภาพลกษณของเวบไซตทเปนมตร รวมถงมข นตอนการใชงานทงายดาย

25

ภาพท 4-4 แสดงสวนทแนะน าเวบไซตแกผใชงาน

ส าหรบสวนนจะเหนไดวามขอความและรปภาพทแนะน าเวบไซตและใหขอมลคณสมบตหรอ

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

ของซเปอรมารเกตในกรณทผใชตองการขอมลเพมเตมหรอตดตอกบซเปอรมารเกตโดยตรง

26

4.2 สวนของรานคา

ภาพท 4-5 แสดงสวนของรานคา

Banner แสดงประเภทสนคา

ใหผใชเลอก ซเปอรมารเกต (หากตองการ รวมราคาใน

ตะกราสนคา)

รายการสนคา

ลงคเชอมโยง ไปยงสวนแผนท

สวนแสดง วธใชงาน เวบไซต (ขนาดยอ)

- ตะกราสนคา

แถบเมน

ตะกราสนคา

27

จากภาพท 4-5 ในหนาทแลวเปนภาพแสดงตวอยางสวนของรานคาเมอผใชเลอกดสนคา

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

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

ดงภาพท 4-6

ภาพท 4-6 Banner แสดงประเภทของสนคา 5 หมวดหลกในสวนของรานคา

ผใชสามารถเลอกดสนคาตางๆไดในสวนของรานคานซงสนคาแตละชนจะแสดงราคาทวางขาย

ในซเปอรมารเกตทง 7 รายเปรยบเทยบใหเหนอยางชดเจน โดยเฉพาะอยางยงซเปอรมารเกตรายทขาย

สนคาชนใดๆในราคาต าทสด จะปรากฏเครองหมาย ทดานหนาชอซเปอรมารเกตรายนน อนเปน

การชวยใหผใชงานเวบไซตสามารถตดสนใจเรองราคาสนคาไดงายขน (ดภาพท 4-7)

อยางไรกตาม หากผใชงานตองการเปรยบเทยบราคาสนคามากกวา 1 ชนขนไป ผศกษากได

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

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

รวมราคาไดเชนกน เนองจากระบบคกกของเวบไซตไดจดจ าการเลอกซเปอรมารเกตและสนคาไวแลว

28

ภาพท 4-7 แสดงรายการสนคาพรอมราคาทวางขายในซเปอรมารเกตแตละราย

ภาพท 4-8 แสดงปมเพอใหผใชคลกเลอกซเปอรมารเกต ในกรณทตองการรวมราคาสนคาในตะกรา

ภาพท 4-9 แสดง Message box เมอผใชคลกเลอกซเปอรมารเกต

29

ภาพท 4-10 แสดงตะกราสนคาหลงจากการเลอกซเปอรมารเกต โดยผใชยงไมไดหยบสนคาใสตะกรา

เมอมการคลกเลอกซเปอรมารเกตทตองการรวมราคาสนคาแลว ตะกราสนคา (อยทางดานลาง)

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

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

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

หากมการหยบสนคาใสตะกราแลว ระบบจะแสดงรายการสนคา (ชอสนคา, ราคา, จ านวน) และรวมราคา

สนคาให ตามทปรากฏในรปท 4-11

ภาพท 4-11 แสดงตะกราสนคาหลงจากการเลอกซเปอรมารเกต โดยผใชหยบสนคาใสตะกราแลว

นอกจากนจะเหนไดวามปม “REMOVE” เพอลบสนคาออกจากตะกรา, ปม “ยกเลกสนคาใน

ตะกราทงหมด” เพอลบสนคาทกชนออกจากตะกรา และปม “Print รายการสนคาน” เพอส งพมพรายการ

สนคาในตะกรา ในกรณทผใชตองการน ารายการสนคานนไปใชงานตอ

30

ภาพท 4-12 แสดงหนาตะกราสนคา

นอกจากตะกราสนคาจะอยทางดานลางในสวนของการเลอกดรายการสนคาแตละประเภทแลว

ผใชยงสามารถเขาถงตะกราสนคาไดจากลงคทอยดานบนสดทางขวามอ (วงกลมสเขยวในภาพท 4-12)

โดยลงคดงกลาวจะน าไปสหนาทแสดงเฉพาะรายการสนคาภายในตะกราสนคาเทานน ดงทปรากฏใน

ภาพท 4-12

คลก! เพอไปทหนาตะกราสนคา

31

ภาพท 4-13 แสดงสวนสอนวธการใชงานเวบไซต (ขนาดยอ) ในสวนรานคา

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

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

ของรานคามรปภาพสอนวธใชงานเวบไซตอยางยอทจะเปลยนรปโดยอตโนมต อนจะชวยชแนะวธใชได

อยางใกลชดมากขนโดยผใชไมจ าเปนตองกลบไปดทหนาหลกของเวบไซตเพอทบทวนวธการใชงาน

32

ภาพท 4-14 แสดงลงคเชอมโยงไปยงสวนของแผนท

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

ซเปอรมารเกตรายใดทเหมาะสมทสดในการเดนทางไปซอสนคา บรเวณฝ งขวาของรานคาจะแสดงลงคท

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

ของซเปอรมารเกตรายใด

33

4.3 สวนของแผนท

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

พจารณาแลววาเหมาะสมทสดนน ผใชงานสามารถเขาถงไดจาก 2 ชองทาง ดงน

(1) แถบเมนดานบน (ปรากฏในทกๆหนาของเวบไซต)

(2) กลองลงคทางฝ งขวา (ปรากฏเฉพาะสวนของรานคา ตามภาพท 4-14)

ภาพท 4-15 แสดงสวนของแผนท

ลงคขอความแสดงทอยปจจบนของผใชงาน

กลองขอความเพอใหผใชกรอกทอย หรอใชต าแหนงปจจบนเปนต าแหนงเรมตน

แผนท

Thumbnail

กลองขอความ แสดงสาขาเปาหมาย

ป มน าทาง

Banner

หมดแสดงต าแหนงปจจบนของผใชงาน

34

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

ปรากฏในภาพท 4-15 โดยระบบจะคนหาต าแหนงปจจบนของผใชและปกหมดสแดงลงบนแผนทและใช

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

สามารถทราบไดวามซเปอรมารเกตสาขาใดทอยในบรเวณใกลเคยงกบต าแหนงปจจบน

สวนของ banner บรเวณดานบนจะมลกษณะทแตกตางกนไปตามแตละซเปอรมารเกตทผใช

เลอก โดยจะมสและขอความทแตกตางกน ดงทปรากฏในภาพท 4-16

ภาพท 4-16 แสดง Banner ของแผนทซเปอรมารเกตรายตางๆ

นอกจากนระบบจะท าการค านวณระยะทางและจดอนดบของซเปอรมารเกตทอยใกลเคยงมาก

ทสดซงจะแสดงใน thumbnail ทต าแหนงบนสด โดยสาขาทระยะทางใกลรองลงมาจะอยใน thumbnail

35

ถดไป จนถงสาขาทต งอยไกลผใชมากทสด ทงนผใชสามารถ scroll เพอเลอกดขอมลของแตละสาขาได

โดยขอมลทแสดงใน thumbnail นนจะประกอบไปดวย

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

ภาพท 4-17 แสดงสวนประกอบภายใน thumbnail

ภาพท 4-18 แสดงผลจากการคลกท thumbnail

ชอซเปอรมารเกตและสาขา

ทอย เบอรโทรตดตอ และรายละเอยดอนๆ

ระยะทางจากต าแหนงของผใช

ป ม “น าทาง”

infowindow

thumbnail

36

เมอผใชคลกท thumbnail ระบบจะแสดงชอของซเปอรมารเกตสาขาทผใชเลอกขนในกลอง

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

ฐานะสาขาเปาหมาย พรอมกนนจะพบวาสของกลอง thumbnail ไดเปลยนเปนสฟาเพอแจงใหผใช

ทราบวาระบบก าลงท างานกบซเปอรมารเกตสาขาใด นอกจากน infowindow ของหมดสาขาจะแสดง

รายละเอยดของซเปอรมารเกตสาขานนๆซงเปนขอมลเดยวกบทแสดงใน thumbnail (ภาพท 4-18)

ภาพท 4-19 แสดงการใชต าแหนงปจจบนในการจดเสนทาง (1)

ในกรณทผใชงานตองการใหระบบจดเสนทางจากต าแหนงปจจบนไปยงสาขาทตองการนน

หลงจากทระบบมขอมลของสาขาเปาหมายทตองการแลว (ดไดจากกลองขอความทแสดงสาขา

เปาหมาย) ข นตอไปคอการคลกทลงคขอความ “ใชต าแหนงปจจบน: (ทอย)” เพอใหระบบแปลงขอมลท

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

คลกทปม “น าทาง” ซงปมนจะปรากฏอย 3 แหง คอ บรเวณใตกลองขอความทแสดงสาขาเปาหมาย,

ภายใน thumbnail, และภายใน infowindow ของหมดสาขา

1. คลก! 2. ระบบจะน าทอยดงกลาวมาใชเปนต าแหนงเรมตน

3. คลกทป ม “น าทาง” เพอใหระบบจดเสนทาง

infowindow

thumbnail

37

ภาพท 4-20 แสดงการใชต าแหนงปจจบนในการจดเสนทาง (2)

หลงจากทผใชคลกปม “น าทาง” แลว ระบบจะแสดงผลลพธของการจดเสนทางบน panel ทาง

ดานขวาของแผนทดงรปท 4-20 และแผนทจะ zoom เขาเพอใหผใชสามารถเหนจดเรมตน (หมดสเขยว)

และสาขาเปาหมาย (หมดสแดง) พรอมกบวาดเสนทางลงบนแผนท

ภาพท 4-21 แสดงการใชต าแหนงทผใชก าหนดเองในการจดเสนทาง (1)

ในกรณทผใชตองการก าหนดจดเรมตนในการจดเสนทางเอง สามารถพมพชอสถานทตองการ

ลงในกลองขอความเพอ Search หาสถานทเรมตนทตองการไดเชนเดยวกน ดงรปท 4-21

38

ภาพท 4-22 แสดงการใชต าแหนงทผใชก าหนดเองในการจดเสนทาง (2)

หลงจากทผใชคลกปม “น าทาง” แลว ระบบจะแสดงผลลพธของการจดเสนทางจากต าแหนงท

ผใชก าหนดเองไปยงซเปอรมารเกตบน panel ทางดานขวาของแผนทดงรปท 4-22

39

บทท 5

สรปผลการด าเนนงานและขอเสนอแนะ

5.1 สรปผลการด าเนนงาน

จากการทผศกษาไดการพฒนาระบบสนบสนนการตดสนใจแบบระบบสารสนเทศภมศาสตรบนเวบ

เพอแสดงและเปรยบเทยบราคาสนคาของเทสโก โลตส, ทอปส, บกซ, แมกซแวล, ฟดแลนด, กรเมตมาร

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

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

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

ด าเนนงานดงน

ผศกษาสามารถเกบขอมลต าแหนงทต งของซเปอรมารเกตสาขาตางๆในพนทกรงเทพมหานครทง 7

ราย รวม 515 สาขา รวมถงรายละเอยดอนๆ อาท ทอย, เบอรโทรศพท และเวลาเปด-ปดท าการไดจาก

เวบไซตของซเปอรมารเกตทกราย และน าทอยมาหาคาพกดละตจด-ลองจจดดวย Google Maps กอน

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

ส าหรบการเกบขอมลราคาสนคานนตองอาศยการลงภาคสนามเพอส ารวจราคาจรงทซเปอรมารเกต

แตละราย อยางไรกตาม ซเปอรมารเกตบางรายทมระบบรานคาออนไลนไดเปนแหลงขอมลราคาสนคา

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

สามารถเกบขอมลราคาจากรานคาจรงได (สนคาหมด/ไมมสนคาวางขายในสาขาทส ารวจ)

ในดานผลจากการด าเนนงานพฒนาระบบนน ผศกษาคาดวาหากมการน าไปพฒนาตอยอดเพอใช

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

อยางสะดวกสบายมากขนโดยไมจ าเปนตองส ารวจราคาสนคาดวยตวเอง พรอมกนนยงมระบบตะกรา

สนคาทสามารถรวมราคาสนคาแตละชนทผใชตองการเพอชวยอ านวยความสะดวกในการตดสนใจถง

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

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

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

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

สาขาทตองการอนจะชวยอ านวยความสะดวกในการวางแผนเดนทางไปซอสนคา ณ สถานทจรงมากขน

40

5.2 ขอเสนอแนะ

1. ระบบนเปนเพยงระบบตนแบบททดสอบการท างานกบเซรฟเวอรจ าลองเทานน จงควรมการ

น าลงเซรฟเวอรเพอใหบคคลทวไปไดทดลองและวดผลจากการใชงานจรง

2. เพอใหระบบทพฒนาขนสามารถเปนแหลงอางองราคาสนคาทด ควรมการส ารวจเพอ ให

แนใจวาแมจะเปนซเปอรมารเกตรายเดยวกนแตตางสาขากนจะวางขายสนคาชนดเดยวกน

ในราคาทเทากน เนองจากผศกษายงไมมขอมลทจะยนยนในประเดนนได

3. ระบบยงมขอบกพรองในเรองการใหขอมลราคาสนคาทตรงตามสถานการณดวยขอจ ากด

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

หนาทส ารวจราคาสนคาและแกไขราคาสนคาในระบบเปนรายวน (หรอนอยกวานน) หรอ

อาจมการสรางความรวมมอกบซเปอรมารเกตแตละรายเพอขอการแจงราคาสนคากบผดแล

ระบบ ซงจะท าใหเวบไซตเปนศนยรวมของขอมลราคาสนคาภายใตระบบเดยว

4. อาจขยายขอบเขตของขอมลทมในระบบออกไปยงพนทปรมณฑลหรอตางจงหวดได

5. ควรเพมรายการสนคาใหหลากหลายและครอบคลมมากขน

6. ควรมการพฒนาระบบผดแล/ระบบหลงราน เพอใหสามารถจดการเพม-ลบสนคา หรอแกไข

ราคาไดอยางสะดวกรวดเรวมากขน

7. อาจมการเพมแผนทและขอมลราคาของซเปอรมารเกตรายอนๆ เพอตอบสนองตอความ

ตองการของผบรโภคทหลากหลาย เชน วลลา มารเกต (Villa Market) เปนตน

41

บรรณานกรม

กงวาน อศวไชยวศน และอรพน ประวตบรสทธ. (2556). คมอสรางเวบไซตดวย HTML5 CSS3 & JavaScript ฉบบสมบรณ. กรงเทพฯ: บรษท โปรวช น จ ากด.

เจรญศกด รตนวราห และฐสนต ทพยศภธนนท. (2554). PHP & MySQL Web Programming

ดวยภาษายอดนยมทสดในยคน. กรงเทพฯ: บรษท เนตดไซน พบลชชง จ ากด.

เชฟเฟอร, โจนาธาน และสเวดเบรก, คารล. (2553). ออกแบบและพฒนาเวบไซตดวย jQuery.

เรยบเรยงโดย โกศล โสฬสรงเรอง. กรงเทพฯ: ซเอดยเคชน.

ส านกเทคโนโลยสารสนเทศ. (2553). “jQuery คออะไร.” [ออนไลน].

เขาถงไดจาก: http://www.it.coj.go.th/download/document/activies/october10/October-

2010-Develop-2.pdf. สบคนเมอ 9 มนาคม 2557.

admin. (2555). “การใชค าส ง print เพอพมพออกทางเครองพมพ โดยใช Javascript.” [ออนไลน].

เขาถงไดจาก: http://www.doesystem.com/d2986e3cd2d3603d4d6a5c47e50cef84/ใชค าส ง-

print-เพอพมพออกทางเครองพมพ-โดย-Javascript.htm. สบคนเมอ 26 มกราคม 2557.

Appleton, Ben. (2007). “Using PHP/MySQL with Google Maps.” [Online].

Available: https://developers.google.com/maps/articles/phpsqlajax_v3.

Retrieved December 10, 2013.

ArnizWeb. (2011). “jQuery Plug-in: Shopping Cart.” [Online].

Available: http://codecanyon.net/item/jquery-plugin-shopping-cart/350282.

Retrieved January 20, 2014.

“Distance Matrix Service.” (2013). [Online].

Available: https://developers.google.com/maps/documentation/javascript/examples/

distance-matrix?hl=fr-fr. Retrieved December 10, 2013.

42

บรรณานกรม (ตอ)

Gandy, Dave. (n.d.). “The Icons: THE COMPLETE SET OF 369 ICONS IN FONT AWESOME

4.0.3.” [Online]. Available: http://fortawesome.github.io/Font-Awesome/icons/.

Retrieved January 28, 2014.

Goon JS. (2556). “ท าความรจก AJAX คออะไร” [ออนไลน].

เขาถงไดจาก: http://js.in.th/ท าความรจก-ajax-คออะไร _2013-06-11.html.

สบคนเมอ 9 มนาคม 2557.

Iz, Joe. (2012). “Super Store Finder.” [Online]. Available: http://superstorefinder.net/.

Retrieved January 20, 2014.

kiprainey. (2013). “Creating a jQuery object from a big HTML-string.” [Online].

Available: http://stackoverflow.com/questions/11047670/creating-a-jquery-object-from-a-

big-html-string. Retrieved January 28, 2014.

“Lookup Runner.” (n.d.). [Online]. Available: http://www.lookuprunner.com/demo/.

Retrieved December 15, 2013.

Shmidt, Sergey. (n.d.). “Flat UI Free User Interface Kit.” [Online].

Available: http://designmodo.github.io/Flat-UI/. Retrieved January 26, 2014.

Van Tongeren, Johan. (2012). “Using Geolocation to Automatically Generate a Route and

Directions in Google Maps.” [Online]. Available: http://www.dreamdealer.nl/tutorials/

using_geolocation_to_automatically_generate_a_route_and_directions_in_google_maps.

html. Retrieved December 30, 2013.