โครงงาน · 2019. 8. 23. · โครงงาน โดย 1....

30
โครงงาน โดย 1. นายพรชัย พุมภิญโญ 2. นายสรรคพงศ คําหอม 3. เด็กชายดนุสรณ สระทองแกว โรงเรียนสตรีอางทอง อําเภอเมือง จังหวัดอางทอง สังกัด สํานักงานเขตพื้นที่การศึกษามัธยมศึกษาเขต 5 รายงานนี้เปนสวนประกอบของโครงงานคอมพิวเตอรประเภทซอฟตแวร ระดับชั้น มัธยมศึกษาตอนตน เนื่องในงานศิลปหัตถกรรมนักเรียน ครั้งที่ 65 ปการศึกษา 2558

Upload: others

Post on 15-Oct-2020

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: โครงงาน · 2019. 8. 23. · โครงงาน โดย 1. นายพรชัย พุ มภิญโญ 2. นายสรรค พงศ คําหอม

โครงงาน

โดย

1. นายพรชย พมภญโญ

2. นายสรรคพงศ คาหอม

3. เดกชายดนสรณ สระทองแกว

โรงเรยนสตรอางทอง อาเภอเมอง จงหวดอางทอง

สงกด สานกงานเขตพนทการศกษามธยมศกษาเขต 5

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

ระดบชน มธยมศกษาตอนตน

เนองในงานศลปหตถกรรมนกเรยน ครงท 65 ปการศกษา 2558

Page 2: โครงงาน · 2019. 8. 23. · โครงงาน โดย 1. นายพรชัย พุ มภิญโญ 2. นายสรรค พงศ คําหอม

โดย

1. นายพรชย พมภญโญ

2. นายสรรคพงศ คาหอม

3. เดกชายดนสรณ สระทองแกว

โรงเรยนสตรอางทอง อาเภอเมอง จงหวดอางทอง

สงกด สานกงานเขตพนทการศกษามธยมศกษาเขต 5

ครทปรกษา

นายอธรฐ พมสาขา

นางปยาภรณ แสงนาค

Page 3: โครงงาน · 2019. 8. 23. · โครงงาน โดย 1. นายพรชัย พุ มภิญโญ 2. นายสรรค พงศ คําหอม

บทคดยอ

การศกษาไทยในปจจบน นบวนจะยงตกตาลงเนองจากนกเรยนสวนมากประสบปญหาตางๆ ในการ

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

เนอหาวชาตางๆ แตไมมทปรกษาเนองจากปจจยหลายอยาง หรออาจจะไมกลาทถาม ทาใหไมเขาใจเนอหา

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

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

ผพฒนาจงไดมแนวคดในการจดทาโครงงาน “ตวเตอรอาสา” เพอใชเปนชองทางในการตดตอ

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

เวบแอพพลเคชนระบบฐานขอมลออนไลน โดยใช jQuery Mobile ในการพฒนารวมกบ MySQL เพอใหผใช

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

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

ใหแกผใชงานอกดวย

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

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

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

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

ผใชสวนใหญมความพงพอใจในดานประโยชนของระบบโครงงาน ดานการชวยใหตระหนกถงการมจต

สาธารณะ อยในระดบดมาก ดานความยากงายในการใชงานระบบโครงงาน ดานความสะดวกในการใชบน

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

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

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

สงคมตอไปในอนาคต

Page 4: โครงงาน · 2019. 8. 23. · โครงงาน โดย 1. นายพรชัย พุ มภิญโญ 2. นายสรรค พงศ คําหอม

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

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

ขอขอบคณครอธรฐ พมสาขา และครปยาภรณ แสงนาค ครทปรกษาโครงงาน ทใหแนวทางในการทาโครงงาน พรอมทงใหคาปรกษาแนะนา เกยวกบขอมลโครงงาน การวเคราะหและออกแบบระบบ การเขยนโปรแกรมคอมพวเตอร

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

ผจดทา

Page 5: โครงงาน · 2019. 8. 23. · โครงงาน โดย 1. นายพรชัย พุ มภิญโญ 2. นายสรรค พงศ คําหอม

