บทท 1 บทน ำ

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

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

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

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

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

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

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

4. เปำหมำยของโครงกำร 4.1. เปาหมายเชงคณภาพ

แบบประเมนโครงการ เวบแอพลเคชนราน อยในเกณฑดผานรอยละ 80 ของลกคา 10 คน 4.2. เปาหมายเชงปรมาณ

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

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

6. สถำนทด ำเนนกำร หอพกนพเกา 35/1 หมท 7 ต.หนองจอม อ.สนทราย จ.เชยงใหม 50290 วทยาลยเทคโนโลยพายพและบรหารธรกจ กม. ท 4 ถ.เชยงใหม – แมโจ 262 หม 6 ต.หนองจอม อ.สน

ทราย จ.เชยงใหม 50290 รานชาบครคอม 159/8 หม 5 ต.หนองหาร อ.สนทราย จ.เชยงใหม 50290

7. แผนกำรด ำเนนกำร

ตารางท ๑.๑ ตารางแผนการด าเนนการ

กำรด ำเนนกำร

ระยะเวลำปฏบตงำน ตลาคม 2558

พฤศจกายน 2558

ธนวาคม 2558

มกราคม 2559

1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4

1. รวบรวมขอมล

2. ศกษาขอมล

3. จดท าโครงรางน าเสนอ

4. จดท าเวบแอพพลเคชน

5. จดท าเอกสารประกอบ

6. ท าการทดสอบและแกไข

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

8. งบประมำณ

รำยละเอยด คำใชจำย/วสด รำคำตอหนวย

(บำท) จ ำนวน

(หนวย) จ ำนวนเงน

(บำท) 1. กระดาษ A4 2. ไวนล 3. ปรนแผนพบ 4. สนรด 5. กระดาษใส

110 200 25 3

10

1 1 3 3 3

110 200 75 9

30

รวม 424

ตารางท ๑.2 ตารางงบประมาณ

9. กำรตดตำม/กำรประเมนผล 1. ตดตามการใชงานของเวบแอพพลเคชน 2. ท าแบบประเมนผลงาน

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

บทท 2 เอกสำร ทฤษฎ และงำนวจยทเกยวของ

การด าเนนการโครงการเวบแอพพลเคชนรานอาหาร(ชาบครคอม) ณ รานชาบครคอม ระหวางวนท 1 ตลาคม 2558 ถง ๒๙ มกราคม 2559 ผด าเนนโครงการทไดรวบรวม เอกสาร ทฤษฎ และงานวจยทเกยวของมหวขอดงตอไปน 2.1 ความรเกยวกบโครงการทท า 2.2 ทฤษฎทเกยวของ 2.3 ประวตวทยากร/ทปรกษาโครงการ 2.4 ค านยาม 2.๕ ตวอยางผลงาน

