สำหรับใช้ประกอบในการสอนรายวิชา คอมพิวเตอร์เพื่อการจัดการทางการศึกษา

1. การรับส่งข้อมูลใน PHP
อ.ดร.แจ่มจันทร์ ศรีอรุณรัศมี

2. คาสั่งต่างๆ ที่ควรรู้ HTML&PHP
คำสั่ง ควำมหมำย
<a href=“URL”> text </a> คำสั่งทำ Link
<form></form> กำรสร้ำงฟอร์มสำหรับรับส่งข้อมูล
Method รูปแบบในกำรส่งข้อมูล
Action กำรกำหนดชื่อไฟล์ที่จะรับข้อมูลต่ำงๆ
ไปประมวลผล
Password เป็นชนิดของเครื่องมือที่ไม่ต้องกำร
เปิดเผยข้อมูล
Input คำสั่งในกำรนำเข้ำข้อมูล

3. คาสั่งต่างๆ ที่ใช้ในการสร้าง Form
คำสั่ง ควำมหมำย
Name ชื่อเครื่องมือที่ต้องกำรส่งไปทำงำน
Type ประเภทของเครื่องมือ เช่น text filed จะมี
type=“text”
Size ขนำดควำมกว้ำงของ text field
Maxlength จำนวนตัวอักษรสูงสุดที่จะกรอกลงไปในเครื่องมือ
Value กำรกำหนดค่ำเริ่มต้นที่จะแสดงในเครื่องมือ
Text Field เป็นเครื่องมือที่ใช้ในการรับข้อมูล ประเภทพิมพ์แบบตอบสั้นๆ
เช่น ชื่อ e-mail Password

4. ตัวอย่าง : Text field
<input name="box" id="box" type="text" size="20" maxlength="15">

5. <input name="box" id="box" type="text" size="20" maxlength="15">
<br><br>
<input name="password" type="password">
1
2

6. คาสั่งต่างๆ ที่ใช้ในการสร้าง Form
Hidden Field เป็นเครื่องมือที่ใช้สาหรับส่งข้อมูลที่ไม่ต้องการแสดงผล
บนหน้าจอจะไปประมวลผลโดยจะซ่อนหรือแนบข้อมูลนั้นไปพร้อมๆ
กับข้อมูลต่างๆ ที่ได้รับจากผู้ใช้บริการ เพื่อนาไปใช้งานในส่วนอื่นต่อไป
Text Area เป็นเครื่องมือที่ใช้สาหรับรับข้อมูล ประเภทพิมพ์ตอบ
แบบยาว เช่น ที่อยู่ ข้อเสนอแนะ เป็นต้น

7. ตัวอย่าง : Text Area
<textarea name=“ชื่อเครื่องมือ” cols=“จานวนคอลัมน์” rows=“จานวนแถว”></textarea>

8. คาสั่งต่างๆ ที่ใช้ในการสร้าง Form
Check Box เป็นเครื่องมือที่ใช้สาหรับรับข้อมูลประเภทเลือกตอบ
ที่อนุญาตให้เลือกตอบได้มากกว่า 1 คาตอบ เช่น การเลือกงานอดิเรก
การเลือกสิ่งที่สนใจ เป็นต้น
<input type =“checkbox” name=“ชื่อเครื่องมือ” value=“ค่าที่ถูกส่ง”/>

9. ตัวอย่าง : Check Box
what is your hobby?<br>
=====================<br>
<input type="checkbox" name="ch1" value="com">
computer game <br>
<input type="checkbox" name="ch2" value="book">
reading<br>
<input type="checkbox" name="ch3" value="sport">
sport<br>

10. คาสั่งต่างๆ ที่ใช้ในการสร้าง Form
Radio Button เป็นเครื่องมือที่ใช้สาหรับรับข้อมูลประเภทเลือกตอบ
ที่อนุญาตให้เลือกตอบได้เพียง 1 คาตอบ เช่น เพศ ชั้นปี อายุ เป็นต้น
<input type =“radio” name=“ชื่อเครื่องมือ” value=“ค่าที่ถูกส่ง”/>