สารบญ

หนา

บทท 1 บทนา 1

บทท 2 เอกสารทเกยวของ 2

บทท 3 อปกรณและวธการดาเนนการ 6

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

บทท 5 สรปผลการดาเนนงาน 17

บรรณานกรม 18

ภาคผนวก 19

Page 6: โครงงาน · 2019. 8. 23. · โครงงาน โดย 1. นายพรชัย พุ มภิญโญ 2. นายสรรค พงศ คําหอม

บทท 1

บทนา

ทมาและความสาคญของโครงงาน

การศกษาไทยในปจจบน นบวนจะยงตกตาลงเนองจากนกเรยนสวนมากประสบปญหาตางๆ ในการ

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

เนอหาวชาตางๆ แตไมมทปรกษาเนองจากปจจยหลายอยาง หรออาจจะไมกลาทถาม ทาใหไมเขาใจเนอหา

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

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

ผพฒนาจงไดมแนวคดในการจดทาโครงงาน “ตวเตอรอาสา” เพอใชเปนชองทางในการตดตอ

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

เวบแอพพลเคชนระบบฐานขอมลออนไลน โดยใช jQuery Mobile ในการพฒนารวมกบ MySQL เพอใหผใช

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

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

ใหแกผใชงานอกดวย

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

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

2. เพอปลกฝงจตสาธารณะใหกบผใชงานโปรแกรม

สมมตฐาน

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

ขอบเขตของการดาเนนงาน

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

อางทอง มชวงเวลาในการดาเนนการตงแตเดอนกรกฎาคม 2558 ถงเดอนพฤศจกายน 2558

Page 7: โครงงาน · 2019. 8. 23. · โครงงาน โดย 1. นายพรชัย พุ มภิญโญ 2. นายสรรค พงศ คําหอม

บทท 2

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

ฐานขอมล (DataBase)

ฐานขอมล คอระบบทรวบรวมขอมลไวในทเดยวกน ซงประกอบไปดวยแฟมขอมล (File) ระเบยน

(Record) และ เขตขอมล (Field) และถกจดการดวยระบบเดยวกน โปรแกรมคอมพวเตอรจะเขาไปดงขอมลท

ตองการได อยางรวดเรว

การออกแบบฐานขอมล (Designing Databases) มความสาคญตอการจดการระบบฐานขอมล

(DBMS) ทงนเนองจากขอมลทอยภายในฐานขอมลจะตองศกษาถงความสมพนธของขอมล โครงสรางของ

ขอมลการเขาถงขอมลและกระบวนการทโปรแกรมประยกตจะเรยกใชฐานขอมล

การออกแบบฐานขอมลในระดบตรรกะ หรอในระดบแนวความคด เปนขนตอนการออกแบบ

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

ความสมพนธระหวางขอมล (E-R Diagram) จากแผนภาพ E-R Diagram นามาสรางเปนตารางขอมล

(Mapping E-R Diagram to Relation) และใชทฤษฏการ Normalization เพอเปนการรบประกนวาขอมลม

ความซาซอนกนนอยทสด

ระบบเครอขาย (Network)

เครอขายคอมพวเตอร หรอ คอมพวเตอรเนทเวรก (computer network) คอ ระบบการสอสาร

ระหวางคอมพวเตอรจานวนตงแตสองเครองขนไป

การทระบบเครอขายมบทบาทสาคญมากขนในปจจบน เพราะมการใชงานคอมพวเตอรอยาง

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

สงขน และลดตนทนของระบบโดยรวมลง

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

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

ตาง ๆ ทมราคาแพงและไมสามารถจดหามาใหทกคนได เชน เครองพมพ เครองกราดภาพ(scanner) ทาใหลด

ตนทนของระบบลงได

Page 8: โครงงาน · 2019. 8. 23. · โครงงาน โดย 1. นายพรชัย พุ มภิญโญ 2. นายสรรค พงศ คําหอม

Google Map

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

แผนทพนฐานหรอแผนททกาหนดเองและขอมลธรกจทองถน รวมถงตาแหนงของธรกจขอมลทอยตดตอ และ

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

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

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

