Insert แล ว ส งค ากล บมาย ง ฟอร ม

130

เอกสารอา้ งอิง

บัญชา ปะสีละเตสัง. (2557). พัฒนาเว็บแอพลิเคช่ันด้วย PHP ร่วมกับ MySQL และ jQuery. กรงุ เทพฯ:ซีเอด็ ยเู คชั่น.

อนรรฆนงค์ คุณมณี. (2555). พัฒนา Web App แบบมืออาชีพด้วย PHP+AJAXและ jQuery. นทบรุ ี :ไอดซี ีพรีเมียร์จากัด.

แผนบรหิ ารการสอนประจาบทท่ี 6

หัวข้อเนือ้ หา

1. หลักการออกแบบเวบ็ ไซต์ทดี่ ี 2. การออกแบบเว็บไซต์แบบ Responsive 3. การทางานกบั Bootstrap 4. การใช้งาน Grid ใน Bootstrap

วัตถุประสงคเ์ ชิงพฤตกิ รรม

เมือ่ นักศกึ ษาเรียนบทเรียนนี้แลว้ สามารถ 1. ช้ีแจงการหลักการออกแบบเว็บไซตท์ ี่ดี 2. ชี้แจงการออกแบบเว็บไซตแ์ บบ Responsive 3. บอกวิธกี ารใชง้ าน Bootstrap 4. ช้แี จงการดาวนโ์ หลดและติดตั้ง Bootstrap 5. บอกวิธีการการทางานของ CSS ใน Bootstrap 6. อธบิ ายการใชก้ ารใช้งาน Grid ใน Bootstrap 7. ประยกุ ต์สรา้ งเวบ็ ไซต์ดว้ ยการใช้ Bootstrap

วธิ ีสอนและกิจกรรมการเรยี นการสอน

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

คอมพวิ เตอร์ที่เกีย่ วขอ้ ง

132

สื่อการเรียนการสอน

1. เอกสารประกอบการเรียนการสอนรายวิชาการเขียนโปรแกรมบนเว็บบทท่ี 6 2. Power point ประกอบเน้อื หาบทท่ี 6 3. โปรแกรม Appserv 4. โปรแกรม Notepad++ 5. โปรแกรม Bootstrap Framework

6. สอ่ื อเิ ลก็ ทรอนิกสจ์ ากเว็บไซต์ท่เี กย่ี วข้อง

การวัดและประเมนิ ผล

1. พิจารณาจากความสนใจเรียน และการมสี ว่ นร่วมในการซักถามภายในชน้ั เรียน 2. พิจารณาจากการฝึกปฏบิ ตั งิ านทไี่ ดร้ บั มอบหมาย 3. พจิ ารณาจากการรว่ มสรปุ ประเด็นสาคัญ 4. พิจารณาจากผลการทาแบบฝึกหัดประจาบท 5. พิจารณาจากผลการทาโครงงานการออกแบบเว็บไซต์ 6. พจิ ารณาจากพฤตกิ รรมในการเรียน

บทท่ี 6 การออกแบบเวบ็ ไซตแ์ บบ Responsive โดยใช้ Bootstrap

การออกแบบเว็บไซต์ ทส่ี วยงาม มกี ารใชง้ านท่ีสะดวก ย่อมไดร้ บั ความสนใจจากผใู้ ช้ มากกวา่ เว็บไซต์ท่ีมีการใช้งานท่ีซับซ้อน มีข้อมูลจานวนมากแต่หาข้อมูลที่ต้องการลาบาก รวมถึงเวลาที่ใช้ใน การแสดงผลเป็นผลท่ีเกิดจากการออกแบบเว็บไซต์ท้ังส้ิน ดังนั้นการออกแบบเว็บไซต์จึงเป็น กระบวนการสาคัญในการสร้างเว็บไซต์ เพื่อให้ผู้เย่ียมชมเว็บไซต์อยากกลับเข้ามาเว็บไซต์เดิมอีกใน อนาคต หลักสาคัญในการออกแบบหน้าเว็บนอกจากเร่ืองของความสวยงาม ความสะดวกในการใช้ งาน คุณภาพของเนื้อหาและความเหมาะสมแล้ว ส่ิงที่สาคัญอีกประการหนึ่งก็คือ การใช้งานอย่างไม่ จากัด หมายถึงการท่ีผู้ใช้สามารถใช้งานได้โดยไม่จากัดอุปกรณ์ ไม่จากัดระบบปฏิบัติการ รวมถึงไม่ จากัดบราวเซอร์ในการแสดงผล ซึ่งการที่เว็บไซต์จะสามารถใช้งานได้อย่างไมจ่ ากดั นเี้ ป็นเร่ืองของการ ออกแบบเว็บไซต์ในลักษณะท่ีเรียกว่า Responsive Design เป็นแนวคิดการออกแบบท่ีเรียกว่า One Size Fit All คือ ออกแบบเพียงคร้ังเดียว แต่สามารถใช้ได้กับทุกขนาดของหน้าจอ โดยเว็บไซต์จะ สามารถตรวจจับขนาดของหน้าจอ และปรับขนาด และ Layout ให้เหมาะสม ตามขนาดของหน้าจอ โดยอัตโนมัติ โดยอาศัยการทางานร่วมกันระหว่างเทคโนต่างๆ ดังต่อไปน้ี คือ Layout ของเว็บแบบ Flexible Grid, รูปภาพแบบ Flexible Image และ CSS3 Media Query สาหรับในบทเรียนนี้เป็น การศึกษาการใช้งาน Bootstrap Framework ซ่ึงเป็น Front-end framework ที่ใช้สาหรับ พัฒนา เว็บไซต์ส่วนการแสดงผลทีร่ องรับการการออกแบบในลักษณะของ Responsive Design

หลักการออกแบบเว็บไซตท์ ี่ดี

