ວິຊາ การพัฒนาเว็บไซต์ทางธุรกิจชั้นสูง

การพัฒนาเว็บไซต์ทางธุรกจิ ชั้นสงู นิรันดร ผานิจ (วท.ม. เทคโนโลยสี ารสนเทศ) มหาวทิ ยาลัยราชภัฏอุดรธานี 2560

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

ໃຈປະສົ ງສ້ າງ ກາງດົ ງກະວ່າທົ່ ງ ໃຈຂ້ ຄ້ ານ ກາງບ້ ານກະວ່າດົ ງ

สารบญั ค คานา ก สารบญั ค สารบัญตาราง ฎ สารบัญภาพ ฐ บทที่ 1 เทคโนโลยอี ินเทอรเ์ น็ต 1 1 1.1 ระบบเครือขา่ ยอนิ เทอร์เนต็ 3 1.2 เวบ็ เซริ ฟ์ เวอร์ 4 1.3 ดาตา้ เบสเซริ ฟ์ เวอร์ 5 1.4 ไอพีแอดเดรส 6 1.5 โดเมนเนม (Domain Name) 9 1.6 แนวโนม้ ของเทคโนโลยอี ินเทอร์เนต็ 11 1.7 บทสรปุ 12 คาถามท้ายบท 13 บทที่ 2 รูปแบบลกั ษณะเวบ็ ไซต์ 13 2.1 เว็บแอพพลิเคชัน 13 2.2 ขน้ั ตอนการทางานของเวบ็ แอพพลเิ คชัน 14 2.3 สครปิ ต์ทางานบนฝัง่ ไคลเอนต์ (Client side script) 14 2.4 ภาษา HTML 16 2.5 โครงสรา้ งภาษา HTML 16 16 2.5.1 ส่วนหวั (Head) 20 2.5.2 ส่วนแสดงผลข้อมลู (Body) 20 2.6 ระบบสีในภาษา HTML 22 2.6.1 การกาหนดสี แบบกาหนดชื่อสี 23 2.6.2 การกาหนดสี RGB แบบ HEX 23 2.6.3 การกาหนดสีแบบ HSL 23 2.7 ฟอร์มในภาษา HTML 25 2.7.1 โครงสร้างของฟอร์ม 2.7.2 ชนดิ ของฟอร์ม

ง 30 31 สารบญั (ต่อ) 32 2.8 สครปิ ต์ทางานบนฝ่งั เซริ ์ฟเวอร์ (Server side script) 2.9 สรปุ ผล 33 คาถามทา้ ยบท 33 บทท่ี 3 ภาษา PHP เบื้องต้น 35 3.1. ประวตั ขิ องภาษา PHP 41 3.2. การตดิ ต้ังเวบ็ เซิร์ฟเวอร์ 41 3.3. โครงสรา้ งของภาษา PHP 43 3.4. การทางานรว่ มกนั ระหวา่ งภาษา HTML และภาษา PHP 45 3.5. คาสัง่ echo และ print 47 3.6. ทดสอบไฟลภ์ าษา PHP 48 3.7. หมายเหตุ (comment) 49 3.8. คาสงวนของภาษา PHP (Reserved Word) 50 3.9. สรปุ คาถามทา้ ยบท 51 บทที่ 4 ตัวแปร และตวั ดาเนินการ 51 4.1. ความหมายตวั แปร (Variable) 51 4.2. การตั้งชอ่ื ตัวแปร 52 4.3. การประกาศตวั แปร 52 4.4. ชนิดขอ้ มลู 53 4.5. ขอบเขตของตวั แปร 55 4.6. ตวั แปรอารเ์ รย์ (Array) 56 4.7. อาร์เรย์ 2 มิติ 57 4.8. ฟงั กช์ ัน isset() 58 4.9. ฟงั กช์ ัน empty() 59 4.10. ฟงั กช์ ัน unset 60 4.11. ฟังกช์ ัน gettype() 61 4.12. ตวั ดาเนินการทางการคานวณ (Arithmetic Operator)

สารบญั (ต่อ) จ 4.13. ตัวดาเนินการทางขอ้ ความ (String Operator) 4.14. ตวั ดาเนินการกาหนดค่า (Assignment Operator) 63 4.15. ตวั ดาเนินการเพิ่มและลดคา่ (Increment/Decrement Operator) 63 4.16. ตัวดาเนนิ การเปรียบเทยี บ (Comparison Operator) 64 4.17. ตัวดาเนนิ การทางตรรกะ (Logical Operator) 65 4.18. ลาดบั ความสาคญั ของตัวดาเนนิ การ 66 4.19. ตวั แปรคา่ คงที่ (Constant) 68 4.20. สรปุ 69 คาถามทา้ ยบท 71 บทที่ 5. คาสงั่ ควบคมุ (Control Statement) 72 5.1 คาสัง่ ควบคุม (Control Statement) 73 5.2 คาสั่งตัดสินใจเลอื กทา (Decision) 73 73 5.2.1 คาสั่ง if 74 5.2.2 คาสง่ั if-else 76 5.2.3 คาสง่ั if ซ้อน if 78 5.2.4 คาสั่ง switch 79 5.3 คาสงั่ วนซ้า (Loop) 81 5.3.1 คาสัง่ for 82 5.3.2 คาสั่ง while 84 5.3.3 คาสั่ง do...while 85 5.3.4 คาสั่ง foreach 87 5.4 คาสง่ั break; 88 5.5 คาสงั่ continue; 89 5.6 คาสั่ง include 89 5.7 คาสั่ง require() 90 5.8 คาสงั่ require_once 91 5.9 คาสงั่ include_once 91 5.10 สรปุ 91

ฉ 93 สารบัญ (ต่อ) 95 คาถามท้ายบท 95 บทท่ี 6 ฟังกช์ นั 95 6.1 ฟงั กช์ ัน (Function) 96 6.2 การเรยี กใช้ฟงั ก์ชัน 97 6.3 ฟังก์ชันดา้ นตวั เลขทางคณิตศาสตร์ (Math Function) 100 6.4 ฟงั ก์ชันเกี่ยวกับตัวอักษร 102 6.5 ฟงั กช์ ันเกี่ยวกบั วันท/ี่ เวลา (DateTime Function) 105 6.6 ฟงั กช์ ันเกยี่ วกบั ไฟล์ และ ไดเรค็ ทอร่ี (File System Function) 106 6.7 การสรา้ งฟังก์ชันข้ึนมาเอง 107 108 6.7.1. สร้างฟงั กช์ ัน 109 6.7.2. การเรียกใชง้ าน 111 6.8 สร้างฟงั กช์ ันที่มกี ารรบั อารก์ ิวเมนต์ 116 6.9 การกาหนดคา่ ดีฟอลตข์ องอารก์ ิวเมนต์ 117 6.10. ฟังก์ชันทม่ี ีการส่งคนื ค่า 6.11 สรุป 119 คาถามท้ายบท 119 บทท่ี 7 ระบบจดั การฐานข้อมูล MySQL 120 7.1 ระบบจดั การฐานข้อมูล MySQL 122 7.2 การเช่ือมต่อกบั ฐานขอ้ มูล MySQL Server 123 7.3 การสร้างบัญชผี ใู้ ช้ฐานขอ้ มูล MySQL 124 7.4 การลบบญั ชผี ู้ใช้ MySQL 126 7.5 การกาหนดสิทธิให้แก่บัญชีผ้ใู ช้ 127 7.6 การยกเลกิ สิทธิในตาราง 129 7.7 การสร้างฐานขอ้ มูล 129 7.8 การลบฐานขอ้ มูล 130 7.9 ชนิดของข้อมลู ในฐานข้อมลู Mysql 7.9.1 ขอ้ มลู ประเภทข้อความ (String)

สารบัญ (ต่อ) ช 7.9.2 ข้อมูลประเภทตัวเลข (Numeric) 7.9.3 ขอ้ มลู ประเภทวันท่ี (Date/time) 131 7.10 แผนภาพอีอาร์แสดงโครงสรา้ งขอ้ มูลสินคา้ OTOP 133 7.11 การสร้างตาราง 134 7.12 การลบตาราง 135 7.13 คาสง่ั เพ่ิมข้อมลู (Insert) 138 7.13.1 การเพ่ิมข้อมูลไมร่ ะบุคอลมั น์ 139 7.13.2 การเพิ่มข้อมูลโดยระบคุ อลัมน์ 139 7.13.3 การเพิ่มข้อมูลทีละหลายเรคอร์ด 140 7.13.4 การเพิ่มข้อมูลจากการสืบคน้ มาจากตารางอ่นื 141 7.14 คาส่งั สบื ค้นข้อมูล (Select) 141 7.14.1 การสืบคน้ ข้อมลู แบบไมม่ ีเงื่อนไข 142 7.14 2 การสบื คน้ ข้อมูลแบบมีเง่อื นไข 142 7.14.3 คาสง่ั สบื คน้ ข้อมลู จากหลายตาราง (Joint) 143 7.15 คาส่งั ปรับปรงุ ข้อมูล (Update) 144 7.16 คาสง่ั ลบข้อมลู (delete) 146 7.17 สรุป 148 คาถามท้ายบท 149 บทท่ี 8 ภาษา PHP เชือ่ มต่อฐานขอ้ มูล MySQL 149 8.1 ภาษา PHP เชื่อมต่อฐานข้อมูล MySQL 8.2 การเช่ือมต่อฐานข้อมูล 151 8.2.1 การเชื่อมต่อแบบ MySQLi (Object-Oriented) 151 8.2.2 การเชื่อมต่อแบบ MySQLi (Procedural) 152 8.2.3 การเช่ือมต่อแบบ PDO 152 8.3 ปิดการเชื่อมตอ่ หรือยกเลกิ การเชอ่ื มต่อ 153 8.4 การสืบคน้ ข้อมูล 154 8.5 การเพ่ิมข้อมูล 155 155 159

ซ 165 172 สารบญั (ต่อ) 174 8.6 การแก้ไขข้อมลู 175 8.7 การลบข้อมลู 8.8 สรปุ 177 คาถามทา้ ยบท 177 บทที่ 9 ตัวแปรคุกก้ี (Cookie) และ ตวั แปรเซสชัน (Session) 178 9.1 ตัวแปรคุกก้ี (Cookie) และ ตัวแปรเซสชัน 179 9.2 ตัวแปรคกุ ก้ี (Cookie) 180 182 9.2.1 การสร้างตวั แปรคุกกี้ 182 9.2.2 การเรียกใช้ตวั แปรคุกก้ี 183 9.2.3. การเปล่ียนแปลงข้อมูลตวั แปรคุกก้ี 186 9.2.4 การลบหรอื ยกเลิกตัวแปรคกุ ก้ี 187 9.3 เซสชัน (Session) 189 9.3.1 การกาหนดตวั แปรเซสชัน 190 9.3.2 การเปลย่ี นแปลงข้อมูลที่บนั ทึกในตัวแปรเซสชัน 192 9.3.3 การยกเลกิ ตัวแปรเซสชัน 193 9.4 แบบฝึกปฏบิ ตั ใิ นห้องเรียน 9.5 สรุป 195 คาถามทา้ ยบท 196 บทท่ี 10 การเขียนโปรแกรมเชงิ วัตถุ195 196 10.1 หลักการเขยี นโปรแกรมเชิงวัตถุ 197 10.2 คลาส (Class) และออบเจ็ค (Object) 198 10.2.1 คลาส (Class) 199 10.2.2 ออบเจ็ค (Object) หรอื อนิ สแตนซ์ (Instance) 200 10.3 โครงสรา้ งของคลาส 201 10.4 กฎการกาหนดชื่อคลาส 10.5 คุณสมบตั ิของคลาส (Properties) 10.6 สรา้ งออ็ บเจ็ค (Object)

