Transcript โครงสร้างของเอกสาร ASP.NET

บทที่ 1
แนวคิดการพัฒนาแอพพลิเคชั่นบนเว็บ
รายวิชา
การเขียนโปรแกรมบน WWW
1
ความรู้เบือ้ งต้ นเกี่ยวกับเว็บ
 Internet คือ ระบบเครือข่ายคอมพิวเตอร์ทใ่ี หญ่ทส่ี ดุ ในโลกเกิดจากการ
เชื่อมโยงของคอมพิวเตอร์หลายล้านเครือ่ งทีก่ ระจายอยูต่ ามทีต่ ่างๆ ใน
โลก อินเตอร์เน็ตเป็ นแหล่งทีร่ วมของข้อมูลมหาศาลและเป็ นช่องทาง
ติดต่อสือ่ สารเพือ่ แลกเปลีย่ นข้อมูลทีส่ ะดวกและรวดเร็วบริการยอดนิยมบน
อินเตอร์เน็ต ได้แก่ เว็บเพจ (www) อีเมล์ และ Instant Messageing
เช่น MSN Messenger, Yahoo Messenger, ICQ เป็ นต้น
 www (World Wide Web) เป็ นบริการข้อมูล โดยข้อมูลของ www
จะอยูใ่ นรูปเอกสารแบบ Hypertext ซึง่ ภายในเอกสารจะมีจุดเชื่อมโยง
(link) ไปยังเอกสารอื่นๆ ทีเ่ กีย่ วข้อง เอกสารต่างๆ ทีเ่ ชื่อมโยงกันเหมือน
ใยแมงมุม เป็ นทีม่ าของคาว่า Web.
2
ความรู้เบือ้ งต้ นเกี่ยวกับเว็บ
 HTTPเป็ นโปรโตคอลสำหรับเปิ ดดูขอ้ มูลจำก www เรียกใช้งำนได้โดย
ระบุ http:// และตำมด้วย URL ในช่องกรอก Address ด้ำนบนของ
โปรแกรมเว็บบรำวเซอร์
 URL (Uniform Resource Locator) คือ ข้อควำมทีบ่ อก
ตำแหน่งของข้อมูลใน Internet ไม่วำ่ จะเป็ น Web page, File ประเภท
ต่ำงๆ เช่น รูปภำพ เสียง
URL ประกอบด้วย โปรโตคอล + domain name + (directory ทีเ่ ก็บไฟล์)
ชื่อไฟล์ เช่น http://www.enjoyday.net/webtutorial/css/index.html
3
ความรู้เบือ้ งต้ นเกี่ยวกับเว็บ
 Webpage คือ หน้ำเอกสำรของบริกำร www ทีอ่ ยูใ่ นรูปแบบ HTML
ภำยในประกอบด้วยข้อควำม ภำพ ลิงค์ Web page แต่ละหน้ำจะเชือ่ มโยงกัน
เพือ่ ให้เรำเรียกดูเอกสำรหน้ำอืน่ ๆ ทีเ่ กีย่ วข้องได้อย่ำงสะดวก ไม่ตอ้ งระบุ URL
เองทุกครัง้
 Homepage คือ Web page หน้ำแรกทีผ่ ใู้ ช้เห็นเมือ่ เข้ำมำยัง Web site มัก
ถูกออกแบบให้โดดเด่น น่ำสนใจ และมีลงิ ค์เชือ่ มโยงไปเว็บเพจหน้ำอื่นๆ
 Website คือ Web page หลำยๆ หน้ำทีม่ เี นื้อหำเกีย่ วข้องกัน ประกอบเข้ำ
ด้วยกัน
4
ความรู้เบือ้ งต้ นเกี่ยวกับเว็บ
 Web Browser คือ โปรแกรมสำหรับเรียกดูเว็บเพจ โดยจะแปลคำสัง่
HTML แล้วประมวลผลเพือ่ แสดงผลออกมำเป็ น Web page เช่น Internet
Explorer (IE), Mozilla Firefox, Safari, Opera, และ Netscape
Navigator เป็ นต้น

Web Server
คือ เครือ่ งคอมพิวเตอร์ทท่ี ำหน้ำทีใ่ ห้บริกำรข้อมูลใน
www ซึง่ เก็บ Web page และโปรแกรมจัดกำรบริกำร เมือ่ ผูใ้ ช้ตอ้ งกำรดู
Web page ทีอ่ ยูใ่ นเครือ่ ง Server ก็จะใช้ Web browser เรียกขอข้อมูล
โดยระบุทอ่ี ยูข่ องข้อมูลในลักษณะทีเ่ รียกว่ำ URL
5
ประเภทของเว็บเพจ

Static Web page เว็บเพจที่สร้างด้วยภาษา HTML มีการตอบสนอง
การใช้งานของผูใ้ ช้อย่างจากัด ไม่สามารถตอบโต้กบั ผูใ้ ช้ได้