Google Map จะแสดงผลลพธท google คดวาเกยวของกบการคนหาของผใชมากทสด ตาแหนงถอ

วาเปนหนงในปจจยหลายๆ ปจจยทใชเพอคนหาผลลพธทเกยวของ ตวอยางเชน ถาผใชคนหาสาขาของ

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

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

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

ภายในแผงทางดานซายมอ เมอผใชไปท Google Map ครงแรก เทคโนโลยของ google ในการคนหาตาแหนง

จะตงตาแหนงใหผใชโดยอตโนมต แตหากผใชพบวา google จดตาแหนงใหผใชไมถกตอง ผใชสามารถกาหนด

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

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

ตาแหนงของผใช

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

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

ตวอยางเชน ผใชคงเคยสงเกตแบนเนอรโฆษณาขอเสนอทนาสนใจในพนทของผใช แบบฟอรมทเตมชอเมองให

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

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

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

วาตาแหนงใดอาจเปนตาแหนงทเกยวของมากทสด สาหรบตาแหนงอตโนมต google สามารถทาการ

คาดคะเนเพอตงมมมองแผนทเรมตนไดดทสดในระดบเมอง

GPS

ระบบกาหนดตาแหนงบนโลกหรอ จพเอส (องกฤษ: Global Positioning System: GPS) คอระบบ

บอกตาแหนงบนพนผวโลก โดยอาศยการคานวณจากความถสญญาณนาฬกาทสงมาจากดาวเทยมทโคจรอย

รอบโลกซงทราบตาแหนง ทาใหระบบนสามารถบอกตาแหนง ณ จดทสามารถรบสญญาณไดทวโลก โดย

Page 9: โครงงาน · 2019. 8. 23. · โครงงาน โดย 1. นายพรชัย พุ มภิญโญ 2. นายสรรค พงศ คําหอม

เครองรบสญญาณจพเอส รนใหมๆ จะสามารถคานวณความเรวและทศทางนามาใชรวมกบโปรแกรมแผนท

เพอใชในการนาทางได

แนวคดในการพฒนาระบบจพเอส เรมตนตงแตป ค.ศ. 1957 เมอนกวทยาศาสตรของสหรฐอเมรกา

นาโดย Dr. Richard B. Kershner ไดตดตามการสงดาวเทยมสปตนกของโซเวยต และพบปรากฏการณดอป

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

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

สามารถระบตาแหนงบนพนโลกได ในทางกลบกน

โปรแกรมประยกต (Application)

โปรแกรมประยกต หรอ ซอฟตแวรแอปพลเคชน (application software) ในบางครงเรยกยอ

วา แอปพลเคชน คอซอฟตแวรประเภทหนงสาหรบใชงานสาหรบงานเฉพาะทาง ซงแตกตางกบซอฟตแวร

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

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

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

JQuery

JQuery เปนไลบรารของโคดจาวาสครปต (JavaScript Library) ทรวบรวมเอาฟงกชน และคาสง

ตางๆ ของ Javascript ทใชอยเปนประจา โดยทไมตองเขยนขนมาใหมทงหมดตงแตตน และสามารถทจะเขยน

ajax ไดแบบงายๆเพยง code ไมกบรรทด หรอจะเขยน javascript เพอดก Event (เหตการณ) ตางๆท

ตองการ เชน การ click, rollover, mouse moved และอนๆอกมาก ซงถาใช Javascript ตองเขยนคาสง

หลายบรรทด

jQuery Mobile

jQuery Mobile คอ Framework ชนดหนงซงไดรบความนยมใชงานอยางแพรหลายมาก เพราะ

ปจจบนอปกรณพกพาตาง ๆ เพมเขามามบทบาทมากยงขน ผคนตาง ๆ มการใชงานเวบไซตผานอปกรณตาง

ๆ มากยงขนทกวน ๆ ซง jQuery Mobile Framework นชวยใหผพฒนาสามารถเขยนเวบไซตขนมาครงเดยว

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

และผใชงานเปนอยางมาก

Page 10: โครงงาน · 2019. 8. 23. · โครงงาน โดย 1. นายพรชัย พุ มภิญโญ 2. นายสรรค พงศ คําหอม