ฌ สารบญั (ต่อ) 204 10.7 ค่าคงที่ (Constants) 205 10.8 เมธทอด (Method) 205 207 10.8.1. การประกาศเมธทอด 207 10.8.2. การเรยี กใชเ้ มธทอด 209 10.9 คอนสตรัคเตอรแ์ ละดีคอนสตรัคเตอร์ (Constructors and Destructors) 210 10.10 การสืบทอดคุณสมบตั ิ (Inheritance) 211 10.11 ระดับสทิ ธิในการเขา้ ถึง (Visibility) 214 10.12 การห่อห้มุ (Encapsulation) 216 10.13 สรปุ 217 คาถามทา้ ยบท บรรณานกุ รม

ญ

ฎ สารบญั ตาราง หน้า 3 ตารางท่ี 7 1.1 ตัวอยา่ งซอฟต์แวร์เวบ็ เซริ ์ฟเวอร์ 8 1.2 รูปแบบโดเมนแบบสากล 15 1.3 รูปแบบโดเมนแตล่ ะประเทศ 17 2.1 ประวตั ภิ าษา html 18 2.2 กลมุ่ คาสัง่ html จดั รูปแบบตวั อักษร 19 2.3 กลุ่มคาสั่ง html การจดั หนา้ เว็บเพจ 20 2.4 กล่มุ คาสง่ั จัดการตาราง 24 2.5 ตวั อยา่ งชอ่ื สใี นภาษา HTML ทส่ี นับสนุนบราวเซอรม์ าตรฐานในปัจจบุ ัน 25 2.6 คุณสมบัติของแทก็ ฟอรม์ 26 2.7 คุณสมบัตขิ อง Text และ Password 29 2.8 คณุ สมบตั ขิ อง Radio 30 2.9 คุณสมบัตขิ อง Selected 48 2.10 คณุ สมบตั ิของ Text Area 62 3.1คาสงวนของภาษา PHP 63 4.1 ตัวดาเนินการทางคณิตศาสตร์ 64 4.2 ตวั ดาเนินเกี่ยวกบั สตรงิ 65 4.3 ตารางตวั ดาเนินการกาหนดคา่ (Assignment Operator) 66 4.4 การเพ่มิ ค่า และการลดค่าของตวั แปร 67 4.5 ตวั ดาเนินการเปรียบเทยี บ 68 4.6 ตัวดาเนินการตัวดาเนนิ การทางตรรกะ 97 4.7 ตวั ดาเนนิ การตัวดาเนินการทางตรรกะ 97 6.1 ฟงั กช์ ันด้านตวั เลขทางคณิตศาสตร์ (Math Function) 6.2 ฟงั ก์ชันเกี่ยวกบั ตัวอักษร 102 6.3 ฟังกช์ ันเกีย่ วกบั วันท/ี่ เวลา (DateTime Function) 105 6.4 ฟงั กช์ ันเกย่ี วกบั ไฟล์ และไดเร็คทอรี่ (File System Function) 106 6.5 ทดลองวเิ คราะห์ดูวา่ การกาหนดชื่อฟังกช์ ันดังต่อไปนีถ้ ูกตอ้ งหรือไม่ 125 7.1 สทิ ธิทผ่ี ูใ้ ช้ฐานขอ้ มูล (Privileges) 130 7.2 ขอ้ มูลประเภทข้อความ

ฏ หน้า 131 สารบญั ตาราง (ตอ่ ) 133 136 ตารางท่ี 7.3 ขอ้ มลู ประเภทตัวเลข 7.4 ข้อมลู ประเภทวันทแ่ี ละเวลา 7.5 ตาราง product สาหรบั เกบ็ ข้อมลู สินคา้ OTOP

สารบัญภาพ ฐ ภาพท่ี หน้า 1.1 ชดุ Internet protocol suite 1 1.2 ระบบเครือขา่ ยอินเทอร์เนต็ ท่ีหลากหลายระบบปฏิบัติ 2 1.3 การเชือ่ มต่อระบบเครือข่ายอนิ เทอร์เนต็ ประเทศไทย 2 1.4 โลโกซ้ อฟต์แวร์เวบ็ เซิรฟ์ เวอร์ IIS และ Apache 3 1.5 สญั ลกั ษณข์ องเครื่องเวบ็ เซริ ์ฟเวอร์ 4 1.6 สัญลกั ษณข์ องเครอ่ื งเวบ็ เซิรฟ์ เวอร์ 4 1.7 สญั ลักษณข์ องเครอื่ งดาต้าเบสเซิรฟ์ เวอร์ 4 1.8 รายละเอียดหมายเลขไอพขี องคอมพิวเตอร์ท่เี ชือ่ มต่ออนิ เทอร์เนต็ 5 1.9 โครงสร้างแพค็ เกต็ ทชี ีพี 6 1.10 รายละเอยี ดหมายเลขไอพีของคอมพิวเตอร์ทเี่ ช่อื มต่ออินเทอร์เน็ต 6 1.11 ตัวอย่างโครงสร้างโดเมนเนม 8 1.12 แนวโน้มการโฆษณาผา่ นอนิ เทอร์เนต็ กาลังเตบิ โตอย่างรวดเร็ว 9 1.13 แนวโน้มการทางานผ่านอินเทอรเ์ น็ตเพ่ิมมากข้ึน 10 1.14 แนวโน้มจานวนผใู้ ช้งานอนิ เทอรเ์ น็ตในประเทศไทย 10 2.1 โปรแกรมเวบ็ เบราว์เซอร์ 13 2.2 ขนั้ ตอนการทางานของเว็บแอพพลเิ คชัน 14 2.3 ตวั อย่างหนา้ เว็บเพ็จภาษา html 16 2.4 แบบฟอรม์ เว็บไซต์ facebook.com 23 2.5 ตราสญั ลักด์ิของภาษาท่ีทางานฝ่ังเซริ ฟ์ เวอร์ 30 3.1 Rasmus Lerdorf ผ้คู ิดค้นภาษา PHP 33 3.2 Andi Gutmans และ Zeev ผูก้ ่อตง้ั บริษัท Zend 35 3.3 โลโก้ PHP 35 3.4 โลโก้โปรแกรม Xampp 36 3.5 หนา้ จอ XAMPP Control Panel 40 3.6 โครงสรา้ งไฟล์โปรแกรม Xampp 40 3.7 การประมวลผลของภาษา PHP 42 3.8 ตัวอย่างเว็บเบราวเ์ ซอร์ 42 3.9 สตาร์ทเว็บเซิรฟ์ เวอร์ 46

ฑ หน้า 46 สารบัญภาพ (ต่อ) 48 ภาพที่ 51 3.10 ผลการรนั เว็บภาษา PHP 55 3.11 ผลการรนั เว็บภาษา PHP ท่มี ีคอมเมนต์ 55 4.1 การประกาศตวั แปรและการจองพนื้ ทใ่ี นหนว่ ยความจา 56 4.2 โครงสร้างอารเ์ รย์ 1 มติ ิ $a[6] 74 4.3 ตัวอยา่ งการกาหนดคา่ ในอาร์เรย์ $a ในตาแหน่งอนิ เด็กซ์ 0 74 4.4 โครงสรา้ งอาร์เรย์ 2 มติ ิ $a[3][4] 77 5.1 รูปแบบโครงสร้างคาสง่ั ตัดสินใจแบบเลอื กทา (Decision) 78 5.2 รูปแบบโครงสร้างคาส่งั if 80 5.3 รปู แบบโครงสรา้ งคาสงั่ if-else 120 5.4 รปู แบบโครงสรา้ งคาสั่ง if ซอ้ น if 120 5.5 รปู แบบโครงสรา้ งคาส่งั switch 121 7.1 ตราสญั ลักษณ์มายเอสควิ แอล 121 7.2 David Axmark และ Michael \"Monty\" Widenius 121 7.3 การ Start MySQL 122 7.4 การเชือ่ มต่อมายเอสคิวแอลเซิร์ฟเวอร์ 123 7.5 แสดงผลการเชื่อมต่อสาเร็จ 124 7.6 คาสั่ง exit สาหรับออกจากฐานข้อมลู 128 7.7 การสร้าง user ใหมช่ ื่อ nirun 129 7.8 ลบบญั ชผี ใู้ ช้ nirun ออกจากฐานขอ้ มูล 134 7.9 การสร้างฐานขอ้ มลู ชื่อ buengkan 145 7.10 การลบฐานข้อมลู buengkan 146 7.11 แผนภาพอีอาร์แสดงโครงสรา้ งขอ้ มูลระบบจาหนา่ ยสินคา้ OTOP 151 7.12 ตวั อยา่ งข้อมลู ในตาราง product และตาราง orderdetails 154 7.13 ผลการประมวลผลการสืบคน้ ข้อมูลจากหลายตาราง 156 8.1 ขน้ั ตอนการทางานของภาษา PHP เช่อื มตอ่ กบั ฐานข้อมูล Mysql 159 8.2 สถาปัตยกรรม PDO 8.3 ไฟล์ listProduct.php แสดงผลการค้นหาสนิ ค้าโอทอป 8.4 ขน้ั ตอนการเพิ่มสนิ คา้ ในฐานขอ้ มลู

ฒ สารบัญภาพ (ต่อ) ภาพท่ี หนา้ 8.5 หนา้ จอไฟล์ insertForm.php แสดงแบบฟอร์มรบั ข้อมูล 163 8.6 หน้าจอไฟล์ insertProduct.php แสดงผลการเพ่ิมข้อมูล 165 8.7 ไฟล์ productForm.php ทใ่ี ชป้ รับปรงุ แก้ไขข้อมลู 166 8.8 หนา้ จอไฟล์ productUpdate.php ผลการปรบั ปรงุ แกไ้ ขขอ้ มลู 172 8.9 ขั้นตอนการลบรายการสินคา้ 172 8.10 หน้าจอไฟล์ productDelete.php ผลการลบขอ้ มูลสินค้า 174 8.11 สรุปข้ันตอนการเชื่อมต่อฐานขอ้ มลู 174 9.1 การทางานของตัวแปรคุกกแี้ ละตวั แปรเซสชัน 177 9.2 การสร้างและรับส่งคา่ ตัวแปรระหวา่ งไคลเอนต์และเซริ ์ฟเวอร์ 178 9.3 การจดจาอีเมลลส์ าหรับการล็อกอินเข้าสู่ระบบ เวบ็ ไซต์ facebook.com 179 9.4 เว็บเขา้ มาครง้ั แรก ยงั ไม่มกี ารสร้างตวั แปรคุกก้ี 181 9.5 เวบ็ ทม่ี กี ารสรา้ งตวั แปรคุกกีแ้ ล้ว 181 9.6 หลกั การทางานของตวั แปรเซสชัน 184 9.7 การลอ็ กอินใชง้ านเว็บไซต์ facebook.com ทีใ่ ช้ Session ในการควบคุม 185 9.8 ระบบ Shopping Cart เวบ็ ไซต์ amazon.com 185 9.9 ระบบ Shopping Cart ที่มกี ารเลือกสนิ ค้า เวบ็ ไซต์ amazon.com 186 9.10 การกาหนดและเรยี กใช้งานตวั แปรเซสชัน 187 9.11 การเปลย่ี นแปลงข้อมลู ทบี่ ันทึกในตัวแปรเซสชัน 188 9.12 ตวั แปรเซสชันในการควบคมุ การเข้าถึงไฟล์ PHP 190 10.1 แสดงการทางานรว่ มกนั ระหวา่ ง วัตถคุ น (human) และ วัตถยุ านพาหนะ (vehicle)196 10.2 ตัวอยา่ งแผนภาพคลาสไดอะแกรม 196 10.3 แผนภาพคลาสไดอะแกรม vehicle 197 10.4 สร้างออบเจค็ จากคลาส vehicle 197 10.5 ขอ้ มูลในอ็อบเจค็ Title และอ็อบเจ็ค Yam 203 10.6 ผลการแสดงข้อมูลของออ็ บเจ็ค Title 203 10.7 ผลการแสดงข้อมูลของออ็ บเจ็ค Yam 203 10.8 แผนภาพคลาสไดอะแกรมแสดงการสืบทอดคณุ สมบัติ 209 10.9 การต์ นู อธบิ ายการกาหนดการเขา้ ถึงข้อมูลแบบต่าง ๆ 210