Dynamic Web Page เว็บเพจที่สร้างขึ้นจากภาษา HTML แต่มีความ
ยืดหยุน่ ในการทางานมากกว่า Static Web Page เช่น สามารถตอบ
โต้กบั ผูใ้ ช้ได้ เว็บเพจประเภทนี้จะมีภาษา สคริ ปต์สาหรับตอบโต้กบั
ผูใ้ ช้
Static Web Page
Static Web Page

ข้ อดีของ Static Web Page
oสร้างได้ง่ายมีพ้น
ื ฐานเกี่ยวกับภาษา HTML
oดูแลง่ายเนื่ องจากไม่มีการเปลี่ยนแปลงอะไรมากกมาย
oใช้เวลาในการเรี ยกเว็บเพจน้อยกว่าแบบอื่นๆ

ข้ อเสี ยของ Static Web Page
oถ้าเป็ นข้อมูลที่ตอ
้ งเปลี่ยนเปลี่ยนแปลงบ่อยจะเกิดความไม่สะดวก
่
oขาดความยืดหยุน
oไม่สามารถสร้างการโต้ตอบกับผูใ้ ช้ได้
Dynamic Web Page
จากข้ อจากัดเว็บเพจแบบ Static web Page จึงมีการพัฒนาสร้ างเว็บในรู ปแบบ
ที่เรี ยกว่า Dynamic Web Page ซึง่ มีโครงสร้ างทัว่ ไปเหมือนกันแต่มีความ
ยืดหยุน่ ในการทางานมากกว่า และผู้ใช้ สามารถตอบโต้ กบั เว็บเพจได้ แต่การ
เขียนคาสัง่ ในเว็บเพจแบบ Dynamic Web page จะมีความยุง่ ยากกว่า โดยจะ
มีชดุ คาสัง่ ที่เรี ยกว่า ภาษาสคริปต์ เข้ ามาควบคุมและกาหนดรูปแบบการทางาน
ร่วมกับภาษา HTML สาหรับภาษาที่ใช้ พฒ
ั นาโปรแกรมสคริปต์มีอยู่หลายภาษา
เช่น VBSript, Javascript และ Jscript เราเรี ยกภาษาเหล่ านีว้ ่ าภาษา
สคริปต์ ซึ่งมีอยู่ 2 ประเภท
Dynamic Web Page

Client -Side Script
เป็ นภาษาที่ถูกแปลงและประมวลผลด้วย เว็บบราวเซอร์ โดยถูกจัดเป็ นส่ วน
หนึ่ งของเพจ HTML เนื่ องจากคาสั่งถูกกาหนดไว้ในชุดคาสั่งภาษา HTML
ภาษาสคริ ปต์ ถู ก น าที่ ถู ก น ามาประมวลผลบนเว็ บ บราวเซอร์ ได้ แ ก่
JavaScript และ VBScript

Server-Side Script
เว็บเพจที่สร้างขึ้นจากภาษา HTML แต่มีความยืดหยุน่ ในการทางานมากกว่า
Static Web Page เช่น สามารถตอบโต้กบั ผูใ้ ช้ได้ เว็บเพจประเภทนี้ จะมี
ภาษา สคริ ปต์สาหรับตอบโต้กบั ผูใ้ ช้
Dynamic Web Page
ประเภทของ Dynamic Web page
 Server-Side Dynamic
หมายถึง Dynamic web Page ที่มี Server side script เป็ นภาษา Script ที่
ทางานที่ประมวลในฝั่ ง Server และ Server ต้ องติดตังโปรแกรมส
้
าหรับ
แปลภาษาที่เลือกใช้ ด้วยเมื่อ Web Server ประมวลผลเสร็จผลลัพธ์ที่ได้ จะ
อยูใ่ นรูปภาษา HTML ซึง่ จะถูกส่งไปให้ บราวเซอร์ แสดงผลลัพธ์
Dynamic Web Page

Client-Side Dynamic
หมายถึง Dynamic web Page ที่มี Server side script เป็ นภาษา Script ที่
ทางานที่ประมวลในฝั่งไคลเอนต์ เช่น JavaScript หรื อ VBScript เมื่อเว็บ
เพจมีการเขียนสคริ ปต์แบบ Client-Side Script ถูกร้องขอจากบราวเซอร์
Web Server จะส่ งเนื้ อหาทั้งหมดในรู ปแบบ HTML รวมทั้งโค๊ดที่เขียนขึ้น
ด้วย Client-Side Script มายังเครื่ องไคลเอนต์ เครื่ องไคลเอนต์จะ
ประมวลผลและแสดงผลบนบราวเซอร์
Dynamic Web Page

Server-Side Dynamic และ Client-Side Dynamic
วิธีน้ ี เป็ นการรวม Server-Side Dynamicและ Client-Side Dynamic เข้า
ด้วยกัน คื อมี โค้ดบางส่ วนถูกแปลคาสั่งที่ เครื่ อง Server ก่อน และเหลือ
บางส่ วนที่จะต้องถูกแปลโดยเครื่ อง Client
เทคโนโลยี ASP.NET

