บทที่ 1 แนะนำ ASP.NET Web Pages - บทนำ เอกสารนี้จะแนะนาให้คุณรู้จักกับ ASP.NET Web Pages เบื้องต้นเพื่อนาความรู้ที่ได้ไปใช้ในการพัฒนา Web Application และฝึกฝีมือหา ความรู้เพิ่มเติมขั้นสูงในลาดับต่อไป ระดับควำมเชี่ยวชำญ: มือใหม่สาหรับ ASP.NET ควำมรู้พื้นฐำนที่ต้องมี : HTML, basic cascading style sheets (CSS) เนื้อหำที่จะได้เรียนรู้ในบทนี้ ASP.NET Web Pages คืออะไรและทาอะไรได้บ้าง แนะนา Visual Studio 2013 สาหรับการพัฒนา ASP.NET Web Pages การติดตั้งซอฟต์แวร์ต่างๆที่จาเป็น การสร้าง Web Application ด้วย Visual Studio 2013 เทคโนโลยีที่ใช้ในบทนี้ Visual Studio 2013 Community Edition ไฟล์แบบ .cshtml ซอฟต์แวร์ที่ใช้ในบทนี้ ASP.NET Web Pages (Razor) 3.0 Visual Studio 2013 Community Edition ควำมรู้พื้นฐำนที่คุณต้องมี เรามั่นใจว่าคุณต้องรู้จักเทคโนโลยีต่อไปนี ้ HTML – ไม่จาเป็นต้องรู้ลึกมาก และเราจะไม่อธิบายลงลายละเอียดให้ลึกลงไป และในเอกสารนี้ก็จะใช้แต่คาสั่ง HTML เบื้องต้น เท่านั้น Cascading style sheets (CSS) – เราอยากอธิบายเหมือนกับ HTML ความรู้พื้นฐานเรื่องระบบฐานข้อมูล – หากคุณเคยใช้โปรแกรม Excel เพื่อกรอกข้อมูล คานวณข้อมูล และค้นหาข้อมูล ก็ถือว่ามี ความมรู้พอสาหรับการพัฒนาตามเอกสารนี้แล้ว เรามั่นใจว่าคุณมีความสนใจในการเขียนโปรแกรม ASP.NET Web Pages ขั้นเริ่มต้นด้วยภาษาโปรแกรมที่เรียกว่า C# (อ่านว่าซีชาร์ป) คุณ ไม่จาเป็นต้องมีพื้นฐานของภาษีนี้มาก่อน ขอแค่คุณสนใจ หากคุณเคยเขียนภาษาอื่นๆมาก่อนเช่น JavaScript นั่นก็ถือว่ายอดเยี่ยมเลย คาเตือน – หากคุณมีประสบการณ์การเขียนโปรแกรมมามากมาย คุณจะรู้สึกว่าเอกสารนี้ช้า ไม่ทันใจคุณ เพราะเราต้องการให้เป็นเช่นนั้น เพื่อโปรแกรมเมอร์มือใหม่สามารถเริ่มต้นได้รวดเร็ว คุณอาจจะข้ามบทนา และบทอื่นๆสองสามบทแรกไปหากคุณต้องการ
16
Embed
บทที่ 1 แนะน ำ ASP.NET Web Pages บทน ำqsbg.org/BGOaudit/file/2.pdf · 2020-03-13 · บทที่ 1 แนะน ำ ASP.NET Web Pages - บทน ...
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
บทท 1 แนะน ำ ASP.NET Web Pages - บทน ำ
เอกสารนจะแนะน าใหคณรจกกบ ASP.NET Web Pages เบองตนเพอน าความรทไดไปใชในการพฒนา Web Application และฝกฝมอหาความรเพมเตมขนสงในล าดบตอไป
เนอหำทจะไดเรยนรในบทน ASP.NET Web Pages คออะไรและท าอะไรไดบาง แนะน า Visual Studio 2013 ส าหรบการพฒนา ASP.NET Web Pages การตดตงซอฟตแวรตางๆทจ าเปน การสราง Web Application ดวย Visual Studio 2013
เทคโนโลยทใชในบทน Visual Studio 2013 Community Edition ไฟลแบบ .cshtml
ซอฟตแวรทใชในบทน ASP.NET Web Pages (Razor) 3.0 Visual Studio 2013 Community Edition
ควำมรพนฐำนทคณตองม เรามนใจวาคณตองรจกเทคโนโลยตอไปน
HTML – ไมจ าเปนตองรลกมาก และเราจะไมอธบายลงลายละเอยดใหลกลงไป และในเอกสารนกจะใชแตค าสง HTML เบองตนเทานน
ASP.NET Web Pages คออะไร? ASP.NET Web Pages คอชดซอฟตแวรและเครองมอตางๆเพอชวยในการสราง Web Application ทสามารถปรบเปลยนไดตามการเขยนค าสงและเงอนไขตางๆตามตองการ ซงแตกตางจากการสราง Web โดยใชเพยง HTML อยางเดยวทจะได Web แบบปรบเปลยนไมไดคงทถาวร
Web ทปรบเปลยนไดดวยการเขยนค าสงชวยใหคณสามารถสราง Web Application ทมการท างานไดทกอยางตามทตองการ คณสามารถสรางแบบฟอรมเพอถามขอมลตางๆและเปลยนแปลงการแสดงผลของแบบฟอรมดวยการเขยนค าสง สามารถน าไปจดเกบลงระบบฐานขอมล และน ามาแสดงเปนรายการขอมลในภายหลง คณสามารถสงอเมลจาก Website ของคณ คณสามารถตดตอกบบรการตางๆบน Web เชนบรการแผนท และสรางหนาเวบทแสดงขอมลจากบรการตางๆเหลานน
Visual Studio 2013 Community Edition คออะไร? Visual Studio 2013 คอซอฟตแวรทรวมเครองมอทงหมดทจ าเปนส าหรบการพฒนาซอฟตแวรตางๆรวมทง Web Application มทงเครองการเขยนค าสง การทดสอบ การจดการระบบฐานขอมล และเครองมอในการตดตง Web Application บนระบบเครอขาย
Visual Studio 2013 Community Edition คอรนหนงของ Visual Studio 2013 ซงเปนรนทสามารถใชงานไดโดยไมเสยคาใชจายโดยมเงอนไขดงน
o ตองไมใชงานในหนวยงานเอกชนขนาดใหญ ทมจ านวนเครองคอมพวเตอรเกน 250 เครอง หรอมผลประกอบการเกน 1 US Dollar
o มจ านวนโปรแกรมเมอรไมเกน 5 คน
เกยวกบเอกสำรกำรสอนฉบบน เอกสารการสอนนจะแนะน าวธการใชงาน ASP.NET Web Pages โดยมทงหมด 9 บท ซงเปนสวนหนงของบทเรยนส าหรบผเรมตนเรยนร ASP.NET Web Pages เพอใหสามารถสราง Website ทดเปนมออาชพไดโดยงาย
เนอหาทง 9 บทประกอบไปดวย
แนะน าภาพรวมทกอยางและการตดตงซอฟตแวร (คอบททคณก าลงอานอย) แนะน าพนฐานการเขยนโปรแกรม ASP.NET Web Pages การสรางฐานขอมล การสรางและประมวลผลขอมลจากแบบฟอรม การเพม แกไขและลบขอมลจากฐานขอมล
เลอกแฟมทตองการตดตง แลวเลอกหวขอ I agree to the License Terms and Privacy Policy. แลวคลกปม Next
ท าการเลอกรายการซอฟตแวรและสวนประกอบทจะตดตงโดยสงทจ าเปนตองเลอกส าหรบการเขยนโปรแกรมของเรากคอ Microsoft SQL Server Data Tools และ Microsoft Web Developer Tools โดยคณสามารถเลอกรายการอนๆไดตามทตองการ หลงจากเลอกเสรจแลวใหคลกทปม INSTALL เพอเรมการตดตง
ขนตอนถดไปเปนการตดตงระบบจดการฐานขอมลโดยเราสามารถใชระบบฐานขอมลไดมากหมายหลายยหอในการท า Web Application ดวย ASP.NET Web Pages โดยเราจะใช SQL Server 2012 ซงเปนระบบฐานขอมลทผนวกเขากบ ASP.NET Web Pages ไดดทสด โดย SQL Server 2012 มทงในแบบมคาใชจายและแบบใชงานไดฟร โดยเราจะเลอกใช SQL Server 2012 Express Edition ซงเปนรนส าหรบใชงานไดฟร
เรมท าการตดตง SQL Server 2012 Express โดยการไปท http://www.microsoft.com/en-us/download/details.aspx?id=29062 แลวคลกทปม Download
คลกเลอกทรายการ ENU\x64\SQLEXPRADV_x64_ENU.exe แลวคลกปม Next เพอเรม Download
คลกท New SQL Server stand-alone installation or add features to an existing installation
คลกท Next แลวเลอก Perform a new installation of SQL Server 2012
คลกเลอกท I accept the license term แลวคลกปม Next
ในหนาจอถดไปเปนการเลอกสวนประกอบทจะตดตง โดยตองเลอกรายการ Database Engine Services เปนอยางนอยแลวคลกทปม Next
ในหนาจอถดไปใหเลอกท Named instance โดยใชชอ Instance วา SQLExpress แลวคลกทปม Next
คลกทปม Next ทหนาจอ Database Engine Configuration เลอก Authentication Mode เปน Mixed Mode แลวกรอกรหสผานส าหรบ sa (System administrator) แลวคลกปม Next
คลกปม Next เพอเรมการตดตงจนแลวเสรจ
เรมใชงำน Visual Studio 2013 หลงจากตดตงซอฟตแวรตางๆครบถวนแลวใหท าการเปดโปรแกรม Visual Studio 2013 โดยในการเปดครงแรกใหท าการ Login โดยใช Microsoft Account เพอ Activate ซอฟตแวรเพอใชงานจรง หลงจากนนใหท าการสรางโครงการใหมเพอเรมการสราง Web Application โดยการคลกท New Project ในหนาจอ Start Page
ทหนาตาง New Project ในหวขอ Template ใหเลอก Visual C# > Web > ASP.NET Web Application ในชอง Name ใหตงชอ Project เปน WebPagesMovies ในชอง Location ใหเลอกแฟมทจะจดเกบไฟลโครงการ หลงจากนนคลกปม OK เพอสรางโครงการใหม
ในหนาจอ New ASP.NET Project – WebPagesMovies ในชอง Select a template ใหเลอก Empty แลวคลกปม OK
ทดสอบสรำงหนำเวบ ตอไปเราจะทดลองสรางหนาเวบแบบงายๆ 1 หนาเพอเรยนรวธการสรางหนาเวบใน Visual Studio 2013 โดยใชหนาตาง Solution Explorer ทปรากฎดานขวามอของโปรแกรม
ทหนาตาง Solution Explorer ท าการคลกขวาทชอโครงการคอ WebPagesMovies เพอเลอกแฟมระดบบนสดแลวเลอกเมนลอย Add > New Item
ทหนาตาง Add New Item ใหเลอกท Razor > Web Page (Razor V3) ในชอง Name ใหตงชอไฟลหนาเวบทจะสรางใหมวา HelloWorld.cshtml แลวคลกปม Add
Visual Studio 2013 จะท าการสรางไฟลหนาเวบแบบ ASP.NET Web Pages และจะแสดงหนาตางเขยนค าสงส าหรบไฟลดงกลาว
<!DOCTYPE html> <html> <head> <title>Hello World Page</title> </head> <body> <h1>Hello World Page</h1> <p>Hello World!</p> </body> </html>
ใหท าการบนทกไฟล HelloWorld.cshtml ดวยการเลอกเมน File > Save หรอกดปม CTRL และ S บนคยบอรด
วธกำรทดสอบหนำเวบทเรำสรำง ใหท าการเปดไฟล HelloWorld.cshtml หากปดไปแลวดวยการ Double Click ทชอไฟลในหนาตาง Solution Explorer หลงจากนนใหท าการคลกขวาแลวเลอกเมนลอย View in browser
Visual Studio 2013 จะสงให Web Server ส าหรบการท าสอบท างาน (คอ IIS Express) ซงสามารถใชในการทดสอบหนาเวบภายในเครองของเรากอนทจะตดตงใน Web Server จรง และจะท าการเปดหนาตาง Web Browser ขนมาและแสดงผลหนาเวบของเราโดยอตโนมต
ตอนทดสอบหนาเวบของเราใหสงเกตวาใน Web Browser จะแสดงทอยของหนาเวบวา http://localhost:64633/HelloWorld.cshtml โดยทหมายเลขทายค าวา localhost จะเปนหมายเลขทสมมาและแตกตางกน และค าวา localhost หมายถงใช Web Server ทอยภายในเครองของเรา (ในทนคอ IIS Express) ซงตดตงมาพรอมกบ Visual Studio 2013
ตวเลขทายค าวา localhost คอ port number เปนหมายเลขทใชตดตอโดยตรงกบ IIS Express เฉพาะส าหรบเวบแตละเวบ โดยหากเราท าการเปดโครงการหลายโครงการพรอมกนกจะได port number แตกตางกนเพอท าใหสามารถทดสอบหนาเวบของเราแยกแตละโครงการได โดย port number จะถกสมเปนตวเลขระหวาง 1024 ถง 65536
หากคณท าเวบไซตเสรจและน าขน Web Server จรงๆทเปนเครองอนคณจะไมสามารถใช localhost ในการเปดหนาเวบของคณบนเครอง Web Server ไดคณจะตองใชชอเครองของ Web Server นนแทน เชน http://myhostingsite/mywebsite/HelloWorld.cshtml แทนโดยเราจะกลาวถงเพมเตมในภายหลง
ทดลองแทรกค ำสงภำษำ C# ใหท าการปดหนาจอ Web Browser ททดสอบหนาเวบและกลบไปยง Visual Studio 2013 และทบรรทดบนสดของหนาตางเขยนค าสงของไฟล HelloWorld.cshtml ทเปดอยใหพมพค าสงดงนแทรกเขาไปบนสด
ท าการทดสอบหนาเวบนอกทตามกระบวนการทคณไดเคยท าแลว แตคราวนไมตองท าการบนทกไฟล HelloWorld.cshtml เนองจากทกครงกอนการทดสอบหนาเวบ Visual Studio 2013 จะท าการบนทกใหเองอตโนมต เมอหนาเวบทแกไขปรากฎใน Web browser กจะท าการแสดงวนและเวลาปจจบนดวย
เมอหนาเวบแสดงขนมาใหลองท าการ Refresh หนาเวบทแสดงบน Web browser ดวยการกดปม F5 บนคยบอรด คณจะพบวาเวลาจะถกอพเดตตลอดเวลา ใหทดลองดค าสง HTML ทแสดงบนหนา Web browser ดวยการคลกขวาแลวเลอกเมนลอย View source คณจะพบกบค าสง HTML ดงน
สงเกตใหดจะพบวาค าสง @{ } ทเราเพมลงไปบรรทดบนสดไมมอย และวนเวลาแสดงเปนขอความแทนทจะเปนค าสงวา @currentDateTime โดยสงนจะเกดขนเฉพาะกบไฟลนามสกล cshtml เทานนโดยเปนผลจากการประมวลผลค าสงของ ASP.NET ทจะท าการประมวลผลค าสงตางๆทายเครองหมาย @ แลวน าผลลพธทไดแทรกกลบไปเปนขอความหรอค าสง HTML ทวไปกอนสงกลบมาท Web browser เพอแสดงผล
กำรท ำงำนของ ASP.NET Web Pages แนวคดเกยวกบการท างานของ ASP.NET Web Pages กคอนอกเหนอจากการเขยนค าสง HTML แลวเรายงสามารถเขยนค าสง Razor เพอประมวลผลขอมลตางๆตามทเราตองการ โดยในตวอยางทผานมาคอการดงเอาวนทและแวลาปจจบนของระบบแลวแสดงผล โดยเราสามารถแทรกค าสงนนเขาไปโดยตรงในหนาเวบไมวาจะเปนสวนไหนของหนา เมอผใชงานเขามาดหนาเวบของเราทมนามสกลไฟลเปน cshtml ผาน Web browser ในเครองคอมพวเตอรของเคา ASP.NET จะท าการประมวลผลค าสงตางๆและแทรกผลลพธทได ณ จดทเราเขยนค าสงไว แลวท าการสงผลลพธหนาเวบทผานการประมวลผลแลวในรปแบบ HTML กลบมา โดยภาพดานลางแสดงกระบวนการท างานทไดกลาวไปน
แนวคดตามภาพดานบนเปนแนวคดพนฐานของ ASP.NET แตยงมอกหลายสงทเราสามารถท าไดดวยการเขยนค าสง Razor รวมทงเราสามารถสามารถสรางไฟล cshtml และเขยนค าสงอนไดเชนเดยวกบไฟล HTML ปกตเชนการใชเขยนค าสง JavaScript และการใชงานกบ JQuery เปนตน สงเรานคณจะพบในบทถดๆไป