11. ตัวอย่าง : Radio Button
what is your faculty?<br>
=====================<br>
<input type="radio" name="ch1" value="ed">
Education <br>
<input type="radio" name="ch2" value="sci">
Science<br>
<input type="radio" name="ch3" value="eng">
Engineering<br>

12. คาสั่งต่างๆ ที่ใช้ในการสร้าง Form
List / Menu เป็นเครื่องมือที่ใช้สาหรับรับข้อมูล ในกรณีที่มีคาตอบ
ให้เลือกตอบเป็นจานวนมาก เพื่อประหยัดพื้นที่ในหน้างาน
เช่น ประเทศ จังหวัด อาชีพ เป็นต้น
<select name =“ชื่อเครื่องมือ”>
<option value= “ค่าที่ส่ง”> ข้อความที่แสดง </option>
</select>
รูปแบบการใช้งาน
Menu ใช้สาหรับการแสดงตัวเลือกครั้งละ 1 บรรทัด
List ใช้สาหรับการแสดงตัวเลือกครั้งละมากกว่า 1 บรรทัด
ซึ่งสามารถปรับจานวนบรรทัดได้

13. ตัวอย่าง : List / Menu
<select name ="list">
<option value="BKK">Bangkok</option>
<option
value="CMI">Chaiangmai</option>
<option value="TRA">Trang</option>
<option value="PYA">Phayan</option>
</select>

14. คาสั่งต่างๆ ที่ใช้ในการสร้าง Form
File Field เป็นเครื่องมือที่ใช้สาหรับให้เลือกอัพโหลดไฟล์
จากเครื่องตนเองขึ้นไปบนเว็บ
<input type="file" name=“ชื่อเครื่องมือ"/>

15. ตัวอย่าง : File Field
<input type="file" name="f1"/>
<input type="text" name="box" size="20"
maxlength="15">
<input type="file" name="f1"/>

16. คาสั่งต่างๆ ที่ใช้ในการสร้าง Form
Button เป็นปุ่มที่โปรแกรมเตรียมไว้ให้สาหรับการ Submit
หรือการ Reset ฟอร์ม
<input type="button" value="Submit" onclick="1">

17. ตัวอย่าง : Button
<input type="button"
value="Submit" onclick="1">

18. การสร้าง Form
เพื่อรับส่งข้อมูล

19. การสร้างฟอร์มเพื่อรับส่งข้อมูล
Form คือ องค์ประกอบหนึ่งของเว็บไซต์ ที่ใช้ในการรับข้อมูลจากผู้ใช้บริการ และส่งไป
ประมวลผลกับ Server

20. การส่งข้อมูลไปยัง Server
การส่งข้อมูลจาก Browser ไปทางานที่ Server มีอยู่
2 วิธี
1) การส่งข้อมูลแบบ POST
เป็นการส่งข้อมูลโดยใช้ฟอร์มในการส่งค่าที่ได้
จากผู้ใช้บริการ ผ่านเครื่องมือต่างๆ เพื่อไปทางาน
ต่อยัง Server

21. การส่งข้อมูลไปยัง Server
1) การส่งข้อมูลแบบ POST
ตัวอย่าง
คลิกปุ่ม form (EditPlus) / DW
<form name= "form1" method="post" action="post2.php">
username = <input type= "text" name="username"><br><br>
password = <input type= "password" name= "password"><br>
<input type = "submit" name = "Submit" value ="Submit">
</form>

22. ผลลัพธ์

23. การรับข้อมูลแบบ POST
<? PHP
echo "username =>".$_POST["username"];
echo "<br>";
echo "password =>".$_POST["password"];
?>

24. คุณสมบัติของการส่งข้อมูลแบบ POST
• มีการป้ องกันข้อมูลที่ส่งไป โดยจะไม่มีการแสดงค่านั้น
ออกมาให้เห็นทาง address bar
• สามารถส่งข้อมูลได้เป็นจานวนมากถึง 64 kbyte จึงนิยม
ใช้กับการรับส่งข้อมูลที่มีจานวนมาก เช่น ข้อมุลในการ
สมัครสมาชิก