ASP.NET (Active Server Pages.NET) ได้ รับการพัฒนามาจาก ASP
เวอร์ ชนั่ 3.0เพื่อให้ สามารถรองรับแนวคิดของ .NET ได้ โดยเราสามารถ
พัฒนา ASP.NET ได้ จากทุกภาษาที่สนับสนุนแนวคิดของ . NET โดยที่นิยม
ใช้ ก็คือ VB.NET, C# ,JScript.NET ซึง่ เป็ นรูปแบบแอพพลิเคชันที่สร้ างเพื่อ
ทางานบนเว็บเซิร์ฟเวอร์ โดยจะโต้ ตอบกับผู้ใช้ งานเหมือนเว็บเพจทัว่ ไป การ
ทางานของ ASP.NET จะเป็ นแบบ Server-Side Script ซึง่ เป็ นการทางานที่
ฝั่ งเซิร์ฟเวอร์
องค์ ประกอบของ ASP.NET Web Application
15
กระบวนการทางานของ ASP.NET
16
ข้ อดีในการพัฒนาแอพพลิเคชั่นด้ วย ASP.NET
• ใช้ ภาษาได้ หลากหลายในการเขียนสคริปต์
• มีความยืดหยุ่นในการเขียนโปรแกรมและการแปลภาษาโปรแกรมทางานได้ เร็วขึ ้น
• มีการรวมกันทางานฝั่ งไคลเอนต์และเซิร์ฟเวอร์ เข้ าด้ วยกัน
• มีรูปแบบและการใช้ งานคอมโพเนนต์ที่ง่ายขึ ้น
• มีไลบรารีมาตรฐานให้ ใช้ ร่วมกับภาษาอื่น ๆ
• การเขียนโปรแกรมและการออกแบบส่วนติดต่อผู้ใช้ ด้วยคอนโทรลทาได้ ง่ายขึ ้น
• ไม่ขึ ้นกับฮาร์ดแวร์
• ง่ายต่อการหาข้ อผิดพลาดในเขียนโปรแกรม
• สามารถเขียนโปรแกรมกากับเหตุการณ์ต่าง ๆ ในเว็บเพจได้
• แยกส่วนที่เป็ น HTML กับส่วนของสคริปต์ออกจากกันอย่างชัดเจน
17
การใช้ งาน ASP.NET
การที่จะใช้ งาน ASP.NET ได้ นนต้
ั ้ องใช้ โปรแกรมหลักๆ ดังนี ้
 IIS (Internet Information Services) คือ โปรแกรมที่ทาหน้ าที่จาลองเครื่ อง
ของเราให้ เป็ น Server จึงทาให้ สามารถ RUN คาสัง่ ASP.NET ได้ เพราะ
ASP.NET เป็ นลักษณะของ Server-Side Programming
 Visual .NET Studio เป็ นเครื่ องมือที่เหมาะสมที่สด
ุ ในการพัฒนา ASP.NET
ซึง่ อาจเลือกใช้ Notepad หรื อ Dreamweaver ในการพัฒนาก็ได้ เช่นกัน แต่
อาจไม่สนับสนุน ASP.NET ทังหมดได้
้
 WEB Browser สามารถใช้ IE (Internet Explorer) หรื อเว็บบราวเซอร์ อื่นๆ
ที่สนับสนุนก็ได้
การติดตัง้ IIS
IIS Web Server เป็ นโปรแกรมที่มีติดมากับตัวโปรแกรม Windows XP เรา
สามารถทาการติดตัง้ IIS เพิ่มเติมได้ จากแผ่น CD-ROM Install
Windows (version ที่เราใช้ งาน) ซึง่ ขันตอนการติ
้
ดตังมี
้ ดงั นี ้
1. ให้ ใส่แผ่นของโปรแกรม Windows ไว้ ในเครื่ องอ่าน
2. ไปที่ Control Panel -> Add or Remove Programs จากนันให้
้ ทาตาม
ขันตอนดั
้
งนี ้

การติดตัง้ IIS
3. เลือกไปที่ Add/Remove Windows Components
การติดตัง้ IIS
4. ติ๊กเครื่ องหมาย
ถูกที่หน้ า
เมนู Internet
Information
Services
(IIS) แล้ วทา
การ Click ที่
ปุ่ ม Next เพื่อ
เริ่มการติดตัง้
การติดตัง้ IIS
5. กรณีระบบถามหาตัว
ติดตัง้ Windows XP
ให้ คลิกปุ่ ม OK แล้ ว
ทาการ Browse หา
แผ่น CD ติดตัง้
Windows XP ห้ อง
i386
การติดตัง้ IIS
6. คลิกปุ่ ม Open, OK
การติดตัง้ IIS
7. ระบบบจะทาการติดตัง้
IIS ดังรูป
การติดตัง้ IIS
8. คลิกปุ่ ม Finish
การติดตัง้ IIS
9. จากนันให้
้ เราทาการเปิ ด Web
Browser ของเราขึ ้นมา ที่ Address
Bar ให้ เราทาการพิมพ์
http://localhost/ เพื่อทาการทดสอบ
การใช้ งาน IIS หากปรากฏมีหน้ าจอ
ต้ อนรับ ดังรูปด้ านล่างนี ้ แสดงว่าเรา
สามารถใช้ งาน IIS Web Server ได้
แล้ ว
การปรับแต่ ง IIS ก่ อนการใช้ งาน

