PHP,MYSQL,BOOTSTAP

สารบญั ก

รายการ หนา

บทที่ 1 Bootstrap 1
2
- ความหมายของเวบ็ ไซต 3
- วิวฒั นาการเวบ็ ไซต 4
- โครงสรางพื้นฐานของ HTML 4
- HTML5 คอื อะไร 4
- CSS คืออะไร 5
- JavaScript คอื อะไร 5
- jQuery คอื อะไร 6
- การออกแบบโครงสรา งเวบ็ ไซต 7
- Bootstrap คืออะไร 11
- การตดิ ตัง้ Bootstrap และจดั เตรียมไฟลก อนใช Bootstrap 24
- การจัดรปู แบบตา งๆ ดวย Bootstrap CSS 31
- การใชง าน Bootstrap Components ตางๆ 32
35
บทที่ 2 PHP 35
47
- เรม่ิ ตน กับ PHP 81
- คําส่งั การแสดงผล PHP 82
- การใช Comment ในภาษา PHP 85
- รูจกั ตวั ดําเนินการในภาษา PHP 88
- การกําหนดเงื่อนใขในภาษา PHP (if..else, switch..case) 88
- ฟงกช นั ดา นวนั ที่และเวลา 89
- Session และ Cookie ในภาษา PHP 93
- การสงคา และรบั คา PHP $ _GET, $ _POST และ $ _REQUEST 94
95
บทที่ 3 MySQL 97
99
- ความหมายของ MySQL
- phpMyAdmin สาํ หรับจัดการฐานขอ มูล MySQL
- การสรางฐานขอมูลใหม
- การตดิ ตอฐานขอมลู MySQL ดวย PHP
- การใชคาํ สัง่ insert เพมิ่ ขอมูลลงตาราง
- การใชคําส่งั Select ดงึ ขอมูลจากฐานขอมลู มาแสดงบนหนาเว็บ
- การใชค ําส่ัง update เพื่อแกไขขอมลู ในตาราง
- การใชคาํ สั่ง delete เพอ่ื ทาํ การลบขอมลู ออกจากตาราง

-

บทที่ 1

bootstrap

1

เว็บไซต (Website) ความหมายของเว็บไซต ประโยชนที่สําคัญ และองคประกอบตางๆ

เว็บไซต (Website) หมายถึง หนาเว็บเพจท่ีจัดทําข้ึน เพ่ือนําเสนอขอมูลตางๆ ผานทางคอมพิวเตอรและ

อินเทอรเน็ต โดยจะมีหนาเว็บเพจหลายๆ หนาที่เช่ือมโยงเขากับไฮเปอรลิงค เพื่อใหสามารถเปดไปยังหนาเพจตางๆ ไดอยาง
งายดายและถกู จัดเก็บไวใน www. (เวิลดไวดเว็บ) โดยเว็บไซตสวนใหญนั้นก็มีท้ังเว็บไซตที่เปดใหเขาชมไดฟรี และเว็บไซตท่ีตอง
สมคั รสมาชกิ และเสยี คา บรกิ าร จงึ จะเขา ใชงานเวบ็ ได ซึ่งขอมูลในเว็บก็จะมีหลากหลายแบบ ขึ้นอยูกับความตองการนําเสนอของ
เจาของเวบ็ ไซต การเรียกดูเว็บไซตจะเรยี กดผู า นทางซอฟตแวร ในลกั ษณะของเบราวเ ซอร

เว็บเบราวเซอร (Web browser) คือโปรแกรมคอมพิวเตอรท่ีใชในการทองเว็บ และมีการจัดเก็บขอมูล

สารสนเทศตางๆ ดวยภาษาเฉพาะ เชน ภาษา HTML ซึ่งก็เปรียบเสมือนกับเปนเคร่ืองมือท่ีใชในการติดตอกับเครือขาย
คอมพิวเตอรขนาดใหญท เี่ รยี กวา เวิลดไวดเ ว็บ นอกจากนี้ยงั สามารถดูเอกสารในเว็บเซิรฟเวอรได ไมวาเว็บเหลาน้ันจะแสดงขอมูล
ในลักษณะของภาพ ระบบมัลตมิ เี ดยี รปู ภาพหรอื ขอ ความ ในปจ จุบันเวบ็ เบราวเซอรท่ีรองรับระบบ HTML 5 สามารถอาน CSS 3
ไดอ ยา งสวยงาม และกําลงั ไดร ับความนยิ มมากทส่ี ุด ก็มี 4 ประเภทดังน้ี

Internet Explorer
Mozilla Firefox
Google Chrome
Safari

โฮมเพจ (Home Page) ก็คือหนาแรกของเว็บไซตเม่ือเปดเขาไปยังเว็บไซตใดเว็บไซตหนึ่ง โดยหนาแรกน้ีจะรวม

เมนูและเร่ืองราวตางๆ ไวมากมาย ซ่ึงก็มคี วามสาํ คัญเปนอยา งมาก เพราะหากหนา แรกมีการออกแบบไดอ ยา งสวยงามและจัดหนา
อยางเปนระเบียบกจ็ ะทาํ ใหผ ชู มเกิดความสนใจและอยากเขา ชมเวบ็ มากขนึ้

เว็บเพจ (Web Page) ก็คือหนาเอกสารตา งๆ ที่อยูในรปู ของ HTML โดยจะนําเสนอขอมูลหรือเรื่องราวตางๆ เปน

หนา ๆ ไป และใชการเชื่อมโยงเพื่อใหส ามารถคลิกไปหนาเว็บเพจแตละหนาไดงายขน้ึ

เว็บ Static คือเว็บที่แสดงผล เพ่ือใหความรูหรือขอมูลแกผูเขาชมเว็บเพียงอยางเดียว ไมสามารถโตตอบหรือรับสง

ขอ มลู กับผูทีเ่ ขา ชมเว็บได ซ่ึงสวนใหญแลวเว็บไซตประเภทนี้ ก็จะเปนเว็บ Gallery รูปภาพ เว็บของบริษัทหรือองคกรตางๆ และ
เวบ็ ใหความรทู ัว่ ไป

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

2

เว็บ Dynamic เปน เว็บไซตท่ีสามารถตอบโต และรับสง ขอ มลู ระหวา งผูเ ขาชมกบั เวบ็ ไซตไ ด ซงึ่ เว็บเหลานีส้ วนใหญก็

จะมรี ะบบเวบ็ บอรด รวมไปถงึ Social Media ประเภทตา งๆ มีการสมคั รสมาชิก หรอื เปน เว็บขายสินคา ออนไลนที่มีระบบแชทกับ
ผูขาย เปน ตน

Web Service เปนบริการดานขอ มลู ทส่ี ามารถดึงขอมูลของอกี เว็บหน่งึ ไปแสดงผลในอีกเวบ็ หนงึ่ ได
Hosting เปนพ้ืนท่ีของคอมพิวเตอรแมขาย ที่ทางผูใหบริการไดทําการจัดสรรมาใหเชา โดยสวนใหญจะมีการใหเชา

เปนแบบรายเดอื น รายปหรือตามแตผูใหบริการกําหนด

อนิ เตอรเ น็ต (Internet) เปนตวั กลางในการเชือ่ มตอใหผคู นสามารถทอ งเวบ็ ไซตต างๆ ไดอ ยางงา ยดาย และชวย

ใหกลุมองคกร ธุรกิจหรือบริษัทสามารถนําเสนอขอมูลของตนลงบนอินเทอรเน็ต ผานทางเว็บไซต เปนการใหความรูและ
แลกเปลี่ยนขอ มูลขาวสารตอกันไดอ ยางมีประสิทธภิ าพ

วิวัฒนาการเว็บไซต

WEB 1.0 คืออะไร

เวบ็ 1.0 เปน เว็บในยุคเร่ิมตนและยังคงมีใหเห็นอยูในปจจุบัน มักมีรูปแบบของไฟลเปนนามสกุลเปน .htm และ .html
ทําหนาท่ีใหขอมูลขาวสารในแบบส่ือสารทางเดียว (One Way Communication) เจาของเว็บไซตหรือผูสงสารจะเปนผูกําหนด
เนื้อหาเองท้ังหมด และตองมีความรูพ้ืนฐานการทําเว็บและยากท่ีจะแบงปนสงตอเนื้อหาออกไป ผูใชหรือผูรับสารมีหนาที่รับรู
ขาวสารเพียงอยา งเดียวไมส ามารถโตตอบได เชน เดยี วกบั สอื่ กระแสหลกั อ่นื ๆ เชน หนังสอื พิมพวทิ ยแุ ละโทรทัศน

WEB 2.0 คอื อะไร

เวบ็ 2.0 เปนเวบ็ ในปจ จุบันท่ีมีการใชอินเตอรเน็ตเพ่ือเขียนบล็อก (Blog), แชรรูปภาพ, รวมเขียนวิกิ(Wiki), แสดงความ
คิดเหน็ (Post Comment), พดู คยุ ถกเถยี ง นินทา ประจาน ใสร า ย ทั้งจากเจาของเว็บไซต หรอื จากคนทเี่ ขามาใชงานเว็บไซต, หา
แหลงขอมูลดวยอารเอสเอส (RSS) เพื่อฟด (Feed) มาอาน รวมท้ังกูเกิล (Google) เว็บยุค 2.0 จะใหความสําคัญกับผูเขาชม
เว็บไซต โดยท่ีผูเขาชมเว็บไซตจะมีสวนรวมตอเว็บไซตมากขึ้น ไมใชแคเขามาชมเว็บไซตที่เจาของเว็บจัดทําข้ึนเทาน้ัน ผูเขาชม
เว็บไซตสามารถสรางขอมูล (Content) ของเว็บไซตข้ึนมาไดเองหรือสามารถกําหนดคําสําคัญของเว็บไซตที่เก่ียวของขอมูล (tag

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

3

content) ทําใหขอมูลในเว็บไซตน้ันมีการ update และพัฒนา ปรับปรุง อยางรวดเร็ว กลายเปนเว็บไซต ท่ีมีรูปแบบของการ
สือ่ สารเปนแบบสองทาง (Two Way Communication)

WEB 3.0 คอื อะไร

เวบ็ 3.0 เปน เวบ็ ในยุคอนาคตอนั ใกล คอื เวบ็ ทม่ี กี ารพฒั นาการตอจากเว็บ 2.0 ความแตกตางคือสรางความฉลาดเทียม
ใหก บั ส่ิงไมม ชี ีวิตใชเ ปน เคร่ืองมือชวยคาดเดาพฤติกรรม วิเคราะหความตอ งการของมนุษย เม่ือไดขอมูลนัน้ มา ระบบจะประมวลผล
อยางมเี หตผุ ลพรอมท้ังแกไ ขสถานการณเฉพาะหนา สรา งสงิ่ ทต่ี องการใหผ ูใ ชเว็บไซตมีการเช่อื มโยงเนื้อหาสมั พนั ธทีม่ คี วามสมั พันธ
กนั กับแหลง ขอ มลู อน่ื ๆ เปนเครอื ขายเดียวทว่ั โลก มีการพัฒนารูปแบบที่เปนมาตรฐานใชรวมกันในแบบเอกซเอ็มแอล (XML) แต
อาจเกิดปญหาการละเมิดลิขสิทธ์ิ เพราะบทความท่ีมีเปนจํานวนมากและอาจไมรูวาแหลงขอมูลใดเปนของเจาของอยางแทจริง
ประกอบกับความไมม นั่ ใจวา ขอมูลที่มอี ยูมากมายมหาศาลน้ัน ขอมูลใดมีคุณภาพ ส่ิงหนึ่งที่นาจะเกิดข้ึนในยุค Web 3.0 คือ การ
แกไขปญหาของขอมูลหรือ Content ท่ีไมมีคุณภาพตางๆ และพัฒนาระบบการจัดการขอมูลในเว็บใหดีขึ้น เพ่ือใหผูเย่ียมชม
สามารถเขาถึงเน้อื หาของเวบ็ ไดดขี ้ึนและตรงตามความตองการ

