Embed Size (px)
DESCRIPTION
Introduction to HTML, PHP 353352 – Special Problem (Database). Choopan Rattanapoka. HTML. H yper T ext M arkup L anguage เป็นภาษาที่ถูกออกแบบมาเพื่อพัฒนา เวปเพจ หรือ ข้อมูลต่างๆ ที่สามารถเรียกดูผ่าน web browser นามสกุลของไฟล์ทั่วไปจะใช้ . htm หรือ .html - PowerPoint PPT Presentation
Citation preview
Introduction to HTML, PHP353352 – Special Problem (Database)
Choopan Rattanapoka
HTML HyperText Markup Language
เป็�นภาษาที่ถู�กออกแบบมาเพื่�อพื่�ฒนา เวป็เพื่จ หรื�อ ข้�อม�ลต่�างๆ ที่สามารืถูเรืยกดู�ผ่�าน web browser
นามสก%ลข้องไฟล(ที่�วไป็จะใช้� .htm หรื�อ .html โครืงสรื�างพื่�.นฐานข้องภาษา HTML จะป็รืะกอบดู�วย
<HTML> <HEAD> <TITLE> Hello </TITLE> </HEAD> <BODY> What’s up </BODY> </HTML>
รหั�สส�ใน HTML เรืาสามารืถูก0าหนดูสข้องฉากพื่�.นหล�ง รืวมถู2ง สข้องต่�วอ�กษรื
แล�ว link ต่�างๆ ใน HTML ไดู� ซึ่2งรืห�สสจะอย��ในรื�ป็ข้องเลข้ ฐาน 16 (RGB สละ 8 bits) “แล�วข้2.นต่�นดู�วยเครื�องหมาย
#” ตั�วอย่�าง
#000000 (Red = 0, Green = 0, Blue = 0) ค�อ สดู0า #FFFFFF (Red = FF, Green = FF, Blue = FF) ค�อ สข้าว
#FF0000 (Red = FF, Green = 0, Blue = 0) ค�อ สแดูง
#00FF00 สเข้ยว #0000FF สน0.าเง4น
การืเป็ลยนสพื่�.นหล�ง และ สข้องต่�วอ�กษรื เป็ลยนสพื่�.นหล�ง จะส�งใน tag ข้อง BODY
เช้�น จะเป็ลยนพื่�.นหล�งให�เป็�น สแดูง <BODY BGCOLOR=“#FF0000”>
เป็ลยนสต่�วอ�กษรื จะส�งใน tag ข้อง BODY เช้�นก�น เช้�น จะเป็ลยนต่�วอ�กษรืให�เป็�นสน0.าเง4น <BODY TEXT=“#0000FF”>
เป็ลยนสต่�วอ�กษรืเฉพื่าะที่ <FONT COLOR=“#00FF00> Hello
</FONT>
Example 1
การืจ�ดูรื�ป็แบบต่�วอ�กษรื <h1>…</h1>, <h2>…</h2>,
<h3>…</h3> เป็�นการืก0าหนดูต่�วอ�กษรืให�เป็�น header
<center> </center> เพื่�อที่0าให�แสดูงค�าที่ต่0าแหน�งกลางหน�าจอHello normal
<h1>Hello h1</h1>
<h2>Hello h2</h2>
<h3>Hello h3</h3>
<center><h2>Hello center</h2></center>
รืายละเอยดูเพื่4มเต่4ม ควรืไป็ศึ2กษาเอง ศึ2กษาเองไดู�จาก web site :
http://www.w3schools.com/htmL/html_intro.asp
ต่�วอย�างค0าส�งที่ควรืรื� �จ�กเช้�น <a href = “………”> ….. </a> ที่ใช้�ในการืสรื�าง link <img src = “………..”> ที่ใช้�ในการืแสดูงรื�ป็ภาพื่ <br> ใช้�ในการืข้2.นบรืรืที่�ดูใหม� <hr> ข้ดูเส�นข้�.นบรืรืที่�ดู <table> ในการืสรื�างต่ารืาง
HTML FORM นอกจาก web page จะแสดูงข้�อความต่�างๆ แล�ว เรืาย�งเรืา
ให� web page รื�บข้�อม�ลจากผ่��ใช้�ไดู�อกดู�วย ดู�วยการืใช้� tag แบบฟอรื(ม (FORM)
<FORM> <INPUT> <INPUT></FORM>
Input : Text Field <input type=“text” name=“….”> ต่�วอย�าง : <html> <head><title>Hello</title></header> <body> <form> Firstname : <input type=“text” name=“firstname”> <br> Lastname : <input type=“text” name=“lastname”> </form> </body></html>
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>
การืส�งผ่�านค�าใน FORM <form name=“….” action=“…”
method=“…”> <input type=“submit” value=“…”>
<form name=“survey” action=“survey.php” method=“get”> Username : <input type=“text” name=“username”> <br> Password : <input type = “password” name=“passwd”> <br> <input type=“submit” value=“Login”></form>
Exercise 1
จงเขี�ย่นหัน�า web page ดั�งน�� :• ม title ว�า Exercise 1• พื่�.นหล�งมส #AAEEEE• ค0าว�า แบบสอบถูาม มข้นาดู<h1>• ให�ต่�วแป็รืที่เก6บค�าข้องช้�อเล�น
มช้�อว�า nickname•ให�ต่�วแป็รืที่เก6บค�าข้องเพื่ศึช้�อว�า sex
• มค�า male ถู�าเป็�นช้าย• มค�า female ถู�าเป็�นหญิ4ง
•ให�ต่�วแป็รืที่เก6บค�าข้องงานอดู4เรืก ช้�อ hobby
• มค�า read -> อ�านหน�งส�อ• มค�า game -> เล�นเกมส(• มค�า sleep -> นอน• มค�า drunk -> เมา
PHP PHP มาจาก PHP : Hypertext Preprocessor ที่0างานที่ฝั่9 งข้อง server เช้�นเดูยวก�บ ASP สามารืถูที่0างานรื�วมก�บรืะบบฐานข้�อม�ลไดู�หลายช้น4ดู
(MySQL, Informix, Oracle, Sybase, ..etc) PHP เป็�น open source PHP ฟรื PHP สามารืถูที่0างานไดู�ในหลาย OS (Windows, Linux,
Unix, etc..) Web server เก�อบที่%กเจ�ารืองรื�บ PHP (IIS, Apache) โดูยป็กต่4จะเป็�นแฟ:มข้�อม�ลที่อย��ในรื�ป็ .php , .php3
หรื�อ .phtml
เรื4มต่�นก�บ PHP Syntax ข้อง PHP จะอย��ในรื�ป็ <?php โป็รืแกรืม PHP ?> หรื�อ <? โป็รืแกรืม PHP ?> ที่ดูลองง�ายๆ ก�อนก�บฟ9งค(ช้� น echo
Comment ใน PHP ใช้�เหม�อนภาษา C , Java
<html><body><? echo “Hello World”; ?></body></html>
<html><body><? echo “Hello World”; ?></body></html>
<html><body>Hello World</body></html>
PHP
HTML
การืป็รืะกาศึต่�วแป็รืใน PHP ในภาษา PHP จะใช้�ส�ญิล�กษณ์( $ น0าหน�าช้�อต่�วแป็รื เช้�น
$myVariable = 5; $txt = “Hello World”;
PHP เป็�นภาษา script ที่ไม�สนใจป็รืะเภที่ข้องข้�อม�ลจ2งไม� จ0าเป็�นต่�องป็รืะกาศึป็รืะเภที่ข้องข้�อม�ล (int, string,..) ให�ก�บ
ต่�วแป็รื ต่�วอย�าง :
<? $txt = “Hello World”;echo $txt;?>
Operation การืเช้�อมต่�อข้�อความ จะเช้�อมต่�อดู�วยเครื�องหมายจ%ดู “ . “<?
$txt1=“Hello World”;
$txt2 =“123”;
echo $txt1 . “ “ . $txt2;
?> การืที่0า arithmetic operation ก6ใช้�เครื�องหมายเหม�อนภาษา
C, java +, - , * , / , %, ++, --, +=, -= , == , != , <=
Condition If-else ล�กษณ์ะการืที่0างานเหม�อนก�บภาษา C, Java
if ( เง��อนไขี ) { ค0าส�งถู�าเป็�นจรื4งที่ 1;
ค0าส�งถู�าเป็�นจรื4งที่ 2; … ค0าส�งถู�าเป็�นจรื4งที่ N;
} else { ค0าส�งถู�าเป็�นเที่6จ ที่1;
ค0าส�งถู�าเป็�นเที่6จ ที่2; … ค0าส�งถู�าเป็�นเที่6จ ที่N;
}
ต่�วอย�างยอดูฮิ4ต่ โป็รืแกรืมค4ดูเกรืดู<?$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”;?>
HTML + PHP PHP จะสามารืถูรื�บค�าจาก form ข้อง HTML เช้�น จาก
ต่�วอย�างค4ดูเกรืดู เรืาจะที่0าหน�า 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 การืดู2งค�าจาก method=“get” จะดู2งค�าจากต่�วแป็รืที่ช้�อ
$_GET การืดู2งค�าจาก method=“post” จะดู2งค�าจากต่�วแป็รืที่ช้�อ
$_POST ที่�.ง $_GET และ $_POST เป็�นต่�วแป็รืช้น4ดู array
<html><form action=“a.php" method="get">score : <input type="text" name="score“><input type="submit" value="submit"></form></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>
grade.html
a.php
GET และ POST Method ในรืะบบ form ค�อ GET และ POST มความแต่กต่�างก�นดู�งน.
GET ค�าที่เรืาใส�เข้�าไป็จะถู�กแสดูงใน URL ข้องหน�าใน action
ที่0าให�มความไม�ป็ลอดูภ�ยถู�าค�าที่จะส�งอกหน�าเป็�น password เพื่รืาะ จะถู�กแสดูงใน URL
แต่�จะที่0าให�สามารืถูที่0า bookmark ไดู� POST
ค�าที่ใส�ใน form จะไม�ถู�กแสดูงใน URL ข้องหน�าใน action ที่0าให�มความป็ลอดูภ�ยในข้�อม�ลที่ส�งรืะหว�างหน�าเวป็ แต่�จะไม�สามารืถูที่0า bookmark ไดู�
Exercise 2 จงเข้ยนหน�าเวป็ช้�อ ex2.html เพื่�อที่จะรื�บค�า Login และ
Password ถู�าค�า login “ค�อ ect” และ password “ค�อ kmutnb” ให�แสดูง ค0าว�า Welcome เป็�นต่�วอ�กษรืข้นาดู H2 ส #0000FF
แต่�ถู�าไม�ใช้� ให�แสดูง ค0าว�า Go away hacker!! เป็�นต่�วอ�กษรืข้นาดู H1 ส #FF0000