ณ หนา้ 211 สารบัญภาพ (ต่อ) 212 ภาพที่ 213 10.10 โครงสรา้ งการ Encapsulation 214 10.11 แสดงข้อผดิ พลาดเน่ืองจากข้อมูล $age ถกู ห่อหุ้มปกปิดเอาไว้ 10.12 กาหนดอายุเทา่ กับ 25 10.13 กาหนดอายเุ ท่ากับ 65

บทท่ี 1 เทคโนโลยีอินเทอร์เนต็ ในรายวชิ าการพัฒนาเว็บไซต์ทางธุรกจิ ชนั้ สงู เปน็ การพฒั นาโปรแกรมที่ใชป้ ระมวลผลหรือ ทางานผ่านระบบอินเทอรเ์ นต็ ในบทนจี้ งึ ได้กล่าวถึงโครงสร้างของเทคโนโลยอี ินเทอรเ์ นต็ และการ เชือ่ มต่อโครงข่ายของอินเทอร์เนต็ ว่ามลี ักษณะอย่างไร รวมถงึ การทางานของเว็บเซิร์ฟเวอร์ ดาตา้ เบสเซริ ฟ์ เวอร์ การตดิ ต่อส่ือสารกันระหว่างเครื่องคอมพวิ เตอรท์ ีต่ ้องมีไอพแี อดเดรส และโดเมนเนม ว่ามกี ารเชือ่ มต่อกันหรือการสื่อสารกันอยา่ งไร รวมถึงแนวโนม้ ของเทคโนโลยีอนิ เทอรเ์ น็ตในอนาคต ว่ามีแนวโน้มเปน็ อย่างไร 1.1 ระบบเครอื ข่ายอนิ เทอรเ์ นต็ ระบบเครือข่ายอินเทอร์เน็ต (Internet) หมายถึง ระบบเครือข่ายคอมพิวเตอร์ที่มีขนาดใหญ่ ท่ีสุดในโลก เกิดจากการเชื่อมต่อระหว่างเครือข่ายขนาดเล็กหลาย ๆ เครือข่ายทั่วโลก โดยมีข้อตกลง หรือรปู แบบการสื่อสาร เพ่ือให้การติดต่อสื่อสารในระบบเครือข่าย สามารถสื่อสารกันได้เรียกว่า โพร โทคอล (Protocol) โพรโทคอล TCP/IP เป็นชุดของโปรโตคอลที่ถูกใช้ในการสื่อสารผ่านเครือข่ายอินเทอร์เน็ต เป็นมาตรฐานในการส่ือสารข้อมูล ระหว่างคอมพิวเตอร์ โดยแบ่งออกเป็นช้ัน ๆ เรียกว่าเลเยอร์ โดยแต่ละเลเยอร์จะมีหน้าท่ีของตนเอง รายละเอียดสาหรับกาหนดเส้นทางและการเช่ือมต่อภายใน เครือข่าย ซึ่งใชอ้ ย่างแพรห่ ลายในอนิ เตอร์เน็ต โพรโทคอล TCP ทาหน้าท่ีควบคุมการรับส่งข้อมูล ระหว่างเครือข่าย เพื่อใช้แลกเปลี่ยน ข้อมูลระหว่างกนั ได้ โพรโทคอล IP ทาหน้าที่ หาเส้นทางท่ีดีที่สุด หรือเปลี่ยนแปลงเส้นทางในระหว่างการส่ง ข้อมูล ภาพที่ 1.1 ชุด Internet protocol suite ที่มา : http://www.nectec.or.th/users/htk/milestones.html การพฒั นาเวบ็ ไซต์ทางธุรกจิ ชนั้ สูง นริ นั ดร ผานจิ

2 | บทท่ี 1 เทคโนโลยีอนิ เทอร์เน็ต โดยโพรโทคอล TCP/IP ทาให้เครื่องคอมพิวเตอร์ท่ีหลากหลายระบบปฏิบัติการ สามารถสอ่ื สารขอ้ มูลระหว่างกันได้ ภาพท่ี 1.2 ระบบเครือข่ายอินเทอร์เนต็ ทีห่ ลากหลายระบบปฏิบตั ิ ท่ีมา : http://www.geocities.ws/nuttawong_charoenpol/p57.gif โดยการเชื่อมโยง สามารถเชื่อมโยงกันผ่านส่ือกลางท้ังแบบส่อื กลางประเภทมีสาย ไดแ้ ก่ สายโทรศัพท์, สายแลน, สายโคแอคเชียล, เคเบิลใยแก้วนาแสง และแบบสื่อกลางประเภทไร้ สาย ได้แก่ ไมโครเวฟ, คล่ืนวิทย,ุ ดาวเทียม ภาพท่ี 1.3 การเชื่อมต่อระบบเครอื ข่ายอนิ เทอร์เน็ตประเทศไทย ที่มา http://www.nectec.or.th/users/htk/milestones.html การพัฒนาเว็บไซต์ทางธุรกจิ ชนั้ สงู

บทท่ี 1 เทคโนโลยีอินเทอร์เน็ต | 3 อินเทอร์เน็ตเกิดข้ึนท่ีประเทศสหรัฐอเมริกา เม่ือปี พ.ศ. 2512 กระทรวงกลาโหม ประเทศ สหรัฐอเมริกา เป็นผู้คิดค้นอินเทอร์เน็ตขึ้นมา มีวัตถุประสงค์เพ่ือสร้างเป็นระบบเครือข่ายที่ใช้ใน ทางดา้ นการทหาร ฝา่ ยวจิ ยั ขององค์กรจึงไดจ้ ัดต้งั ระบบเน็ตเวริ ์คขึ้นมา เรียกว่า ARPAnet ย่อมาจาก คาว่า Advance Research Project Agency net ซ่ึงประสบความสาเร็จและได้รับความนิยมในหมู่ ของหน่วยงานทหาร องค์กรธรุ กจิ รัฐบาล และสถาบันการศกึ ษาตา่ ง ๆ เปน็ อยา่ งมาก 1.2 เวบ็ เซิร์ฟเวอร์ เว็บเซิฟเวอร์ (Web Server) หมายถึง เคร่ืองคอมพิวเตอร์แม่ข่ายท่ีให้บริการด้าน เว็บไซต์ โดยเคร่ืองไคลเอ็นสามารถร้องขอหรือเรียกใช้งานเว็บไซต์ ผ่านทางโปรแกรมเว็บเบราว์เซอร์ โดยปกตเิ ป็นเคร่ืองท่ีมปี ระสิทธภิ าพสงู เพือ่ ใหส้ ามารถรองรับการร้องขอข้อมูลจากเคร่ืองไคลเอ็นได้ มาก โปรแกรมเว็บเซริ ์ฟเวอร์ทีไ่ ด้รับความนยิ มสงู สุด ได้แก่ ตารางท่ี 1.1 ตวั อย่างซอฟต์แวร์เวบ็ เซริ ์ฟเวอร์ เวบ็ เซริ ฟ์ เวอร์ ผผู้ ลติ เปอรเ์ ซ็น Apache Apache 48.5 nginx NGINX, Inc. 35.4 IIS Microsoft 10.8 LiteSpeed Web Server LiteSpeed Technologies 2.9 ภาพที่ 1.4 โลโก้ซอฟตแ์ วร์เว็บเซิร์ฟเวอร์ IIS และ Apache ที่มา http://support-fr.org/marc/apache-iis-active-directory/ นอกจากน้ันก็ซอฟต์แวร์เว็บเซิร์ฟเวอร์อื่น ๆ แต่ก็มีการใช้งานไม่ถึง 1% ในตาราเล่มนี้จะใช้ Apache HTTP Server ในการจาลองเคร่อื งเวบ็ เซริ ์ฟเวอร์ โดยเว็บเซิร์ฟเวอร์จะทาการติดตั้งภาษาที่ใช้ในการพัฒนาเว็บเพื่อให้สามารถประมวลผล ตามท่ีโปรแกรมเมอรต์ ้องการได้ เชน่ ภาษา PHP ภาษา JSP ภาษา ASP.net เป็นตน้ การพัฒนาเว็บไซต์ทางธุรกจิ ชนั้ สูง

4 | บทท่ี 1 เทคโนโลยีอนิ เทอร์เนต็ สญั ลกั ษณข์ องเครือ่ งเว็บเซริ ์ฟเวอรจ์ ะมรี ูปเคร่ืองคอมพวิ เตอรแ์ ละลกู โลก ภาพที่ 1.5 สญั ลกั ษณ์ของเคร่ืองเวบ็ เซิรฟ์ เวอร์ ท่มี า https://www.jobdd.biz/jthaisoft/images/stories/accessories/web_server.gif 1.3 ดาต้าเบสเซิร์ฟเวอร์ ดาต้าเบสเซิร์ฟเวอร์ (Database Server) หมายถึง เคร่ืองคอมพิวเตอร์แม่ข่ายที่ให้บริการ ด้านฐานข้อมูล โดยภาษาคอมพิวเตอร์ต่างๆจะทาการเชื่อมต่อและสั่งประมวลผลข้อมูล เช่น เพ่ิม ขอ้ มลู ปรับปรงุ ข้อมูล หรือลบขอ้ มลู ในส่วนท่ตี นเองมีสทิ ธ์ิ ภาพที่ 1.6 สัญลกั ษณ์ของเครื่องดาตา้ เบสเซริ ฟ์ เวอร์ ทมี่ า https://openclipart.org/image/2400px/svg_to_png/163711/database-server.png ใน ก า ร พั ฒ น าเว็ บ แ อ พ ลิ เค ชั่ น ใน ปั จ จุ บั น ถ้ าห า ก เป็ น เว็ บ เซิ ร์ ฟ เว อ ร์ ท่ี มี ป ริ ม าณ ผู้ ใช้ ไม่มากนักนิยมติดตั้งเว็บเซิร์ฟเวอร์และดาต้าเบสเซิร์ฟเวอร์ไว้ในเคร่ืองคอมพิวเตอร์เซิร์ฟ เวอร์เครื่อง เดียวกัน แต่ถ้าหากว่ามีปริมาณผู้ใช้งานเป็นจานวนมาก จะแยกหน้าที่ระหว่างเคร่ืองเว็บเซิร์ฟเวอร์ และดาต้าเบสเซิร์ฟเวอร์ออกเป็นแต่ละเครื่องดังภาพที่ 1.6 เพื่อให้การทางานมีความรวดเร็วและ เสถียรสูง สญั ลกั ษณ์ของเคร่อื งดาต้าเบสเซริ ์ฟเวอรจ์ ะมรี ปู เครอ่ื งคอมพวิ เตอรแ์ ละทรงกระบอกท่ีเรยี งเปน็ ชนั้   ภาพที่ 1.7 สัญลักษณ์ของเครื่องดาต้าเบสเซิรฟ์ เวอร์ ทม่ี า ผเู้ ขียน การพฒั นาเวบ็ ไซต์ทางธุรกจิ ชนั้ สงู