WEB 4.0 คืออะไร

นอกจากการกลาวถึง Web 3.0 แลว ยังมีการคาดการณเทคโนโลยีเว็บไปถึง WEB 4.0 ซ่ึงมีการเรียกกันวา “A
Symbiotic web” คือ เว็บท่ที ํางานแบบ Artificial Intelligence (AI) ท่ฉี ลาดมากยง่ิ ขึน้ คอมพวิ เตอรสามารถคิดได มีความฉลาด
มากข้ึน ในการอานท้ังเน้ือหา ขอความ และรูปภาพ หรือวีดีโอ สามารถท่ีจะตอบสนองหรือตัดสินใจไดวาจะ load ขอมูลอะไร
จากไหน จึงจะใหป ระสิทธภิ าพดที ี่สุดมาใหผ ูใ ชงานกอนกอน และนอกจากน้ียังมีรูปแบบการนํามาแสดงท่ีรวดเร็ว เว็บ 4.0 จะทํา
ใหเว็บ หรือขอ มลู ตางๆ สามารถทาํ งานไดแ ทบจะทุก อปุ กรณหรอื อาจจะชวยระบุตวั ตนท่แี ทจริงของผูใ ชได

โครงสรางพนื้ ฐานของ HTML

โครงสรางของ HTML จะประกอบไปดวยสวนของคําส่ัง 2 สวน คือ สวนที่เปน สวนหัว (Head) และสวนท่ีเปนเน้ือหา
(Body) โดยมรี ูปแบบคาํ ส่ังดงั นี้

HTML คืออะไร

HTML เปน ภาษาประเภท Markup Language ท่ใี ชในการสรางเว็บเพจข้ึนมา โดยมีแมแบบท่ีมาจากภาษา SGML โดย
HTML จะเปนภาษาในการสรางเว็บ ที่สามารถเรียนรู และทําความเขาใจไดงาย ซ่ึงในปจจุบันก็มีการนํามาใชกันอยางแพรหลาย
และมกี ารพัฒนาและกาํ หนดมาตรฐานจากองคกร World Wide Web Consortium (W3C)

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

4

อธบิ ายงา ยๆ HTML คอื ภาษาหลักท่ีนํามาใชในการเขียนเว็บเพจข้ึนมา เพื่อใหไดหนาเว็บเพจท่ีสมบูรณท่ีสุด โดยจะใช
<Tag></Tag> ในการกําหนดการแสดงผลของ HTML ท่ีแสดงอยูบนหนาเว็บเพจ และเน่ืองจาก HTML ยอมาจากคําวา
Hypertext Markup Language จึงมีความหมายโดยรวมวา เปนภาษาในการเขียนเว็บเพจที่ใช Tag กําหนดการแสดงผลบนเว็บ
เพจท่ีตางเชือ่ มโยงถึงกันใน Hyperspace ผา น Hyperlink นน่ั เอง

HTML5 คือ

ภาษามารก อัปทใ่ี ชสาํ หรับเขียน website ซ่ึง HTML5 นเี้ ปน ภาษาที่ถูกพฒั นาตอ มาจากภาษา HTML และพัฒนาข้ึนมา
โดย WHATWG (The Web Hypertext Application Technology Working Group) โดยไดมีการปรับเพิ่ม Feature หลายๆ
อยา งเขามาเพอื่ ใหผพู ัฒนาสามารถใชง านไดงายมากยิ่งข้นึ

ขอดขี อง HTML5

1. เวบ็ ไซตท ีส่ รา งจากภาษา HTML5 สามารถแสดงผลไดก บั ทกุ web browser
2. HTML5 จะชวยลดการใชพวกปลั๊กอินพิเศษอยางพวก Adobe Flash, Microsoft Silverlight, Apache Pivot
สนบั สนุน วดิ โี อ และ องคประกอบเสยี ง รวมทง้ั ส่อื มลั ตมิ เี ดยี ตางๆมากข้ึน โดยไมต องใช Flash
3. มกี ารจดั การขอ ผดิ พลาดทด่ี ขี นึ้
4. สครปิ ตใ หม ท่ีจะมาแทนทีส่ คริปตเ ดิม (เขยี นโคดสน้ั ลง)
5. HTML5 มคี วามเปนอิสระสงู (คลายๆ XML )
6. HTML5 ทํางานควบคูกับ CSS3 ไดดี ชวยใหสามารถเพ่ิมลูกเลนตางๆบนเว็บไซตไดสวยงามมากยิ่งขึ้น (CSS คือสวน
แสดงผล ทน่ี กั ออกแบบสามารถกําหนดสีสัน ตําแหนง ลักษณะเวลานําเมาสไปแหยแลวมีกระตายโผลออกมาจากโพรง
หรอื จบั กอนวัตถใุ นหนาเวบ็ ฯ ใหชิดซายชิดขวา สวน CSS3 คือเวอรช่ันที่ 3 ของ CSS )

Features ใหมๆ ของ HTML5

1. Semantic Markup : การเพิ่ม Element ที่ อา นงา ยมากข้ึน และชว ยให เราทํา SEO ไดมปี ระสิทธิภาพมากย่งิ ข้นึ
2. Form Enhancements : เพิ่มความสามารถของ Form ตางๆ ไมวาจะเปน Input type, Attribute หรือ แมแต
Element
3. Audio / Video: รองรบั การอานไฟลเสียง และ วดี โี อ โดยไมจาํ เปนตอ งใช Embed Code ของ Third Party
4. Canvas : ใชในการวาดรูป โดยจําเปน ตองใช JavaScript ชว ย
5. Content Editable: สามารถแกไ ข Content ไดโดยตรงผา นทางหนาเว็บ
6. Drag and Drop : ลากวางObject ได เพ่อื เพ่มิ การ ตอบสนองระหวางระบบกบั ผใู ช
7. Persistent Data Storage : มีการจัดการทด่ี ีข้ึน โดยเกบ็ ขอ มลู ลงบนเคร่ืองของผใู ช

CSS คอื อะไร

CSS คือ ภาษาที่ใชสําหรับตกแตงเอกสาร HTML/XHTML ใหมีหนาตา สีสัน ระยะหาง พ้ืนหลัง เสนขอบและอ่ืนๆ
ตามทตี่ อ งการ CSS ยอ มาจาก Cascading Style Sheets มลี กั ษณะเปน ภาษาทีม่ ีรปู แบบในการเขียน Syntax แบบเฉพาะและได
ถูกกาํ หนดมาตรฐานโดย W3C เปน ภาษาหนึ่งในการตกแตงเวบ็ ไซต ไดรับความนยิ มอยา งแพรห ลาย

JavaScript คืออะไร

