บทที่ 5 HTML & PHP - wathinee . reru . ac . th

Transcript บทที่ 5 HTML & PHP - wathinee . reru . ac . th

HTML & PHP
Web Technology
And Basic Web Development
1
HTML Forms and Input
้
่ า่
คือ Tag ใน HTML ทีส
่ ามารถสร ้างขึน
้ มาเพือ
่ ให ้ผู ้ใชสามารถใส
ค
่
Input ต่าง ๆ ได ้ ซงึ่ ประกอบไปด ้วย input element ต่าง ๆ เชน
text fields, textarea fields, drop-down menus, radio buttons,
checkboxes, etc.
รูปแบบของ HTML Form
<form>
<input>
<input>
input elements
.
.
</form>
Input : Text Field
• <input type="text" name=“………" />
<html><body>
<form>
First name:
<input type="text" name="firstname" />
<br />
Last name:
<input type="text" name="lastname" />
</form>
</body></html>
Input : Text Field (2)
Input : Radio Buttons
• <input type=“radio” name=“...” value=“…“>
<form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female">
Female
</form>
Input : CheckBoxes
• <input type=“checkbox” name=“...” value=“…”>
<form>
bike: <input type="checkbox" name="vehicle" value="Bike">
<br>
car: <input type="checkbox" name="vehicle" value="Car">
<br>
plane: <input type="checkbox" name="vehicle“ value=“Plane">
</form>
Input : DROP-DOWN menu
การสง่ ผ่านค่าใน FORM และ Submit Button
• <form name=“….” action=“…” method=“…”>
• <input type=“submit” value=“…”>
<form name=“survey” action=“survey.html” method=“get”>
Username : <input type=“text” name=“username”>
<br>
Password : <input type = “password” name=“passwd”>
<br>
<input type=“submit” value=“Login”>
</form>
การสง่ ผ่านค่าใน FORM และ Submit Button (2)
<html>
<body>
……………….
……………….
survey.html
PHP
• PHP มาจาก PHP : Hypertext Preprocessor
่ เดียวกับ ASP
• ทางานทีฝ
่ ั่ งของ server เชน
• สามารถทางานร่วมกับระบบฐานข ้อมูลได ้หลายชนิด (MySQL,
Informix, Oracle, Sybase, ..etc)
• PHP เป็ น open source
• PHP ฟรี
• PHP สามารถทางานได ้ในหลาย OS (Windows, Linux, Unix,
etc..)
• Web server เกือบทุกเจ ้ารองรับ PHP (IIS, Apache)
• โดยปกติจะเป็ นแฟ้ มข ้อมูลทีอ
่ ยูใ่ นรูป .php , .php3 หรือ
.phtml
ก่อนจะเริม
่ เขียน PHP
*** ต้องทำกำรติดตัง้ โปรแกรม PHP ก่อน ***
AppServ
• ในกำรเรียนกำรสอนต่อไป เรำจะใช้ AppServ ซึง่ ไปกำรรวม
software หลำยอย่ำงเข้ำด้วยกัน เพือ
่ เป็ น package ทีง่ ำ่ ยในกำร
ติดตัง้ และ ใช้งำน
• Website: http://www.appservnetwork.com
• ในโปรแกรม AppServ (AppServ 2.5.10) จะประกอบไปด้วย
– Apache 2.2.8 : เป็ นโปรแกรม web server
– PHP 5.2.6 : module PHP ทีท
่ ำให้ web server สำมำรถใช้
งำนภำษำ PHP ได้
– MySQL 5.0.51b : ระบบฐำนข้อมูล mySQL
– phpMyAdmin-2.10.3 : เป็ น web page ทีช
่ ว่ ยในกำรติดต่อกำร
ระบบฐำนข้อมูล mySQL ทำให้ทำงำนกับระบบฐำนข้อมูล
้
mySQL ได้งำ่ ยขึน
เริม
่ ต ้นกับ PHP
• Syntax ของ PHP จะอยูใ่ นรูป
<?php
โปรแกรม PHP
หรือ <?
โปรแกรม PHP
ั่ echo
• ทดลองง่ายๆ ก่อนกับฟั งค์ชน
?>
?>
<html>
<body>
<? echo “Hello World”; ?>
</body>
</html>
้ อนภาษา C , Java คือ // และ
• Comment ใน PHP ใชเหมื
/* */
<html>
<body>
<? echo “Hello World”;
?>
</body>
</html>
PHP
HTML
<html>
<body>
Hello World
</body>
</html>
การประกาศตัวแปรใน PHP
ั ลักษณ์ $ นาหน ้าชอ
ื่ ตัวแปร เชน
่
• ในภาษา PHP จะใชส้ ญ
– $myVariable = 5;
– $txt = “Hello World”;
• PHP เป็ นภาษา script ทีไ่ ม่สนใจประเภทของข ้อมูลจึงไม่
จาเป็ นต ้องประกาศประเภทของข ้อมูล (int, string,..) ให ้กับตัวแปร
• ตัวอย่าง :
<?
$txt = “Hello World”;
echo $txt;
?>
PHP Operator
ื่ มต่อข ้อความ จะเชอ
ื่ มต่อด ้วยเครือ
• การเชอ
่ งหมายจุด “ . “
<?
$txt1=“Hello World”;
$txt2 =“123”;
echo $txt1 . “
“ . $txt2;
?>
้ อ
• การทา arithmetic operation ก็ใชเครื
่ งหมายเหมือนภาษา C,
java
+, - , * , / , %, ++, --, +=, -= , == , != , <=
PHP Condition : If-else
 If-else ลักษณะการทางานเหมือนกับภาษา C, Java