บทท่ี 1 เทคโนโลยอี นิ เทอรเ์ น็ต | 5  ไคลเอ็นท์ทาการร้องขอข้อมูลจากเว็บเซริ ์ฟเวอร์ทาการประมวลผล  เว็บเซริ ์ฟเวอรร์ ้องขอข้อมูลจากดาตา้ เบสเซริ ์ฟเวอร์ ๆ ทาการประมวลผลข้อมูล  ดาตา้ เบสเซริ ฟ์ เวอรส์ ง่ ผลการประมวลผลข้อมลู กลบั ไปให้เวบ็ เซริ ์ฟเวอร์  เวบ็ เซิรฟ์ เวอร์ทาการแปลงขอ้ มลู ในรปู แบบเวบ็ เพจแล้วส่งกลบั ไคลเอ็นท์ จากภาพที่ 1.7 จะพูดว่าเว็บเซิร์ฟเวอร์ทาการแยกการทางานกับดาต้าเบสเซิร์ฟเวอร์ โดยที่ เวบ็ เซิร์ฟเวอร์ทาหน้าท่ีแสดงผลข้อมลู พร้อมรับขอ้ มูลจากไคลเอ็นท์ ในรปู แบบของเว็บไซต์ สว่ นดาต้า เบสเซิรฟ์ เวอร์ทาหน้าทจ่ี ัดเก็บข้อมลู และทาการส่งข้อมูลกลับมายังให้เว็บเซิร์ฟเวอรเ์ มอ่ื เว็บเซิร์ฟเวอร์ ต้องการ ข้อดีก็คือเราสามารถเพิ่มเว็บเซิร์ฟเวอร์เข้าไปได้โดยอาจแยกการทางานของเว็บเซิร์ฟเวอร์ ออกจากกัน เช่น คนละแผนก โดยสามารถใชฐ้ านขอ้ มูลเดยี วกันได้ 1.4 ไอพแี อดเดรส เคร่ืองคอมพิวเตอร์ที่เชื่อมต่อระบบอินเทอร์เน็ต จะต้องมีหมายเลขประจาเคร่ือง เรียกว่า IP Address หรือ Internet Address ซึ่งประกอบด้วยตัวเลข 4 ชุดและมีเครื่องหมายจุดขั้นระหว่างชุด แต่ละชุดประกอบด้วยข้อมูลจานวน 8 บิต รวมขนาดของ IP Address เป็น 32 บิต ตัวอย่างเช่น 192.168.10.9 หมายเลข IP Address : 10.10.10.10 หมายเลข IP Address : 192.168.10.9 ภาพท่ี 1.8 รายละเอียดหมายเลขไอพีของคอมพิวเตอร์ทเ่ี ชื่อมต่ออนิ เทอรเ์ น็ต ทีม่ า ผเู้ ขยี น เมื่อมีการติดต่อสื่อสาร โปรโตคอล TCP/IP ทาการค้นหาเส้นทางระหว่างเครื่องต้นทางและ เคร่ืองปลายทาง โดยการส่งข้อมูลจะมีหมายเลข IP Address ของเคร่ืองต้นทาง (Address form) และปลายทาง (Address to) แนบไปกับข้อมูล (Data) ท่ีส่งผ่านไปในระบบเพ่ือให้สามารถส่งผ่านไป ยงั เคร่อื งหมายไดอ้ ยา่ งถูกต้อง การพัฒนาเว็บไซตท์ างธุรกิจชนั้ สงู

6 | บทท่ี 1 เทคโนโลยีอินเทอร์เนต็ ภาพที่ 1.9 โครงสรา้ งแพ็คเก็ตทีชีพี ดังนั้น ถ้าเปรียบเคร่ืองคอมพิวเตอร์แต่ละเคร่ืองเป็นคน IP Address ก็เสมือนเลขประจาตัว ประชาชนของแตล่ ะคนทไี่ มซ่ า้ กบั ใคร ๆ ส่วนชอ่ื เปรยี บเสมือนช่ือของคนน้นั เอง ภาพที่ 1.10 รายละเอียดหมายเลขไอพีของคอมพิวเตอรท์ ี่เชอ่ื มต่ออินเทอรเ์ นต็ ท่มี า ผ้เู ขียน จากรปู แบบหมายเลขไอพีทาให้ผใู้ ช้งานจดจาหมายเลขได้ยาก จงึ มกี ารคิดคน้ ระบบที่มีการใช้ ชอ่ื แทนหมายเลขไอพีเรียกวา่ ระบบโดเมนเนม โดยผู้ใช้งานจะร้องขอข้อมูลโดยระบุโดเมนเนม ระบบจะแปลงโดเมนเนมเป็นหมายเลขไอพี เมื่อได้หมายเลขไอพีแล้วคอมพิวเตอร์ต้นทางจะทาการเชื่อมต่อกับคอมพิวเตอร์ปลายทางด้วย หมายเลขไอพีทไ่ี ดท้ าการแปลง 1.5 โดเมนเนม (Domain Name) โดเมนเนม หมายถึง ช่ือท่ีอยู่เว็บไซต์ หรือที่อยู่ของข้อมูลในระบบอินเทอร์เน็ต ระบบโดเมน เนมนามาแก้ปัญหาผู้ใช้งานจดจาหมายเลขไอพีของเคร่ืองคอมพิวเตอร์บนระบบ เครือข่ายได้ยาก เพ่ือให้ง่ายต่อการจดจาจงึ มีการคิดระบบโดเมนเนมข้ึนมาโดยโดเมนเนมจะใช้ชอื่ แทนการใช้หมายเลข ทใ่ี หม้ นุษย์จดจาหรอื เข้าใช้งานอินเทอรเ์ น็ตไดง้ ่ายข้ึน โดยมีโดเมนเนมแบง่ ออกเป็น 3 รูปแบบ ดังนี้ การพฒั นาเวบ็ ไซตท์ างธุรกิจชนั้ สูง

บทท่ี 1 เทคโนโลยอี ินเทอร์เน็ต | 7 1.5.1 รูป แ บ บ โด เม น แ บ บ ส าก ล (General Internet DNS Top Level Domains: gTLDs) เป็นรูปแบบมาตรฐานท่ีใช้กัน โดยเฉพาะในอเมริกา เช่น .com, .net, .gov ท่ีนิยมมากที่สุดคือ .com เพราะเป็นโดเมนในยุคแรก ๆ ท่ีเรมิ่ ใช้กัน และงา่ ยต่อการ จดจา ตัวอยา่ ง เชน่ โดเมน mit.edu สถาบันเทคโนโลยแี มสซาชเู ซตส์ โดเมน af.mil กองทพั อากาฬ สหรัฐอเมรกิ า ตารางที่ 1.2 รปู แบบโดเมนแบบสากล โดเมน ปที ่ีเร่มิ ใช้ กลุม่ โดเมน .aero .asia 2544 อากาศยาน .biz .cat 2550 ภาคพ้นื เอเชีย .com .edu 2544 องค์กรธุรกิจ .gov .info 2548 ศลิ ปวฒั นธรรม .jobs .mil 2528 การคา้ ขาย .mobi .museum 2528 การศกึ ษา .name .net 2528 หน่วยงานรัฐของอเมริกา .org .travel 2544 ขอ้ มูลขา่ วสาร 2548 การหางาน 2528 หน่วยงานทางทหารของอเมริกา 2548 ผู้ให้บริการอปุ กรณส์ ือ่ สารไร้สาย 2544 พิพธิ ภณั ฑ์ 2544 บุคคล 2528 บริษัทผู้ให้บรกิ ารอนิ เทอร์เนต็ 2528 องค์การที่ไมห่ วังผลกาไร 2548 การทอ่ งเท่ยี ว ทมี่ า https://www.thnic.or.th/gtld-cctld/ 1.5.2 รูปแบบโดเมนแต่ละประเทศ (Country Code Top Level Domains: ccTLDs) เป็นรูปแบบท่ีใช้บ่งบอกชื่อโดเมนประจาแต่ละประเทศ เช่น .th หมายถึง โดเมน ประเทศไทย เปน็ ตน้ การพฒั นาเวบ็ ไซตท์ างธุรกจิ ชนั้ สงู

8 | บทท่ี 1 เทคโนโลยีอนิ เทอร์เนต็ ตวั อยา่ ง เช่น โดเมน udru.ac.th มหาวิทยาลัยราชภัฏอดุ รธานี โดเมน rtaf.mi.th กองทพั อากาศไทย ตารางท่ี 1.3 รปู แบบโดเมนแต่ละประเทศ โดเมน ชือ่ ประเทศ .at ออสเตรยี .au ออสเตรเลยี .ca แคนาดา .ch สวิตเซอรแ์ ลนด์ .de เยอรมนั la ลาว .es สเปน .fr ฝรง่ั เศส .jp ญี่ปุ่น .kr เกาหลี .uk สหราชอาณาจกั ร .vn เวยี ดนาม ที่มา https://www.thnic.or.th/gtld-cctld/ ภาพที่ 1.11 ตวั อยา่ งโครงสร้างโดเมนเนม ท่ีมา : http://www.kpcb.com/internet-trends การพัฒนาเว็บไซต์ทางธุรกิจชนั้ สงู

บทท่ี 1 เทคโนโลยีอนิ เทอร์เนต็ | 9 จากภาพที่ 1.11 จะพบว่าระดับโดเมนเนมแบ่งออกเป็นชั้น ๆ เร่ิมที่ ระดับช้ันโดเมนสุงสุด Top ชื่อ xyz โดเมนระดับรองลงมา my เมื่อต้องการเข้าถึงเครื่องสามารถเรยี กใช้ผา่ นโดเมนเนมชื่อ my.xyz 1.6 แนวโนม้ ของเทคโนโลยอี ินเทอร์เน็ต เน่ืองจากผู้คนบนโลกมีการใช้เทคโนโลยีเพ่ืออานวยความสะดวกในการดารงชีวิตของตนเอง มากข้ึน เครือข่ายอินเทอร์เน็ตจึงเป็นระบบที่ได้รับความนิยมเพ่ิมมากข้ึน เพราะสามารถนามา ประยุกต์ใช้ทุกสาขาอาชีพ ท้ังสนับสนุนการทางาน การติดต่อส่ือสาร การเรียนการสอน รวมทั้งการ บันเทิง ในการสืบค้นข้อมูล อินเทอร์เน็ตทาให้การสืบค้นข้อมูลหรือการค้นหาข้อมูลต่าง ๆ ทาได้ สะดวกและรวดเร็ว การค้าขายหรือการทาธุรกิจก็นิยมใช้อินเทอร์เน็ต เพราะค้าขายได้พื้นท่ีกว้าง คา้ ขายได้ตลอด 24 ช่ัวโมง จงึ ทาให้อนิ เทอร์เน็ตได้รับความนยิ มเพิ่มข้ึนอย่างรวดเร็ว แต่อนิ เทอร์เน็ตก็เป็นระบบทีเ่ หมือนกับดาบสองคมซง่ึ มที ั้งข้อดีและข้อเสีย ในสว่ นข้อเสียของ อินเทอร์เน็ต เช่น 1. ความน่าเช่ือถือของข้อมูลมีน้อยอาจทาให้ถูกหลอกและเป็นอันตราย 2. การใช้ อินเทอร์เน็ตบ่อย ๆ ก่อให้เกิดโรคติดอินเทอเน็ต (Webaholic) 3. เกิดการแพร่กระจายข่าวสารที่ไม่ เหมาะสมอยา่ งรวดเรว็ เป็นตน้ บริษัท Kleiner Perkins Caufield & Byers (KPCB) บริษัทร่วมลงทุนด้านเทคโนโลยี สารสนเทศของอเมริกา ได้สรุปแนวโน้มของเทคโนโลยีสารสนเทศท่ีน่าสนใจช่วง พ.ศ. 2560 ดังภาพ จะเหน็ ได้วา่ แนวโนม้ การโฆษณาผ่านอินเทอร์เน็ตกาลงั เติบโตอยา่ งรวดเร็ว ภาพที่ 1.12 แนวโน้มการโฆษณาผา่ นอนิ เทอรเ์ นต็ กาลงั เติบโตอย่างรวดเร็ว ท่มี า : http://www.kpcb.com/internet-trends ในการทางานหรือสานักงานยุคใหม่จะมีการนาอุปกรณ์เทคโนโลยีสาระสนเทศ เข้ามา ประยุกตใ์ ชใ้ นการทางานมากยง่ิ ขนึ้ อีกทัง้ อุปกรณ์ดงั กลา่ วจะมขี นาดกะทัดรัดเล็กลง สามารถพกพาไป การพัฒนาเวบ็ ไซต์ทางธุรกจิ ชนั้ สงู