การออกแบบเว็บไซต์ เปน็ กระบวนการสาคญั ในการสร้างเว็บไซตผ์ ้ใู ชง้ านประทับใจ อยาก กลับเขา้ เย่ียมชมเว็บไซต์อกี ในอนาคต นอกจากตอ้ งพัฒนาเว็บไซต์ทดี่ มี ปี ระโยชนแ์ ล้วยงั ต้องคานึงถงึ หลักการในการออกแบบที่ดี โดยมหี ลักการดังน้ี (Collis Ta'eed, 2007)

1. ความเรียบง่าย (Simplicity) หมายถึง การจากัดองค์ประกอบเสริมให้เหลือเฉพาะ องค์ประกอบหลัก กลา่ วคือในการส่อื สารเน้ือหากับผใู้ ชน้ ้ัน เราตอ้ งเลือกเสนอสิง่ ทเ่ี ราตอ้ งการนาเสนอ จริง ๆ ออกมาในส่วนของกราฟิก สีสัน ตัวอักษรและภาพเคลื่อนไหว ต้องเลือกให้พอเหมาะ หากมาก เกนิ ไปอาจสรา้ งความราคาญได้

2. ความสม่าเสมอ (Consistency) หมายถึง การสร้างความสม่าเสมอให้เกิดข้ึนตลอดทั้ง เว็บไซต์ โดยอาจเลือกใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ก็ได้ เพราะถ้าหากว่าแต่ละหน้าในเว็บไซต์ น้ันมีความแตกต่างกันมากจนเกินไป อาจทาให้ผู้ใช้เกิดความสับสนและไม่แน่ใจว่ากาลังอยู่ในเว็บไซต์ เดมิ หรอื ไม่

3. ความเป็นเอกลักษณ์ (Identity) ในการออกแบบเว็บไซต์ต้องคานึงถึงลักษณะขององค์กร เปน็ หลกั เน่ืองจากเวบ็ ไซตจ์ ะสะท้อนถึงเอกลักษณ์และลักษณะขององค์กร การเลอื กใชต้ วั อักษร ชุดสี รูปภาพหรือกราฟิก จะมีผลต่อรูปแบบของเว็บไซต์เป็นอย่างมาก ตัวอย่างเช่น ถ้าเราต้องออกแบบ เวบ็ ไซตข์ องธนาคารแต่เรากลบั เลอื กสสี นั และกราฟิกมาก ทาให้องคก์ รไมน่ า่ เช่ือถือ

4. เนือ้ หา (Useful Content) ถอื เป็นส่งิ สาคัญท่ีสดุ ในเวบ็ ไซต์ เนื้อหาในเว็บไซต์ตอ้ งสมบูรณ์ และไดร้ บั การปรบั ปรงุ พัฒนาให้ทนั สมัยอย่เู สมอ ผู้พัฒนาต้องเตรยี มข้อมลู และเนอ้ื หาทีผ่ ูใ้ ชต้ อ้ งการให้

134

ถูกต้องและสมบูรณ์ เน้ือหาที่สาคัญที่สุดคือเน้ือหาที่ทีมผู้พัฒนาสร้างสรรค์ขึ้นมาเอง และไม่ไปซ้ากับ เวบ็ อนื่ เพราะจะถือเปน็ สิ่งท่ีดึงดูดผู้ใชใ้ ห้เขา้ มาเว็บไซต์ไดเ้ สมอ

5. ระบบเนวิเกช่ัน (User-Friendly Navigation) เป็นส่วนประกอบที่มีความสาคัญต่อ เว็บไซต์มาก เพราะจะชว่ ยไมใ่ ห้ผู้ใช้เกิดความสับสนระหว่างดเู วบ็ ไซต์ ระบบเนวิเกชนั่ จึงเปรียบเสมือน ป้ายบอกทาง ดังนั้นการออกแบบเนวิเกช่ัน จึงควรให้เข้าใจง่าย ใช้งานได้สะดวก ถ้ามีการใช้กราฟิกก็ ควรสื่อความหมาย ตาแหน่งของการวางเนวิเกช่ันก็ควรวางให้สม่าเสมอ เช่น อยู่ตาแหน่งบนสุดของ ทุกหน้าเป็นต้น ซึ่งถ้าจะให้ดีเม่ือมีเนวิเกชั่นท่ีเป็นกราฟิกก็ควรเพ่ิมระบบเนวิเกช่ันท่ีเป็นตัวอักษรไว้ ส่วนล่างด้วย เพ่ือช่วยอานวยความสะดวกให้กับผู้ใช้ที่ยกเลิกการแสดงผลภาพกราฟิกบนเว็บเบรา เซอร์

6. คุณภาพของสิ่งท่ีปรากฏให้เห็นในเว็บไซต์ (Visual Appeal) ลักษณะที่น่าสนใจของ เว็บไซต์น้ัน ข้ึนอยู่กับความชอบส่วนบุคคลเป็นสาคัญ แต่โดยรวมแล้วก็สามารถสรุปได้ว่าเว็บไซต์ที่ น่าสนใจน้ันสว่ นประกอบต่าง ๆ ควรมีคุณภาพ เช่น กราฟิกควรสมบูรณ์ไม่มีรอยหรือขอบขั้นบันได้ให้ เหน็ ชนดิ ตวั อกั ษรอ่านง่ายสบายตา มกี ารเลือกใชโ้ ทนสีท่ีเขา้ กันอยา่ งสวยงาม เปน็ ตน้

7. ความสะดวกของการใช้ในสภาพต่าง ๆ (Compatibility) การใช้งานของเว็บไซต์ ต้อง สามารถใช้งานได้ดีในสภาพแวดล้อมที่หลากหลาย ไม่มีการบังคับให้ผู้ใช้ต้องติดต้ังโปรแกรมอื่นใด เพ่ิมเติม นอกเหนือจากเว็บบราวเซอร์ ควรเป็นเว็บท่ีแสดงผลได้ดีในทุกระบบปฏิบัติการ สามารถ แสดงผลได้ในทุกความละเอียดหน้าจอ ซึ่งหากเป็นเว็บไซต์ท่ีมีผู้ใช้บริการมากและกลุ่มเป้าหมาย หลากหลายควรให้ความสาคัญกบั เรื่องน้ใี หม้ าก

8. ความคงท่ีในการออกแบบ (Design Stability) ถ้าต้องการให้ผู้ใช้งานรู้สึกว่าเว็บไซต์มี คุณภาพ ถูกต้อง และเช่ือถือได้ ควรให้ความสาคัญกับการออกแบบเว็บไซต์เป็นอย่างมาก ต้อง ออกแบบวางแผนและเรียบเรียงเนื้อหาอย่างรอบคอบ ถ้าเว็บที่จัดทาขึ้นอย่างไม่มีมาตรฐานการ ออกแบบและระบบการจัดการข้อมูล ถ้ามีปัญหามากข้ึนอาจส่งผลให้เกิดปัญหาและทาให้ผู้ใช้หมด ความเช่อื ถือ

9. ความคงที่ของการทางาน (Function Stability) ระบบการทางานต่าง ๆ ในเวบ็ ไซต์ควรมี ความถูกต้องแน่นอน ซ่ึงต้องได้รับการออกแบบสร้างสรรค์และตรวจสอบอยู่เสมอ ตัวอย่างเช่น ลิงค์ ต่าง ๆ ในเว็บไซต์ ต้องตรวจสอบวา่ ยังสามารถลิงค์ข้อมูลได้ถูกต้องหรอื ไม่เพราะเว็บไซต์อ่ืนอาจมีการ เปลยี่ นแปลงไดต้ ลอดเวลา

การออกแบบเว็บไซตแ์ บบ Responsive

สถิต เรียนพิศ (2556, 30-32) กล่าวว่า ในการออกแบบเว็บไซตใ์ นปจั จบุ นั น้ี เราตอ้ งคานึงถึง การใช้งานกบั อุปกรณ์ท่ีหลากหลาย ไมว่ า่ จะเป็นการใช้งานทัว่ ไปบนเคร่ืองเดสท็อป (Desktop) การใช้ งานบนมือถือ หรือ สมาร์ทโฟน(Smartphone) และการใช้งานบนแท็บเล็ต (Tablet) Bootstrap ได้ เตรียมเครื่องมือในการทาResponsive มาให้เราได้เลือกใช้งาน ช่วยให้การออกแบบเว็บไซตท์ าไดง้ ่าย ย่ิงข้ึน ลักษณะการทางานของคลาส Responsive น้ันจะใช้หลักการ แสดง (Visible) และ ซ่อน (Hidden) โดยเราสามารถเลือกที่จะแสดงหรือซ่อนวัตถุต่างๆ บนหน้าเว็บเพจได้เม่ือมีการแสดงใน หน้าจอท่ีแตกต่างกัน เช่น คอลัมน์ของตาราง เม่ือแสดงในหน้าเว็บเพจท่ัวไป ก็ให้แสดงทุกคอลัมน์แต่ เม่ือแสดงบนหน้าจอมือถือ ก็ให้แสดงเฉพาะคอลัมน์ท่ีสาคัญ หรือไม่ว่าจะเป็น รูปภาพ ข้อความ เราก็ สามารถจะทาให้มันแสดงหรือซ่อนได้ตามท่ีเราต้องการ เม่ือมีการใช้งานในอุปกรณ์ท่ีมีความแตกต่าง

135

ของหน้าจอแสดงผล วิธีการใช้งานจะทาได้โดยการใช้คลาส .visible-* หรือ .hidden-* ในการแสดง หรอื ซอ่ นวัตถุในเว็บเพจ ซึ่งมรี ายละเอียด ดงั นี้

ภาพท่ี 6.1 การแสดงลักษณะการทางานของคลาส Responsive Responsive ที่มา: https://www.w3schools.com/bootstrap/bootstrap_ref_css_helpers.asp

หากต้องการใช้กับอุปกรณ์ท่ีมีขนาดหน้าจอเล็ก เช่น บนโทรศัพท์มือถือ ที่มีขนาดหน้าจอไม่ เกิน 768px ก็ให้เพ่ิมคลาส

1. .visible-xs จะไม่แสดงในหน้าจอท่ีมีขนาดมากกว่าน้ีจะแสดงเฉพาะบนหน้าจอขนาด น้อยกวา่ 768px เทา่ นน้ั

2. .visible-sm จะแสดงเฉพาะบนหน้าจอที่มีขนาดมากกว่าหรือเท่ากับ 768px ข้ึนไป แต่ ไม่เกิน 992px เทา่ นัน้

3. .visible-md จะแสดงเฉพาะบนหนา้ จอท่ีมีขนาดมากกว่าหรอื เท่ากับ 992px ขึ้นไป แต่ ไม่เกนิ 1200px เทา่ นั้น

4. .visible-lg จะแสดงเฉพาะบนหน้าจอที่มีขนาดมากกว่าหรือเท่ากับ 1200px ข้ึนไป เท่านนั้

5. .hidden-xs จะซอ่ นวัตถเุ มอ่ื ขนาดหน้าจอนอ้ ยกวา่ หรอื เท่ากบั 768px 6. .hidden-sm จะซ่อนวัตถุเมื่อขนาดหน้าจอมากกว่าหรือเท่ากับ 768px แต่ไม่เกิน 992px 7. .hidden-md จะซ่อนวัตถุเม่ือขนาดหน้าจอมากกว่าหรือเท่ากับ 992px ข้ึนไป แต่ไม่ เกิน 1200px 8. .hidden-lg จะซ่อนวตั ถเุ มือ่ มขี นาดหนา้ จอมากกว่าหรือเท่ากับ 1200px

136

การทางานกับ Bootstrap

Bootstrap เป็นเครื่องมือที่ช่วยให้เราสามารถพัฒนาเว็บแอพลิเคชันได้อย่างรวดเร็วและดู สวยงาม UI (User Interface) นั้นถูกออกแบบมาเพื่อให้ทนั สมัยตลอดเวลา สามารถนาไปใช้ไดก้ ับเว็บ ทัว่ ไปและเวบ็ สาหรบั มอื ถือ (โดยใช้ Responsive utilities) ในการเรียนรู้ Bootstrap น้ันง่ายมาก เรา ไม่จาเป็นต้องเก่ง CSS ก็สามารถสร้างเว็บท่ีสวยงามได้ไม่ว่าจะเป็นปุ่ม (Buttons) สีต่างๆ ฟอร์ม คอนโทรลต่างๆ, ตาราง, ไอคอน, เมนูบาร์, Dropdown, เมนู, หน้าต่าง Popup (Modal) และ อีก หลายๆ รายการท่พี ร้อมให้เราเลอื กใชง้ าน (สถิต เรียนพิศ,2556, 1)

สถิต เรียนพิศ (2556, 1-3) กล่าวว่า การดาวน์โหลด Bootstrap มาใช้งานนั้นเราสามารถ ดาวน์โหลดได้จากเว็บไซต์ www.getbootstrap.com หรือดาวน์โหลด Source code ได้ท่ี https://github.com/twbs/bootstrap ซึ่งใน ไฟล์ท่ี ดาวน์โหลดมาจะมีคู่มือ, ไฟล์ Bootstrap และ ไฟลต์ วั อย่าง

หลังจากที่เราทาการดาวน์โหลดไฟล์มาแล้ว ให้ทาการแตก zip ไฟล์ออกมาจะได้โครงสร้าง ไฟลด์ ังนี้

ภาพที่ 6.2 โครงสร้างไฟลข์ อง Bootstrap

โครงสรา้ งไฟลข์ อง Bootstrap ประกอบด้วย - โฟล์เดอร์ css เป็นโฟลเ์ ดอร์สาหรบั เกบ็ ไฟล์ CSS ท่ีใช้กาหนด Layout และ Theme ของ หนา้ เวบ็ โดยในโฟลเดอร์นจี้ ะมไี ฟล์ .min ซ่งึ เป็นไฟล์ CSS ที่ผ่านการคอมไพล์แลว้ ทาให้มขี นาดเลก็ ลง - โฟล์เดอร์ js เปน็ โฟล์เดอรส์ าหรับเก็บไฟล์ JavaScript เพมิ่ ลูกเล่นใหก้ บั เว็บเพจ - โฟล์เดอร์ fonts เป็นโฟล์เดอร์สาหรับเก็บฟอนต์ต่างๆ ท่ีใช้ในการแสดงผลข้อความบน หน้าเว็บ จากนั้นใช้คาสั่ง <link> เพ่ือเรียกใช้ไฟล์ CSS และ JavaScript ของ Bootstrap ในส่วนหัว คอื แทก็ <head> ของไฟล์ <html> ดังนี้

</head>

137

ไฟล์.min นั้นเป็นไฟล์ท่ีมีการคอมไพล์แล้วทาให้มีขนาดเล็กลงเหมาะสาหรับนามาใช้งานจรงิ แต่หากเราต้องการทดสอบโปรแกรมในขณะท่ีกาลงั พัฒนาอยู่น้ันแนะนาให้ใช้ไฟล์ท่ีไม่มี.minเน่ืองจาก Bootstrap น้นั ใชโ้ ครงสรา้ งของเอกสารเป็น HTML5 ซึ่งมีรปู แบบเอกสาร ดงั น้ี โครงสร้างเทมเพลต

<html> <head> <title>Bootstrap Template</title> <meta name="viewport" content="width=device-width, initial- scale=1.0"> <! Bootstrap > <link href="css/bootstrap.min.css" 9 rel="stylesheet" media=“screen"> <script src="//code.jquery.com/jquery.js"> </script> <script src=“bootstrap.min.js"></script> <![if lt IE 9]> <script src="html5shiv.js"></script> <script src="respond.min.js"></script> <![endif]> </head> <body> <h1>Content</h1> </body> </html>

เน่ืองจาก Bootstrap ใช้jQuery เป็นไลบรารีหลักในการทางาน ดังนั้นเราต้องมีการแทรก ไฟล์ของ jQuery เข้าไปด้วย โดยแทรกก่อนไฟล์bootstrap.js หรือ bootstrap.min.js ซึ่ง jQuery น้นั ควรเป็นเวอร์ชนั 1.7 ขึ้นไป

การทางานของ CSS ใน Bootstrap การทางานของ CSS ใน Bootstrap สถิต เรียนพิศ (2556, 6-7) กล่าวว่า ในส่วนของ CSS

หรอื Style Sheet นน้ั Bootstrap ไดเ้ ตรยี มคลาส (Class) ไวส้ าหรับการปรับแตง่ คอนโทรลและแท็ก ต่างๆ ของเอกสาร HTML ช่วยให้เว็บดูสวยงาม และมีลูกเล่นเยอะข้ึน นอกจากนั้นยังมีระบบ Gird ท่ี ช่วยในการจัดเลย์เอาท์(Layout) ของเอกสารโดยที่เราไม่จาเป็นต้องใช้ตารางในการจัดวางคอนโทรล ต่างๆ สาหรับ Bootstrap นั้นสามารถรองรับการทางานทั้งในมือถือและบนพีซีทั่วไป ในเวอร์ชันน้ี (3.0) มกี ารใชค้ าว่า “Mobile first” เปน็ คาทใ่ี ชบ้ อกถงึ วัตถุประสงคห์ ลักของ Bootstrap ซ่งึ ก็คอื เน้น การทางานบนมือถือเป็นหลัก (แต่โดยรวมแล้วเท่าที่ผู้เขียนใช้งานมาน้ันสามารถทางานได้ดีท้ังบนมือ ถอื และบนพีซีทั่วไป) เมือ่ เราต้องการพัฒนาเว็บแอพลิเคชันบนมือถือหรือพีซีท่ีมหี น้าจอขนาดเล็ก ตอ้ ง มกี ารหนดค่า meta แทก็ ในส่วนของ <head> เพือ่ ให้สามารถรองรบั การทางานกับหนา้ จอขนาดเล็ก โดยกาหนดดังน้ี

การกาหนดค่า Responsive

138

สาหรบั รูปภาพนัน้ ใหใ้ สค่ ลาส img-responsive เขา้ ไปในแท็กของ <img> ดงั นี้ การ กาหนดค่ารปู ภาพรองรับหนา้ จอหลายขนาด

การใช้งาน Grid ใน Bootstrap

สถิต เรียนพิศ (2556, 6-7) กล่าวว่า Grid เป็นเคร่ืองมือท่ีช่วยให้เราสามารถออกแบบเลย์

เอาท์เอกสาร HTML ไดด้ ีเหมือนกับการใชแ้ ท็ก table แต่ความเรว็ ในการโหลดเอกสารนนั้ การใช้ div

จะช่วยให้โหลดเอกสารได้เร็วขึ้น นอกจากน้ันยังช่วยให้เราสามารถออกแบบเลย์เอาท์สาหรับมือถือ

และบนพีซีได้พร้อมๆ กัน หรือที่เราเรียกว่า Responsive Web Design (RWD) ซ่ึงจะช่วยลด

ระยะเวลาในการพัฒนาได้มากข้ึน ระบบ Grid ของ Bootstrap น้ันจะแบ่งหน้าจอออกเป็น 12

คอลัมน์โดยสามารถกาหนดค่าให้สามารถใช้ได้ทั้งมือถือแท็บเล็ต หรือพีซีท่ัวไป โดยคลาสกาหนดค่า

ความกวา้ งของคอลมั นด์ งั นี้

ตารางที่ 6.1 แสดงความกวา้ งของหนา้ จอในอปุ กรณ์แตล่ ะตัว

รายการ มือถือ แทบ็ เล็ต ทัว่ ไป ขนาดใหญ่

ขนาด <768px >=768px >=992px >=1200px

พื้นที่ใชง้ าน อัตโนมัติ 750px 790px 1170px

ช่ือคลาส .col-xs-* .col-sm-* .col-md-* .col-lg-*

ตัวอย่างท่ี 6.1 การแบง่ Grid

line 1: <div class="row"> line 2: <div class="col-md-1">.col-md-1</div> line 3: <div class="col-md-1">.col-md-1</div> line 4: <div class="col-md-1">.col-md-1</div> line 5: <div class="col-md-1">.col-md-1</div> line 6: <div class="col-md-1">.col-md-1</div> line 7: <div class="col-md-1">.col-md-1</div> line 8: <div class="col-md-1">.col-md-1</div> line 9: <div class="col-md-1">.col-md-1</div> line 10: <div class="col-md-1">.col-md-1</div> line 11: <div class="col-md-1">.col-md-1</div> line 12: <div class="col-md-1">.col-md-1</div> line 13: <div class="col-md-1">.col-md-1</div> line 14: </div>

ผลการทางานเป็นดงั นี้

ภาพที่ 6.3 ผลลัพธก์ ารทางานของการ แบง่ Grid

139

จากตัวอย่างท่ี 6.1 เราแบ่งคอลัมน์ออกเป็น 12 คอลัมน์โดยการใช้คลาส .col-md-1 คลาส col-sm-,col-md- และ col-lg- น้ันเมื่อมีคอลัมน์เดียวจะมีขนาด 12 คอลัมน์เราสามารถผสาน คอลัมน์ต่างๆเข้าดว้ ยกันเพอ่ื ใหไ้ ด้เลยเ์ อาทต์ ามที่เราต้องการไดด้ งั ตัวอยา่ ง ตัวอยา่ งท่ี 6.2 การใช้ Grid ขนาดความกว้างของคอลมั น์เท่ากับ 12

line 1: <div class="row"> line 2: <div class="col-md-8">.col-md-8</div> line 3: <div class="col-md-4">.col-md-4</div> line 4: </div>

ผลการทางานเป็นดงั น้ี

ภาพท่ี 6.4 ผลลพั ธ์การทางานของการใช้ Grid

แสดงการแบ่งคอลัมน์ การรวมคอลัมน์ของ Grid น้ัน เน่ืองจากคอลัมน์ท้ังหมดมี 12 คอลัมน์การรวมก็คือ เราจะ

แบ่งเป็นกี่คอลัมน์ก็ตามผลรวมทั้งหมดของคอลัมน์(คลาส .col-md-xx) จะต้องเท่ากับ 12 จาก ตัวอย่าง .col-md-8 กับ .col-md-4 ผลรวมของตัวเลขคลาส (ตัวท้าย) จะเท่ากับ 12 จะเห็นได้ว่า ระบบGrid ของ Bootstrap นั้นจะชว่ ยใหเ้ ราสามารถออกแบบเลยเ์ อาท์ได้อยา่ งงา่ ยข้ึน เหมือนกบั การ ใช้ <table>

การทา offsetting ของ Grid การทา Offsetting นั้นเป็นการเว้นคอลมั นท์ ี่อยดู่ า้ นขวาของ Grid ไวแ้ ล้วขา้ มไปสรา้ งคอลัมน์

ถดั ไป เราจะใชค้ ลาส .col-md-offset-* ในการลบหรือเวน้ ชอ่ งว่างของคอลัมน์ตวั อยา่ งเชน่ ตวั อย่างที่ 6.3 การทา Offset

line 1: <div class="row"> line 2: <div class="col-md-4"> line 3: .col-md-4 line 4: </div> line 5: <div class="col-md-4 col-md-offset-4"> line 6: .col-md-4 .col-md-offset-4 line 7: </div> line 8: </div>

ผลการทางานเปน็ ดังนี้

ภาพที่ 6.5 ผลลพั ธ์การทางานของการทา Offset

140

แสดงการทา Offset ตาราง เมอื่ ตอ้ งการใช้งานรปู แบบตารางของ Bootstrap สามารถทาได้งา่ ยโดยการเพมิ่ คลาส .table

ในแท็ก <table> ดังนี้ โครงสร้างตาราง

</tr> </thead> <tbody>

</tr> </tbody> </table>

โดยท่ีส่วนหัวของตาราง (header) จะต้องอยู่ภายในแท็ก <thead></thead> และใช้ <th></th> สาหรับการแบ่งคอลัมน์ส่วนรายการของเน้ือหาให้อยู่ภายใต้แท็ก <tbody></tbody> และใช้ <td></td> ในการแบง่ คอลัมน์ดงั ตวั อย่าง ตวั อยา่ งท่ี 6.4 การสรา้ งตาราง

line 1: <table class="table" > line 2: <thead> line 3: <tr> line 4: <th>Header</th> <th>Header</th> line 5: </tr> line 6: </thead> line 7: <tbody> line 8: <tr> line 9: <td>Content</td> <td>Content</td> line 10: </tr> line 11: <tbody> line 12: </table>

ผลการทางานเปน็ ดังนี้

ภาพท่ี 6.6 ผลลัพธ์การทางานของการสร้างตาราง

รูปแบบตาราง รูปแบบตารางมีให้เลือก ได้แก่.table-striped, .table-bordered, .table-hover และ

.table-condensed โดยมีรปู แบบการใช้งาน ดังนี้

141

แสดงการใชง้ านคลาส .table-striped

<table class="table table-striped"> ...

</table>

ตัวอยา่ งการใชค้ ลาส .table-striped

<table class="table table-striped"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>Jarunee</td> <td>Pattharawongthana</td> <td>[email protected]</td> </tr> <tr> <td>Pongkorn</td> <td>Chantharaj</td> <td>[email protected]</td> </tr> <tr> <td>Subpong</td> <td>Pongsawat</td> <td>[email protected]</td> </tr> </tbody>

</table>

ผลการทางานเปน็ ดังน้ี

ภาพท่ี 6.7 แสดงผลลัพธจ์ ากการใช้คลาส .table-striped

การเพิ่มสสี นั ให้กบั ตาราง เราสามารถกาหนดสีของแต่ละแถวในตารางได้โดย Bootstrap ได้เตรียมคุณสมบัติเหล่าน้ีไว้

ให้ซึ่ง

142

ประกอบด้วยคลาสต่างๆ ดงั น้ี การกาหนดสสี นั ให้กับแถว

นอกจากเราจะกาหนดสีให้แตล่ ะแถวไดแ้ ล้วเรายงั สามารถกาหนดให้กับแตล่ ะคอลัมนไ์ ด้ดว้ ย โดยการกาหนดคลาสให้กบั แทก็ <td> ดงั น้ี การกาหนดสสี ันให้กบั คอลัมน์

ตัวอยา่ งการแสดงสใี ห้กับตาราง ดังรปู

ภาพท่ี 6.8 ตวั อย่างการแสดงสใี หก้ ับตาราง

การสร้างฟอรม์ (Form) การใช้ CSS เพ่ือกาหนดรูปแบบต่างๆ ให้กับคอนโทรลต่างๆ ของฟอร์มในเอกสารนั้น

Bootstrap มีคลาสที่หลากหลายที่จะช่วยให้เราสามารถปรับแต่งคอนโทรลต่างๆ ของฟอร์มให้ดู สวยงาม และน่าใช้งานมากย่ิงข้ึน โดยเราสามารถใช้คลาสต่างๆ ได้กับแท็ก <input>, <textarea> และ <select> โดยเราตอ้ งทาการเพิ่มคลาส .form-control ให้กบั คอนโทรลเหล่านน้ั โดยความกวา้ ง ของคอนโทรลนั้นจะกว้าง 100% เป็นค่าเร่ิมต้น แต่เราสามารถกาหนดค่าความกว้างให้เป็นตามที่เรา ต้องการไดโ้ ดยการใชส้ ไตลซ์ ีท style="width: XXXpx;" และใช้งานรว่ มกบั Grid ไดโ้ ดยความกว้างจะ ได้ขนาดเท่ากบั ขนาดของ Grid ตวั อย่างฟอรม์

ตัวอยา่ งท่ี 6.5 การสรา้ งฟอร์ม

line 1: <form role="form"> line 2: <div class="form-group">

143

line 3: <label for="txt_email">Email address</label> line 4: <input type="email" class="form-control" line 5: id="txt_email" placeholder="Enter email"> line 6: </div> line 7: <div class="form-group"> line 8: <label for="txt_pass">Password</label> line 9: <input type="password" class="form-control" line 10: id="txt_pass" placeholder="Password"> line 11: </div> line 12: <button type="submit" class="btn btn-

default">Submit</button> line 13: </form>

ผลการทางานเปน็ ดังน้ี

ภาพท่ี 6.9 ผลลพั ธข์ องการสรา้ งฟอร์ม

การสร้างฟอรม์ ใน Bootstrap สามารถแบ่งออกเปน็ 2 รูปแบบ ไดแ้ ก่ Inline form และ Horizontal form ซ่งึ มรี ายละเอียดของการทางานดงั น้ี

1. Inline form การกาหนดรูปแบบ inline form เป็นการทาใหค้ อนโทรลต่างๆ ของฟอร์มอยใู่ นแถวเดียวกัน โดยปกติแล้วหากเราไม่กาหนดค่า .form-inline ในแท็ก <form> คอนโทรลต่างๆ ของฟอร์มจะอยู่ คนละแถว หรือคนละบรรทัด เหมือนกับตัวอย่างแรก แต่หากเรากาหนดค่า .form-inliine เข้าไป คอนโทรลต่างๆ จะอยู่ในแถวเดียวกัน ในการทา inline form นั้นเราจะต้องทาการกาหนดค่าความ กว้างของคอนโทรล โดยการใช้สไตล์ซีทกาหนดค่า ซ่ึงตัวอย่างจะใช้ width ในการกาหนดค่าความ กว้างของคอนโทรล หากเราไม่กาหนดเบราเซอร์จะแสดงความกว้างเต็ม 100% ซึ่งจะไม่เห็นความ แตกต่างในการใช้.form-inline และหากเราไม่ต้องการให้แสดง <label> เราสามารถกาหนดคลาส .sronly ใหก้ บั <label> ไดต้ วั อย่างการใชง้ าน

ตวั อยา่ งที่ 6.6 การสร้าง Inline form

line 1: <form role="form" class="form-inline"> line 2: <label for="txt_email">Email</label> line 3: <input type="email" class="form-control"

line 4: style="width: 220px;" id="txt_email" line 5: placeholder="Enter email">

line 6: <label for="txt_pass">Password</label>

144

line 7: <input type="password" class="form-control" line 8: style="width: 220px;" id="txt_pass" line 9: placeholder="Password"> line 10: <button type="submit" class="btn btn-

default">Submit</button> line 11: </form>

ผลการทางานเปน็ ดงั น้ี

ภาพที่ 6.10 ผลลพั ธ์การทางานของการสร้าง Inline form

2. Horizontal form เราสามารถจัดกลุ่มของคอนโทรลกับลาเบล (Label)ให้อยู่ในลักษณะของคอลัมน์โดยการใช้ .formhorizontal รว่ มกับกริด (Grid) และ .form-group ในการแบ่งคอลมั น์ตวั อยา่ ง เช่น ตวั อย่างท่ี 6.7 การสรา้ ง Horizontal form

line 1: <form class="form-horizontal" role="form"> line 2: <div class="form-group"> line 3: <label for="txt_email" line 4: class="col-sm-2 control-label"> line 5: Email line 6: </label> line 7: <div class="col-sm-5"> line 8: <input type="email" class="form-control" line 9: id="txt_email" placeholder="Email"> line 10: </div> line 11: </div> line 12: <div class="form-group"> line 13: <label for="txt_password" line 14: class="col-sm-2 control-label"> line 15: Password line 16: </label> line 17: <div class="col-sm-5"> line 18: <input type="password" class="form-control" line 19: id="txt_password" placeholder="Password"> line 20: </div> line 21: </div> line 22: <div class="form-group"> line 23: <div class="col-sm-offset-2 col-sm-5"> line 24: <div class="checkbox"> line 25: <label> line 26: <input type="checkbox"> Remember me line 27: </label> line 28: </div> line 29: </div>

145

line 30: </div> line 31: <div class="form-group"> line 32: <div class="col-sm-offset-2 col-sm-5"> line 33: <button type="submit" class="btn btn-default"> line 34: Sign in line 35: </button> line 36: </div> line 37: </div> line 38: </form>

ผลการทางานเปน็ ดังน้ี

ภาพที่ 6.11 ผลลัพธ์การทางานของการสรา้ ง Horizontal form

สรุป

หลักการออกแบบเว็บไซตท์ ดี่ ไี ดแ้ ก่ 1)ความเรยี บง่าย (Simplicity) 2) ค ว า ม ส ม่ า เ ส ม อ (Consistency) 3)ความเป็นเอกลักษณ์(Identity) 4)เน้ือหา(Useful Content) 5)ระบบเนวิเกช่ัน (User-Friendly Navigation) 6)คุณภาพของส่งิ ท่ปี รากฏให้เหน็ ในเว็บไซต์(Visual Appeal) 7)ความ สะดวกของการใช้ในสภาพต่าง ๆ (Compatibility) 8)ความคงที่ในการออกแบบ(Design Stability) 9)ความคงท่ีของการทางาน (Function Stability) ในการออกแบบเพื่อให้สอดคล้องกับหลักการ ดังกล่าว เป็นการออกแบบเว็บไซต์ในลักษณะ Responsive คือการออกแบบคร้ังเดียวแต่สามารถ รองรับการใช้เว็บไซต์ผ่านทุกอุปกรณ์ การดาวน์โหลด Bootstrap มาใช้งานน้ันเราสามารถดาวน์ โ ห ล ด ไ ด้ จ า ก เ ว็ บ ไ ซ ต์ www.getbootstrap.com ห รื อ ด า ว น์ โ ห ล ด Source code ไ ด้ ที่ https://github.com/twbs/bootstrap หลังจากน้ันทาการติดต้ัง โดยการ แตก zip ไฟล์ แล้ว นาไปใชง้ านตอ่