คลิกที่ Start > Control Panel > Administrative > Tools < Internet Information
Service (IIS) Manager
การปรับแต่ ง IIS ก่ อนการใช้ งาน


คลิกแตกไฟล์ที่ชื่อ
…(Computer name) >
Web Sites > Default
Web Site
คลิกขวาที่ Default Web
Site แล้ วเลือก
Properties เพื่อทาการ
ปรับแต่ง
การปรับแต่ ง IIS ก่ อนการใช้ งาน

คลิกที่แท็ป Home Directory
หรื อที่เก็บข้ อมูลเว็บไซต์ โดย
ปกติห้องเก็บพื ้นฐานจะเป็ น
c:\inetpub\wwwroot ดังรูป
การปรับแต่ ง IIS ก่ อนการใช้ งาน

คลิกแท็ป Documents เพื่อ
เพิ่มไฟล์แรกที่ใช้ เรี ยกเว็บไซต์
(ไฟล์ Homepage) ในที่นี ้ให้
คลิกปุ่ ม Add… แล้ วเพิ่มไฟล์
index.aspx
การใช้ งาน ASP.NET
1. เลือกที่เมนู File -> New -> WebSite
การใช้ งาน ASP.NET
2. เลือก ASP.NET Web Site ตังชื
้ ่อโปรเจค และเลือกภาษาที่ใช้ ในการพัฒนา
การใช้ งาน ASP.NET
 แถบรายการคาสัง่ menu bar : เป็ นแถบแสดงรายการคาสัง่ ต่างๆ ของโปรแกรม
 แถบเครื่ องมือ (Tool Box) : เป็ นหน้ าต่างที่เก็บออบเจ็กต์ต่างๆ หรื อ control
ต่าางๆ ที่เรานามาใช้ งานในโปรแกรม
 หน้ าต่าง Solution : เป็ นหน้ าต่างที่รายละเอียดของโซลูชนั ( หลายๆ โปรเจ็กต์
รวมกันเรี ยกว่า Solution ) โปรเจ็กต์ รวมทังเรายั
้ งสามารถจัดการกับโปรเจ็กต์ได้
โดยการเพิ่ม ลบ และเปลี่ยนชื่อของ Solution, Project และ Form
 หน้ าต่าง Properties : เป็ นส่วนแสดง และ สามารถ คุณสมบัติของ control
ต่าางๆ ที่เรานามาใช้ งานในโปรแกรม
 ส่วนสาหรับ Coding Program และ สาหรับ Design Program
การใช้ งาน ASP.NET
 โครงสร้ างไฟล์โปรแกรม
การใช้ งาน ASP.NET
 โครงสร้ าง Folder
การใช้ งาน ASP.NET
 โครงสร้ าง Folder
• App_Code เป็ นโฟลเดอร์ ที่ Visual Studio 2005 สร้ างขึ ้นมาอัตโนมัติ เพื่อไว้ เก็บ
Class .vb หรื อ .cs
• App_Data เป็ นโฟเดอร์ ที่ไว้ จด
ั เก็บไฟล์ Database ในรูปแบบต่าง ๆ เช่น
XML,MDB,MDF เป็ นต้ น
• web.config เป็ นไฟล์กาหนดค่าคงที่อื่น ๆ ที่โปรแกรมสามารถเรี ยกใช้ งานได้ ภาย
หลังจากที่ผ่านการ Build ได้ นิยมเก็บค่าต่าง ๆ เช่น Connection ของ Database
• Default.aspx เป็ นไฟล์ที่ใช้ สาหรับเก็บ Form การ Design หรื อ Web
Control,HTML Control ทังหมด
้
และใช้ ไฟล์นี ้สาหรับการ Run โปรแกรม
• Default.aspx.vb เป็ นไฟล์สาหรับเก็บ Class และ Event ต่าง ๆ ของไฟล์
Default.aspx
การใช้ งาน ASP.NET
การรันเพจ ASP.NET