2.1 ควำมรเกยวกบโครงกำรทท ำ 2.1.1 ไดเรยนรการใชงานของโปรแกรม 2.1.1.1 โปรแกรม Notepad++ Notepad++ คอโปรแกรม text editor ทดทสด ดวยความสามารถทเทยบเทาและดกวาโปรแกรม Edit plus ททกคนเคยใชมาในอดต ไมวาจะเปนการแกไข source code ซงรองรบ syntax ในรปแบบโปรแกรมไดหลากหลาย หรอแมแตกระทงจะน ามาใชแทนโปรแกรม Notepad แบบธรรมดาในโปรแกรม windows กสามารถท าไดเลย 2.1.1.2 โปรแกรม NetBeans IDE 8.1 NetBeans คอ เครองมอส าหรบโปรแกรมเมอรทจะใชพฒนา Application ดวยภาษา Java NetBeans นนเปนโปรแกรมประเภท Open Source software โดยผใชงานไมจ าเปนทจะตองเสยเงน เพอซอมาใชงาน และยงเปดเผย Source code ใหผสนใจและนกพฒนาน าไปดดแปลง 2.1.1.3 โปรแกรม XAMPP เปนโปรแกรม Apache web server ไวจ าลอง web server เพอไวทดสอบ สครปหรอเวบไซตในเครองของเรา โดยทไมตองเชอมตออนเตอรเนตและไมตองมคาใชจายใดๆ งายตอการตดตงและใชงานโปรแกรม Xampp จะมาพรอมกบ PHP ภาษาส าหรบพฒนาเวบแอพลเคชนทเปนทนยม , MySQL ฐานขอมล, Apache จะท าหนาทเปนเวบ เซรฟเวอร, Perl อกทงยงมาพรอมกบ OpenSSL , phpMyadmin (ระบบบรหารฐานขอมลทพฒนาโดย PHP เพอใชเชอมตอไปยงฐานขอมล สนบสนนฐานขอมล MySQL และ SQLite โปรแกรม Xampp จะอยในรปแบบของไฟล Zip, tar, 7z หรอ exe โปรแกรม Xampp อยภายใตใบอนญาตของ GNU General Public License

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

แลวจงออกมาได โดยมโปรแกรมดงตอไปนในการท างาน

2.2.1 โปรแกรม Notepad++

รปภาพท 2.1 โปรแกรม notepad ++

1. รองรบภาษาเขยนโปรแกรมากมาย ไมวาจะเปน C, C++, HTML, ASP, Java, Pascal, CSS และอนๆ อกมากมาย พรอมการไฮไลท เปลยนสค าสง (Syntax) เมอพมพถก ใหคณไมพลาดการผดพลาดทไมเปนเรอง

2. มระบบชวยเตมค าสงใหถกตองโดยอตโนมต (Auto-Completion) เพอปองกนการลมค าสง หรอการสะกดค าสงทถกตอง

3. เปดไฟลไดไฟลหลายไฟล หลายหนาตางพรอมกน (แสดงเปน Tab เหมอนเวบเบราวเซอร) ซงหลาย โปรแกรม Text-Editor ไมสามารถท าได

4. สามารถคนหาขอความ (Search) เปลยนขอความ (Replace) พรอมกนทกไฟลทเปดอยได

5. สนบสนนการลากแลววาง (Drag-and-Drop) 6. สามารถตงเวลาส ารองขอมล และท า Snapshot ไดอตโนมต 7. สนบสนนการซมเขาออก ขอความ หรอค าสงตางๆ (Zoom In / Zoom Out) 8. มความสามารถในการท างานรวมกบ โปรแกรมฝากไฟลออนไลน Dropbox ใหท าการซงค

ขอมล กนไดแบบเรยลไทม 9. มระบบการตรวจสอบภาษาของโคดอตโนมต

10. มความสามารถในการใหสทธเฉพาะผดแล (Administrator) ในการเซฟบนทกไฟล ทเกยวกบระบบ (System Protection Files) ได ดวยเหตผลดานความปลอดภย

11. มเมน ค าอธบายตางๆ ทมหลากหลายภาษามนษย 12. มระบบการจดจ าค าสงทพมพไปแลว หรอแกไขไป ไดอยางละเอยด ทกค าสง ทก

ตวอกษร 13. สามารถโหลดปลกอนเสรม เพอการใชงานเฉพาะทางไดหลากหลาย พรอมระบบอพเดท

ปลกอนอตโนมต

2.2.2 โปรแกรม NetBeans IDE 8.1

รปภาพท 2.๒ โปรแกรม NetBeans IDE 8.1

1. เปนสวนของแถบเมน และ Tool ตางๆ 2. เปนสวนทแสดงและจดการ Project ตางๆ เหมอนเปนการ Browse ด Project หรอ File ตางๆ 3. เปนสวนทใชในการเขยน Code 4. เปนสวนทใชในการแสดงผลการท างานตาง เมอท าการ Run โปรแกรม และยงมสวนของการ debug โปรแกรมดวย

2.2.3 โปรแกรม XAMPP

รปภาพท 2.๓ โปรแกรม XAMPP

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

2.3 ประวตวทยำกร/ทปรกษำโครงกำร อาจารยวราภรณ วงหาญ จบการศกษาจาก มหาวทยาลยเทคโนโลยราชมงคลลานนา หลกสตรบรหารธรกจบนฑต สาขาวชาสารสนเทศทาวระบบคอมพวเตอร

2.4 ค ำนยำม

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

๒.๔.๒ เวบเซรฟเวอร สามารถมได 2 ความหมาย คอ 1. เครองคอมพวเตอรซงใหบรการเวบไซต ผใชเรยกชมหนาเวบไซตไดโดยใชโพรโทคอล HTTP ผานทางเวบ

เบราวเซอร 2. โปรแกรมคอมพวเตอร ทท างานตามคณสมบตขางตน

๒.๔.๓ Text Editor (เทกซอดเตอร) คอ โปรแกรมทใชส าหรบสรางและแกไขขอความในการสรางเวบเพจดวยภาษา HTML นนตองมเครองมอทใชในการเขยน และแกไขตวอกษรซงเปนค าสงตาง ๆปจจบนม โปรแกรม Text Editor หลายโปรแกรม เชน NotePad, EditPlus หรอโปรแกรม Dreamweaver ซงมคณสมบตเปนทงโปรแกรมส าเรจรปในการสรางเวบเพจดวย ในบทเรยนชดน จะใชโปรแกรม Notepad ในการสรางเวบเพจดวยภาษา HTML

๒.๔.๔ ระบบฐานขอมล คอ ระบบจดเกบขอมลดวยคอมพวเตอรโดยมวตถประสงคเพอบ ารงรกษาขอสนเทศ (Maintain information) และสามารถน าขอสนเทศเหลานนมาใชไดทกเมอทตองการ

2.๕ ตวอยำงผลงำน

รปภาพท 2.๔ หนาลอคอนเวบแอพพลเคชน

รปภาพท 2.๕ หนาเมนอาหาร

รปภาพท 2.๖ เมนหนาราน

รปภาพท 2.๗ ค าสงโตะ ๑

บทท 3 วธกำรด ำเนนงำนโครงกำร

การด าเนนการโครงการเวบแอพพลเคชนรานอาหาร (ชาบครคอม) ณ รานชาบครคอม ระหวางวนท1 พฤศจกายน 2558 ถง 31 มกราคม 2559 ผด าเนนโครงการมวธการด าเนนงานโครงการดงตอไปน 3.1 รปแบบของโครงการ 3.2 ประชากรและกลมตวอยางของโครงการ 3.3 ขนตอนการด าเนนงาน

3.4 การเกบรวบรวมขอมล 3.5 การวเคาระหขอมล

3.1 รปแบบของโครงกำร โครงการเวบแอพพลเคชนรานอาหาร (ชาบครคอม) เปนโครงการประเภทสงประดษฐดานนวตกรรมซอฟตแวรเกยวกบการน าเทคโนโลยมาใชในการประกอบอาชพ

3.2 ประชำกรและกลมตวอยำงของโครงกำร 3.2.1 รานชาบครคอม 159/8 หม 5 ต.หนองหาร อ.สนทราย จ.เชจยงใหม 50290 3.2.2 กลมตวอยาง ลกคา 10 คน ของรานชาบครคอม ต .หนองหาร อ.สนทราย จ.เชจยงใหม 50290

3.3 ขนตอนกำรด ำเนนงำน 3.3.1 ศกษาขอมล

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

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

เมอวนท พฤศจกายน พ.ศ. 2558 โดยทางเรากไดออกแบบบเวบแอพพลเคชนครงแรกมาสวนหนงและการตดตอประสานงานกไดมมาเรอยๆ จนวนท 25 พฤศจกายน พ.ศ. 2558 กไดรางแบบเวบแอพพลเคชนไวในระดบหนงและมขอมลเพยงพอในการเรมท าโครงการ ตอมาวนท 10 ธนวาคม พ.ศ. 2558 กไดเพมขอมลในสวนภายในของเวบแอพพลเคชน และท าการสรางเวบแอพพลเคชนตามแบบทรางไว จนวนท 1 มกราคม พ.ศ. 2559 จนปฏบตงานตงแตนนมา 3.3.1.๒ ศกษาเอกสาร ทฤษฎ และงานวจยทเกยวของโดยหวขอดงตอไปน

1.ความรเกยวกบโครงการทท า 2.ทฤษฎทเกยวของ 3.ประวตวทยากร/ทปรกษาโครงการ 4.งานวจยทเกยวของ

3.3.1.3 ก าหนดปฏทนการปฏบตงานดงน

ตารางท 3.1 ตารางปฏทนการปฏบตงาน

3.3.1.๔ การจดท าเวบแอพพลเคชน ผจดท าไดน าแบบสอบถามไปให กบรานชาบครคอมนนเพอเกบขอมลและน ามา

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

3.3.3 น าเสนอโครงการ ในการน าเสนอเวบแอพพลเคชนรานอาหาร(ชาบครคคอม) จะมการน าเสนออยในสอง

ลกษณะคอ การน าเสนออาจารยภายในแผนกและการน าเสนออาจารยภายนอกแผนก

กำรด ำเนนกำร

ระยะเวลำปฏบตงำน ตลำคม 2558

พฤศจกำยน 2558

ธนวำคม 2558

มกรำคม 2559

1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4

1. รวบรวมขอมล

2. ศกษาขอมล

3. จดท าโครงรางน าเสนอ

4. จดท าเวบแอพพลเคชน

5. จดท าเอกสารประกอบ

6. ท าการทดสอบและแกไข

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

บทท 4 ผลกำรด ำเนนงำนโครงกำร

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

4.1 ผลการด าเนนงานโครงการ/ผลการวเคราะหขอมล 4.2 อภปรายผลการด าเนนงานโครงการ

4.1 ผลกำรด ำเนนงำนโครงกำร/ผลกำรวเครำะหขอมล 4.1.1 เวบแอพพลเคชนใชงานไดสะดวกรวดเรว 4.1.2 สามารถตรวจสอบขอมลยอนหลง 4.1.3 ลดตนทนการใชกระดาษ 4.1.4 ลดขอผดพลาดในการค านวนเงน 4.1.5 งบก าไรขาดทน

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

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

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

รายรบรายจายในแตละวนแลวรวมยอดของรายเดอนได

บทท 5 สรปผลกำรด ำเนนโครงกำรและขอเสนอแนะ

การด าเนนการโครงการเวบแอพพลเคชนรานอาหาร (ชาบครคอม) รานชาบครคอม ระหวางวนท1 พฤศจกายน 2558 ถง 31 มกราคม 2559 ผด าเนนโครงการมสรปผลการด าเนนงานโครงการและขอเสนอแนะ ดงตอไปน

5.1 สรปผลการด าเนนโครงการ 5.2 ขอเสนอแนะ

5.1 สรปผลกำรด ำเนนงำนโครงกำร 5.1.1 วตถประสงคของโครงการ

1. เพอลดความผดพลาดในการคดเงนของแตละโตะ 2. เพอออกบลใหลกคาไดอยางถกตอง 3. เพอลดตนทนในการใชกระดาษ

5.1.2 วธการด าเนนงานโครงการ 1. ขนเตรยมการ 1. พจารณาเลอกโครงการ 2 เขยนเคาโครงรางโครงการเพอเสนอของอนมตโครงการ 3 ก าหนดปฏทนการปฏบตงาน 4 ศกษาเอกสาร ทฤษฎ และงานวจยทเกยวของ 2. ขนด าเนนการ 1. ตดตอประสานงานผทเกยวของ 2. ปฏบตตามปฏทนการปฏบตงาน 3. รายงานความกาวหนาของการปฏบตงาน

5.2 ขอเสนอแนะ 5.2.1 ขอเสนอแนะในการใชงาน

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

บรรณำนกรม หนงสอ

บญชา ปะสละเตสง. (2556). สรางเวบไซตดวย HTML5 รวมกบ CSS3 และ jQuery: บรษท ซเอดยเคชน จ ากด (มหาชน).

เวบไซต

http://www.w3schools.com/. “HTML ภำษำส ำหรบกำรสรำงหนำเวบ”. [ระบบออนไลน] แหลงขอมล. http://www.w3schools.com/tags/default.asp (วนท 5 มกราคม 2559).

http://jquery.com/. “ไลบรำร JavaScript ในกำรพฒนำหนำเวบ” [ระบบออนไลน]

แหลงขอมล. http://api.jquery.com/ (วนท 5 มกราคม 2559).

http://th1.php.net/. “ภำษำกำรเขยนโปรแกรมเวบเซรฟเวอร” [ระบบออนไลน]

แหลงขอมล. http://th1.php.net/manual/en/ (วนท 5 มกราคม 2559).

http://www.w3schools.com/. “CSS ภำษำส ำหรบจดแตงหนำเวบ” [ระบบออนไลน]

แหลงขอมล. http://api.jquery.com/ (วนท 5 มกราคม 2559).