Introduction to HTML, PHP 353352 – Special Problem (Database) Choopan Rattanapoka
HyperText Markup Language HTML HyperText Markup Language เป็นภาษาที่ถูกออกแบบมาเพื่อพัฒนา เวปเพจ หรือ ข้อมูลต่างๆ ที่สามารถ เรียกดูผ่าน web browser นามสกุลของไฟล์ทั่วไปจะใช้ .htm หรือ .html โครงสร้างพื้นฐานของภาษา HTML จะประกอบด้วย <HTML> <HEAD> <TITLE> Hello </TITLE> </HEAD> <BODY> What’s up </BODY> </HTML>
รหัสสีใน HTML เราสามารถกำหนดสีของฉากพื้นหลัง รวมถึง สีของตัวอักษรแล้ว link ต่างๆ ใน HTML ได้ ซึ่งรหัสสีจะอยู่ในรูปของเลขฐาน 16 (RGB สีละ 8 bits) แล้ว ขึ้นต้นด้วยเครื่องหมาย “#” ตัวอย่าง #000000 (Red = 0, Green = 0, Blue = 0) คือ สีดำ #FFFFFF (Red = FF, Green = FF, Blue = FF) คือ สีขาว #FF0000 (Red = FF, Green = 0, Blue = 0) คือ สีแดง #00FF00 สีเขียว #0000FF สีน้ำเงิน
การเปลี่ยนสีพื้นหลัง และ สีของตัวอักษร เปลี่ยนสีพื้นหลัง จะสั่งใน tag ของ BODY เช่น จะเปลี่ยนพื้นหลังให้เป็น สีแดง <BODY BGCOLOR=“#FF0000”> เปลี่ยนสีตัวอักษร จะสั่งใน tag ของ BODY เช่นกัน เช่น จะเปลี่ยนตัวอักษรให้เป็นสีน้ำเงิน <BODY TEXT=“#0000FF”> เปลี่ยนสีตัวอักษรเฉพาะที่ <FONT COLOR=“#00FF00> Hello </FONT>
Example 1
การจัดรูปแบบตัวอักษร <h1>…</h1>, <h2>…</h2>, <h3>…</h3> เป็นการกำหนดตัวอักษรให้เป็น header <center> </center> เพื่อทำให้แสดงค่าที่ตำแหน่งกลางหน้าจอ Hello normal <h1>Hello h1</h1> <h2>Hello h2</h2> <h3>Hello h3</h3> <center><h2>Hello center</h2></center>
รายละเอียดเพิ่มเติม ควรไปศึกษาเอง ศึกษาเองได้จาก web site : http://www.w3schools.com/htmL/html_intro.asp ตัวอย่างคำสั่งที่ควรรู้จักเช่น <a href = “………”> ….. </a> ที่ใช้ในการสร้าง link <img src = “………..”> ที่ใช้ในการแสดงรูปภาพ <br> ใช้ในการขึ้นบรรทัดใหม่ <hr> ขีดเส้นขั้นบรรทัด <table> ในการสร้างตาราง
HTML FORM <FORM> <INPUT> </FORM> นอกจาก web page จะแสดงข้อความต่างๆ แล้ว เรายังเราให้ web page รับ ข้อมูลจากผู้ใช้ได้อีกด้วย ด้วยการใช้ tag แบบฟอร์ม (FORM) <FORM> <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"> 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”> <input type=“submit” value=“Login”> </form>
Exercise 1 จงเขียนหน้า web page ดังนี้ : มี title ว่า Exercise 1 พื้นหลังมีสี #AAEEEE คำว่า แบบสอบถาม มีขนาด <h1> ให้ตัวแปรที่เก็บค่าของชื่อเล่น มีชื่อว่า nickname ให้ตัวแปรที่เก็บค่าของเพศชื่อว่า sex มีค่า male ถ้าเป็นชาย มีค่า female ถ้าเป็นหญิง ให้ตัวแปรที่เก็บค่าของงานอดิเรกชื่อ hobby มีค่า read -> อ่านหนังสือ มีค่า game -> เล่นเกมส์ มีค่า sleep -> นอน มีค่า drunk -> เมา
PHP 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 , .php3 หรือ .phtml
เริ่มต้นกับ PHP Syntax ของ PHP จะอยู่ในรูป <?php โปรแกรม PHP ?> ทดลองง่ายๆ ก่อนกับฟังค์ชั่น echo Comment ใน PHP ใช้เหมือนภาษา C , Java <html> <body> <? echo “Hello World”; ?> </body> </html>
PHP HTML <html> <body> <? echo “Hello World”; ?>
การประกาศตัวแปรใน PHP $myVariable = 5; $txt = “Hello World”; PHP เป็นภาษา script ที่ไม่สนใจประเภทของข้อมูลจึงไม่จำเป็นต้องประกาศ ประเภทของข้อมูล (int, string,..) ให้กับตัวแปร ตัวอย่าง : <? $txt = “Hello World”; echo $txt; ?>
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 ใน HTML FORM จะมี method อยู่ 2 แบบ คือ get และ post การดึงค่าจาก method=“get” จะดึงค่าจากตัวแปรที่ชื่อ $_GET การดึงค่าจาก method=“post” จะดึงค่าจากตัวแปรที่ชื่อ $_POST ทั้ง $_GET และ $_POST เป็นตัวแปรชนิด array <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> <html> <form action=“a.php" method="get"> score : <input type="text" name="score“> <input type="submit" value="submit"> </form> </html> grade.html a.php
GET และ POST Method ในระบบ form คือ GET และ POST มีความแตกต่างกันดังนี้ GET ค่าที่เราใส่เข้าไปจะถูกแสดงใน URL ของหน้าใน action ทำให้มีความไม่ปลอดภัยถ้าค่าที่จะส่งอีกหน้าเป็น password เพราะจะถูกแสดงใน URL แต่จะทำให้สามารถทำ bookmark ได้ POST ค่าที่ใส่ใน form จะไม่ถูกแสดงใน URL ของหน้าใน action ทำให้มีความปลอดภัยในข้อมูลที่ส่งระหว่างหน้าเวป แต่จะไม่สามารถทำ bookmark ได้
Exercise 2 จงเขียนหน้าเวปชื่อ ex2.html เพื่อที่จะรับค่า Login และ Password ถ้าค่า login คือ “ect” และ password คือ “kmutnb” ให้แสดง คำว่า Welcome เป็นตัวอักษรขนาด H2 สี #0000FF แต่ถ้าไม่ใช่ ให้แสดง คำว่า Go away hacker!! เป็นตัวอักษรขนาด H1 สี #FF0000