เอกสารประกอบการอบรมเชิงปฎิบัติการ การสร้างเว็บไซต์ด้วยภาษา PHP และ ภาษา SQL

เอกสารประกอบการอบรมเชิงปฏิบัติการ
การสร้างเว็บไซต์ด้วยภาษา PHP และภาษา SQL
เรียบเรียงโดย
ผู้ช่วยศาสตราจารย์ ดร.พินันทา ฉัตรวัฒนา
คุณวัชรพงษ์ วงศ์วิวัฒน์
ลิขสิทธิ์โดยมหาวิทยาลัยเทคโนโลยีพระจอมเกล้าพระนครเหนือ

การอบรมเชิงปฏิบัติการ หัวข้อการสร้างเว็บไซต์ด้วยภาษา PHP และภาษา SQL
(วันที่ 11-14 ธันวาคม 2561 ระยะเวลาการอบรม 4 วัน)
วัน/รอบ ช่วง-ระยะเวลา หัวข้อ/รายละเอียด
วันที่ 1 รอบเช้า 8.00-12.00 1. HTML elements - การเขียนโปรแกรมบนเว็บด้วยภาษา HTML
- การใช้ภาษา HTML ในการสร้างตารางและแบบฟอร์ม
รอบบ่าย 13.00-17.00 2. PHP - แนะนาภาษา PHP เบื้องต้น (Variable, basic
operators and form methods)
- คาสั่งเงื่อนไขและวนรอบด้วยภาษา PHP
(conditions and loop)
วันที่ 2 รอบเช้า 8.00-12.00 3. PHP - การใช้งานฟังก์ชัน คุกกี้และเซสชัน (functions and
cookies and sessions)
รอบบ่าย 13.00-17.00 4. Bootstrap - สร้างเว็บไซต์ด้วย Bootstrap and AdminLTE
Template
วันที่ 3 รอบเช้า 8.00-12.00 5. MySQL - แนะนาการใช้งาน MySQL และค้นหาข้อมูลอย่างง่าย
ด้วยภาษา SQL จาก Command Line
(select..from..where)
รอบบ่าย 13.00-17.00 6. SQL Aggregate Function and
Subquery
- SQL commands (insert, update and delete)
- SQL Aggregate Function
- SUBQUERY
วันที่ 4 รอบเช้า 8.00-12.00 7. SQL join tables and PHP -
MySQL Connection
- join tables
- PHP - MySQL Connection
รอบบ่าย 13.00-17.00 8. Web Blog Implementation

Introduction
1
อบรมเชิงปฏิบัติการ
“การสร้างเว็บไซต์ด้วยภาษา PHP และ ภาษา SQL”
วิทยากร : ผู้ช่วยศาสตราจารย์ ดร.พินันทา ฉัตรวัฒนา วิทยาลัยเทคโนโลยีอุตสาหกรรม มหาวิทยาลัยเทคโนโลยีพระจอมเกล้าพระนครเหนือ
คุณวัชรพงษ์ วงศ์วิวัฒน์ อาจารย์พิเศษ และ ผู้จัดการบริษัทพระนครซอฟต์ จากัด
วิทยากร
ผู้ช่วยศาสตราจารย์ ดร.พินันทา ฉัตรวัฒนา (อ.ออน)
 สถานที่ทางาน : วิทยาลัยเทคโนโลยีอุตสาหกรรม มจพ.
 เบอร์มือถือ : 081-1744881
 E-mail : pinanta.c@cit.kmutnb.ac.th
 เว็บไซต์ : http://pinantac.staff.kmutnb.ac.th
คุณวัชรพงษ์ วงศ์วิวัฒน์ (อ.แป้ง)
 อาจารย์พิเศษ และผู้จัดการบริษัทพระนครซอฟต์ จากัด
 เบอร์มือถือ : 062-4254902
 Line-id : kapongpang17
 เว็บไซต์ : https://www.phranakornsoft.com/

Introduction
2
เครื่องมือที่ใช้ในการอบรม
ซอฟต์แวร์ระบบเว็บเซิร์ฟเวอร์
Xampp : ประกอบไปด้วยโปรแกรมหลักๆ คือ
PHP
Apache Web Server
MySQL
PHPmyadmin
ซอฟต์แวร์เขียน code
Sublime Text
Notepad++
หรือตัวใดที่ก็ได้ที่ชอบ
เนื้อหาอบรม
วันที่ รอบ รายละเอียด
Day1 เช้า HTML Element
• Tag
• Table & Form
บ่าย PHP1
• Variable, basic operators and form
methods)
• Conditions and loop
Day2 เช้า PHP2
• Functions
• Cookies and sessions
บ่าย Bootstrap
• Bootstrap and AdminLTE Template
วันที่ รอบ รายละเอียด
Day3 เช้า MySQL
• Introduction SQL
• select..from..where
บ่าย SQL Aggregate Function and Subquery
• SQL commands (insert, update and delete)
• SQL Aggregate Function
• SUBQUERY
Day4 เช้า SQL join tables and PHP - MySQL Connection
• join tables
• PHP - MySQL Connection
บ่าย Web Blog Implementation

1
HTML elements – Table & Form
HTML elements
Table & Form
อบรมเชิงปฏิบัติการ “การสร้างเว็บไซต์ด้วยภาษา PHP และ ภาษา SQL”
Asst. Prof. Dr. Pinanta Chatwattana [Department of Electronics Engineering Technology, CIT, KMUTNB]
Mr.Watcharapong Wongwiwat (Manager, PhanakornSoft Co, Ltd.)
Checklist
ติดตั้ง Xampp
หลังจากติดตั้งเสร็จแล้ว ลองใช้เบราว์เซอร์เปิด
http://localhost หรือ http://127.0.0.1
ติดตั้ง Sublime text (หรือ text editor ที่ชอบ)
สร้างไฟล์ใหม่พิมพ์ Hello World แล้วบันทึกเป็น hello.html
Copy ไฟล์นี้ไปที่ไดเร็กทรอรี htdocs ของ xampp
เปิดเบราว์เซอร์
http://localhost/hello.html หรือ http://127.0.0.1/hello.html

2
HTML Introduction
030513342-Dynamic Web Programming
Asst. Prof. Dr. Pinanta Chatwattana [Department of Electronics Engineering Technology]
HTML คืออะไร
HTML คือ ภาษา markup ที่ใช้ในการอธิบายเอกสารในรูปแบบเว็บ
 Hyper Text Markup Language
ภาษา markup คือ ภาษาที่ใช้ markup tags เป็นองค์ประกอบ
ใน HTML เอกสารก็จะถูกอธิบายด้วย HTML tags

3
HTML คืออะไร
เป็นภาษามาร์กอัปหลักในปัจจุบันที่ใช้ในการสร้างเว็บเพจ หรือข้อมูลอื่นที่เรียกดูผ่านทางเว็บเบราว์เซอร์
ตัวโค้ดจะแสดงโครงสร้างของข้อมูลในการแสดง หัวข้อ ลิงก์ ย่อหน้า รายการ รวมถึงการสร้างแบบฟอร์ม
เชื่อมโยงภาพหรือวิดีโอด้วย
โครงสร้างของภาษา HTML จะอยู่ในลักษณะภายในเครื่องหมาย < (less than) และเครื่องหมาย > (greater
than)
นามสกุลของไฟล์ทั่วไปจะใช้ .htm หรือ .html
ความสามารถของภาษา HTML
เป็นภาษาหลักที่ใช้ในการแสดงผลบนเว็บบราวเซอร์ โดยสามารถนาเสนอข้อมูลตัวอักษร รวมทั้งเชื่อมต่อเพื่อ
แสดงภาพ, เสียง และไฟล์ในรูปแบบอื่นๆ
สร้างโดยใช้โปรแกรม Text Editor ต่างๆ เช่น Notepad, Edit Plus หรืออาศัยโปรแกรมที่เป็นเครื่องมือ
ช่วยสร้างเว็บเพจ เช่น Microsoft FrontPage, Dreamweaver เป็นต้น
เรียกใช้งานหรือทดสอบการทางานของเอกสาร HTML โดยใช้โปรแกรม web browser เช่น IE Microsoft
Internet Explorer (IE), Mozilla Firefox, Safari, Opera, และ Netscape Navigator เป็นต้น

4
การทางานของเว็บไซต์
Client
(Web Browser)
Server
(Web Server)
HTTP Request
HTTP Reply
(HTML, ภาพ, etc)
โครงสร้างภาษา HTML

5
HTML tags (element)
HTML tags คือ คาเฉพาะ (keyword) ที่อยู่ภายในวงเล็บแหลม
<tagname> เนื้อหา </tagname>
HTML tags ส่วนใหญ่จะมาเป็นคู่
<tagname> จะเรียกว่า tag เปิด และส่วนใหญ่จะมาคู่กับ
</tagname> ที่เรียกว่า tag ปิด โดยจะมี / อยู่หน้า tagname
ตัวอย่าง HTML tags
<h1> Hello World </h1>
<title> My First Web </title>
<br> หรือ <br/>
HTML tags นั้น case-insensitive
หมายความว่า จะใช้
<Title>, <TITLE>, หรือ <TiTle> ก็ได้
ตัวอย่าง HTML
DOCTYPE ใช้นิยามว่าเอกสารนี้คือ HTML
<html> .. </html> ใช้คลุมเอกสาร HTML
<head> .. </head> ให้ข้อมูลเพิ่มเติมเกี่ยวกับเอกสาร
<title> .. </title> ใช้กาหนดหัวข้อของเอกสาร
<body> .. </body> ใช้กาหนดเนื้อหาของเอกสาร
<h1> .. </h1> ทาให้ข้อความเป็นหัวข้อแบบ heading
<p> .. </p> ใช้แสดงย่อหน้าของข้อความ
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph. </p>
</body>
</html>
มาทดลอง เขียนกันเลย !!

