Development
www.wbi.msu.ac.th
ผศ.อนิรุทธ์ โชติถนอม
Anirut.c@msu.ac.th
แผนการเรี ยนรายสัปดาห์
1. หลักการเบื้องต้นเกี่ยวกับ web application,เครื่ องมือพัฒนา,การ
ติดตั้ง web server หลักการเขียนคาสัง่ HTML
2. ภาษา VB Script
•
•
•
•
•
Function พื้นฐาน
Statement if, select, loop
สัญลักษณ์ ตัวเชื่อม
หลักการทาเมนู
การสร้าง Function และ Subroutine
3. หลักการสร้างการโต้ตอบกับผูใ้ ช้งาน
4. การติดต่อฐานข้อมูล Insert , select
5. การติดต่อฐานข้อมูล delete , Update
แผนการเรี ยนรายสัปดาห์
6. การจดจาระหว่าง Client กับ Server
7. Server Object
8. สอบกลางภาค
9-10. แนวทางการพัฒนาเว็บ ตัวอย่างระบบกระดานข่าว
11-12. ตัวอย่างระบบขายสิ นค้า การ Upload file
13-15 PHP Programming
สัปดาห์ที่ 1
• หลักการเบื้องต้นเกี่ยวกับ web application
• เครื่ องมือพัฒนา
• การติดตั้ง web server
Internet & Web
• Internet
• TCP/IP : Transmission Control Protocol/Internet Protocol
IP Address
หมายเลขเครื่ องสาหรับอ้างอิงในระบบเครื อข่าย
ประกอบด้วยเลข 4 ชุด
ชุดละ 256 ค่า
โดยคัน่ ด้วยเครื่ องหมายจุด
มีค่า 0.0.0.0 จนถึง 255.255.255.255
ข้อเสี ย จาได้ยาก
Domain Name System : DNS
ระบบการกาหนดชื่อที่เป็ นตัวอักษรเพื่อใช้เรี ยกแทน IP
Address
เช่น
202.28.32.27 แทนด้วย www.wbi.msu.ac.th
World Wide Web
บริ การอย่างหนึ่งในระบบ Internet สามารถส่ งข้อมูลหรื อ
สื่ อได้หลายรู ปแบบ (Multimedia)
• HTTP://
• HTTPS://
Hypertext , Hyper Link
คือข้อความที่สามารถเชื่อมโยงไปยังข้อมูลอื่นที่อยูใ่ น www
ได้
Server
เครื่ องคอมพิวเตอร์สาหรับให้บริ การต่างๆ
Web Server
เครื่ องให้บริ การ Webpage แก่ Client
Client
เครื่ องที่ขอดู Webpage จาก web server
web site
คือกลุ่มข้อมูลที่มีการนาเสนอผ่าน www ของแต่ละหน่วยงาน
ที่เก็บไว้ที่ Web server
Homepage
คือหน้าแรกของ web site
Webpage
คือหน้าต่างๆที่อยูใ่ น Web site รวมถึง homepage
ด้วย
Upload
คือการคัดลอกข้อมูลจาก Client ไปยัง Server
Download
คือการคัดลอกข้อมูลจาก Server มายัง Client
Static Web page
• Static Web page
- มีรูปแบบและข้อมูลแน่นอนในการแสดงผล
- webpage ทั้งหมดจะถูกสร้างด้วย Hyper text markup
language : HTML
- นามสกุลของไฟล์ เป็ น .HTML , .HTM
Static web
4.
Browser
1. HTML Request
HTML
IIS
`
3. HTML Rsponse
2. Read HTML File
Client
Server
<Html>
<Html>
…..
<Html>
…..
…..
…..
…..
</Html>
…..
</Html>
</Html>
Quick HTHL Concept
• เราไม่จาเป็ นต้องเขียนคาสัง่ HTML ครบตามรู ปแบบก็ได้
Full Version
<HTML>
<HEAD>
<TITLE>This is my
page</TITLE>
</HEAD>
<BODY>
Hello world!
</BODY>
</HTML>
Shot Version
Hello world!
การจัดการส่ วน Client
• Installation Software
– IE
การจัดการส่ วน Web Server
• Data Base (Access หรื ออื่นๆ)
• IIS (โปรแกรม Web Server)
เครื่ องมือพัฒนา ASP Web Application
• Software Installation
– HTML Editor
• Html-kit
– Manual or Reference Book
– Graphic editor
• Photoshop
– Browser & Plugins
• IE
– Database
• MS Access
การติดตั้ง Web Server
• หาโปรแกรม Web Server จากไหน
• ติดตั้ง Web Server อย่างไร
• Config ค่าอย่างไร
การตรวจสอบ IIS ในเครื่ อง
Control panel > Administrator Tools
การติดตั้ง IIS
Control panel > Add Remove Program
2
1
3
การกาหนดค่าใน IIS
property
Default Web sites
กาหนด Folder เก็บเว็บ
Virtual Directory / Allied
IP Address
Default ip
http://localhost
http://127.0.0.1
ใช้เรี ยกภายในเคื่องตนเอง
Static IP
Command prompt + Ipconfig
IP
Assigned IP to Web Server
Default Document
• Default Document
default.asp , .HTM, .HTML
Index.asp, .HTM, .HTML
การเรี ยกเว็บเพจในเครื่ องที่พฒั นาเว็บ
http://localhost/ชื่อไฟล์
http://127.0.0.1/ชื่อไฟล์
การเรี ยกเว็บจากเครื่ องอื่น
1. ให้ปิด Windows Firewall
2. เรี ยกตาม IP ของเครื่ อง Server นั้นแล้วตามด้วยชื่อ Path และ ชื่อไฟล์
เช่น
• http://10.114.0.10/default.html
• http://10.99.5.3/image/x.html
ข้อสังเกตุ
• หากเรี ยกเว็บจากเครื่ องอื่นไม่ได้ให้ลองปิ ด Firewall ของเครื่ อง
Server ก่อน โดยไปที่ control panel แล้วหา Firewall
จากนั้นเลือก turn off windows firewall
ปัญหาในการเรี ยกใช้งาน Web Server
• สิ ทธิในการเข้าถึง folder และไฟล์ (เขียนข้อมูลไม่ได้)
การกาหนดสิ ทธิการเข้าถึง folder
เมื่อแก้ไขโปรแกรมแล้ว ผลการทางานไม่เปลี่ยนตาม
Hypertext markup language
(HTML)
W3C
• W3C (World Wide Web Consortium) เป็ น
องค์กรสากลที่ทางานด้านการพัฒนาเทคโนโลยี WWW ก่อตั้งเมื่อ ปี
1994 นาโดย นาย Tim Berners- Lee ได้รับความร่ วมมือ
จากสามสถาบันหลัก คือ MIT/CSAIL สหรัฐอเมริ กา ERCIM
ฝรั่งเศส และ Keio University ประเทศญี่ปุ่น ปัจจุบนั มีสมาชิก
อยูท่ วั่ โลก ในการร่ วมกันพัฒนามาตรฐานเว็บไซต์เพื่อรับรองการ
เจริ ญเติบโตในอนาคต (http://www.w3.org/)
โครงสร้างภาษา
<HTML>
<HEAD>
<TITLE>This is my page</TITLE>
</HEAD>
<BODY>
Hello world!
</BODY>
</HTML>
รู ปแบบ Tag
Tag เดี่ยว
<Tag_name Attribute1 Attribute2 …AttributeN>
Tag คู่
<Tag_name> ………… </Tag_name>
HTML Tag
Tag's name
Value
<img src = "abc.jpg" width= 10>
Open tag
Attribute
Close Tag
ตัวอย่าง Tag Attribute
<img src="abc.jpg" border="5">
img
คือ Tag สาหรับแสดงภาพ
src
คือ Attribute กาหนดชื่อภาพ
border คือ Attribute กาหนดขนาดของกรอบ
Quick HTHL Concept
• ไม่จาเป็ นต้องเขียนคาสัง่ HTML ครบตามรู ปแบบก็ได้
Full Version
<HTML>
<HEAD>
<TITLE>This is my
page</TITLE>
</HEAD>
<BODY>
Hello world!
</BODY>
</HTML>
Shot Version
Hello world!
HTML Tools
• HTML เป็ น Text file ดังนั้นจึงสามารถพัฒนาด้วยText
Editor อะไรก็ได้เช่น
Notepad
Edit plush
Dreamweaver
HTML Kit
การ set ภาษาไทยใน HTML Kit
1
3
5
4
2
6
ตัวอย่าง HTML Tag
•
•
•
•
<img>
<table>
<br>
<hr>
แสดงภาพ
แสดงตาราง
ขึ้นบรรทัดใหม่
ขีดเส้น
• <a>
Link
• <input> เติมค่า
• <form> กาหนดขอบเขตการเติมค่า
Tag BR และ HR
• BR
ใช้ข้ ึนบันทัดใหม่ 1 บันทัด
• HR
ใช้ขีดเส้นกั้นหน้า
การใช้งาน ให้พิมพ์ tag ในตาแหน่งที่ตอ้ งการให้เกิดการทางานขึ้น
เช่น
Line 1<br>Line 2<br>Line 3
Tag Table
• Table
ใช้สร้างตาราง ใช้ร่วมกับ TR และ TD
TR ใช้กาหนดแถว ภายใน TR จะมี TD กาหนดไว้แบ่งคอลัม
<table>
<tr><td>data1</td><td>data1</td></tr>
<tr><td>data3</td><td>data4</td></tr>
</table>
data1 data2
data3 data4
Table ต่อ
• TD
Colspan ใช้ในการรวม Cell ด้าน Column
<td Colspan=2> เป็ นการรวม 2 column เป็ น 1 column
<table>
<tr><td Colspan=2 >data1</td></tr>
<tr><td>data3</td><td>data4</td></tr>
</table>
data1
data3 data4
Table ต่อ
• การกาหนดสี ให้ตาราง
การกาหนดสี ทาได้ในระดับตาราง ระดับแถว หรื อระดับ column
ระดับตาราง <table bgcolor="ค่าสี ">
ระดับแถว <tr bgcolor="ค่าสี " >
ระดับ column <td bgcolor="ค่าสี " >
ค่าสี
• ระบบกาหนดสี เป็ นแบบ RGB อย่างละ 1 byte ด้วยเลขฐาน 16
เช่น
ค่าสี น้ าเงิน B
FF00DD
ค่าสี เขียว G
ค่าสี แดง R
ค่าต่าสุ ดคือ 00 หมายถึงไม่มีความเข้มสี เลย
ค่าสู งสุ ดคือ FF หมายถึงความเข้มสี ตม็ ที่
Tag B, I, U
• B ทาให้ตวั อักษรหนา
• I ทาให้ตวั อักษรเอียง
• U ทาให้ตวั อักษรขีดเส้นไต้
การใช้ตอ้ งกาหนดขอบเขตของผลการทางานด้วย โดยใช้ </ เพื่อจบ tag
เช่น
xxx<B>Test</B>x<u>x</u>x
ผล
xxxTestxxx
Tag Center
• Center
ใช้ในการกาหนดข้อมูลให้อยูต่ รงกลาง เช่นกลางจอ กลางตาราง
การกาหนดข้อมูลให้อยูก่ ลางจอให้ใช้ <center> และ </center>
ครอบไว้
การกาหนดข้อมูลกลางตารางให้กาหนดไว้ที่ Attribute align ของ
tag table หรื อ tr หรื อ td โดยกาหนดค่าเป็ น center
<table align="center">
<tr align="center">
Tag H
• H1,H2,H3,H4,H5
กาหนดขนาดตัวอักษรเป็ นหัวข้อ H1 มีขนาดใหญ่สุด
การใช้งานต้องกาหนดขอบเขตการทางานไว้ดว้ ย
เช่น
<h2>xxx</h2>yyy
ผล
xxx
yyy
Tag Font
• Font
ใช้กาหนดลักษณะตัวอักษร
Face กาหนดชื่อ font ที่จะใช้
Size กาหนดขนาด
เช่น
<font face="Angsana new" size=50> ทดสอบ </font>
Tag img
• Img
ใช้แสดงภาพ .jpg, .png, .gif, .bmp ไม่สามารถแสดงภาพที่
เป็ น flash ได้
attribute
Src ใช้กาหนดชื่อไฟล์ภาพที่จะแสดง
Height ใช้กาหนดความสูง
Width ใช้กาหนดความกว้าง
Alt ใช้กาหนดข้อความแสดงบนภาพ
Link
• Tag ที่ใช้ทา Link ไปยังข้อมูลอื่น
• A
• Map
• Area
Tag A
• A
ใช้ทา Link เชื่อมไปยังข้อมูลต่างๆ
Href กาหนดที่หมาย ถ้าเป็ น web อื่นให้ใส่ http:// ด้วย เช่น
href=http://www.google.com
Target กาหนดหน้าจอที่จะเปิ ดหากไม่กาหนดจะเปิ ดจอเดิม
_blank หน้าจอใหม่
Title กาหนดตัวอักษรบน Mouse เมื่อสัมผัส
Tag map
ใช้กาหนดจุดเพื่อ link ไปยังข้อมูลอื่น โดยกาหนดจุดเป็ นรู ปทรงต่างๆ
<map name="map_panda">
<area alt="yyy" shape="circle" coords="200, 180, 170" href="http://www.msu.ac.th" />
<area alt="xxx" shape="rect" coords="0, 0, 100, 100" href="http://www.wbi.msu.ac.th" />
</map>
<img src="panda.jpg" usemap="#map_panda" height="500" width="500" />
Tag area
• <area shape="circle" coords="200, 200, 170"
href="http://www.bamboolabcode.com" />
• <area shape="rect" coords="0, 0, 20, 50"
href="http://www.bamboolabcode.com" />
ข้อสังเกตุ Attribute
• Alt,title
•
•
•
•
•
Name,id
Align
Valign
Width
Height
ใช้กาหนดข้อความเมื่อเลื่อน mouse ไป
tag นั้น
ใช้กาหนดชื่อให้ tag
ใช้จดั ตาแหน่งชิดซ้าย ขาว หรื อกลาง
ใช้จดั ตาแหน่งแนวตั้ง บน ล่าง กลาง
กาหนดความกว้าง
กาหนดความสูง
แบบฝึ กหัด
• ให้ติดตั้ง Web Server
• เขียนภาษา HTML ทดลองใช้ Tag ทุก tag ให้เข้าใจ
• เรี ยกดูเว็บที่สร้างผ่านทางเครื่ องอื่น
สัปดาห์ที่ 2
Web Application
VB-Script
Web Application
Web Application เป็ นโปรแกรมสร้างไว้ที่ Web Server
การประมวลผลจะเกิดขึ้นที่ Web Server หรื อ Client ก็ได้
ได้ ขึ้นอยูก่ บั รู ปแบบภาษาที่เขียน
API
Application Program Interface
เทคโนโลยีในการประมวลผลภาษาที่ฝั่ง Server
API มีหลายเทคโนโลยี เช่น
ASP
PHP
CGI
.NET
Web Server 1 เครื่ องอาจติดตั้ง API ไว้หลายตัว
ข้อดี Web Application
• ลดปัญหาการเขียน Application หลาย Platform
• เพิ่มความสามารถของ Web ในการให้บริ การที่ยดื หยุน่ มากขึ้น
• เพื่อให้ Client สามารถติดต่อกับ Service อื่นๆ ของ Server ได้
•
•
•
•
•
เข้าถึงได้จากทุกที่
แก้ไขที่จุดเดียว
ลดการแจกจ่ายและติดตั้งโปรแกรมที่ลูกข่าย
เครื่ อง Client ไม่จาเป็ นต้องมีความสามารถสูงในการประมวลผล
สามารถ Share ข้อมูลร่ วมกันของผูใ้ ช้งานได้ง่ายและรวดเร็ ว
ข้อเสี ย
• มีความเสี่ ยงในการโจมตีจาก hacker สูงกว่าโปรแกรมธรรมดา
ภาษาทีใ่ ช้ ในการสร้ าง Web Application
HTML +
– JAVA Script
– VB Script
– PHP Script
– J Script
– Perl Script
– C#
ASP / VB Script
•
•
•
•
•
พัฒนาโดย บริ ษทั Microsoft
ทางานบน Windows (แถมมากับ Windows)
รองรับภาษา VB Script และ J Script
การแปลโปรแกรมเป็ นแบบ Interpreter แปลทุกครั้งเมื่อเรี ยกทางาน
ลักษณะภาษามี 2 แบบคือ
1. Server Site Script
โปรแกรมจะถูกแปลที่ฝั่ง Server ทุกครั้งที่ Client เรี ยกข้อมูล
2. Client Site Script
โปรแกรมจะถูกแปลด้วย Web browser ( browser บางตัวไม่รองรับ VB
Script)
Static Web
4.
Browser
1. HTML Request
HTML
IIS
`
3. HTML Rsponse
2. Read HTML File
<Html>
<Html>
…..
<Html>
…..
…..
…..
…..
</Html>
…..
</Html>
</Html>
Client
Server
8.
Browser
1. HTML Request
HTML
6. Send to IIS
<Html>
…..
…..
</Html>
IIS
`
7. HTML Rsponse
Dynamic Web
5. Create HTML
2. ASP Request
<Script>
…..
…..
</Script>
Client
ASP
4. Read Data
3. Read ASP File
Server
การเขียน Web Application ด้วย ASP เป็ นการเขียนโปรแกรม
ไว้ใน text file นามสกุล .ASP เก็บไว้ที่ Server
อาจเก็บเป็ น .HTM ก็ได้หากไม่มีคาสัง่ ที่เป็ นภาษา ASP อยูใ่ นนั้น
รู ปแบบการเขียน VB Script ฝั่ง Server
รู ปแบบการเขียน Script ทีท่ างานในฝั่ง Server ทาได้ 2 แบบ
1. เขียน Script ภายในใช้สัญลักษณ์ <% และ %>
2. เขียนโดยใช้ Tag Script
<SCRIPT RUNAT=SERVER LANGUAGE="VBscript">
และ
</script>
• หมายเหตุ
– ในการเขียนโปรแกรมอาจใช้ผสมกันได้ท้ งั 2 แบบ
รู ปแบบการเขียน VB Script ที่ ทางานฝั่ง Client
รูปแบบการเขียน Script ที่ ทางานฝั่ง Client
ใช้ Tag
<script language = "VBscript" >
และ
</script>
• หมายเหตุ
– Script ที่ฝั่ง Client จะทาการประมวลผลที่ฝั่ง Client
การเขียน Script
เขียนผสมกันระหว่าง VB กับ HTML
<h1>วันที่ <%=now()%></h1>
<%
A=10
Do while a<>0
หรื อ
%>
Response.write a& " <br> "
<%=a%><br>
<%
loop
%>
การทางานของ Script
•
•
•
•
ทางานจากบนลงล่าง ไม่มีการรอ Input
เริ่ มทางานใหม่เมื่อมีการโต้ตอบ เช่นการ Click Link,Click ปุ่ ม
ไม่จดจาสถานะตัวแปร
หยุดการติดต่อกันระหว่าง Client กับ Server เมื่อรับข้อมูล
เรี ยบร้อยแล้ว
Comment
• สาหรับ VB-Script
REM
หรื อ
'
• สาหรับ HTML
<!- -->
ตัวแปร
• DIM
ใช้ประกาศตัวแปร (ไม่ใช้กไ็ ด้)
Dim x,y,z
• Array ใช้กาหนดตัวแปรแบบ Array
Dim x(50)
Dim y
y = Array(1,5,2,3,6,4)
การสร้างตัวแปร
• กาหนดชื่อตัวแปรแล้วให้ค่าได้เลย
Abc=10
X="มมส."
Dim xxx
ตัวแปรอาจถูกสร้างขึ้นตอนใช้งานก็ได้
เช่น x =y+z โดยไม่ตอ้ งประกาศ x,y,z ก่อนหน้านี้
• หากไม่กาหนดค่าไว้ตวั แปรนั้นจะมีค่าเป็ น 0
การแสดงผลข้อมูล
• ใช้ Object response และ method write
เช่น
Response.write "msu"
หากมีหลายข้อมูลให้เชื่อมด้วย &
เช่น
Responsewrite "วันนี้คือ"&date()&time()
การแสดงผลข้อมูล
• แสดงค่าข้อมูลจาก VB แทรกใน HTML
ในตาแหน่งของภาษา HTML สามารถแทรกค่าจาก VB เข้าไปโดยพิมพ์
<%=ค่าที่จะแทรก%>
เช่น
<h<%=x%>> เป็ นการแทรกค่าตัวแปร x เข้าไปใน tag h ถ้า x เป็ น 1 ค่าทั้งหมดเมื่อแสดงผลจะเป็ น
<h1>
• แสดงข้อมูลใน Server site Script
<%
Response.write "ค่าตัวแปร Data คือ"& Data
%>
• แสดงข้อมูลใน Client side Script
<script language =vbscript>
Document.write "ค่าตัวแปร Data คือ"& Data
</script>
ค่าคงที่
• User Define
– CONST
– CONST
x = 50
y = "MSU"
• Standard Constant
– Color
– Date Time
– File
– Char char(13)
– Var Type
เครื่ องหมาย
+
*
/
\
^
&
<
>
=
>=
<=
<>
Not
is
การกาหนดเงื่อนไข
if เงื่อนไข
Then
การทางาน
….
…..
End if
X=10
If x>8 then
response.write x
End if
การกาหนดเงื่อนไข
if เงื่อนไข
การทางาน
….
…..
Else
การทางาน
….
…..
End if
Then
X=10
If x>8 then
response.write x
Else
%>
<h1>ค่าไม่มากกว่า 8 </h1>
<%
End if
ตัวอย่างโปรแกรมตัดเกรด s/u
Score=50
If score > 50 then
response.write “Grade = S”
Else
response.write “Grade = U”
End if
การกาหนดเงื่อนไข
• Select case ตัวแปร
Case ค่าที่ 1 work1
Case ค่าที่ 2 work2
Case ค่าที่ 3 , ค่าที่ 4 work3
Case else work4
End select
ตัวอย่าง Case
X=10
Y=0
Select case x
ถ้า x เป็ น 1 ให้ y=y+10
Case 1 y =y+10
Case 3 response.write "MSU"
Case 5,8 y = x
Case else y = 20 *3
End select
การทาซ้ า For
For ตัวแปร = ค่าเริ่ มต้น to ค่าสิ้ นสุ ด
การทางาน
...
Next
เช่น
For x=1 to 10
response.write x&”<br>”
next
Do While เงื่อนไข
การทางาน
....
Loop
เช่น
Do while x<10
response.write x
x=x+1
Loop
Standard Function
• Math
– Sin
– Cos
– tan
Standard Function
• String
–
–
–
–
–
–
–
–
–
Left
Right
Ltrim
Rtrim
Len
Ucase
Lcase
StrComp
Cint
ตัดตัวอักษรทางซ้ายมา
ตัดตัวอักษรทางขวามา
ตัดช่องว่างทางซ้ายออก
ตัดช่องว่างทางขวาออก
นับความยาวอักษร
ปรับเป็ นตัวพิมพ์ใหญ่
ปรับเป็ นตัวพิมพ์เล็ก
เทียบอักษรว่าเหมือนกัน
เปลี่ยนตัวหนังสื อให้เป็ นตัวเลข
Standard Function
• Date Time
– Date
วันที่ปัจจุบนั
– Now
วันที่และเวลาปัจจุบนั
– Day , Month , Year
วัน เดือน ปี จากวันที่ตอ้ งการ
– Time
เวลาปัจจุบนั
การสร้าง Subroutine
Sub(parameter1,parameter2,….)
การทางาน
.....
.....
End sub
เช่น
Sub test(x,y)
response.write x&y
End sub
การเรี ยก Subroutine
• เรี ยกชื่อ Sub พร้อม parameter
• หาก Sub นั้นมี parameter มากกว่า 1 ตัวให้ใช้คาว่า call
นาหน้าชื่อ sub
เช่น
call test("xxx",5)
การสร้าง Function
สัปดาห์ที่ 3
หลักการสร้างการโต้ตอบกับผูใ้ ช้งาน
แนวทางการสร้างการโต้ตอบ
เครื่ องมือการโต้ตอบกับผูใ้ ช้งาน
1. Tag <a>
2. form
3. Even ของ TAG
Tag A
• A
ใช้ทา Link เชื่อมไปยังข้อมูลต่างๆ
Href กาหนดที่หมาย ถ้าเป็ น web อื่นให้ใส่ http:// ด้วย เช่น
href=http://www.google.com
ถ้าเป็ นไฟล์ในเครื่ องให้ใส่ ชื่อไฟล์ ไม่ตอ้ งใส่ http
ถ้าเป็ นไฟล์ปัจจุบนั ที่กาลังเปิ ด ให้ใส่ ? ไม่ตอ้ งใส่ ชื่อไฟล์
Target กาหนดหน้าจอที่จะเปิ ดหากไม่กาหนดจะเปิ ดจอเดิม _blank หน้าจอ
ใหม่
Title กาหนดตัวอักษรบน Mouse เมื่อสัมผัส
Tag <a>
• Tag <a> สามารถส่ ง Parameter ไปให้กบั ไฟล์ปลายทาง
เพื่อประมวลผลได้
วิธีการส่ ง จะทาได้โดย กาหนด Parameter หลังเครื่ องหมาย ? ที่อยู่
ท้ายชื่อไฟล์ กาหนดชื่อของ parameter และให้ค่าด้วย
เครื่ องหมาย = แล้วตามด้วยค่า เช่น
<a href="abc.asp?menu=10">
กรณี มี Parameter หลายตัวให้ใช้เครื่ องหมาย & ขั้นไว้ เช่น
<a href="abc.asp?menu=10&name=abc">
การสร้าง Link
• <A>
• <a href="URL" >
• URL
– Filename?parameter1=value1&parameter2=value2
?
&
http://www.a.com/x.asp?menu=1&data=abc
หมายเหตุ
• การส่ ง parameter ด้วย tag <a> Server จะมองค่าของ
ข้อมูลเป็ น Text ทั้งหมด ดังนั้นถ้าส่ งค่าคะแนนไปกับ
parameter ค่าของคะแนนจะเป็ นตัวหนังสื อ เช่น
<a href="x.asp?score=10">
Score จะมีค่าเป็ นตัวหนังสื อ "10" ดังนั้นเวลานาไปเทียบค่ากับ
ข้อมูลที่เป็ นตัวเลข จะต้องแปลงให้เป็ นค่าตัวเลขก่อนโดยใช้
Function Cint เช่น
if Cint(request("score"))=5 then
......
Tag map
ใช้กาหนดจุดเพื่อ link ไปยังข้อมูลอื่น โดยกาหนดจุดเป็ นรู ปทรงต่างๆ
<map name="map_panda">
<area alt="yyy" shape="circle" coords="200, 180, 170" href="http://www.msu.ac.th" />
<area alt="xxx" shape="rect" coords="0,0,100,100" href="http://www.wbi.msu.ac.th" />
</map>
<img src="panda.jpg" usemap="#map_panda" height="500" width="500" />
0,0
200,180
panda.jpg
100,100
300,300
Tag area
• <area shape="circle" coords="200, 200, 170"
href="http://www.bamboolabcode.com" />
• <area shape="rect" coords="0, 0, 20, 50"
href="http://www.bamboolabcode.com" />
การสร้าง Form
<form>
<input type=....>
<input type=....>
......
<input type=submit>
</form>
<Form><input…></Form>
Form Attribute
Method เป็ นการกาหนดวิธีการส่ งข้ อมูล มีค่า เป็ น
post ไม่ จากัดความยาวในการส่ ง
get ส่ งข้ อมูลได้ ไม่ เกิน 1024 ตัวอักษร
ถ้ าไม่ กาหนดจะมีค่าเป็ น Get
ตัวอย่ าง <form method=post>
Action เป็ นการกาหนดข้ อมูลใน Form ให้ ส่งไปยังเป้าหมายที่
ต้ องการ ( ไฟล์ที่จะรับค่ า )
ถ้ าไม่ กาหนดจะหมายถึงส่ งมาไฟล์ที่ form นั้นอยู่
ตัวอย่ าง <form action="abc.asp">
Form.asp
ส่ งค่าด้วย form
การส่ งค่าด้วย form ทาได้ 2 แบบ คือ
1. ส่ งจาก tag <input>,<select>,<textarea>
2. ส่ งจาก Attribute action ของ form เช่น
<form action="abc.com/test.asp?menu=10">
การส่ งแบบนี้จะใช้แทนการซ่อนข้อมูลไปกับ form ด้วย tag
<input type="hidden">
รูปแบบการเติมค่ า
•
•
•
•
•
•
•
•
•
Text Box
Password Box
Text Area
Checkbox
Radio Buttons
Pop-up Menu
Scrolling List
Hidden Field
Submit Button
Subtag <input>
Input Attribute
type เป็ นการกาหนดชนิดการรับค่ า
name เป็ นการกาหนดชื่อให้ กบั ข้ อมูลแต่ ละ Input ทีส่ ่ งไป
value เป็ นการกาหนดค่ าให้ กบั Input ไว้ ล่วงหน้ า
Sample
<input type=text name=username value='xxx'>
Text box
ใช้ ในการเติมข้ อมูลทีเ่ ป็ นตัวอักษร หรือตัวเลข
<INPUT
TYPE ="text"
NAME ="myText"
SIZE ="30"
MAXLENGTH="40"
VALUE ="default value">
Password Box
ใช้ ในการเติมข้ อมูลทีเ่ ป็ นตัวอักษร หรือตัวเลข โดยผู้ใช้ มองไม่ เห็นค่ าที่เติม
<INPUT
TYPE ="Password"
NAME ="mySecret"
SIZE ="30"
MAXLENGTH="40"
VALUE="default value">
text area
ใช้ ในการเติมข้ อมูลทีเ่ ป็ นตัวอักษร หรือตัวเลขทีม่ หี ลายบันทัด
<TEXTAREA
NAME ="myText"
ROWS =5
COLS =40>
Default Text
</TEXTAREA>
check box
ใช้ รับค่ าแบบเลือกตอบ โดยเลือกได้ หลายค่ า
<INPUT
TYPE="Checkbox"
NAME="myCheck"
CHECKED
VALUE="box1">
check box
<input type="checkbox" name=box value="1">
<input type="checkbox" name=box value="2">
<input type="checkbox" name=box value="3">
ค่ าจาก check box
ค่ าทั้งหมด
request("check box name")
เช่ น
request("box")
ค่ าจาก check box
ค่ าตามลาดับ
request("check box Name")(ลาดับ)
เช่ น
request("box")(1)
Radio Buttons
ใช้ รับค่ าแบบเลือกตอบ โดยเลือกได้ ค่าเดียว
<INPUT
TYPE="radio"
NAME="myButtons"
CHECKED
VALUE="Dog">
<INPUT
TYPE="radio"
NAME="myButtons"
VALUE="Cat">
Select
ใช้ทารายการแบบเลือกตอบ
<SELECT NAME="myPopup">
<OPTION VALUE="1">DOG
<OPTION VALUE="2" SELECTED>CAT
<OPTION VALUE="3">RAT
</SELECT>
Scrolling List
ใช้ทารายการแบบเลือกตอบ
<SELECT MULTIPLE SIZE=3 NAME="myList">
<OPTION VALUE="1">first
<OPTION VALUE="2" SELECTED>second
<OPTION VALUE="3">third
<OPTION VALUE="4">fourth
</SELECT>
Hidden Field
ใช้ ซ่อนข้ อมูลไปกับ form
<INPUT
TYPE
="Hidden"
NAME
="myInvisible"
VALUE ="you can't see this!">
Submit
ใช้ ส่งข้ อมูลใน form ไป Server
<Input Type="submit" value ="OK">
จานวน Item หรือค่ าที่ส่งมา
นับจานวนค่ าทีส่ ่ งมา
Count Method
Request ("check box Name").Count
Sample
request("box").count
QueryString Collection
x.htm?car_id=288&vat=100
QueryString
Using Request Object
ค่ าทั้งหมด
Request.QueryString
ค่ าบางตัว
- Request("x")
- Request(2)
ลาดับทีส่ ่ งมา
จานวน QueryString
Request.QueryString.Count
แบบฝึ กหัด
• สร้าง form รับค่าแบบต่างๆดังนี้
–
–
–
–
–
–
–
–
–
Text Box
Password Box
Text Area
Checkbox
Radio Buttons
Pop-up Menu
Scrolling List
Hidden Field
Submit Button
• แสดงค่ าทีร่ ับออกมาทั้งหมด
• สร้ างเมนูโดยใช้ tag a เพือ่ link ไปยังเว็บไซต์ Google พร้ อมทั้งส่ งคาค้ นไปด้ วย
สัปดาห์ที่ 4
การติดต่อฐานข้อมูล
ASP & DB
• สร้างฐานข้อมูลด้วยโปรแกรมจัดการฐานข้อมูล
• เชื่อมโปรแกรมกับฐานข้อมูล
• เรี ยกใช้ฐานข้อมูลผ่านคาสัง่ SQL
สร้างฐานข้อมูลด้วย MS Access
• สร้างตาราง
• กาหนดความสัมพันธ์ตาราง
สร้างฐานข้อมูล
สร้างความสัมพันธ์
การเขียน code เชื่อมต่อฐานข้อมูล
• ใช้ DSN
• ไม่ใช้ DSN
ใช้ DSN
• สร้าง DSN ใน ODBC
• สร้าง Object ติดต่อฐานข้อมูล
Set MyConn = Server.CreateObject("ADODB.Connection")
• เปิ ดฐานข้อมูล
MyConn.open "DB"
• ใช้งานฐานข้อมูลด้วยคาสัง่ SQL
ไม่ใช้ DSN
• สร้าง Object ติดต่อฐานข้อมูล
Set MyConn = Server.CreateObject("ADODB.Connection")
• เปิ ดฐานข้อมูล
MyConn.Open "Driver={Microsoft Access Driver
(*.mdb)}; DBQ=" & Server.MapPath("sample.mdb")
• ใช้งานฐานข้อมูลด้วยคาสัง่ SQL
การใช้คาสัง่ SQL กับฐานข้อมูล
• สร้าง Record Set โดยให้มีค่าจากการกาหนดคาสัง่ SQL โดย
Object ที่เชื่อมต่อฐานข้อมูล ผลที่ได้จากคาสัง่ sql จะเกิดขึ้นที่
Record set
set rs = MyConn.execute(sql_command)
Record set
Database Object
ข้อควรสังเกตุในการใช้ฐานข้อมูล
• ไฟล์ .mdb ไม่สามารถเขียนข้อมูลลงได้ เนื่องจากไม่ได้กาหนดสิ ทธิ์
ให้ user iusr เขียนหรื อแก้ไขข้อมูลได้ ให้แก้ไขโดยการกาหนด
permision ไฟล์ให้ iusr เขียนได้
• ฐานข้อมูลที่ใช้ไม่จาเป็ นต้องเป็ น MS Access ก็ได้
SQL Command
•
•
•
•
Select
Insert
update
Delete
Insert
• Insert into table values(value1,2,3,....)
• Insert into table (field1,2,3,...)
values(value1,2,"x",....)
Insert into user values('x',10)
Insert into user (name,age) values('x',10)
เทคนิค
ให้กาหนดคาสัง่ sql ไว้ในตัวแปรก่อนเพื่อความสะดวกในการใช้งาน
Text_sql="select * from data"
set rs = MyConn.execute(Text_sql)
หลักการ
• แสดง form ป้ อนข้อมูล
• ตรวจสอบว่ามีซ้ าข้อมูลเดิมหรื อไม่โดยการอ่านข้อมูลจากฐานข้อมูลตาม
Primary Key
• หากไม่ซ้ าเพิ่มข้อมูลจาก form ลงในฐานข้อมูล
เทคนิคการเขียน SQL string
เขียนให้ถกู ตามรู ปแบบ sql
• Sql="select * from x where data='x' "
•
•
•
•
ลบ
Sql="select * from x where data='' "
เติม ""
Sql="select * from x where data='""' "
Sql="select * from x where data='"&&"' "
เติม &&
Sql="select * from x where
data='"&request("form_data")&"' "
เติม request("form_data")
Code Insert
<form>
<input type=text name=name_in>
<input type=submit>
<form>
<%
เครื่ องหมาย '
sql="insert into db (name) values(' "&request("name_in")&" ')"
set rs=con.execute(sql)
%>
ค่าที่ดึงมาจาก form
Select
select [field] from [table] [where field
condition] [order by field [option]]
• select name,password from user
• select name,password from user where
name='xxx'
• select * from user where name like 'x%'
order by password desc
ข้อมูลเพิ่มเติม
• http://www.w3schools.com/sql/default.asp
การดึงค่ามาแสดงทั้งหมด
Sql="select * from db"
Set rs=con.execute(sql)
Do while not rs.eof
response.write rs("name")
rs.movenext
loop
Rs.close
Con.close
rs
ข้อสังเกตุ
• ในการ Select ข้อมูลจะถูกเก็บใน Record set ซึ่งเป็ นเหมือน
ตาราง (View) ที่มีเฉพาะข้อมูลที่ Select ได้
• กรณี select จากหลาย table ไม่ควรตั้งชื่อ field เหมือนกันใน
แต่ละ table
• สามารถใช้หลาย record set ในเวลาเดียวกันได้
• การกาหนดค่าที่เป็ นตัวอักษรให้ใส่ เครื่ องหมาย ' ครอบไว้
แบบฝึ กหัด
• สร้าง form เพื่อรับข้อมูลจากบัตรประชาชน และเก็บลงในฐานข้อมูล
• แสดงข้อมูลในฐานข้อมูลทั้งหมด เรี ยงตามชื่อ
• สร้างให้การทางานทั้ง 2 อยูใ่ นรู ปแบบเมนู
สัปดาห์ที่ 5
SQL Update,delete
Update
• Update table set
field1=value1,field2=value2,....
[where field เงื่อนไข]
Update user set name='xxx',age=50 where
id=20
หลักการ
1.
2.
3.
4.
5.
อ่านข้อมูลจากฐานข้อมูล
เลือกรายการที่ตอ้ งการ Update
แสดงค่าเดิมที่มีใน form
แก้ไขค่าด้วย form
เขียนค่ากลับคืนฐานข้อมูล
Delete
• Delete from table where field เงื่อนไข
delete from user where name='x' and age=10
หลักการ
1.
2.
3.
4.
อ่านข้อมูลจากฐานข้อมูล สร้างเป็ นรายการตัวเลือกสาหรับการลบ
เลือกรายการที่ตอ้ งการลบ
แจ้งข้อความยืนยันการลบ
หากมีการยืนยันให้ลบข้อมูลนั้น
ข้อควรระวัง
• การ delete และ update ให้ระวังเงื่อนไขในการทางาน
(where) เนื่องจากหากไม่กาหนดจะเป็ นการ ลบ หรื อ แก้ไขข้อมูล
ทั้งหมด ทาให้เกิดความเสี ยหายแก่ขอ้ มูลได้
SQL Note
• ควรกาหนดคาสัง่ SQL ไว้ในตัวแปรก่อนนาไป Execute
• ก่อน Execute ควรตรวจสอบความถูกต้องของ String ก่อน
sql="select * from user where
name='"&request("name")&"'"
' set rs=conn.execute(sql)
response.write sql
แสดงค่า sql
• อย่าลืมปิ ดฐานข้อมูล เพราะการเปิ ดฐานข้อมูลจะทาให้ server ใช้
ram ในการจัดเก็บข้อมูลขึ้นเรื่ อยๆ
แบบฝึ กหัด
จากสัปดาห์ที่แล้ว
• ให้สร้างเมนูเพื่อทาการลบข้อมูล โดยให้เติมชื่อคนที่ตอ้ งการลบ
• ให้สร้าง Link เพื่อทาการลบไว้ในรายการแสดงผล
สัปดาห์ที่ 6
การจดจาระหว่าง Client - Server
• Session
• Cookies
Session Object
• ออปเจ็กต์ Session
ออปเจ็กต์ Session ใช้เก็บข้อมูลการใช้งานของ Client แต่ละเครื่ องที่
ส่ งการร้องขอเข้ามา
รู ปแบบ คือ
Session[.collection/property/method/event]
เช่น
Session("name")="aaa“
เป็ นการสร้างและกาหนดค่า
response.write (session("name"))
เรี ยกใช้ session
Session.TimeOut = 99
กาหนดการหมดอายุ session
Session("x")=5
Session("x")=20
Session("x")=0
`
server
A
B
client
C
Session Property
•
•
•
•
CodePage
LCID
SessionID
Timeout
Session collection property
• Contents
• StaticObjects
Session methods
• Abandon
• Contents.Remove
• Contents.RemoveAll
การสร้างและให้ค่า
Session("name")=value
Session("id0012")=5
Session("id0013")="abcd"
Session(10)=5
Session(30)="msu"
Session(abcd)=5
ผิด
ถูก
Session(“abcd”)=5
การเรี ยกใช้งาน
session("name")
Sample
Response.write session("aaa")
Session("zzz")=Session("zzz")+10
การเรี ยกดู session ทั้งหมดที่มี
For Each item in Session.Contents
response.write session(item)
Next
การลบ Session บางตัว
Session.Contents.Remove("name")
การลบ Session ทั้งหมด
Session.Contents.RemoveAll
Cookies
• Cookies คือชุดของข้อมูลที่ Server เก็บไว้ยงั เครื่ องของ
client เพื่อให้ Server ที่สร้างร้องขอข้อมูลนี้ได้ในภายหลัง
• หมายเหตุ
User สามารถกาหนดตัวเลือกไม่ให้บราวเซอร์ใช้ cookie ก็ได้
Cookies
• การให้ ค่า cookies
Response.Cookies(name).Attribute=Value
Name คือ ชื่อที่ใช้ระบุชื่อ cookie ที่ตอ้ งการ
Value คือค่าของข้อมูลที่ตอ้ งการเก็บในใน cookies ที่สร้างขึ้น
Attribute คือค่าบอกคุณสมบัติซ่ ึงตัวเลือกของ Attribute สาหรับ
Response มี 5 ตัวดังต่อไปนี้:
Domain กาหนด Domain ที่สร้าง Collection Cookies
Expires กาหนดวันที Cookies นั้นจะหมดอายุ
HasKeys ถ้าเป็ นค่า True แสดงว่า Cookies นั้นยังมี
Path เป็ น Attribute กาหนด Path ที่ Cookies ถูกส่ งออกไป
Secure ระบุการใช้ช่องทางการที่ปลอดภัยสาหรับ cookie
การสร้าง Cookies
• ใช้ Object response ในการสร้าง
Response.Cookies("Main") = "DevSite"
Response.Cookies("Prd1") = "ASP"
Response.Cookies("Prd2") = "VBScript"
Response.Cookies("id")=10
การเรี ยกใช้ Cookies
การเรี ยกใช้ Object request
response.write
request.Cookies("Main")
a= request.Cookies("id") + 10
การประยุคใช้ Session และ cookies
• ใช้ในการจดจา user โดยการใช้จา username เมื่อ login
• วิธีการ
– ป้ อน username และ password จาก textbox
– Select ข้อมูลจากฐานข้อมูล โดย select ตาม username และ
password ที่ป้อนเข้ามา
– ถ้าพบให้สร้าง cookies หรื อ session จา username ไว้
– นาค่าไปใช้ในการทาคาสั่งต่างๆของ user
แบบฝึ กหัด
• ให้สร้างฐานข้อมูลประกอบด้วยตาราง member มีขอ้ มูล
ประกอบด้วย username,password,name
• สร้างคาสัง่ ในการสมัครสมาชิก
• สร้างคาสัง่ login จาด้วย session หรื อ cookies
• สร้างคาสัง่ แสดงข้อมูลส่ วนตัวของผู ้ login
สัปดาห์ที่ 7
• Server Object และการเรี ยกใช้งาน
• Request / Response
• Session และ Application
• Cookies
Server Object และการเรี ยกใช้งาน
• ASP จะประกอบไปด้วย ออปเจ็กต์ ที่มีอยู่ ทั้งหมด 7 ประเภท
1. ออปเจ็กต์ Request
2. ออปเจ็กต์ Response
3. ออปเจ็กต์ Application
4. ออปเจ็กต์ Session
5. ออปเจ็กต์ Server
6. ออปเจ็กต์ ObjectContext
7. ออปเจ็กต์ ASPError
ส่ วนประกอบของ Object
• property
• collection property
• method
• event
Collection Property
• คือข้อมูลที่เก็บไว้ดว้ ย Property เดียวกันแต่ใช้ name ในการเข้าถึง
ต่างกัน เช่น
<%
response.cookies("name")="xxx"
response.cookies("password")="abc"
response.cookies("Age")=10
%>
Property คือ
cookies
name
คือ
name,password,age
สามารถใช้ Loop For Each item in ... Next ในการดึงค่า
Collection ออกมาได้ เช่น
<%
For Each item In Request.ServerVariables
Response.Write item & " = " &
Request.ServerVariables(item) & "<BR>"
Next
%>
Key
• ในบาง Property มีการใช้ name ซ้ ากันได้ดงั นั้น การเข้าถึง
property เหล่านั้นจะต้องใช้ Key มาช่วยเพื่อให้เข้าถึงข้อมูลแต่
ละตัวได้ เช่น
response.cookies("book")("cartoon")="xmen"
response.cookies("book")("Story")="Harry protter"
response.cookies("book")("Computer")="C++"
Request Object
ใช้ในการตรวจสอบข้อมูลของ Client ที่ส่งมาจาก Browser
รู ปแบบ คือ
Request.collection/property/method](variable)
เช่น
request.cookies("my_site")("username")
request.form("file_name")
Request property
• TotalBytes
Request collection property
•
•
•
•
•
ClientCertificate
Cookies
Form
QueryString
ServerVariables
Response Object
ใช้ในการส่ งค่าจาก Server กลับไป Client
รู ปแบบ คือ
Response[.collection/property/method] [ = value]
เช่น
response.cookies("my_site")("username") = "abc"
response.redirect ("http://www.yahoo.com")
response.write ("test")
response property
• Expires
• ExpiresAbsolute
response collection property
• Cookies
response methods
• Redirect (URL)
• Write (variant)
Session Object
• ออปเจ็กต์ Session
ออปเจ็กต์ Session ทาหน้าที่ดูแลและเก็บข้อมูลการใช้งานของไคลเอ็นต์
แต่ละเครื่ องที่ส่งการร้องขอเข้ามา
รู ปแบบ คือ
Session[.collection/property/method/event]
เช่น
Session("name")="aaa"
response.write (session("name"))
Session.TimeOut = 99
Application Object
• ออปเจ็กต์ Application
ออปเจ็กต์ Application Object ใช้ในการ Share ค่า ระหว่าง Client ที่
ส่ งการร้องขอมา
รู ปแบบ คือ
Application [.collection/method/event]
เช่น
application("vartime")="xxx"
application("vartime")="xxx"
Application Collection Property
• Contents
• StaticObjects
Application Method
•
•
•
•
Contents.Remove
Contents.RemoveAll
Lock
Unlock
Server Object
• ออปเจ็กต์ Server ทาหน้าที่ในการติดต่อกับ Function ต่างๆที่มีใน
Server
รู ปแบบ Server[.property/method]
ชื่อ
ประเภท
คาอธิบาย
ScriptTimeout
Property
CreateObject
method
กาหนดเวลาใช้ในการประมวลผลสคริ ปต์คา่
ดีฟอลต์คือ 90 วินาที
สร้างออปเจ็กต์จากคอมโพเนนต์ต่างๆ
HTMLEncode
method
แปลงข้อความให้อยูใ่ นรู ปของโค้ด HTML
MapPath
method
แปลงจากพาธให้เป็ นพาธเสมือน
URLEncode
method
แปลงข้อความให้อยูใ่ นรู ปของ URL
ObjectContext
เป็ นออปเจ็กต์ที่มีประโยชน์กบั Microsoft Transaction Server
เพราะออปเจ็กต์น้ ีจะใช้ประโยชน์ในการจัดการกับ transaction
ทั้งเมื่อ ส่ ง(Commit) หรื อยกเลิก (Abort)
ชื่อ
ประเภท
คาอธิบาย
SetComplete
Method
จะแสดงถ้าสคริ ปต์น้ นั ยังไม่เสร็จสมบูรณ์
SetAbort
Method
ยกเลิกการสร้าง transaction จาก ASP
OnTransactionCommit
Event
เกิดขึ้นเมื่อมีการส่ งสคริ ปต์ออกไป
OntransactionAbort
Event
เกิดขึ้นเมื่อมีการยกเลิกการส่ งสคริ ปต์ออกไป
ASPError Object
ทาหน้าที่เก็บรวบรวมข้อมูลที่เป็ นรายละเอียด ของการเกิดข้อผิดพลาด
มีพร็ อพเพอร์ ต้ ี 9 ตัวที่เป็ นแบบอ่านอย่างเดียว
Programming Plan
•
•
•
•
Global & Local Value
Menu & Parameter
Sub
Function
สัปดาห์ที่ 8
สอบกลางภาค
สัปดาห์ที่ 9
• แนวทางการพัฒนาเว็บ
แบบที่ 1
แบบแยกไฟล์
1.asp
<a href=2.asp>
2.asp
3.asp
<form Action=3.asp>
<%
.........
.........
.........
response.redirect "1.asp"
%>
แบบที่ 2
• แบบรวมไฟล์
Menu
เลือกการทางาน
การทางาน
<a href=my.asp?menu=1>add_data</a>
<a href=my.asp?menu=2>Delete</a>
<%
select case request("menu")
Case 1 add()
Case 2 del()
End select
Sub add()
……….. response.redirect "?"
End sub
Sub del()
………..response.redirect "?"
End sub
%>
<%Sub …..
If request (ข้อมูลจาก Form) <>?? then
%>
<form>
<input type=hidden name=menu value=…>
</form>
<%
Else
จัดการกับ data ที่ส่งมาจาก form
response.redirect "?"
End if
End Sub%>
แนวคิดในการวางแผนเขียนโปรแกรม
• วิเคราะห์ระบบ ให้เข้าใจอย่างลึกซึ้งถึงความต้องการ และ function
การใช้งานของผูใ้ ช้
• ออกแบบหน้าจอการใช้งานด้วยกระดาษ อาจใช้การวาดด้วยมือ
• ออกแบบฐานข้อมูล
• เริ่ มเขียนโปรแกรม
เริ่ มเขียนโปรแกรม
• เขียนส่ วนที่ใช้ในการเก็บข้อมูลพื้นฐานก่อน เช่น การสมัครสมาชิก หรื อ
การเพิ่มสิ นค้า
• สร้างส่ วนที่ใช้ในการเข้าสู่ระบบ (login) ของสมาชิกต่างๆ ข้อมูล
สมาชิกอาจก็บไว้ใน table เดียวกันทุกระดับได้ เลือกใช้ session
หรื อ cookies ในการจาการ login
• สร้างส่ วน log out
• สร้างส่ วนในการแสดงผล
ส่ วนในการแสดงผล
• การแสดงผลข้อมูลที่เป็ นรายการ พยายามทาให้รายการเชื่อมโยงไปยังกระบวนการ
อื่นที่เกี่ยวข้องได้ เช่นการลบ การแก้ไข หรื อการแสดงรายละเอียดเพิม่ เติมของ
ข้อมูลนั้น และแสดงข้อมูลที่คาดว่าผูใ้ ช้น่าจะสนใจเท่านั้น ไม่จาเป็ นต้องแสดงทุก
field
• ทาให้รายการอยูใ่ นแบบตารางจะได้ดูง่าย และควรผูใ้ ช้สามารถ click หัวตาราง
เพื่อเรี ยงข้อมูลตามต้องการได้
• หากข้อมูลมีปริ มาณไม่มากนัก และการเข้าใช้งานมีนอ้ ย ไม่ควรแสดงเป็ นหน้าๆ
เพราะทาให้ผใู้ ช้งานค้นหาข้อมูลยาก และดูภาพโดยรวมได้ยาก
• ใช้รูปภาพในการโต้ตอบ เช่น แทนการลบ แทนการแก้ไข แทนการแสดง
รายละเอียด
• ไม่ควรให้ผใู ้ ช้งาน click หลายครั้งเพื่อให้ได้ขอ้ มูลที่ตอ้ งการ
• อย่ามัวปรับแต่งความสวยงาม
การสร้างความปลอดภัยให้ web
ตัวอย่างระบบกระดานข่าว
สมัครสมาชิก
ตั้งคาถาม
แสดงคาถาม
ค้นหาคาถาม
ตอบคาถาม
• คาถาม
–
–
–
–
–
หัวข้อที่ถาม
รายละเอียด
ข้อมูลผูถ้ าม
วันที่ถาม
จานวนคนอ่าน
• คาตอบ
– รายละเอียดคาตอบ
– ข้อมูลผูต้ อบ
– วันที่ตอบ
• แสดงรายการคาถาม
– หัวข้อ
– วันที่
– ผูถ้ าม
– จานวนคนอ่าน
– หากเป็ นเจ้าของคาถามสามารถลบคาถามตนเองได้
– เรี ยงข้อมูลตามรายการข้างบนได้
สัปดาห์ที่ 11-12
ตัวอย่างระบบขายสิ นค้า
•
•
•
•
•
เพิ่มสิ นค้า
แสดงสิ นค้า
ค้นหาสิ นค้า
หยิบลงตระกร้า
แสดงรายการตระกร้า
การ Upload file
สัปดาห์ที่ 13-15
PHP Programming
Download PHP
http://www.php.net/downloads.php
แตกไฟล์ใน c:\php
แก้ชื่อไฟล์ php.ini-development เป็ น php.ini
การติดตั้ง
ทดสอบโปรแกรม text.php
ตัวเปิ ด-ปิ ด tag php
คาสั่งแสดงผล
ประกาศตัวแปร num
<form>
<input type=text name=x>
<input type=submit>
</form>
<?php
echo $_GET["x"];
$num = $_GET["x"];
if ( $num > 100 )
{
echo "many";
}
?>
ดึงค่าจาก form
Test.php
Test.asp
<form>
<input type=text name=x>
<input type=submit>
</form>
<?php
if ($_GET["x"] != "")
{ echo $_GET["x"];}
else
{ echo "No data"; }
?>
<form>
<input type=text name=x>
<input type=submit>
</form>
<%
If request("x")<>"" then
Response.write request("x")
else
Response.write "No data";
End if
%>
PHP function
• http://code.function.in.th/php
การเปิ ดปิ ดคาสั่ งภาษา php
<?
คาสัง่
?>
ใช้เปิ ด
ใช้ปิดคาสัง่
สัญลักษณ์ปิดคาสัง่
เมื่อเขียนคาสัง่ เสร็ จแล้วให้ใส่
;
การแสดงผล
echo
echo "www", "bamboolabcode", "com";
print
print "www bamboolabcode com";
printf
printf ( format, string1, string2, ..., stringn );
printf( "%'?8d %'08d", 300, 300 );
%b แสดงเลขจานวนเต็มฐาน 2
%o แสดงเลขจานวนเต็มฐาน 8
%d แสดงเลขจานวนเต็มฐาน 10
%x, $X แสดงเลขจานวนเต็มฐาน 16
%e แสดงเลขแบบ double ที่อยูใ่ นรู ปแบบยกกาลัง
%f, $F แสดงเลขแบบ double ที่ไม่อยูใ่ นรู ปแบบยกกาลัง
%u กาหนดให้มีเครื่ องหมาย '+' หรื อ '-' อยูข่ า้ งหน้า
%c แสดงตัวอักษรที่ถูกกาหนดโดย ascii
%S แสดงข้อความแบบ string % แสดงเครื่ องหมาย '%'
%'ตัวอักษร แสดงตัวอักษร ( ไ้้ดต้ วั เดียวเท่านั้น )
%- กาหนดให้ตวั อักษรชิดซ้าย
การประกาศตัวแปรภาษา php
syntax :
$ชื่อตัวแปร;
$ชื่อตัวแปร = ค่ าข้ อมูล;
$ชื่อตัวแปร1, $ชื่อตัวแปร2, $ชื่อตัวแปร3;
example:
$count;
$bool = true;
$first_name, $last_name, $sex;
comment:เนื่องจาก ภาษา php ไม่ได้เข้มงวดในเรื่ องของชนิ ดข้อมูล
เหมือนกับภาษาอื่นๆ ดังนั้นการกาหนดค่าให้กบั ตัวแปร สามารถกาหนดให้เป็ น
ชนิดไหนก็ได้ ( สลับไปมาก็ได้ )
if
การถอดค่าจาก php ใส่ ใน html
เมื่อต้องการค่าจาก php แทรกไว้ใน html ให้เขียน
<?=ค่า?>
เช่น
<?
x=10;
?>
<hr size=“<?=x?>”>
Select ODBC DSN
• Create an ODBC Connection
• $conn=odbc_connect('My_DSN','','');
$sql="SELECT * FROM customers";
$rs=odbc_exec($conn,$sql);
• การดึงค่า field
• $compname=odbc_result($rs,"CompanyName");
field
• จานวนแถวทั้งหมดที่ได้
• odbc_fetch_row($rs)
• ปิ ดฐานข้อมูล
• odbc_close($conn);
•
<?php
$conn=odbc_connect('northwind','','');
if (!$conn)
{exit("Connection Failed: " . $conn);}
$sql="SELECT * FROM customers";
$rs=odbc_exec($conn,$sql);
if (!$rs)
{exit("Error in SQL");}
echo "<table><tr>";
echo "<th>Companyname</th>";
echo "<th>Contactname</th></tr>";
while (odbc_fetch_row($rs))
{
$compname=odbc_result($rs,"CompanyName");
$conname=odbc_result($rs,"ContactName");
echo "<tr><td>$compname</td>";
echo "<td>$conname</td></tr>";
}
odbc_close($conn);
echo "</table>";
?>