จตสาธารณะ

จตสาธารณะ (public consciousness) คอ จตของคนทรจกความเสยสละ ความรวมมอรวมใจ ใน

การทาประโยชนเพอสวนรวม จะชวยลดปญหาทเกดขนในสงคม ชวยกนพฒนาคณภาพชวต เพอเปนหลกการ

ในการดาเนนชวต ชวยแกปญหาและสรางสรรคใหเกดประโยชนสขแกสงคม เชน การชวยกนดแลรกษา

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

ไฟฟาทใหความสวางตามถนนหนทาง

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

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

ตลอดจนรวมมอกระทาเพอไมใหเกดปญหา หรอชวยกนแกปญหา แตตองไมขดตอกฎหมาย เพอรกษา

ประโยชนสวนรวม

ราชบณฑตยสถาน ไดใหความหมายของ จตสานกทางสงคม หรอจตสานกสาธารณะวา คอ การ

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

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

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

งาม ละอายตอสงผด เนนความเรยบรอย ประหยดและมความสมดลระหวางมนษยกบธรรมชาต

Page 11: โครงงาน · 2019. 8. 23. · โครงงาน โดย 1. นายพรชัย พุ มภิญโญ 2. นายสรรค พงศ คําหอม

บทท 3

อปกรณและวธการดาเนนการ

อปกรณและซอฟตแวรทใชในการพฒนา

1. AppServ

2. EditPlus

3. Google Map API

4. jQuery-mobile

วธการดาเนนการ

1. ศกษาการเขยนโปรแกรมระบบฐานขอมล และเนอหาความรทเกยวของ

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

เขยนโปรแกรมสรางระบบเวบไซตฐานขอมลดวย HTML , PHP และ jQuery โดยใช MySQL เปนฐานขอมล

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

นา Google Map API มาประยกตใชรวมกบโปรแกรม

2. ทดสอบความเปนไปไดของระบบ

ทดสอบการใชฐานขอมล MySQL และใชโปรแกรม Apache ซงเปนโปรแกรมจาลองเครองเซฟเวอร

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

ขอมลนน ๆ และการใชระบบ GPS รวมกบการทางานของ Google Map เพอหาพกดละตจด ลองจจด

ตาแหนงของผใช เปนตน

3. กาหนดแนวทางและออกแบบโปรแกรม

Page 12: โครงงาน · 2019. 8. 23. · โครงงาน โดย 1. นายพรชัย พุ มภิญโญ 2. นายสรรค พงศ คําหอม

หนาหลก ตรวจสอบการ

เขาสระบบ

ลงชอเขาส

ระบบ

เพม

ขอมล

ผใช สมคร

สมาชก

ออกจาก

ระบบ

ตรวจสอบ

ผใช

หนาแรก

กระดาน

ขาว

สง

ขอความ

สงอโม

ขอความ

ยนยนการ

ลบ

ขอความ

ลบ

ขอความ

ดแผนท

การแจง

เตอน

ยนยนการ

ลบการ

แจงเตอน

ลบการ

แจงเตอน

กรอก

ขอความ

ตอบ

ขอความ

แนบแผนท

สง

ขอความ

สง

ขอความ

แกไข

ขอมล

แกไข

แทก

ลบแทก

เพมแทก

เพมแทก

หลก

เพมแทก

ยอย

คนหา

ตวเตอร

ขอมล

ตวเตอร

3.1 วเคราะหและออกแบบระบบการทางานของโปรแกรม

Page 13: โครงงาน · 2019. 8. 23. · โครงงาน โดย 1. นายพรชัย พุ มภิญโญ 2. นายสรรค พงศ คําหอม

m m m m

m

m

m m

m

1 user

emo bdate

bid chat

class

upic

password

username

tel

name

Penname

mid

Status

urec

msg

mdate

ref

mlat

mlong

mzoom

tfile

tag

tid tag

utag

Utagid Tid username 3.2 ออกแบบฐานขอมล

board

msg

uroot

rootid

root

tid

urootid

rootid

username