10 | บทท่ี 1 เทคโนโลยีอินเทอร์เน็ต ท่ีไหนก็ได้ สถานท่ีทางานจะไม่ใช่ห้องทางานแต่จะเป็นสถานที่ทุกท่ี โดยพนักงาน สามารถใช้อุปกรณ์เทคโนโลยีสาระสนเทศในการทางานแทนโต๊ะทางาน ภาพที่ 1.13 แนวโน้มการทางานผา่ นอนิ เทอร์เน็ตเพ่ิมมากขน้ึ ท่มี า : http://www.kpcb.com/internet-trends รัฐบาลไทยมีนโยบายของประเทศเป็นยุค Thailand 4.0 อีกทั้งราคาอุปกรณ์ในการใช้ งานอินเทอร์เน็ตมีราคาถูกลงอย่างมาก ทาให้จานวนผู้ใช้งานอินเทอร์เน็ตของประเทศไทยมี อัตราการใช้เพ่ิมข้ึนอย่างรวดเร็ว ดังภาพท่ี 1.14 ซ่ึงศูนย์เทคโนโลยีอิเล็กทรอนิกส์และ คอมพวิ เตอร์แห่งชาติ (NECTEC) ได้ทาการสารวจเอาไว้ ภาพท่ี 1.14 แนวโน้มจานวนผู้ใชง้ านอินเทอรเ์ นต็ ในประเทศไทย ทมี่ า : http://www.nectec.or.th/internet การพฒั นาเวบ็ ไซต์ทางธุรกจิ ชนั้ สงู

บทท่ี 1 เทคโนโลยอี ินเทอรเ์ นต็ | 11 1.7 บทสรปุ ระบบเครือข่ายอินเทอร์เน็ต (Internet) หมายถึง ระบบเครือข่ายคอมพิวเตอร์ที่มีขนาดใหญ่ ท่ีสุดในโลก เกิดจากการเช่ือมต่อระหว่างเครือข่ายขนาดเล็กหลาย ๆ เครือข่ายทั่วโลก โดยมีข้อตกลง หรือรูปแบบการสื่อสาร เพ่ือให้การติดต่อสื่อสารในระบบเครือข่าย สามารถสื่อสารกันได้เรียกว่า โพรโทคอล (Protocol) โดยการเชื่อมโยง สามารถเช่ือมโยงกันผ่านสื่อกลางทั้งแบบส่ือกลางประเภท มีสาย ได้แก่ สายโทรศัพท์, สายแลน, สายโคแอคเชียล, เคเบิลใยแก้วนาแสง และแบบส่ือกลาง ประเภทไร้สาย ได้แก่ ไมโครเวฟ, คล่ืนวิทยุ, ดาวเทียม โดยข้อมูลต่างๆจะถูกจัดเก็บไว้ที่เว็บเซิฟเวอร์ (Web Server) ซึ่งเป็นเครื่องคอมพิวเตอร์แม่ข่ายที่ให้บริการด้านเว็บไซต์ โดยเคร่ืองไคลเอ็นสามารถ ร้องขอหรือเรียกใช้งานเว็บไซต์ ผ่านทางโปรแกรมเว็บเบราว์เซอร์ และเคร่ืองคอมพิวเตอร์แม่ข่ายที่ ให้บริการด้านฐานข้อมูล โดยภาษาคอมพิวเตอร์ต่าง ๆ จะทาการเชื่อมต่อและสั่งประมวลผลข้อมูล เช่น เพิ่มข้อมูล ปรับปรุงข้อมูล หรือลบข้อมูลในส่วนที่ตนเองมีสิทธ์ิ เรียกว่า ดาต้าเบสเซิร์ฟเวอร์ (Database Server) เครื่องคอมพิวเตอร์ท่ีเช่ือมต่อระบบอินเทอร์เน็ต จะต้องมีหมายเลขประจาเคร่ือง เรียกว่า IP Address ซึ่งประกอบด้วยตัวเลข 4 ชุดและมีเครื่องหมายจุดขั้นระหว่างชุด แต่ละชุดประกอบด้วย ข้อมูลจานวน 8 บติ รวมเป็น 32 บิต ตวั อย่างเช่น 192.168.9.9 สาหรับปัญหาคือผู้ใช้งานจดจาหมายเลขไอพีของเคร่ืองคอมพิวเตอร์บนระบบเคร่ือข่ายได้ ยาก เพ่ือให้ง่ายต่อการจดจาจึงมีการคิดระบบโดเมนเนมขึ้นมาโดยโดเมนเนมจะใช้ช่ือแทนการใช้ หมายเลขท่ีให้มนุษย์จดจาหรือเข้าใช้งานอินเทอร์เน็ตได้ง่ายขึ้น ส่วนแนวโน้มการใช้งานเข้าถึงระบบ อินเทอร์เนต็ มปี รมิ าณเพม่ิ มากขน้ึ อยา่ งรวดเร็ว การพัฒนาเว็บไซต์ทางธุรกจิ ชนั้ สูง

12 | บทท่ี 1 เทคโนโลยีอินเทอร์เนต็ คาถามท้ายบท 1. ระบบเครือข่ายอินเทอร์เนต็ (Internet) หมายถงึ อะไร 2. โพรโทคอล (Protocol) หมายถึงอะไร 3. สอ่ื กลางที่ใชเ้ ช่ือมต่อระบบอินเทอรเ์ นต็ ไดแ้ ก่อะไรบา้ ง พร้อมหาภาพประกอบ 4. ใหอ้ ธิบายความหมายของเว็บเซิฟเวอร์ (Web Server) 5. ให้อธบิ ายความหมายของดาต้าเบสเซริ ฟ์ เวอร์ (Database Server) 6. เว็บเซิฟเวอรแ์ ตกตา่ งกบั ดาต้าเบสเซิร์ฟเวอร์อยา่ งไร 7. ให้อธบิ ายความหมายของไอพีแอดเดรส 8. ไอพีแอดเดรส และโดเมนเนม แตกตา่ งกันอยา่ งไร 9. ใหน้ กั ศึกษาทาการวเิ คราะห์แนวโนม้ การใชง้ านเขา้ ถึงระบบอนิ เทอร์เน็ตเปน็ อยา่ งไรพรอ้ มท้งั อธิบายใหเ้ หตุผลประกอบ การพัฒนาเว็บไซตท์ างธุรกิจชนั้ สูง

บทที่ 2 รูปแบบลักษณะเว็บไซต์ ในบทนี้กล่าวถึงรูปแบบลักษณะของเว็บไซต์ ว่ามีรูปแบบลักษณะการทางานอย่างไรบ้าง ซ่ึง แบ่งออกเป็น 2 ส่วนคือ สคริปต์ทางานบนฝ่ังไคลเอนต์ ได้แก่ ภาษา HTML สคริปต์ทางานบนฝ่ัง เซิร์ฟเวอร์ ได้แก่ ภาษา PHP ว่ามีขั้นตอนการทางานอย่างไร และความหมายของเว็บแอพพลิเคชั่น ขั้นตอนการทางานของเว็บแอพพลิเคช่ันว่ามีขั้นตอนการทางานอย่างไร เพื่อให้ทราบโครงสร้างและ ขน้ั ตอนการทางานของเวบ็ แอพพลเิ คชั่น ซึง่ เป็นพ้นื ฐานในการศกึ ษาบทต่อ ๆ ไป 2.1 เวบ็ แอพพลเิ คช่ัน เว็บแอพพลิเคช่ัน (Web Application) หมายถึง โปรแกรมประยุกต์ท่ีเข้าถึงด้วยการใช้งาน ผ่านระบบอินเทอร์เน็ต เป็นการทางานแบบไคลเอนต์เซิร์ฟเวอร์ ที่มีการเช่ือมต่อรับส่งข้อมูลระหว่าง เคร่ืองให้บริการ (Web Server) และเครอื่ งลูกข่าย (Client) โดยเครื่องลูกข่ายจะทาการตดิ ต่อร้องขอ บรกิ าร (Http Request) ไปยังเครื่องให้บรกิ าร เม่ือเครื่องให้บริการได้รับการร้องขอบริการจะทาการ ประมวลผลตามที่เคร่ืองลูกข่ายร้องขอ แล้วส่งข้อมูลกลับ (Http Response) ไปให้เคร่ืองลูกข่าย โดยในส่วนเครื่องลูกข่ายจะแสดงผลด้วยโปรแกรมเว็บเบราว์เซอร์ (Web Browser) เช่น โปรแกรม Chrome, โปรแกรม Firefox, โปรแกรม Internet Explorer เป็นตน้ ภาพที่ 2.1 โปรแกรมเว็บเบราว์เซอร์ ที่มา http://cdn.pixabay.com/photo/2016/03/22/17/27/browsers- 1273344_960_720.png 2.2 ข้ันตอนการทางานของเว็บแอพพลเิ คชัน่ ในข้ันตอนการทางานของเว็บแอพพลิเคชั่นมีการรับส่งข้อมูลระหว่างฝ่ังไคลเอนต์และฝ่ัง เซิรฟ์ เวอร์ มขี นั้ ตอนการดาเนนิ การดังนี้ 1. เวบ็ บราวเซอรท์ อ่ี ย่ฝู ่งั ไคลเอนต์ทาการร้องขอข้อมลู มายงั เวบ็ เซิร์ฟเวอร์ 2. เว็บเซิร์ฟเวอร์ทาการประมวลผลข้อมูล เช่น ค้นหาข้อมูล, เพ่ิมข้อมูลในฐานข้อมูล, ปรบั ปรงุ ขอ้ มูลในฐานขอ้ มลู เปน็ ตน้ การพฒั นาเวบ็ ไซต์ทางธุรกจิ ชนั้ สงู นิรนั ดร ผานจิ

14 | บทท่ี 2 รูปแบบลกั ษณะเวบ็ ไซต์ 3. เวบ็ เซิร์ฟเวอรส์ ่งข้อมลู หรอื ผลการประมวลผลสง่ กลบั มาใหก้ บั เว็บบราวเซอร์ ฝงั่ เซิร์ฟเวอร์ ภาษา PHP ฝ่งั ไคลเอนต์ ภาษา HTML Http Response CSS   Http Request ภาพที่ 2.2 ข้ันตอนการทางานของเวบ็ แอพพลเิ คชัน ท่มี า http://i3.sitepoint.com/graphics/1733_first_principles.thumb.jpg จากภาพจะพบวา่ มีการทางานของ 2 ฝั่ง คือ ฝ่ังไคลเอนต์ และฝ่ังเซิรฟ์ เวอร์ โดยมี สครปิ ต์ ภาษาทที่ างานท้งั 2 ฝ่งั ได้แก่ 1. สครปิ ตท์ างานบนฝ่ังไคลเอนต์ (Client side script) 2. สคริปตท์ างานบนฝ่งั เซิร์ฟเวอร์ (Server side script) 2.3 สครปิ ตท์ างานบนฝง่ั ไคลเอนต์ (Client side script) เป็นสคริปต์ทางานบนฝ่ังไคลเอนต์ โดยสคริปต์จะถูกส่งจากเว็บเซิร์ฟเวอร์ นามาจัดเก็บไว้ท่ี เครือ่ งไคลเอนต์ โดยสคริปต์จะถูกประมวลผลด้วยโปรแกรมเว็บบราวเซอร์ ตัวอยา่ งของ 2.3. สคริปต์ ทางานบนฝ่ังไคลเอนต์ ไดแ้ ก่ ภาษา HTML, CSS, Javascript เปน็ ต้น 2.4 ภาษา HTML ภาษา HTML ยอ่ มาจาก Hypertext Markup Language เริ่มพฒั นาโดย ทิม เบอรเ์ นอรส์ ลี (Tim Berners Lee) ในปี ค.ศ.1990 ซึ่งตอ่ มาภาษา HTML เป็นมาตรฐานที่ดแู ลโดยหนว่ ยงานองคก์ ร ระหว่างประเทศที่ทางานด้านการพัฒนาเทคโนโลยี “เวิลด์ไวด์เว็บ (www)” ชื่อหน่วยงาน World Wide Web Consortium (W3C) โดย Hypertext หมายถึง ข้อความหรอื กลมุ่ ของข้อความทถี่ ูกเชื่อมโยงเข้าดว้ ยกนั Markup language หมายถงึ ภาษาทใี่ ช้ Tag ในการกาหนดรูปแบบการแสดงผลบนเว็บเพจ การพัฒนาเวบ็ ไซต์ทางธุรกิจชนั้ สงู

