Introduction to HTML, PHP 353352 – Special Problem (Database)

Introduction to HTML, PHP353352 – Special Problem (Database) ChoopanRattanapoka

HTML • HyperTextMarkup 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 • <imgsrc = “………..”> ที่ใช้ในการแสดงรูปภาพ • <br> ใช้ในการขึ้นบรรทัดใหม่ • <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 • คำว่า แบบสอบถาม มีขนาด <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 ?> • หรือ<? โปรแกรม PHP ?> • ทดลองง่ายๆ ก่อนกับฟังค์ชั่น echo • Comment ใน PHP ใช้เหมือนภาษา C , Java <html> <body> <? echo “Hello World”; ?> </body> </html>

<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; ?>

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 • ใน 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

Introduction to HTML, PHP 353352 – Special Problem (Database)