Usend root_tag

of

Page 14: โครงงาน · 2019. 8. 23. · โครงงาน โดย 1. นายพรชัย พุ มภิญโญ 2. นายสรรค พงศ คําหอม

ตารางขอมลนกเรยน,ทอย และภาพของนกเรยน

ตารางขอมลการสนทนาแบบกลม

ตาราง user

ชอฟลด คาอธบาย ชนดขอมล ขนาด

username ชอผใช varchar 30

password รหสผาน varchar 30

name ชอ-นามสกล varchar 50

penname นามปากกา varchar 50

class ชนเรยน varchar 20

tel เบอรโทรศพท varchar 30

upic ภาพประจาตว varchar 50

ตาราง board

ชอฟลด คาอธบาย ชนดขอมล ขนาด

bid รหสขอความ int 11

user ผสงขอความ varchar 30

chat ขอความ text

bdate วน/เวลา datetime

emo อโม int 11

ตวเตอร ชอตวเตอร varchar 50

Page 15: โครงงาน · 2019. 8. 23. · โครงงาน โดย 1. นายพรชัย พุ มภิญโญ 2. นายสรรค พงศ คําหอม

ตารางขอมลการสนทนาในหองตว

ตารางแทกวชาหลก

ตาราง msg

ชอฟลด คาอธบาย ชนดขอมล ขนาด

mid รหสขอความ int 11

Status สถานะการอาน int 11

Usend ผสง varchar 30

urec ผรบ varchar 30

msg ขอความ text

mdate วนทสง datetime

ref การอางอง Int 11

mlat ละตจดอางอง varchar 40

mlong ลองจจดอางอง varchar 40

mzoom ระยะซมแผนท int 11

tfile ไฟลแนบ varchar 60

ตาราง tag

ชอฟลด คาอธบาย ชนดขอมล ขนาด

tid รหสแทก int 11

tag ชอวชา varchar 20

Page 16: โครงงาน · 2019. 8. 23. · โครงงาน โดย 1. นายพรชัย พุ มภิญโญ 2. นายสรรค พงศ คําหอม

ตารางแทกวชาหลกของผใช

ตารางแทกวชาหลกยอย

ตารางแทกวชาหลกยอยของผใช

ตาราง utag

ชอฟลด คาอธบาย ชนดขอมล ขนาด

utagid รหสแทกหลกผใช int 11

Tid รหสแทกวชาหลก Int 11

username ชอผใช varchar 50

ตาราง root_tag

ชอฟลด คาอธบาย ชนดขอมล ขนาด

rootid รหสแทกวชายอย int 11

root วชายอย varchar 100

tid รหสแทกวชาหลก int 11

ตาราง uroot

ชอฟลด คาอธบาย ชนดขอมล ขนาด

urootid รหสแทกยอยผใช int 11

rootid รหสแทกวชายอย int 11

username ชอผใช varchar 50

Page 17: โครงงาน · 2019. 8. 23. · โครงงาน โดย 1. นายพรชัย พุ มภิญโญ 2. นายสรรค พงศ คําหอม

4. พฒนาโปรแกรม

เรมตนพฒนาดวยโปรแกรม EditPlus3 ในการเขยน source code ภาษา HTML , PHP รวมกบ

jQuery-mobile ออกแบบระบบเวบแอพ เชอมโยงกบ MySQL ดวย PHPMyAdmin ในการสรางฐานขอมล

และใชระบบ GPS เขยนโปรแกรมเชอมโยงกบ Google Map มาประยกตในการแสดงพกดของผใช

5. นาโปรแกรมไปใชงานจรงและประเมนผลการทางาน

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

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

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

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

Form

Page 18: โครงงาน · 2019. 8. 23. · โครงงาน โดย 1. นายพรชัย พุ มภิญโญ 2. นายสรรค พงศ คําหอม

บทท 4

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

ระบบโครงงาน “ตวเตอรอาสา” ไดพฒนาระบบฐานขอมลสาหรบเปนชองทางแลกเปลยนเรยนร

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

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

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

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

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

เวรดทคนหามากทสดเรยงตามลาดบ