บทท่ี 2 รูปแบบลักษณะเว็บไซต์ | 15 ภาษา HTML เป็นภาษาหลักที่ใช้ในการออกแบบและพัฒนาเว็บเพจ โดยมีรูปแบบคาสั่ง เรยี กว่า แทก็ (Tag) เป็นลกั ษณะเฉพาะของภาษา HTML ใชใ้ นการระบุรปู แบบคาสั่ง ในภาษา HTML แต่ละแท็ก อาจจะมีส่วนขยายที่เรียกว่า แอตทริบิวต์ (Attribute) สาหรับระบุคุณสมบัติของแท็ก น้นั ๆ โดยมีเวอร์ช่นั ของภาษา HTML ดงั น้ี ตารางที่ 2.1 ประวัติภาษา html เวอร์ชัน่ ปี HTML 1991 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 2000 HTML5 2014 โดยมรี ูปแบบแท็กภาษา HTML จะต้องอยภู่ ายในเคร่อื งหมายนอ้ ยกวา่ \"<\" และเครื่องหมาย มากกวา่ \">\" และมชี ่อื แทก็ อยูร่ ะหวา่ งเครือ่ งหมายดงั กล่าว เช่น แท็กกาหนดตัวอักษรตัวหนา bold เขียนในรปู แบบ <b>กาหนดตัวหนา</b> แทก็ ขน้ึ บรรทัดใหม่ line break เขียนในรูปแบบ <br> แท็กมี 2 รูปแบบคอื 2.4.1 แทก็ คอนแทนเนอร์ (Container Tag) ประกอบด้วยแท็กเปิด และแท็กปิด โดยมีข้อมูลท่ีอยู่ระหว่างแท็กจะแสดง ตามรปู แบบท่ีแทก็ กาหนด เชน่ <b>กาหนดเป็นตวั หนา</b> แท็กเปดิ แท็กปดิ 2.4.2 แท็กเปลา่ (Empty Tag) เป็นแท็กท่ีไม่มีแท็กเปิดและแท็กปิดมีเพียงแท็กเด่ียวๆเท่านั้น โดยสามารถ กาหนดคุณสมบัติ (Attribute) ให้กับแท็กได้ตามที่มาตรฐานที่กาหนดแต่ ละแท็ก ตัวอยา่ งเช่น <img src=\"udruLogo.jpg\"/> คุณสมบัติ src เพ่ือระบุตาแหน่งของรูปภาพ การพัฒนาเว็บไซตท์ างธุรกจิ ชนั้ สงู

16 | บทท่ี 2 รูปแบบลกั ษณะเวบ็ ไซต์ <font color=\"#00FF00\" size=\"12pt\">มหาวิทยาลยั ราชภัฏอดุ รธานี</font> คณุ สมบตั ิ color เพื่อระบสุ ีของข้อความท่ีอยรู่ ะหวา่ งแท็ก font คณุ สมบัติ size เพอ่ื กาหนดขนาดข้อความท่ีอยู่ระหว่างแท็ก font 2.5 โครงสรา้ งภาษา HTML ภาษา HTML แบ่งออกเป็น 2 สว่ นหลกั ๆ ดงั น้ี 2.5.1 ส่วนหัว (Head) ส่วนหัว (Head) เป็นส่วนที่เริ่มต้นทางานเมื่อภาษา HTML ถูกเรียกใช้งาน โดยเริ่มต้นท่ีแท็ก <head> และปิดท้ายด้วย </head> ใช้สาหรับกาหนดคุณสมบัติของเว็บ เพจ เชน่ <meta charset=\"UTF-8\"/> สาหรบั กาหนดรหัสภาษาของเวบ็ เพจ็ เปน็ UTF-8 <title>สาขาคอมพิวเตอรธ์ ุรกจิ </title> สาหรับกาหนดขอ้ ความท่จี ะแสดงผลในไตเต้ิลบาร์ของเวบ็ เบราวเ์ ซอร์ 2.5.2 ส่วนแสดงผลข้อมลู (Body) ส่วนแสดงผลข้อมูล (Body) เป็นส่วนของเนื้อหาเว็บเพ็จนั้น ๆ ซึ่งจะ ประกอบด้วย Tag คาสั่งในการจัดรูปแบบหน้าตาของเว็บเพจ หรือตกแต่งเอกสาร HTML เช่น <img src=\"udruLogo.jpg\"/> สาหรับแสดงภาพ udruLogo.jpg ออกทางจอภาพ โดยเริ่มต้นท่ีแทก็ <body> และปดิ ทา้ ยดว้ ย </body> โดยทัง้ สองสว่ นนี้จะอยู่ภายในแทก็ <HTML> </HTML> ดังตัวอยา่ ง ภาพที่ 2.3 ตัวอยา่ งหน้าเว็บเพจ็ ภาษา html การพฒั นาเวบ็ ไซตท์ างธุรกจิ ชนั้ สงู

บทท่ี 2 รูปแบบลกั ษณะเวบ็ ไซต์ | 17 ภาพท่ี 2.3 เกิดจากโคด้ ภาษา Html ดงั น้ี <html> <head> head <title> สาขาคอมพิวเตอรธ์ รุ กจิ </title> <meta charset=\"UTF-8\"/> </head> html <body> <center> body <img src=\"udruLogo.jpg\"/> <br/> <font color=\"#00FF00\">มหาวิทยาลยั ราชภัฏ อดุ รธานี</font> </center> </body> </html> โดยตัวอักษรภายในแท็กคาสั่ง อักษรตัวเล็ก ตัวใหญ่ถือว่าไม่แตกต่างกัน เช่น แท็ก <HTML> หรือ <Html> หรอื <html> ถือว่าเปน็ แทก็ หรือคาสั่งเดยี วกนั รูปแบบคาส่ังแทก็ ภาษา HTML โดยแบ่งออกเป็นกลุม่ ๆ ดังนี้ 1. กลมุ่ คาสงั่ html จดั รูปแบบตวั อักษร เป็นการกาหนดรปู แบบตัวอักษรในเว็บเพจ เพื่อให้หน้าเว็บมีความน่าสนใจหรือดูได้ง่าย มากขึ้น โดยข้อความท่ีอยู่ระหว่างแท็ก นั้น ๆ จะเป็นข้อความแสดงตามคุณสมบัติของแท็ก น้นั ๆ กาหนด โดยแทก็ พื้นฐานทน่ี ่าสนใจ ดังตอ่ ไปน้ี ตารางท่ี 2.2 กลุ่มคาส่ัง html จดั รปู แบบตวั อกั ษร แทก็ ความหมาย <strong>ข้อความตัวหนา</strong> กาหนดข้อความเป็นตวั หนา <b>ข้อความตวั หนา</b> <i>ข้อความตัวเอียง</i> กาหนดข้อความเปน็ ตวั เอียง <em>ข้อความตัวเอียง</em> <u>ขอ้ ความตวั ขีดเส้นใต้</u> กาหนดข้อความตวั ขีดเส้นใต้ <font size=\"12pt\" face=\"tahoma\" กาหนดรูบแบบข้อความที่อยรู่ ะหวา่ งแท็ก <font> การพฒั นาเว็บไซต์ทางธุรกิจชนั้ สูง

18 | บทท่ี 2 รูปแบบลกั ษณะเวบ็ ไซต์ แทก็ ความหมาย color=\"#00FF00\">…..</font> โดยมคี ณุ สมบตั ิ ดังน้ี <h1>…..</h1> size=\"12pt\" ขนาดขอ้ ความ face=\"tahoma\" ชนิดข้อความ color=\"#00FF00\" สขี องขอ้ ความ กาหนดขนาดขอ้ ความแบบหวั เรือ่ ง (Heading) 2. กลุ่มคาสั่ง html การจัดหน้าเว็บเพจ็ สาหรบั จดั วางรูปแบบหน้าเวบ็ เพจ็ มแี ท็กทใี่ ชง้ านประจา ดังนี้ ตารางที่ 2.3 กลุ่มคาส่งั html การจัดหนา้ เว็บเพ็จ แท็ก ความหมาย <p align='left|right|center' > ตาแหนง่ ข้อความ โดยข้อมลู ระหว่างแท็กสามารถจัด ตาแหน่งข้อความ วางในตาแหนง่ ดว้ ยแอทรบิ ิวต์ align ดังนี้ </p> left ชดิ ซ้าย right ชดิ ขวา center จดั กง่ึ กลาง <br/> ขนึ้ บรรทัดใหม่ <hr/> แสดงเสน้ คนั่ <font size=\"12pt\" กาหนดรบู แบบขอ้ ความท่ีอยรู่ ะหว่างแท็ก <font> face=\"tahoma\" โดยมีคณุ สมบตั ิดังน้ี color=\"#00FF00\">…..</font> size=\"12pt\" ขนาดข้อความ face=\"tahoma\" ชนดิ ข้อความ color=\"#00FF00\" สขี องขอ้ ความ <h1>…..</h1> กาหนดขนาดข้อความแบบหวั เร่ือง (Heading) 3. กลมุ่ คาส่งั จดั การรปู ภาพ แทก็ <img> สาหรับแสดงรูปภาพ <img src=\"logo.gif\" alt=\"เวบ็ ไซต์ UDRU\" height=\"59\" width=\"59\"> src=\"logo.gif\" ช่ือไฟลร์ ูปภาพที่ตอ้ งการแสดง alt=\"เว็บไซต์ UDRU\" ข้อความอธบิ ายรูปภาพจะแสดงเม่อื ภาพยังไม่แสดง height=\"59\" สว่ นสูงของภาพ การพฒั นาเว็บไซตท์ างธุรกจิ ชนั้ สูง

บทท่ี 2 รูปแบบลักษณะเวบ็ ไซต์ | 19 width=\"59\" ความกวา้ งของภาพ 4. กล่มุ คาสง่ั จดั การตาราง ตารางที่ 2.4 กลมุ่ คาสง่ั จัดการตาราง แท็ก ความหมาย <table>…..</table> สร้างตาราง โดยมคี ณุ สมบตั ขิ องตาราง ดังน้ี border=\"1\" กาหนดขนาดเสน้ ตาราง width=\"50%\" กาหนดความกว้างตาราง height=\"100\" กาหนดส่วนสงุ ตาราง bgcolor=\"#red\" กาหนดสพี นื้ ตาราง align=\"left/center/right\" ตาแหนง่ ตารางตามแนวนอน <tr>…..</tr> กาหนดแถวในตาราง (Table Row) <td>…..</td> ชอ่ งตารางข้อมูล (Table Data) โดยมคี ณุ สมบัติของตาราง ดังนี้ align=\"left/center/right\" ตาแหนง่ ข้อมลู ตามแนวนอน valign=\"top/middle/bottom\" ตาแหนง่ ข้อมูลตาม แนวตั้ง bgcolor=\"#green\" กาหนดสีพ้ืนชอ่ งตารางข้อมลู <th>…..</th> ชอ่ งตารางสว่ นหวั (Table Headder) 5. กลมุ่ คาสั่งเก่ยี วกบั การเช่ือมโยง แท็ก <a> สาหรบั เช่ือมโยงข้อมูล <a href=\"http://www.udru.ac.th\" target=\"_blank\"> มหาวิทยาลยั ราชภฏั อดุ รธานี </a> โดยมคี ุณสมบตั ิดังต่อไปนี้ href หมายถงึ URL ทีต่ ้องการเชอ่ื มโยง target หมายถงึ ลกั ษณะของเปา้ หมายเม่ือคลิกลิง้ ค์ _blank เปดิ ลิ้งค์หน้าใหม่ _parent เปิดลงิ้ ค์ในหน้าหลัก parent ของหนา้ ปจั จบุ นั _self เปิดลิง้ ค์ในหนา้ เดิม _top เปดิ ลง้ิ ค์ในหนา้ ระดบั บนสดุ framename เปดิ ลิ้งค์ในหนา้ ท่ีระบุตามช่ือ framename การพัฒนาเวบ็ ไซต์ทางธุรกจิ ชนั้ สงู