การทางานของ bootstrap มีการเตรียมคลาส (Class) ไวส้ าหรับการปรบั แต่งคอนโทรลและ แท็กต่างๆ ของเอกสาร HTML ช่วยให้เว็บดูสวยงาม และมีลูกเล่นเยอะข้ึน นอกจากนั้นยังมีระบบ Grid ที่ช่วยในการจัดเลย์เอาท์(Layout) ของเอกสารโดยที่เราไม่จาเป็นต้องใช้ตารางในการจัดวาง คอนโทรลต่างๆ สาหรับ Bootstrap ระบบ Grid ของ Bootstrap นั้นจะแบ่งหน้าจอออกเป็น 12 คอลัมน์ สามารถรวมคอลัมน์ของ Grid นั้น เน่ืองจากคอลัมน์ท้ังหมดมี 12 คอลัมน์การรวมก็คือ เรา จะแบ่งเป็นกี่คอลัมน์ก็ตามผลรวมทั้งหมดของคอลัมน์(คลาส .col-md-xx) จะต้องเท่ากับ 12 จาก ตัวอย่าง .col-md-8 กับ .col-md-4 ผลรวมของตัวเลขคลาส (ตัวท้าย) จะเท่ากับ 12 จะเห็นได้ว่า ระบบGrid ของ Bootstrap นั้นจะช่วยให้สามารถออกแบบเลย์เอาท์ได้อย่างง่ายข้ึน นอกจากน้ันยัง สามารถทา offsetting ของ Grid ซ่ึงเป็นการเว้นคอลัมน์ที่อยู่ด้านขวาของ Grid ไว้แล้วข้ามไปสร้าง

146

คอลัมน์ถัดไป โดยใช้คลาส .col-md-offset-* ในการลบหรือเว้นช่องว่างของคอลัมน์ได้ รวมถึงเรา สามารถประยุกต์ใช้งาน Bootstrap ร่วมกับ element ของ HTML ได้ทุก element พร้อมการ แสดงผลทสี่ วยงามได้

147

แบบฝกึ หดั

1. จงอธบิ ายหลักการออกแบบเวบ็ ไซต์ท่ีดี 2. จงบอกนิยามการออกแบบเว็บไซต์แบบ Responsive 3. จงบอกนยิ ามของ bootstrap 4. จงบอกขอ้ ดีของ bootstrap 5. จงบอกแหล่งการดาวนโ์ หลด bootstrap 6. จงอธิบายการใช้งาน bootstrap 7. จงอธบิ ายการใชง้ าน Grid 8. จงออกแบบหนา้ เว็บไซต์ ท่มี ีการใช้งาน Grid 3 คอลมั น์ 9. จงออกแบบหนา้ เว็บไซต์สาหรบั แสดงภาพขนาด 5 แถว 4 คอลมั น์ 10. จงสร้างฟอร์มในการกรอกประวัตินักศึกษาท่ีประกอบด้วยอิลิเมนต์อย่างน้อย 10 อิลิเมนต์ โดยใช้ bootstrap

148

เอกสารอา้ งอิง

สถติ เรียนพิศ.(2556). เรียนร้กู ารสร้างเวบ็ แอพลิเคชันดว้ ย Bootstrap และ jQuery. Online Collis Ta'eed. (2007). 9 Essential Principles for Good Web Design.

https://design.tutsplus.com/tutorials/9-essential-principles-for-good-web- design--psd-56. [Online : 17 Dec 2007 ]

แผนบริหารการสอนประจาบทท่ี 7

หัวขอ้ เน้อื หา

1. แนวคดิ เบอื้ งตน้ เก่ียวกับฐานข้อมลู 2. ฐานขอ้ มลู MySQLและชนิดของขอ้ มลู ใน MySQL 3. การใช้งาน phpMyAdmin จดั การ MySQL 4. การใช้งานคาสง่ั SQL สาหรบั จัดการข้อมูล 5. การรับ/ส่งค่าภาษาไทยจากฐานขอ้ มูล 6. การเชื่อมตอ่ พเี อชพกี ับมายดเ์ อสควิ แอล

วัตถุประสงค์เชิงพฤติกรรม

เม่ือนักศึกษาเรยี นบทเรยี นนแ้ี ลว้ สามารถ 1. บอกแนวคิดเบ้ืองตน้ เก่ียวกบั ฐานขอ้ มูล 2. ชี้แจงการใชง้ านฐานข้อมูล MySQL 3. บอกชนดิ ของขอ้ มลู ใน MySQL 4. ชีแ้ จงการใช้งาน phpMyAdmin จัดการ MySQL 5. ช้ีแจงการใชง้ านคาสง่ั SQL สาหรับจัดการข้อมลู 6. อธบิ ายการการเชอ่ื มตอ่ พีเอชพีกับมายด์เอสควิ แอล 7. การประยกุ ต์ใช้งานการจัดการฐานขอ้ มูลด้วย MySQL

วธิ ีสอนและกจิ กรรมการเรียนการสอน

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

คอมพวิ เตอร์ทเ่ี กี่ยวข้อง

150

สื่อการเรยี นการสอน

1. เอกสารประกอบการเรียนการสอนรายวิชาการเขยี นโปรแกรมบนเวบ็ บทท่ี 7 2. Power point ประกอบเนอ้ื หาบทท่ี 7 3. โปรแกรม Appserv 4. โปรแกรม Notepad++ 5. โปรแกรม Bootstrap Framework 6. โปรแกรม phpMyAdmin 7. โปรแกรม MySQL

8. สื่ออเิ ลก็ ทรอนกิ ส์จากเว็บไซต์ที่เกย่ี วข้อง

การวัดและประเมินผล

1. พจิ ารณาจากความสนใจเรยี น และการมีส่วนร่วมในการซกั ถามภายในชน้ั เรียน 2. พิจารณาจากการฝึกปฏิบัตงิ านท่ไี ด้รับมอบหมาย 3. พจิ ารณาจากการร่วมสรปุ ประเดน็ สาคัญ 4. พิจารณาจากผลการทาแบบฝกึ หัดประจาบท 5. พิจารณาจากผลการพฒั นาเวบ็ ไซต์ 6. พจิ ารณาจากการนาเสนอผลการพัฒนาเวบ็ ไซต์ 7. พจิ ารณาจากการอภิปรายผลการปฏิบัตงิ าน 8. พิจารณาจากพฤตกิ รรมในการเรียน

