Transcript บทที่ 4 HTML Form, PHP (Basic) ,Install Appserv,Macromedia

Web Technology &
Basic Web Development
By Wathinee
http://wathinee.reru.ac.th
Chapter 4 : You will Learning about
 How to install Appserv
 Macromedia Dreamweaver
 PHP (basic)
 HTML Form
เว็บเซิร์ฟเวอร์ (Web Server)
คือ เครื่ องคอมพิวเตอร์ที่ทำหน้ำที่เป็ นเครื่ องบริ กำร webpage แก่ผรู้ ้องขอด้วย
โปรแกรมประเภท Web Browser ที่ร้องขอข้อมูลผ่ำนโปรโตคอลเฮชทีทีพี (HTTP =
Hyper Text Transfer Protocol) เครื่ องบริ กำรจะส่ งข้อมูลให้ผรู ้ ้องขอในรู ปของ
ข้อควำม ภำพ เสี ยง หรื อสื่ อผสม เครื่ องบริ กำร webpage มักเปิ ดบริ กำรพอร์ ท 80
(HTTP Port) ให้ผรู ้ ้องขอได้เชื่อมต่อและนำข้อมูลไปใช้ เช่น โปรแกรม
อินเทอร์เน็ตเอ็กโพเลอร์ (Internet Explorer) หรื อฟำยฟร็ อก (FireFox Web Browser)
กำรเชื่อมต่อเริ่ มด้วยกำรระบุที่อยูเ่ ว็บเพจที่ร้องขอ (Web Address หรื อ URL =
Uniform Resource Locator) เช่น http://www.google.com หรื อ
http://www.thaiall.com เป็ นต้น โปรแกรมที่นิยมใช้เป็ นเครื่ องบริ กำรเว็บ คือ อำปำเช่
(Apache Web Server) หรื อไมโครซอฟท์ไอไอเอส (Microsoft IIS = Internet
Information Server)
Server technology
Application servers use different
technologies, such as ColdFusion, ASP.NET,
ASP, JSP, and PHP. The following table shows
common application servers available for the five
server technologies listed.
Web server
ตัวอย่างอื่น ๆ
http://www.thaiall.com/omni/indexo.html
Web server : Appserv
Download : http://wathinee.reru.ac.th
PDF File For Installing
Clink Here For Download Program
How to use AppServ and
directory structure
Directory structure of Apache, PHP,
MySQL after install AppServ.
Directory Structure
Test
• After install App Serv and understand about
directory structure. You can write first program
by PHP immediately and your program must store
in C:/AppServ/www. If you need to test you
program you can access via Browser. Specify you
program on address bar e.g.
http://localhost/test.php
Start / Stop Service
Start  Control panel  Administrative
Tools  Services
Test
1. Create folder
Create your Folder
Such as .. “54312220333”
Test “index.html”
http://localhost/mysite/index.html
http://localhost/mysite/
http://127.0.0.1/mysite/
Install “Macromedia
Dreamweaver 8.0”
Clink Here For Download Program
คำสั่ ง
ให้นกั ศึกษำคัดลอกข้อมูลงำนทั้งหมดไปเก็บลงใน Folder
ชื่อ “รหัสนักศึกษำ”
Create Site ใน
Dreamweaver
Create Site ใน
Dreamweaver
Input your folder name
(in your computer)
Input URL and your folder
name (The Server)
Create Site ใน
Dreamweaver
Create Site ใน
Dreamweaver
Create Site ใน
Dreamweaver
Create Site ใน
Dreamweaver
Create Site ใน
Dreamweaver
Create Site ใน
Dreamweaver
Create Site ใน
Dreamweaver
Install ..Completed
ทดสอบเขียนภำษำ PHP
• ตั้งชื่อไฟล์วา่ “testphppage.php”
Create PHP File
 File  New