20 | บทท่ี 2 รูปแบบลกั ษณะเวบ็ ไซต์ 2.6 ระบบสใี นภาษา HTML ในการกาหนดรูปแบบของสีในภาษา HTML สามารถกาหนดรูปแบบของสีได้หลายรูปแบบ เช่น แบบกาหนดชื่อสี, แบบ RGB, แบบ HEX, แบบ HSL, แบบ RGBA, แบบ HSLA ซ่ึงค่าต่าง ๆ เหลา่ นี้ ผพู้ ัฒนาเว็บไซต์ สามารถเรยี นรรู้ ูปแบบตามท่ตี นเองต้องการ ปัจจบุ นั โดยสว่ นมากนิยมกาหนด รูปแบบสแี บบ RGB 2.6.1 การกาหนดสี แบบกาหนดชอ่ื สี เป็นการกาหนดชอ่ื สลี งไปในแอตทรบิ วิ ต์นัน้ ๆ ได้เลย เชน่ <font color=\"green\">มหาวทิ ยาลัยราชภฏั อดุ รธานี</font> เป็นการกาหนดสีใหก้ ับตวั อกั ษรเปน็ สเี ขยี ว color=\"green\" ตวั อย่างชอื่ สีในภาษา HTML ท่สี นับสนุนบราวเซอรม์ าตรฐานในปัจจบุ ัน ตารางที่ 2.5 ตัวอยา่ งชอ่ื สใี นภาษา HTML ทส่ี นับสนนุ บราวเซอร์มาตรฐานในปจั จบุ นั ช่ือสี เลขฐาน 16 ชอื่ สี เลขฐาน 16 Black #000000 PowderBlue #B0E0E6 Navy #000080 FireBrick #B22222 DarkBlue #00008B DarkGoldenRod #B8860B MediumBlue #0000CD MediumOrchid #BA55D3 Blue #0000FF RosyBrown #BC8F8F DarkGreen #006400 DarkKhaki #BDB76B Green #008000 Silver #C0C0C0 Teal #008080 MediumVioletRed #C71585 DarkCyan #008B8B IndianRed #CD5C5C DeepSkyBlue #00BFFF Peru #CD853F DarkTurquoise #00CED1 Chocolate #D2691E MediumSpringGreen #00FA9A Tan #D2B48C Lime #00FF00 LightGray #D3D3D3 SpringGreen #00FF7F LightGrey #D3D3D3 Aqua #00FFFF Thistle #D8BFD8 Cyan #00FFFF Orchid #DA70D6 MidnightBlue #191970 GoldenRod #DAA520 DodgerBlue #1E90FF PaleVioletRed #DB7093 LightSeaGreen #20B2AA Crimson #DC143C ForestGreen #228B22 Gainsboro #DCDCDC SeaGreen #2E8B57 Plum #DDA0DD การพัฒนาเว็บไซต์ทางธุรกจิ ชนั้ สงู

บทท่ี 2 รูปแบบลักษณะเว็บไซต์ | 21 ชอ่ื สี เลขฐาน 16 ชื่อสี เลขฐาน 16 DarkSlateGray #2F4F4F BurlyWood #DEB887 DarkSlateGrey #2F4F4F LightCyan #E0FFFF LimeGreen #32CD32 Lavender #E6E6FA MediumSeaGreen #3CB371 DarkSalmon #E9967A Turquoise #40E0D0 Violet #EE82EE RoyalBlue #4169E1 PaleGoldenRod #EEE8AA SteelBlue #4682B4 LightCoral #F08080 DarkSlateBlue #483D8B Khaki #F0E68C MediumTurquoise #48D1CC AliceBlue #F0F8FF Indigo #4B0082 HoneyDew #F0FFF0 DarkOliveGreen #556B2F Azure #F0FFFF CadetBlue #5F9EA0 SandyBrown #F4A460 CornflowerBlue #6495ED Wheat #F5DEB3 RebeccaPurple #663399 Beige #F5F5DC MediumAquaMarine #66CDAA WhiteSmoke #F5F5F5 DimGray #696969 MintCream #F5FFFA DimGrey #696969 GhostWhite #F8F8FF SlateBlue #6A5ACD Salmon #FA8072 OliveDrab #6B8E23 AntiqueWhite #FAEBD7 SlateGray #708090 Linen #FAF0E6 SlateGrey #708090 LightGoldenRodYellow #FAFAD2 LightSlateGray #778899 OldLace #FDF5E6 LightSlateGrey #778899 Red #FF0000 MediumSlateBlue #7B68EE Fuchsia #FF00FF LawnGreen #7CFC00 Magenta #FF00FF Chartreuse #7FFF00 DeepPink #FF1493 Aquamarine #7FFFD4 OrangeRed #FF4500 Maroon #800000 Tomato #FF6347 Purple #800080 HotPink #FF69B4 Olive #808000 Coral #FF7F50 Gray #808080 DarkOrange #FF8C00 Grey #808080 LightSalmon #FFA07A SkyBlue #87CEEB Orange #FFA500 LightSkyBlue #87CEFA LightPink #FFB6C1 การพฒั นาเว็บไซต์ทางธุรกิจชนั้ สงู

22 | บทท่ี 2 รูปแบบลกั ษณะเว็บไซต์ ช่อื สี เลขฐาน 16 ชือ่ สี เลขฐาน 16 BlueViolet #8A2BE2 Pink #FFC0CB DarkRed #8B0000 Gold #FFD700 DarkMagenta #8B008B PeachPuff #FFDAB9 SaddleBrown #8B4513 NavajoWhite #FFDEAD DarkSeaGreen #8FBC8F Moccasin #FFE4B5 LightGreen #90EE90 Bisque #FFE4C4 MediumPurple #9370DB MistyRose #FFE4E1 DarkViolet #9400D3 BlanchedAlmond #FFEBCD PaleGreen #98FB98 PapayaWhip #FFEFD5 DarkOrchid #9932CC LavenderBlush #FFF0F5 YellowGreen #9ACD32 SeaShell #FFF5EE Sienna #A0522D Cornsilk #FFF8DC Brown #A52A2A LemonChiffon #FFFACD DarkGray #A9A9A9 FloralWhite #FFFAF0 DarkGrey #A9A9A9 Snow #FFFAFA LightBlue #ADD8E6 Yellow #FFFF00 GreenYellow #ADFF2F LightYellow #FFFFE0 PaleTurquoise #AFEEEE Ivory #FFFFF0 LightSteelBlue #B0C4DE White #FFFFFF 2.6.2 การกาหนดสี RGB แบบ HEX เป็นการกาหนดค่าสี แดง (RED) เขียว (GREEN) น้าเงิน (BLUE) ค่าสีเป็นเลขฐาน 16 จานวน 6 หลกั โดยมีรปู แบบ ดังน้ี #RRGGBB #00FFAA หลักที่ 1 และ 2 กาหนดค่าสแี ดง 00 หลักท่ี 3 และ 4 กาหนดคา่ สีแดง FF หลกั ที่ 5 และ 6 กาหนดค่าสแี ดง AA ซ่งึ เป็นการผสมสจี านวน 3 สี ย่งิ ค่าสใี ดมีค่ามากหมายถึงปรมิ าณสีจะออกไปยงั สโี ทน น้นั เช่น ตัวอยา่ ง การกาหนดสี RGB แบบ HEX <font color=\"#00FFAA\">มหาวทิ ยาลัยราชภฏั อุดรธานี</font> เปน็ การกาหนดสีให้กับตัวอักษรใหเ้ ป็นสีเขียว color=\"#00FFAA\" การพัฒนาเว็บไซต์ทางธุรกจิ ชนั้ สูง

บทท่ี 2 รูปแบบลกั ษณะเวบ็ ไซต์ | 23 2.6.3 การกาหนดสี แบบ HSL เป็นการกาหนดในรูปแบบ hsl(hue, saturation, lightness) เช่น hsl(121, 100%, 52%) ตัวอยา่ ง การกาหนดสแี บบ hsl <style> .style1 { background-color: hsl(121, 100%, 52%); color: hsl(299, 100%, 71%); } </style> 2.7 ฟอร์มในภาษา HTML ในการใช้งานเว็บจะมีช่องทางให้ผู้ใช้งานสามารถทาการส่งข้อมูลไปยังเว็บเซอร์เวอร์ได้ เช่น การลงทะเบียน หรือการแสดงความคิดเห็น ซึ่งการนาข้อมูลจากผู้ใช้งานจากฝ่ังผู้ใช้งานส่งไปยังเว็บ เซอร์เวอร์ สามารถทาได้โดยการสร้างฟอร์ม (Form) ในการรับข้อมูลตามรูปแบบที่เว็บไซต์ต้องการ ตัวอย่างแบบฟอร์มสมัครสมาชิกเฟสบูค หรอื ฟอร์มลอกอนิ เข้าสู่ระบบ ภาพที่ 2.4 แบบฟอร์มเว็บไซต์ facebook.com ทม่ี า https://www.facebook.com/ สาหรบั รบั สมัครสมาชกิ ใหม่ของเฟสบู๊ค โดยภายในฟอรม์ มกี ลอ่ งรับข้อมลู รูปแบบ ต่าง ๆ ให้ผู้ใช้งานสามารถทาการกรอกขอ้ มูล ในการรบั สมัครสมาชกิ ได้ การพัฒนาเว็บไซต์ทางธุรกิจชนั้ สงู

24 | บทท่ี 2 รูปแบบลกั ษณะเว็บไซต์ 2.7.1 โครงสร้างของ Form ในการสร้างฟอร์มเพ่ือรับข้อมูลจะต้องกาหนดรูปแบบของฟอร์ม โดยแท็กฟอร์มจะมี คุณสมบตั ขิ องแทก็ ดังต่อไปน้ี รูปแบบ <form name=\"form_name\" method=\"post\" action=\"register.php\" target=\"_self\"> // พ้นื ท่ีของฟอร์ม </form> โดยมคี ณุ สมบัติดังตอ่ ไปน้ี ตารางท่ี 2.6 คณุ สมบัติของแท็กฟอรม์ ความหมาย คุณสมบตั ิ Name ชอื่ ของฟอรม์ รูปแบบการส่งข้อมูลมี 2 รูปแบบ method 1. get เปน็ การสง่ ข้อมลู ต่อทา้ ย URL ทาให้ผูใ้ ชง้ านสามารถ มองเหน็ ขอ้ มูลน้นั ๆ ได้ เปน็ ข้อมลู ที่ไมเ่ ปน็ ความลบั ตัวอย่างการสืบค้นของเว้บไซต์ Google (https://www.google.co.th/search?q=บึงกาฬ) 2. post เป็นการสง่ ขอ้ มูลผา่ นทาง HTTP request ข้อมลู ไมต่ ่อทา้ ย URL การส่งจะส่งผ่านฟอร์มเทา่ น้นั เหมาะ สาหรบั การสง่ ขอ้ มลู ทต่ี ้องการความปลอดภยั ของข้อมูล Action ไฟลห์ รอื ตาแหน่งท่ีตอ้ งการส่งขอ้ มลู Target หนา้ ตา่ งท่ีต้องการแสดงผล _blank เปดิ หน้าต่างใหม่ _self แสดงในหน้าต่างเดิม _parent แสดงในหนา้ ตา่ งหลัก การพัฒนาเวบ็ ไซตท์ างธุรกิจชนั้ สงู