คลิกขวาที่ชื่อเพจในหน้ าต่าง “Solution
Explorer”
เลือกคาสัง่ “View in Browser”
การเขียนชุดคาสั่งใน ASP.NET
การพัฒนาแอพพลิเคชัน่ บนเว็บ ด้ วย ASP.NET ได้ อย่างมีประสิทธิภาพ
นักพัฒนาโปรแกรมจะต้ องมีความรู้พื ้นฐานต่าง ๆ เหล่านี ้
การสร้ างเว็บเพจด้ วยภาษา HTML และความรู้ในการพัฒนาเว็บเพจ
เบื ้องต้ นหลักการพัฒนาโปรแกรมเชิงวัตถุ (Object Oriented Programming
(OOP)) มีความรู้และความเข้ าใจในหลักการฐานข้ อมูล มีความเข้ าใจในข้ อมูล
รูปแบบ XML
40
การเขียนชุดคาสั่งใน ASP.NET
โดยสามารถเขียนโค้ ดโปรแกรมและหน้ าตาเว็บออกจากกันได้ 2 รูปแบบ คือ
- Code Inline แยกเป็ นคนละส่วนในเอกสารไฟล์เดียวกันโดยมีนามสกุล *.aspx
(บางครัง้ เรี ยกว่า Code Beside)
- Code Behind เป็ นการเก็บโค้ ดโปรแกรมออกเป็ นไฟล์ต่างหากโดยเก็บไว้ ในไฟล์
นามสกุล *.vb ส่วนแสดงผลเก็บไว้ ในไฟล์ *.aspx
41
ตัวอย่ างการเขียนโปรแกรมแบบ Code Inline
Code Inline
42
ตัวอย่ างการเขียนโปรแกรมแบบ Code Behind
ส่ วนแสดงผล
ส่ วนโปรแกรม
43
โครงสร้ างของเอกสาร ASP.NET
- Directives
เป็ นส่วนที่ระบุข้อมูลที่จาเป็ นในเอกสารให้ compiler ทราบ โดยที่ไม่ต้องมาคอย
ประกาศหรื อเรี ยกใช้ งานตลอดเวลาและมักจะวางไว้ ส่วนบนสุดของไฟล์ เช่น
รูปแบบ
<%@ชื่อ Directive แอตทริบวิ ต์ ต่างๆ>
44
โครงสร้ างของเอกสาร ASP.NET
ตัวอย่ าง Directives
- Page Directive ใช้ กาหนดคุณสมบัติของ ASP.NET Page ในแต่ละหน้ า
ตัวอย่ างรูปแบบ
<%@Page Language=“VB” %>
โดยที่
Language
ใช้ กาหนดภาษาที่ใช้ ในการเขียนโปรแกรม
45
ตัวอย่ าง
Page Directive
46
โครงสร้ างของเอกสาร ASP.NET
- Code Declaration Blocks
เป็ นการระบุขอบเขตของโค้ ดโปรแกรมส่วนของ ASP.NET ซึง่ โค้ ดในส่วนนี ้จะไม่
ถูกส่งไปให้ กบั บราวเซอร์ โดยตรง โดยเมื่อมีการใช้ งานโค้ ดในส่วนนี ้จะถูกทาการคอมไพล์
ให้ เป็ น MSIL และเป็ นภาษาเครื่ อง ส่วนนี ้ถือได้ ว่าเป็ นส่วนหลักของโค้ ดสาหรับการ
ประกาศโพรซิเยอร์ , ฟั งก์ชนั่ หรื อตัวแปรที่ต้องการใช้ ร่วมกันทังหน้
้ า ซึ่งใน 1 หน้ าสามารถ
กาหนด Code Declaration Blocks กี่ block ก็ได้
รูปแบบ
<Script language = “ภาษาที่ต้องการใช้ เขียนโค้ ด” runat=“server”>
โค้ ดภาษาที่ต้องการ
</Script>
47
ตัวอย่ าง
Code Declaration Blocks
48
โครงสร้ างของเอกสาร ASP.NET
- Code Render Blocks
โค้ ดที่เขียนในส่วน <%...%>
49
ตัวอย่ าง
Code Render Blocks
50
โครงสร้ างของเอกสาร ASP.NET
- Web Forms
สร้ างส่วนติดต่อกับผู้ใช้ ทางานฝั่ งเซิร์ฟเวอร์ แล้ วจึงทาการสร้ างเป็ นแบบฟอร์ ม
HTML ส่งไปยังโปรแกรมบราวเซอร์ ของผู้ใช้
51
ตัวอย่ าง
Web Form
52
โครงสร้ างของเอกสาร ASP.NET
- Server Controls
คอนโทรลที่ทางานฝั่ งเซิร์ฟเวอร์
53
ตัวอย่ าง
Server Controls
54
โครงสร้ างของเอกสาร ASP.NET
- HTML Code
โค้ ดที่ทางานฝั่ งบราวเซอร์ ที่นามาใช้ ในการจัดรูปแบบการแสดงผลบางอย่างโดย
โค้ ดที่เป็ น HTML จะไม่ต้องถูกประมวลผลโดยเซิร์ฟเวอร์ แต่จะถูกส่งไปให้ บราวเซอร์ ของ
ผู้ใช้ โดยตรง
55
ตัวอย่ าง
HTML Code
56
โครงสร้ างของเอกสาร ASP.NET
- Server-Side Comments
เป็ นส่วนที่ช่วยในการแทรกหมายเหตุหรื อคาอธิบายโปรแกรมภายในเอกสาร
ASP.NET ซึง่ จะไม่ถกู ทาการประมวลผลที่เซิร์ฟเวอร์ และจะไม่ปรากฏที่หน้ าเว็บเพจด้ วย
รูปแบบ
<%--หมายเหตุ--%>
57
คอนโทรล (Control)
คอนโทรล (Control) หมายถึง ส่วนประกอบของโปรแกรมที่ทาหน้ าที่ติดต่อกับ
ผู้ใช้ งาน เช่น ปุ่ มคาสัง่ ช่องรับข้ อความ เช็คบ๊ อกซ์ เป็ นต้ น คอนโทรลนัน้ นับได้ ว่าเป็ นสิ่งที่
เพิ่มเติมมาจาก ASP และคาสัง่ ที่ใช้ สร้ างคอนโทรลจะมีรูปแบบคล้ ายคลึงกับภาษา XML
58
ประโยชน์ ของคอนโทรล


