work 1

SS CHEM LAB The Best Project Ever

โครงงานวทิ ยาศาสตร์บูรณาการคอมพวิ เตอร์ การพฒั นาเว็บแอพพลิเคชันสำหรบั การตรวจสอบและจองสารเคมี(SS CHEM LAB) จดั ทำโดย นาย ศภุ วชิ วิบูลสมัย ชั้น ม.6/8 เลขท่ี 5 นาย นพินทพิ ย์ ชชู าติพงษ์ ช้ัน ม.6/8 เลขท่ี 18 ครทู ี่ปรึกษา นาย นครินทร์ สกุ ใส นางสาว อรนิ ยา มานอ้ ย นางสาว ชลธชิ า พดุ จีบ นางสาว ณัฐกฤตา แสนมหาชยั ภา โครงงานนเ้ี ปน็ ส่วนหน่ึงของรายวชิ า ว30291 โครงงานวิทยาศาสตร์ ตามหลกั สตู รหอ้ งเรยี นวทิ ยาศาสตรข์ องสสวท. ภาคเรียนท่ี 1 ปีการศึกษา 2564 โรงเรยี นสามเสนวิทยาลัย

โครงงานวทิ ยาศาสตรบ์ ูรณาการคอมพิวเตอร์ การพฒั นาเว็บแอพพลิเคชันสำหรบั การตรวจสอบและจองสารเคมี(SS CHEM LAB) จดั ทำโดย นาย ศภุ วชิ วิบูลสมัย ชั้น ม.6/8 เลขท่ี 5 นาย นพินทพิ ย์ ชชู าติพงษ์ ช้ัน ม.6/8 เลขท่ี 18 ครทู ่ีปรึกษา นาย นครินทร์ สกุ ใส นางสาว อรนิ ยา มาน้อย นางสาว ชลธชิ า พุดจีบ นางสาว ณัฐกฤตา แสนมหาชัยภา โครงงานนเ้ี ปน็ ส่วนหน่ึงของรายวชิ า ว30291 โครงงานวิทยาศาสตร์ ตามหลกั สตู รหอ้ งเรยี นวทิ ยาศาสตรข์ องสสวท. ภาคเรียนท่ี 1 ปกี ารศึกษา 2564 โรงเรยี นสามเสนวิทยาลัย

บทคดั ย่อ โครงงานการพัฒนาเว็บแอพพลเิ คชันสำหรับการตรวจสอบและจองสารเคมี (SS CHEM LAB) มี จุดประสงค์จดั ทำขึน้ เพอ่ื พัฒนาเว็บแอพพลิเคชนั การจองสารเคมีสำหรับการป้องกนั การสูญหายของสารเคมี และ ความสะดวกสบายในการขอใช้ โดยมเี คร่ืองมือที่ใช้พัฒนา ได้แก่ คอมพิวเตอร์ จำนวน 2 เครื่อง ดำเนนิ การโดยใช้ คอมพวิ เตอรเ์ ป็นเวบ็ เซิร์ฟเวอร์ และ เก็บฐานข้อมลู ด้วยภาษา PHP MySQL ออกแบบ และ พัฒนาต่อดว้ ยภาษา HTML CSS Javascript เพอ่ื การโต้ตอบกนั ระหว่างผูใ้ ช้ และ ผู้ดูแล จะเสถยี รมากขน้ึ สรปุ ผลการดำเนินงาน จากการพัฒนาเว็บแอพพลิเคช่นั การจองสารเคมีผลจากการพฒั นาพบวา่ สามารถใช้งานไดอ้ ยา่ งมี ประสิทธิภาพประกอบด้วย 2 ระบบ ไดแ้ ก่ 1. ระบบผูด้ ูแล ทำหนา้ ท่ี ดูแล และ อนมุ ัติการจองของผูใ้ ชง้ าน 2. ระบบผู้ใช้งาน ทำหน้าที่ จองการใช้สารเคมีตามความประสงค์ ก

กิตติกรรมประกาศ โครงงานนี้สำเรจ็ ลลุ ว่ งไดด้ ว้ ยความกรณุ าจากคุณครนู ครนิ ทร์ สกุ ใส และ คณะครู ทค่ี อยดแู ลการทำงาน และชว่ ยให้คำแนะนำจนสามารถแก้ไขปัญหาของข้อผิดพลาดต่างๆ ท่เี กิดข้นึ มาโดยตลอด จนโครงงานเสร็จ สมบูรณใ์ นทส่ี ุด ขอขอบคุณคุณครูทุกทา่ น ท่ีคอยแนะนำสิ่งดๆี และ ชว่ ยแก้ไขปญั หาต่างๆในระหวา่ งการจัดทำโครงงาน รวมถึงการให้คำปรึกษาในการทำรปู เล่ม ขอขอบคุณแอพพลิเคชัน่ LINE และ Google meet สำหรบั การติดต่อประสานงานระหวา่ งเพ่ือนๆ กบั คุณครผู ู้ใหป้ รึกษาโครงงาน ขอขอบคุณแอพพลิเคช่นั Microsoft Visual Studio สำหรบั การเขียนภาษาคอมพิวเตอร์ตา่ งๆเพื่อใช้ใน การเขียนเวบ็ แอพพลิเคช่ัน สดุ ท้ายน้ีขอขอบคณุ เพ่ือนรว่ มกลุ่มทุกคนที่ช่วยกันจดั ทำโครงงาน และ ชว่ ยเหลอื ซงึ่ กนั และกันมาตลอดจึง ทำใหโ้ ครงงานนี้ประสบความสำเรจ็ ในทีส่ ุด คณะผจู้ ัดทำ นาย ศุภวิช วิบลู สมยั นาย นพินทิพย์ ชชู าตพิ งษ์ ข