บทท่ี 2 รูปแบบลักษณะเว็บไซต์ | 25 2.7.2 ชนิดของฟอร์ม 1. ชอ่ งรบั ขอ้ มลู Text และ Password <input type=\"text | Password\" name=\"ช่อื ชอ่ งรับข้อมลู \" value=\"ข้อมลู \" size=\"ขนาด\" maxlength=\"ขนาดมากที่สุด\" disabled readonly /> <input type=\"text\" name=\"email\" value=\"[email protected]\"/> <input type=\"Password\" name=\"pwd\"/> ตารางท่ี 2.7 คณุ สมบัติของ Text และ Password คณุ สมบตั ิ ความหมาย type=\"text\" Input ชนิด Text เวลากรอกขอ้ มลู จะแสดง ขอ้ ความตามท่ีผู้ใชง้ านพิมพ์ เช่น [email protected] type=\"Password\" Input ชนดิ Password เวลากรอกขอ้ มูลจะแสดง ****แทนข้อความทผ่ี ู้ใช้พมิ พ์ name=\"ชื่อ Input\" ชอ่ื ของ Input value=\"ขอ้ มลู \" ขอ้ มลู ท่ีตอ้ งการแสดงใน Input (ไมก่ าหนดก็ได้) size=\"ขนาด\" ขนาดของ Input maxlength=\"ขนาดมาก จานวนตวั อักษรที่มากท่สี ดุ ทสี่ ามารถกรอกได้ เชน่ ท่สี ุด\" maxlength=\"13\" กาหนดให้ขนาดข้อมูลมากสุด 13 หลกั ยกเลิกการใช้งาน Input โดยข้อมูลจะไมถ่ ูกส่งออก disabled จากฟอรม์ อ่านได้อยา่ งเดียวเพ่ือใชป้ ้องกันการแก้ไข readonly การพัฒนาเว็บไซตท์ างธุรกิจชนั้ สูง

26 | บทท่ี 2 รูปแบบลกั ษณะเวบ็ ไซต์ 2. ตวั เลือกแบบเลือกได้ตวั เลือกเดียว (Radio) สาหรบั กาหนดให้สามารถเลือกตัวเลือกได้เพียงตัวเดยี ว เม่อื ช่ือตัวเลอื ก (name) มีช่ือเดยี วกนั เช่น ตัวเลือกเพศ สามารถเลือกได้ว่าเพศหญิงหรอื เพศชาย <input type=\"radio\" name=\"ชอื่ \" value=\"คา่ ขอ้ มูล\" checked /> <input type=\"radio\" name=\"sex\" value=\"1\" checked /> หญงิ <input type=\"radio\" name=\"sex\" value=\"2\" /> ชาย ตารางท่ี 2.8 คุณสมบัติของ Radio คุณสมบัติ ความหมาย value ค่าข้อมลู ของตวั เลอื กนั้น ๆ กาหนดให้ radio นนั้ ถูกเลือก checked 3. ตวั เลือกแบบเลือกได้หลายตัวเลอื ก (Checkbox) สาหรับกาหนดให้สามารถเลอื กตัวเลือกได้มากกวา่ หน่ึงตัวเลือก เช่น ตวั เลอื ก จงั หวัดทีท่ ่านต้องการไปเทยี่ ว <input type=\"checkbox\" name=\"ชอ่ื ตวั เลอื ก\" value=\"ค่าข้อมูล\" /> <form method=\"get\" action=\"vote.php\"> กรณุ าเลอื กจังหวัดท่ีท่านต้องการไปเท่ียว <br> <input type=\"Checkbox\" name=\"Province1\" value=\"ud\" /> อุดรธานี <br> <input type=\"Checkbox\" name=\"Province2\" value=\"bk\" checked /> การพัฒนาเว็บไซต์ทางธุรกจิ ชนั้ สงู

บทท่ี 2 รูปแบบลกั ษณะเว็บไซต์ | 27 บึงกาฬ <br> <input type=\"Checkbox\" name=\"Province3\" value=\"nk\" /> หนองคาย <br> <br> <input type=\"submit\" value=\"ส่งขอ้ มลู \" /> </form> 4. ปุ่ม Submit และปุ่ม Reset ป่มุ Submit สาหรบั สง่ ขอ้ มลู ในฟอร์ม ป่มุ Reset สาหรับเคลียร์ขอ้ มลู ในฟอร์ม ตวั อย่าง <input type=\"submit\" value=\"ส่งข้อมลู \"/> <input type=\"reset\" value=\"ยกเลกิ \"/> 5. กล่องดรอปดาวน์ (Select) สาหรับเลอื กรายการจากดรอปดาวน์ โดยประกอบดว้ ยแทก็ <select> และ แทก็ <option> มีโครงสรา้ งดงั น้ี <select name=\"ชอ่ื กลอ่ งดรอปดาวน\"์ > <option value=\"คา่ ที่ 1\">ขอ้ ความที่แสดง 1</option> <option value=\"ค่าที่ 2\">ขอ้ ความท่แี สดง 2</option> <option value=\"…..\">ขอ้ ความทแี่ สดง …</option> <option value=\"คา่ ท่ี n\">ขอ้ ความทีแ่ สดง n</option> </select> การพัฒนาเว็บไซต์ทางธุรกิจชนั้ สูง

28 | บทท่ี 2 รูปแบบลกั ษณะเวบ็ ไซต์ โดยขอ้ มลู ท่ีถูกส่ง หมายถงึ ค่าทถี่ กู เลือก สว่ นข้อความท่ีแสดงจาแสดงใน กลอ่ งดรอปดาวน์เพ่ือให้ผ้ใู ชง้ านเลือกตามคา่ ท่แี สดง <form method=\"get\" action=\"vote.php\"> กรุณาเลอื กเดือนทีท่ ่านต้องการไปเทีย่ ว <br> <select name=\"birthday_month\" size=\"3\" required> <option value=\"1\">ม.ค.</option> <option value=\"2\">ก.พ.</option> <option value=\"3\" selected>มี.ค.</option> <option value=\"4\">เม.ย.</option> <option value=\"5\">พ.ค.</option> <option value=\"6\">ม.ิ ย.</option> <option value=\"7\">ก.ค.</option> <option value=\"8\">ส.ค.</option> <option value=\"9\">ก.ย.</option> <option value=\"10\">ต.ค.</option> <option value=\"11\">พ.ย.</option> <option value=\"12\">ธ.ค.</option> </select> <input type=\"submit\" value=\"สง่ ขอ้ มลู \" /> <input type=\"reset\" value=\"ยกเลกิ \"> </form> การพฒั นาเว็บไซต์ทางธุรกจิ ชนั้ สูง

บทท่ี 2 รูปแบบลักษณะเว็บไซต์ | 29 ตารางท่ี 2.9 คณุ สมบัติของ Select ความหมาย คณุ สมบตั ิ name ช่ือกลอ่ งดรอปดาวน์ กาหนดใหเ้ ลือกข้อมูลในกลอ่ งดรอปดาวน์ (สาหรบั required size=\"3\" HTML 5) ขนาดท่ตี ้องการใหแ้ สดงผล เช่น size=\"3\" หมายถึง ให้แสดงทลี ะ 3 รายการ กาหนดให้เลอื กรายการเรม่ิ ต้นในกล่องดรอปดาวน์ selected 6. กลอ่ งรับขอ้ มลู แบบหลายบรรทัด (Text Area) กลอ่ งรบั ข้อมูลแบบหลายบรรทัด สามารถกาหนดขนาดช่องรบั ข้อมูล การกาหนดแถว และการกาหนดคอลมั น์ ดังภาพตวั อย่างกล่องรับข้อมลู ความ คดิ เหน็ ดงั น้ี <FORM method=\"get\" action=\"comment.php\"> ความคดิ เห็น <br/> <TEXTAREA name=\"comment\" cols=\"49\" rows=\"9\" wrap=\"virtual\"> </TEXTAREA> <br><br> <input type=\"submit\" value=\"สง่ ความคดิ เห็น\" /> การพัฒนาเวบ็ ไซตท์ างธุรกิจชนั้ สูง

30 | บทท่ี 2 รูปแบบลกั ษณะเว็บไซต์ <input type=\"reset\" value=\"ยกเลิก\"> </FORM> ตารางที่ 2.10 คุณสมบัติของ Text Area คณุ สมบตั ิ ความหมาย Name=\"\" ชอื่ ของช่องรับข้อมลู COLS=\"49\" ความกวา้ งของช่องรบั ข้อมลู ROWS=\"9\" จานวนบรรทัดของช่องรบั ข้อมูล WRAP=\"vitual\" กาหนดให้มีการตดั คาของข้อมลู โดยอตั โนมตั ิ 2.8 สคริปต์ทางานบนฝง่ั เซิร์ฟเวอร์ (Server-side script) สคริปต์ท่ีทางานฝ่ังเซิร์ฟเวอร์จะทาการประมวลผลคาสั่งตามที่ผู้พัฒนากาหนด เช่น สืบค้น ข้อมูลในฐานข้อมูล แล้วทาการแปลงให้อยู่ในรูปแบบของสคริปต์ทางานบนฝั่งไคลเอนต์ เช่นภาษา HTML แล้วค่อยส่งภาษา HTML กลับไปให้กับไคลเอนต์ ตวั อยา่ งภาษา Server side script 1. ASP, ASP.net ภาษาสคริปตท์ พ่ี ัฒนาโดยบรษิ ทั ไมโครซอฟท์ 2. PHP ภาษา PHP มีรากฐานโครงสร้างคาส่ังมาจากภาษา ภาษาซี ภาษาจา วา และ ภาษาเพิรล์ ซงึ่ ง่ายต่อการเรียนรู้ 3. JSP พฒั นาโดยซัน ไมโครซิสเตม็ ส์ ใช้รูปแบบภาษา Java ในการพัฒนา 4. Python ภาษา Python ถูกพัฒนาขึ้นมาโดยไม่ยึดติดกับแพลตฟอร์ม สามารถรันภาษา Python ได้ท้ังบนระบบ Unix, Linux , Windows NT, Windows 2000, Windows XP หรอื แมแ้ ตร่ ะบบ FreeBSD ภาพที่ 2.5 โลโกข้ องภาษาท่ีทางานฝ่ังเซิร์ฟเวอร์ การพัฒนาเวบ็ ไซตท์ างธุรกจิ ชนั้ สงู

บทท่ี 2 รูปแบบลกั ษณะเว็บไซต์ | 31 2.9 สรปุ ผล เว็บแอพพลิเคชั่น (Web Application) เป็นการทางานแบบไคลเอนต์เซิร์ฟเวอร์ ที่มีการ เช่ือมต่อรับส่งข้อมูลระหว่างเครื่องให้บริการ (Web Server) และเคร่ืองลูกข่าย (Client) โดยเคร่ือง ลูกข่ายจะทาการติดต่อร้องขอบริการ (Http Request) ไปยังเคร่ืองให้บริการ เมื่อเครื่องให้บริการ ได้รับการร้องขอบริการจะทาการประมวลผลตามที่เครื่องลูกข่ายร้องขอ แล้วส่งข้อมูลกลับ (Http Response) ไปให้เครื่องลูกข่าย โดยในส่วนเครื่องลูกข่ายจะแสดงผลด้วยโปรแกรมเว็บเบราว์เซอร์ (Web Browser) เช่น โปรแกรม Chrome, โปรแกรม Firefox, โปรแกรม Internet Explorer เปน็ ตน้ การพัฒนาเว็บไซตท์ างธุรกิจชนั้ สงู

32 | บทท่ี 2 รูปแบบลกั ษณะเวบ็ ไซต์ แบบฝกึ หดั ทา้ ยบท 1. เว็บแอพพลิเคชั่น (Web Application) หมายถงึ อะไร 2. ใหอ้ ธบิ ายหลักการทางานแบบไคลเอนตเ์ ซิรฟ์ เวอร์ 3. ใหร้ ะบโุ ปรแกรมเวบ็ เบราวเ์ ซอร์ (Web Browser) มาอยา่ งน้อย 5 โปรแกรม 4. Server side script และ Client side script แตกตา่ งกนั อย่างไร 5. การสง่ ข้อมูลแบบ GET และการสง่ ข้อมูลแบบ POST แตกต่างกนั อย่างไร 6. ระบบสีในภาษา HTML แบบ RGB เป็นการผสมสจี ากแมส่ ีกี่สี ประกอบด้วยสีอะไรบา้ ง 7. Http Response หมายถึงอะไร 8. Http Request หมายถงึ อะไร การพัฒนาเวบ็ ไซต์ทางธุรกิจชนั้ สูง