ลดการเขียนโปรแกรมที่ซับซ้ อน
คอนโทรลนันช่
้ วยลดการเขียนโปรแกรมที่ซบั ซ้ อนและทาให้ การเขียนโปรแกรมง่าย
ขึ ้น เช่น การดึงข้ อมูลจากฐานข้ อมูลมาแสดงในตาราง
มีการแปลภาษาที่ฝ่ ั งเซิร์ฟเวอร์ ทงั ้ หมด
คอนโทรลนันจะถู
้ กแปลที่ฝั่งเซิร์ฟเวอร์ ทงหมด
ั้
จึงลดภาระการทางานที่ฝั่งผู้ใช้ งาน
(ไคลเอ็นต์) และสามารถแปลภาษา HTML ที่ปกติถกู แปลงทางฝั่ งผู้ใช้ ให้ ไปแปลทางฝั่ ง
เซิร์ฟ์เวอร์ แทนได้ ทาให้ ค่าต่าง ๆ จะถูกเก็บไว้ ที่ฝั่งเซิร์ฟเวอร์ มากกว่าฝั่ งผู้ใช้
59
ประโยชน์ ของคอนโทรล

รูปแบบหน้ าเว็บเพจที่เกิดจากคอนโทรลมีความเหมาะสม
เนื่องจากคอนโทรลจะถูกแปลที่ฝั่งเซิร์ฟเวอร์ ดังนันคอนโทรลสามารถตรวจสอบดู
้
ว่าบราวเซอร์ ทางฝั่ งผู้ใช้ ใช้ โปรแกรมใด แล้ วทาการแปลงเป็ นไฟล์ HTML ที่เหมาะสม
สาหรับโปรแกรมบราวเซอร์ นนั ้ ๆ ได้ ซึ่งส่วนนี ้นับเป็ นประโยชน์อย่างยิ่ ง เพราะในอนาคต
การใช้ อินเทอร์ เนตไม่ได้ จากัดอยู่ในคอมพิวเตอร์ เสมอไป เว็บไซต์ อาจถูกเรี ยกใช้ โดย
โทรศัพท์มือถือ หรื อเครื่ อง PDA เป็ นต้ น
60
การใช้ งานคอนโทรล
การใช้ งานในแต่ละคอนโทรลต้ องเข้ าใจถึง
- คุณสมบัติ (Property) ของคอนโทรล
- การทางาน (Method) หรื อ code ที่แต่ละคอนโทรลสามารถทาได้
- เหตุการณ์ (Event) ที่เกิดขึ ้นกับแต่ละคอนโทรล
การกาหนดคุณสมบัติ (Property) ให้ กับคอนโทรล
รูปแบบ
ชื่อคอนโทรล.คุณสมบัติ
61
Control ใน ASP.NET
 Standard Controls
กลุม่ คอนโทรลพื ้นฐานประเภท Web Server
Control สาหรับสร้ างฟอร์ มทัว่ ไป เช่น Button Label หรื อ TextBox เป็ นต้ น
 HTML Controls
กลุม่ คอนโทรล HTML ที่ใช้ สาหรับเปลี่ยนแท็ก HTML
เป็ น HTML Server Control ซึง่ สามารถทางานที่ฝั่ง Server ได้
 Data Controls
คือ กลุม่ คอนโทรลที่เกียวกับการใช้ งานฐานข้ อมูล
แบ่งออกเป็ น2กลุม่ คือ DataSource Control เป็ นกลุม่ คอนโทรลที่ใช้ ติดต่อกับ
แหล่งข้ อมูลเพื่อเก็บข้ อมูลที่ต้องการ และ DataBound Control เป็ นกลุม่
คอนโทรลที่นาข้ อมูลจากแหล่งข้ อมูลมาแสดงบนเพจ
Control ใน ASP.NET
 Validation Controls