25. การส่งข้อมูลไปยัง Server
2) การส่งข้อมูลแบบ GET
เป็นการส่งข้อมูลผ่านทาง address bar โดยข้อมูลที่ต้องการนั้นต่อท้ายชื่อ
ไฟล์ที่จะรับข้อมูล เพื่อนาไปใช้งานต่อไป
ส่งเพียงค่ำเดียว
Filename.php?variable=value
ส่งมำกกว่ำ 1 ค่ำ
Filename.php?variable=1&variable=value1&…. variable=valueN

26. การส่งข้อมูลไปยัง Server
2) การส่งข้อมูลแบบ GET
ตัวอย่าง
<a href="get2.php? A=10&B=20">Link</a>

27. การส่งข้อมูลไปยัง Server
การรับข้อมูลแบบ GET
ตัวอย่าง
<? php
echo "A =>".$_GET['A'];
echo "<br>";
echo "B =>".$_GET['B'];
?>

28. คุณสมบัติของการส่งข้อมูลแบบ GET
• สามารถส่งข้อมูลได้เร็วกว่าแบบ POST
• สามารถส่งข้อมูลผ่านได้ทั้งทางลิงค์และฟอร์ม โดย
การกาหนด method=“GET”
• สามารถส่งข้อมูลได้เป็นจานวนสูงสุดเพียง 256
bytes จึงนิยมใช้กับการส่งข้อมูลสาคัญ เช่น ID
หรือ Key ที่จะนาไปใช้งานต่อ เช่น การส่ง ID เพื่อ
ไปค้นหาข้อมูลรายละเอียดจากฐานข้อมูลขึ้นมาใช้
งาน

29. ตัวอย่ำงกำรสร้ำงฟอร์มรับส่งข้อมูล
<form method="post" action="receive.php">
<table width="450" border="1" cellpadding="0"
cellspacing="1" bordercolor="#999999">
<tr align="center">
<td colspan="2"
bgcolor="#D8D8D8"><strong> FORM </strong></td>
</tr>
<tr>
<td width="191" bgcolor="EEEEEE" ><strong>
Text </strong></td>
<td width= "250" bgcolor="#F7F7F7">
<input type="text" name="txt" size="25"
maxlength="5" value="hello">
</td>
</tr>
<tr>
<td bgcolor="EEEEEE" ><strong>Password
</strong></td>
<td bgcolor="#F7F7F7">
<input type="password" name="pwd">
</td>
</form>
<? PHP
echo $_POST['txt'];
<br>
echo $_POST['pwd'];
?>
ฟอร์มส่งข้อมูล ฟอร์มรับข้อมูล

30. การบ้าน (งานเดี่ยว สุดท้าย)
ให้นิสิตแต่ละคนออกแบบฟอร์มของตนเอง
โดยเขียนฟอร์มรับและส่ง คือ ไฟล์ส่ง 1 ไฟล์ และไฟล์สำหรับรับ 1 ไฟล์
ตกแต่งตำมควำมสวยงำม
ส่งใน Classstart ในแบบฝึกหัด กำรส่งงำนฟอร์มรับ-ส่งข้อมูล
(ส่งภำยในวันที่ 16 เมษำยน 2558)
ในรำยละเอียดให้แจ้งว่ำฟอร์มนี้เกี่ยวกับอะไรค่ะ
ส่งไฟล์ capture หน้ำจอทั้งสองแนบด้วยค่ะ
เงื่อนไขกำรให้คะแนน มีครบองค์ประกอบของรูปแบบเครื่องมือกำรสร้ำงฟอร์ม

31. Create an Office Mix
Let’s Get Started…

32. See Mix
in Action!
https://mix.office.com/watch/1otxpj7hz6kbx
(Copy the link and paste into your browser.
Or, when in a slide show, click the photo.)