6
HTML Attributes
HTML elements สามารถที่จะมี attributes ได้
Attribute จะเป็นตัวให้ข้อมูลเสริมกับ element นั้นๆ
ปกติแล้ว attribute จะเขียนใน tag เปิด
Attribute จะอยู่ในรูปแบบคู่ ชื่อ = “ค่า”
ตัวอย่าง
<p title = “Hello”> </p>
<img src = “.........” width = “.........” height = “.........”>
HTML Heading (1)
ใช้สาหรับทาหัวข้อ โดยจะมีให้ใช้ตั้งแต่ <h1> จนถึง
<h6> ซึ่ง
<h1> จะมีขนาดตัวอักษรของหัวข้อที่ใหญ่ที่สุด และ
<h6> มีขนาดตัวอักษรของหัวข้อที่เล็กที่สุด
ข้อความที่อยู่ภายใน tag จะถูกแสดงบนหน้าเว็บ
พร้อมกับขึ้นบรรทัดใหม่
<!DOCTYPE html>
<html>
<body>
<h1>Heading H1</h1>
<h2>Heading H2</h2>
<h3>Heading H3</h3>
<h4>Heading H4</h4>
<h5>Heading H5</h5>
<h6>Heading H6</h6>
Normal Text.
</body>
</html>

7
HTML Heading (2)
การเขียนเส้นคั่นบรรทัด ใน HTML จะใช้
<hr>
<!DOCTYPE html>
<html>
<body>
<h1>Hello World h1</h1>
<hr>
<h2>Hello World h2</h2>
</body>
</html>
HTML Heading (3)
HTML <head> element
ใช้สาหรับกาหนดข้อมูลเพิ่มเติมให้กับเอกสาร HTML เช่น
การกาหนด title (หัวข้อ) ให้กับเอกสาร <title>
การกาหนดภาษาที่ใช้ในการแสดงผล <meta>
ใช้อ้างอิงถึง CSS <style>, <link>
<!DOCTYPE html>
<html>
<body>
สวัสดีชาวโลก :)
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
สวัสดีชาวโลก :)
</body>
</html>

8
HTML Paragraphs
ใช้สาหรับทาย่อหน้าของเอกสาร ด้วย tag <p>.........</p> โดยข้อความที่อยู่ภายใน tag จะแสดงออกบนหน้า
เว็บ และจะขึ้นย่อหน้าใหม่ให้กับเอกสาร
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Normal Text.
</body>
</html>
HTML Display
ในภาษา HTML นั้น ถึงแม้ว่าข้อความจะมี การขึ้นบรรทัดใหม่ เว้นช่องว่างมากขนาดนั้น ในการแสดงผล
ของ HTML นั้นจะเปลี่ยนเป็นช่องว่างเดียว <!DOCTYPE html>
<html>
<body>
<p>
Testing HTML
display on
web browser
</p>
<p>
Testing HTML display
on web
browser
</p>
</body>
</html>

9
HTML Line Break
ในเมื่อไม่สามารถจะทาให้ข้อความมีการขึ้นบรรทัดใหม่ได้ด้วยวิธีปกติ ดังนั้นจึงต้องใช้ HTML element
<br>
<!DOCTYPE html>
<html>
<body>
<p>
Testing HTML<br>
display on <br>web browser
</p>
</body>
</html>
HTML Pre-formatted Text
ถ้าต้องการให้ HTML แสดงผลเหมือนตามที่เขียนใน HTML เลย สามารถใช้ <pre> element แต่รูปแบบของ
ตัวหนังสือจะเป็นแบบ fixed-width font ที่ถูกกาหนดเอาไว้ก่อนแล้ว
<pre> ............ </pre> <!DOCTYPE html>
<html>
<body><pre> … </pre>
<pre>
Testing HTML
display on
web browser
</pre>
</body>
</html>

10
HTML Styles (1)
เอกสาร HTML ปกติแล้วจะเป็นตัวอักษรสีดา บนพื้นหลังสีขาว แต่สามารถเปลี่ยนแปลงได้ด้วยการใช้ attribute style
มีรูปแบบคือ style=“property : value” (CSS property)
ตัวอย่าง :
สีพื้นหลังของหน้าเว็บ
<body style=“background-color : lightgrey”>
สีตัวอักษร
<h1 style=“color : blue”>This is h1</h1>
<p style=“color : red”>Paragraph.</p>
HTML Styles (1)
รูปแบบตัวอักษร
<p style=“font-family : verdana”>Paragraph.</p>
ขนาดตัวอักษร
<p style=“font-size : 160%”>Paragraph.</p>
การจัดวางตัวอักษร
<p style=“text-align : center”>Paragraph.</p>

11
HTML Styles (2)
ถ้าต้องการให้มี style หลายแบบผสมกัน สามารถเชื่อมกันได้ด้วย ;
<!DOCTYPE html>
<html>
<body style="background-color:lightgrey">
<h1 style="color:blue">This is h1</h1>
<p style="color:red">Paragraph.</p>
<p style="font-family:verdana">Paragraph.</p>
<p style="font-size:160%">Paragraph.</p>
<p style="text-align:center">Paragraph.</p>
<p style="font-size:160%;color:green;text-align:center">Paragraph.</p>
</body>
</html>
HTML Colors
สีใน HTML มีวิธีระบุได้ 3 วิธี
เป็นค่าเลขฐานสิบหก
#RRGGBB (RR, GG, BB ใช้ฐานสิบหก 2 หลักของแต่ละแม่สี 00-FF)
เป็นค่า RGB
rgb(r, g , b) (r, g, และ b ใช้เลขฐานสิบ 0-255)
เป็นชื่อสี
รอบรับ 140 ชื่อสี http://www.w3schools.com
/html/html_colornames.asp

12
HTML Text Formatting (1)
นอกการจากใช้ attribute style แล้ว ยังมี tag พิเศษสาหรับจัดการกับรูปแบบตัวอักษรอีก
ตัวหนา ใช้ <b>......</b> หรือ <strong>......</strong>
ตัวเอียง ใช้ <i>......</i> หรือ <em>......</em>
ปรับขนาดตัวอักษรเล็กลง <small> ...... </small>
Highlight ข้อความ <mark> ...... </mark>
ขีดเส้นฆ่าข้อความ <del> ...... </del>
ขีดเส้นใต้ข้อความ <ins> ...... </ins>
ข้อความห้อย (subscript) <sub> ...... </sub>
ข้อความยก (superscript) <sup> ...... </sup>
HTML Text Formatting (2)
<!DOCTYPE html>
<html>
<body>
This text is <b>Bold</b>. <br>
<i>Itallic</i>
<h1>Heading <small>text</small> title</h1>
This is <mark>important</mark>.<br>
<del>HTML</del> <ins>HTML5</ins> is good.<br>
X<sub>1</sub> = A<sup>2</sup> + B<sup>5</sup><br>
Combine <b><i>Text</i></b>,
<mark><ins>it's up to you</ins></mark>
</body>
</html>

13
HTML Comments
การ comment ใน HTML จะเป็นข้อความที่อยู่ระหว่าง
 <!DOCTYPE html>
<html>
<body>

<p>Hello 2</p>

</body>
</html>
HTML Style - CSS
CSS (Cascading Style Sheets)
Inline - ใช้ attribute style ใน HTML elements
<h1 style=“color : blue”>Blue heading</h1>
Internal - ใช้ <style> element ในส่วนของ <head>
<head>
<style> body {background-color : green} h1{color : blue}</style>
</head>

14
CSS properties เบื้องต้น
CSS Fonts
color เช่น color: #FFFFFF;
font-family เช่น font-family: courier
font-size เช่น font-size: 150%
CSS Box
border เช่น border: 1px solid black;
padding เช่น padding: 10px; (ช่องว่างภายในกล่อง)
margin เช่น margin: 10px; (ช่องว่างนอกกล่อง)
<!DOCTYPE html>
<html>
<head>
<style>
{
border: 1px solid black;
padding: 10px;
margin: 30px;
}
</style>
</head>
<body>
<p> Hello World</p>
<p>
Second Box<br>
2 lines
</p>
</body>
</html>
HTML Lists
ใช้ <ul>.........</ul> เป็นตัวครอบรายการแบบเป็น bullet
ใช้ <ol>.........</ol> เป็นตัวครอบรายการแบบเป็นตัวเลข
ใช้ <li>.........</li> สาหรับชื่อรายการ
<!DOCTYPE html>
<html>
<body>
<ul>
<li> Hello </li>
<li> World </li>
</ul>
<ol>
<li> Hello </li>
<li> World </li>
</ol>
</body>
</html>

15
HTML Block Element
 Block element คือ ปกติจะเริ่มต้น และสิ้นสุดด้วยการขึ้นบรรทัดใหม่ เช่น <h1>, <p>, <ul>, <table> เป็นต้น
 Inline element คือ element ที่จะไม่ขึ้นบรรทัดใหม่หลังจากจัดเอกสาร เช่น <b>, <td>, <a>, <img> เป็นต้น
 <div> ......... </div> เป็น block element ที่จริงๆ แล้วไม่มีหน้าที่พิเศษใดๆ แต่จะใช้ครอบชุดเอกสารบางอย่าง แล้วใช้ style และ