บทที่ 7 การเช่อื มตอ่ ฐานข้อมลู ในพีเอชพี

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

ดังนั้นการเขียนโปรแกรมภาษาทางคอมพิวเตอร์ทุกภาษาจาเป็นต้องทางานร่วมกับ ฐานข้อมูล เช่นเดียวกันกับในภาษาพีเอชพีท่ีมีการเชื่อมต่อฐานข้อมูล โดยในบทเรียนนี้จะเป็น การศึกษาเก่ียวกับ แนวคิดเบ้ืองต้นเกี่ยวกับฐานข้อมูล การใช้งานฐานข้อมูล MySQL การใช้งาน phpMyAdmin จัดการ MySQL การใช้งานคาส่ัง SQL สาหรับจัดการข้อมูล การเช่ือมต่อพีเอชพีและ การจัดการฐานขอ้ มลู ด้วยมายด์เอสควิ แอล

แนวคดิ เบอ้ื งต้นเก่ยี วกบั ฐานข้อมลู

แนวคิดเบื้องต้นเก่ียวกับฐานข้อมูล บัญชา ปะสีละเตสัง(2557, 170-175) กล่าวว่า ระบบ ฐานข้อมูล (Database) เป็นการจัดเกบ็ ชดุ ของข้อมลู ทม่ี ีอยู่ไวใ้ นรูปแบบของตาราง (Table) ซ่งึ ภายใน ตารางจะประกอบดว้ ยความสมั พนั ธ์ใน 2 แนวคอื

1. ในแนวนอน ซ่ึงจะเรียกวา่ แถว (Row) 2. ในแนวตงั้ ซง่ึ จะเรียกวา่ คอลมั น์ (Column หรอื Field) ท้ังนี้หากเราจะเข้าถึงข้อมูลใดในตาราง จะต้องอ้างอิงผ่านลาดับแถวและคอลัมน์ เช่น หาก เราต้องการทราบราคาของสินค้า Notebook แสดงว่าต้องดูจากแถวที่ 1 ตรงช่องคอลัมน์ Price เป็น ตน้ ถ้าขอ้ มูลทเ่ี ราต้องการจัดเก็บมีมากกว่า 1 ชุด เช่น ข้อมลู ของพนักงาน, ข้อมลู เกี่ยวกับสินค้า, ข้อมลู การขาย เรากจ็ ะจดั เก็บข้อมลู เหลา่ นแ้ี ยกไว้คนละตาราง และตารางเหล่านั้นจะจัดเก็บรวมไว้ใน กล่มุ เดยี วกัน ซงึ่ เราเรียกการจดั กลุม่ นี้ว่า ฐานข้อมูล (Database) หลักการต่างๆ ท่ีกล่าวมาน้ีเป็นเพียงแนวคิดแบบง่ายๆ ให้ผู้อ่านเห็นความสัมพันธ์ระหว่าง แถว, คอลมั น์, ตาราง และฐานขอ้ มลู ซึง่ เราสามารถอธิบายรายละเอียดขององค์ประกอบแต่ละอย่าง ได้ดงั น้ี 1. ฐานข้อมูล (Database) ในการที่จะจัดเก็บข้อมูลใน MySQL ได้เราจะต้องเร่ิมต้นที่การ สร้าง “ฐานข้อมูล” ขึ้นมาก่อน ซ่ึงฐานข้อมูลนี้เราอาจเปรียบได้กับโฟลเดอร์ท่ีใช้แยกเก็บกลุ่มไฟล์ ต่างๆ นั่นเอง ซงึ่ เราจะสร้างฐานขอ้ มูลข้นึ มาจานวนเท่าไหร่กไ็ ด้

152

2. ตาราง (Table) ลาดับถัดไปจากฐานข้อมูลก็คือตารางฐานข้อมูล ซ่ึงตารางเป็นการแยก จัดเก็บข้อมูลในแต่ละเร่ืองออกจากกัน เช่น ตารางพนักงาน, ตารางสินค้า, ตารางลูกค้า เป็นต้น ทั้งน้ี ตารางอาจเปรียบได้กบั ไฟลต์ ่างๆ ทอ่ี ยู่ในโฟลเดอรน์ ัน่ เอง และฐานข้อมลู หน่ึงๆ จะมตี ารางอยู่ก่ีตาราง กไ็ ด้ เช่นเดียวกบั โฟลเดอรห์ น่ึงๆ จะมีไฟล์อยูก่ ี่ไฟล์ก็ได้ ซ่ึงเม่ือตารางถกู เก็บไว้ในฐานข้อมูล เม่อื เราจะ เข้าถึงข้อมูลในตารางใดจาเป็นต้องเช่ือมต่อไปยังฐานข้อมูลท่ีเก็บตารางน้ันก่อน ทั้งนี้เพราะอาจมี มากกวา่ 1 ฐานข้อมลู นัน่ เอง

3. คอลัมน์ (Column) หรอื ฟลิ ด์ (Field) ภายในตารางฐานข้อมูลจะประกอบไปดว้ ยคอลัมน์ ต่างๆ เพอ่ื กาหนดว่าตารางนั้นจะเก็บข้อมลู อะไรบ้าง ซ่ึงโดยปกตแิ ลว้ ข้อมูลที่จดั เก็บในตารางเดียวกัน จะต้องมีความเก่ียวข้องอย่างใดอย่างหน่ึงต่อกัน เช่น หากเป็นตารางที่จัดเก็บข้อมูลของพนักงาน ก็ อาจประกอบไปดว้ ยคอลัมน์ท่ีเกี่ยวกบั รหสั , ชอ่ื , ทอี่ ยู่, ตาแหน่ง, เงินเดอื น เปน็ ต้น นอกจากนี้แล้วแต่ ละคอลัมน์จะตอ้ งระบุชนิดข้อมูลให้สมั พนั ธ์กบั ข้อมูลท่จี ะจัดเกบ็ ในคอลัมนน์ น้ั ด้วย

4. แถว (Row) ก็คือข้อมูลแต่ละรายการท่ีจะเก็บในตารางฐานข้อมูลน่ันเอง ซึ่งในแต่ละ ตารางจะมีจานวนขอ้ มลู อยกู่ ี่แถวกไ็ ด้

ชนิดขอ้ มลู ของคอลัมน์ ชนิดข้อมูลของคอลัมน์ บัญชา ปะสีละเตสัง (2557, 170-175) กล่าวว่า เนื่องจากคอลัมน์ใช้

สาหรับเก็บข้อมูลในแต่ละเรื่อง ซึ่งข้อมูลเหล่าน้ีอาจจะมีหลายชนิดแตกต่างกันออกไป เช่น ช่ือหรือที่ อยู่จะเป็นข้อมูลชนิดสตริง อายุหรือเงินเดือนมักจะเป็นชนิดตัวเลข และถ้าเป็นวันเกิดก็มักจะเป็น ข้อมูลชนิดวันเวลา เป็นต้น ท้ังนี้เนื่องจากวิธีในการจัดการกับข้อมูลเหล่าน้ีจะต่างกันออกไปตาม ลักษณะของข้อมูล ดังนั้นทุกคอลัมน์ของตารางฐานข้อมูลจะต้องกาหนดชนิดข้อมูลเอาไว้เสมอ สาหรับ MySQL ไดแ้ บง่ ชนดิ ข้อมลู ของคอลมั น์ออกเป็นดงั น้ี

ข้อมลู ชนิดตัวเลข ข้อมูลชนิดตัวเลขนั้นมีอยู่หลายชนิดตามขนาดของตัวเลข และในแต่ละชนิดน้ันยังสามารถ

กาหนดได้อีกว่าจะเป็นได้ท้ังจานวนบวกและลบ (SIGNED) หรือเป็นได้เฉพาะจานวนบวกอย่างเดียว (UNSIGNED) ดงั ตารางต่อไปนี้

ตารางท่ี 7.1 ขอ้ มลู ชนิดตัวเลข Minimum Maximum ท่มี า : บัญชา ปะสีละเตสงั (2557, 170) -128 127 0 255 Type Byte Sign -32768 32767 TINYINT 1 SIGNED 0 65535

UNSIGNED -8388608 8388607 SMALLINT 2 SIGNED 0 16777215 2147483647 UNSIGNED -2147483648 4294967295 MEDIUMINT 3 SIGNED 0

UNSIGNED INT 4 SIGNED

UNSIGNED

153

ตารางท่ี 7.1 ขอ้ มูลชนิดตวั เลข

ทีม่ า : บัญชา ปะสลี ะเตสัง (2557, 170)

Type Byte Sign Minimum Maximum 9223372036854775807 BIGINT 8 SIGNED -9223372036854775808 1844674407370955161

UNSIGNED 0 5 -1.175494351E-38 FLOAT 4 SIGNED -3.402823466E+38 3.402823466E+38 DOUBLE -2.2250738585072014E- UNSIGNED 1.175494351E-38 308 8 SIGNED - 1.7976931348623157E+ 1.7976931348623157E+ 308

308

UNSIGNED 2.2250738585072014E-

308

ขอ้ มลู ชนิดสตริง ข้อมูลชนิดสตริงท่ีกาหนดได้มีดังตาราง ท้ังน้ีข้อมูลชนิด CHAR หรือ VARCHAR จะต้องระบุ

ความยาวสูงสุดของสตริงลงไปด้วย ซึ่งกาหนดได้ไม่เกินค่า Maximum คือ 255 สาหรับชนิด CHAR และ 65535 สาหรับชนดิ VARCHAR (MySQL 5.0.3 ขึ้นไป)

ตารางท่ี 7.2 ข้อมูลชนดิ สตรงิ Maximum Type 255 CHAR 65535* VARCHAR 255 TINYTEXT 65535 TEXT 16777215 MEDIUMTEXT 4294967295 LONGTEXT

* ตงั้ แต่ MySQL 5.0.3 ข้นึ ไป กาหนดขนาด VARCHAR ได้ถึง 65535 เวอรช์ ่ันกอ่ นนีก้ าหนดได้ไม่เกิน 255 เช่นเดยี วกบั CHAR ขอ้ มูลชนิด BLOB

ขอ้ มลู ชนดิ BLOB (Binary Large Object) เรามักใช้กบั ข้อมลู ประเภทรูปภาพหรือมลั ติมีเดีย ซงึ่ เป็นข้อมูลแบบไบนารี

ตารางท่ี 7.3 ขอ้ มูลชนดิ BLOB Maximum Type 255 65535 TINYBLOB BLOB

154

ตารางที่ 7.3 ขอ้ มลู ชนดิ BLOB Maximum Type 16777215 4294967295 MEDIUMBLOB LONGBLOB

ข้อมลู ชนิด SET และ ENUM

SET และ ENUM คือกลุ่มของข้อมูลท่ีเราทราบค่าท่ีแน่นอนแล้วจานวนหน่ึง ซ่ึงข้อมูลท่ีจะ

กาหนดให้แก่คอลัมน์ชนิดนี้ได้ต้องเป็นข้อมูลที่เป็นสมาชิกของ SET หรือ ENUM เท่าน้ัน โดยข้อมูล

ชนิด SET จะมีสมาชิกได้ไม่เกิน 64 ตัว และ ENUM มีสมาชิกได้ไม่เกิน 65,535 ตัว รูปแบบของ

คอลมั นป์ ระเภทนค้ี ือ

ตารางที่ 7.4 ข้อมูลชนดิ SET และ ENUM

Type Format Maximum

SET SET(‘menber1’ , ‘member2’ , … , ‘member64’) 64

ENUM ENUM(‘menber1’ , ‘member2’ , … , ‘member65535’) 65535

ข้อมูลชนิดวันเวลา

โดยปกตขิ อ้ มูลชนดิ วันเวลาของ MySQL จะอยู่ในรปู แบบตอ่ ไปนี้คอื

YYYY – MM – DD หรือ Year – Month – Date

เช่น วันที่ 20 เดือนตุลาคม ปี ค.ศ. 2014 จะต้องเขียนเป็น 2014-10-20 ซ่ึงรูปแบบการอาจ

ขัดกับความรู้สึกของเราอยู่บ้าง แต่อย่างไรก็ตาม ในขั้นตอนท่ีเราต้องนาข้อมูลไปใช้งาน MySQL ก็มี

ฟังก์ชั่นในการแปลงวันเวลาให้อยู่ในรูปแบบท่ีเราต้องการ หรืออาจจะใช้ฟังก์ชั่นของ PHP แปลงก็ได้

ขอ้ มลู ชนดิ วันเวลาท่นี ่าสนใจมีดงั น้ี

ตารางท่ี 7.5 ข้อมูลชนดิ วันเวลา

Type Description Range

DATE เฉพาะข้อมลู วนั เดอื นปี 1000-01-01 ถึง 9999-12-31

TIME เฉพาะข้อมลู เวลา -838:59:59 ถงึ 838:59:59

DATETIME ทง้ั วนั เดอื นปแี ละเวลา 1000-01-01 00:00:00 ถึ ง 9 9 9 9 - 1 2 - 3 1

23:59:59

แอตทรบิ ิวต์ของคอลมั น์ แอตทริบิวต์ (Attribute) หรือ แฟล็ก (Flag) ในท่ีน้ีคือข้อกาหนดเพ่ิมเติมนอกเหนือจากชนิด

ขอ้ มูลที่กาหนดใหแ้ กค่ อลัมน์ ซึ่งแอตทรบิ วิ ตน์ จี้ ะชว่ ยใหเ้ ราจดั การขอ้ มลู ไดส้ ะดวกขึ้น และบางแอตทริ บิวต์ก็ยังช่วยตรวจสอบความถูกต้องของข้อมูลได้ด้วย แต่ต้องกาหนดให้สัมพันธ์กันกับชนดิ ข้อมูลของ คอลัมน์ด้วย มิฉะน้ันจะไม่สามารถสร้างตารางฐานข้อมูลได้ หรือบางทีก็อาจเกิดข้อผิดพลาดใน ภายหลัง โดยแอตทริบิวต์ของคอลัมน์มีดังนี้

155

ตารางท่ี 7.6 แอตทรบิ ิวตข์ องคอลัมน์

แอตทรบิ ิวต์ รายละเอียด

NOT NULL ห้ามคอลัมน์น้ันเป็นค่าว่าง (NULL) คือจะต้องใส่ข้อมูลให้กับคอลัมน์

นั้นเสมอน่ันเอง ซ่ึงแอตทริบิวต์ NOT NULL จะนิยมใช้กันมากเพื่อ

ควบคุมความถกู ต้องของตารางฐานข้อมลู

BINARY ใช้กับข้อมูลชนิด CHAR หรือ VARCHAR เพ่ือให้ฐานข้อมูลนาความ

แตกต่างของรูปแบบตัวพิมพ์เล็กพิมพ์ใหญ่มาพิจารณาด้วยหรือเป็น

แบบ case-sensitive นั่นเอง เพราะโดยปกติแล้วฐานข้อมูลจะจัดการ

สตรงิ ในแบบ case-insensitive