กลุม่ คอนโทรลที่ใช้ ตรวจสอบความถูกต้ องของ
ข้ อมูลที่จะส่งไปทางานที่ฝั่ง Server
 Navigation Controls
กลุม่ คอนโทรลที่ใช้ เส้ นทางการติดต่อของแต่ละ
เพจ เช่น Tree Viws
 Login Controls
กลุม่ คอนโทรลที่ใช้ ในการ Login การเปลี่ยน Password
และการลงทะเบียน
 Web Parts Controls
กลุม่ คอนโทรลที่ใช้ สร้ างความเป็ นส่วนตัว
 AJAX Extensions Controls
กลุม่ คอนโทรลที่ใช้ งานกับเทคโนโลยี
AJAX
Control ใน ASP.NET
 Reporting
กลุม่ คอนโทรลที่ใช้ สาหรับการสร้ างรายงาน
Server Control
Server Control เป็ นคอนโทรลกลุม่ หนึง่ ของ ASP.NET ถูกสร้ างขึ ้นด้ วย
จุดมุ่งหมายที่แตกต่างจาก HTML Control เนื่องด้ วย HTML control มีความสัมพันธ์
แบบหนึง่ ต่อหนึง่ กับ HTML element ในหน้ าเว็บเพจ ในขณะที่ Server Control มีความ
ซับซ้ อนมากกว่า โดยคอนโทรลหนึง่ ๆ สามารถแสดงผลเป็ น แท็ก HTML ได้ มากกว่า 1
ชนิด
control ในกลุม่ นี ้เมื่อถูกนาไปวางลงบน form จะถูกแปลงให้ อยู่ในรูปของ Tag
และเก็บไว้ ในไฟล์ .aspx ให้ โดยอัตโนมัติ โดยที่แต่ละ tag จะกาหนดอยู่ภายใน
เครื่ องหมาย “< >” ที่ขึ ้นต้ นด้ วย “asp:”
หมายเหตุ
โดยจะต้ องกาหนดไว้ ภายใน block ของ Tag “<Form>… </Form>”
65
Server Control
รูปแบบที่ 1
<asp: control-type id = name runat = “server” [property-set]> value </asp:control-type>
โดยที่
name
control-type
property-set
value
หมายถึงชื่อของ control
หมายถึงประเภทของ control
หมายถึงคุณสมบัติที่กาหนดให้ control
หมายถึงค่าที่ต้องการให้ ปรากฏบน control
เช่ น <asp:Label ID="Label2" runat="server" Text="Label" Width="171px"></asp:Label>
66
Server Control
ผลลัพธ์
67
Server Control
รูปแบบที่ 2
<asp: control-type id = name runat = “server” display-Property = value [property-set]/>
โดยที่
name
control-type
property-set
value
display-Property
หมายถึงชื่อของ control
หมายถึงประเภทของ control
หมายถึงคุณสมบัติที่กาหนดให้ control
หมายถึงค่าที่ต้องการให้ ปรากฏบน control
หมายถึง property ต่างๆที่ใช้ แสดงผล
เช่ น <asp:Button ID="Button1" runat="server" Text="Button" />
68
Server Control
ผลลัพธ์
69
ประเภทของ Server Control

Label Control
เป็ นคอนโทรลที่ใช้ แสดงข้ อความต่าง ๆ ในหน้ าเว็บเพจ
รูปแบบ
<asp:Label id =“ชื่อคอนโทรล”
Text=“ ข้ อความที่ต้องการแสดง”
runat = “server”/>
หมายเหตุ การตังชื
้ ่อ (id) ของ Label Control ควรจะนาหน้ าชื่อด้ วย lbl เช่น lblData เป็ นต้ น
70
ประเภทของ Server Control
คุณสมบัตขิ อง Label Control ที่สาคัญ
คุณสมบัติ
คาอธิบาย
id
ชื่อของ Label
Text
อ่านค่าหรื อกาหนดค่าข้ อความที่จะแสดงผลในบราวเซอร์
BorderStyle
กาหนดรูปแบบของเส้ นขอบ
Font
กาหนดรูปแบบของตัวอักษรใน Label
Backcolor
กาหนดสีของพื ้นหลัง Label
71
ประเภทของ Server Control
TextBox Control
เป็ นคอนโทรลที่ใช้ สร้ างช่องรับข้ อความ/รหัสผ่าน หรื อช่องรับข้ อความแบบ
TextArea ที่สามารถรับข้ อมูลได้ มากกว่า 1 บรรทัด โดยจะรวมเอาความสามารถของ
คอนโทรลในกลุม่ HTML ,Server control ได้ แก่ HTMLInput Text และ HTML TextArea
เข้ ามาไว้ ด้วยกัน
รูปแบบ
<asp:TextBox id =“ชื่อคอนโทรล”
Text=“ ข้ อความที่ต้องการแสดง”
runat = “server”/>