id, class เพื่อมาควบคุมการทางานอีกที
<div style=“background-color:black;color:white”>
<h1>Hello World</h1>
This is an example.
</div>
 <span> ......... </span> เป็น inline element ไม่มีหน้าที่พิเศษ และทางานคล้ายกับ <div>
<h1>This is <span style=“color:red”>Important</span></h1>
HTML Images (1)
เอกสาร HTML สามารถแสดงรูปภาพได้ด้วย tag
<img src=“ชื่อและที่อยู่รูป ” alt=“ข้อความ ” width=“ความกว้างของรูป ” height=“ความสูงของรูป ”>
<img src= “cit.jpg“ alt=“CIT-LOGO” width=“40”
height =“40”>CIT LOGO
<img src= “cit.jpg“ alt=“CIT-LOGO”>CIT LOGO
ในกรณีที่ไม่เจอรูปภาพ
ในกรณีที่เจอรูปภาพ

16
HTML Images (2)
ความกว้างกับความสูงของภาพสามารถใช้ style attribute ได้
ซึ่งจะแนะนามากกว่าการใช้ width, height attribute โดยตรง เพราะอาจจะถูก CSS ปรับขนาดได้ในภายหลัง
<img src=“............” style=“width:100px;height:100px”>
Property ใน style ของ img ที่อาจจะได้ใช้
border เพิ่มกรอบให้กับรูปภาพ
float เช่น float:right; float:left ให้ภาพลอยอยู่ด้านขวาหรือซ้าย
HTML Links (1)
ในเอกสาร HTML สามารถที่จะทา link เพื่อเข้าไปยังเว็บอื่นๆ ได้ ด้วย
<a href = “URL ของ link ”> ข้อความที่จะแสดง </a>
<!DOCTYPE html>
<html>
<body>
<a href= "http://www.google.com">Link to Google</a>
</body>
</html>