if (เงือ
่ นไข ) {
คาสงั่ ถ ้าเป็ นจริงที่ 1;
คาสงั่ ถ ้าเป็ นจริงที่ 2; …
คาสงั่ ถ ้าเป็ นจริงที่ N;
} else {
คาสงั่ ถ ้าเป็ นเท็จ ที1
่ ;
คาสงั่ ถ ้าเป็ นเท็จ ที2
่ ; …
คาสงั่ ถ ้าเป็ นเท็จ ทีN
่ ;
}
ตัวอย่าง PHP Condition : If-else
<?
$score = 75;
if($score >= 80)
echo “A”;
else if($score >= 70)
echo “B”;
else if($score >= 60)
echo “C”;
else if($score >= 50)
echo “D”;
else
echo “F”;
?>
PHP Condition : Switch
• switch (n)
{
case เงือ
่ นไขที1
่ :
คาสงั่ ถ ้า n = เงือ
่ นไขที่ 1
break;
case เงือ
่ นไขที2
่ :
คาสงั่ ถ ้า n = เงือ
่ นไขที่ 2
break;
default:
คาสงั่ ถ ้า n ไม่ตรงกับเงือ
่ นไขที่ 1 และ 2
}
ตัวอย่าง PHP Condition : Switch
• <?php
$x = 4;
switch ($x)
{
case 1:
echo "Number 1";
break;
case 2:
echo "Number 2";
break;
case 3:
echo "Number 3";
break;
default:
echo "No number between 1 and 3";
}
?>
PHP Arrays
ื่ ตัวแปร
• การประกาศตัวแปรแบบข ้อมูลชุด ซงึ่ จะมีหลาย ๆ ค่าในชอ
เดียว
• ประกอบไปด ้วยarray ทัง้ หมด 3 ชนิด
– Numeric array – Array ทีใ่ ช ้ index เป็ นตัวเลข
– Associative array - Array ทีใ่ ช ้ index เป็ นค่าต่าง ๆ
– Multidimensional array - Array ทีป
่ ระกอบไปด ้วย
้
Array ซอนกั
น
Numeric array
• ประกาศได ้ 2 แบบ คือ
– $cars=array("Saab","Volvo","BMW","Toyota");
– $cars[0]="Saab";
$cars[1]="Volvo";
$cars[2]="BMW";
$cars[3]="Toyota";
ตัวอย่าง
<?php
$cars[0]="Saab";
$cars[1]="Volvo";
$cars[2]="BMW";
$cars[3]="Toyota";
echo $cars[0] . " and " . $cars[1] . "
are Swedish cars.";
?>
Associative array
• ประกาศได ้ 2 แบบ คือ
– $ages = array("Peter"=>32, "Quagmire"=>30,
"Joe"=>34);
– $ages['Peter'] = "32";
$ages['Quagmire'] = "30";
$ages['Joe'] = "34";
ตัวอย่าง
<?php
$ages['Peter'] = "32";
$ages['Quagmire'] = "30";
$ages['Joe'] = "34";
echo "Peter is " . $ages['Peter'] .
" years old.";
?>
HTML + PHP
่ จากตัวอย่าง
• PHP จะสามารถรับค่าจาก form ของ HTML เชน
คิดเกรด เราจะทาหน ้า web page เพือ
่ รับค่า score แล ้วสง่ ค่า
ไปให ้ php
PHP
<html>
<form action=“a.php" method="get">
score : <input type="text" name="score">
<input type="submit" value="submit">
</form>
</html>
การรับค่าใน PHP
• ใน HTML FORM จะมี method อยู่ 2 แบบ คือ get และ post
ื่ $_GET
• การดึงค่าจาก method=“get” จะดึงค่าจากตัวแปรทีช
่ อ
ื่
• การดึงค่าจาก method=“post” จะดึงค่าจากตัวแปรทีช
่ อ
$_POST
• ทัง้ $_GET และ $_POST เป็ นตัวแปรชนิด array
<html>
<form action=“a.php" method="get">
score : <input type="text" name="score“>
<input type="submit" value="submit">
</form>
</html>
grade.html
<html>
<?
$score = $_GET[“score”];
if($score >= 80)
echo “A”;
else if($score >= 70)
echo “B”;
else if($score >= 60)
echo “C”;
else if($score >= 50)
echo “D”;
else
echo “F”;
?>
</html>
GET และ POST
• Method ในระบบ form คือ GET และ POST มีความแตกต่างกันดังนี้
• GET
– ค่าทีเ่ ราใสเ่ ข ้าไปจะถูกแสดงใน URL ของหน ้าใน action
– ทาให ้มีความไม่ปลอดภัยถ ้าค่าทีจ
่ ะสง่ อีกหน ้าเป็ น password
เพราะจะถูกแสดงใน URL
– แต่จะทาให ้สามารถทา bookmark ได ้
• POST
– ค่าทีใ่ สใ่ น form จะไม่ถก
ู แสดงใน URL ของหน ้าใน action
– ทาให ้มีความปลอดภัยในข ้อมูลทีส
่ ง่ ระหว่างหน ้าเว็บ
– แต่จะไม่สามารถทา bookmark ได ้

บทที่ 5 HTML & PHP - wathinee . reru . ac . th

Transcript บทที่ 5 HTML & PHP - wathinee . reru . ac . th

Directory