Page 19: โครงงาน · 2019. 8. 23. · โครงงาน โดย 1. นายพรชัย พุ มภิญโญ 2. นายสรรค พงศ คําหอม

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

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

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

นอกจากนโครงงานตวเตอรอาสา ยงสามารถใหผใชแนบแผนทจากพกด GPS รวมกบ Google Map

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

ตาแหนงแหลงสบคน หรออาจจะนดเจอกนเพอสอนตวตอตว เปนตน

Page 20: โครงงาน · 2019. 8. 23. · โครงงาน โดย 1. นายพรชัย พุ มภิญโญ 2. นายสรรค พงศ คําหอม

ผลการประเมนการใชโปรแกรมตวเตอรอาสา

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

เครองมอ แบบประเมนการใชระบบโครงงาน “ตวเตอรอาสา” ไดผลออกมาดงน

นกเรยนสวนใหญมความพอใจดานประโยชนของระบบโครงงาน อยในระดบดมาก คดเปนรอยละ

46.4

นกเรยนสวนใหญมความพอใจดานความยากงายในการใชงานระบบโครงงานตวเตอรอาสา อยใน

ระดบด คดเปนรอยละ 46.4

Page 21: โครงงาน · 2019. 8. 23. · โครงงาน โดย 1. นายพรชัย พุ มภิญโญ 2. นายสรรค พงศ คําหอม

นกเรยนสวนใหญมความพอใจดานความสะดวกในการใชบนอปกรณเคลอนท อยในระดบด คดเปน

รอยละ 43.5

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

ระดบด คดเปนรอละ 40.6

นกเรยนสวนใหญมความพอใจดานการชวยใหตระหนกถงการมจตสาธารณะ อยในระดบดมาก คด

เปนรอยละ 47.8

Page 22: โครงงาน · 2019. 8. 23. · โครงงาน โดย 1. นายพรชัย พุ มภิญโญ 2. นายสรรค พงศ คําหอม

บทท 5

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

สรปผลการพฒนาโครงงาน

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

อภปรายผล

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

ขอเสนอแนะในการพฒนาโครงงานครงตอไป

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

Page 23: โครงงาน · 2019. 8. 23. · โครงงาน โดย 1. นายพรชัย พุ มภิญโญ 2. นายสรรค พงศ คําหอม

บรรณานกรม

เกษม กมลชยพสฐ. รอบร ประยกตใช SQL Server 2005. กรงเทพฯ : สานกพมพแหงจฬาลงกรณ

มหาวทยาลย, 2552.

ประชา พฤกษประเสรฐ. สรางเวบและเพมลกเลนดวย HTML & XHTML. กรงเทพฯ : ซคเซส

มเดย, 2550.

สมศกด โชคชยชตกล. Insight PHP ฉบบสมบรณ. กรงเทพฯ : โปรวชน, 2552.

อรพน ประวตบรสทธ. คมอสรางเวบไซตดวย HTML5 CSS3 & JavaScript ฉบบสมบรณ. กรงเทพฯ :

โปรวชน, 2557.

อรพน ประวตบรสทธ. พฒนาเวบแอพบน Smartphone/Tablet ดวย jQuey Mobile. กรงเทพฯ :

โปรวชน, 2557.

โอภาส เอยมสรวงศ. ระบบฐานขอมล Database System. กรงเทพฯ : ซเอดยเคชน, 2551.

GitHub. jQuery-mobile.[ออนไลน]. เขาถงไดจาก : http:// githun.com/. (วนทคนขอมล : 1 กนยายน

2558).

Ninenik. ลกเลน เทคนค PHP Ajax CSS Javascript jQuery MySQL.[ออนไลน]. เขาถงไดจาก :

http:// www.ninenik.com/. (วนทคนขอมล : 1 กนยายน 2558).

Ninenik. เรมตน รจก กอนการใชงาน google map API.[ออนไลน]. เขาถงไดจาก :

http:// www.ninenik.com/. (วนทคนขอมล : 1 กนยายน 2558).

W3School. HTML5 Geolocation.[ออนไลน]. เขาถงไดจาก : http://W3School.com/. (วนทคนขอมล :