AUTO_INCREMENT หมายถึงให้ MySQL ใส่ตัวเลขลงไปในคอลัมน์น้ันให้โดยอัตโนมัติ ซ่ึง

ตัวเลขที่ใส่เข้าไปโดยปกติจะเร่ิมจาก 1 แล้วเพิ่มค่าทีละ 1 ไปเรื่อยๆ

ซึ่งค่าท่ีโปรแกรมใส่ให้น้ีเราจะไม่สามารถเปล่ียนแปลงแก้ไขได้ ทั้งน้ี

คอลัมน์ที่จะกาหนดให้เป็นแบบ AUTO_INCREMENT ได้ ต้องกาหนด

ชนิดข้อมูลให้เป็นแบบเลขจานวนเต็ม เช่น INT เป็นต้น และห้ามใช้

รว่ มกับแอตทริบิวต์ NULL แตส่ ว่ นมากนิยมใชร้ ่วมกบั NOY NULL

DEFAULT เป็นการกาหนดค่าให้แก่คอลัมน์ด้วยค่าใดค่าหนึ่งเอาไวล้ ่วงหน้า ซึ่งมัก

เป็นค่าที่ใช้กันบ่อยๆ เช่น พนักงานส่วนใหญ่เป็นเพศหญิง ดังนั้นเราจึง

อาจกาหนดค่า DEFAULT ให้แก่คอลัมน์ gender เป็น “female”

เป็นต้น แต่หากทางเราไม่ต้องการใช้ค่า DEFAULT ที่กาหนดไว้ก็

สามารถกาหนดเป็นอย่างอน่ื ได้

INDEX ใชใ้ นการจัดเรยี งลาดับข้อมลู ซงึ่ ข้อมูลทเี่ รยี งลาดับจะช่วยให้การค้นหา UNIQUE รวดเรว็ ขนึ้ เราสามารถจัดเรยี งลาดับข้อมูลได้มากกว่า 1 คอลัมน์ เม่ือ PRIMARY KEY เราสร้าง index โปรแกรมฐานข้อมูลจะสร้างไฟล์ index แยกออกไป ตา่ งหาก

เปน็ index ในอกี ลกั ษณะหนึง่ โดยมีขอ้ กาหนดทสี่ าคัญคอื ห้ามมขี อ้ มูล ซ้ากันใน คอลัมน์เดียวกัน ซึ่งเรามักใช้กับข้อมูลท่ีคาดว่าข้อมูลในแต่ ละแถวจะไมม่ ีทางซ้า กันได้เลย เช่น อเี มล และถ้าเราใสข่ อ้ มูลซ้ากับที่ มีอยู่แล้วโปรแกรมจะไม่ยอมรับข้อมูลนั้น ดังน้ันแอตทริบิวต์ UNIQUE จึงช่วยตรวจสอบความถกู ต้องได้อกี ทางหนึง่

เป็น index ในอีกลักษณะหน่ึง โดย Primary Key คือคอลัมน์ที่จะใช้ เป็นคอลัมน์ หลักของตาราง แต่ Primary Key มีข้อกาหนดที่สาคัญ คือ คอลัมน์ท่ีจะใช้เป็น Primary Key ข้อมูลในคอลัมน์น้ันต้องไม่ซ้า กนั เลย โดยท่ัวไปทกุ ๆ ตารางเรานยิ ม ใหม้ ี Primary Key เสมอ

ฐานขอ้ มูล MySQLและชนดิ ของข้อมลู ใน MySQL

อนรรฆนงค์ คุณมณี (2555, 198) กล่าวถึงระบบฐานข้อมูล MySQL ว่าเป็นโปรแกรม ฐานข้อมลู ทรี่ องรับระบบฐานข้อมูลภาษา SQL ซงึ่ เปน็ ภาษาท่ีใชส้ ร้างฐานข้อมูลที่เข้าใจง่าย ซึ่งเหมาะ

156

สาหรับองค์กร หรือบุคคลทั่วไปท่ีมีความต้องการใช้ฐานข้อมูลขนาดเล็กและปานกลาง อีกทั้งเป็น ซอฟต์แวร์ฟรี และรองรับระบบปฏิบัติการ Windows และ Linux จึงมีผู้นิยมใช้งานกันอย่าง กว้างขวาง

เน่ืองจากท่ีการใช้งาน MySQL แต่เดิมต้องพิมพ์คาส่ังทีละบรรทัด จึงมีผู้พัฒนาแอพพลิเคชัน ใหม่ที่ช่วยในการจัดการระบบฐานข้อมูลให้สะดวกขึ้นซ่ึงก็คือ phpMyAdmin โดยมียูสเซอร์ อินเตอรเ์ ฟสเปน็ กราฟิก ทาใหผ้ ูใ้ ชส้ ามารถใชง้ านไดอ้ ย่างสะดวกรวดเร็ว ไม่ตอ้ งพิมพค์ าสงั่ ทีละบรรทัด อีกต่อไป หรือถา้ คุน้ เคยกับการพมิ พค์ าสงั่ แบบเดมิ ก็สามารถเลือกพิมพ์คาส่งั เองได้

ภาพที่ 7.1 ไอคอน phpMyAdmin

ชนดิ ของข้อมูลใน MySQL สมพงษ์ อริสริยวงศ์(2554, 12-14) กลา่ วว่าสาหรับชนดิ ของตัว แปรทเ่ี ราสามารถนามาใช้ไดภ้ ายในโปรแกรม บน MySQL มีดงั ตอ่ ไปนี้

ตารางท่ี 7.7 ชนดิ ของขอ้ มลู ใน MySQL

ชนดิ ของตวั แปร คาอธบิ าย ตัวอย่างของค่าข้อมลู

INT , INTEGER จานวนเต็มขนาด 32 บิต มีค่าประมาณ -234,567 หรือ -2,000,000,000

ตั้งแต่ -2.1 พันลา้ น ถึง 2.1 พันล้าน ในกรณี

กาหนดเปน็ INT UNSIGNED หรือ INTEGER

UNSIGNED จะมคี ่าตั้งแต่ 0 ถงึ 4.2 พนั ลา้ น

BIGINT จานวนเต็มขนาด 64 บิต มีค่าประมาณ 9,000,000,000,000,000,000

ต้ังแต่ -9 ล้านล้านล้านล้าน ถึง 9 ล้านล้าน หรือ

ล้านล้าน หรือตั้งแต่ 0 ถึง 18 ล้านล้านล้าน -9,000,000,000,000,000,000

ล้าน ในกรณที ี่เป็น UNSIGNED

FLOAT จานวนจริงขนาด 32 บติ มคี ่าประมาณ 0.00000000000002 หรือ

-1.7e38 ถึง 1.7e38 หรือตั้งแต่ 0 ถึง 18976.890770 หรอื 1.5e20

3.4e38 ในกรณีที่เป็น UNSIGNED

DOUBLE จานวนจริงขนาด 64 บิต มีค่ามากจนถึง 1.732e207 หรือ -1.732e200

ประมาณ 1.7e308

DECIMAL (จานวนเลข จานวนจรงิ ท่ถี ูกกาหนดให้มคี วามยาวเท่ากับ 78979.00 เราจะประกาศเปน็

นัยสาคญั , จานวนหลกั จานวนเลขนัยสาคัญ ซ่ึงรวมกับจานวนหลัก DECIMAL (8,2)

ทศนยิ ม) ทศนิยมด้วย เช่น DECIMAL (8,2) หมายถึง

จานวนจริงที่มีความยาว 8 ตัวอักษรรวมจุด

ทศนยิ มดว้ ย ไม่นับรวมเครือ่ งหมาย เชน่

-2.875 ส่วนใหญ่จะใช้ในกรณีท่ีเราทราบ

ขนาดของขอ้ มูลวา่ มีจานวนหลักเท่าใด

157

ตารางท่ี 7.7 ชนดิ ของขอ้ มลู ใน MySQL

ชนิดของตัวแปร คาอธิบาย ตวั อย่างของค่าข้อมูล

NUMERIC (จานวนเลข คล้ายกับ DECIMAL แต่มักจะนาไปใช้กับ 2.25 เราจะประกาศเปน็

นัยสาคญั , จานวนหลกั งานท่ีต้องการความแม่นยาเกี่ยวกับการ NUMERIC (4,2)

ทศนิยม) คานวณ เช่น งานเก่ียวกับบัญชี เป็นต้น

คล้ายกับตัวแปรประเภท Currency ของ

ภาษาวิชวลเบสกิ

DATE ข้อมูลประเภทวันท่ี ซึ่งจะตอ้ งอยู่ในรปู แบบ 2010-12-26

ปี-เดือน-วนั หรอื ปี/เดือน/วัน

DATETIME ข้อมลู ประเภทวันทแ่ี ละเวลา ซง่ึ จะมรี ูปแบบ 2010-12-26 23:43:56

คือ ป-ี เดอื น-วัน ช่ัวโมง:นาที:วินาที หรอื

ปี/เดือน/วัน ชั่วโมง:นาที:วนิ าที

CHAR (ความยาวตัวอกั ษร) สตรงิ ทมี่ ีความยาวตามทเี่ รากาหนด โดย ‘Hello Every Body’

ความยาวสงู สดุ คือ 255 ตัวอกั ษร

VARCHAR (ความยาว คล้ายกับ CHAR แต่ความยาวสูงสุดคือ ‘This is my first book’

ตัวอกั ษร) 64,000 ตัวอกั ษร

BLOB, TEXT ขนาดของข้อมูลมีความยาวมากกว่า 64

กิโลไบต์ ในกรณีของ BLOB จะเกบ็ ข้อมูลใน

รูปแบบ Binary ส่วน TEXT จะเก็บข้อมูลที่

เปน็ ขอ้ ความยาวๆ

LONGBLOB, คล้ายกับ BLOB และ TEXT สามารถเก็บ

LONGTEXT ข้อมูลทม่ี ขี นาดถงึ 4GB

นอกจากน้ัน MySQL ยังมีชนิดตัวแปรอีกประเภทหน่ึงท่ีเรียกว่า ENUM ท่ีมีโครงสร้างในการ เก็บข้อมูลแบบมีลาดับ คือ 1, 2, 3,… ไปเร่ือยๆ โดยแทนค่าของตัวเลขเหล่าน้ันด้วยข้อความ เช่น ENUM (‘Yes’, ‘No’, ‘Maybe’) เราจะได้ว่า ‘Yes’ มีค่าเท่ากับ 1, ‘No’ มีค่าเท่ากับ 2, ‘Maybe’ มี คา่ เท่ากับ 3

การใช้งาน phpMyAdmin จดั การ MySQL

การใช้งาน phpMyAdmin จดั การ MySQL จีระสิทธิ์ อึง้ รัตนวงศ์ (2555, 139-160) กล่าว ว่า หลงั จากติดตงั้ ชดุ โปรแกรม AppServ เรียบร้อยแล้ว เราสามารถเรียกใชง้ าน phpMyAdmin ได้ โดยผ่านบราวเซอร์ โดยมีข้ันตอนดังน้ี

1. พมิ พ์ http://localhost หรอื http://=127.0.0.1 ท่ี Address bar ของบราวเซอร์ 2. คลกิ ท่ี phpMyAdmin Database Manager

158

ภาพท่ี 7.2 การเรียกใช้งาน localhost จากนัน้ จะปรากฏหนา้ ตา่ งใหใ้ ส่ชื่อผ้ใู ชง้ าน และรหสั ผา่ น 3. ทช่ี ่อง ชื่อผูใ้ ช้ ให้ใส่ชอ่ื ผใู้ ช้ (ตามทีก่ าหนดไว้ตอนติดตง้ั โปรแกรม AppServ) 4. ที่ช่อง รหัสผ่าน ให้ใสร่ หัสผ่าน (ตามที่กาหนดไว้ตอนตดิ ต้งั โปรแกรม AppServ) 5. คลกิ ปมุ่ เขา้ สู่ระบบ

ภาพที่ 7.3 การกรอกช่ือผู้ใช้และรหัสผ่านเพ่ือเขา้ สู่ระบบ phpMyAdmin หลังจากนนั้ ถา้ รหสั ผ่านถูกตอ้ งจะแสดงหนา้ เว็บเพจเรมิ่ ตน้ phpMyAdmin ดงั ภาพท่ี 7.4

159

ภาพที่ 7.4 หน้าเวบ็ เพจเรม่ิ ต้น phpMyAdmin การสร้างฐานข้อมลู ใหม่

การท่ีจะนาข้อมูลมาเกบ็ ในฐานข้อมลู ได้ จะต้องสรา้ งฐานข้อมลู ข้นึ มาก่อน ซ่งึ เปน็ องค์ประกอบแรกของฐานข้อมูล สามารถทาไดด้ ังนี้

1. ท่ีช่อง สร้างฐานข้อมลู ใหม่ ให้ใส่ชื่อฐานข้อมูลทีต่ อ้ งการสร้าง 2. คลิกปุม่ สรา้ ง เพ่ือเริม่ สร้างฐานขอ้ มลู

ภาพที่ 7.5 หน้าจอการสรา้ งฐานขอ้ มลู หลังจากนน้ั phpMyAdmin ก็จะสรา้ งฐานข้อมูล แลว้ จะแสดงชอ่ื ฐานขอ้ มลู ทางด้านซ้าย ดงั

ภาพที่ 7.6

ภาพท่ี 7.6 ผลลัพธ์เม่อื สรา้ งฐานขอ้ มลู สาเร็จ

160

การเปลีย่ นชือ่ ฐานขอ้ มลู หากตอ้ งการเปลย่ี นชื่อฐานข้อมลู ท่ีสรา้ งแล้ว สามารถทาได้ดงั น้ี 1. คลิกเลอื กฐานข้อมลู ทต่ี ้องการเปล่ียนช่อื 2. คลิกแท็บ กระบวนการ 3. ในช่อง เปลี่ยนชอ่ื ฐานข้อมลู เปน็ ให้พมิ พ์ชื่อฐานข้อมลู ทต่ี ้องการเปล่ยี นชอ่ื 4. คลกิ ปุ่ม ลงมือ

ภาพท่ี 7.7 หนา้ จอการเปลี่ยนช่อื ฐานขอ้ มลู จากนัน้ phpMyAdmin จะเปลี่ยนชอื่ ฐานข้อมูลให้ทันที

ภาพที่ 7.8 ผลลัพธก์ ารเปล่ียนชอ่ื ฐานข้อมูล การลบฐานข้อมลู

การลบฐานข้อมลู ท่ีไม่ได้ใช้งานนั้น เม่ือลบฐานข้อมูลออกไปแล้ว ตารางขอ้ มลู และข้อมูลที่อยู่ ในตารางก็จะถูกลบออกไปด้วยเช่นกัน และจะไม่สามารถเรียกกลับคืนได้ ดังนั้นจะต้องแน่ใจว่า ตอ้ งการลบจรงิ ๆ สาหรบั วิธีการลบฐานขอ้ มลู ทาไดด้ ังนี้

1. คลกิ เลอื กฐานขอ้ มลู ทีต่ ้องการลบ 2. คลกิ แท็บ โยนท้งิ

161