สารบญั เรือ่ ง หนา้ บทคดั ย่อ ก กติ ตกิ รรมประกาศ ข สารบัญ ค สารบัญตาราง ง สารบัญรูปภาพ จ บทที่ 1 บทนำ 1 บทท่ี 2 เอกสารทเ่ี กย่ี วข้อง 2 บทท่ี 3 อุปกรณ์ และ วิธีการดำเนนิ การ 12 บทที่ 4 ผลการดำเนนิ งาน 15 บทที่ 5 สรปุ ผลการดำเนนิ งาน 17 เอกสารอ้างอิง 19 ภาคผนวก 20 ค

สารบญั ตาราง เรื่อง หน้า ตารางแสดงผลการดำเนินงาน 15 ง

สารบัญภาพ หน้า 3 เรอ่ื ง 4 รู)ภาพตัวอย่างการทำงานของ webserver 5 รปู ภาพสญั ลักษณข์ อง JavaScript 5 รปู ภาพสญั ลักษณ์ของ HTML 6 รูปภาพสัญลกั ษณข์ อง CSS 7 รูปภาพสัญลกั ษณ์ของ MySQL 8 รูปภาพสัญลกั ษณ์ของ PHP 12 รปู ภาพสัญลกั ษณ์และตัวอย่างการใช้ของ Microsoft Visual Studio 13 รูปภาพการออกแบบ Flow chart 13 รปู ภาพตัวอยา่ งการบนั ทึกฐานขอ้ มูล ใน phpMyAdmin 14 รูปภาพตัวอย่างการออกแบบเว็บแอพพลเิ คชัน่ ด้วย HTML 14 15 รูปภาพตัวอยา่ งการออกแบบเว็บแอพพลิเคชั่นด้วย Javascript 15 รปู ภาพตวั อย่างการออกแบบเวบ็ แอพพลเิ คชั่นด้วย css 16 16 รูปภาพหน้า login 20 รปู ภาพหนา้ register รปู ภาพหนา้ การจอง(สำหรับผู้ใช้) จ รูปภาพหนา้ รับการจอง(สำหรับผู้ดแู ล) รปู ภาพค่มู ือการใช้งาน

บทท่ี 1 บทนำ 1.1 ที่มา และ ความสำคัญ เนื่องจากการสำรวจการใช้งานเกี่ยวกับสารเคมีภายในห้องเก็บสารของโรงเรียนสามเสนวิทยาลัย ไม่มีการ จดั ทำระบบการบันทกึ การใช้งานสารเคมี และ มกี ารเตรียมสารเคมีโดยไม่ไดบ้ นั ทกึ การใช้อย่างเป็นระเบียบ คณะผู้จัดทำเล็งเห็นว่า การเตรียมสารเคมีเป็นส่วนสำคัญในการสอนเกี่ยวกับการทดลองวิชาวิทยศาสตร์ สาขาวิชา เคมี เป็นส่วนมาก นักเรียน และ คุณครูทุกๆท่านรวมถึงผู้ที่มีหน้าที่รับผิดชอบเกี่ยวกับสารเคมี ภายในโรงเรียน ควรมีการดูแลอย่างเป็นระบบ ในการดูแลอย่างเป็นระบบที่เหล่าคณะผู้จัดทำได้จัดทำขึ้นน้นั จะทำให้เกดิ ประโยชนก์ บั คุณครู และ ผดู้ แู ลมากยิง่ ขนึ้ 1.2 จดุ ประสงค์ เพ่ือพัฒนาเว็บแอพพลเิ คชนั่ สำหรับจองสารเคมีท่ีสามารถทำการจองและตรวจสอบไดท้ ุกที่ 1.3 ขอบเขตของการดาํ เนนิ งาน การสร้าง เว็บ แอ็พพลิเคชั่น (Web application) ที่ช่วยในการเตรียม และ คำนวณปริมาณสารเคมีต่างๆ ในหอ้ งเก็บสารประจำ โรงเรยี นสามเสนวทิ ยาลยั ดว้ ย โปรแกรม XAMPP ซงึ่ ทำหน้าท่ี เปน็ web sever และ เขยี น ด้วย Microsoft visual studio code ในการป้อนข้อมูลลงไปในเว็บไซต์ นำเอาข้อมูลต่างๆ มาจากการเก็บ รายช่ือขอ้ มูลสารเคมีท่ีมีอยู่ในห้องเก็บสาร เพ่อื เป็นข้อมูลหลัก จากน้นั ตัว web application จะทำหน้าท่ีเป็นตัว เก็บความถี่ในการใช้งานสารเคมี ด้วยการ ให้คุณครูลงชื่อ เข้าใช้ใน web application และ ตัวเว็บก็จะจดจำว่า คณุ ครใู ชส้ ารตวั ไหนบา้ ง นำมาหาค่าทางสถิติ พอครบกำหนมเวลากจ็ ะแสดงโชวใ์ หเ้ ห็นในรูปกราฟแทง่ 1.4 ประโยชน์ท่คี าดวา่ จะไดร้ บั 1. สามารถเพิม่ ความสะดวกสบาย 2. ตรวจสอบการใช้งานรวมถึงความถใ่ี นการใชส้ าร 1