testphppage.php
testphppage.php
Clink here to View File
Success.!!!
http://localhost/wathineeweb/testphppage.php
PHP
บทนำ
• PHP (Hypertext Preprocessor) เป็ น server side scripting language ซึ่ งมี
โครงสร้ำงของภำษำ คล้ำย C , Java และ Perl ถูกคิดค้นขึ้นโดยนำย Rasmus
Lerdorf ซึ่ งจุดประสงค์ของเขำเพื่อที่จะสร้ำง code ที่ซบั ซ้อนใส่ เข้ำไปใน HTML
ให้ได้ กำรเขียน php script นั้นไม่จำเป็ นต้องประกำศตัวแปรก่อนกำรใช้งำน
นอกจำกนั้น PHP ยังรองรับกำรเขียนโปรแกรมแบบ Object-Oriented ได้อีกด้วย
ในปัจจุบนั PHP จึงกลำยเป็ น scripting language ที่ได้รับควำมนิยมและมี
ควำมสำมำรถสูงภำษำหนึ่ง
PHP เป็ น scripting language ที่ถกู สร้ำงขึ้นมำสำหรับงำนด้ำน Web Application
ซึ่ งมีควำมสำมำรถด้ำน Database เป็ นควำมสำมรถหลักและได้รับกำรยอมรับว่ำ
เป็ น Web Application language ที่มีควำมเร็ วสูงที่สุด มีประสิ ทธิภำพมำกที่สุด และ
พัฒนำได้ง่ำยที่สุดภำษำหนึ่ ง เนื่องจำก PHP มี build-in function ให้นกั พัฒนำ
โปรแกรมเลือกใช้เป็ นจำนวนมำกใน
PHP กับกำรรับข้ อมูลจำก HTML Form มำประมวลผล
รู้จกั กับ HTML Form
Html Form คือ แบบฟอร์ม ที่เราสามารถป้ อนข้อมูลต่าง ๆ ลงไปเพื่อส่ งข้อมูล
เหล่านี้ไปประมวลผลยัง PHP
HTML Form
เพื่อรับข้อมูลจำกผูใ้ ช้
HTML File
Server Side Script
Such as..
PHP,JSP ,ASP
PHP File
User Input
Data
CreateForm1.htm
Show Data
ShowDataform1.php
Create “CreateForm1.htm
”
Code การเขียน Html Form
• สร้างไฟล์ Html ชื่อ CreateForm1.html
หลากหลายวิธีการรับข้ อมูล Input
กำรรับข้อมูลจำกผูใ้ ช้จะต้องใช้สิ่งที่เรี ยกว่ำ input element
ของภำษำ html ซึ่ งมีอยูห่ ลำยรู ปแบบ ตัวอย่ำงดังนี้
รับข้อมูลด้วย: Textbox
Textbox element คือ ช่องที่สามารถกรอกข้อมูลได้เพียง 1 บรรทัดเท่านั้น
รู ปแบบ <input type=“text” name=“ชื่อของช่อง textbox”
value=“ค่าเริ่ มต้นของช่อง textbox”
size=“ขนาดความยาวของช่อง textbox”
maxlength=“จานวนตัวอักษรมากสุ ดที่สามารถรับได้”>
ตัวอย่าง
<input type=“text” name=“username” value=“admin” size=“30”
maxlength=“6”>
** กาหนด input รหัส ให้กาหนด type เป็ น password
Input Text Element
Input Text
View “CreateForm1.html”
ส่ งข้อมูลด้วย submit element
เป็ นปุ่ มสาหรับส่ งข้อมูล เมื่อกดปุ่ มนี้ขอ้ มูลทั้งหมดที่กรอกหรื อเลือกไป จะถู
ส่ งไปประมวลผลยังไฟล์ PHP ที่ระบุ (ระบุในส่ วน form)
รู ปแบบ
<input type=“submit” value=“ข้อความที่แสดงบนปุ่ ม submit”>
ตัวอย่าง
<input type="submit" value=“Sent Data”>
เคลียร์ ข้อมูลทีก่ รอกหรือเลือกไป
reset element
เป็ นปุ่ มสาหรับเคลียร์ขอ้ มูลในฟอร์ม เมื่อกดปุ่ มนี้ขอ้ มูลทั้งหมดที่ได้กรอกหรื อ
เลือกไปจะถูกเคลียร์ เหมือนไม่ได้กรอกหรื อเลือกค่าใดๆ มาก่อน
รู ปแบบ
<input type=“reset” value=“ข้อความที่แสดงบนปุ่ ม reset”>
ตัวอย่าง
<input type=“reset" value=“Clear Data”>
submit element & reset element
Submit & Reset Button
Create File
“ShowDataForm1.php”
Coding PHP Script to get
Data from a form
Test Sending Data
กำรเปรียบเทียบ,Comparison
php File
User View File
HTML FORM อื่น ๆ
Code การเขียน textbox
• เพิ่มเติมข้อมูลในไฟล์ Html ชื่อ Form1.html
** value,size และ maxlength ก็ได้ สามารถระบุเพียงแค่
<input type=“password” name=“passwd”> เท่านี้กไ็ ด้
แสดงผล
http://localhost/wathineeweb/CreatForm1.html
รับข้อมูลด้วย radio element
เป็ นช่องที่สามารถเลือกได้เพียง 1 รายการ โดยหากต้องการเลือกรายการใดให้คลิกเมาส์ที่ช่อง
วงกลมด้านหน้ารายการนั้น
รู ปแบบ
<input type=“radio” name=“ชื่อของ radio”
value=“ค่าที่กาหนดให้ radio”
checked>
ตัวอย่าง
<input type=“radio” name=“age” value=“น้อยกว่า 30 ” checked> น้อยกว่า 30 ปี
<input type=“radio” name=“age” value=“30 – 40 ” > ช่วง 30 – 40 ปี
<input type=“radio” name=“age” value=“มากกว่า 40 ” > มากกว่า 40 ปี
Code การเขียน radio
 เพิ่มเติมข้อมูลในไฟล์ Html ชื่อ Form1.html
