670 likes | 894 Vues
บทที่ 2 ASP.NET. รายวิชา การเขียนโปรแกรมบน WWW. เทคโนโลยี ASP.NET.
E N D
บทที่ 2ASP.NET รายวิชา การเขียนโปรแกรมบน WWW
เทคโนโลยี 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
ข้อดีในการพัฒนาแอพพลิเคชั่นด้วย ASP.NET • ใช้ภาษาได้หลากหลายในการเขียนสคริปต์ • มีความยืดหยุ่นในการเขียนโปรแกรมและการแปลภาษาโปรแกรมทำงานได้เร็วขึ้น • มีการรวมกันทำงานฝั่งไคลเอนต์และเซิร์ฟเวอร์เข้าด้วยกัน • มีรูปแบบและการใช้งานคอมโพเนนต์ที่ง่ายขึ้น • มีไลบรารีมาตรฐานให้ใช้ร่วมกับภาษาอื่น ๆ • การเขียนโปรแกรมและการออกแบบส่วนติดต่อผู้ใช้ด้วยคอนโทรลทำได้ง่ายขึ้น • ไม่ขึ้นกับฮาร์ดแวร์ • ง่ายต่อการหาข้อผิดพลาดในเขียนโปรแกรม • สามารถเขียนโปรแกรมกำกับเหตุการณ์ต่าง ๆ ในเว็บเพจได้ • แยกส่วนที่เป็น HTML กับส่วนของสคริปต์ออกจากกันอย่างชัดเจน
การใช้งาน 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 ที่เราใช้งาน) ซึ่งขั้นตอนการติดตั้งมีดังนี้ • ให้ใส่แผ่นของโปรแกรม Windows ไว้ในเครื่องอ่าน • ไปที่ Control Panel -> Add or Remove Programs จากนั้นให้ทำตามขั้นตอนดังนี้
การติดตั้ง IIS • เลือกไปที่ Add/Remove Windows Components
การติดตั้ง IIS • ติ๊กเครื่องหมายถูกที่หน้าเมนู Internet Information Services (IIS) แล้วทำการ Click ที่ปุ่ม Next เพื่อเริ่มการติดตั้ง
การติดตั้ง IIS • กรณีระบบถามหาตัวติดตั้ง 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 • คลิกขวาที่ชื่อเพจในหน้าต่าง “Solution Explorer” • เลือกคำสั่ง “View in Browser”
การเขียนชุดคำสั่งใน ASP.NET การพัฒนาแอพพลิเคชั่นบนเว็บ ด้วย ASP.NET ได้อย่างมีประสิทธิภาพ นักพัฒนาโปรแกรมจะต้องมีความรู้พื้นฐานต่าง ๆ เหล่านี้ การสร้างเว็บเพจด้วยภาษา HTML และความรู้ในการพัฒนาเว็บเพจ เบื้องต้นหลักการพัฒนาโปรแกรมเชิงวัตถุ (Object Oriented Programming (OOP)) มีความรู้และความเข้าใจในหลักการฐานข้อมูล มีความเข้าใจในข้อมูลรูปแบบ XML
การเขียนชุดคำสั่งใน ASP.NET โดยสามารถเขียนโค้ดโปรแกรมและหน้าตาเว็บออกจากกันได้ 2 รูปแบบ คือ - Code Inlineแยกเป็นคนละส่วนในเอกสารไฟล์เดียวกันโดยมีนามสกุล *.aspx (บางครั้งเรียกว่า Code Beside) - Code Behindเป็นการเก็บโค้ดโปรแกรมออกเป็นไฟล์ต่างหากโดยเก็บไว้ในไฟล์นามสกุล *.vb ส่วนแสดงผลเก็บไว้ในไฟล์ *.aspx
ตัวอย่างการเขียนโปรแกรมแบบ Code Inline Code Inline
ตัวอย่างการเขียนโปรแกรมแบบ Code Behind ส่วนแสดงผล ส่วนโปรแกรม
โครงสร้างของเอกสาร ASP.NET - Directives เป็นส่วนที่ระบุข้อมูลที่จำเป็นในเอกสารให้ compiler ทราบ โดยที่ไม่ต้องมาคอยประกาศหรือเรียกใช้งานตลอดเวลาและมักจะวางไว้ส่วนบนสุดของไฟล์ เช่น รูปแบบ <%@ชื่อ Directive แอตทริบิวต์ต่างๆ>
โครงสร้างของเอกสาร ASP.NET ตัวอย่างDirectives - Page Directiveใช้กำหนดคุณสมบัติของ ASP.NET Page ในแต่ละหน้า ตัวอย่างรูปแบบ <%@Page Language=“VB” %> โดยที่ Language ใช้กำหนดภาษาที่ใช้ในการเขียนโปรแกรม
ตัวอย่าง Page Directive
โครงสร้างของเอกสาร ASP.NET - Code Declaration Blocks เป็นการระบุขอบเขตของโค้ดโปรแกรมส่วนของ ASP.NET ซึ่งโค้ดในส่วนนี้จะไม่ถูกส่งไปให้กับบราวเซอร์โดยตรง โดยเมื่อมีการใช้งานโค้ดในส่วนนี้จะถูกทำการคอมไพล์ให้เป็น MSIL และเป็นภาษาเครื่อง ส่วนนี้ถือได้ว่าเป็นส่วนหลักของโค้ดสำหรับการประกาศโพรซิเยอร์, ฟังก์ชั่นหรือตัวแปรที่ต้องการใช้ร่วมกันทั้งหน้า ซึ่งใน 1 หน้าสามารถกำหนด Code Declaration Blocks กี่ block ก็ได้ รูปแบบ <Script language = “ภาษาที่ต้องการใช้เขียนโค้ด” runat=“server”> โค้ดภาษาที่ต้องการ </Script>
ตัวอย่าง Code Declaration Blocks
โครงสร้างของเอกสาร ASP.NET - Code Render Blocks โค้ดที่เขียนในส่วน <%...%>
ตัวอย่าง Code Render Blocks
โครงสร้างของเอกสาร ASP.NET - Web Forms สร้างส่วนติดต่อกับผู้ใช้ทำงานฝั่งเซิร์ฟเวอร์ แล้วจึงทำการสร้างเป็นแบบฟอร์ม HTML ส่งไปยังโปรแกรมบราวเซอร์ของผู้ใช้
ตัวอย่าง Web Form
โครงสร้างของเอกสาร ASP.NET - Server Controls คอนโทรลที่ทำงานฝั่งเซิร์ฟเวอร์
ตัวอย่าง Server Controls
โครงสร้างของเอกสาร ASP.NET - HTML Code โค้ดที่ทำงานฝั่งบราวเซอร์ที่นำมาใช้ในการจัดรูปแบบการแสดงผลบางอย่างโดยโค้ดที่เป็น HTML จะไม่ต้องถูกประมวลผลโดยเซิร์ฟเวอร์ แต่จะถูกส่งไปให้บราวเซอร์ของผู้ใช้โดยตรง
ตัวอย่าง HTML Code
โครงสร้างของเอกสาร ASP.NET - Server-Side Comments เป็นส่วนที่ช่วยในการแทรกหมายเหตุหรือคำอธิบายโปรแกรมภายในเอกสาร ASP.NET ซึ่งจะไม่ถูกทำการประมวลผลที่เซิร์ฟเวอร์ และจะไม่ปรากฏที่หน้าเว็บเพจด้วย รูปแบบ <%--หมายเหตุ--%>
คอนโทรล (Control) คอนโทรล (Control)หมายถึง ส่วนประกอบของโปรแกรมที่ทำหน้าที่ติดต่อกับผู้ใช้งาน เช่น ปุ่มคำสั่ง ช่องรับข้อความ เช็คบ๊อกซ์ เป็นต้น คอนโทรลนั้นนับได้ว่าเป็นสิ่งที่เพิ่มเติมมาจาก ASP และคำสั่งที่ใช้สร้างคอนโทรลจะมีรูปแบบคล้ายคลึงกับภาษา XML
ประโยชน์ของคอนโทรล • ลดการเขียนโปรแกรมที่ซับซ้อน คอนโทรลนั้นช่วยลดการเขียนโปรแกรมที่ซับซ้อนและทำให้การเขียนโปรแกรมง่ายขึ้น เช่น การดึงข้อมูลจากฐานข้อมูลมาแสดงในตาราง • มีการแปลภาษาที่ฝั่งเซิร์ฟเวอร์ทั้งหมด คอนโทรลนั้นจะถูกแปลที่ฝั่งเซิร์ฟเวอร์ทั้งหมด จึงลดภาระการทำงานที่ฝั่งผู้ใช้งาน (ไคลเอ็นต์) และสามารถแปลภาษา HTML ที่ปกติถูกแปลงทางฝั่งผู้ใช้ให้ไปแปลทางฝั่งเซิร์ฟ์เวอร์แทนได้ ทำให้ค่าต่าง ๆ จะถูกเก็บไว้ที่ฝั่งเซิร์ฟเวอร์มากกว่าฝั่งผู้ใช้
ประโยชน์ของคอนโทรล • รูปแบบหน้าเว็บเพจที่เกิดจากคอนโทรลมีความเหมาะสม เนื่องจากคอนโทรลจะถูกแปลที่ฝั่งเซิร์ฟเวอร์ ดังนั้นคอนโทรลสามารถตรวจสอบดูว่าบราวเซอร์ทางฝั่งผู้ใช้ใช้โปรแกรมใด แล้วทำการแปลงเป็นไฟล์ HTML ที่เหมาะสมสำหรับโปรแกรมบราวเซอร์นั้น ๆ ได้ซึ่งส่วนนี้นับเป็นประโยชน์อย่างยิ่ง เพราะในอนาคตการใช้อินเทอร์เนตไม่ได้จำกัดอยู่ในคอมพิวเตอร์เสมอไป เว็บไซต์อาจถูกเรียกใช้โดยโทรศัพท์มือถือ หรือเครื่อง PDA เป็นต้น
การใช้งานคอนโทรล การใช้งานในแต่ละคอนโทรลต้องเข้าใจถึง - คุณสมบัติ (Property) ของคอนโทรล - การทำงาน (Method) หรือ code ที่แต่ละคอนโทรลสามารถทำได้ - เหตุการณ์ (Event) ที่เกิดขึ้นกับแต่ละคอนโทรล การกำหนดคุณสมบัติ (Property) ให้กับคอนโทรล รูปแบบ ชื่อคอนโทรล.คุณสมบัติ
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 เป็นกลุ่มคอนโทรลที่นำข้อมูลจากแหล่งข้อมูลมาแสดงบนเพจ