ภาพท่ี 7.9 การเลือกฐานข้อมลู ทตี่ ้องการลบ 3. คลิกปมุ่ ตกลง เพื่อยนื ยนั การลบ จากนั้น phpMyAdmin จะลบฐานขอ้ มูลรวมท้งั

ตารางข้อมลู ออกไป 4.

ภาพท่ี 7.10 การยนื ยันการลบฐานข้อมูล การสรา้ งตารางขอ้ มลู

การท่ีจะเก็บข้อมูลลงในฐานข้อมูลได้นั้น จะต้องสร้างตารางข้อมูลขึ้นมาก่อน เพ่ือใช้เก็บ ข้อมลู ท่เี ก่ยี วข้อง ซึ่งการสรา้ งตารางจะต้องรู้ถงึ จานวนฟิลดท์ ่จี ะใช้กาหนดขอบเขตของข้อมูลดว้ ย โดย มีข้นั ตอนดังนี้

1. คลกิ เลอื กฐานข้อมลู ทต่ี อ้ งการสร้างตารางข้อมลู 2. ทช่ี ่อง ช่ือ ให้กาหนดชอ่ื ตารางขอ้ มลู ที่ตอ้ งการสร้าง 3. ทช่ี อ่ ง Number of fields ใหก้ าหนดจานวนฟิลด์ทีใ่ ชเ้ กบ็ ข้อมลู ของตารางนัน้ 4. คลกิ ปุ่ม ลงมือ

ภาพท่ี 7.11 การสรา้ งตารางข้อมูล

162 5. กาหนดโครงสร้างของตาราง (ซงึ่ จะแสดงบรรทัดเท่ากบั จานวนฟลิ ดท์ ี่กาหนด)

ฟลิ ด์ : กาหนดชือ่ ฟลิ ด์ขอ้ มูล ชนิด : กาหนดชนิดข้อมลู ให้เหมาะสมกับฟลิ ด์ ความยาว/เซต : กาหนดขนาดความยาวของฟลิ ดใ์ หเ้ หมาะสมกบั ขอ้ มูลในฟลิ ดน์ ัน้ ๆ เพมิ่ เตมิ : เลือกกาหนดลาดบั ตัวเลขอตั โนมัติ (Auto increment)

กาหนดให้ฟิลด์นีเ้ ป็นคยี ห์ ลัก (Primary Key) 6. คลิกปุม่ บนั ทึก

ภาพท่ี 7.12 กาหนดโครงสร้างของตาราง หลงั จากนัน้ จะปรากฏรายชอ่ื ตารางทางดา้ นซา้ ย และช่ือฟิลด์ที่เรากาหนด ดงั ภาพที่ 7.13

ภาพที่ 7.13 ผลลพั ธข์ องการสรา้ งตาราง การแทรกฟลิ ด์ใหม่เขา้ ไปในตาราง

เม่ือสร้างฟิลด์ในตารางไปแล้ว หากเราต้องการสร้างฟิลด์เพิ่มเข้าไปในตารางเดิมภายหลัง สามารถทาได้ดงั น้ี

1. คลกิ เลือกตารางข้อมูลทต่ี อ้ งการเพ่ิมฟิลด์ 2. ทช่ี ่อง Add ให้กาหนดจานวนฟลิ ด์ทีต่ ้องการเพิม่ 3. เลอื กตาแหน่งฟิลด์ทต่ี ้องการเพมิ่ ซึ่งเลือกได้ 3 แบบ

163 3.1. ถา้ ต้องการเพม่ิ ฟลิ ดใ์ หม่ต่อท้ายฟิลด์เดมิ ให้เลือก ท่ีจุดสุดท้ายของตาราง 3.2. ถา้ ต้องการเพ่มิ ฟลิ ดใ์ หม่ไว้เปน็ ลาดับแรกของฟิลด์ ใหเ้ ลอื ก ทจ่ี ดุ เริ่มต้นของตาราง 3.3. ถ้าต้องการเพิ่มฟิลด์ใหม่ไวห้ ลังฟลิ ด์ที่ต้องการ ใหเ้ ลอื ก หลงั แลว้ เลอื ก ฟลิ ด์ที่ ต้องการ 4. คลกิ ปมุ่ ลงมือ

ภาพที่ 7.14 การเลือกตาแหนง่ ฟิลดท์ ต่ี ้องการเพ่ิม 5. กาหนดรายละเอียดให้ฟิลด์ใหม่ 6. คลกิ ปมุ่ บนั ทึก

ภาพท่ี 7.15 การเพิ่มฟิลด์ จากนนั้ phpMyAdmin จะสรา้ งฟิลดใ์ หมเ่ ข้าไปในตารางท่ีกาหนด

ภาพท่ี 7.16 ผลลัพธ์ของการเพ่มิ ฟลิ ด์ การแกไ้ ขโครงสร้างของตาราง

หากตอ้ งการเปล่ยี นแปลงแก้ไขโครงสร้างของตาราง เช่น ช่อื ฟิลด์ ชนดิ ข้อมลู หรอื ขนาด ความยาวของฟลิ ด์ เปน็ ตน้ สามารถทาไดด้ งั น้ี

1. เลอื กตารางข้อมูลท่ีต้องการแก้ไขรายละเอยี ดฟิลด์ 2. คลิกไอคอน ของฟิลด์ทต่ี ้องการแก้ไขรายละเอียด 3. แกไ้ ขรายละเอียดตามต้องการ 4. คลกิ ปมุ่ บนั ทึก

164

ภาพที่ 7.17 การแกไ้ ขรายละเอียดฟลิ ด์ หลงั จากนัน้ phpMyAdmin จะแสดงโครงสร้างที่แก้ไข ดังภาพท่ี 7.18

ภาพที่ 7.18 แสดงโครงสรา้ งท่แี ก้ไข การลบฟิลดท์ ไี่ มต่ ้องการออกจากตาราง

ในกรณีที่ตอ้ งการลบฟิลด์ท่ไี ม่ต้องการออกจากตาราง สามารถทาได้ดังน้ี 1. คลกิ เลอื กตารางข้อมูลทต่ี อ้ งการลบ 2. คลกิ ไอคอน ของฟลิ ด์ทีต่ ้องการลบ 3. จะปรากฏไดอะล็อกบ็อกซ์ถามความยืนยนั ใหค้ ลิกปมุ่ ตกลง เพอื่ ยนื ยนั การลบ

ภาพท่ี 7.19 การลบฟิลด์ที่ไม่ตอ้ งการ จากนน้ั phpMyAdmin ก็จะลบฟิลดน์ ั้นออกจากตาราง โดยจะลบข้อมลู ที่เก็บอยู่ในฟิลด์น้นั ดว้ ย

ภาพท่ี 7.20 ผลการลบฟิลดท์ ี่ไม่ต้องการ การใส่ขอ้ มูลในตาราง

เมือ่ สร้างตารางข้อมลู แล้ว เราสามารถจะใส่ข้อมลู ลงในตารางได้ โดยมขี ั้นตอนดังน้ี 1. คลิกเลือกตารางขอ้ มลู ทตี่ อ้ งการใสข่ ้อมูลลงไป 2. คลิกแทบ็ แทรก 3. ใสข่ ้อมูลลงในแต่ละฟิลด์ 4. คลิกป่มุ ลงมือ เพื่อบันทึกลงสู่ฐานข้อมลู

165

ภาพท่ี 7.21 การใสข่ อ้ มลู ในตาราง เมือ่ เสร็จแลว้ phpMyAdmin จะเพิม่ ขอ้ มลู ลงไปในตารางที่กาหนดไว้ ดงั ภาพที่ 7.22

ภาพท่ี 7.22 ผลลัพธข์ องการใส่ข้อมูลในตาราง การอา่ นขอ้ มูลในตาราง

หากต้องการเรียกดหู รอื อ่านข้อมูลทั้งหมดในตารางได้ สามารถทาได้ดังนี้ 1. คลิกเลอื กตารางขอ้ มลู ท่ีต้องการอา่ นข้อมลู 2. คลกิ แทบ็ เปดิ ดู หลงั จากนนั้ phpMyAdmin จะดึงข้อมลู ในตารางออกมาแสดง ดงั ภาพที่ 7.23

ภาพท่ี 7.23 การอ่านข้อมลู ในตาราง

166 การแกไ้ ขขอ้ มูลในตาราง

ข้อมลู ท่ีอย่ใู นตารางข้อมลู เราสามารถทจ่ี ะแก้ไขขอ้ มูลเหล่าน้ันได้ สาหรับวิธีนเี้ ป็นการแก้ไข เพียงแถวขอ้ มลู เดียว โดยทาไดด้ ังน้ี

1. คลกิ เลือกตารางขอ้ มูลท่ตี อ้ งการแกไ้ ขข้อมลู ในตาราง 2. คลกิ แทบ็ เปดิ ดู 3. คลกิ ไอคอน ของแถวข้อมลู ทีต่ ้องการแกไ้ ขข้อมูล 4. ใหแ้ กไ้ ขข้อมูลตามตอ้ งการเหมือนกับการใสข่ ้อมลู ใหม่ 5. คลกิ ปมุ่ ลงมือ

ภาพที่ 7.24 การแกไ้ ขข้อมูลในตาราง หลังจากนั้น phpMyAdmin จะแก้ไขขอ้ มลู ตามท่ีกาหนด ดังภาพท่ี 7.25

ภาพที่ 7.25 ผลลพั ธข์ องการแกไ้ ขข้อมลู ในตาราง

167

การลบแถวข้อมลู ทีไ่ มต่ อ้ งการออกจากตาราง สาหรับวธิ ีการลบขอ้ มูลออกจากตารางน้ัน มีวิธีการเช่นเดียวกบั การแก้ไขข้อมูล ดังนี้ 1. คลกิ เลือกตารางที่ตอ้ งการลบขอ้ มลู 2. คลิกแท็บ เปิดดู 3. คลิกไอคอน เพื่อลบแถวขอ้ มูลออกจากตารางขอ้ มลู 4. จะปรากฏไดอะลอ็ กบ็อกซถ์ ามความยนื ยัน ให้คลกิ ป่มุ ตกลง เพื่อยนื ยันการลบขอ้ มลู

ภาพที่ 7.26 การลบแถวข้อมูลทไี่ ม่ต้องการออกจากตาราง หลังจากนนั้ phpMyAdmin จะลบข้อมูลตามท่เี ลอื ก ดังภาพท่ี 7.27

ภาพที่ 7.27 ผลลัพธก์ ารลบแถวข้อมูลท่ไี ม่ต้องการออกจากตาราง

การแกไ้ ขหรอื ลบข้อมูลครั้งละหลายแถว

ถา้ เราตอ้ งการแก้ไขหรอื ลบข้อมลู ครงั้ ละหลายๆแถว สามารถทาได้ดงั นี้

1. คลิกเครื่องหมายถูกในบรรทัดของข้อมูลที่ต้องการแก้ไขหรือลบ (ในกรณีท่ีต้องการแก้ไข

หรอื ลบแถวข้อมูลทง้ั หมด ใหค้ ลกิ ที่ เลือกทง้ั หมด)

2. คลิกไอคอน เพ่ือแก้ไขข้อมูล หรือ เพื่อลบข้อมูลที่เลือก ท่ีหลังข้อความ

“ทากบั ที่เลอื ก”

ภาพที่ 7.28 การแกไ้ ขหรอื ลบข้อมูลคร้งั ละหลายแถว

168

การส่งขอ้ มลู ในฐานข้อมูลออกไปใช้งาน การส่งข้อมูลในฐานข้อมูลออกไปใช้งาน หรือท่ีเรียกว่า Export น้ัน นอกจากจะเป็นการนา

ฐานข้อมูลน้ีไปใช้งานอื่นๆ เช่น นาฐานข้อมูลไปใช้บนเว็บเซิร์ฟเวอร์จริง เป็นต้น ยังเป็นการแบ็คอัพ ข้อมลู (Backup) ไวเ้ พ่อื สารองข้อมลู เก็บไว้เม่อื เกดิ ปัญหาข้ึนกับฐานข้อมลู เชน่ ฐานข้อมูลเสีย, ข้อมูล สาคัญหาย เป็นต้น การส่งออกฐานข้อมูลนอกจากข้อมูลจะถูกส่งออกแล้ว โครงสร้างของตารางก็จะ ส่งออกไปพร้อมกันด้วย ซ่ึงเราสามารถเลือกประเภทของไฟล์ที่จะส่งออกได้ แต่มักเลือกไฟล์นามสกลุ .sql เนือ่ งจากสามารถนาไปใช้กบั ฐานขอ้ มูลอืน่ ได้ โดยมขี ั้นตอนดงั น้ี

1. คลกิ เลือกฐานข้อมูลทต่ี อ้ งการสง่ ข้อมูลออก 2. คลกิ แท็บ สง่ ออก 3. คลกิ เลือกตารางข้อมลู ทต่ี ้องการสง่ ออก (กรณหี ลายตารางให้กดคยี ์ Ctrl คา้ งไว้แล้วคลิก เลือกตารางข้อมลู ที่ตอ้ งการส่งออก) 4. เลอื กรูปเอกสาร 5. คลิกเครือ่ งหมายถกู ในช่อง ส่งมาเปน็ ไฟล์ 6. คลกิ ปมุ่ ลงมือ

ภาพที่ 7.29 การสง่ ขอ้ มูลในฐานขอ้ มลู ออกไปใชง้ าน

การลบข้อมูลในตารางทง้ั หมด นอกจากเราจะสามารถลบข้อมูลท้ังหมดได้ด้วยการคลิกที่ “เลือกท้ังหมด” แล้ว ยังมีอีกวิธีท่ี

สามารถทาไดอ้ ยา่ งรวดเรว็ ดังน้ี 1. คลิกเลือกตารางขอ้ มลู ทีต่ อ้ งการลบข้อมลู ทั้งหมด 2. คลกิ แท็บ ลบข้อมลู 3. จะปรากฏไดอะล็อกบ็อกซ์ถามความยืนยันให้คลิกปุ่ม ตกลง เพ่ือยืนยันการลบข้อมูล

ทง้ั หมดในตาราง

ภาพที่ 7.30 การลบขอ้ มูลในตารางทัง้ หมด

169 หลังจากน้ัน phpMyAdmin จะลบข้อมลู ทั้งหมดในตาราง ดังภาพท่ี 7.31

ภาพท่ี 7.31 ผลลพั ธก์ ารลบขอ้ มูลในตารางท้งั หมด การลบตารางขอ้ มลู

การลบตารางข้อมลู สามารถทาไดเ้ ช่นเดียวกับการลบฐานข้อมูล เมื่อลบตารางแล้ว ข้อมูลที่ อยู่ในตารางจะถูกลบไปด้วยเชน่ กนั สาหรับวิธกี ารลบตารางขอ้ มูลทาได้ดังนี้

1. คลิกเลือกตารางข้อมลู 2. คลกิ แท็บ โยนทิง้ 3. จะปรากฏไดอะลอ็ กบ็อกซ์ถามความยืนยัน ใหค้ ลิกปุ่ม ตกลง เพอ่ื ยนื ยันการลบตารางทิ้ง

ภาพที่ 7.32 การลบตารางข้อมลู หลงั จากนั้นโปรแกรม phpMyAdmin กจ็ ะลบตารางและข้อมูลที่อยูใ่ นตารางออกไป