บทท่ี 2 เอกสารทีเ่ กี่ยวข้อง โครงงานการพัฒนาการจัดระเบียบห้องเก็บสารเคมี ประจำโรงเรียนสามเสนวิทยาลัย หรือ ฟังชั่น การขออนุญาต ใช้สารเคมี กล่มุ ของพวกเราได้ศกึ ษาเก่ียวกับหัวข้อดังต่อไปนี้ ตอนท่ี1 ความหมายของ เวบ็ เซิร์ฟเวอร์ ตอนที่2 ความหมายของ เว็บแอพพลเิ คชนั่ ตอนท่3ี ภาษาเบอื้ งตน้ ตอนที่4 โปรแกรม Microsoft visual studio ตอนท่5ี การพัฒนาเว็บแอพพลเิ คชน่ั ตอนที่ 1 ความหมายของ เว็บ เซิรฟ์ เวอร์ ความหมายของ Web Server คือ ซอฟต์แวร์ และ ฮาร์ดแวร์ ที่ใช้ภาษาโพรโทคอลแบบ HTTP (Hypertext Transfer Protocol) และอื่นๆ ในการตอบสนองและสื่อสารกับเครื่องผู้ใช้ ในเครือข่าย เป็นรูปแบบ แพลตฟอร์ม World Wide Web หน้าที่หลักของเว็บ เซิร์ฟเวอร์ คือแสดงผลข้อมูลและเน้ือหา Website ด้วยการ จัดเก็บ, ประมวลผล และ นำเสนอออกมาแก่ User ในลักษณะ Webpage นอกจาก HTTP แล้ว Webserver ยัง รองรับโพรโทคอลได้หลากหลายรูปแบบ คือ SMTP (Simple Mail Transfer Protocol), FTP (File Transfer Protocol), การใช้งาน Email, การรับส่งไฟล์ และ จัดเก็บข้อมูล ต่างๆ Web Server Hardware จะเชื่อมต่อกับ Internet และทำหน้าที่รับส่ง , แลกเปลี่ยนข้อมูล Data ต่างๆ กับอุปกรณ์อื่นๆ ขณะที่ Web Server Software จะควบคุมการเข้าถึงไฟล์ใน Host ของ User ลักษณะการทำงานนี้คือหนึ่งในวิธีการทำงานแบบ Client/Server Model นนั่ เอง คอมพิวเตอรท์ กุ ๆ เคร่อื ง ที่ทำหนา้ ทเี่ ป็น Host Website ตอ้ งมกี ารติดตง้ั Web Server Software ดว้ ย 2

รู)ภาพตัวอย่างการทำงานของ webserver ตอนที่ 2 ความหมายของ เว็บแอพพลิเคชั่น เป็นโปรแกรมคอมพิวเตอร์หนึ่งที่ทำหน้าที่เฉพาะ โดยใช้เว็บเบราว์เซอร์เป็นไคลเอนต์ ( Client) ซ่ึง ไคลเอนต์นี้เป็นระบบหรือแอปพลิเคชั่น ที่สามารถเชื่อมต่อเข้ากับระบบคอมพิวเตอร์อื่นที่เรียกว่าเซิร์ฟเวอร์ได้ แอปพลิเคชั่นเป็นเหมือนกับกระดานข้อความหรือแบบฟอร์มการติดต่อบนเว็บไซต์ และโปรแกรมประมวลผลคำ เป็นตน้ ในปจั จุบันจงึ มีการพัฒนาเวบ็ แอปพลเิ คชน่ั ควบคู่ไปกบั การพัฒนาโปรแกรม เพอ่ื สอดคลอ้ งต่อการใช้งานใน ปัจจุบัน นอกจากนี้เว็บแอปพลิเคชั่นยังช่วยลดความรับผิดชอบของนักพัฒนาในการสร้างไคลเอนต์สำหรับ คอมพิวเตอร์ประเภทใดประเภทหนึ่ง หรือระบบปฏิบัติการ เพื่อให้ทุกคนสามารถใช้แอปพลิเคชั่นพร้อมเข้าถึง อินเทอร์เน็ตได้ เว็บเเอปพลิเคชั่นมักใช้สคริปต์ทำงานบนฝั่งเซิร์ฟเวอร์ เช่น ASP, PHP เป็นต้น และสคริปต์ฝั่ง ไคลเอ็นต์ เช่น HTML, Javascript เป็นต้น เพื่อพัฒนาแอปพลิเคชั่น ซึ่งทั้ง 2 ฝั่งจะทำหน้าที่แตกต่างกัน อย่าง สคริปต์ฝั่งไคลเอ็นต์จะทำหน้าที่จัดการกับการนำเสนอข้อมูล ในขณะที่สคริปต์ฝั่งเซิร์ฟเวอร์จะจัดการกับพวกการ จดั เก็บขอ้ มูล ขอ้ ดขี อง Web Application คือ ในส่วนของการใช้งานท่สี ามารถใช้งานได้ง่าย สะดวกทุกท่ี ทกุ เวลา ถา้ หากไม่มีเคร่ืองคอมพวิ เตอร์ แตต่ อ้ งการใช้ Web browser (เวบ็ เบราเซอร์) ก็สามารถใช้แอพพลิเคช่นั ประเภทน้ี ได้ รวมถึงมีการอพั เดท แกไ้ ขข้อผิดพลาดต่างๆ อยูต่ ลอดเวลา และใชง้ านไดท้ กุ แพลตฟอร์ม 3

