HTML, PHP
HyperText Markup Language HTML HyperText Markup Language เป็นภาษาที่ถูกออกแบบมาเพื่อพัฒนา เวปเพจ หรือ ข้อมูลต่างๆ ที่สามารถ เรียกดูผ่าน web browser นามสกุลของไฟล์ทั่วไปจะใช้ .htm หรือ .html โครงสร้างพื้นฐานของภาษา HTML จะประกอบด้วย <HTML> <HEAD> <TITLE> Hello </TITLE> </HEAD> <BODY> What’s up </BODY> </HTML>
รายละเอียดเพิ่มเติม คำสั่งที่ควรรู้จักเช่น <a href = “………”> ….. </a> ใช้ในการสร้าง link <img src = “………..”> ใช้ในการแสดงรูปภาพ <br> ใช้ในการขึ้นบรรทัดใหม่ <hr> ขีดเส้นคั่นบรรทัด <table> สร้างตาราง
HTML FORM <FORM> <INPUT> </FORM> ฟอร์ม เป็นส่วนสำคัญสำหรับใช้รับข้อมูลจากผู้ใช้ เพื่อนำข้อมูลไปประมวลผล ต่อไปยัง Server <FORM> <INPUT> </FORM>
<input type = “text” value=“text here” name=“textbox” size=“20”>
<INPUT TYPE="checkbox" NAME="chk01" VALUE="HTML" CHECKED>ตัวเลือก1
<input type=“password” name=“p1”>
<textarea rows=“4” cols=“30”></textarea>
<INPUT TYPE=“button” VALUE=“Button” NAME=“button1" SIZE=“20”>
PHP PHP : Hypertext Preprocessor ทำงานที่ฝั่งของ server เช่นเดียวกับ ASP สามารถทำงานร่วมกับระบบฐานข้อมูลได้หลายชนิด (MySQL, Informix, Oracle, Sybase, ..etc) PHP เป็น open source PHP ฟรี PHP สามารถทำงานได้ในหลาย OS (Windows, Linux, Unix, etc..) Web server รองรับ PHP (IIS, Apache) โดยปกติจะเป็นแฟ้มข้อมูลที่อยู่ในรูป .php
เริ่มต้นกับ PHP Syntax ของ PHP จะอยู่ในรูป <?php คำสั่งภาษา PHP ?> <? คำสั่งภาษา PHP?> <script language=“php”> คำสั่งภาษา PHP </script> <% คำสั่งภาษา PHP %> Comment ใน PHP ใช้เหมือนภาษา C , Java
PHP HTML <html> <body> <? echo “Hello World”; ?>
การประกาศตัวแปรใน PHP $myVariable = 5; $txt = “Hello World”; PHP เป็นภาษา script ที่ไม่สนใจประเภทของข้อมูลจึงไม่จำเป็นต้องประกาศ ประเภทของข้อมูล (int, string,..) ให้กับตัวแปร ตัวอย่าง : <? $txt = “Hello World”; echo $txt; ?>
คำสั่ง echo เป็นคำสั่งสำหรับแสดงผลลัพธ์ไปที่โปรแกรม browser รูปแบบของคำสั่ง echo ข้อความ1 หรือตัวแปร1, ข้อความ2 หรือตัวแปร2, ข้อความ3 หรือ ตัวแปร3, … ข้อความ เขียนภายใต้เครื่องหมาย double quote (“ “) หรือ single quote (‘ ‘) ตัวแปรของภาษา PHP จะขึ้นต้นด้วยเครื่องหมาย $ เสมอ
Operation การเชื่อมต่อข้อความ จะเชื่อมต่อด้วยเครื่องหมายจุด “ . “ การเชื่อมต่อข้อความ จะเชื่อมต่อด้วยเครื่องหมายจุด “ . “ <? $txt1=“Hello World”; $txt2 =“123”; echo $txt1 . “ “ . $txt2; ?> การทำ arithmetic operation ก็ใช้เครื่องหมายเหมือนภาษา C, java +, - , * , / , %, ++, --, +=, -= , == , != , <=
Condition If-else ลักษณะการทำงานเหมือนกับภาษา C, Java if (เงื่อนไข ) { คำสั่งถ้าเป็นจริงที่ 1; คำสั่งถ้าเป็นจริงที่ 2; … คำสั่งถ้าเป็นจริงที่ N; } else { คำสั่งถ้าเป็นเท็จ ที่1; คำสั่งถ้าเป็นเท็จ ที่2; … คำสั่งถ้าเป็นเท็จ ที่N; }
ตัวอย่างยอดฮิต โปรแกรมคิดเกรด <? $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 เช่น จากตัวอย่างคิดเกรด เราจะทำ หน้า 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 grade.html a.php การส่งผ่านค่าตัวแปรต่าง ๆ จากฟอร์มทำได้โดยกำหนด Propertyสำคัญ ดังนี้ Method คือวิธีการส่งค่า ให้มีค่าเป็น POST หรือ GET Action คือบอกให้ฟอร์มรู้ว่าจะส่งค่าตัวแปรต่าง ๆ ไปใช้งานที่ไฟล์สคริปต์ไหน โดยจะใส่ชื่อ ไฟล์ที่ต้องการรับค่าตัวแปรจากฟอร์มนี้ <? $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”; ?> grade.html <html> <form action=“a.php" method="get"> score : <input type="text" name="score“> <input type="submit" value="submit"> </form> </html> a.php
GET และ POST Method ในระบบ form คือ GET และ POST มีความแตกต่างกันดังนี้ GET เป็นการส่งข้อมูลจากฟอร์มผ่านทาง URL ของเว็บเพจโดยตรง วิธีนี้ไม่ ปลอดภัยเพราะจะสามารถมองเห็นข้อมูลที่ส่งไปให้สคริปต์ บน URL ซึ่งจะมองเห็นได้ ในช่อง Address Bar ของบราวเซอร์ POST เป็นการส่งข้อมูลจากฟอร์มไปยังสคริปต์โดยตรง โดยไม่ผ่าน URL ทำให้เรา ไม่สามารถมองเห็นข้อมูลดังกล่าวได้ด้วยวิธีปกติ เหมาะกับข้อมูลขนาดใหญ่ หรือต้องปิด เป็นความลับ เช่น หน้าจอล็อกอิน
ขั้นตอนการส่งค่าตัวแปรแบบ Post ไฟล์ Index.html ส่งข้อมูลแบบ post ไปยังไฟล์ showData.php <form id="form1" name="form1" method="post" action="showData.php"> รหัส: <input name="txtID" type="text" id="txtID"/><p> ชื่อ - นามสกุล:<input name="txtName" type="text" id="txtName" /><br /> <input type="submit" name="Submit" value="ตกลง" /></p> </form> ไฟล์ showData.php รับตัวแปรแบบPost มาจาก index.html <?php echo "ข้อมูลของคุณคือ<br>"; echo " รหัส : ". $_POST[txtID]; echo "<br>"; echo "ชื่อ-นามสกุล : ". $_POST[txtName]; ?>
ขั้นตอนการส่งค่าตัวแปรแบบ Get ไฟล์ Index.html ส่งข้อมูลแบบ get ไปยังไฟล์ showData.php <form name="form1" id="form1" method="get" action="showData.php" > รหัส: <input name="txtID" type="text" id="txtID"/><p> ชื่อ - นามสกุล:<input name="txtName" type="text" id="txtName" /><br /> <input type="submit" name="Submit" value="ตกลง" /></p> </form> ไฟล์ showData.php รับตัวแปรแบบ Get มาจาก index.html <?php echo "ข้อมูลของคุณคือ<br>"; echo " รหัส : ". $_GET[txtID]; echo "<br>"; echo "ชื่อ-นามสกุล : ". $_GET[txtName]; ?>
Exercise 2 จงเขียนหน้าเวปชื่อ ex2.html เพื่อที่จะรับค่า Login และ Password ถ้าค่า login คือ “ect” และ password คือ “kmutnb” ให้แสดง คำว่า Welcome เป็นตัวอักษรขนาด H2 สี #0000FF แต่ถ้าไม่ใช่ ให้แสดง คำว่า Go away hacker!! เป็นตัวอักษรขนาด H1 สี #FF0000