ภาพท่ี 7.33 ผลลัพธ์การลบตารางข้อมลู การนาฐานข้อมูลเขา้ มาใช้งาน

หลังจากได้ Export ฐานขอ้ มลู ออกเปน็ ไฟล์นามสกุล .sql แลว้ หากต้องการนาฐานข้อมูลนั้น มาใช้งานตามเดิม หรือใชง้ านท่ีอนื่ เราสามารถ Import ฐานขอ้ มูลน้ันไดโ้ ดยมีข้นั ตอนดังนี้

170 1. คลิกเลือกฐานขอ้ มูลท่ตี ้องการ 2. คลิกแทบ็ Import 3. คลิกปุม่ เลือกไฟล์

ภาพที่ 7.34 การนาฐานขอ้ มูลเข้ามาใชง้ าน 4. เลือกโฟล์เดอรท์ ี่ต้องการ 5. เลอื กไฟล์ 6. คลกิ ปุ่ม Open

ภาพท่ี 7.35 การเลือกไฟลฐ์ านขอ้ มูลที่ตอ้ งการนาเขา้ มาใช้งาน 7. คลิกปุ่ม ลงมือ

171

ภาพที่ 7.36 การแสดงชือ่ ไฟล์ฐานขอ้ มูลท่ีต้องการนาเขา้ มาใช้งาน หลังจากน้นั ฐานข้อมลู จะถูกนาเขา้ มาใชง้ าน โดยประกอบด้วยโครงสรา้ งขอ้ มูล และข้อมูล ดัง

ภาพท่ี 7.37

ภาพที่ 7.37 ผลลพั ธก์ ารนาเข้าฐานขอ้ มูล

การใชง้ านคาส่งั SQL สาหรับจัดการข้อมลู

การจัดการฐานข้อมูล บญั ชา ปะสลี ะเตสงั (2557, 186-201) กลา่ ววา่ สามารถทาโดยการใช้

งานคาสัง่ SQL คาสั่งที่ใชใ้ นการจดั การฐานข้อมลู ประกอบด้วยคาส่งั ดงั ตอ่ ไปน้ี

การแสดงช่ือฐานข้อมูลและตาราง (SHOW/DESCRIBE)

ถา้ เราต้องการตรวจสอบรายชื่อฐานข้อมลู หรือตารางทีม่ ีอยู่ ก็สามารถใช้คาสั่งต่อไปนค้ี ือ

ตารางที่ 7.8 คาสั่งในการตรวจสอบรายชอ่ื ฐานขอ้ มลู หรอื ตาราง

คาสงั่ รายละเอียด

SHOW DATABASES เปน็ คาสั่งในการแสดงรายช่ือฐานขอ้ มูลท้ังหมดท่ีมี

SHOW TABLES FROM ชือ่ แสดงรายชื่อตาราง (Table) ท่ีมอี ยู่ในฐานข้อมูล

ฐานขอ้ มูล (Database) ท่เี ราเลอื ก

DESCRIBE ช่ือตาราง ใช้ในการแสดงโครงสรา้ ง (ข้อกาหนดของแต่ละคอลมั น)์

*** กอ่ นจะใชค้ าสั่ง DESCRIBE ต้องคลิกเลือกฐานข้อมลู ของตารางน้ันก่อนแล้วค่อยเขียน SQL DESCRIBE employees

172

การเพิม่ ขอ้ มลู (INSERT) การใส่ข้อมูลลงในตารางจะต้องใชค้ าส่ัง INSERT ซง่ึ มรี ูปแบบโดยท่วั ไปดังนี้

INSERT INTO ชอ่ื ตำรำง VALUES(คำ่ คอลมั น์_1,ค่ำคอลมั น์_2, … );

ลักษณะการใช้งาน

INSERT INTO employees VALUES(123,“John”,“[email protected]”);

จากรูปแบบของ INSERT ที่กล่าวมาน้ีจะสามารถใส่ข้อมูลได้เพียงคร้ังละ 1 แถว หากจะใส่ ข้อมูลมากกว่า 1 แถว ก็ต้องใช้คาสั่ง INSERT ซ้าๆ ในทุกแถวจนครบ ซ่ึงอาจดูไม่สะดวกนัก แต่ใน MySQL ยังมีวิธีท่ี เราสามารถใส่ข้อมูลพร้อมกันครั้งละหลายๆแถวโดยใช้คาสั่ง INSERT เพียงคร้ัง เดยี ว ในรปู แบบดงั นี้

INSERT INTO ชอ่ื ตำรำง VALUES (ค่ำคอลมั น์_1_ของแถวท_่ี 1,ค่ำคอลมั น์_2_ของแถวท_่ี 1, … ), (ค่ำคอลมั น์_1_ของแถวท_่ี 2,คำ่ คอลมั น์_2_ของแถวท_่ี 2, … ),

... (ค่ำคอลมั น์_1_ของแถวท_่ี N,ค่ำคอลมั น์_2_ของแถวท_่ี N, … );

ลกั ษณะการใช้งาน เชน่

INSERT INTO employees VALUES (123,“John”, “[email protected]”), (456,“Jim”,“[email protected]”), (789,“Jane”,“[email protected]”);

คาแนะนาเพ่มิ เติมในการใส่ขอ้ มูลลงในตาราง 1. ต้องใสข่ ้อมูลใหต้ รงกบั ชนดิ ข้อมลู ของคอลมั น์ นนั้ ท่ีกาหนดเอาไว้ในตอนสร้างตาราง 2. ต้องวางลาดับ ข้อมูลให้ตรงกับลาดับของคอลัมน์ในตารางและต้องใส่ข้อมูลให้ครบทุก

คอลัมน์ 3. ต้องเขียนข้อมูลไว้ในเคร่ืองหมาย ‘…’ หรือ “…” เสมอ ยกเว้นฟังก์ช่ัน ส่วนตัวเลข อาจ

ไมเ่ ขียนก็ได้ 4. ขนาดของข้อมูลต้อง ไม่เกินขนาดตามชนิดคอลัมน์ ท่ีระบุไว้ตอนสร้างตาราง มิฉะนั้น

ข้อมูลบางส่วนโดยเฉพาะอย่างยิ่งส่วนท่ีเกินไปอาจสูญหายได้ หากใส่ข้อมูลเกินขนาด MySQL จะรับ ข้อมูลไว้ไม่เกินค่า maximum หรือค่า length ที่กาหนดเอาไว้ตอนสร้างตาราง ส่วนที่เกินไปจะถูก ตดั ทงิ้ โดยไม่แสดงข้อผดิ พลาดให้ทราบ

5. คอลมั น์ ชนดิ ตวั เลข หากเราใสค่ ่าที่ไมใ่ ช่ตัวเลข MySQL จะใส่เลข 0 ลงในคอลมั น์นั้นให้ แทน

6. คอลัมนท์ ่รี ะบุแอตทรบิ ิวต์ AUTO_INCREMENT มีหลักการดังนี้ 6.1. ให้ใสเ่ ป็นเลข 0 หรอื ไม่ก็ Null String (‘’) แทนการกาหนดคา่ ของคอลัมน์น้นั เช่น

สมมติคอลมั นแ์ รกเปน็ AUTO_INCREMENT ก็อาจกาหนดเปน็ … VALUES(0, ‘John’, 12345) หรอื ... VALUES(‘’, ‘John’, 12345)

6.2. กรณที ่ีไมไ่ ดร้ ะบุคา่ เริ่มตน้ คา่ จะเรม่ิ ตน้ จาก 1, 2, 3, 4,…

173

6.3. ถ้าตอนสร้างตารางเรากาหนดให้คอลัมน์ AUTO_INCREMENT เร่ิมนบั จากตัวเลข ใด แถวแรกของคอลัมน์น้ีก็จะมีค่าน้ัน แล้วแถวต่อๆ ไปก็จะถูกเพิ่มค่าทีละหนึ่งไปเร่ือยๆ ถ้ากาหนด เปน็ AUTO_INCREMENT = 100 ค่าในคอลัมน์จะเร่ิมนบั จาก 100, 101, 102, 103, …

7. คอลัมน์ทมี่ ี คา่ ดีฟอลต์ ใชห้ ลักการดังนี้ 7.1. หากไมใ่ ช่คา่ ดฟี อลตก์ ใ็ หร้ ะบุคา่ ที่ต้องการเหมือนข้อมูลทั่วไป 7.2. หรอื เราจะใส่ค่าทต่ี รงกับค่าดฟี อลต์ลงไปเองกไ็ ด้ 7.3. หากเราต้องการใช้ค่าดีฟอลต์ให้กาหนดด้วยฟังก์ช่ัน DEFAULT (ช่ือคอลัมน์) เช่น

สมมตติ อ้ งการใช้ค่าดฟี อลต์ของคอลมั น์ country ก็กาหนดในลกั ษณะนีค้ ือ … VALUES(123, “abcd”, DEFAULT(country)); 8. ข้อมูลประเภทวันเวลาจะต้องระบุเป็นสตริงในรูปแบบ “Year-Month-Date” เช่น

“2014-06-08” หรือหากมีเวลาด้วยกร็ ะบุในรปู แบบ “Year-Month-Date Hour:Minute:Second” 8.1. Year ใหร้ ะบุเป็นปี ค.ศ. แบบเลข 4 หลัก เช่น 2014 8.2. Month ใหร้ ะบเุ ปน็ เลขลาดับของเดือนจาก 01-12 8.3. Date ใหร้ ะบุคา่ ระหวา่ ง 01-31 8.4. Hour ใหร้ ะบคุ ่าระหวา่ ง 00-23 8.5. Minute และ Second ให้ระบคุ ่าระหว่าง 00-59

หากเราใสเ่ ลขวันเดือนปไี ม่ถกู ตอ้ ง MySQL จะเกบ็ ค่าเป็น “0000-00-00” ใหแ้ ทนโดยไม่แจ้ง ข้อผิดพลาดให้ทราบ และถ้ากาหนดชนิดคอลัมน์เป็น DATETIME แต่ใส่แค่วันเดือนปี MySQL จะใส่ เวลา “00:00:00” ตอ่ ทา้ ยวันเดือนปใี ห้โดยอตั โนมตั ิ ตัวอยา่ งท่ี 7.1 : แนวทางการสร้างและใสข่ ้อมูลลงในตาราง (ขน้ั ตอ่ ไปนจี้ ะทาผา่ น phpMyAdmin)

1. ตอ้ งสร้างฐานข้อมูลขนึ้ มาก่อนแลว้ ในทน่ี ี้จะสร้างฐานข้อมูลชอื่ “pmj” เพือ่ ใช้ประกอบ การศกึ ษา

2. หลงั สรา้ งฐานขอ้ มูล ให้คลิกเลือกเพอ่ื ใช้ฐานขอ้ มลู ดงั กลา่ ว 3. สรา้ งตารางชอื่ employees ให้มโี ครงสรา้ งดังนี้

ตารางที่ 7.9 โครงสร้างตาราง employees

ชอื่ คอลัมน์ ขอ้ กาหนด

id SMALLINT PRIMARY KEY AUTO_INCREMENT

name VARCHAR(80)

gender VARCHAR(10) DEFAULT ‘female’

position VARCHAR(30)

salary INT

email VARCHAR(40) UNIQUE

birthday DATE

*PARTITION definition AUTO_INCREMENT = 100 (เรม่ิ ต้นท่ี 100)

4. แนวทางการใส่ข้อมูลลงในตาราง

174

INSERT INTO `employees`(`id`,`name`,`gender`,`position`, `salary`,`email`,`birthday`) VALUES (' ', 'John', 'male', 'Manager', 50000, '[email protected]', '1980-10-20'), (' ', 'Jane', 'female', 'Accountant', 30000, '[email protected]', '1985-01-31'), (' ', 'Jill', 'female', 'Accountant', 25000, '[email protected]', '1988-05-31'), (' ', 'Jack', 'male', 'Sales', 30000, '[email protected]', '1990-12-01'), (' ', 'Jenny', 'female', 'Sales', 25000, '[email protected]', '1992-02-14'), (' ', 'Jennifer', 'female', 'Secretary', 20000, '[email protected]', '1992-10-01'), (' ', 'Jim', 'male', 'Programmer', 35000, '[email protected]', '1980-04-30'), (' ', 'Jet', 'male', 'Programmer', 75000, '[email protected]', '1987-07-07')

ภาพที่ 7.38 ผลลัพธ์การใส่ขอ้ มลู ลงในตาราง

การเลือกขอ้ มลู (SELECT) คาสง่ั SELECT ใชส้ าหรับการเลอื กขอ้ มูลจากตารางฐานขอ้ มูล โดยมีรูปแบบอย่างงา่ ยดงั นี้

SELECT column_1, column_2, … FROM table_name

การกาหนดคอลมั นเ์ ราอาจจะกาหนดเฉพาะคอลัมน์ที่ต้องการดูข้อมลู เช่น

SELECT name, email FROM employees

กรณีทีต่ อ้ งการดขู ้อมูลจากทุกคอลัมน์อาจใชเ้ ครื่องหมาย * แทนการกาหนดช่อื คอลัมน์กไ็ ด้ เชน่

SELECT * FROM employees

การกาหนดเงือ่ นไข (WHERE) WHERE ใช้ในการกาหนดเง่อื นไขของข้อมูลทต่ี อ้ งการ เช่น ตอ้ งการเฉพาะข้อมูลของ

พนกั งานเพศหญงิ ท่มี ีอายุไม่เกนิ 30 ปี และยังไม่แตง่ งาน เปน็ ต้น รูปแบบการใช้ WHERE ร่วมกับ SELECT คอื

175

SELECT column_1, column_2, … FROM table_name WHERE condition

เงื่อนไขของคาสั่ง WHERE จะออกมาในรูปแบบของการเปรียบเทียบลักษณะ เท่ากับ, มากกว่า, น้อยกว่า, ระหว่าง เป็นตน้ โดยการเปรียบเทยี บน้ีจาเป็นตอ้ งใชโ้ อเปอเรเตอร์ ดังตอ่ ไปนี้

การใช้ LIKE และ Wildcard

เราใช้ LIKE เมื่อเราทราบข้อมูลเพียงบางส่วน เช่น ชื่อขึ้นต้นด้วยตัว “S” เป็นต้น และจาก

การที่เราทราบข้อมูลไม่ครบ ส่วนที่เหลือจึงต้องเขียนแทนด้วยสัญลักษณ์ที่เรียกว่า Wildcard เพื่อให้

โปรแกรมสามารถค้นหาข้อมูลท่ีตรงตามรูปแบบท่ีเราต้องการได้ สัญลักษณ์ Wildcard ที่ใช้แทน

อกั ขระต่างๆ มีดงั นี้

ตารางท่ี 7.10 สัญลกั ษณ์ Wildcard ทใี่ ช้แทนอกั ขระ

เครอ่ื งหมาย รายละเอยี ดการทางาน

% ใช้แทนอกั ขระจานวนกตี่ วั ก็ได้ (ไม่มเี ลยก็ได)้ เชน่

- ‘a%’ หมายถึง ขึ้นต้นด้วยตัว a เชน่ ant, anaconda