ตอนที่ 3 ภาษาเบอ้ื งต้น ภาษาที่พวกเราทำการศึกษาก็คือ ภาษาจาวาร์สคริปต์ (Javascript) เป็น ภาษาคอมพิวเตอร์สำหรับการ เขียนโปรแกรมบนระบบอินเทอร์เน็ต หรือ เรียกว่า ภาษาสคริปต์เชิงวัตถุ ตัวสคริปต์ใช้ในการสร้าง และ พัฒนา เว็บไซต์ ซึ่งใช้ร่วมกับ HTML เพื่อให้เว็บไซต์ของเราดูมีการเคลื่อนไหว และ สามารถตอบสนองผู้ใช้งานได้มากขึ้น ทำงานโดยการ แปลความและดำเนินงานตามไปทีละคำส่ัง (interpret) หรอื เรยี กว่า อ็อบเจก็ โอเรยี ลเต็ด (Object Oriented Programming) ทีม่ ีเป้าหมายในการ ออกแบบและพฒั นาโปรแกรมในระบบอินเทอร์เนต็ สำหรับผเู้ ขยี น ดว้ ยภาษา HTML สามารถทำงานข้ามแพลตฟอร์มได้ โดยทำงานรว่ มกบั ภาษา HTML และภาษา Java ได้ท้ังทาง ฝ่ังผูใ้ ช้ และ ทางฝงั่ แอดมิน รูปภาพสัญลักษณ์ของ JavaScript ภาษา HTML (Hyper Text Markup Language) เป็นภาษาที่ใช้ในการเขียนโปรแกรมข้อมูล ที่ใช้ แสดงผลบนเครือข่ายอินเตอร์เน็ตในลักษณะของข้อความ รูปภาพ เสียง และภาพเคลื่อนไหว ต่างๆ ภาษา HTML เป็นภาษาที่ง่ายต่อการเรียนรู้ สามารถก าหนดรูปแบบและโครงสร้างได้ง่าย ท าให้ ได้รับความนิยม และมีการ พัฒนาอย่างต่อเนื่องเพ่ือให้ใช้งานง่ายข้ึน และตอบสนองต่องานด้านกราฟิก มากย่งิ ข้ึน และสนับสนุนการแสดงผล ในเวบ็ บราวเซอร์มากมาย และบันทกึ ในรปู ของไฟลน์ ามสกุล htm หรอื html 4