17
HTML Links (2)
การเปลี่ยนสีให้กับ link จะใช้ style เช่น
<style>
a:link {color:#000000; background-color:transparent; text-decoration:none}
a:visited {color:#000000; background-color:transparent; text-decoration:none}
a:hover {color:#ff0000; background-color:transparent; text-decoration:underline}
a:active {color:#ff0000; background-color:transparent; text-decoration:underline}
</style>
a:link คือสถานะของ link
a:hover คือ สถานะ link เมื่อเอาเมาส์ไปแตะ
a:active คือ สถานะเมื่อ link หน้านั้นถูกเปิดอยู่
a:visited คือ สถานะ link ที่ถูกเปิดและปิดไปแล้ว
HTML Links (2)
การกาหนดเป้าหมายของ link
ใช้ attribute target เช่น <a href= “..........” target=“_blank”> .......... </a>

18
HTML Links (3)
การใช้รูปภาพเป็น link
<a href= “.............”> <img src = “.............”> </a>
การใช้ attribute : id
<a id=“tips”>Tip Section</a> สร้างหัวข้อ
<a href=“#tips”>Go to Tip Section</a> กด link หาหัวข้อ
** พักครึ่งกันซักนิด **

19
HTML Tables & Forms
ทบทวน HTML
 HTML (Hyper Text Markup Language) คือ ภาษา markup ที่ใช้ในการอธิบายเอกสารในรูปแบบเว็บ
ทบทวนความจา tag ต่างๆ เหล่านี้ใช้ทาอะไร
 <br>
 <a href=“elec.html”>Hello</a>
 <img src=“mypic.jpg”>
 <h3>
 <i>Hello</i>
 <b>Welcome</b>

20
HTML Tables
การสร้างตารางใน HTML จะประกอบด้วย tag
<table> ........... </table> เพื่อคลุมเนื้อหาในตารางทั้งหมด
สามารถใส่ attribute style เพื่อกาหนดสี ความกว้าง กรอบของตารางได้
<tr> ........... </tr> เป็นการกาหนดแถวของตาราง
<td> ........... </td> เป็นการกาหนดหลักของตาราง
<th> ........... </th> เป็นการกาหนดส่วนหัวของตาราง
<!DOCTYPE html>
<html>
<body>
<table style="border:5px solid black; width:20%">
<tr><th>ID</th><th>Name</th></tr>
<tr><td>030513129</td><td>Rattanakorn</td></tr>
<tr><td>030513152</td><td>Pinanta</td></tr>
<tr><td>030513330</td><td>Sirivat</td></tr>
</table>
</body>
</html>
HTML Tables (2)
การทาตารางให้ซับซ้อนขึ้นด้วยการ span
colspan เหมือนเป็นการ merge cell ของหลัก
rowspan เหมือนเป็นการ merge cell ของแถว
<!DOCTYPE html>
<html>
<style>
table, th, td {
border-collapse: collapse;
}
</style>
<body>
<table>
<tr><td>030513129</td><td>Rattanakorn</td></tr>
<tr><td>030513152</td><td>Pinanta</td></tr>
<tr><td colspan="2">Broadcast</td> </tr>
</table>
</body>
</html>

21
HTML Tables (3)
การทาตารางให้ซับซ้อนขึ้นด้วยการ span
colspan เหมือนเป็นการ merge cell ของหลัก
rowspan เหมือนเป็นการ merge cell ของแถว
<!DOCTYPE html>
<html>
<style>
table, th, td {
border-collapse: collapse;
}
</style>
<body>
<table>
<tr><td>030513129</td><td
rowspan="2">Rattanakorn</td></tr>
<tr><td>030513152</td> </tr>
</table>
</body>
</html>
HTML Forms
การสร้างแบบฟอร์มใน HTML จะใช้ element
<form> .............. </form>
ภายใน form element จะมี element อื่นที่ทาหน้าที่รับข้อมูล
<form>
<input>
<input>
</form>

22
HTML INPUT (TEXT)
<input type=“text” name=“ชื่อตัวแปร”>
<!DOCTYPE html>
<html>
<body>
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
</body>
</html>
HTML INPUT attribute
Attribute
 value สาหรับการตั้งค่าเริ่มต้นให้กับ input type=text
 size ขนาดของช่อง input
 maxlength จานวนของตัวอักษรที่ช่องนี้จะยอมรับได้มากที่สุด
 readonly สาหรับให้ช่องนั้น แสดงค่าได้อย่างเดียว แก้ไขไม่ได้
 disabled ช่องนี้แสดงผลได้อย่างเดียว รวมทั้งไม่มีการส่งค่าใดๆ ทั้งสิ้น
 required ช่องนี้จะต้องใส่ค่าเสมอ
 <input type=“text” name=“test” value=“hello” size=“30” readonly>
 <input type=“text” name=“test” value=“hello” size=“30” required>

23
HTML INPUT (PASSWORD)
<input type=“password” name=“ชื่อตัวแปร”>
<!DOCTYPE html>
<html>
<body>
<form>
Username:<br>
<input type="text" name=“user">
<br>
Password:<br>
<input type=“password" name=“pass">
</form>
</body>
</html>
HTML INPUT (radio)
<input type=“radio” name=“ชื่อตัวแปร” value=“ค่า”>
<form>
Gender:<br>
<input type="radio" name="gender" value="m">
Male<br>
<input type="radio" name="gender" value="f">
Female<br>
</form>

24
HTML INPUT (checkbox)
<input type=“checkbox” name=“ชื่อตัวแปร” value=“ค่า”>
<form>
Programming Skill:<br>
<input type="checkbox" name="prog" value="0">
C#<br>
Java<br>
Python<br>
</form>
HTML <select>
<form><form>
<select name="cars">
<option value="volvo">Vol</option>
<option value="saab">Sa </option>
<option value="fiat">Fiat </option>
<option value="audi">Aui</option>
</select>
</form>

25
HTML <textarea>
<form>
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</form>
การส่งค่าในฟอร์มไปประมวลผล
การใช้ภาษา HTML เป็นเพียงแค่การสร้างหน้าเว็บ
ข้อมูลต่างๆ ที่กรอกในฟอร์มนั้น สามารถจะนาไปประมวลผลที่ Backend ด้วยภาษา PHP ได้ (จะขอกล่าวถึงใน
ภายหลัง)
การที่จะให้ฟอร์มสามารถส่งค่าได้นั้น จาเป็นต้องมี attribute ของ FORM

26
การส่งค่าในฟอร์มไปประมวลผล
<form name=“myform” action=“dest.html” method=“get”>
name คือ ชื่อของฟอร์ม ไม่ค่อยมีความสาคัญเท่าไรแล้ว
action คือ หน้าเว็บที่ใช้สาหรับรับข้อมูลที่กรอกในแบบฟอร์ม
method คือ รูปแบบการส่งข้อมูลไปยังหน้าเว็บที่ใช้สาหรับรับข้อมูล มีด้วยกันหลักๆ 2 วิธี
GET
POST
GET และ POST
GET
ค่าที่เราใส่เข้าไปจะถูกแสดงใน URL ของหน้าใน action
ทาให้มีความไม่ปลอดภัยถ้าค่าที่จะส่งอีกหน้าเป็น
password เพราะจะถูกแสดงใน URL
แต่จะทาให้สามารถทา bookmark ได้
POST
ค่าที่ใส่ใน form จะไม่ถูกแสดงใน URL ของหน้าใน action
ทาให้มีความปลอดภัยในข้อมูลที่ส่งระหว่างหน้าเว็บ
แต่จะไม่สามารถทา bookmark ได้

27
ปุ่มสาหรับส่งแบบฟอร์ม (Submit)
<input type=“submit” value=“ตกลง”>
HTML element นี้จะต้องอยู่ภายใน <form> .............. </form> เพื่อส่งข้อมูลในฟอร์มนั้นไปยังหน้าเว็บปลายทาง
<form action=“b.html” method=“post”>
Name : <input type=“text” name=“n”> <br>
<input type=“submit” value=“confirm”>
</form>
HTML <Field Set>
สาหรับสร้างฟอร์มที่มีขอบให้กับข้อมูลและมีหัวข้อทาให้อ่านข้อมูลได้ง่ายขึ้น
<html><body>
<fieldset>
<legend>
กรุณากรอกข้อมูล:
</legend>
<form>
ชื่อ <input type="text" size="20">
อายุ <input type="text" size="2">
</form>
</fieldset></body></html>

28
HTML input เพิ่มเติม สาหรับ HTML5
type=“number” สาหรับใช้รับค่าตัวเลขเท่านั้น
<input type=“number” min=“1” max=“5”>
type=“date” สาหรับใช้รับค่าวันที่
<input type=“date” name=“bday” >
type=“color” สาหรับใช้รับค่าสี
type=“range” สาหรับแสดงเป็น slide bar ค่าย่าน
<input type=“range” min=“0” max=“100” >
HTML input เพิ่มเติม สาหรับ HTML5
type=“month” สาหรับแสดงค่าเดือนและปี
type=“week” สาหรับแสดงสัปดาห์และปี
type=“time” สาหรับแสดงเวลา
type=“datetime” สาหรับแสดงวันและเวลา
type=“email” สาหรับรับข้อมูลที่เป็น email

29
ตัวอักษรรูปแบบหนา
- กล่องรับข้อมูล (input text) กาหนดให้
รับจานวนตัวอักษรไม่เกิน 20 ตัวอักษร
ปุ่ม submit เมื่อกดแล้วจะวิ่งไปยังไฟล์ first.html โดยส่ง
ค่าของ username และ password ในรูปแบบของ GET
กาหนดตาแหน่งรูปภาพอยู่กึ่งกลางคอลัมภ์
และมีขนาด 100x100 pixel โดยสามารถ link
ไปยัง website : https://www.scg.com/
ลองทากันเถอะ
ลองทากันเถอะ [HTML Element]

1
PHP1 – Condition & Loop
PHP Introduction
Condition & Loop
อบรมเชิงปฏิบัติการ หัวข้อการสร้างเว็บไซต์ด้วยภาษา PHP และภาษา SQL
XAMPP Introduction
XAMPP คือโปรแกรมสาหรับจาลองเครื่องคอมพิวเตอร์ส่วนบุคคล (Client) ให้ทางานในลักษณะ
ของ Webserver นั่นคือเครื่องคอมพิวเตอร์ของเราจะเป็นทั้งเครื่องแม่ข่าย (Server) และเครื่องลูกข่าย
(Client) ในเครื่องเดียวกัน
การใช้งาน XAMPP ไม่ต้องเชื่อมต่อกับ Internet ก็สามารถทดสอบเว็บไซต์ที่สร้างขึ้นได้ทุกที่ทุกเวลา ปัจจุบัน
ได้รับความนิยมจากผู้ใช้ CMS ในการสร้างเว็บไซต์
วิธีการ download program : เข้าไปที่ https://www.apachefriends.org/index.html หรือ Search คา
ว่า “download xampp”

2
XAMPP
X = Cross Platform (Windows, MAC OSX, Solaris and Linux)
A = Apache
M = MySQL
P = PHP
P = Perl
ส่วนประกอบของ XAMPP
Apache คือซอฟต์แวร์สาหรับเปิดให้บริการเซิร์ฟเวอร์บนโพรโทคอล HTTP โดยสามารถทางานได้บนหลาย
ระบบปฏิบัติการ
MariaDB คือซอฟท์แวร์สาหรับจัดการฐานข้อมูลที่มีโครงสร้างการทางานเหมือนภาษา MySQL
PHP
Perl
MySQL คือภาษาที่ใช้ในการเขียนโปรแกรมเพื่อจัดการกับฐานข้อมูลโดยเฉพาะ เป็นภาษามาตราฐานบนระบบ
ฐานข้อมูลเชิงสัมพันธ์และเป็นระบบเปิด คือ สามารถใช้คาสั่ง SQL กับฐานข้อมูลชนิดใดก็ได้
PHP MyAdmin คือโปรแกรมที่ถูกพัฒนาโดยใช้ภาษา PHP เพื่อใช้ในการบริหารจัดการฐานข้อมูล MySQL
เป็นภาษาที่ใช้ในการเขียนโปรแกรม

3
Usage XAMPP
Usage XAMPP
การเรียกใช้งานโปรแกรม XAMPP
เปิดเว็บเบราว์เซอร์ขึ้นมาแล้วพิมพ์
http://localhost หรือ 127.0.0.1

4
ความรู้เบื้องต้นเกี่ยวกับภาษา PHP
 PHP มาจาก PHP : Hypertext Preprocessor
ทางานที่ฝั่งของ server เช่นเดียวกับ ASP, Java
สามารถทางานร่วมกับระบบฐานข้อมูลได้หลายชนิด (MySQL, Informix, Oracle, Sybase, .. etc)
PHP เป็น open source
PHP ฟรี
PHP สามารถทางานได้ในหลาย OS (Windows, Linux, Unix, etc..)
Web server เกือบทุกเจ้ารองรับ PHP
โดยปกติไฟล์จะมี extension เป็น .php , .php3 หรือ .phtml
เริ่มต้นกับ PHP (1)
Syntax ของ PHP จะอยู่ในรูป
<?php โปรแกรม PHP ?>
<? โปรแกรม PHP ?>
แก้ได้ที่ php.ini ปรับเปลี่ยน short_open_tag=On
Comment ในภาษา PHP ใช้เหมือนกับภาษา C และ Java
โดยใช้เครื่องหมาย // ไว้หน้าข้อความที่ต้องการ Comment
ทดลองง่ายๆ ก่อนกับฟังก์ชัน echo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<? phpecho “Hello World”;
?>
</body>
</html>

5
เริ่มต้นกับ PHP (2)
Syntax ของภาษา PHP จะคล้ายคลึงกับภาษา C และ Java มากๆ ดังนั้นเกือบทุกคาสั่งที่ไม่ได้ตามด้วย
block จะต้องปิดท้ายด้วย semi-colon ( ; )
ถ้ามีการเขียนชุดคาสั่งผิด ข้อความ error จะแสดงบนหน้าเว็บ เช่น ใส่เครื่องหมายฟันหนูไม่ครบคู่
การทางานของ PHP
<!DOCTYPE html>
<html>
<body>
<?php echo “Hello World”; ?>
</body>
</html>
a.php
HTTP Request
User
<!DOCTYPE html>
<html>
<body>
Hello World
</body>
</html>
ประมวลผล PHP ที่ server
HTTP reply

6
การประกาศตัวแปรใน PHP
ในภาษา PHP จะใช้สัญลักษณ์ $ นาหน้าชื่อตัวแปร เช่น
$myVariable = 5;
$txt = “Hello World”;
PHP เป็นภาษา script ที่ไม่สนใจประเภทของข้อมูลจึงไม่
จาเป็นต้องประกาศประเภทของข้อมูล (int, string,..)
ให้กับตัวแปร
ตัวอย่าง :
<!DOCTYPE html>
<html>
<body>
<?php
$txt = “Hello World”;
echo $txt;
?>
</body>
</html>
เครื่องหมาย = หมายถึง assignment
คือการนาค่า หรือผลลัพธ์จากการประมวลผลฝั่ง
ขวาไปเก็บยัง ตัวแปรที่อยู่ทางด้านซ้าย
กฎการประกาศตัวแปรใน PHP
ชื่อตัวแปรต้องขึ้นต้นด้วยเครื่องหมาย $ (dollar sign) เสมอ
หลังเครื่องหมาย $ จะตามด้วย ชื่อตัวแปร โดยที่ตัวแรกของชื่อตัวแปรต้องเป็น ตัวอักษร หรือ เครื่องหมาย
(Underscore) เท่านั้น
ตัวถัดมาของ ชื่อตัวแปร สามารถเป็นตัวอักษร หรือ ตัวเลข หรือ เครื่องหมาย _ (Underscore) เพื่อผสมเป็น
ชื่อได้
ชื่อของตัวแปรมีคุณสมบัติเป็น case-sensitive คือ ตัวอักษรตัวใหญ่และตัวเล็กถือว่าเป็นคนละตัวกัน

7
ชนิดของตัวแปรใน PHP
PHP เป็นภาษา script ที่ไม่สนใจประเภทของข้อมูลจึงไม่จาเป็นต้องประกาศประเภทของข้อมูล (int, string,..)
ให้กับตัวแปร
ชนิดของตัวแปรใน PHP
Numeric types
String
Boolean
Numeric types
 INT [(M)] [UNSIGNED] [ZEROFILL]
 ใช้เนื้อที่เก็บข้อมูล 4 bytes
 เก็บค่าตัวเลข -2147483648 ถึง 2147483647
 ถ้ากาหนดให้เป็น unsigned จะเก็บค่าตัวเลข 0 - 4294967295
 FLOAT [(M,D)] [UNSIGNED] [ZEROFILL]
 ความแม่นยาในการเก็บค่าแบบ float จะได้ที่ตัวเลข 7 หลักหลังจุดทศนิยม
 DOUBLE [(M)] [UNSIGNED] [ZEROFILL]
 ความแม่นยาในการเก็บค่าได้ที่ตัวเลข 15 ตาแหน่งหลังจุดทศนิยม

8
String
 CHAR (M) [CHARACTER SET charset_name] [COLLATE collation_name]
M เป็นขนาดของตัวอักษรที่จะเก็บได้ กาหนดได้ 0-255
CHARACTER SET เป็นชนิดตัวอักษรที่จะเก็บในฐานข้อมูล
COLLATE ทางานร่วมกับ CHARACTER SET
 VARCHAR (M) [CHARACTER SET charset_name] [COLLATE collation_name]
M เป็นขนาดของตัวอักษรที่จะเก็บได้
0 - 255 สาหรับ MySQL ก่อน version 5.0.3
0 - 65535 สาหรับMySQL version 5.0.3+
ระวัง : แต่มีข้อจากัดในเรื่องของข้อมูลต่อแถวห้ามเกิน 65535 byte
CHAR VS VARCHAR
 CHAR จะเป็นจองพื้นที่แบบคงที่ เช่น
CHAR (20) ก็จะจองพื้นที่สาหรับเก็บตัวอักษร 20 ตัว ถึงแม้ว่าจะใช้เก็บตัวอักษรจริงๆ แค่ 1 ตัว
 VARCHAR จะจองพื้นที่แบบ dynamic เช่น
VARCHAR (20) หมายถึงจะเก็บตัวอักษรได้มากที่สุด 20 ตัวอักษรแต่ถ้าใช้เก็บตัวอักษรแค่ 1 ตัว ก็จะใช้เนื้อที่เก็บจริงแค่ 1 ตัวอักษร
 VARCHAR จะประหยัดเนื้อที่ในการเก็บข้อมูลกว่า CHAR ถ้าข้อมูลที่ถูกเก็บมีความยาวที่ไม่แน่นอน
 CHAR จะประหยัดเนื้อที่ในการเก็บข้อมูลกว่า VARCHAR ถ้าข้อมูลมีความยาวที่แน่นอน (VARCHAR จะเพิ่มเนื้อที่ในการเก็บ
ข้อมูล 1 byte ถ้าข้อมูลมีขนาด 0 - 255 ตัวอักษร และ เพิ่มเนื้อที่ในการเก็บข้อมูล 2 bytes ถ้าข้อมูลมีขนาดมากกว่า 255
ตัวอักษร
 ในการค้นหาข้อมูลการหาข้อมูลประเภท CHAR จะทางานเร็วกว่าประเภท VARCHAR ประมาณ 50%

9
Boolean
ใช้สาหรับเก็บค่าในการตรวจสอบเงื่อนไข
การเก็บค่าจะมีเพียง 2 ค่าเท่านั้น คือ ค่าที่เป็นจริง (TRUE) และ ค่าที่เป็นเท็จ (FALSE)
Operator ชื่อ ตัวอย่าง ความหมาย
and หรือ && And $a && $b จะให้ค่าเป็นจริงเมื่อ $a และ $b เป็นจริงทั้งคู่ กรณี
ที่เหลือจะให้ค่าเป็นเท็จ
or หรือ || Or $a || $b จะให้ค่าเป็นเท็จเมื่อ $a หรือ $b เป็นเท็จทั้งคู่ กรณี
ที่เหลือจะให้ค่าเป็นจริง
xor Exclusion Or $a xor $b จะให้ค่าเป็นเท็จเมื่อ $a และ $b เป็นจริงทั้งคู่หรือ
เป็นเท็จทั้งคู่ กรณีที่เหลือจะให้ค่าเป็นจริง
! Not !$a จะให้ค่าเป็นจริงเมื่อ $a เป็นเท็จ
และจะให้ค่าเป็นเท็จ เมื่อ $a เป็นจริง
ตัวดาเนินการพื้นฐานของข้อความใน PHP
สาหรับการเชื่อมต่อข้อความ ภาษา PHP จะใช้ จุด “ . ”
<?php
$name = “Pinanta Chatwattana”;
echo “My name is ”. $name;
?>

10
ตัวดาเนินการทางคณิตศาสตร์
ตัวดาเนินการทางคณิตศาสตร์ ระหว่างค่า 2 ค่า หรือตัวแปร 2 ตัว
+ Addition $a + $b การบวกค่า $a กับ $b
- Subtraction $a - $b การลบค่า $a กับ $b
* Multiplication $a * $b การคูณค่า $a กับ $b
/ Division $a / $b การหารค่า $a กับ $b
% Modulus $a % $b การหาค่าเศษที่เหลือจากการหารค่า $a กับ $b
ตัวอย่าง 1

11
การใช้ “ ” และ ‘ ’ ใน PHP
การใช้ตัวครอบข้อความ double quote (“) และ single quote (‘) ใน PHP จะมีข้อแตกต่างกัน
ในกรณีที่เป็นข้อความปกติ
echo “Hello World”;
echo ‘Hello World’;
จะไม่มีความแตกต่างกัน

12
การใช้ “ ” และ ‘ ’ ใน PHP (ต่อ)
ในกรณีที่มีตัวแปรอยู่ภายในข้อความ เช่น ถ้ามี $b มีค่าเป็น 5
echo “B = $b”;
echo ‘B = $b’;
จะแสดงผลแตกต่างกัน
คาสั่งแรกจะแสดง B = 5
ในขณะที่คาสั่งที่ 2 จะแสดง B = $b
ตัวดาเนินการเพื่อกาหนดค่าตัวแปร
Operator ตัวอย่าง ความหมาย
= $a = $b การกาหนดค่าให้ตัวแปรทางซ้ายมือมีค่าเท่ากับค่าหรือตัวแปรทางขวามือ
++ $a++ การกาหนดค่าให้ตัวแปรมีค่าเพิ่มขึ้น 1
-- $a-- การกาหนดค่าให้ตัวแปรมีค่าลดลง 1
+= $a += $b การกาหนดค่าให้ตัวแปรทางซ้ายมือบวกค่ากับตัวแปรทางขวามือและเก็บค่าไว้
ในตัวแปรซ้ายมือ
-= $a -= $b การกาหนดค่าให้ตัวแปรทางซ้ายมือลบค่ากับค่าหรือตัวแปรทางขวามือและเก็บ
ค่าไว้ในตัวแปรซ้ายมือ
.= $a .= $b การกาหนดค่าให้ตัวแปรสตริงทางซ้ายมือถูกต่อท้ายด้วยข้อความทางขวามือ

13

14
ตัวแปรประเภท Array ใน PHP
 ภาษา PHP สามารถสร้างตัวแปรประเภท array เริ่มต้นได้โดยใช้
$var = array( );
 มีด้วยกันทั้งหมด 2 รูปแบบ
Indexed array : แบบใช้ตัวเลขเป็น index (เหมือนภาษา C)
$cars = array(“Volvo”, “BMW”, “Toyota”);
$cars[0] = “Volvo”;
Associative array : แบบใช้ key เป็น index
$age = array(“Peter” => “35”, “Ben” => “37”);
$age[‘Ben’] = “37”;
KIA

15
การรับข้อมูลจากฟอร์ม
ย้อนกลับไปหน่อย เกี่ยวกับการสร้าง FORM ของ HTML ถ้าต้องการให้ input ต่างๆ ไม่ว่าจะเป็น radio,
checkbox, select สามารถส่งค่าให้ PHP ประมวลผลได้จะต้องใส่ไว้ภายใน <form> ............ </form>
Form จะมี attribute ที่สาคัญของ 2 attributes คือ
action : เป็นตัวบ่งบอกว่าจะส่งข้อมูลภายในฟอร์มไปที่ไหน
method : ระบุรูปแบบในการส่งข้อมูลของฟอร์มซึ่งมีอยู่ 2 รูปแบบ
GET
POST

16
การรับข้อมูลจากฟอร์ม
การดึงค่าจาก method=“get” จะดึงค่าจากตัวแปรที่ชื่อ $_GET
การดึงค่าจาก method=“post” จะดึงค่าจากตัวแปรที่ชื่อ $_POST
ทั้ง $_GET และ $_POST เป็นตัวแปรชนิด Array
GET และ POST
GET
ค่าที่เราใส่เข้าไปจะถูกแสดงใน URL ของหน้าใน action
ทาให้มีความไม่ปลอดภัยถ้าค่าที่จะส่งอีกหน้าเป็น
password เพราะจะถูกแสดงใน URL
แต่จะทาให้สามารถทา bookmark ได้
POST
ค่าที่ใส่ใน form จะไม่ถูกแสดงใน URL ของหน้าใน action
ทาให้มีความปลอดภัยในข้อมูลที่ส่งระหว่างหน้าเว็บ
แต่จะไม่สามารถทา bookmark ได้

17
ตัวอย่างการส่งข้อมูลแบบ GET
 Form HTML ที่ต้องการส่งข้อมูล
 ไฟล์ PHP ที่รับข้อมูลที่ส่งมาจาก Form จากตัวอย่างข้างบน มีการ action ไปที่ไฟล์ welcome.php ฉะนั้นไฟล์ PHP ที่รับ
ข้อมูลจะต้องชื่อไฟล์ว่า welcome.php
 ตัวอย่าง URL ที่ถูกส่งไปโดย GET
ตัวอย่างการส่งข้อมูลแบบ POST
 Form HTML ที่ต้องการส่งข้อมูล
 ไฟล์ PHP ที่รับข้อมูลที่ส่งมาจาก Form จากตัวอย่างข้างบน มีการ action ไปที่ไฟล์ welcome.php ฉะนั้นไฟล์ PHP ที่รับ
ข้อมูลจะต้องชื่อไฟล์ว่า welcome.php
 ตัวอย่าง URL ที่ถูกส่งไปโดย POST

18
โต้ตอบกับแบบฟอร์ม
money.html
yentobaht.php
ขั้นตอนการทางานของตัวอย่างการใช้ FORM

19
PHP
- Condition
- Loop

20
คาสั่งเงื่อนไข
 การเรียนที่ผ่านมาเป็นการเขียนโปรแกรมโดยเรียกใช้คาสั่ง
ประกาศสร้างตัวแปร
กาหนดค่าให้กับตัวแปร
คาสั่งคานวณประเภทต่างๆ
 โปรแกรมจะทางานเรียงลาดับตั้งแต่คาสั่งแรกไปจนถึงคาสั่งสุดท้าย ซึ่งในบางครั้งอาจจะไม่ต้องการให้เป็นเช่นนั้น
 คาสั่งเงื่อนไข มีไว้เพื่อควบคุมทิศทางการทางานของโปรแกรม
เพื่อให้โปรแกรมทางานในแบบที่ต้องการได้
ในทางปฏิบัตินั้นสภาพของปัญหาที่ต้องเขียนโปรแกรมขึ้นมาเพื่อแก้ไขความซับซ้อน ซึ่งคงจะไม่ใช่โปรแกรมที่ทางาน
เรียงกันไปตั้งแต่ต้นจนจบโปรแกรม
Comparison Operators
== Equal $a == $b เป็นจริงเมื่อ $a == $b
!= Not Equal $a != $b เป็นจริงเมื่อ $a != $b
< Less than $a < $b เป็นจริงเมื่อ $a < $b
> Greater than $a > $b เป็นจริงเมื่อ $a > $b
<= Less than or
equal to
$a <= $b เป็นจริงเมื่อ $a <= $b
>= Greater than or
equal to
$a >= $b เป็นจริงเมื่อ $a >= $b
ผลลัพธ์ของการเปรียบเทียบมีแค่ 2 กรณี
คือ true และ false

21
สาหรับค่า true และ false (Boolean) ใน PHP ถ้าใช้คาสั่ง echo เพื่อดู
ผลลัพธ์ PHP จะแสดง
• ตัวเลข 1 เมื่อค่าเป็น true
• ไม่แสดงค่าอะไรเลย ถ้าเป็น false
ถ้าต้องการตรวจสอบค่าจริงๆ ให้ใช้ฟังก์ชัน var_dump( )
ฟังก์ชัน var_dump( )
เป็นฟังก์ชั่นสาหรับแสดงผลข้อมูลของตัวแปรออกมา
โดยจะทาการแสดงชนิดของตัวแปรและค่าตัวแปร

22
Logical Operators
and หรือ && And $a && $b จะให้ค่าเป็นจริงเมื่อ $a และ $b เป็นจริงทั้งคู่
กรณีที่เหลือจะให้ค่าเป็นเท็จ
or หรือ || Or $a || $b จะให้ค่าเป็นเท็จเมื่อ $a หรือ $b เป็นเท็จทั้งคู่
กรณีที่เหลือจะให้ค่าเป็นจริง
xor Exclusion Or $a xor $b จะให้ค่าเป็นเท็จเมื่อ $a และ $b เป็นจริงทั้งคู่หรือ
เป็นเท็จทั้งคู่ กรณีที่เหลือจะให้ค่าเป็นจริง
! Not !$a จะให้ค่าเป็นจริงเมื่อ $a เป็นเท็จ
และจะให้ค่าเป็นเท็จ เมื่อ $a เป็นจริง
Truth table

23
Control Statement For PHP
Control Statement
if( ) else elseif( )
endif( ) switch( ) while( )
do..while( ) for( ) foreach( )
break continue declare( )
return( ) require( ) include( )
require_once( ) include_once( )
คาสั่ง if (แบบหนึ่งทางเลือก)
if (condition) statement;
 condition : เงื่อนไขที่กาหนดขึ้น เพื่อใช้พิจารณาว่าจะทาหรือไม่ตามคาสั่ง โดยเงื่อนไข
อาจจะอยู่ในรูปของนิพจน์การคานวณ และเปรียบเทียบ หรือเป็นค่าของตัวแปรก็ได้ และ
จะต้องเขียนไว้ภายในเครื่องหมาย ( )
 statement : คาสั่งที่จะให้ทางานถ้าผลการตรวจสอบเงื่อนไขออกมาเป็นจริง (true)
if (condition)
{
statement-1;
statement-2;
................................
statement-n;
}
 condition : เงื่อนไขที่กาหนดขึ้น เพื่อใช้พิจารณาว่าจะทาหรือไม่ตามคาสั่ง
 statement-1, statement-2,......, statement-n : ถ้าคาสั่งที่จะให้ทางานมีมากกว่าหนึ่ง
คาสั่งให้เขียนคาสั่งทั้งหมดนั้นไว้ภายในเครื่องหมาย { }
1
2

24
คาสั่ง if-else (แบบสองทางเลือก)
if (condition)
statement;
else
statement;
if (condition)
{statement 1;
statement 2;
..........
} else {
statement 1;
statement 2;
..........
}
1 2

25
ตัวอย่าง 5 [Logic Operator]
True False

26
จงหาผลลัพธ์ของโปรแกรม
ถ้าผู้ใช้ป้อนเปิด main.html
แล้วป้อนค่า
• 10
• 28
• 33
main.html
oddeven.php
even
odd
คาสั่ง if - elseif - else (แบบหลายทางเลือก)
คาสั่ง if - elseif - else จะใช้ในกรณี
ที่มีทางเลือกให้ทางานมากกว่า 2 ทางเลือก
ทางเลือกมีเงื่อนไขต่างกันจึงต้องเรียกใช้คาสั่ง if หลายครั้ง เพื่อกาหนดเงื่อนไขสาหรับแต่ละทางเลือก
if (condition-1)
statement;
elseif (condition-2)
statement;
..........
elseif (condition-n)
statement;
else
statement;

27
จงหาผลลัพธ์ของหน้าเว็บนี้
ถ้าเปลี่ยนค่าของตัวแปร $score เป็น
• 90
• 58
• 30
• -100
คาสั่ง switch-case
คาสั่ง switch-case จะใช้ในกรณีที่มีทางเลือกให้ทางานหลายทางเลือกโดยใช้เงื่อนไขร่วมกัน

28
ตัวอย่าง switch - case
การใช้ break ใน switch-case

29
Switch-case ใน PHP ใช้กับข้อความได้
<?php
$favcolor = "red";
switch ($favcolor) {
case "red” : echo "Your favorite color is red!"; break;
case "blue“ : echo "Your favorite color is blue!"; break;
case "green": echo "Your favorite color is green!"; break;
default :
echo "Your favorite color is neither red, blue, nor green!";
}
?>
ผลลัพธ์ของโปรแกรมคือ
Your favorite color is red!
Switch-case ใน PHP ใช้กับข้อความได้
<?php
switch ($choice){
case 1:
print “Your choice is number ONE.<br>”;
case 2:
print “Your choice is number TWO.<br>”;
case 3:
print “Your choice is number THREE.<br>”;
}
?>
ผลลัพธ์ของโปรแกรมคือ
Your choice is number ONE.
Your choice is number TWO.
Your choice is number THREE.
หากใช้ switch โดยไม่ใส่ break จะให้ผลลัพธ์ที่แตกต่างกัน

30
คาสั่งวนรอบ
คาสั่งวนรอบ (Loop Statement) มีไว้เพื่อควบคุมทิศทางการทางานแบบวนซ้าของโปรแกรม
เหมาะสาหรับการเขียนโปรแกรมที่ต้องการเขียนคาสั่งบางคาสั่งซ้ากัน โดยไม่ต้องพิมพ์คาสั่งนั้นหลายๆ ครั้ง
ใช้การเขียนคาสั่งนั้นๆ เพียงครั้งเดียวและให้มีการวนรอบตามจานวนที่ต้องการ
While Loop
การทางาน while loop นั้นจะทางานซ้า
จนกระทั่งเงื่อนไขเป็นเท็จ เมื่อเงื่อนไขเป็นเท็จแล้ว ก็จะออกจากลูป เพื่อทางานในส่วนของ code อื่นต่อไป
while ( เงื่อนไข ) {
Code ที่ถูกรันซ้า ;
}

31
ตัวอย่าง While Loop
do-while Loop
การทางาน do-while loop นั้นจะต่างจาก while loop
ตรงที่ Code ที่อยู่ในลูปจะถูกทางาน ก่อนที่จะตรวจสอบเงื่อนไข
do
{
Code ที่ถูกรันซ้า ;
}
while ( เงื่อนไข );

32
ตัวอย่าง do-while Loop
คาสั่ง for
ใช้สาหรับการควบคุมทิศทางของโปรแกรมให้ทางานแบบวนรอบ
เช่นเดียวกันกับ while และ do-while
แต่คาสั่ง for มีลักษณะพิเศษกว่าคาสั่งลูปแบบอื่นๆ ตรงที่
คาสั่ง for เหมาะสมกับกรณีที่รู้จานวนแน่นอนแล้วว่าต้องการ
ให้วนลูปทางานกี่รอบ
รูปแบบการเรียกใช้งานคาสั่ง for ต่างจากคาสั่งลูปอื่นๆ ดังนี้
for(expr1; expr2; expr3)
{
statement-1;
…
statement-n;
}
for(expr1; expr2; expr3)
statement;

33
แผนผังการทางานของ for
เปรียบเทียบคาสั่ง while และ for

34
ตัวอย่างการแปลง while เป็น for
$i = 0;
while($i < 10) {
echo “$i <BR>”;
$i++;
}
for( ; ; )
{
echo “$i <BR>”;
}
$i = 0 $i < 10 $i++
ตัวอย่าง For Loop

35
- กล่องรับข้อมูลที่ 1 กำหนดชื่อตัวแปร num1
- กล่องรับข้อมูลที่ 2 กำหนดชื่อตัวแปร num2
ส่งค่ำตัวแปร num1 และ num2 ไปคำนวณยังไฟล์ php1-1.php
รีเซ็ตค่ำในฟอร์ม
Step1: แสดง Form สาหรับรับข้อมูลเก็บไว้ในไฟล์ php1.php
Step2: ไฟล์ php1-1.php
กรณีมีการรับข้อมูล num1=91, num2=8
ทำกำรแสดงข้อควำมตำมภำพ
สำหรับตัวเลขหลังเครื่องหมำย = คือ ผลลัพธ์ที่ได้จำกกำรคำนวณ

1
PHP2 – Functions & Cookies
PHP2
- Function
- Cookie
- Session
อบรมเชิงปฏิบัติการ “การสร้างเว็บไซต์ด้วยภาษา PHP และภาษา SQL”
ทบทวน Condition & Loop
 คาสั่งเงื่อนไข (Condition Statement) มีไว้เพื่อควบคุมทิศทางการทางานของโปรแกรม
เพื่อให้โปรแกรมทางานในแบบที่ต้องการได้
ในทางปฏิบัตินั้นสภาพของปัญหาที่ต้องเขียนโปรแกรมขึ้นมาเพื่อแก้ไขความซับซ้อน ซึ่งคงจะไม่ใช่โปรแกรมที่ทางาน
เรียงกันไปตั้งแต่ต้นจนจบโปรแกรม
คาสั่งวนรอบ (Loop Control) มีไว้เพื่อควบคุมทิศทางการทางานแบบวนซ้าของโปรแกรม
เหมาะสาหรับการเขียนโปรแกรมที่ต้องการเขียนคาสั่งบางคาสั่งซ้ากัน โดยไม่ต้องพิมพ์คาสั่งนั้นหลายๆ ครั้ง
ใช้การเขียนคาสั่งนั้นๆ เพียงครั้งเดียวและให้มีการวนรอบตามจานวนที่ต้องการ

2
ทบทวน Condition
if (condition-1)
statement;
elseif (condition-2)
statement;
..........
elseif (condition-n)
statement;
else
statement;
if......elseif......else
switch......case
ทบทวน Loop
While Loop
do-while Loop
For Loop

3
ฟังก์ชัน (Function)
ในบางครั้ง เราอาจจะต้องการรูปแบบการประมวลผลที่ซ้าๆ กัน จะเป็นการดีกว่า ถ้าเราเขียนโปรแกรม
ในรูปแบบของฟังก์ชัน
<?php
function writeMsg() {
echo "Hello world!";
}
writeMsg();
?>
Function พื้นฐาน
<?php
function familyName($fname) {
echo "$fname Babe.<br>";
}
familyName(“Kim");
familyName("Kai");
familyName(“Bob");
?>
Function แบบมีการรับค่า
การใช้งานฟังก์ชัน (Function)
Function จะถูกเรียกใช้งานโดยการใช้ชื่อฟังก์ชั่นเป็นตัวเรียกใช้
Function สามารถถูกเรียกใช้ตรงไหนก็ได้ใน Code
function functionName( )
{
code ที่ต้องการให้ทางาน;
}

4
Function (2)
<html>
<body>
<?php
function writeName()
{
echo “Asst.Prof.Dr.Pinanta Chatwattana”;
} echo “My name is ”;
writeName();
?>
</body>
</html>
Function แบบมีค่า default
<html>
<body>
<?php
function add($x, $y)
{
$total=$x+$y;
return $total;
} echo “1 + 16 = ”. add(1,16);
?>
</body>
</html>
Function แบบมีคืนกลับ
Function (3)
<?php
function setHeight($minheight = 50)
{
echo "The height is : $minheight
<br>";
}
setHeight(350);
setHeight();
?>
<?php
function sum($x, $y) {
$z = $x + $y;
return $z;
}
echo "5 + 10 = " . sum(5, 10) .
"<br>";
echo "7 + 13 = " . sum(7, 13) .
"<br>";
?>
Function แบบมีค่า default
Function แบบมีคืนกลับ

5
ขอบเขตของตัวแปร
ตัวแปรในภาษา PHP มี 3 ประเภทคือ local, global และ static
<?php
function func($x) {
$z = 0;
$z = $z + $x;
echo $z . “<br>”;
}
func(10);
echo $z;
?>
<?php
$z = 20;
function func($x) {
$z = 0;
$z = $z + $x;
}
func(10);
echo $z;
?>
local
<?php
$z = 20;
function func($x) {
global $z;
$z = $z + $x;
echo $z;
}
func(10);
echo $z;
?>
global
ตัวแปรประเภท static
<?php
function func($x) {
static $z = 0;
$z = $z + $x;
}
func(10);
func(10);
func(10);
?>

6
ฟังก์ชันที่สาคัญสาหรับจัดการกับ String
strlen(ข้อความ) : นับจานวนตัวอักษรในข้อความ
str_word_count(ข้อความ) : นับจานวนคาในข้อความ
strrev(ข้อความ) : กลับข้อความจากหน้าไปหลัง
strpos(ข้อความ , คาที่ค้น) : ค้นหาตาแหน่งเริ่มต้นของคา
str_replace(คาที่ค้น, คาที่จะแทนที่, ข้อความ) : ค้นหาและแทนที่ข้อความ
explode(ตัวแยกคา, ข้อความ) : แตกข้อความตามตัวแยกคาออกมาเป็นอาร์เรย์
strlen(ข้อความ) : นับจานวนตัวอักษรในข้อความ
str_word_count(ข้อความ) : นับจานวนคาในข้อความ
https://www.w3schools.com/php/php_string.asp

7
strrev(ข้อความ) : กลับข้อความจากหน้าไปหลัง
strpos(ข้อความ , คาที่ค้น) : ค้นหาตาแหน่งเริ่มต้นของคา
str_replace(คาที่ค้น, คาที่จะแทนที่, ข้อความ) : ค้นหาและแทนที่ข้อความ

8
explode(ตัวแยกคา, ข้อความ) : แตกข้อความตามตัวแยกคาออกมาเป็น array
http://www.amplysoft.com
include และ require
ในบางครั้งเราต้องการแยกเนื้อหาข้อมูลออกเป็นหลายๆ ไฟล์ หรือต้องการใช้ข้อมูลเดียวกันหลายๆ หน้า สามารถที่
ใช้การ include หรือ require ได้
Hello World
<?php include “footer.php”;
?>
web.php
<hr>
@copyright ..
<hr>
footer.php
Hello World
<hr>
@copyright ..
<hr>
ข้อแตกต่างของ include กับ require คือ
 ถ้าใช้ include แล้วไม่เจอ file จะมี warning ขึ้น แต่หน้าเว็บยังคงทางานต่อไป
 ถ้าใช้ require แล้วไม่เจอ file หน้าเว็บจะ error แล้วหยุดการทางานทันที

9
die( )
บางครั้งเมื่อเขียนโปรแกรม PHP ยาวๆ แล้วโปรแกรม PHP ทางานไม่ถูกต้อง หรือ กรณีพบข้อผิดพลาดระหว่าง
การทางานของโปรแกรม สามารถนาฟังก์ชัน die ( ) มาประยุกต์ใช้ได้
die( ) คือ ให้โปรแกรมหยุดการทางานทันที
<?php
echo "1<BR>";
echo "2<BR>";
die();
echo "3<BR>";
echo "4<BR>";
?>

10
Cookie และ Session
ทั้ง Cookie และ Session เป็นการเก็บค่าข้อมูลเพื่อใช้กับหน้าเว็บทุกหน้า โดยมีข้อแตกต่างกันคือ
Cookie จะเก็บข้อมูลลงบนเครื่องผู้ใช้งาน และข้อมูลจะหายเมื่อมีการเปลี่ยนเครื่องใช้งาน หรือ cookie ที่เก็บไว้
หมดอายุ
Session จะเก็บข้อมูลที่ฝั่ง server และข้อมูลจะหายเมื่อมีการปิด session หรือ session หมดอายุ
การสร้าง Cookie
วิธีการสร้าง Cookie
setcookie(ชื่อตัวแปร, ค่า, เวลาหยุดอายุ, path ที่ cookie ใช้งานได้, domain, secure, httponly);
ข้อมูลที่จาเป็นต้องใส่คือ ชื่อตัวแปร
เวลาหยุดอายุ (วินาที) ถ้าไม่ใส่จะถือว่าอายุจะหมดเมื่อมีการปิดเว็บ browser
path, domain ถ้าไม่ใส่จะเป็น path ปัจจุบัน
ศึกษาข้อมูลเพิ่มเติมได้ที่ http://php.net/manual/en/function.setcookie.php

11
การสร้าง Cookie
setcookie(“username”, “choopan”);
setcookie(“username”, “choopan”, time( ) + (10 * 60));
การใช้งาน cookie
 เมื่อการสร้าง cookie แล้ว ทุกหน้าเว็บที่อยู่ภายใต้ domain และ path ที่กาหนดจะสามารถดึงค่าของ cookie ได้ผ่าน $_COOKIE
 ตัวอย่าง $username = $_COOKIE["username"];
<?php
setcookie("username", "choopan", time()+(1*60));
?>
<a href="2.php">next page</a>
<?php
echo $_COOKIE["username"];
?>
2.php
1 นาที แล้ว refresh

12
การเปลี่ยนค่า และยกเลิก cookie
ถ้าต้องการเปลี่ยนค่าของตัวแปรใน cookie สามารถใช้ setcookie ตัวแปรเดิมด้วยค่าใหม่ได้เลย
setcookie (“ชื่อตัวแปร”, “ค่าใหม่”, ระยะเวลา ...........);
ถ้าต้องการยกเลิกการใช้งาน cookie สาหรับตัวแปรใดๆ ให้ตั้งเวลาติดลบจากปัจจุบันเช่น
setcookie(“ชื่อตัวแปร”, “ ค่า”, time( ) - 3600);
การใช้งาน cookie บางครั้งจะมีปัญหา หรือใช้งานไม่ได้เนื่องจากผู้ใช้อาจจะปิดไม่ยอมรับ cookie จาก option ใน
web browser ของตัวเอง
PHP Session : สร้างและใช้งาน
เป็นตัวแปรที่ใช้ร่วมกันทุกหน้าเว็บ ภายใต้ session ของ
web browser (ตั้งแต่เปิด browser จนปิด browser)
จะเก็บข้อมูลที่ฝั่ง Server
การสร้างและใช้งานตัวแปร session
จะต้องใช้คาสั่ง session_start( ); จะต้องมีการเรียก
ใช้งาน ก่อนมีการ output ข้อมูลหน้าเว็บเสมอ
จากนั้นจะสามารถใช้งานตัวแปร $_SESSION ได้
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<body>
<?php
$_SESSION["favcolor"] = "green";
$_SESSION["favanimal"] = "cat";
?>
</body>
</html>

13
PHP Session : การทาลาย
การทาลาย session นั้น จะใช้
session_unset( ); เพื่อ clear ตัวแปรทุกตัวใน session
session_destroy( ); เพื่อทาลาย session นั้นทิ้ง
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<body>
<?php
// remove all session variables
session_unset();
// destroy the session
session_destroy();
?>
</body>
</html>
PHP Session: isset และ unset
session_unset( ) และ session_destroy( ) เป็นการล้าง หรือ ทาลายข้อมูลของ session ทั้งหมด
ถ้าต้องการล้างค่าของ ตัวแปร บางตัวใน session จะใช้
unset(ชื่อตัวแปร)
เช่น unset($_SESSION[‘name’]);
ถ้าต้องการตรวจสอบว่า มีค่าตัวแปรนี้ใน session หรือไม่จะใช้
isset(ชื่อตัวแปร)
เช่น isset($_SESSION[‘name’]); ผลลัพธ์จะคืนเป็นบูลีน true/false

14
ให้ทาการเขียนเว็บไซต์ โดยสร้าง Form
สร้าง Function ชื่อ sumNum เพื่อคานวณหา
ผลรวมจาก 1 ถึง จานวนที่ได้จากหน้า Form เช่น
รับค่า 5 = 1+2+3+4+5 = 15
สร้าง Function ชื่อ avgNum เพื่อคานวณหา
ค่าเฉลี่ยของตัวเลขที่รับมาจาก 1 ถึง จานวนที่ได้
จากหน้า Form เช่น รับค่า 5 = 1+2+3+4+5 =
15/5 = 3
แสดงผลลัพธ์ที่ได้ออกทางหน้าเว็บไซต์

1
Bootstrap
BootStrap
Front-end framework
ขอบคุณข้อมูลจาก รศ.ดร.ชูพันธ์ รัตนโภคา เอกสารประกอบการสอน Web Programming and Web Database
อบรมเชิงปฏิบัติการ หัวข้อการสร้างเว็บไซต์ด้วยภาษา PHP และภาษา SQL
ทบทวนเกี่ยวกับ front-end, back-end
 Front-end หมายถึงด้านหน้า เช่น CSS, javascript, jQuery ที่จัดการกับข้อมูลหน้าเว็บที่ web browser เอง
Front-end Framework คือการนาเทคโนโลยีต่างๆ ที่จัดการกับหน้าเว็บมารวมกัน เช่น Bootstrap ที่จะเรียนกันใน
คาบนี้
 Back-end หมายถึงด้านหลัง เป็นการประมวลผลที่ฝั่งของ Server เช่น PHP, ASP, Ruby เป็นต้น
Back-end Framework คือการนาเทคโนโลยีที่จัดการประมวลผลที่ฝั่ง Server มาทาให้เป็นระเบียบมากขึ้น สาหรับ
PHP เช่น CodeIgniter, Yii, Phalcon, Laravel เป็นต้น ส่วนใหญ่จะอยู่ในรูปแบบ MVC (Model View Controller)
Client
(Web Browser)
Server
(Web Server)
HTTP Request
HTTP Reply
(HTML, ภาพ, etc)

2
Bootstrap
Bootstrap
 Bootstrap เป็น HTML, CSS, JS framework ที่ได้รับความนิยมมากสาหรับการสร้างเว็บไซต์ในรูปแบบ
responsive
 Bootstrap เป็น front-end framework ที่ฟรี และสามารถทาให้การพัฒนาเว็บรวดเร็วและง่ายขึ้น
 กลุ่มเล็กๆ ในทีมงานของ Twitter เป็นผู้สร้าง
 Download ได้ที่ http://getbootstrap.com
 การใช้งาน Bootstrap สามารถแตกไฟล์ที่ download มาใช้งานโดยตรง หรือสามารถอ้างอิงผ่าน CDN ได้ดังนี้

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
เริ่มต้นการใช้งานไลบรารี Bootstrap
1. จะต้องใช้กับ HTML 5 เพราะฉะนั้นจะต้องมี DOCTYPE เสมอ
2. Bootstrap v.3 ได้ถูกพัฒนามาเพื่อให้ทางานได้เหมาะสมกับอุปกรณ์พกพา ดังนั้นจึงต้องใส่ข้อมูลต่อไปนี้ใน
<meta> ด้วย
3. Container ใน Bootstrap มี 2 คลาสให้ใช้คือ
.container ที่เป็นลักษณะ fixed width container
.container-fluid ที่เป็นลักษณะ full width container

3
Bootstrap
ตัวอย่างโครงสร้างของ Bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.
min.css">
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
Bootstrap Grid System
 การออกแบบหน้าจอด้วย Bootstrap จะเป็นระบบตารางซึ่งมีมากสุด 12 คอลัมน์
 ใน Bootstrap รูปแบบตารางจะมีทั้งหมด 4 Classes
xs (สาหรับโทรศัพท์)
sm (สาหรับ tablet)
md (สาหรับเครื่องคอมพิวเตอร์ตั้งโต๊ะ)
lg (สาหรับเครื่องคอมพิวเตอร์ตั้งโต๊ะ จอขนาดใหญ่)

4
Bootstrap
การใช้งานระบบ Grid
<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
</div>
<div class="row">
...
</div>
 แต่ละแถวจะต้องคลุมด้วย
 <div class=“row”> .............. </div>
 col-*-*
 * ตัวแรกแทนคลาสของ grid
 * ตัวที่ 2 แทนขนาดของ grid (รวมกันในแถวจะต้องไม่เกิน 12
 การใช้คลาสของ Grid จะเริ่มตั้งแต่ขนาดที่ระบุไปจนถึงขนาดที่ใหญ่ที่สุด
การใช้งานระบบ Grid
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-4" style="background-color:#FFAAAA;">1</div>
<div class="col-sm-4" style="background-color:#AAFFAA;">2</div>
<div class="col-sm-4" style="background-color:#AAAAFF;">3</div>
</div>
</div>
</body>
</html>

5
Bootstrap
การข้าม Grid (offset)
 <div class = “col-xx-offset-x col-xx-x>
หมายถึงให้ grid นี้มีการขนาด xx และมีช่องว่างนาหน้าทั้งหมด x grid
<body>
<div class="row">
<div class="col-xs-offset-4 col-xs-3" style="background-color:red">1</div>
<div class="col-xs-offset-3 col-xs-2" style="background-color:blue">2</div>
</div>
</div>
</body>
ข้อแตกต่างระหว่าง Bootstrap และค่าปกติ
<h1>Hello <small>world</small></h1>
<p>This is <mark>mark</mark></p>
<p>This is <abbr title="Full name">name</abbr></p>
<p>This is <code>code</code></p>
<p>This is <kbd>ctrl + c</kbd></p>
<p style="color: blue;">This is blue text.</p>
<h1>Hello <small>world</small></h1>
<p>This is <mark>mark</mark></p>
<p>This is <abbr title="Full name">name</abbr></p>
<p>This is <code>code</code></p>
<p>This is <kbd>ctrl + c</kbd></p>
<p class="text-primary">This is blue text.</p>
</div>

เอกสารประกอบการอบรมเชิงปฎิบัติการ การสร้างเว็บไซต์ด้วยภาษา PHP และ ภาษา SQL

เอกสารประกอบการอบรมเชิงปฎิบัติการ การสร้างเว็บไซต์ด้วยภาษา PHP และ ภาษา SQL

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a เอกสารประกอบการอบรมเชิงปฎิบัติการ การสร้างเว็บไซต์ด้วยภาษา PHP และ ภาษา SQL

Semelhante a เอกสารประกอบการอบรมเชิงปฎิบัติการ การสร้างเว็บไซต์ด้วยภาษา PHP และ ภาษา SQL (20)

Mais de Phranakornsoft

Mais de Phranakornsoft (6)

เอกสารประกอบการอบรมเชิงปฎิบัติการ การสร้างเว็บไซต์ด้วยภาษา PHP และ ภาษา SQL