บทที่ 1 แนะน ำ ASP.NET Web Pages บทน ำqsbg.org/BGOaudit/file/2.pdf ·...

บทท 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

แปลเปนไทยและปรบแตงเนอหาโดยพลรบ สวสด (phonrob.s@up.ac.th)