รปู ภาพสัญลักษณข์ อง HTML ภาษา CSS (Cascading Style Sheet) เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML โดยที่ CSS กำหนดกฎเกณฑ์ในการระบุรปู แบบ (หรือ \"Style\") ของเนื้อหาในเอกสาร อันได้แก่ สีของข้อความ สีพื้นหลัง ประเภทตัวอักษร และการจัดวางข้อความ ซึ่งการกำหนดรูปแบบ หรือ Style นี้ใช้หลักการของการแยกเนื้อหา เอกสาร HTML ออกจากคำสั่งที่ใช้ในการจัดรูปแบบการแสดงผล กำหนดให้รูปแบบของการแสดงผลเอกสาร ไม่ ขึ้นอยู่กับเนือ้ หาของเอกสาร เพื่อให้ง่ายต่อการจดั รูปแบบการแสดงผลลัพธ์ของเอกสาร HTML โดยเฉพาะในกรณี ที่มกี ารเปลยี่ นแปลงเนื้อหาเอกสารบ่อยครั้ง หรือต้องการควบคุมใหร้ ปู แบบการแสดงผลเอกสาร HTML มีลักษณะ ของความสม่ำเสมอทั่วกันทุกหน้าเอกสารภายในเว็บไซต์เดียวกัน โดยกฎเกณฑ์ในการกำหนดรูปแบบ (Style) เอกสาร HTML ถูกเพิ่มเข้ามาครั้งแรกใน HTML 4.0 เมื่อปีพ.ศ. 2539 ในรูปแบบของ CSS level 1 Recommendations ทกี่ ำหนดโดย องคก์ ร World Wide Web Consortium หรือ W3C รูปภาพสญั ลักษณข์ อง CSS 5

ภาษา MySQL เป็นโปรแกรมระบบจดั การฐานข้อมลู ที่พัฒนาโดยบริษัท MySQL AB มีหน้าที่เก็บข้อมูล อยา่ งเปน็ ระบบ รองรบั คำสัง่ SQL เป็นเครอื่ งมอื สำหรบั เกบ็ ข้อมลู ที่ตอ้ งใช้รว่ มกับเครื่องมอื หรือโปรแกรมอ่ืนอย่าง บูรณาการ เพ่ือให้ได้ระบบงานทร่ี องรับ ความต้องการของผู้ใช้ เชน่ ทำงานร่วมกับเคร่ืองบริการเว็บ (Web Server) เพื่อให้บริการแก่ภาษาสคริปต์ที่ทำงานฝั่งเครื่องบริการ (Server-Side Script) เช่น ภาษา php ภาษา aps.net หรือภาษาเจเอสพี เป็นต้น หรือทำงานร่วมกับโปรแกรมประยุกต์ (Application Program)สามารถทำงานได้บน ระบบปฏิบัตกิ ารทีห่ ลากหลาย และเป็นระบบฐานข้อมูลโอเพนทซอร์ท (Open Source)ที่ถูกนำไปใชง้ านมากท่สี ุด MySQL จัดเป็นระบบจัดการฐานขอ้ มูลเชงิ สัมพันธ์ (RDBMS : Relational Database Management System) รปู ภาพสัญลกั ษณข์ อง MySQL ภาษา PHP คือภาษาคอมพิวเตอร์จำพวก scripting language ภาษาจำพวกน้ีคำสง่ั ตา่ งๆจะเกบ็ อยใู่ น ไฟลท์ ี่เรยี กว่า script และเวลาใช้งานต้องอาศัยตัวแปรชดุ คำส่งั ตวั อย่างของภาษาสคริปกเ็ ช่น JavaScript , Perl เปน็ ต้น ลกั ษณะของ PHP ท่ีแตกตา่ งจากภาษาสครปิ ต์แบบอ่นื ๆ คือ PHP ได้รับการพฒั นาและออกแบบมา เพือ่ ใช้ งานในการสรา้ งเอกสารแบบ HTML โดยสามารถสอดแทรกหรอื แก้ไขเน้ือหาไดโ้ ดยอัตโนมตั ิ ดงั น้ันจึงกลา่ ววา่ PHP เปน็ ภาษาทเี่ รียกว่า server-side หรือ HTML-embedded scripting language นนั้ คอื ในทุกๆ คร้งั ก่อนทเ่ี ครื่อง คอมพวิ เตอร์ซ่งึ ให้บริการเป็น Web server จะส่งหน้าเวบ็ เพจที่เขยี นดว้ ย PHP ให้เรา มันจะทำการประมวลผล 6

ตามคำสัง่ ที่มีอยู่ใหเ้ สรจ็ เสียก่อน แลว้ จงึ ค่อยส่งผลลพั ธ์ท่ีได้ใหเ้ รา ผลลัพธ์ทไ่ี ดน้ ัน้ ก็คือเว็บเพจทีเ่ ราเหน็ นนั่ เอง ถือ ไดว้ า่ PHP เป็นเครื่องมือทส่ี ำคัญชนดิ หนง่ึ ท่ีช่วยให้เราสามารถสร้าง Dynamic Web pages (เว็บเพจทมี่ ีการ โต้ตอบกับผู้ใช)้ ไดอ้ ยา่ งมปี ระสิทธิภาพและมีลูกเล่นมากข้นึ PHP เปน็ ผลงานทเี่ ตบิ โตมาจากกล่มุ ของนักพัฒนาใน เชิงเปิดเผยรหัสต้นฉบบั หรือ Opensource ดงั นนั้ PHP จงึ มีการพฒั นาไปอย่างรวดเร็ว และแพร่หลายโดยเฉพาะ อยา่ งยงิ่ เมอ่ื ใชร้ ว่ มกบั Apache Web server ระบบปฏิบัติอยา่ งเช่น Linuxหรือ FreeBSD เป็นตน้ ในปจั จบุ นั PHP สามารถใชร้ ว่ มกับ Web Server หลายๆตัวบนระบบปฏบิ ัตกิ ารอย่างเช่น Windows 95/98/NT เป็นตน้ รปู ภาพสัญลักษณข์ อง PHP ตอนท่ี 4 โปรแกรม Microsoft Visual Studio Visual Studio (วิชวลสตูดโิ อ) คือ โปรแกรมตวั หนึง่ ที่เป็นเครอื่ งมือท่ชี ว่ ยพัฒนาซอฟต์แวรแ์ ละระบบ ตา่ งๆ ซึง่ สามารถติดต่อส่ือสารพูดคุยกบั คอมพวิ เตอร์ได้ในระดับหนึ่งแลว้ แต่ยงั ไมส่ ามารถพฒั นาเป็นระบบเองได้ เหมาะสมสำหรับภาษา VB และ VB.NET เนือ่ งจากไมโครซอฟต์ได้พฒั นาโปรแกรมและภาษาขนึ้ มาควบคู่กัน เพ่อื ใหใ้ ช้งานได้ซ่งึ กนั และกนั ซง่ึ นกั โปรแกรมเมอร์จะนำเคร่ืองมือมาใชใ้ นการพัฒนาตอ่ ยอดให้เกิดเปน็ ระบบต่างๆ หรอื เป็นเวบ็ ไซต์ และแอพพลิเคชน่ั ตา่ งๆดงั น้ัน วิชวลสตดู โิ อจึงเป็นโปรแกรมตัวหนึง่ ทเ่ี ป็นเคร่อื งมือทช่ี ่วยพฒั นา ซอฟต์แวร์และระบบต่างๆ ซึ่งโปรแกรมได้มกี ารติดตอ่ ส่ือสารกับคอมพวิ เตอร์ในระดบั หน่ึงแล้ว แต่ไม่สามารถ 7

พฒั นาเปน็ ระบบได้ด้วยตนเอง นักพัฒนาจะนำเครื่องมือของโปรแกรมมาใช้พฒั นาต่อใหเ้ กดิ เปน็ ซอฟต์แวรห์ รอื ระบบต่างๆ เพอ่ื ชว่ ยอำนวยความสะดวก และลดเวลาการทำงานและขอ้ ผดิ พลาดไดเ้ ป็นอย่างมาก รูปภาพสญั ลักษณ์และตวั อยา่ งการใช้ของ Microsoft Visual Studio 8

ตอนท5่ี การพัฒนาเว็บแอพพลเิ คชัน่ 5.1 การวเิ คราะห์ปัญหา - การวิเคราะห์ปัญหา ประกอบด้วยขัน้ ตอนตา่ งๆ ดังน้ี 5.1.1 กำหนดวัตถุประสงคข์ องงาน เพ่ือพจิ ารณาวา่ โปรแกรมต้องทำการประมวลผลอะไรบา้ ง 5.1.2 พิจารณาข้อมลู นำเข้า เพือ่ ให้ทราบว่าจะต้องนำขอ้ มูลอะไรเข้าคอมพวิ เตอร์ ข้อมูลมี คุณสมบตั เิ ป็นอย่างไร ตลอดจนถงึ ลกั ษณะและรูปแบบของขอ้ มลู ท่จี ะนำเขา้ 5.1.3 พจิ ารณาการประมวลผล เพ่อื ใหท้ ราบวา่ โปรแกรมมขี นั้ ตอนการประมวลผลอย่างไรและมเี ง่ือนไป การประมวลผลอะไรบา้ ง 5.1.4 พิจารณาข้อสนเทศนำออก เพอื่ ใหท้ ราบวา่ มีข้อสนเทศอะไรทจี่ ะแสดง ตลอดจนรูปแบบและสื่อที่ จะใชใ้ นการแสดงผล 5.2 การออกแบบโปรแกรม การออกแบบขั้นตอนการทำงานของโปรแกรมเป็นขน้ั ตอนที่ใช้ เป็นแนวทางในการลงรหัสโปรแกรม ผ้อู อกแบบ ขน้ั ตอนการทำงานของโปรแกรมอาจใช้เคร่ืองมือตา่ งๆ ช่วยในการออกแบบ อาทิเชน่ คำสง่ั ลำลอง (Pseudocode) หรอื ผงั งาน (Flow chart) การออกแบบโปรแกรมน้นั ไม่ต้องพะวงกับรูปแบบคำสงั่ ภาษาคอมพิวเตอร์ แตใ่ ห้ม่งุ ความสนใจไปท่ีลำดับขน้ั ตอนในการประมวลผลของโปรแกรมเท่านัน้ 5.3 การเขยี นโปรแกรมด้วยภาษาคอมพิวเตอร์ การเขยี นโปรแกรมเปน็ การนำเอาผลลัพธข์ องการออกแบบโปรแกรม มาเปลย่ี นเปน็ โปรแกรมภาษาคอมพิวเตอร์ ภาษาใดภาษาหนึ่ง ผูเ้ ขยี นโปรแกรมจะต้องให้ความสนใจต่อรูปแบบคำสงั่ และกฎเกณฑข์ องภาษาที่ใช้ เพอ่ื ใหก้ าร 9

ประมวลผลเป็นไปตามผลลัพธท์ ี่ได้ออกแบบไว้ นอกจากนั้นผ้เู ขียนโปรแกรมควรแทรกคำอธิบายการทำงานตา่ งๆ ลงในโปรแกรมเพ่ือใหโ้ ปรแกรมนน้ั มีความกระจ่างชัดและงา่ ยต่อการตรวจสอบและ โปรแกรมนีย้ งั ใช้เปน็ ส่วนหน่งึ ของเอกสารประกอบ 5.4การทดสอบและแกไ้ ขโปรแกรม การทดสอบโปรแกรมเปน็ การนำโปรแกรมทีล่ งรหสั แล้วเขา้ คอมพิวเตอร์ เพอื่ ตรวจสอบรูปแบบกฎเกณฑข์ อง ภาษา และผลการทำงานของโปรแกรมนน้ั ถา้ พบวา่ ยงั ไมถ่ ูกก็แกไ้ ขใหถ้ ูกต้องตอ่ ไป ข้นั ตอนการทดสอบและแก้ไข โปรแกรม อาจแบ่งไดเ้ ปน็ 3 ขนั้ 1. สร้างแฟ้มเก็บโปรแกรมซึ่งสว่ นใหญน่ ิยมนำโปรแกรมเขา้ ผ่านทางแป้นพิมพ์โดยใชโ้ ปรแกรมประมวลคำ 2. ใช้ตวั แปลภาษาคอมพวิ เตอร์แปลโปรแกรมทีส่ ร้างขึน้ เปน็ ภาษาเคร่ือง โดยระหวา่ งการแปลจะมกี าร ตรวจสอบความถูกต้องของรูปแบบและกฎเกณฑ์ในการใชภ้ าษา ถ้าคำสง่ั ใดมีรปู แบบไม่ถูกต้องก็จะแสดง ข้อผดิ พลาดออกมาเพ่ือใหผ้ ู้เขียนนำไป แก้ไขต่อไป ถ้าไม่มีข้อผิดพลาด เราจะได้โปรแกรมภาษาเครือ่ งที่ สามารถให้คอมพิวเตอร์ประมวลผลได้ 3. ตรวจสอบความถูกตอ้ งของการประมวลผลของโปรแกรม โปรแกรมท่ีถกู ต้องตามรูปแบบและกฎเกณฑ์ ของภาษา แต่อาจให้ผลลัพธข์ องการประมวลผลไม่ถกู ต้องก็ได้ ดังน้นั ผ้เู ขียนโปรแกรมจำเป็นต้อง ตรวจสอบว่าโปรแกรมประมวลผลถกู ตอ้ งตามต้อง การหรือไม่ วิธีการหนง่ึ ก็คือ สมมตขิ ้อมูลตัวแทนจาก ข้อมูลจริงนำไปให้โปรแกรมประมวลผลแล้วตรวจสอบผลลพั ธ์ วา่ ถูกตอ้ งหรอื ไม่ ถ้าพบว่าไม่ถูกต้องกต็ ้อง ดำเนนิ การแก้ไขโปรแกรมต่อไป การสมมตขิ ้อมลู ตัวแทนเพื่อการทดสอบเป็นสง่ิ ที่มคี วามสำคัญเป็นอย่าง มาก ลกั ษณะของข้อมูลตัวแทนที่ดคี วรจะสมมติทัง้ ขอ้ มลู ทถี่ ูกต้องและข้อมูลทผ่ี ิด พลาด เพ่อื ทดสอบว่า โปรแกรมที่พัฒนาขึ้นสามารถครอบคลุมการปฏิบตั งิ านในเงื่อนไข ตา่ งๆ ได้ครบถว้ น นอกจากน้อี าจ 10

ตรวจสอบการทำงานของโปรแกรมด้วยการสมมติตวั เองเป็นคอมพวิ เตอร์ที จะประมวลผล แล้วทำตาม คำสัง่ ทลี ะคำส่งั ของโปรแกรมนั้นๆ วิธีการนีอ้ าจทำได้ยากถ้าโปรแกรมมขี นาดใหญ่ หรอื มีการประมวลผล ทซี่ ับซ้อน 5.5การทำเอกสารประกอบโปรแกรม การทำเอกสารประกอบโปรแกรมเปน็ งานท่ีสำคญั ของการพัฒนา โปรแกรม เอกสารประกอบโปรแกรมชว่ ยใหผ้ ใู้ ช้ โปรแกรมเขา้ ใจวัตถุประสงค์ ขอ้ มลู ท่ีจะต้องใชก้ ับโปรแกรม ตลอดจนผลลพั ธ์ทจี่ ะได้จากโปรแกรม การทำ โปรแกรมทุกโปรแกรมจึงควรตอ้ งทำเอกสารกำกับ เพ่ือใช้สำหรบั การอ้างอิงเมอื่ จะใชง้ านโปรแกรมและเม่อื ต้องการแก้ไขปรบั ปรงุ โปรแกรม เอกสารประกอบโปรแกรมท่จี ดั ทำ ควรประกอบด้วยหัวข้อต่อไปนี้ 1. วัตถปุ ระสงค์ 2. ประเภทและชนดิ ของคอมพิวเตอร์และอุปกรณ์ที่ใชใ้ นโปรแกรม 3. วธิ ีการใชโ้ ปรแกรม 4. แนวคดิ เก่ียวกับการออกแบบโปรแกรม 5. รายละเอียดโปรแกรม 6. ขอ้ มลู ตวั แทนทีใ่ ช้ทดสอบ 7. ผลลพั ธ์ของการทดสอบ 11

บทที่ 3 อปุ กรณ์ และ วิธกี ารดำเนินงาน 3.1 วัสดุ และ อุปกรณ์ 1. เครื่องคอมพิวเตอร์ 2. โปรแกรม Visual Studio Code 3. ภาษาทใ่ี ชพ้ ัฒนาโปรแกรม HTML , Javascript , PHP , CSS , MySQL 4. รายชือ่ สารเคมีในห้องปฏบิ ัตกิ ารทางวทิ ยาศาสตร์ 3.2 วิธกี ารจดั ทำโครงงาน 1. การศึกษาวิเคราะหค์ วามต้องการ - จากการสอบถามผดู้ ูแลหอ้ งเก็บสารเคมีประจำโรงเรียนสามเสนวทิ ยาลยั หอ้ งเก็บสารเคมีน้นั ยังไมม่ ี ระบบการจองสารเคมี จึงสอบถามถึงปญั หา และ ดำเนินการนำสมดุ รายชือ่ สารเคมีมาใสฐ่ านขอ้ มลู 2. การออกแบบ(Flow chart) - ออกแบบขั้นตอนการทํางานระบบโดยการเขียน Flowchart ของระบบย่อยที่ตอ้ งการ เพื่อทำความ เข้าใจเกี่ยวกับ เทคโนโลยสี ารสนเทศทเ่ี ราจะทำ รูปภาพการออกแบบ Flow chart 12

3. เกบ็ รวบรวมรายชือ่ สารเคมี หรอื ฐานขอ้ มูล - ทำการสำรวจสารเคมีภายในหอ้ งเกบ็ สารเคมที ั้งหมด ตรวจสอบสถานะของสาร การจดั เรียงลำดับตาม ตัวอักษร และนำมาบันทึกในฐานขอ้ มลู ภาพตวั อยา่ งการบนั ทึกฐานข้อมลู ใน phpMyAdmin 4. การเขียนโปรแกรม - ออกแบบหนา้ เว็บแอพพลเิ คชั่นใหเ้ หมาะสมกับการใช้งาน ด้วยภาษา HTML CSS Javascript MySQL PHP ให้เหมาะสมกับการใช้งาน ภาพตัวอยา่ งการออกแบบเว็บแอพพลิเคช่นั ดว้ ย HTML 13

ภาพตวั อย่างการออกแบบเวบ็ แอพพลเิ คชน่ั ดว้ ย Javascript ภาพตัวอย่างการออกแบบเวบ็ แอพพลเิ คชน่ั ด้วย css 5. ตรวจสอบขอ้ ผดิ พลาดและปรบั ปรงุ แก้ไข - เป็นการตรวจสอบข้อผิดพลาดตา่ งๆ(Bug) เพ่ือความถูกต้องและเสถยี รภาพทด่ี ี 6. จัดทำคมู่ ือการใช้งาน - เปน็ แนวทางให้กับผใู้ ช้ เพือ่ ความสะดวกสบาย 14

บทที่ 4 ผลการทดลอง การจัดทำเวบ็ แอพพลเิ คช่ันการเตรยี มสารเคมี ตามวตั ถุประสงคเ์ พื่อเพ่ิมความสะดวกสบายให้กับผทู้ ี่ ตอ้ งการใช้สารเคมีภายในห้องเกบ็ สารเคมี มีผลการดำเนนิ การดงั น้ี 4.1 ผลการดำเนนิ งาน - สามารถพฒั นาเวบ็ แอพพลิเคชน่ั การจองสารเคมี(เอาวตั ถุประสงค์มา)ไดส้ ำเรจ็ โดยระบบ จะแบ่งเป็นสองสว่ น ส่วนที่หน่งึ สว่ นของผ้ใู ช้ ส่วนทสี่ อง ส่วนของผู้ดูแล โดยผู้ดแู ลจะเปน็ ผู้รับการจองของผู้ใช้ทงั้ หมด ผลของการ ดำเนินงานเปน็ ไปตามท่ีคณะผู้จดั ทำได้วางแผนเอาไว้ สามารถใชง้ านได้อยา่ งมปี ระสทิ ธิภาพตามที่ได้ทำการ วางแผนไว้ หน้าตา่ งการใชง้ าน ผลการดำเนินงาน ตัวอย่างภาพ คำอธิบาย หน้า login มหี น้าท่ี ใส่ชอ่ื ผใู้ ช้และรหัสผ่าน หนา้ register มหี น้าท่ี ลงทะเบยี น 15

หน้าต่างการใชง้ าน ผลการดำเนนิ งาน ตวั อยา่ งภาพ คำอธบิ าย หน้าการจอง มหี นา้ ท่ี จองสารเคมีสำหรับผู้ทตี่ อ้ งการใช้ (สำหรับผใู้ ช)้ หน้ารบั การจอง มหี น้าท่ี รับการจองสารเคมี (สำหรบั ผู้ดูแล) 16

บทที่ 5 สรุปและอภิปรายผลการทดลอง 5.1 สรุปผล - ในการจดั ทำเวบ็ แอพพลเิ คชั่นการจองสารเคม(ี SS CHEM LAB) เพอื่ การป้องกนั การสูญหายของสารเคมี และ ความสะดวกสบายในการขอใช้ พบวา่ สามารถใช้งานได้อย่างมปี ระสิทธิภาพ และ ยงั สามารถพัฒนาเพิ่มตาม ความเหมาะสมของการใชง้ าน เพื่อนำเปน็ เทคโนโลยสี ารสนเทศต่อไปได้ 5.2 อภิปรายผล - จากการพฒั นาเว็บแอพพลิเคชน่ั (SS CHEM LAB) ประสบความสำเร็จโดยมีความสามารถในการ ตรวจเชค็ สารเคมี สถานะการจอง วันท่ีใช้ สามารถเพ่มิ ความสะดวกสบายให้แกผ่ ู้ใชง้ าน และ ผูด้ แู ลได้ สารเคมไี ด้ ตลอดทกุ ครั้งในการใช้งาน และ ยงั สามารถตรวจเชค็ การหมดอายุของสารต่างๆภายในห้องเกบ็ สารเคมีได้ เน่ืองมาจากปฏิบตั ติ ามการพัฒนาโปรแกรม 5 ขัน้ ตอน 1. การวิเคราะห์ปัญหา 2. การออกแบบโปรแกรม 3. การเขยี นโปรแกรมด้วยภาษาคอมพวิ เตอร์ 4. การทดสอบและแก้ไขโปรแกรม 5. การทำเอกสารประกอบโปรแกรม จึงทำใหเ้ กดิ เป็นประโยชน์ในการพัฒนาเปน็ อยา่ งมาก เนื่องจาก การพฒั นาตาม 5 ขน้ั ตอนน้ีจะทำให้การพฒั นา เวบ็ แอพพลเิ คชน่ั ของเราพัฒนาอน่างถูกต้องและเปน็ ระบบ นอกเหนือจากนยี้ ังสามารถตรวจสอบการใช้งานได้ ตลอดท้งั วนั 17

5.3 ข้อเสนอแนะ 1. ควรจดั ทำการแจง้ เตือนการจอง ใหม้ ีลักษณะคลา้ ยๆใบเสรจ็ ท่สี ามารถบอกวนั เวลา สารที่ตอ้ งการจอง ได้ เพื่อสามารถนำมายืนยนั การจองได้อยา่ งถกู ต้อง 2. ควรนำเสนอการใช้งานเปน็ ความถีร่ ปู แผนภูมแิ ท่ง เพ่ือความละเอยี ดในการตรวจสอบการใช้งาน 3. ควรตกแต่งหน้าเว็บไซตเ์ พ่ิมเตมิ เพอื่ ความสวยงาม 18

เอกสารอา้ งองิ - บรษิ ทั เอ็ม.ดี.ซอฟต์ จำกัด. (2556). ทำความรจู้ กั กับ Web Application (เว็บแอพพลิเคช่ัน). สบื คน้ เมื่อ 24 เมษายน. จาก. 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 - Anonymous. (ม.ป.ป.). ขั้นตอนการพัฒนาโปรแกรม. สืบค้นเม่ือ 25 เมษายน. จาก. http://www.bankhai.ac.th/dev_c/step_develop_program.html - Anonymous. (ม.ป.ป.). บทเรยี นภาษาคอมพิวเตอร.์ สืบคน้ เมอ่ื 25 เมษายน. จาก. https://www.mindphp.com/ - MDN WEB DOCS. (2005). HTML Hyper Text Markup Language. สบื คน้ เมอ่ื 26 เมษายน. จาก. HTML: Hyper Text Markup Language | MDN (mozilla.org). - MDN WEB DOCS. (2005). CSS Cascading Style Sheets. สบื คน้ เม่อื 26 เมษายน. จาก. CSS: Cascading Style Sheets | MDN (mozilla.org) - MDN WEB DOCS. (2005). JavaScript. สบื คน้ เมอื่ 26 เมษายน. จาก. JavaScript | MDN (mozilla.org) - STARTBOOTRAP. WEB PAGE DESIGN. สืบคน้ 21 กรกฏาคม 2564, จาก. https://startbootstrap.com/theme/sb-admin-2. 19

ภาคผนวก ค่มู ือการใชง้ าน เมนทู ่ี 1 การลงทะเบยี น 1) กด create an account ในหนา้ เขา้ สู่ระบบ 2) กรอกขอ้ มลู สว่ นตัว นาย พิชยั ชติ ชอบคดิ แคท [email protected] xxxxxxxxx xxxxxxxxx 20

3) กดยืนยนั นาย พชิ ยั ชติ ชอบคิดแคท [email protected] xxxxxxxxx xxxxxxxxx เมนทู ่ี 2 การเข้าสรู่ ะบบ 1) กรอก username และ password ลงไปในช่องว่าง [email protected] xxxxxxxxx 2) กดเขา้ สู่ระบบ 21

เมนูที่ 3 หนา้ การจองสารเคมี(สำหรบั ผ้ใู ช้) 1) เลอื กสารเคมที ่ตี ้องการใช้ พร้อมกรอกข้อมณู ปริมาณต่างๆ เลอื กสารเคมที ตี่ อ้ งการ ใส่ปริมาณที่ตอ้ งการ วนั //เดอื น//ปี เลอื กคาบเรียน 1-10 2) กดบนั ทึกข้อมูล เลอื กสารเคมที ต่ี อ้ งการ ใส่ปริมาณที่ตอ้ งการ วนั //เดือน//ปี เลอื กคาบเรยี น 1-10 22

เมนทู ี่ 4 หนา้ การรบั จอง(สำหรบั ผดู้ แู ล) 1) รอคำส่งั การจอง 2) กดยนื ยันการจอง กดรบั อนมุ ตั ิ 23