หมายเหตุ การตังชื
้ ่อ (id) ของ TextBox Control ควรจะนาหน้ าชื่อด้ วย txt เช่น txtData เป็ นต้ น
72
ประเภทของ Server Control
คุณสมบัตขิ อง TextBox Control ที่สาคัญ
คุณสมบัติ
คาอธิบาย
id
ชื่อของ TextBox
Text
อ่านค่าหรื อกาหนดค่าข้ อความที่จะแสดงผลใน TextBox
TextMode
อ่านค่าหรื อกาหนดค่าชนิดของ TextBox ซึง่ สามารถเป็ น
Multiline = แสดงหลายบรรทัด
Password = แสดงบรรทัดเดียวและแสดงข้ อความภายในเป็ น *
SingleLine(Default) = แสดงบรรทัดเดียว
อ่านค่าหรื อกาหนดค่าจานวนตัวอักษรสูงสุดที่บรรจุใน TextBox
MaxLenght
73
ประเภทของ Server Control
Button Control
เป็ นคอนโทรลที่ใช้ สร้ างปุ่ มทาหน้ าที่เป็ นปุ่ มคาสัง่ หรื อปุ่ มสาหรับส่งข้ อมูล
รูปแบบ
<asp:Button id =“ชื่อคอนโทรล”
Text=“ ข้ อความที่ต้องการแสดง”
runat = “server”/>

หมายเหตุ การตังชื
้ ่อ (id) ของ Button Control ควรจะนาหน้ าชื่อด้ วย btn เช่น
btnCalculate เป็ นต้ น
74
ประเภทของ Server Control
คุณสมบัตขิ อง Button Control ที่สาคัญ
คุณสมบัติ
คาอธิบาย
id
ชื่อของ Button
Text
อ่านค่าหรื อกาหนดค่าข้ อความที่จะแสดงผลในปุ่ ม
75
ประเภทของ Server Control

CheckBox Control
เป็ นคอนโทรลที่ใช้ สร้ างเช็คบ็อกซ์ ผู้ใช้ สามารถคลิกให้ มีสถานะเป็ น เลือก หรื อไม่
เลือก ได้
รูปแบบ
<asp:CheckBox id =“ชื่อคอนโทรล”
Text=“ ข้ อความที่ต้องการแสดง”
runat = “server”/>
หมายเหตุ การตังชื
้ ่อ (id) ของ CheckBox Control ควรจะนาหน้ าชื่อด้ วย chk เช่น chkData
เป็ นต้ น
76
ประเภทของ Server Control
คุณสมบัตขิ อง CheckBox Control ที่สาคัญ
คุณสมบัติ
คาอธิบาย
id
ชื่อของ CheckBox
Text
อ่านค่าหรื อกาหนดข้ อความที่จะแสดงผลต่อจากช่องกาเครื่ องหมาย
Checked
อ่านค่าหรื อกาหนดค่าว่าช่อง CheckBox ถูกกาเครื่ องหมายหรื อไม่ ซึง่ สามารถเป็ น
- True = ถูกกาเครื่ องหมาย
- False = ไม่ถกู กาเครื่ องหมาย
TextAlign
กาหนดการจัดเรี ยงข้ อความว่าจะอยูด่ ้ านซ้ ายหรื อขวาของช่องกาเครื่ องหมายหากไม่
กาหนดจะเป็ นด้ านขวาโดยปริยาย
- Right = ด้ านขวา
- Left = ด้ านซ้ าย
77
ประเภทของ Server Control

RadioButton control
เป็ นคอนโทรลที่ใช้ สร้ างเรดิโอ ผู้ใช้ สามารถคลิกปุ่ มให้ มีสถานะเป็ น เลือก ได้ เพียง
ปุ่ มเดียวจากปุ่ มเรดิโอที่มีทงหมด
ั้
รูปแบบ
<asp:RadioButton id =“ชื่อคอนโทรล”
Text=“ ข้ อความที่ต้องการแสดง”
runat = “server”/>
78
ประเภทของ Server Control
คุณสมบัตขิ อง RadioButton Control ที่สาคัญ
คุณสมบัติ
คาอธิบาย
id
ชื่อของ RadioButton
Text
อ่านค่าหรื อกาหนดค่าข้ อความที่จะแสดงผลข้ าง RadioButton
Checked
อ่านค่าหรื อกาหนดค่าว่าช่อง Radio นี ้ถูกเลือกหรื อไม่ ซึง่ สามารถเป็ น
- True = ถูกเลือก
- False = ไม่ถกู เลือก
TextAlign
กาหนดการจัดเรี ยงข้ อความว่าจะอยูด่ ้ านซ้ ายหรื อขวาของ RadioButton
หากไม่กาหนดจะเป็ นด้ านขวาโดยปริยาย
- Right = ด้ านขวา
- Left = ด้ านซ้ าย
79