- ‘%a%’ หมายถงึ มตี วั a อยู่ด้วย (อยใู่ นตาแหนง่ ใดก็ได)้ เชน่ apple, orange,

banana

- เครอื่ งหมาย underscore ใช้แทนอกั ขระเพียง 1 ตวั (ต้องมีเสมอ) เช่น

- ‘an_’ หมายถงึ ต้องมีตัวอักขระ 1 ตัวต่อทา้ ย an เช่น and, any, ant

- ‘_an’ หมายถึง ตอ้ งมตี ัวอกั ขระ 1 ตวั อยู่กอ่ น an เชน่ man, can, fan

[ ] ใช้กาหนดช่วงของตวั อกั ษรทมี่ ีลาดับต่อเนอ่ื งกนั เช่น

- [A-F] หมายถงึ ตวั อกั ษรต้งั แต่ A ถงึ F ตวั ใดก็ได้

- [j-p]an หมายถึง ขึ้นต้นด้วยตัวอักษรในช่วง j-p แล้วตามด้วย an เช่น jan,

man, pan

[^ ] ใชก้ าหนดชว่ งของตวั อกั ษรท่ีไมต่ ้องการ เชน่

- [^A-F] หมายถงึ ตอ้ งไม่มตี วั อักษรจาก A ถึง F

- [^j-p]an หมายถงึ ข้ึนต้นด้วยตัวอกั ษรที่ไมไ่ ดอ้ ยใู่ นช่วง j-p แล้วตามด้วย an

ลักษณะการใช้ LIKE รว่ มกับ Wildcard เชน่

SELECT * FROM employees WHERE email LIKE '%yahoo%'

การใช้ Comparison Operators Comparison Operators คือโอเปอเรเตอร์ในการเปรียบเทียบ ได้แก่ =, != (หรือ <>), >,

<, >= และ <= ซึ่งโอเปอเรเตอร์เหล่านี้เราคุ้นเคยกันดีอยู่แล้ว โดยเปรียบเทียบคอลัมน์กับเง่ือนไขท่ี ต้องการ เชน่

176

SELECT * FROM employees WHERE salary >=30000

การใช้ AND และ OR AND จะให้ผลลพั ธ์เป็นจริงเมือ่ ทงั้ สองนิพจนเ์ ป็นจรงิ นอกน้ันเปน็ เทจ็ หมด เชน่

SELECT * FROM employees WHERE (gender='female') AND (salary >=25000)

ส่วน OR นั้นจะให้ผลลัพธ์เป็นเท็จเม่ือทั้งสองนิพจน์เป็นเท็จ นอกน้ันเป็นจริงหมด หรืออาจ กลา่ วได้ว่าหากมอี ย่างนอ้ ย 1 นพิ จนเ์ ปน็ จรงิ ผลลัพธ์ทีไ่ ดก้ จ็ ะเป็นจรงิ ดว้ ย เชน่

SELECT * FROM employees WHERE (email LIKE = '%@hotmail.com') OR (email LIKE = '%@gmail.com')

ซึ่งจากคาส่ัง SQL น้ีจะพบว่าเราต้องการข้อมูลท่ีเง่ือนไขของคอลัมน์เดียวกันสามารถหาได้ หลายค่า จะต้องใช้ OR เพ่ือระบุช่ือคอลัมน์ซ้ากันหลายครั้งจึงอาจจะไม่สะดวก ซ่ึงถ้าเงื่อนไขของเรา เป็นแบบนี้เราสามารถเปล่ียนจากการใช้ OR ไปใช้ IN แทนได้ โดยการใช้ IN จะกล่าวถึงในหัวข้อ ต่อๆไป

การใช้ BETWEEN…AND… และ NOT BETWEEN..AND.. BETWEEN…AND… ใช้ในการเปรยี บเทียบวา่ ข้อมูลน้นั อยรู่ ะหวา่ งชว่ งเงอ่ื นไขท่กี าหนดหรือไม่ เช่น

SELECT * FROM employees WHERE salary BETWEEN 20000 AND 25000

ส่วน NOT BETWEEN..AND.. จะใชใ้ นทางตรงกันข้ามคือต้องไมอ่ ยูภ่ ายในระหว่างคา่ ทรี่ ะบุ เช่น

SELECT * FROM employees WHERE salary NOT (BETWEEN 20000 AND 25000)

การใช้ IN และ NOT IN สาหรบั โอเปอเรเตอร์ IN เราจะนาไปใช้ใน 2 ลกั ษณะคอื 1. ใช้เมื่อเง่ือนไขของคอลัมน์ใดคอลัมน์หน่ึงสามารถเป็นไปได้หลายค่า ซึ่งกรณีนี้หากเราใช้

IN แทน OR จะ เขยี นโคด้ ได้งา่ ยกวา่ 2. การใช้ IN ในอีกลักษณะคือการใช้ในรูปแบบของ Subquery ซึ่ง MySQL เร่ิมนา IN มา

ใช้กับ Subquery ต้งั แตเ่ วอร์ชน่ั 4.2 เป็นต้นมา สาหรบั เรื่อง Subquery นี้จะกลา่ วในหัวข้อต่อๆไป ในหัวขอ้ น้ีจะกลา่ วถึงการใช้ IN แทน OR ไปก่อน เชน่ ถ้าเรามีเง่ือนไขวา่ ต้องการข้อมูลของ

พนกั งานท่ีช่ือ Jim หรือ John หรือ Jack หากใช้ OR จะเป็นดงั นี้

SELECT * FROM employees WHERE name = 'Jim' OR name = 'John' OR name = 'Jack'

หากเปลีย่ นมาใช้ IN จะได้ดังโคด้ ตอ่ ไปน้ี ซงึ่ จะพบว่าการใช้ IN จะสนั้ และกระชบั กวา่ OR

177

SELECT * FROM employees WHERE name IN( 'Jim' , 'John' , 'Jack')

ส่วนการใช้ NOT IN จะใช้ในการตรงกันข้ามกับ IN น่ันคือต้องไม่อยู่ภายในเงื่อนไขท่ีกาหนด เชน่ สมมติวา่ เราตอ้ งการขอ้ มูลของพนักงานทกุ คนยกเวน้ คนทชี่ ่ือ Jill และ Jane จะใช้ NOT IN ดังน้ี

SELECT * FROM employees WHERE name NOT IN( 'Jill' , 'Jane')

การปอ้ งกันการเลือกซ้า (DISTINCT) บางครั้งข้อมูลที่อ่านได้จากตารางฐานข้อมูลจะมีความซ้าซ้อนกัน หากเราต้องการให้ข้อมูล

ปรากฏเพียงครั้งเดียวหรือถ้าข้อมูลซ้ากันให้นามาแสดงเพียงคร้ังเดียวต้องใช้คาสั่ง DISTINCT เข้ามา ชว่ ยในรปู แบบดงั นี้

SELECT DISTINCT(column_name)

เช่น หากเราต้องการทราบว่าในตาราง employees มีตาแหน่งงานอะไรบ้าง เน่ืองจาก พนักงานหลายคนอาจมตี าแหนง่ เหมือนกัน จึงป้องกันการซ้าซอ้ นด้วย DISTINCT ดังน้ี

SELECT DISTINCT(position) FROM employees

การกาหนดคอลัมนผ์ ลลัพธ์ (AS) เราสามารถนาขอ้ มูลในคอลัมนม์ าประมวลผลบางอยา่ งด้วยการ บวก, ลบ, คณู , หาร กอ่ น

เช่น การเพ่ิมเงินเดือนให้พนักงานทุกคนอีก 10% ก็นาข้อมูลในคอลัมน์ salary มาบวกเพิ่มไปอีก 10% เปน็ ตน้ หากเปน็ การเลอื กฐานขอ้ มูลดว้ ย SELECT เราจะนาผลลัพธ์ท่ีได้ไปเกบ็ ไว้ในอกี คอลัมน์ หนึง่ โดยเราตอ้ งตั้งชอ่ื คอลัมนใ์ หม่ด้วย AS เช่น

SELECT name, salary AS old_salary, salary + (salary * 0.1) AS new_salary FROM employees

ภาพที่ 7.39 ผลลัพธ์การสรา้ งคอลมั น์ใหมด่ ว้ ย AS

178

การเรียงลาดับผลลัพธ์ (ORDER BY) ปกตแิ ล้วผลลัพธท์ ไี่ ดม้ กั ถูกจัดเรียงตามลาดบั เหมือนกับในตารางฐานข้อมลู แตเ่ รามามารถสั่ง

ให้ฐานข้อมูลจัดเรียงลาดับผลลัพธ์ใหม่ตามท่ีเราต้องการได้ เช่น การคัดเลือกข้อมูลพนักงานโดยการ จัดเรยี งตามลาดบั อายุ เป็นต้น การเรยี งลาดบั จะใชค้ าสง่ั ORDER BY ซงึ่ มีรปู แบบดังนี้

ORDER BY column_1, column_2, … [ ASC | DESC ]

สาหรับคอลัมน์ท่ีจะใช้เรียงลาดับอาจมีเพียงคอลัมน์เดียวหรือมีมากกว่า 1 คอลัมน์ก็ได้ หาก เราระบุมากกว่า 1 คอลัมน์ ฐานข้อมูลจะนาคอลัมน์แรกที่ระบุมาเป็นเกณฑ์ในการเรียงลาดับก่อน และถ้าข้อมูลในคอลัมน์นี้ซ้ากัน ก็จะนาคอลัมน์ถัดไปมาพิจารณาต่อไปเร่ือย ๆเราสามารถกาหนดได้ ว่าจะให้เรียงลาดับข้อมูลแบบใด ระหว่างเรียงจากน้อยไปมาก (ASC) หรือเรียงจากมากไปน้อย (DESC) ซึ่งค่าดีฟอลต์คือ ASC ดงั นน้ั หากเราไมร่ ะบุ ก็จะเปน็ การเรยี งจากนอ้ ยไปหามาก เชน่

SELECT * FROM employees ORDER BY salary DESC

ภาพที่ 7.40 ผลลพั ธก์ ารเรยี งลาดบั โดยใช้ ORDER BY

การกาหนดช่วงแถวข้อมลู ผลลัพธ์ (LIMIT) การจากัดผลลัพธ์ เป็นการคัดเอาเฉพาะช่วงแถวที่กาหนดโดยใช้คาสั่ง LIMIT เช่น ต้องการ

เพยี ง 10 แถวแรก หรอื 5 แถวสุดท้าย หรือแถวท่ี 10-20 เป็นต้น รปู แบบคือ

LIMIT [ start, ] num_rows

start คือลาดับแถวเริ่มต้นท่ีต้องการ ท้ังน้ีแถวแรกจะมีลาดับเป็น 0 เสมอ ซึ่งค่า start น้ี จะกาหนด

หรือไม่กไ็ ด้ หากไม่กาหนดกจ็ ะถือว่าเริม่ จากแถวแรกเปน็ ตน้ ไป num_rows คอื จานวนแถวทีต่ ้องการโดยนับจากลาดบั start เรานิยกใช้ LIMIT ควบคู่กับ ORDER BY เนื่องจากต้องการให้ข้อมูลผลลัพธ์ถูกจัด เรียงลาดับก่อน การคัดเลือกช่วงข้อมูลจึงจะไม่ผิดพลาด เช่น ถ้าเราต้องการข้อมูล 3 แถวแรก ก็ กาหนดคาส่งั SQL ดงั นี้

SELECT * FROM employees ORDER BY salary LIMIT 3

179

ถ้าต้องการข้อมูลผลลัพธ์เฉพาะลาดับแถวท่ี 3 – 5 แสดงว่าต้องเร่ิมอ่านลาดับแถวท่ี 2 (แถวแรกลาดบั เปน็ 0) ไปอกี 3 แถว ดังนนั้ ลักษณะของคาสงั่ SQL เปน็ ดงั นี้

SELECT * FROM employees ORDER BY salary LIMIT 2 , 3

ในกรณีที่เรากาหนดค่าจานวนแถวที่ต้องการอ่านเกินกว่าจานวนข้อมูลท่ีมีอยู่จริง ก็จะได้ ผลลัพธเ์ ท่าทข่ี ้อมลู นัน้ มีอย่จู ริง เช่น ถา้ เรากาหนดชว่ งเป็น LIMIT 100; แตส่ มมตวิ า่ ขอ้ มูลที่ตรงตาม เง่อื นไขมเี พียง 50 แถว ก็จะไดผ้ ลลพั ธ์เปน็ ข้อมลู 50 แถว โดยไมเ่ กิดขอ้ ผดิ พลาดใดๆ

นอกจากน้ียังสามารถใช้ LIMIT กาหนดช่วงการเปล่ียงแปลงข้อมูลร่วมกับ DELETE, UPDATE เพ่ือให้เกิดการเปลี่ยนแปลงเฉพาะข้อมูลที่อยู่ในช่วงที่กาหนด ซ่ึงจะกล่าวถึงในหัวข้อต่อๆ ไป

การใชข้ อ้ มลู จากหลายตาราง (JOIN) เน่ืองจากตารางฐานข้อมูลแต่ละตาราง ก็อาจใช้จัดเก็บข้อมูลเฉพาะเรื่องใดเรื่องหนึ่ง แต่

ข้อมูลท่ีเราต้องการอาจมีหลายเรื่องรวมกัน ซ่ึงการใช้ข้อมูลเพียงตารางใดตารางหน่ึงอาจไม่เพียงพอ ดังน้ันจึงจาเป็นต้องนาข้อมูลจากหลายตารางมาประกอบเข้าด้วยกัน สาหรับใน MySQL

สนับสนุนการใช้ข้อมูลจากหลายตารางในหลายรูปแบบ แต่ในท่ีน้ีจะกล่าวถึงเฉพาะแบบที่ สาคัญๆ ที่นิยมนาไปประยุกต์ใช้ในระบบงานจริงเท่านั้น สมมติว่าเรามี 2 ตารางคือ book และ pubinfo สาหรับใช้เก็บข้อมูลหนังสือ และข้อมูลของสานักพิมพ์ตามลาดับ ซึ่งในหัวข้อการใช้ข้อมูล จากหลายตารางจะใช้ข้อมูลจาก 2 ตารางข้างบนน้ีประกอบการอธิบาย โดยทั้งสองตารางถูก เชื่อมโยงกันด้วยคอลมั น์ pub_id ดังตอ่ ไปน้ี

ตาราง book ตาราง pubinfo

ภาพท่ี 7.41 ข้อมูลตาราง book และ pubinfo

หลักการคัดเลือกข้อมูลจากหลายตารางคือ ให้นาคอลัมน์ที่ใช้เชื่อมโยงระหว่างตารางมา เปรียบเทียบกันนั้น ดังนั้นในแต่ละตารางต้องมีคอลัมน์ท่ีใช้ในการเช่ือมโยงข้อมูลระหว่างกัน หรือมี คอลัมน์ที่สามารถเปรียบเทียบกันได้ เช่น ตาราง book และ pubinfo ท่ีเชื่อมโยงกันด้วยคอลัมน์ pub_id เป็นต้น

การอ้างถงึ ตารางและคอลัมน์