บทที่1 แนะนำ ASP.NET Web Pages - บทนำ
16
บทที่ 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 นั่นก็ถือว่ายอดเยี่ยมเลย คาเตือน – หากคุณมีประสบการณ์การเขียนโปรแกรมมามากมาย คุณจะรู้สึกว่าเอกสารนี้ช้า ไม่ทันใจคุณ เพราะเราต้องการให้เป็นเช่นนั้น เพื่อโปรแกรมเมอร์มือใหม่สามารถเริ่มต้นได้รวดเร็ว คุณอาจจะข้ามบทนา และบทอื่นๆสองสามบทแรกไปหากคุณต้องการ
Transcript of บทที่1 แนะนำ ASP.NET Web Pages - บทนำ
บทท 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 นนกถอวายอดเยยมเลย
ค าเตอน – หากคณมประสบการณการเขยนโปรแกรมมามากมาย คณจะรสกวาเอกสารนชา ไมทนใจคณ เพราะเราตองการใหเปนเชนนนเพอโปรแกรมเมอรมอใหมสามารถเรมตนไดรวดเรว คณอาจจะขามบทน า และบทอนๆสองสามบทแรกไปหากคณตองการ
คณตองมอะไรบำง เครองคอมพวเตอรทท างานโดยใชระบบปฎบตการ Windows 8, Windows 7, Windows Server 2008 หรอ Windows Server
2012 มการเชอมตอออกสอนเตอรเนต คณมสทธระดบผดแลระบบเพอใหสามารถตดตงซอฟตแวรตางๆได
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 ซงเปนรนทสามารถใชงานไดโดยไมเสยคาใชจายโดยมเงอนไขดงน
1. ใชในการเรยนการสอน การท าผลงานวจย และโครงการซอฟตแวรแบบ Open Source 2. หากนอกเหนอจากขอ 1 คณกสามารถใชงานไดโดยมขอจ ากดดวน
o ตองไมใชงานในหนวยงานเอกชนขนาดใหญ ทมจ านวนเครองคอมพวเตอรเกน 250 เครอง หรอมผลประกอบการเกน 1 US Dollar
o มจ านวนโปรแกรมเมอรไมเกน 5 คน
เกยวกบเอกสำรกำรสอนฉบบน เอกสารการสอนนจะแนะน าวธการใชงาน ASP.NET Web Pages โดยมทงหมด 9 บท ซงเปนสวนหนงของบทเรยนส าหรบผเรมตนเรยนร ASP.NET Web Pages เพอใหสามารถสราง Website ทดเปนมออาชพไดโดยงาย
เนอหาทง 9 บทประกอบไปดวย
แนะน าภาพรวมทกอยางและการตดตงซอฟตแวร (คอบททคณก าลงอานอย) แนะน าพนฐานการเขยนโปรแกรม ASP.NET Web Pages การสรางฐานขอมล การสรางและประมวลผลขอมลจากแบบฟอรม การเพม แกไขและลบขอมลจากฐานขอมล
สงทคณจะสรำง เอกสารการสอนนจะเปนการเรยนรทจะสราง Website ทคณสามารถแสดงรายการภาพยนตทคณชนชอบ คณจะสามารถกรอกขอมลภาพยนต แกไขและแสดงรายการภาพยนต โดยมภาพตวอยาง Website ทสรางแลวเสรจดงน
ภาพหนาส าหรบแสดงและคนหารายการภาพยนต
ภาพหนาแบบฟอรมกรอกขอมลภาพยนตทตองการเพม
เรมกำรตดตงซอฟตแวรทตองใช ซอฟตแวรตวแรกทคณตองท าการตดตงคอ Visual Studio 2013 Community Edition โดยคณจะตองท าการ Download จาก Website ของ Microsoft และท าการตดตงลงในเครองของคณ และคณตองม Microsoft Account ดวย (Hotmail หรอ Outlook.com) เพอใชในการ Activate ซอฟตแวรจากทดลองใช เปน Community Edition ส าหรบขนตอนการตดตงมดงน
ท าการเปดโปรแกรม Google Chrome แลวไปท https://www.visualstudio.com/products/visual-studio-community-vs แลวคลกทปม Download
หลงจาก Download เสรจจะไดไฟลชอ vs_community.exe ในแฟม Download ท าการ Double click เพอตดตง
เลอกแฟมทตองการตดตง แลวเลอกหวขอ 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
เมอการ Download เสรจสนจะไดไฟล SQLEXPRADV_x64_ENU.exe ในแฟม Downloads ใหท าการ Double click เพอเรมการตดตง
คลกท 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 และจะแสดงหนาตางเขยนค าสงส าหรบไฟลดงกลาว
หนาตาง Solution Explorer
ในหนาตางเขยนค าสงเราสามารถแทรกค าสงภาษา HTML และภาษา C# ลงไปไดในหนาเดยวกนซงจะกลาวในภายหลง แตใหสงเกตวาในหนาตางเขยนค าสงจะมการแสดงผลสตางๆทแตกตางกน เรยกวา syntax highlighting ซงเปนเครองมอชวยอ านวยความสะดวกในการเขยนค าสง
ขนตอไปใหเขยนค าสงเพมเตมภายในสวนเนอหาของ <title> และ <body> ดงน
<!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 ทเปดอยใหพมพค าสงดงนแทรกเขาไปบนสด
@{ var currentDateTime = DateTime.Now; }
ค าสงดานบนเปนภาษา C# ทเขยนแทรกในหนาเวบโดยทวไปจะเรยกวาค าสง Razor (เรเซอร) โดยความหมายของค าสงทเพมเขาไปคอการการดงเอาวนและเวลา ณ ปจจบนไปเกบไวในตวแปรชอวา currentDateTime เราจะกลาวถง Razor เพมเตมใหนบทถดๆไป
ตอไปใหแทรกค าสงเพมเตมใตบรรทด <p>Hello World!</p> ดงน
<p>Right now it's @currentDateTime</p>
ค าสงบรรทดนจะเปนการดงคาวนและเวลาทเกบไวในตวแปร currentDateTime ทไดประกาศไวในบรรทดบนสดเพอมาแสดง ณ จดทเราก าหนดโดยการระบเครองหมาย @ (แอท) น าหนาหมายถงการแทรกค าสง Razor แบบดวน (Inline code)
ท าการทดสอบหนาเวบนอกทตามกระบวนการทคณไดเคยท าแลว แตคราวนไมตองท าการบนทกไฟล 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 เปนตน สงเรานคณจะพบในบทถดๆไป
บทถดไป ในบทถดไปคณจะลงลกลงไปในการเขยนค าสงตางๆของ Razor เพมขนอกนดหนอย
ผเขยน ตนฉบบภาษาองกฤษเขยนโดย Tom FitzMacken ซงเปน Senior Programing Writer ในหวขอ Web Platform & Tools
Content team http://www.asp.net/web-pages/overview/getting-started/introducing-aspnet-web-pages-2/getting-started
แปลเปนไทยและปรบแตงเนอหาโดยพลรบ สวสด ([email protected])
