php course outline · installation 2 21 มิ.ย. 54 ... • client side • server side ... the...
TRANSCRIPT
6/27/2011
1
PHP
GNA 421Game Computer and Game Online Development I
Sripatum University
Chattatwat ChancharungEmail: [email protected]
Course Outline
สปดาหท หวขอ กจกรรม
1
14 ม.ย. 54Lecture 1 Introduction of PHP
บรรยายเนอหา, ปฏบตงานในชนเรยน
Basic HTML, BASIC PHP, Software Installation
2
21 ม.ย. 54Lecture 2 Variable and Operators
บรรยายเนอหา, ปฏบตงานในชนเรยน
Basic Programming Design
3
28 ม.ย. 54Lecture 3 Condition and Loop
บรรยายเนอหา, ปฏบตงานในชนเรยน
Statement: If, Switch, For, While
4
5 ก.ค. 54Lecture 4 Array and Function
บรรยายเนอหา, ปฏบตงานในชนเรยน
Usage Array, Function Design
5
12 ก.ค. 54Lecture 5 Form
บรรยายเนอหา, ปฏบตงานในชนเรยน
Form, Text, Radio, Checkbox, Text Area, Select
6
19 ก.ค. 54Lecture 6 Session and Cookie
บรรยายเนอหา, ปฏบตงานในชนเรยน
Session and Authentication methodology
7
26 ก.ค. 54Lecture 7Summary Basic Programming
บรรยายเนอหา, ปฏบตงานในชนเรยน
Midterm Exam
สอบกลางภาค 1‐7 สงหาคม 54
Course Outline
สปดาหท หวขอ กจกรรม
89 ส.ค. 54
Lecture 8MySQL Database
บรรยายเนอหา, ปฏบตงานในชนเรยน
Database, Table and Fields
916 ส.ค. 54
Lecture 9 SQL Command
บรรยายเนอหา, ปฏบตงานในชนเรยน
Insert, Delete, Update, Select
1023 ส.ค. 54
Lecture 10 PHP and MySQL (1)
บรรยายเนอหา, ปฏบตงานในชนเรยน
PHP Functions For MySQL (1)
1130 ส.ค. 54
Lecture 11PHP and MySQL (2)
บรรยายเนอหา, ปฏบตงานในชนเรยน
PHP Functions For MySQL (2)
126 ก.ย. 54
Lecture 12 Final Project
บรรยายเนอหา, ปฏบตงานในชนเรยน
1313 ก.ย. 54
Lecture 13 Final Project
บรรยายเนอหา,ปฏบตงานในชนเรยน
1420 ก.ย. 54
Lecture 14 Final Project
สงงาน Final Project, Report(สอบปลายภาค 28 ก.ย. 53 – 7 ต.ค. 53)
การประเมนผล
• Assignment 30 %• Midterm Exam 30 %• Final Project 40 %• Total 100 %
6/27/2011
2
Book
• Learning PHP, MySQL, and JavaScript: A Step‐By‐Step Guide to Creating Dynamic Websites (Animal Guide), Robin Nixon, 2009
http://lpmj.net/
Introduction
What is PHP
• PHP ยอมาจาก Professional Home Page
• เปนภาษาสครปตททางานไดทง Stand Alone และ Server Side
• มรปแบบนาเคาโครงมาจากภาษา C, Perl
• Open Source Software
ความเปนมาของ PHP
• พฒนาขนโดย Rasmus Lerdorf (ป 1994)
• ชวงแรกใชภาษา Perl ในการพฒนา
• ตอมาไดเปลยนมาใชภาษา C
• ป 1995 ถกตงชอวา PHP/FI
• ป 1998 เปลยนชอมาเปน PHP3
• ป 2003 พฒนาขนมาเปน PHP4
• ป 2007 พฒนาขนมาเปน PHP5
6/27/2011
3
PHP ทาอะไรไดบาง
• Client side
• Server side
• Database
• XML parsing
• File I/O
• Text processing
• Image processing
• Socket
• Etc.
PHP ทางานอยางไร
Web Server without PHP Web Server with PHP
6/27/2011
4
PHP ทางานอยางไร Install LAMP
• LAMP = Linux, Apache, MySQL, PHP
• Software XAMPP
http://www.apachefriends.org/en/xampp.html
• Download
Linux: http://www.apachefriends.org/en/xampp-linux.html
Windows: http://www.apachefriends.org/en/xampp-windows.html
Mac OSX: http://www.apachefriends.org/en/xampp-macosx.html
Solaris: http://www.apachefriends.org/en/xampp-solaris.html
Install LAMP Install LAMP
6/27/2011
5
Install LAMP Install LAMP (Security)
• http://localhost/security/
Install LAMP (Security) XAMPP : Configuration files
File (Directory) Usage
\xampp\apache\conf\httpd.confThe main configuration file for Apache. It's including other files from the subdirectory "extra".
\xampp\FileZillaFTP\FileZilla Server.xml
The configuration file for the FileZilla FTP server. It's configured with the application "FileZilla Server Interface.exe" (button "Admin" in CP).
\xampp\MercuryMail\mercury.ini The configuration file for the Mercury SMTP server. It's configured with the application "mercury.exe" (button "Admin" in CP).
\mysql\bin\my.ini The configuration file for the MySQL Server.
\xampp\php\php.ini The configuration file for PHP.
\xampp\phpMyAdmin\config.inc.php The configuration file for phpMyAdmin.
\xampp\sendmail\sendmail.ini The configuration file for msmtp (sendmail compatible interface).
\xampp\webalizer\webalizer.conf The configuration file for the Webalizer.
6/27/2011
6
XAMPP : Log files
File (Directory) Usage
\xampp\apache\logs\error.log The error log from Apache. Additional files can be in the same directory (if enabled).
\xampp\FileZillaFTP\Logs The logfiles from FileZilla FTP server (if enabled).
\xampp\MercuryMail\LOGS\In subdirectories of this files are the logfiles from the several Mercury SMTP server modules.
\xampp\mysql\data\mysql.err The error log from MySQL. Additional files can be in the same directory (if enabled).
\xampp\sendmail\sendmail.log The logfile from msmtp (sendmail compatible interface).
XAMPP : Common directory
File (Directory) Usage
\xampp\anonymous Download directory for anonymous FTP access.
\xampp\cgi‐bin For the CGI scripts.
\xampp\htdocs There are the files from your homepage.
\xampp\MercuryMail\MAIL The mail postboxes.
\xampp\mysql\data The databases.
\xampp\webdav The directory for WebDAV access (if enabled).
Editors สาหรบเขยน PHP
• Notepad &Wordpad
• EditPlus
• Adobe Dreamweaver
• Eclipse PDT
• NetBeans
• phpDesigner
• PHPEclipse
• Zend Studio
• More…
LAB: First PHP Script
• Go to folder– C:\xampp\htdocs\
• Create folder: gna421– C:\xampp\htdocs\gna421\
• Create File using Notepad: lab1‐1.php
• Open Browser (IE or Firefox)– http://127.0.0.1/gna421/lab1‐1.php
6/27/2011
7
Basic HTML
What is HTML
• Hyper Text Mark-up Language
• An HTML file is just an ordinary text file (with an .htm or .html
extension)
• An HTML file is read by a web browser, such as Firefox, Internet
Explorer, Google Chrome, etc.
รปแบบของ HTML
1. Text หมายถงขอความทวไป
2. Tag , Element หรอ คาสง หมายถงคาสงทใชในการกาหนด
รปแบบของ Text
3. Attribute หมายถงตวเลอกทคาสงของ HTML สามารถใชได
กฏในการใชงาน HTML
• แตละคาสง จะตองอยในเครองหมาย < และ > เทานน
• สามารถใชตวอกษรพมพเลก หรอ ใหญ กไดเพราะไดความหมาย
เหมอนกน
• สามารถพมพเอกสาร HTML จะพมพตดตอกน หรอ พมพแยกบนทด
กนกได
6/27/2011
8
การใสคาอธบาย(Comment)
• การใสคาอธบายบางสวนของ HTML ทเราเขยนมาเพอจะได
สะดวกในการตดตามในภายหลง Comment จะไมแสดงผลบน
Browser รปแบบของคาสงจะแตกตางจาก HTML ทวไป คอ
เรมตนดวยคาสง <!- และ ปดดวยคาสง ->
เรมตนกบการสราง Web Page
• ในเอกสาร HTML นนจะตองขนตนดวยคาสง(Tags.)
<HTML> และปดทายดวย </HTML> ดงน
<HTML>
………..
</HTML>
• ทกเอกสาร HTML จะตองม HEAD tag ซงบอกวาสวน
นเปน Head ของเอกสารน
<HTML>
<HEAD>
…………………...
</HEAD>
</HTML>
Tag: <HEAD>
• ใน HEAD tags เราจะบอกหนาปจจบนของ
Home Page ของเราดวย TITLE tag
<HTML>
<HEAD>
<TITLE>……………….</TITLE>
</HEAD>
</HTML>
Tag: <TITLE>
6/27/2011
9
สวนรายละเอยดของหนาเอกสารจะอยในสวนของ BODY tags.
ซงจะเปนสวนทอยถดไปจาก HEAD tags.
<HTML>
<HEAD>
<TITLE> ……… </TITLE>
</HEAD>
<BODY>
…………….
</BODY>
</HTML>
Tag: <BODY>
Attribute หนาท
LINK กาหนดสของ Like
BGCOLOR กาหนดสใหกบใหกบพนหลง
TEXT กาหนดสใหกบตวอกษร
BACKGROUND กาหนดชอไฟลรปภาพสาหรบพนหลง
Attribute ของคาสง <BODY>
<HTML>
<HEAD>
<TITLE>My First Page.</TITLE>
</HEAD>
<BODY>
Hello.........World.
</BODY>
</HTML>
First HTML
พมพขอความ ทดสอบการแสดงผล
<BODY>
ทดสอบการแสดงผล
</BODY>
First HTML
6/27/2011
10
เปลยนสพนหลงของหนาตางไดโดยใชคาสง
<BODY BGCOLOR="#FF0000">
ทดสอบการแสดงผล
</BODY>
Attribute: BGCOLOR
ใชรปภาพมาเปน Background
<BODY BACKGROUND=”bg.gif">
ทดสอบการแสดงผล
</BODY>
Attribute: BACKGROUND
การกาหนดหวขอดวย Tag <Hn>
• รปแบบ <Hn> ………………… </Hn>
• n = คาของขนาดเปนตวเลข เชน <h1>…….</h1>
• โดยคาของ n จะมคาตงแต 1- 6 เรยงจากมากไปนอย
<h1> ขอความ </h1>
<h2> ขอความ </h2>
<h3> ขอความ </h3>
<h4> ขอความ </h4>
<h5> ขอความ </h5>
<h6> ขอความ </h6>
ตวอยาง Tag <Hn>
6/27/2011
11
การจดรปแบบของตวอกษร
Bold/Italic กาหนดขอความใหเปนตวเขม ใชคาสง <B>….</B>
และตวเอนใชคาสง <I>…..</I>
Underline ใชในการขดเสนใต ใชคาสง <U>……</U>
Superscript /
Subscript
กาหนดใหเปนตวอกษรยกขนใชคาสง <SUP>….</SUP>
กาหนดใหเปนตวอกษรหอยลงใชคาสง <SUB>…</SUB>
การทาตวอกษรหนา (Bold)
<BODY BGCOLOR="#FFFFFF">
ตวปกต <B>ตวหนา</B>
</BODY>
Tag: <B>
การทาตวอกษรเอยง (Italics)
<BODY BGCOLOR="#FFFFFF">
ตวปกต <I>ตวเอยง</I>
</BODY>
Tag: <I>
การทาตวอกษรขดเสนใต (Underlining)
<BODY BGCOLOR="#FFFFFF">
ตวปกต <U>ตวขดเสนใต</U>
</BODY>
Tag: <U>
6/27/2011
12
• ในการใช Tags หลายอนปนกนจะตองจด
เรยงลาดบโดยตวทใชกอนจะตองถกปดทหลงและ
ตวอยทหลงจะตองปดกอน
<กอน><หลง></กอน></หลง> ผดหลกการ
<กอน><หลง></หลง></กอน> ถกหลกการ
Mix Tag
เราสามารถใช Tags หลายอยางปนกนไดตามตองการ
<BODY BGCOLOR="#FFFFFF">
ตวปกต <I><B>ตวเอยงและหนา</B></I>
</BODY>
Mix Tag: <I><B>
• เปลยนขนาดของอกษร(Font) ไดดวยวธการงายๆ
• อนดบแรกตองเพม <FONT> tags...
• จากนนจงกาหนดคาของขนาดดวย SIZE
<BODY BGCOLOR="#FFFFFF">
ทดสอบขนาดตวอกษร <FONT SIZE="6">ขนาด</FONT>
</BODY>
Tag: <Font>
• ขนาดของอกษรทงหมด 7 ขนาด
1 - teeny tiny
2 - small
3 - regular
4 - extra medium
5 - large
6 - real big
7 - yelling!
Tag: <Font>
6/27/2011
13
• การกาหนดชอ Font ทใชแสดงผล
<BODY BGCOLOR="#FFFFFF">
ทดสอบการแสดงผล
<FONT FACE="ARIAL">ARIAL</FONT>
</BODY>
Tag: <Font>
• เราสามารถใสชอ Font มากกวา 1 ชอลงไปใน Tags
ของ <FONT> ไดเพอทเราจะใช Font ตวทสองหรอ
สามแทนในกรณท Browser ไมม Font ตวแรกๆ
• ถารายชอ Font ทเราใสไวไมมเลย Browser จะใช
Default Font แทน
<FONT FACE="ARIAL, HELVETICA, LUCIDA SANS">
ชอ Font
</FONT>
Tag: <Font>
• เปลยนสอกษรเปนสทเราชอบ
<BODY BGCOLOR="#FFFFFF">
ทดสอบการแสดงผล
<FONT COLOR="#FFOOOO">สแดง</FONT>
</BODY>
Tag: <Font>
<BODY BGCOLOR="#FFFFFF">
ทดสอบการแสดงผล
<U><I><B>
<FONT COLOR="#FF0000" FACE="ARIAL"
SIZE="7">Font</FONT>
</B></I></U>
</BODY>
Mix Tags
6/27/2011
14
• จะขนบรรทดใหมจะตองเพม Tags <BR> ลงไปเพอ
เปนการบอกใหขนบรรทดใหม
<BODY BGCOLOR="#FFFFFF">
สวสด <BR>
บรรทด 2<BR>
บรรทด 3 <BR>
เปนอยางไร ?
</BODY>
Tag: <BR>
• รหสชองวาง(Space) ใช
<BODY BGCOLOR="#FFFFFF">
ทดสอบ
การแสดงผล
ของ Browser.
</BODY>
Tag: <BR>
• Special Character ทม ; ปดทาย
(non-breaking space)
< (< less-than symbol)
> (> greater-than symbol)
& (& ampersand)
" (" quotation mark)
Special Character
• เสนกน หรอ "Horizontal Rule."
<BODY BGCOLOR="#FFFFFF">
<HR>
</BODY>
Tag: <HR>
6/27/2011
15
• การกาหนดความกวาง WIDTH
<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=20%>
<HR WIDTH=50%>
<HR WIDTH=100%>
<HR WIDTH=20>
<HR WIDTH=50>
<HR WIDTH=100>
</BODY>
Tag: <HR>
• การกาหนดตาแหนงของเสน
<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% ALIGN=LEFT>
<HR WIDTH=60% ALIGN=RIGHT>
<HR WIDTH=60% ALIGN=CENTER>
</BODY>
Tag: <HR>
• สามารถทจะกาหนดหนาได
<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% SIZE=1>
<HR WIDTH=60% SIZE=3>
<HR WIDTH=60% SIZE=8>
<HR WIDTH=60% SIZE=15>
</BODY>
Tag: <HR>
• สามารถกาหนดใหเปน Solid Line ได
<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% SIZE=1 NOSHADE>
<HR WIDTH=60% SIZE=3 NOSHADE>
<HR WIDTH=60% SIZE=8 NOSHADE>
<HR WIDTH=60% SIZE=15 NOSHADE>
</BODY>
Tag: <HR>
6/27/2011
16
การจดเอกสารดวย Tag <p> และ <pre>
• รปแบบ <p>………..</p> ใชในการจดยอหนา
ของขอความ
• รปแบบ <pre>………</pre> ใชในการรปแบบ
ของขอความใหอยในรปแบบทพมพ
<HTML>
<HEAD>
<TITLE>Testing Tag</TITLE>
</HEAD>
<BODY>
<p>
การเขยนโฮมเพจ<br>
ดวยภาษา html
</p>
<p>
เรอง <br>
การทดสอบการใช<br>
คาสงจดยอหนา
</p>
</BODY>
</HTML>
ตวอยางการจดยอหนา
ดวย <p>
<HTML>
<HEAD>
<TITLE>Testing Tag</TITLE>
</HEAD>
<BODY>
<p align=center>
การเขยนโฮมเพจ<br>
ดวยภาษา html
</p>
<p align=right>
เรอง <br>
การทดสอบการใช<br>
คาสงจดยอหนา
</p>
</BODY>
</HTML>
ตวอยางการใช Tag <p>
และการวางตาแหนง
<HTML>
<HEAD>
<TITLE>Testing Tag</TITLE>
</HEAD>
<BODY>
<p >
การเขยนโฮมเพจ
ดวยภาษา html
</p>
<pre >
เรอง
การทดสอบการใช คาสงจดยอหนา
</pre>
</BODY>
</HTML>
ตวอยางการจดรปแบบ
ขอความดวย <pre>
6/27/2011
17
• การใชรปภาพ
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="work.gif" WIDTH=82 HEIGHT=68>
</BODY>
Tag: <IMG>
• การกาหนดเสนกรอบของรปภาพ ดวย border
• การกาหนดขอความแทนรปภาพดวย alt
Tag: <IMG>
• การจดวางรปภาพ ดวย Align
• Align=Left คอการวางรปภาพใหชดของเอกสารดานซาย
• Align=Right คอการวางรปภาพใหชดของเอกสารดานขวา
• Align=Top คอการวางรปภาพใหชดขอความบนทดบนสด
• Align=Middle คอการวางรปภาพใหตาแหนงกลางของขอความ
• Align=Bottom คอการ วางรปภาพใหชดขอความบนทดลางสด
Tag: <IMG>
• การกาหนดระยะการแสดงรปภาพดวย VSpace และ HSpace
• Vspace = ระยะหางตามแนวตงนบจากของเอกสารดาน
• Hspace = ระยะหางตามแนวนอนนบจากขอบดานซาย
Tag: <IMG>
6/27/2011
18
• แสดงขอความแยกเปนบรรทดๆ ดวย Bullet โดยใชคาสง <UL>
สามารถใชตวเลอก “TYPE” กบ <UL> ไดดงน
<UL TYPE=disc> กาหนด Bullet ใหเปนวงกลมสดา
<UL TYPE=circle> กาหนด Bullet ใหเปนวงกลมสขาว
<UL TYPE=square> กาหนด Bullet ใหเปนสเหลยมสทบ
• ใช Tag <LI> ในการแสดงผลแตละบรรทด
Tag: <UL>
<BODY BGCOLOR="#FFFFFF">
ทดสอบการแสดงผล
<UL>
<LI>รายละเอยด 1
<LI>รายละเอยด 2
<LI>รายละเอยด 3
<LI>รายละเอยด 4
</UL>
</BODY>
Tag: <UL>
• แสดงขอความแยกเปนบรรทดๆ ดวยตวเลข หรอ ตวอกษรแบบ
เรยงลาดบ ใชคาสง <OL>
สามารถใชตวเลอก “TYPE” กบ <OL> ไดดงน
<OL TYPE=A> ผลลพธ คอ A , B , C , D , ...
<OL TYPE=1> ผลลพธ คอ 1 , 2 , 3 , 4 , ...
<OL TYPE=I> ผลลพธ คอ I , II , III , IV , ...
• ใช Tag <LI> ในการแสดงผลแตละบรรทด
Tag: <OL> การกาหนดคาเพมเตมใน Order List <OL>
• START ใชกาหนดคาเรมตน เชน <OL type=a start=2> หมายถงใหเรมจากรายการลาดบท 2 (เรมท B )
• Value ใชระบลงไปเลยวาตองการใหรายการนนเปนตวเลขอะไร
6/27/2011
19
<BODY BGCOLOR="#FFFFFF">
ทดสอบการแสดงผล
<OL>
<LI>รายละเอยด 1
<LI>รายละเอยด 2
<LI>รายละเอยด 3
<LI>รายละเอยด 4
</OL>
</BODY>
Tag: <OL> Tag: <Table>
• การสรางตารางดวยคาสง Table
< BODY>
การสรางตาราง ( TABLE )
<TABLE>
<CAPTION>ผลการแขงขน</CAPTION>
<TR><TH>รางวลท1</TH><TH>รางวลท2</TH></TR>
<TR><TD>TV</TD><TD>CARD</TD></TR>
<TR><TD>VDO</TD><TD>TOY</TD></TR>
</TABLE>
< /BODY >
• การเพมขนาดความหนาใหกบตาราง
<TABLE BORDER="number">
---
---
</TABLE>
Tag: <Table>
< BODY>
การเพมขนาดความหนาใหกบตาราง
<TABLE BORDER="10">
<CAPTION>ผลการแขงขน</CAPTION>
<TR><TH>รางวลท1</TH><TH>รางวลท2</TH></TR>
<TR><TD>TV</TD><TD>CARD</TD></TR>
<TR><TD>VDO</TD><TD>TOY</TD></TR>
</TABLE>
< /BODY >
Tag: <Table>
6/27/2011
20
• การสรางตารางซอนตาราง จะมรปแบบคาสง
เหมอนกบคาสงการสรางตารางทวๆไปเพยงแตเราสราง
ตารางอกชดหนงไวใน <TD>.....</TD>ของตารางหลก
<TD>
<TABLE BORDER="10">
<TR><TH>รางวลท1</TH><TH>รางวลท2</TH></TR>
<TR><TD>TV</TD><TD>CARD</TD></TR>
<TR><TD>VDO</TD><TD>TOY</TD></TR>
</TABLE>
</TD>
Tag: <Table> Tag: <Table>
Attribute ใน Tag <TD>
ALIGN เพอจดวางขอความแนวนอน
VALIGN เพอจดวางขอความแนวตง
WIDTH เพอปรบขนาดตาราง
COLSPAN เพอรวมตารางยอยตามคอลมน
ROWSPAN เพอรวมตารางยอยตามแถว
Tag: <Table>
• การสราง Link. เพอเชอมโยงไปยงเพจอนๆ
<A HREF=“ชอเพจทตองการไป”>
………. ขอความ/รปภาพ…….
</A>
<BODY BGCOLOR="#FFFFFF">
<A HREF=“Main.html"> COMPUTER-HTML</A>
</BODY>
Tag: <A>
6/27/2011
21
Tag: <A>
• ตองการจะ Link ไปหา URL
<A HREF="ชอ URL ทตองการจะไป">ขอความทใชเปนตว
Link</A>
<BODY BGCOLOR="#FFFFFF">
Go to <A HREF="http://www.google.com">Google</A>
</BODY>
Tag: <A>
• สราง Link เพอใหสง E-Mail
<BODY BGCOLOR="#FFFFFF">
Mail to Me :
<A HREF="mailto:[email protected]">
Email [email protected]</A>
</BODY>
Tag: <A>
• เราสามารถสราง Link จากรปภาพได
<BODY BGCOLOR="#FFFFFF">
Go to
<A HREF="http://www.google.com">
<IMG SRC=“google.gif" WIDTH=82 HEIGHT=68>
</A>
</BODY>
Tag: <A>
6/27/2011
22
• ลกษณะการแสดงเอกสารจากการ LINK
<A href=“เอกสารทจะแสดง” target=“Option”> ขอความ </a>
_Blank: แสดงบน Page ใหม (Popup)
_Parent: แสดงบน Page เดม
_Top: แสดงบน Page บนสด
Name: แสดงบน Page ตามชอ Frame (Name)
Tag: <A>
• การแบงจอภาพโดยคาสง FRAME SRC
<HTML>
<HEAD><TITLE>....................</TITLE></HEAD>
<FRAMESET ROWS[COLS]="number หรอ %">
<FRAME SRC=ชอไฟลทตองการแสดงผล หรอ URL>
<FRAME SRC=ชอไฟลทตองการแสดงผล หรอ URL>
</FRAMESET>
</HTML>
โดยท...ROWS=แบงแนวนอน,COLS=แบงแนวตง
Tag: <FRAME>
<HTML>
<HEAD>
<TITLE>การแบงจอภาพ ( FRAME )</TITLE>
</HEAD>
<FRAMESET ROWS="20%,*">
<FRAME SRC="logo.html" >
<FRAME SRC="main.html">
</FRAMESET>
</HTML>
Tag: <FRAME>
<HTML>
<HEAD>
<TITLE>การแบงจอภาพ ( FRAME )</TITLE></HEAD>
<FRAMESET COLS="20%,*">
<FRAME SRC="menu.html" >
<FRAME SRC="main.html">
</FRAMESET>
</HTML>
Tag: <FRAME>
6/27/2011
23
<FRAMESET COLS="100,600">
<FRAME SRC="menu.html" >
<FRAMESET ROWS="20%,*">
<FRAME SRC="logo.html" >
<FRAME SRC="main.html">
</FRAMESET>
</FRAMESET>
Tag: <FRAME>
• คาสง <FORM> เปนคาสงเรมตนในการสรางแบบฟอรม
เพอรบขอมล
<FORM Attributes>
…….. คาสงอนๆ ทใชภายในคาสง FORM ……..
</FORM
Tag: <FORM>
• Attribute ทใชกบ Form
• Action: ใชระบวา ขอมลทจะนาสงให จะสงไปใหทใด
• Method: เปนวธสงขอมล
• GET: เปนการสงขอมลโดยผาน URL
• POST: เปนการสงขอมลโดยซอนขอมลกอนสงซงจะ
ปลอดภยกวา
<FORM METHOD="POST" ACTION="output.php">..…</FORM>
Tag: <FORM> Tag: <TEXTAREA>
<TEXTAREA Attributes>
……. Default Text …….
</TEXTAREA>
• เปนรปแบบการปอนขอมลแบบอสระ (Free Form)
Atteibute ตางๆ ไดแก
- NAME กาหนดชอใหกบพนทขอมล
- ROWS กาหนดจานวนแถวทตองการแสดงไวใน Form
- COLS กาหนดจานวนตวอกษรทตองการแสดงไวใน Form
- Default Text เปนขอความทใชแสดงใหเหนภายในพนทของ TEXT
6/27/2011
24
• ตวอยางการใช TEXTAREA
<FORM METHOD="POST" ACTION="output.php">
<TEXTAREA NAME="text" ROWS="5" COLS="30">
.. บนทกขอมล ...
</TEXTAREA>
</FORM>
Tag: <TEXTAREA>
• คาสง <INPUT> เปนสวนทใชปอนขอมลภายใน 1 บรรทด
Attribute ตางๆ ของ <INPUT>
- Text เปนขอความทใชแสดงดานหนาของพนททใชรบขอมล
- NAME กาหนดชอใหกบพนทรบขอมล
- SIZE กาหนดความยาวของชองทใชในการปอนขอมล
- MAXLENGTH กาหนดความยาวสงสดของตวอกษรทจะปอนขอมล
- VALUE กาหนดคาเรมตนไวสวนหนาในชองเตมขอมล
- CHECKED กาหนดใหมการเลอกตวเลอกไวลวงหนา(เฉพาะชนด
Checkbox และ Radio Button เทานน)
Tag: <INPUT>
- TYPE กาหนดชนดของขอมลทจะปอน ไดแก
– Text ขอมลทวไป
– Password รหสผานโดยจะแสดงขอมลเปน “*”
- Radio Button เปนวงกลมตวเลอก
– Checkbox เปนสเหลยมตวเลอก
– Reset สาหรบลบขอมลทงหมดทปอนทงไป
– Submit สาหรบสงขอมลทงหมดทปอน
– IMAGE จะทางานเหมอน Submit แตจะใชรป
ภาพแสดงแทน
Tag: <INPUT>
• ตวอยางการใช Input โดยม Type แบบ “Text” และ “Password”
<FORM METHOD="POST" ACTION="output.php">
USER <INPUT TYPE="text" NAME="user"><BR>
PASSWORD <INPUT TYPE="password">
</FORM>
Tag: <INPUT>
6/27/2011
25
• ตวอยางการใช Input โดยม Type แบบ “Check” และ “Radio”<FORM METHOD="POST" ACTION="output.php">
คานาหนาชอ<BR>
<INPUT TYPE="checkbox" NAME="c1" value=0>นาย
<INPUT TYPE="checkbox" NAME="c2" value=1>นาง
<INPUT TYPE="checkbox" NAME="c3" value=2>นางสาว
<BR>
สถานะภาพ<BR>
<INPUT TYPE="radio" NAME="r1" value=0>โสด
<INPUT TYPE="radio" NAME="r2" value=1>สมรส
<INPUT TYPE="radio" NAME="r3" value=2>หยาราง
</FORM>
Tag: <INPUT>
• ตวอยางการใช Input โดยม Type แบบ “Reset” และ “Submit”
<FORM METHOD="POST" ACTION="output.php">
<INPUT TYPE="reset" value="ยกเลกการปอนขอมล"><BR><BR>
<INPUT TYPE="submit" value="สงขอมล">
</FORM>
Tag: <INPUT>
• คาสง <SELECT> ใชแสดงตวเลอกทงหมดทมเพอใหผใชเลอก
โดยอาจแสดงในรปแบบ Drop-down List ใชคกบคาสง <OPTION>
<SELECT Attributes>
<OPTION Attributes> Text1
……………..
<OPTION Attributes> Text n
</SELECT>
Tag: <SELECT>
• Attributes ทใชกบคาสง <SELECT> ไดแก
- NAME กาหนดชอใหกบพนทขอมล
- SIZE กาหนดจานวนตวเลอกทตองการแสดงบนจอภาพ
- MULTIPLE เพอใหสามารถเลอกตวเลอกมากกวา 1 ตว
Tag: < SELECT >
6/27/2011
26
• Attributes ทใชกบคาสง <OPTION> ไดแก
- VALUE กาหนดคาทจะใชในการสงใหกบ Script
- SELECTED กาหนดใหตวเลอกใดถกเลอกไวลวงหนา
- Text1…Text n แสดงคาของตวเลอกทตองการใหผใชเหน
Tag: < SELECT >
• ตวอยางการใช <SELECT>
<FORM METHOD="POST" ACTION="output.asp">
<SELECT NAME="job" >
<OPTION Value="0">รบจาง
<OPTION Value="1">ขาราชการ
<OPTION Value="2">เกษตรกร
<OPTION Value="3">คาขาย
</SELECT>
</FORM>
Tag: < SELECT >
<FORM METHOD="POST" ACTION="output.asp">
ชอ<INPUT TYPE="text" NAME="">นามสกล<INPUT TYPE="text" NAME=""><BR>
คานาหนาชอ<BR>
<INPUT TYPE="checkbox" NAME="c1" value=0>นาย
<INPUT TYPE="checkbox" NAME="c2" value=1>นาง
<INPUT TYPE="checkbox" NAME="c3" value=2>นางสาว
<BR>
สถานะภาพ<BR>
<INPUT TYPE="radio" NAME="r1" value=0>โสด
<INPUT TYPE="radio" NAME="r2" value=1>สมรส
<INPUT TYPE="radio" NAME="r3" value=2>หยาราง
ตวอยางการสรางแบบฟอรม (1)
<BR>
อาชพ
<SELECT NAME="job" >
<OPTION Value="0">รบจาง
<OPTION Value="1">ขาราชการ
<OPTION Value="2">เกษตรกร
<OPTION Value="3">คาขาย
</SELECT><BR>
<INPUT TYPE="reset" value="ยกเลกการปอนขอมล">
<INPUT TYPE="submit" value="สงขอมล">
</FORM>
ตวอยางการสรางแบบฟอรม (2)
6/27/2011
27
ตวอยางการสรางแบบฟอรม (3)