** เนื่องจาก radio เป็ นช่องที่สามารถเลือกได้เพียงรายการเดียวเท่านั้น ดังนั้น
ค่า ที่ checked จึงมีได้เพียงค่าเดียวในตอนเริ่ มต้น
แสดงผล
http://localhost/wathineeweb/CreateForm1.html
รับข้อมูลด้วย checkbox
checkbox เป็ นช่องที่สามารถเลือกได้มากกว่า 1 รายการ โดยหากต้องการเลือก
รายการใด ให้คลิกเมาส์ที่ช่องสี่ เหลี่ยมด้านหน้ารายการนั้น
รู ปแบบ
<input type=“checkbox” name=“ชื่อของ checkbox”
value=“ค่าที่จะกาหนดให้ checkbox”
checked>
Code การเขียน checkbox
• เพิ่มเติมข้อมูลในไฟล์ Html ชื่อ Form1.html
แสดงผล
รับข้อมูลด้วย listbox element
เป็ นlist รำยกำรในลักษณะเมนู
รู ปแบบ
<select name=“ชื่อของ list box” size=“จานวนแถว ของ listbox” multiple>
<option value=“ค่าของตัวเลือกที่ 1”> ข้อความแสดงตัวเลือกที่ 1
<option value=“ค่าของตัวเลือกที่ 2”> ข้อความแสดงตัวเลือกที่ 2
……
<option value=“ค่าของตัวเลือกที่ n”> ข้อความแสดงตัวเลือกที่ n>
</select>
**โดยปกติเลือกได้ 1 รายการแต่ถา้ ระบุ muliple จะทาให้เลือกได้มากกว่า1รายการ
รับข้อมูลด้วย listbox element
ถ้าไม่กาหนด size และ multiple จะทาให้ list box มีหน้าตาแบบนี้
ถ้าไม่กาหนด multiple จะทาให้ list box มีหน้าตาแบบนี้
Code การเขียน listbox element
• เพิ่มเติมข้อมูลในไฟล์ Html ชื่อ Form1.html
แสดงผล
http://localhost/wathineeweb/CreateForm1.html
รับข้อมูลด้วย textarea element
เป็ นช่องที่สำมำรถกรอกข้อมูลได้หลำยบรรทัด
รู ปแบบ
<textarea name=“ชื่อของ textarea”
rows=“จานวนแถวของ textarea”
cols=“จานวนคอลัมน์ของ textarea”>
</textarea>
Code การเขียน textarea element
• เพิ่มเติมข้อมูลในไฟล์ Html ชื่อ CreateForm1.html
แสดงผล
http://localhost/wathineeweb/CreateForm1.html
ส่ งข้อมูลด้วย submit element
เป็ นปุ่ มสาหรับส่ งข้อมูล เมื่อกดปุ่ มนี้ขอ้ มูลทั้งหมดที่กรอกหรื อเลือกไป จะถู
ส่ งไปประมวลผลยังไฟล์ PHP ที่ระบุ (ระบุในส่ วน form)
รู ปแบบ
<input type=“submit” value=“ข้อความที่แสดงบนปุ่ ม submit”>
ตัวอย่าง
<input type="submit" value=“sent”>
เคลียร์ขอ้ มูลที่กรอกหรื อเลือกไป
reset element
เป็ นปุ่ มสาหรับเคลียร์ขอ้ มูลในฟอร์ม เมื่อกดปุ่ มนี้ขอ้ มูลทั้งหมดที่ได้กรอกหรื อ
เลือกไปจะถูกเคลียร์ เหมือนไม่ได้กรอกหรื อเลือกค่าใดๆ มาก่อน
รู ปแบบ
<input type=“reset” value=“ข้อความที่แสดงบนปุ่ ม reset”>
ตัวอย่าง
<input type=“reset" value=“clear”>
Code การเขียน submit และ reset element
• เพิ่มเติมข้อมูลในไฟล์ Html ชื่อ CreateForm1.html
Test
http://localhost/wathineeweb/CreateForm1.html
เรำสำมำรถจัดควำมสวยงำมได้ ด้วย table
<table border=“กำหนดขนำดขอบขอบตำรำง”>
<tr>
<td> </td>
</tr>
<tr>
<td></td>
</tr>
</table
ทดสอบ
ส่ งข้ อมูลจาก html form ไปประมวลผลทีP่ HP
รู ปแบบ
<Form action=“ชื่อไฟล์ php ที่จะส่ งข้อมูลไปประมวลผล” method=“POST”>
กาหนดรายละเอียดต่าง ๆ
</Form>
ตัวอย่าง
<Form action=“ShowDataForm1.php” method=“POST”>
….
</Form>
**หมายถึง เมื่อคลิกปุ่ ม submit ข้อมูลจะส่ งไปยัง ไฟล์ที่ระบุใน action เพื่อไป
ประมวลผล
เพิม่ เติม code ที่ Form ไฟล์
CreatForm1.html
ข้อมูล name ของ element
“ShowDataForm1.php”
PHP กับวิธีการรับข้อมูล จาก Input box
รู ปแบบ
<?php
$print " Name is ".$username.“<br>”;
$print " age is ".$age.“<br>”;
$print " salary is ".$salary.“<br>”;
$print " Comment is ".$information.“<br>”;
?>
ทดสอบ ระบุขอ้ มูลที่ username แล้วคลิก
Submit
Test
** สังเกตว่ำ check box get ได้แค่ 1 ค่ำ
Check Box
ต้องเขียนคำสัง่ คำข้อมูลแบบ เก็บลงไป
ในตัวแปร Array และเขียนคำสัง่ วนลูป
ในกำรแสดงผลข้อมูล
ทดสอบ
Check Box
และในกรณี ที่ได้เลือกข้อมูลใดๆๆให้
แสดงข้อมูล ว่ำไม่ได้มีกำรเลือกข้อมูล
โดยใช้คำสัง่ if ..else
กำรบ้ ำน
•
•
•
•
กำรบ้ำน ให้นกั ศึกษำฝึ กสร้ำง Form ดังข้อมูลที่กำหนดให้
และฝึกเขียนคำสัง่ PHP ในกำรรับข้อมูล ทั้งวนลูป และ เงื่อนไข
จุดมุ่งหมำยให้นกั ศึกษำ ศึกษำค้นคว้ำด้วยตนเอง ก่อนเข้ำเรี ยนชัว่ โมงต่อไป
และให้เพิม่ เติม Link ที่ไฟล์ Linkpage.html เพื่อ Link ไปยัง
ไฟล์ CreateForm1.html
CreateForm1.html
ShowDataFrom1.php