1 กนยายน 2558).

Page 24: โครงงาน · 2019. 8. 23. · โครงงาน โดย 1. นายพรชัย พุ มภิญโญ 2. นายสรรค พงศ คําหอม

ภาคผนวก

Page 25: โครงงาน · 2019. 8. 23. · โครงงาน โดย 1. นายพรชัย พุ มภิญโญ 2. นายสรรค พงศ คําหอม

คมอการใชโปรแกรมตวเตอรอาสา

เมอเขาสโปรแกรมโดยพมพ URL www.sa.ac.th/tutor ระบบจะทาการตรวจสอบผใชวามการเขา

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

ระบบ

หนาลงชอเขาสระบบ

ในหนาลงชอเขาสระบบ ผใชสามารถสมครสมาชกใหมหรอลงชอเขาสระบบหากไดทาการสมคร

สมาชกเรยบรอยแลว

ชอผใช ใสเมอสมคร

สมาชกแลว

รหสผาน ใสเมอ

สมครสมาชกแลว

สมครสมาชก เพอเปน

สมาชกแลวสามรถเขาส

ระบบได คมอการใชโปรแกรม

เปนวธใชโปรแกรม

Page 26: โครงงาน · 2019. 8. 23. · โครงงาน โดย 1. นายพรชัย พุ มภิญโญ 2. นายสรรค พงศ คําหอม

หนาสมครสมาชก

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

สมาชกในการเขารวมระบบโปรแกรมตวเตอร

หนาแรก

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

แรกของระบบ

ชอผใชและiหสผาน ไว

สาหรบลอกอนเขาส

ระบบ

ชอ-นามสกล ใสไวเพอให

คนในระบบโปรแกรมรวา

ชออะไร นามปากกา เปนชอแทน

ตวเองไปตดตอกบผอน

ชนเรยนมเพอใหตวเตอรได

รระดบความรของผใช เบอรโทรศพท ไวเพอ

ตดตอกนในขณะทไม

เขาใจดวยการพมพ รปภาพประจาตว

นามปากกาหรอชอผใช

หองสนทนาสาหรบการ

ตวแลกเปลยนเรยนร

รปภาพประจาตว

แทกวชาหลกและเรองยอย

ทถนด ทมไวสาหรบใหผใช

อนไดมาหาความรกบเรา

Page 27: โครงงาน · 2019. 8. 23. · โครงงาน โดย 1. นายพรชัย พุ มภิญโญ 2. นายสรรค พงศ คําหอม

คนหาตวเตอร

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

หมดตวเตอรเพอใหสะดวกในการคนหาตวเตอรทสนใจ

หองตวแลกเปลยนเรยนร

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

สามารถเขามาเรยนรรวมกนได โดยสามารถพมพขอความตวอกษร รวมกบการใชระบบแนบไฟลเอกสาร

รปภาพ คลปเสยง คลปวดโอ เพอใหการสอนมประสทธภาพมากทสด

Page 28: โครงงาน · 2019. 8. 23. · โครงงาน โดย 1. นายพรชัย พุ มภิญโญ 2. นายสรรค พงศ คําหอม

การแนบแผนท

ผใชสามารถแนบแผนทในกรณทอาจจะตองการระบตาแหนงใหผใชอน เชน ระบตาแหนงแหลงสบคน

หรอนดเจอเพอตวตวตอตว พฒนาโดยใชระบบ GPS รวมกบ Google Map

Page 29: โครงงาน · 2019. 8. 23. · โครงงาน โดย 1. นายพรชัย พุ มภิญโญ 2. นายสรรค พงศ คําหอม

การตงคา

ผใชสามารถเขาสการแกไขขอมลสวนตวหรอออกจากระบบ

แกไขขอมลสวนตว

ผใชสามารถแกไขขอมลสวนตวไดตลอดเวลา

Page 30: โครงงาน · 2019. 8. 23. · โครงงาน โดย 1. นายพรชัย พุ มภิญโญ 2. นายสรรค พงศ คําหอม

การแกไขแทก

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

กระดานขาว

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

ทวถง