JavaScript คือ ภาษาคอมพิวเตอรสําหรับการเขียนโปรแกรมบนระบบอินเทอรเน็ต ที่กําลังไดรับความนิยมอยางสูง
Java JavaScript เปน ภาษาสคริปตเชิงวัตถุ (ที่เรียกกันวา "สคริปต" (script) ซ่ึงในการสรางและพัฒนาเว็บไซต (ใชรวมกับ
HTML) เพื่อใหเว็บไซตของเราดูมีการเคล่ือนไหว สามารถตอบสนองผูใชงานไดมากข้ึน ซึ่งมีวิธีการทํางานในลักษณะ "แปลความ
และดาํ เนินงานไปทีละคําส่ัง" (interpret) หรือเรียกวา ออบเจ็ค โอเรียนเต็ด(Object Oriented Programming) ท่ีมีเปาหมายใน
การ ออกแบบและพัฒนาโปรแกรมในระบบอนิ เทอรเ น็ต สาํ หรบั ผูเขียนดวยภาษา HTML สามารถทํางานขามแพลตฟอรมได โดย
ทาํ งานรว มกบั ภาษา HTML และภาษา Java ไดท ั้งทางฝง ไคลเอนต (Client) และ ทางฝง เซริ ฟเวอร (Server)

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

5

jQuery คือ

jQuery คอื JavaScript Library ซึ่งถูกออกแบบมาเพอ่ื ใหการเขยี น JavaScript นนั้ งา ยขนึ้ เนอ่ื งจากการใช JavaScript
เพื่อประยุกตกับงานเว็บ (Client-side JavaScript) นั้นสิท่ียุงยาก อาทิเชน ความไมเขากันของเว็บเบราวเซอรแตละคาย, DOM
,API เปนตน jQuery จงึ ถือกาํ เนดิ มาโดยเตรียมฟง กชันและออบเจกตตางๆทจี่ าํ เปน ไวใ หใ นรปู ของ Library ดงั นั้นโคด ท่ีเราเคยตอง
เขียนดวย JavaScript หลายๆบรรทดั ก็อาจเขยี นไดสน้ั ลงเหลือเพยี งแคบรรทัดเดยี วเทานัน้

jQuery ประกอบดวยฟเจอรต างๆ ดงั น้ี
- HTML/DOM manipulation
- CSS manipulation
- HTML event methods
- Effects and animations
- AJAX
- Utilities

การออกแบบโครงสรา งเว็บไซต

สวน Header

สวนอิลิเมนต header นั้นจะไมเหมือนกับอิลิเมนต head นั้นท่ีเราเพ่ิงพูดไป สวน header จะอยูภายใตแท็ก body
และมกั จะมเี นือ้ หามากมายทีบ่ งบอกสวนหัวตามหนา ที่ของมัน

<html>
<head>
<title>Tuts Town</title>
</head>
<body>
<header></header>
</body>

</html>

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

6

ในสว นของ Main

สวนของ main ของเว็บไซตเราจะเปนสวนขอมูลที่สําคัญท่ีสุด มีรายการของธุรกิจตางๆ ในเมืองท่ีเว็บไซตเรากลาวถึง
ดังนั้นเนอ้ื หาตางๆ ตองใสไ วภายใต อิลเิ มนต main เราจะคุยเกี่ยวกับแทก็ ที่เล็กลง (อยางเชนกลุมสามกลุมดานลาง คือ กลุมท่ีพัก
อาศัย (Sleep) อาหาร (Food) และ รานคา (Shop) ภายใตแ ท็กใหญ main ในบทเรยี นถัดไปเราจะเพมิ่ เนือ้ หาเขา ไปเพ่มิ เตมิ

สว นของ Footer

สวนของ footer คือสวนสุดทายของเว็บไซตเรา เรามักจะเห็น link บางอยางท่ีนี่เสมอ อยางเชน Facebook และ
Twitter หรือขอความสน้ั ๆ ที่ใหผชู มรวู า ใครสรางเว็บนขี้ ้นึ มา
เราจะเขียนประโยคภูมิใจนาํ เสนอภายใตอิลิเมนต footer น้ี

1<footer> </footer>

Bootstrap คืออะไร

รูจ กั กบั Front-end Framework

กอ นอน่ื ตอ งเขา ใจกอ นครบั วา Bootstrap น้มี นั คือ Front-end Framework ตัวหนึง่ คาํ วา front-end หมายถงึ สว นท่ี
แสดงผลให Users ท่ัวไปเห็น พูดงายๆ ก็คือหนาเว็บไซตของเรานั่นเอง สวนคําวา framework นั้นจะหมายถึง ส่ิงที่เขามาชวย
กําหนดกรอบของการทํางานใหเปนไปในทางเดียวกันครับ ในสมัยกอน เรายังไมมี framework ปญหาที่เราพบเปนประจําในการ
ทํางานรว มกันกค็ ือ ตา งคนตา งทาํ คนหนง่ึ เขยี นแบบหน่ึง สวนอีกคนก็เขียนอีกแบบหนึ่ง พอใครจะมาแกงานตอ หรือพัฒนาตอ ก็
จะไมเขาใจกัน เพราะไมไดมีการกําหนดขอตกลงกันไวลวงหนา ทําใหเสียเวลาโดยใชเหตุ framework จะเขามาแกปญหาตรงน้ี
ครับ โดยมันจะเปนตวั กาํ หนดใหสมาชิกในทมี เขา ใจตรงกัน ปฏิบัตไิ ปในแนวทางเดยี วกัน สมมติ วาโจทยของเราคือการสรางกลอง
ส่ีเหลยี่ มสีน้ําเงินขึ้นมาสักกลองหนึ่ง ถาเราใช framework แลวละก็ พนักงานแตละคนจะใชวิธีเดียวกันในการสรางกลองน้ีขึ้นมา
แมวาพวกเคาจะไมไดคุยกันเลยก็ตาม และพนักงานคนอื่นๆ ท่ีไมเคยทราบโจทยมากอน ก็จะสามารถรูไดทันทีวาโคดท่ีพวกเคา
เขยี นข้นึ มามนั คอื การสรา งกลอ งสนี ้าํ เงิน

Bootstrap คืออะไร?

Bootstrap มันก็คือ Front-end Framework ตัวหน่ึง ท่ีจะชวยใหการพัฒนาเว็บไซตของเราเร็วข้ึน งายขึ้น และเปน
ระบบมากขึ้น ซึ่งคําวา Bootstrap นี้ในภาษาอังกฤษมันมักจะหมายถึง “ส่ิงท่ีชวยทําใหงายข้ึน” หรือ “สิ่งท่ีทําไดดวยตัวของมัน
เอง” ซึ่งในท่นี นี้ า จะหมายความวา ถา เราใช Bootstrap แลว เราก็ไมจาํ เปน ตอ งไปหาอะไรมาเพิ่มอีก

Bootstrap ใหอะไรมาบาง

สิง่ ท่ี Bootstrap ใหม า มี 4 อยา ง ดังนคี้ รับ

1. Scaffolding : grid system จํานวน 12 คอลมั น สามารถเลือกใชไดท้ังแบบ fixed และแบบ fluid
2. Base CSS : style sheets สําหรับ html elements พื้นฐาน เชน typography, tables, forms

และ images
3. Components : style sheets สําหรับส่ิงท่ีเราตองใชบอยๆ ไมวาจะเปน navigation,

breadcrumbs รวมไปถงึ pagination

4. JavaScript : jQuery plugins ตา งๆ ไมวาจะเปน modal, carousel หรือ tooltip

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

7

การติดตง้ั Bootstrap และจดั เตรียมไฟลก อนใช Bootstrap

ใหเราไป Download Bootstrap มาตดิ ตง้ั กอนครบั เมื่อเราแตกไฟลอ อกมา เราจะได 3 folders ดังนี้ครับ
https://getbootstrap.com/docs/3.3/

css

เกบ็ style sheets ของ Bootstrap

img

เก็บ sprite image สาํ หรับ icons ตางๆ

js

เกบ็ jQuery plugins ตางๆ
จากนนั้ ใหเราสรา งไฟล โฟลเดอร ชื่อวา “bootstrap ”ขน้ึ มา ภายใน C:\AppServ\www\ ตามน้ี

จากนัน้ ใหเ รานาํ ไฟลท ี่ Download มากอนหนา ไฟลใสใน โฟลเดอร ชือ่ วา “bootstrap ” ภายใน C:\AppServ\www\ ตามน้ี

จากน้นั ใหเ ราสรางไฟล index.html ข้นึ มาครับ แลว ใสโ คด html ตามนี้

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

8

เมื่อไดไ ฟล index.html มาแลว ใหเราเพ่มิ style sheets ของ Bootstrap เขา ไปท่ี <head> ครับ
เราตอ งการจะทํา responsive web ใหเราเพ่ิม style sheets ของ Bootstrap สําหรับ responsive เขาไปอีกตัว
แลวกําหนดคา ของ viewport ตามโคดดา นลา งน้ีครบั

เพ่ือใหเราสามารถใชง าน JavaScript ที่ Bootstrap เตรียมมาได ใหเ รา Download jQuery มาใสไ วใน folder js
ของเรา แลว ใสโ คด ดานลางนี้กอนปด <body>
http://jquery.com/download/

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

9

Grid System

Grid System

มีเอาไวสําหรับแบงหนาจอการแสดงผลออกเปนสวนๆ โดยแบงตามแนวต้ังเปนซ่ึงคิดจากความกวางของ
หนา จอทง้ั หมดโดยแบงออกเปน 12 สวนดว ยกัน ซ่ึงเจา grid ใน bootstrapมันก็มีอยูด วยกนั 4 รปู แบบ

.col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1

รูปภาพจาก Bootstrap – แสดงใหเห็นวา 1 row = 12 cols
ซ่งึ หนว ยท่ีเปน 12 น้ี เราสามารถเฉลี่ยแตล ะสว นไดต ามความตอ งการ อยางเชน

.col-md-8 .col-md-4 .col-md-4
.col-md-4 .col-md-6 .col-md-4
.col-md-6

รูปตัวอยางการเฉลย่ี แตล ะสว นใหไมเกิน 12 cols ซ่ึงเวลาเขียนโคดน้ีเอง เราจะตองเร่ิมตนดวย class ท่ีชื่อวา
“row” และสราง element ภายในดวย prefix class เร่ิมตนวา “col-หนวยหนาจอ-เลขคอลัมน” ส่ิงที่เราตองระบุ
เพิม่ เติมลงไปก็มี 2 คา ดวยกันคอื หนว ยหนา จอ และ เลขคอลัมน

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

10

หนวยหนาจอใน Bootstrap เวอรชนั่ ใหมน้ีมีทั้งหมด 4 แบบใหเลือกเรียกใชไดตามสะดวก ซ่ึงแตละหนวยก็ควบคุมการ
แสดงผลตามขนาดหนา จอ(หนว ยเปน pixel) ตามที่ Bootstrap กาํ หนดไวใ นตอนแรก ซ่งึ ดไู ดจ ากรปู ภาพ

Extra small devices Small devices Medium devices Large devices
Phones( <768px) Tables(>=768px) \destops(>=992px) Deastops(>=1200px)

Grid Horizontal at all
behavior times Collapsed to start, horizontal above breakpoints

Container 750px 970px 1170px
width None(auto)

Class .col-sm- .col-md- .col-lg-
prefix .col-xs-

แสดงขอมลู การเรียกใชในแตละหนวยหนา จอ
สรุปจากภาพดา นบนดงั นี้

XS :: ใชก บั หนา จอขนาดเล็กกวา Ipad แนวตง้ั ลงมา (หนา จอสมารท โฟนตา งๆ)
SM :: ขนาดหนาจอตง้ั แต Ipad แนวต้ัง
MD :: ขนาดความกวางตํ่าสดุ ท่หี นาจอ Ipad แนวนอน
LG :: หนาจอท่กี วางกวา 1200 pixels ขึ้นไป หรือใหเ หมาะสมกับขนาดหนา จอโนต บุคมาตราฐาน

container

ก็คอื class ตวั นงึ ใน Bootstrap ครับ เอาไว กําหนดกรอบการแสดงผลของเน้ือหาในหนาจอท่ีมีขนาดไมเทากันครับ ซ่ึง
ถา เว็บของเรารนั บนมือถือหรอื วา tablet container เน่ยี มนั จะแสดงเนอื้ หาเวบ็ ของเราเตม็ จอ

ซ่ึงขอ ดขี อง container เองคือชว ยควบคมุ การแสดงผลระหวา งอปุ กรณไดโดยท่ีเราไมจําเปนตองสราง class อื่นมาคอย
จัดการวัตถขุ างในเอง เพราะ container น้นั ถกู เขียนมาใหย ดื หยนุ กับขนาดหนาจอแตล ะแบบอยแู ลว

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

11

การจดั รูปแบบตา งๆ ดว ย Bootstrap CSS

Media Queries

เอาไวใชสําหรับการ แกไ ข หนา จอ Bootstrap
ตัวอยา ง Media Types รปู แบบตา ง ๆ

@media print
@media screen
@media speech
@media projection
@media tv

ตัวอยา งการใชงาน @media print

ในขนั้ ตอนของการพิมพห นา เวบ็ ไซต เราอาจจะตองการซอ นเนือ้ หาบางสว นและแสดงเนือ้ หาบางสว นเทานน้ั เราสามารถ
เขยี นคาํ ส่งั ไดใน @media print ดังนี้

@media print {
#header {display:none;}
#content {display:block;}
#footer {display:none;}
}
จากโคด css ดานบนจะเห็นวาเราสามารถใชคําส่ัง display:none ปดสวน header และ footer และแสดงเฉพาะ
content ท่ีเราตองการจะพมิ พอ อกมา

ตวั อยา งการใชง าน @media screen

เปนคําส่ังท่ีนิยมใชพัฒนาเว็บไซตใหแสดงผลในขนาดหนาจอท่ีแตกตางกัน เพราะปจจุบันอุปกรณสมารทโฟนมีขนาด
หนาจอท่ีหลากหลายมาก โดยเราสามารถใชคําส่ัง @media screen เพื่อกําหนดการแสดงผลใหเหมาะสมกับหนาจอในแตละ
ขนาดได ตัวอยา งเชน

/* iPhone 2G-4S (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

12

Typography

ก็คอื การแสดงขอความตัวอักษรในหนาจอนั้นๆ ก็คือ การออกแบบตัวอักษรและการจัดวางฟอนตใหเหมาะสม สวยงาม
กับพน้ื ท่ีวา งและองคป ระกอบตา งๆ

<h1> - <h6>

<mark> สาํ หรับทาํ ไฮไลทต ัวหนงั สอื

<blockquote> สําหรับทําบล็อคเขยี นสว นหน่ึงของขอความ

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

13

<pre> ใชแสดงขอความตามขอมูลจริงๆ เชน ถามีการพิมพ space เขามาตอนเก็บขอมูลก็จะเก็บ
space จิงๆ ลงไปดวย

<p class="text-…."> สําหรับการแสดงสขี องตวั หนงั สือ

<p class="bg-…"> สาํ หรบั การแสดงสีพื้นหลังของตวั หนงั สอื

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

14

สาํ หรับ class อื่นๆ มีดังนี้
.lead - สําหรับทาํ ตัวหนาหวั ขอ ยอ หนา และทง้ิ ระยะหา งดานบนและลางของยอ หนา
.small - ทําตัวหนังสือใหตวั เลก็ กวา ปกติ
.text-left - จัดตาํ แหนงตวั หนังสอื แสดงทางซา ยมือ
.text-center - จัดตําแหนง ตวั หนงั สือไวต รงกลาง
.text-right - จัดตาํ แหนง ตวั หนงั สือไวดา นขวามอื
.text-justify
.text-nowrap - บงั คับใหไ มตดั บรรทดั ตวั หนงั สอื ลงบรรทดั ใหม
.text-lowercase - แปลงตัวหนังสอื เปน ตัวเล็กทั้งหมด
.text-uppercase - แปลงตัวหนงั สอื เปนตวั ใหญทั้งหมด
.text-capitalize – แปลงตวั หนงั สอื เปน ตวั เลก็ ใหญใ หถูกตอ ง

Tables

ตารางพนื้ ฐาน.

ตารางสลบั ลาย (Striped)

เพ่ิม class .table-striped ในการสลับแถวใหเ ปนแบบมา ลาย ภายใน tag <tbody>

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

15

ตารางแบบมเี สนขอบ (Bordered)

เพิ่ม class .table-bordered ในการสรา งเสน ขอบในทุกๆ ดา น และทุกๆ ชอ งตาราง

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

16

เนนเมอ่ื วางเมาส (Hover)

เพิม่ class .table-hover เมื่อตองการใหต ารางมแี ถบเมอ่ื นาํ เมาสว าง (Hover)

ตารางแบบรวมหลายๆ แบบ

เราสามารถกาํ หนด class ใหก บั ตารางไดห ลายๆ แบบพรอ มกัน

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

17

ตารางแบบกระชบั (Condensed)

เพ่ิม class .table-condensed เพื่อกระชบั ตารางตามขอมลู โดยเปนการลด cell-padding ลงคร่ึงหน่งึ และยอตารางตามขอ มูล

ตารางแบบ Responsive

สามารถใช class .table-responsive ใน tag <div> ซึ่งจะแสดง scroll ดา นลางเมื่อหนา จอมีขนาดนอ ยกวาขนาดตาราง

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

18

Forms

Bootstrap แนวตั้งแบบฟอรม (เริ่มตน)

Bootstrap แบบอินไลน

เปน from ท่มี พี วก input อยูในแถวเดียวกนั

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

19

Bootstrap แบบแนวนอน

ตัวนี้จะเปนฟอรมตามแนวนอน โดย input ตางๆ ปกติ จะอยูคนละแถวกันครับ จะมีอยูแถวเดียวกันก็เพียง label
เทาน้นั ซงึ่ Horizontal form นน้ั มกี ารนํา grid system มาใชงาน

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

20

Buttons

Button ใน Bootstrap น้ันมีหลายสีสันใหเลือก ซ่ึงเราสามารถกําหนด class ใหกับ element ตางๆ ไดเชน <a>,
<button> และ <input>

รูปแบบปมุ

• .btn-default
• .btn-primary
• .btn-success
• .btn-info
• .btn-warning
• .btn-danger
• .btn-link

ปมุ สามารถนํามาใชใน <a> , <button> หรือ <input>

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

21

Images

จัดการรูปภาพดว ย Bootstrap มีหลายแบบใหเราเลือกใชทั้งปรับเปลี่ยนขนาดไดเองอัตโนมัติตามการเปล่ียนแปลงของ
ขนาดหนา จอ หรือแตง กรอบรปู ภาพเปนวงกลม วงรี ส่ีเหล่ยี ม ซ่ึงการใชง านก็งายๆ แคเ พิ่มคลาสเขา ไปเลก็ นอ ย

การแตง กรอบรูปภาพ

การใสขอความอธบิ าย (caption) ในแตล ะภาพ

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

22

การทําแกลเลอรีภ่ าพ

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

23

Icons

เครอื่ งมอื ที่ชวยใหการออกแบบ icon บนหนาเว็บ bootstrap โดย font awesome
https://fontawesome.com/
จากนนั้ แตกไฟลออกจะไดหนาตาแบบน้ี

ใน Folder CSS จะเก็บไฟล css เอาไวทั้งหมด และใน folder font ก็จะเก็บ font รูปแบบตางๆเอาไว สวนอีกสอง
folder เปนการเขียน css แบบ less กับ scss ให Copy folder ท้ังหมดไปวางใน โฟลเดอร ชื่อวา “bootstrap ” ภายใน
C:\AppServ\www\
แลว เรามาเรียกใชงานกนั วธิ เี รยี กเหมือนกนั กับ css ท่ัวไป

ใหดูตามตัวอยางใน link http://fontawesome.io/icons/ เพอ่ื เลือกรูป icon
ตวั อยางการใชงาน

<i class="=ชื่อicon fa-ขนาด"></i>

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

24

การใชง าน Bootstrap Components ตา งๆ

Dropdown Menus

ปุม Drop down สวนใหญเรามักจะสรางข้ึนมาเม่ือตองการใหขอความหนึ่งเปนหมวดหมูหลักและ Link อื่นๆที่อยู
ภายในเปน เพยี ง Link ยอยท่ีอยูภ ายในถาใช CSS กับ jQuery กอ็ าจจะยากไปหรอื ยุงเกนิ เสยี เวลา ถา ใช Bootstrap

เลือ่ นลงพน้ื ฐาน

เล่ือนข้ึน

แกไ ข <div class="dropup">

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

25

Navbar

การสราง Menubar ใน Bootstrap เราจะใช Navbar ในการสราง Navbar คือ ฟจเจอรท่ีใชสําหรับรองรับการสราง Menubar
ใหม ีความสะดวกและงา ยสาํ หรบั ผสู รางเว็บไซด อีกทั้งยงั รองรบั การแสดงผลแบบ Responsive

ขั้นตอนการสรา ง Navbar

เร่ิมตนใหเราสรางแท็ก "<div>" พรอมกําหนดคลาสในแท็กดังกลาวเปน "navbar navbar-default" ดังโคดตัวอยาง
ดานลาง เพ่อื เปน สง่ิ ท่ีบง บอกวา ณ สวนใดของเว็บไซดท เ่ี ราตองการสราง Navbar

<div class="navbar navbar-default">
</div>
ถัดมาใหใสวางแท็ก "<div>" ขางในแท็กดานบนพรอมกําหนดคลาสเปน "container-fluid" เพ่ือท่ีเปนที่จัดเก็บเนื้อหา
ของเมนบู ารท งั้ หมด
<div class="navbar navbar-default">

<div class="container-fluid">
</div>
</div>
ถัดมาเราจะใสโลโกหรือชื่อเว็บไซดบน Navbars พรอมกับเมนตางๆ โดยใหเราสรางแท็ก "<div>" พรอมกําหนดชื่อ
คลาสเปน "navbar-header" ตอมาเราจะใสปุมเพ่ือแสดงตอนที่ Navbars ของเราแสดงบนหนาจอขนาดเล็ก เพ่ือใหเขาใจไดงาย
ขอใหผ อู านดูโคดทแี่ สดงในดา นลางประกอบไปดว ย โดยการแสดงปมุ สาํ หรบั หนาจอขนาดเล็ก จะตองใสแท็ก "<button>" พรอม
กําหนดช่ือคลาสเปน "navbar-toggle" เพื่อการแสดงผลที่สวยงาม นอกจากนี้ยังตองใสแอตทริบิวส "data-toggle" เปน
"collapse" เพ่ือเปนการบงบอกท่ีแอคชั่นที่เกิดข้ึนเมื่อมีการคลิกปุม และแอตทริบิวส "data-target" เปนเปนการบงบอกถึงสวน
ของการแสดงผลของเนือ้ หาเม่อื มกี ารคลิกปุม โดยคาท่ีถกู กําหนดในแอตทริบวิ สน้ีคอื "#mynavbar" ซงึ่ หมายถึงใหแ สดงผลเน้ือหา
ท่ีการกําหนดดวยแอตทริบวิ ส "id" ที่มีคาเปน "mynavbar"

ถัดมาคือข้ันตอนการใสลิงคท่ีเราตองการใน Navbar โดยใหเราสรางแท็ก "<div>" ท่ีอยูในลําดับเดียวกับแท็ก "<div
class="navbar-header">" โดยแท็ก "<div>" ดังกลาวใหกําหนดคลาสเปน "collapse navbar-collapse" และกําหนดแอตทริ
บวิ ส id เปน "mynavbar-content" เพ่อื ใหม คี วามสอดคลองกบั แอคชนั่ ของปุม ทีเ่ ราไดส รางขึ้นกอ นหนาน้ี

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

26

ตอมาเราจะใชแท็ก "<ul>" และแท็ก "<li>" เพื่อใชสรางลิงคบน Navbar โดยคลาสของแท็ก "<ul>" ตองกําหนดเปน
"nav navbar-nav" ดงั โคดท่ีแสดงในดา นลา ง .

สําหรบั หนา จอในขนาดปกติ
หนา จอขนาดเล็ก

Breadcrumbs

การสรา งโครงสรางของเวบ็ เพจบนเว็บไซดของเรา หรอื บางคนเรียกเรียกวาการทําแผนท่ีเว็บไซด (Site mapเครื่องมือท่ี
ใชนําทางในเว็บของเราใหรูวาตอนนี้เราอยูสวนไหนของเว็บไซต อยูลึกจากหนาหลัก หรือ วา homepage เขามาเทาไร ซึ่งแตละ
เว็บไซตก็จะไมเ หมือนกัน ขนึ้ อยูกับโครงสรางของเวบ็ ไซตแตละเว็บใน Bootstrap ไดมีการสรางฟงกช้นั ที่สนบั สนุนการสรางแผนท่ี
เวบ็ ไซด เพยี งแคเ รียกใชคลาส "Breadcrumb" ในแท็ก "<ol>" หรอื "<ul>

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

27

Badges

ปา ยเปนตวั ชีว้ ดั เชงิ ตัวเลขของจาํ นวนรายการที่มีความเกีย่ วของกับการเช่อื มโยง

Badges

Badges button

Labels

Labels

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

28

Contextual Label

Alerts

การสรางกลองแสดงขอความแจงเตือนแบบ MODAL ของ BOOTSTRAP

Alert text

Alert Popup

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#basicModal">
Launch modal
</button>

ตาม Code ตัวอยางนี้เปนการสรางปุมขึ้นมาแลวใช HTML attribute พิเศษเขามาชวยนั้นคือ data-toggle กับ data-
target ซ่ึงจะชวยใหเราสามารถระบุ attributes ใหกับทาง javascript แลวเราก็ระบุ class ใหเปนปุม สีฟา ขนาดใหญ จะได
หนาตาออกมาแบบน้ี

เริ่มจากการสราง div ในสวนของ class ชื่อ modal fade กอนเพ่ือบอกวาตอไปน้ีเปนการทํางานของกลองขอความ
แบบน้นี ะ

<div class="modal fade" id="basicModal">
</div>

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

29

หลงั จากกดปมุ Launch modal จะมีกลอ ง pop up ท่ีเราสรา งเดงขึน้ มา

Media Object

Media Object คือ เปนสวนประกอบท่ีสําคัญหน่ึงใน Bootstrap ซ่ึงไวใชสรางสวนประกอบในหนาเว็บไซตท่ีมีรูปแบบ
ซาํ้ ๆ เชน การแสดงรูปภาพและเน้ือหาของขาว หรอื การแสดงขอความในสวนของคอมเมนทบนเว็บบอรด ตา งๆ

Media Object

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

30

Media Object list

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

บทท่ี 2

31

เรมิ่ ตนกับ PHP

Client – Server

Client คอื เครื่องคอมพิวเตอรที่ไปรองขอบริการและรับบรกิ ารอยา งใดอยางหน่ึงจาก Server
server คือ เครื่องคอมพวิ เตอรห รอื ระบบปฏิบตั กิ ารหรอื โปรแกรมคอมพวิ เตอร ท่ีทาํ หนา ที่ใหบริการอยางใดอยา งหน่ึงหรอื
หลายอยาง โดยอาศยั โปรแกรม Web serverแกเคร่ืองคอมพิวเตอรห รือโปรแกรมคอมพิวเตอรทเ่ี ปน ลูกขา ย ในระบบเครื่อขา ย
server แบงเปน 3 ประเภทไดแก
1.เคร่อื งคอมพวิ เตอรท่ที าํ หนาท่ใี หบ รกิ ารอะไรบางอยา งแกคอมพวิ เตอรหรือโปรแกรมคอมพวิ เตอรอ น่ื
2.ระบบปฏิบตั กิ ารคอมพวิ เตอรทท่ี ําหนาท่ใี หบรกิ ารอะไรบางอยา งแกคอมพิวเตอรหรอื โปรแกรมคอมพิวเตอรอ ่ืน
3.โปรแกรมคอมพิวเตอรท ่ีทําหนา ท่ใี หบ รกิ ารอะไรบางอยา งแกคอมพิวเตอรหรือโปรแกรมคอมพวิ เตอรอนื่
client/server คอื การทม่ี ีเคร่อื งผใู หบ ริการ (server) และเคร่ืองผใู ชบ รกิ าร (client) เชือ่ มตอ กนั อยู และเครื่องผใู ชบ รกิ ารไดมกี าร
ติดตอรอ งขอบรกิ ารจากเครื่องผใู หบ รกิ าร เคร่ืองผใู หบริการกจ็ ะจัดการตามทเี่ คร่อื งผูขอใชบ ริการรอ งขอ แลว สงขอ มลู กลบั ไปให
เครือขา ยแบบ Client / server เหมาะกบั ระบบเครือขา ยทีต่ อ งการเชอ่ื มตอกับเครื่องลูกขายจาํ นวนมาก โดยการรองรับจาํ นวน
เครื่องลกู ขาย (Client )อาจเปน หลักสิบ หลกั รอ ย หรือหลกั พนั เพราะฉะนัน้ เครื่องทจี่ ะนํามาทําหนา ท่ีใหบรกิ ารจะตอ งเปนเครื่องทม่ี ี
ประสิทธภิ าพสูง เนอ่ื งจากถูกตอ งออกแบบมาเพือ่ ทนทานตอความผดิ พลาด ( Fault Tolerance )และตอ งคอยใหบ ริการทรัพยาการ
ใหก บั เครอ่ื งลูกขายตลอดเวลา โดยเคร่อื งทจ่ี ะนาํ มาทําเปนเซริ ฟ เวอรอ าจเปน คอมพิวเตอรแบบเมนเฟรม มนิ คิ อมพวิ เตอร หรือ
ไมโครคอมพวิ เตอรก ็ได

PHP Tag

การใช PHP Tag

PHP Tag ตามตัวอยา ง เร่มิ ตน ดวย <? และปดดว ย ?> คลา ยกบั HTML tag เพราะเริ่มตนดวยเครื่องหมายนอ ยกวา
(<) และปด ดวยเคร่อื งหมายมากกวา (>) สัญลักษณเหลานี้ เรยี กวา PHP tag ที่บอกแมข ายเว็บการเรมิ่ ตนและสน้ิ สุดคําสัง่ PHP
ขอความระหวา ง tag จะไดรับการแปลในฐานะ PHP ขอความภายนอก tag เหลา นไี้ ดร บั การปฏิบัตเิ หมือน HTML ปกติ PHP tag
ยอมใหหลกี จาก HTML

รูปแบบ PHP tag

รปู แบบ PHP tag มี 4 แบบ แตละแบบของคาํ สั่งอยา งเหมอื นกัน
รปู แบบยอ (Short style)
<? echo "<h1>พนู พนา</h1>";?>

รูปแบบน้เี ปน รปู แบบงา ยท่ีสดุ และเปนไปตามมาตรฐานการประมวลผล SGML (Standard Generalized Markup
Language) การใช tag ประเภทนีต้ อ งใหใ ช short tag ในไฟลค อนฟก php.ini ทีค่ าํ ส่ัง short_open_tag ใหเ ปน enable แตไ ม
แนะนาํ เน่อื งจากไมเ ปนไปตามมาตรฐาน XHTML และมาตรฐานสว นขยายเชน PEAR
รปู แบบ XML
<?php echo "<h1>พนู พนา</h1>";?>

tag รปู แบบนส้ี ามารถใชกับเอกสาร XML (Extensible Markup Language) ถาวางแผนใหทาํ งานกับ XML ตอ งใช
รปู แบบนี้
รปู แบบ SCRIPT
< SCRIPT LANGUAGE='php'> echo "<h1>พูนพนา</h1>"; </SCRIPT>

tag รูปแบบน้ี ยาวท่สี ดุ และอาจจะคุนเคย ถาเคยใช JavaScript หรือ VBScript
รูปแบบ ASP
<% echo "<h1>พูนพนา</h1>"; %>

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

32

tag รูปแบบนี้เหมอื นกับ Active Server Pages (ASP) สามารถใชได ถาต้งั คาคอนฟก คําสัง่ asp_tags ใหเ ปน
enable

คําสั่งการแสดงผล PHP

ในการเขียนโปรแกรม การตดิ ตอ กบั ผูใ ชน น้ั เปนสว นหนงึ่ ทสี่ ําคญั เพอื่ การแลกเปลีย่ นขอ มลู ระหวา งผใู ชก ับโปรแกรม
ยกตัวอยา งเชน ในการเขาสรู ะบบเวบ็ ไซต คณุ จําเปนตอ งใสช่ือผูใชแ ละรหัสผาน ซ่งึ นเ่ี รยี กวา การรบั คา และการแสดงผลคอื การ
แสดงผลลัพธกลบั มายังผูในรปู แบบตา งๆ เชน ขอความ รปู ภาพ และเสียง เปนตน
เนอ่ื งจากในบทเรียนของเราเปน แบบ Console ดงั น้ันเราจะพดู เฉพาะเก่ียวกบั การรับคาบน Command line ทางคียบอรด และการ
แสดงผลพืน้ ฐานโดยการใชค าํ สั่ง echo และ print ในภาษา PHP

การรับคาบน Command line

โดยปกตแิ ลวการรบั คาในภาษา PHP มักจะเปน การรับคา ผา นทาง URL หรือ Query string อยา งไรกต็ ามเม่อื เราเขยี น
Console application เราจงึ ตองทําการรับคาผา นทาง Command line
<?php

$handle = fopen("php://stdin","r");
echo "What's your name? ";
$line = fgets($handle);
$line = trim($line);
echo "Hello $line!\n";

?>
ในตวั อยาง เปน โปรแกรมถามชือ่ ผใู ช โดยการใหใ สชอ่ื ผานทางคียบ อรด และแสดงขอ ความทักทายผูใชด ังกลา ว
$handle = fopen("php://stdin","r");
เราไดส รา งตวั แปรควบคมุ ในการอา นคา จาก Input stream ในภาษา PHP ดว ยฟงกช นั fopen() สาํ หรบั การอา นคาจาก Console
$line = fgets($handle);
$line = trim($line);
นเี่ ปนคาํ สง่ั ในการรบั คามาไวในตัวแปร $line โดยฟง กชนั fgets() การรบั คา เสรจ็ ส้นิ เมือ่ มีการกดปุม Carrier return หรอื Enter
และเราใชฟ ง กชนั trim() ในการตดั ตัวอักษร \n ทีเ่ กดิ ในตอนกด Enter ออกไป
What's your name? Mateo
Hello Mateo!
น่ีเปน ผลลัพธข องโปรแกรม โดยเราไดก รอกชื่อและโปรแกรมแสดงขอ ความทกั ทาย

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

33

ตอ ไปเปน ตวั อยางเพมิ่ เตมิ เราจะทําการสรา งฟอรม สําหรบั ใหผ ูใชใ สข อมูลเพอื่ สมัครสมาชกิ สําหรับเวบ็ ไซต
<?php
$handle = fopen ("php://stdin","r");
echo "Create account\n";
echo "Enter name: ";
$name = trim(fgets($handle));
echo "Enter email: ";
$email = trim(fgets($handle));
echo "Create password: ";
$password = trim(fgets($handle));
echo "Do you want to submit? (yes \ no) ";
$submit = trim(fgets($handle));
if ($submit == "yes") {

echo "\nYour account has been created\n";
echo "with the following informations.\n";
echo "Name:\t$name\n";
echo "Email:\t$email\n";
echo "Password:\t$password\n";
} else {
echo "The action was canceled.\n";
}
?>
ในตัวอยาง เปน แบบฟอรม สาํ หรับสมคั รสมาชิกในภาษา PHP โดยมกี ารถามใหผใู ชใ สช ื่อ อีเมล และตงั้ รหัสผา น และในตอนทายถาม
การยืนยนั วา ตอ งการจะสง ขอ มูลหรือไม ถา ผใู ชตอบ "yes" หมายถึงการสรา งบัญชสี าํ เรจ็
Create account
Enter name: Mateo
Enter email: [email protected]
Create password: 1234
Do you want to submit? (yes \ no) yes
Your account has been created
with the following informations.
Name: Mateo
Email: [email protected]
Password: 1234
นี่เปน ผลลพั ธเ มือ่ รันโปรแกรม เรากรอกช่ือ อีเมล และรหสั ผา นจากทโ่ี ปรแกรมถาม และไดย ืนยันการสง ขอ มูล ซึง่ นเี่ ปน สง่ิ ที่คณุ เหน็
ในหนาสมคั รสมาชกิ ของเวบ็ ไซตจ าํ นวนมาก

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

34

การแสดงผลออกทางหนาจอ

ในบทกอนหนา คุณอาจจะไดเ ห็นการแสดงผลทางหนาจอมาบางแลว ในภาษา PHP เรามักจะใชคาํ สง่ั echo และ print
เพอื่ แสดงผลขอ ความออกทางหนา จอ คาํ ส่งั เหลา นีเ้ ปน โครงสรา งทางภาษาทจ่ี ะทําการตดิ ตอกับ Output stream โดยการแสดงผล
ลําดับของตัวอกั ษรออกทางหนา จอ แตส งิ่ ที่แตกตา งกนั ระหวาง echo และ print มดี งั น้ี
print มเี พยี งหนง่ึ พารามเิ ตอรในขณะที่ echo มีไดห ลายพารามเิ ตอร
print สงคา 1 กลับดงั น้ันมนั จงึ เปน Expression แต echo ไมม ีการสงคากลบั
echo ทาํ งานเร็วกวา เลก็ นอ ย

การแสดงผลดว ยคําสงั่ echo

Echo เปนคาํ สัง่ ในการแสดงผลขอ ความออกทางหนาจอ echo ไมใชฟ ง กชนั เสยี ทเี ดียวแตม นั เปน โครงสรา งของภาษา
PHP มาดตู วั อยา งการใชง านในแบบตา งๆ
<?php
echo "Bound to pass the point of contemplation.\n";
echo "Mercury ", "Venus ", "Earth ", "Mars", "\n";
$lang = "PHP";
echo "$lang is a language for web.\n";
$a = 10;
$b = 5;
echo "a + b = ", ($a + $b);
?>
ในตวั อยางเปนการแสดงขอความในรปู แบบตางในคาํ สั่ง echo มนั สามารถมไี ดห ลายพารามเิ ตอร ซ่งึ จะคนั่ ดว ยเคร่อื งหมายคอมมา
(,) และเรายังสามารถแทรกตัวแปรใน String ที่เรียกวา String interpolation
Bound to pass the point of contemplation.
Mercury Venus Earth Mars
PHP is a language for web.
a + b = 15
และนเี่ ปนผลลพั ธการทาํ งานของคาํ สัง่ echo เมอ่ื รันโปรแกรม

การแสดงผลดว ยคําสง่ั print

print เปน คําส่งั ในการแสดงผลเชน เดยี วกับ echo สงิ่ ที่แตกตางกนั คือคําสัง่ print จะมกี ารสง คา 1 กลบั มาเมื่อการ
แสดงผลเสรจ็ สิน้ และมันมไี ดเพยี งพารามิเตอรเดียว มาดูตวั อยา งการใชงานคาํ สั่ง print
<?php
print "My heart grows so cold.\n";
$lang = "PHP";
print "$lang tutorial on marcuscode.com\n";
$age = 28;
$age >= 18 ? print "Adult" : print "Young";
?>

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

35

ในตัวอยา ง เราสามารถใชคาํ ส่ัง print เพือ่ แสดงผลไดเชนเดยี วกัน แตใ นคําส่ังสดุ ทา ยเราสามารถใชค ําสง่ั print ในรูปแบบของ
Expression ไดเพราะวา มันมกี ารสงคา กลบั มา
My heart grows so cold.
PHP tutorial on marcuscode.com
Adult
และน่เี ปน ผลลพั ธการทํางานของคาํ ส่ัง print เมอื่ Run โปรแกรม

การใช Comment ในภาษา PHP

Comment ในคาํ สงั่ ทาํ หนาทเ่ี ปน หมายเหตุใหก ับผอู านคาํ สง่ั Comment สามารถใชอ ธบิ ายวตั ถุประสงคข องสครปิ ต
ทาํ ไมถึงทําแบบนน้ั การปรบั ปรงุ ครัง้ สุดทายและอ่ืน ๆ

ตัวแปล PHP จะไมส นใจขอความใน Comment โดยเฉพาะอยา งยงิ่ PHP parser ขาม Comment ทเ่ี ทียบเทา กบั whitespace
PHP สนับสนุนรปู แบบ Comment แบบ C, C++ และ Shell script
รูปแบบ C เปน Comment หลายบรรทัด
/* Author: Chaiwat
Last Modified: 1 June 2005
This script processes the customer order.
*/
Comment หลายบรรทัด เริ่มตน ดวย /* และปด ดว ย */ เหมือนภาษา C
Comment 1 บรรทดั สามารถใชรปู แบบ C++
echo "<h1>พนู พนา</h1>"; // Start printing order
หรือ รปู แบบ Shell script
echo "<h1>พูนพนา</h1>"; # Start printing order

รูจักตวั ดาํ เนินการในภาษา PHP

ตัวดําเนินการ คอื เครอื่ งหมายหรือสัญลักษณท ่ีกาํ หนดขึ้นสําหรับใชในการจดั การกับตวั แปรและคา คงท่ี หรอื สรา ง Expression
ขึน้ และนําไปใชง านในการเขียนโปรแกรม ตัวดาํ เนินการในภาษา PHP มีหลายรปู แบบซึ่งในบทน้ี เนอื้ หาไดแบงยอ ยออกเปน ดงั นี้

• Assignment operator
• Arithmetic operators
• Compound assignment
• Comparison Operators
• Logical operators
• Bitwise operators
• String Concatenation Operator
• Ternary Operator
• Operators' precedence

•

เราจะเรม่ิ กบั ตัวดําเนินการทพี่ ื้นฐานทสี่ ุดในภาษา PHP ตวั ดาํ เนนิ การกาํ หนดคา

Assignment operator

ตวั ดาํ เนินการกําหนดคา (Assignment operator) คอื ตัวดําเนนิ การท่ีใชสําหรับกําหนดคา ใหก ับตวั แปรหรอื คาคงท่ี
เครื่องหมายเทา กบั = ใชเ ปนสัญลกั ษณข องตวั ดาํ เนินการนี้ การทํางานของตัวดําเนนิ การนนั้ จะนาํ คา จากดา นขวามาใสต ัวแปรทาง
ดานซา ย

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

36

$x = 1;
$y = $x + 5;
$text = "PHP language";
ในตัวอยางเปนการใชง านตวั ดาํ เนนิ การกําหนดคา ในการกาํ หนดคา ใหกับตัวแปรในภาษา PHP เราไดก าํ หนดคา 1 ใหกับตัว
แปร $x เรากําหนดคา ใหก ับตัวแปร $y ในรูปแบบของ Expression และกําหนด String ใหก ับตวั แปร $text
นเ่ี ปน การดําเนินการทพ่ี ืน้ ฐานทสี่ ดุ ในการเขยี นโปรแกรม

Arithmetic operators
ตัวดําเนนิ การทางคณิตศาสตร (Arithmetic operators) เปนตวั ดําเนนิ การในการหาผลลัพธจากการกระทาํ ทาง
คณิตศาสตร เชน การบวก การลบ การคูณ และหารหาร โดยมตี วั เลขเปน Operand และจะไดผลลพั ธส ดุ ทา ยออกมาคาเดยี ว
นีเ่ ปน ตารางตวั ดาํ เนนิ การทางคณติ ศาสตใ นภาษา PHP
Symbol Name Example
+ Addition $c = $a + $b

- Subtraction $c = $a - $b

* Multiplication $c = $a * $b

/ Division $c = $a / $b

% Modulo $c = $a % $b
ใน 4 ตวั ดาํ เนินการแรกนน้ั เปน ตวั ดําเนนิ การพื้นฐานในทางคณติ ศาสตร แตในตวั ดําเนินการสดุ ทาย Modulo น้ันเปน การหารแบบ
เอาเศษ ตอ ไปเปน ตัวอยางการใชต วั ดาํ เนินการแบบตา งๆ
<?php

$price = 150;
$tax_rate = 10;
$tax_price = $price * ($tax_rate / 100);
$total_price = $price + $tax_price;

echo "Item with price $price\n";
echo "Tax rate $tax_rate%\n";
echo "Price increased by tax $tax_price\n";
echo "Total price = $total_price\n";

?>
ในตวั อยา งเปน โปรแกรมในการคาํ นวณหาภาษามูลคา เพิ่มจากการซอ้ื สน้ิ คา โดยเรามีราคาของส้นิ คา ทยี่ ังไมรวมภาษาษีและอตั ราของ
ภาษา และคาํ นวณสําหรบั ราคาทงั้ หมดทีต่ อ งจายหลงั จากรวมกบั ภาษแี ลว
$price = 150;
$tax_rate = 10;
ตัวแปร $price นน้ั เปน ราคาสิ้นคา ทยี่ ังไมไ ดร วมกับภาษี และตัวแปร $tax_rate เปน อัตราภาษีตอ 100% และคณุ สามารถเปล่ยี น
คา ของตวั แปรเหลา น้ีได
$tax_price = $price * ($tax_rate / 100);
$total_price = $price + $tax_price;
ในตัวแปร $tax_priceเปนการคํานวณหาราคาทีเ่ พ่ิมขึน้ มาจากภาษี และ $total_price เปน การหาราคาทั้งหมดเมอ่ื รวมกบั ภาษแี ลว
Item with price 150
Tax rate 10%

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

37

Price increased by tax 15
Total price = 165
นเี่ ปน ผลลพั ธข องโปรแกรม ซง่ึ อธบิ ายไดว าเมอ่ื คณุ ซื้อของในราคา 150 และมีภาษี 10% ราคาทงั้ หมดทคี่ ุณจะตองจายหลังจากรวม
ภาษีแลว คือ 165
<?php
$total_second = 340;

$minute = floor($total_second / 60);
$second = $total_second % 60;

echo "$total_second seconds\n";
echo "$minute minutes $second seconds";

?>
ตัวอยางตอ มาเปนการใชเครอื่ งหมาย Modulo ในการหาเศษของเวลา เรามีตวั แปร $total_secondสําหรับเก็บคาวินาทีท้งั หมด
โปรแกรมของเราเปนการแปลงมาเปนในรปู แบบ นาทีและวินาที
$minute = floor($total_second / 60);
$second = $total_second % 60;
เราหาคาของนาทโี ดยการหารดวย 60 และใชฟ ง กชนั floor() เพ่ือตดั เศษทศนยิ มออกไป สาํ หรบั หาคา วินาที เราใชการหารเอาเศษ
โดยตวั ดาํ เนนิ การ Modulo เพราะวา วนิ าทที เ่ี หลอื คือการนาํ ไปหาเศษจากการหารดว ย 60 ใน Expression $total_second % 60
340 seconds
5 minutes 40 seconds
นเี่ ปน ผลลพั ธเ มือ่ รันโปรแกรม ท่แี ปลงจากวินาทีทงั้ หมดเปนนาทแี ละวนิ าที

Bitwise operators
ตวั ดําเนินการระดับบิต (Bitwise operators) คือตวั ดาํ เนินการทมี่ กี ารกระทํากันในระดับบติ ของขอมูลซึ่งมแี ค 1 และ 0 น่ี
เปน โครงสรา งของภาษาทถ่ี ายทดมาจากภาษา C ในการทาํ งานของตวั ดําเนินการระดับบติ เปนการนําคูของบิตมากระทําตอกนั ในทาง
ตรรกศาสตรและไดผ ลลพั ธเ ปน บิตใหม สวนมากแลว มันมักจะใชกบั การเขยี นโปรแกรมในระดับตํ่า
น่ีเปนตารางตัวตัวดําเนินการระดบั บติ ในภาษา PHP
Symbol Name Example
& And $c = $a & $b

| Or $c = $a | $b

^ Xor $c = $a ^ $b

~ Not $c = ~$b

<< Shift left $c = $a << $b

>> Shift right $c = $a >> $b
เพอื่ ใหค ุณเขาใจหลักการทาํ งานของตัวดําเนนิ การระดับบติ มาดูตวั อยางการใชง านตัวดาํ เนนิ การระดบั บติ ในภาษา PHP คณุ จะตอง
เขา ใจในหลักการของประพจนในคณติ ศาสตรส าํ หรบั การใชง านตวั ดาํ เนนิ การน้ี
<?php

$a = 8;
$b = 3;

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

38

echo "a & b = ", $a & $b, "\n";
echo "a | b = ", $a | $b, "\n";
echo "a ^ b = ", $a ^ $b, "\n";
echo "~a = ", ~$a, "\n";
echo "a << 1 = ", $a << 1, "\n";
echo "a >> 1 = ", $a >> 1, "\n";
?>
ในตัวอยา งเปน การใชต วั เนนิ การระดับบิตกบั Integer เรามตี วั แปร $a และ $b ซ่ึงเก็บคา ตัวเลข ในการทาํ งานของตวั ดําเนินการ
เหลา น้ี ตวั เลขถูกแปลงในรูปแบบของ Binary ท่ีมีขนาดเทา กันดังน้ี

1000 = 8
0011 = 3
ในการคาํ นวณหา $a & $b เราจะทําการเปรยี บเทยี บในแตล ะคูข องบติ ทตี่ รงกนั เนอ่ื งจากตวั ดาํ เนนิ การ & ผลลัพธท ไี ดจะเปน 1 ถา
หากบติ ทง้ั สองเปน 1 ไมเชน นน้ั จะเปน 0 เราจึงคํานวณได 1 & 0 = 0, 0 & 0 = 0, 0 & 1 = 0 และ 0 & 1 = 0 หลังจากเสรจ็ ส้นิ ทงั้
4 บิตเรานาํ ผลลพั ธข องแตล ะบติ มารวมกนั จะได 0000 ดงั นนั้ 8 & 3 จงึ มีคา เทากบั 0 ในฐานสบิ
ตอมาเราคํานวณหาสําหรับ $a | $b ผลลพั ธท ีไ่ ดถ าหากบติ ใดบิตหนง่ึ มีคา เปน 1 จะไดผ ลลพั ธเปน 1 นอกจากน้จี ะไดผ ลลพั ธเ ปน 0
จะได 1000 | 0011 = 1011 ดังนั้น 8 | 3 จึงมคี าเทากบั 11 ในฐานสิบ
สําหรับ $a ^ $b ผลลัพธท ่ไี ดจ ะเปนจรงิ ถา หากบติ ใดบติ หนึ่งเปน 1 หรอื 0 แตไมใ ชทง้ั สอง ทาํ ใหเ ราได 1000 | 0011 = 1011
ดังนัน้ 8 | 3 จงึ มคี า เทากับ 11 ในฐานสิบ
สําหรบั ~$a เปน การนาํ บติ มาผนั กลับจาก 1 ไป 0 และ 0 ไป 1 จะได ~1000 = 0111 ซง่ึ มคี า เปน 7 ในฐานสบิ
สําหรบั $a << 1 เปน การเล่อื นบติ ไปทางซาย 1 บติ บติ ทางขวาทเี่ พม่ิ เขา มาจะเปน 0 เสมอ จะได 1000 << 1 = 10000 ซ่ึงมคี า
เทากบั 16 ในฐาน 10 ในการใชตวั ดาํ เนินการนค้ี า จะเพมิ่ ข้นึ เปน 2 เทาในการเลื่อนบติ ไปทางซา ย 1 ครง้ั
สําหรบั $a >> 1 เปน การเลอ่ื นบติ ไปทางขวา 1 บติ บิตทางขวาทีเ่ พม่ิ เขามาจะเปน 0 เสมอ จะได 1000 >> 1 = 0100 ซึ่งมีคา
เทา กบั 4 ในฐาน 10 ในการใชต ัวดาํ เนินการนีค้ า จะลดลงคร่ึงหน่งึ ในการเลือ่ นบติ ไปทางขวา 1 คร้ัง
a&b=0
a | b = 11
a ^ b = 11
~a = -9
a << 1 = 16
a >> 1 = 4
นเ่ี ปนผลลัพธจ ากการใชต วั ดําเนนิ การระดบั บติ

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

39

Compound assignment
Compound assignment operators คือตวั ดําเนินการทร่ี วมระหวา งตัวดําเนินการทางคณิตศาสตรแ ละตัวดําเนนิ การ
กําหนดคา มันใชส าํ หรบั อัพเดทขอ มูลทีอ่ า งอิงจากขอ มลู ในปจ จบุ ัน หรอื กลาวอีกนยั หน่ึง มันเปน รปู แบบทสี่ น้ั กวา ของตวั ดาํ เนนิ การ
ทางคณติ ศาสตร
น่ีเปนตารางสําหรบั Compound assignment operators ในภาษา PHP
Operator Example Equivalent to
+= $a += 2; $a = $a + 2

-= $a -= 2; $a = $a - 2

*= $a *= 2; $a = $a * 2

/= $a /= 2; $a= $a / 2

%= $a %= 2; $a = $a % 2

>>= $a >>= 2; $a = $a >> 2

<<= $a <<= 2 $a = $a << 2

&= $a & = 2; $a = $a & 2

^= $a ^= 2; $a= $a ^ 2

|= $a |= 2; $a = $a | 2

ตอไปมาดูตัวอยางการใชง าน Compound assignment operators ในภาษา PHP โดยจะเปนโปรแกรมในการบันทึกความคืบหนา
ของการสรา งตกึ
<?php

$floor = 0;
echo "Building is being constructed.\n";

$floor += 3;
echo "First day finished $floor floors.\n";

$floor += 5;
echo "Second day finished $floor floors.\n";

$floor += 4;
echo "Third day finished $floor floors.\n";

$floor += 2;
echo "Forth day finished $floor floors .\n";

?>
ในตัวอยาง เปน โปรแกรมแสดงการทํางานของการสรา งตกึ ตัวแปร $floor สาํ หรบั เก็บคาจาํ นวนช้ันของตกึ ท่ที าํ การสรางเสร็จแลว
ในแตล ะวันท่ที าํ การสรางตกึ เสรจ็ จะนาํ จํานวนช้นั ใหมไปบวกเพิ่มกบั วันกอ นหนา เชน ในวันแรกสรา งเสรจ็ ไป 3 ชั้นจะได $floor
+= 3; ซงึ่ ตวั ดาํ เนนิ การเหลานเี้ ปนรปู แบบท่สี ั้นข้ึนจาก $floor = $floor + 3; นค่ี ือการลดการใช Operand ทไ่ี มจ าํ เปนออกไป ใน
การเขียนคณุ สามารถใชแ บบไหนก็ได

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

40

Building is being constructed.
First day finished 3 floors.
Second day finished 8 floors.
Third day finished 12 floors.
Forth day finished 14 floors.
นีเ่ ปนผลลพั ธเ ม่ือรันโปรแกรม

Comparison Operators
ตัวดําเนนิ การเปรยี บเทยี บ (Comparison Operators) คือตัวดาํ เนนิ การที่ใชส ําหรับเปรยี บเทียบระหวางคา สองคา
ผลลพั ธข องการเปรยี บเทยี บจะไดเ ปน Boolean ท่ีมคี า เปนเพยี ง True หรือ False เทา นน้ั ตวั ดําเนนิ การเปรยี บเทียบมักจะใช
สําหรบั คาํ ส่ังเลอื กเงื่อนไขหรอื วนซาํ้ ในการเขยี นโปรแกรม เราใชตวั ดาํ เนนิ การเหลานเ้ี พอ่ื สรา งเงอื่ นไขใหโ ปรแกรมทาํ งานตามที่
ตอ งการ
ในภาษา PHP เน่ืองจากตัวแปรเปน แบบ Typeless ดังนนั้ คาของตวั แปรอาจจะมีความหมายเทา กนั ในบางบริบท เชน คา
ของ True นั้นอาจจะเทากบั 1 และคาของ False อาจจะเทา กับ 0 คุณสามารถดเู พ่มิ เตมิ ไดใ นเร่ืองการเทากันของขอมูล ในบทตวั
แปรและประเภทขอ มลู
น่ีเปนรายการของตวั ดาํ เนินการเปรยี บเทียบในภาษา PHP
Operator Example Result
== $a == $b เปน จรงิ ถา a เทา กับ b ไมเ ชน นั้นเปนเท็จ

!=, <> $a != $b เปนจริงถา a ไมเทา กับ b ไมเ ชน นั้นเปน เท็จ

< $a < $b เปนจริงถา a นอยกวา b ไมเชน นน้ั เปน เทจ็

<= $a <= $b เปนจริงถา a นอยกวา หรอื เทากับ b ไมเ ชนน้ันเปน เท็จ

> $a > $b เปนจริงถา a มากกวา b ไมเ ชน น้ันเปน เท็จ

>= $a >= $b เปน จริงถา a มากกวาหรอื เทา กับ b ไมเชน นนั้ เปนเท็จ

=== $a === $b เปน จริงถาทัง้ คา และประเภทของตวั แปร a เทากับ b ไมเ ชน นัน้ เปน เทจ็

!== $a !== $b เปนจริงถา ทั้งคาและประเภทของตวั แปร a ไมเทากบั b ไมเ ชนนน้ั เปน เทจ็
ตอไปเปนตัวอยา งการใชต ัวดํานําเนนิ การในการเปรียบเทียบคาในตวั แปรในภาษา PHP
<?php
$a = 5;
$b = 10;
if ($a == $b) {
echo "a is equal to b\n";
} else {
echo "a is not equal to b\n";
}
if ($a < $b) {
echo "a is less than b\n";
} else {
echo "a is not less than b\n";
}
if ($a % 2 == 0) {
echo "a is even number\n";
} else {
echo "a is odd number\n";

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

41

}
?>
ในตวั อยา ง เรามีตัวแปรสองตัวคอื $a และ $b และไดก าํ หนดคาใหก ับตวั แปรเหลา น้ี เราใชตัวดําเนนิ การเปรยี บเทยี บกับคําสง่ั
เงื่อนไข If เม่อื เง่ือนไขเปนจริงคาํ สง่ั ในบล็อคของ If จะทาํ งาน และถา ไมเ ปนจริงคาํ สัง่ ในบลอ็ คของ Else จะทาํ งาน
ในคําส่ัง if ($a == $b) เปนการตรวจสอบถา หากตวั แปรมคี า เทากัน เนอ่ื งจากคาในตัวแปรทั้งสองไมเ ทา กัน โปรแกรมจงึ ทาํ งานใน
บล็อคของ Else ในคําส่ัง if ($a < $b) เปน การตรวจสอบถาหากตวั แปร $a มคี านอยกวา $b ซ่ึงเปน จรงิ และในคาํ ส่งั สุดทา ย if ($a
% 2 == 0) เปนการตรวจสอบถา หาก $aเปน เลขคูจากหารเอาเศษ ซึ่งเปน เท็จ
a is not equal to b
a is less than b
a is odd number
นเ่ี ปนผลลัพธเม่อื รันโปรแกรม
มาดตู ัวอยา งเพม่ิ เตมิ ในการเขยี นโปรแกรมท่จี ําเปน ตอ งใชตัวดาํ เนนิ การเปรยี บเทยี บเหลา น้ี ซง่ึ เปน โปรแกรมในการนบั จํานวนของผู
เขาชมหนา เวบ็ ไซต
<?php
$view = 1823073;
$str_view = "";
if ($view == 0) {

$str_view = "no view yet";
} else if ($view == 1) {

$str_view = "1 view";
} else if ($view < 1000) {

$str_view = "$pageview views";
} else if ($view < 1000000) {

$str_view = number_format($view / 1000, 1) . "K views";
} else if ($view < 10E9) {

$str_view = number_format($view / 1000000, 1) . "M views";
} else {

$str_view = number_format($view / 10E9, 1) . "B views";
}
echo "This page has " . $str_view . ".";
?>
ในตวั อยาง เปน โปรแกรมในการนบั จาํ นวนการดูหนา ของเว็บไซต ในตัวแปร $view เปนจาํ นวนครง้ั ทั้งหมดของการดู เราไดใ ชค าํ ส่ัง
If ในการตรวจสอบเพ่อื ใหเปนการแสดงขอ มลู ในรปู แบบทส่ี นั้ ขึน้ เชน ถาหากมีการดู 1,000,000 คร้งั เราจะแสดง 1M แทน
This page has no view yet.
This page has 34 views.
This page has 5.6K views.
This page has 1.8M views.
นเี่ ปน ผลลัพธของโปรแกรมเมอ่ื เราเปลีย่ นคา ของ $view เปน 0, 34, 5625 และ 1823073 ตามลาํ ดับ

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

42

ตอ ไปเปน ตวั อยางในการเปรยี บเทยี บคาของขอ มลู ตา งประเภทกัน แตคาอาจจะเทา กนั เม่อื นําไปใชเหมอื น Boolean
<?php
$x = 1;
$y = "1";
echo "x == y -> ", var_dump($x == $y);
echo "x === y -> ", var_dump($x === $y);
$is_rain = 1;
if ($is_rain) {

echo "It is raining now.\n";
}
$male = true;
if ($male) {

echo "You are a boy.\n";
} else {

echo "You are a girl.\n";
}
echo "is_rain == male -> ", var_dump($is_rain == $male);
echo "is_rain === male -> ", var_dump($is_rain === $male);
?>
ในตัวอยาง เปน การเปรยี บเทยี บความเทากันของขอ มูลตา งประเภทกนั ซง่ึ ขอ มูลประเภทอน่ื ท่ไี มใช Boolean เมอ่ื ถกู นํามาใชใน
บริบทของ Boolean เชน การเปรียบเทยี บ การใชกบั คาํ สั่งเลือกเงอ่ื นไขหรอื คําสั่งวนซาํ้ มนั สามารถทํางานเหมือน Boolean ได
$x = 1;
$y = "1";
echo "x == y -> ", var_dump($x == $y);
echo "x === y -> ", var_dump($x === $y);
echo "x + y -> ", var_dump($x + $y);
ในตวั อยาง เรามีตัวแปร $x ซ่งึ เปนขอมลู แบบ Integer และตัวแปร $y เปนขอ มูลแบบ String เมอ่ื นําขอมลู มาเปรยี บเทยี บกันดวย
ตวั ดาํ เนนิ การ == จะไดผ ลลัพธเปน true แตเ ม่อื นํามาเปรียบเทียบกนั โดยตวั ดาํ เนนิ การ === จะไดผ ลลัพธเ ปน false เพราะวา ตวั
ดาํ เนนิ การนต้ี องเทา กนั ท้ังขอ มูลและประเภทของตัวแปร
echo "x + y -> ", var_dump($x + $y);
ตอ มาเปน การนาํ ตวั แปรทง้ั สองมาบวกกัน ซึ่งเปนการบวกระหวาง Integer กบั String ซงึ่ ในภาษา PHP ขอ มูลแบบ String นั้นมี
ลาํ ดบั ความสําคญั นอยกวา Integer ทําใหไ ดผ ลลัพธส ดุ ทา ยเปน Integer
$male = true;
if ($male) {

echo "You are a boy.\n";
} else {

echo "You are a girl.\n";
}
echo "is_rain == male -> ", var_dump($is_rain == $male);
echo "is_rain === male -> ", var_dump($is_rain === $male);

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

43

ตอมาเปนการเปรยี บเทียบคาของ Integer ในบรบิ ทของ Boolean เหมอื นทเ่ี ราเคยบอกไปวา True นัน้ มคี าเทากบั 1 ดงั นัน้ เม่อื ใช
กับคําสั่ง If หรอื เปรยี บเทียบกันดว ยตัวดําเนินการ == จึงไดผ ลลัพธเ ปน true แตไดผ ลลพั ธเ ปน false เมือ่ ทาํ การเปรียบเทียบความ
เทากนั ของประเภทของขอ มลู ได
x == y -> bool(true)
x === y -> bool(false)
x + y -> int(2)
It is raining now.
You are a boy.
is_rain == male -> bool(true)
is_rain === male -> bool(false)
และนีเ่ ปน ผลลพั ธเ มอื่ รันโปรแกรมในตัวอยา งขางบน

Logical operators

ตัวดาํ เนนิ การตรรกศาสตร (Logical operators) คอื ตวั ดําเนนิ การสาํ หรับสราง Expression จาก Expression ยอ ยๆ โดย
ผลลัพธที่ไดจ ะเปน Boolean ทม่ี ีคา True หรือ False ตอไปนเ้ี ปนตัวดําเนินการตรรกศาสตรใ นภาษา PHP
Operator Example Result
and $expr1 and $expr2 เปนจรงิ ถาหาก Expression ท้งั สองเปน จริง ไมเชน นนั้ เปน เท็จ

or $expr1 or $expr2 เปน จริงถาหากอยา งนอ ยหนึง่ Expression เปนจรงิ ไมเ ชนนัน้ เปน เท็จ

xor $expr1 xor $expr2 เปนจริงถา หาก Expression ทั้งสองมคี า ท่ตี า งกนั ไมเชนนั้นเปนเทจ็

not not $expr1 เปน จรงิ ถาหาก Expression เปนเทจ็ และเปน เท็จถาหาก Expression เปนจรงิ

&& $expr1 && $expr2 เปน จรงิ ถา หาก Expression ท้งั สองเปนจรงิ ไมเชน นั้นเปนเท็จ (อกี รูปแบบของ and)

|| $expr1 || $expr2 เปน จริงถาหากอยางนอ ยหนึง่ Expression เปนจรงิ ไมเ ชน นั้นเปนเท็จ (อีกรูปแบบของ or)

! !$expr1 เปน จริงถา หาก Expression เปน เท็จ และเปน เท็จถา หาก Expression เปน จรงิ (อีกรปู แบบของ not)
ในภาษา PHP คุณสามารถใชต วั ดาํ เนินการตรรกศาสตรรปู แบบใดกไ็ ด เชน and เปนแบบประโยค และ && เปน แบบสัญลกั ษณซ ่งึ
ไดผลลพั ธเชน เดยี วกัน ซึ่งในบทเรยี นนีส้ วนมากแลวเราจะใชแ บบสญั ลกั ษณม ากกวา
<?php
$expr1 = (1 == 1); // true
$expr2 = (10 > 20); // false
$expr3 = $expr1 && $expr2; // false
$expr4 = $expr1 || $expr2; // true
$expr5 = !$expr4; // false
echo "expr1 = $expr1\n";
echo "expr2 = $expr2\n";
echo "expr3 = $expr3\n";
echo "expr4 = $expr4\n";
echo "expr5 = $expr5\n";
echo "expr1 = " , var_dump($expr1);
echo "expr2 = " , var_dump($expr2);
echo "expr3 = " , var_dump($expr3);
echo "expr4 = " , var_dump($expr4);
echo "expr5 = " , var_dump($expr5);
?>

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

44

ในตัวอยา ง เปน การสรา ง Expression จากตวั ดาํ เนินการตรรกศาสตรแบบตางๆ ในตอนแรกของโปรแกรมเรามีตัว
แปร $expr1 สาํ หรับเก็บคา การเทากบั ของ 1 และ 1 เน่อื งจากท้ังสองคาเทา กนั ตวั แปรน้จี ึงมคี า เปน true สําหรบั ตัว
แปร $expr2 นน้ั 10 ไมม ากกวา 20 ดงั นน้ั จึงมีคาเปน false
$expr3 = $expr1 && $expr2; // false
ในตวั แปร $expr3 เปนการรวมของสอง Expression เขา ดวยกันดว ยตวั ดาํ เนนิ การ and ใน $expr1 && $expr2 ซึ่งหมายความวา
"ถาหาก 1 เทากบั หนึง่ และ 10 มากกวา 20" เน่ืองจากนพิ จนไ มเปน จรงิ ทาํ ให $expr3 เปน false
$expr4 = $expr1 || $expr2; // true
ในตวั แปร $expr4 เปน การรวมของสอง Expression เขาดว ยกันดว ยตวั ดําเนินการ or ซ่ึงหมายความวา "ถา หาก 1 เทา กับ
หน่ึง หรอื 10 มากกวา 20" เนือ่ งจากมนี พิ จนอ ยา งนอยหนึ่งนิพจนเ ปนจรงิ $expr4เปน true
$expr5 = !$expr4; // false
ในคําส่งั นี้เปนการใชตัวดาํ เนินการ not ในการกลับคา ของ Boolean ใหเ ปน คา ตรงขา ม ซ่ึงในตัวแปร $expr4 มีคา เปน true ผลลัพธ
ของตัวแปร $expr5 จงึ เปน false
expr1 = 1
expr2 =
expr3 =
expr4 = 1
expr5 =
expr1 = bool(true)
expr2 = bool(false)
expr3 = bool(false)
expr4 = bool(true)
expr5 = bool(false)
นเี่ ปน ผลลัพธการทํางานของโปรแกรม ซง่ึ ในภาษา PHP คา ฺBoolean ของ true จะถูกแสดงเปน 1 และคา false จะแสดงเปน 0
หรือ String ทวี่ างปลา วเหมือนท่คี ณุ เหน็ ในผลลัพธ เราใชฟงกช ัน var_dump() เพื่อแสดงประเภทและคา ทแี่ ทจรงิ ของตวั แปร
ตอไปมาดตู วั อยา งการประยุกตใชง านตัวดาํ เนนิ การตรรกศาสตรใ นการเขียนโปรแกรม
<?php
define("ADMIN_USERNAME", "danny");
define("ADMIN_PASSWORD", "mat93qs6");
$username = "danny";
$password = "12345678";
if ($username == ADMIN_USERNAME && $password == ADMIN_PASSWORD) {

echo "Login success.";
} else {

echo "Username or password is invalid.";
}
?>
ในตัวอยา ง เปนโปรแกรมในการตรวจสอบการเขา สรู ะบบของเวบ็ ไซต ใหต ัวแปร $username และ $password เปนคา ทรี่ ับมาจาก
ฟอรม ในการเขา สรู ะบบทงั้ ชอ่ื ผใู ชแ ละรหัสผา นตอ งถูกตอง ดงั นนั้ เราใชต ัวดาํ เนินการ and (&&) สาํ หรบั เง่อื นไขดังกลา ว

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

45

Username or password is invalid.
นเ่ี ปน ผลลพั ธเ มอ่ื รนั โปรแกรม ซ่ึงจะพบวาการเขาสรู ะบบไมสาํ เรจ็ ถึงแมว าชอื่ ผใู ชถ กู ตอ ง แตร หสั ผา นน้ันไมถ ูกตอง

ตวั อยางตอไปเปน การใชง านตวั ดําเนนิ การ Or กบั การตรวจสอบหลายเงอื่ นไข
<?php
$name = "Marcus";
$age = 18;
$money = 120;
if ($age >= 20 || $money >= 100) {

echo "$name can enter the party.";
} else {

echo "$name must have accept age or enough money.";
}
?>
ในตัวอยางเปนโปรแกรมตรวจสอบการเขา ปารต้ี เพอื่ เขา รว ม Marcus จําเปนตอ งมีอายตุ ัง้ แต 20 ปขน้ึ ไป หรือมีเงนิ ตงั้ แต 100
เหรียญขึ้นไป
Marcus can enter the party.

นเ่ี ปนผลลัพธข องโปรแกรม ซงึ่ ในผลการทํางานนั้น Marcus สามารถเขา รว มปารต ้ีได เพราะถงึ แมเ ขาจะอายไุ มถงึ 20 ป
แตเขามเี งนิ ถึง 100 เหรียญ ซ่งึ ตัวดําเนินการ Or นน้ั ตอ งการอยางนอ ยหน่ึง Expression ท่จี ะเปนจรงิ

String Concatenation Operator

ในภาษา PHP เครอื่ งหมายในการตอ String คือจุด (.) ใชสําหรับตอ String ตงั้ แตสอง String ใหเ ปน String เดียวกัน
$str = "marcus" . "code";
ในตวั อยา ง เปนการใชเครอื่ งหมายตอ String สําหรบั ตอ สอง String เขา ดวยกัน ซ่ึงจะได String ใหมใ นตัวแปรเปน "marcuscode"
คุณสามารถเรยี นรเู กย่ี วกบั String ไดในบทของ String

Ternary Operator

Ternary Operator คอื ตวั ดาํ เนินการตรวจสอบเงอ่ื นไขแบบส้นั โดยตัวดําเนนิ การใชเคร่ืองหมาย ? และมี Operand สาม
ตัว ซงึ่ มีรปู แบบการใชง านดังนี้
expression ? value for true : value for false;
คณุ สามารถเรียนรูเพม่ิ เติมเกีย่ วกบั Ternary Operator ไดใ นบทของคําส่งั เลอื กเงือ่ นไขของบทเรยี นนี้

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก

46

Operators precedence
ลาํ ดับความสําคญั ของตวั ดําเนินการ (Operators precedence) คอื การจัดลาํ ดบั การทํางานของตัวดําเนินการตางๆ ใน
ภาษา PHP โดยตัวดําเนนิ การท่มี ลี าํ ดับความสําคญั มากทส่ี ดุ จะทํางานกอนตวั ดาํ เนนิ การท่ีมีลําดบั ความสาํ คญั นอ ย ในตารางขา งลา ง
เปน ลาํ ดับความสาํ คญั ของตัวดาํ เนนิ การทเ่ี รียงจากความสาํ คญั มากที่สุดไปยงั นอยทส่ี ุด
Associativity Operators
non-associative clone new

left [

right **

right ++ -- ~ (int) (float) (string) (array) (object) (bool) @

non-associative instance of

right !

left * / %

left + - .

left <<>>

non-associative < <= > >=

non-associative == != === !== <> <=>

left &

left ^

left |

left &&

left ||

right ??

left ?:

right = += -= *= **= /= .= %= &= |= ^= <<= >>=

left and

left xor

left or
คุณสามารถกําหนดความสําคญั ใหก บั ตวั ดาํ เนินการหรือกลุมของ Expression ไดโ ดยการใสเ คร่อื งหมายวงเลบ็ () ลอมรอบ
มาดตู วั อยา งการทาํ งานของลําดับความสําคญั ของตวั ดําเนนิ การในภาษา PHP
<?php

$a = 2 + 3 * 5;
echo "a = $a\n";

$b = (2 + 3) * 5;
echo "b = $b\n";

?>
ในตัวอยา งในตวั แปร $a จะไดค า เปน 17 เพราะวาเคร่ืองหมายการคูณ * มีลาํ ดับความสําคญั มากกวา การบวก ดงั นน้ั การทํางานจงึ
เปนการนาํ 3 คณู กบั 5 กอ น แลว คอ ยนาํ ผลลัพธไปบวกกบั 2 ซงึ่ เปน การทาํ งานตามปกติ

การพฒั นาเวบ็ ไซตห์ น่วยงานอยา่ งมีประสิทธิภาพ

สาํ นกั วทิ ยบริการและเทคโนโลยสี ารสนเทศ มหาวทิ ยาลยั เทคโนโลยรี าชมงคลตะวนั ออก