[ASP.NET Web Forms Workshop#01] เริ่มต้นสร้าง Project และทำความรู้จัก Bootstrap
ขอต้อนรับเข้าสู่ Workshop สำหรับ ASP.NET Web forms ครับ จุดมุ่งหมายของการทำ Workshop นี้ มีดังนี้ครับ
- สามารถสร้าง Web Application สำหรับ Connect Database ได้ (Insert, Update, Delete, Select)
- สามารถเข้าใจการทำงานของฝั่ง Client Side(JavaScript) และ Server Side(C#) ในเบื้องต้น
- สามารถสร้าง Form และมีการ Validate ได้
- สามารถเข้าใจการติดตั้ง Nuget Package ในเบื้องต้นได้
- สามารถเข้าใจการใช้งานร่วมกันของไฟล์ รวมไปถึงการ Inheritance ในระดับเบื้องต้นได้
สำหรับบทความ #01 นี้ ผู้เขียนจะนำเสนอการทำความรู้จักกับ Project ที่สร้างขึ้น ซึ่งมีการติดตั้ง Bootstrap อยู่แล้ว และผู้เขียนจะกล่าวถึงการทำงานของ Master Page เบื้องต้นด้วย โดยจะใช้ Project ที่สร้างขึ้นจากบทความดังกล่าวครับ
บทความสำหรับ workshop นี้จะใช้โปรแกรม Microsoft Visual Studio และ Microsoft SQL Server Express ครับ ซึ่งสามารถติดตั้งได้จากบทความดังต่อไปนี้ครับ
ทำความเข้าใจ Master Page ใน ASP.NET Web Form
หลังจากที่ได้ Project ที่สร้างขึ้นจากบทความ การติดตั้ง MS Visual Studio และทดสอบสร้าง Project ก่อนอื่นให้คลิกปุ่ม Stop หรือกด Shift+F5 เพื่อหยุดการ Run Project และให้สร้างไฟล์ใหม่โดนการกด Ctrl+Shift+A หรือคลิกขวาที Project และไปที่ Add >> New Item... ตามภาพ
เมื่อเข้ามาที่หน้าต่าง Add new item จะพบกับรายการ Item มากมาย ในที่นี้ผู้เขียนต้องการให้สร้างไฟล์ Web Form ที่เรียกใช้ Master page โดยเลือกที่ Visual C# >> Web >> Web form with Master Page ให้ตั้งชื่อเป็น MovieList.aspx และเราจะพบกับหน้าต่าง Select a Master Page ให้เราเลือก Site.Master ซึ่งเป็นไฟล์ที่ถูกสร้างขึ้นเมื่อเราสร้าง Project จากนั้นคลิก OK
ไฟล์จะถูกสร้างขึ้น และเราจะพบว่ามี Code ดังภาพนี้
สำหรับท่านผู้อ่านที่เป็นผู้เริ่มต้นเขียนโปรแกรมอาจจะมีไม่เข้าใจ อยากขอแนะนำให้ดูที่
- <asp:Content ID=“Content1” ContentPlaceHolderID=“MainContent” ….
ให้ทำการ Ctrl+C ที่คำว่า MainContent เก็บไว้ เราจะไปดูกันว่ามันมาจากไหน โดยให้เปิดไฟล์ที่ชื่อว่า Site.Master และให้ Ctrl+F และ Ctrl+V เพื่อค้นหาว่า ค่านี้มาจากไหนดังภาพ
ใช่แล้วครับ เราพบแล้วว่า มันมาจากส่วนนี้ของไฟล์ Master นี่เอง ให้นึกไว้ว่า มันเหมือนกับการเจาะรูไว้ที่หน้าแม่ และหน้าลูกก็สามารถเขียนอะไรลงไปก็ได้นั่นเอง จากนั้นให้ท่านผู้อ่านลอง F5 ดู และเปลี่ยน URL เป็น
- http://localhost:xx/MovieList
จะพบกับหน้าจอดังนี้
จะพบว่าหน้าเว็บจะมีส่วนที่ว่างเปล่า ตรงกับไฟล์ที่เราสร้างขึ้นมา ส่วนที่มี NavBar หรือเมนูด้านบนของเว็บนั้นมากจากไฟล์ Master Page นั่นเอง
การใช้งาน Bootstrap ใน C# ASP.NET Web Form เบื้องต้น
มาถึงในส่วนของ Bootstrap กันบ้าง ผู้เขียนจะเริ่มต้นให้ท่านผู้อ่านได้ลองใช้แค่เบื้องต้นเท่านั้น และใช้ version 3 ให้ท่านผู้อ่านเข้าไปที่
เมื่อเข้ามาพบกับเจ้า Bootstrap แล้ว ทางผู้เขียนขอแนะนำว่า ให้ท่านผู้อ่านลองเข้าไปดู 2 เมนูนี้คร่าว ๆ ก่อนเลย นั่นคือ CSS และ JavaScript ซึ่ง 2 เมนูนี้จะค่อนข้างสำคัญมาก ๆ และใช้บ่อยมาก ๆ โดยเฉพาะ CSS
เมื่อท่านผู้อ่านได้ลองดูคร่าว ๆ แล้ว เราจะลองหยิบมาใช้งานจริงกันครับ ให้เริ่มจากดูในส่วนของ table ครับ
สำหรับบทความนี้เราจะเขียน Code HTML เท่านั้น ยังไม่ได้ยุ่งเกี่ยวกับส่วนของ Behind Code แต่อย่างใด ให้เริ่มสร้าง table โดยมี class ตามตัวอย่างกรอบสีแดงในภาพครับ โดยพิมพ์ code เหล่านี้ใสไว้ที่ตำแหน่งตามภาพครับ (ขั้นตอนนี้จะเป็นการแก้ไขไฟล์ที่ .aspx เท่านั้น ซึ่งท่านผู้อ่านไม่ต้องทำการ Stop การ Run ก็ได้ครับ)
เมื่อใส่เสร็จแล้วให้ทำการ Refresh ที่ Web browser เพื่อดูผลลัพธ์ดังนี้
เพื่อความเข้าใจว่ามันเป็นมาได้อย่างไรถึงมีสีนี้ ให้ทำการคลิกขวาที่ Row ที่มีสีเขียว จากนั้นเลือก Inspect ดังภาพ
เราจะสามารถเห็น source code ที่เราพิมพ์ไว้ และที่กรอบสีแดงด้านขวา เราจะรู้ว่ามีการ set style สำหรับใส่สีให้มันนั่นเอง (สำหรับท่านผู้อ่านที่เป็นมือใหม่ หรือยังไม่เข้าใจเรื่อง style ในส่วนนี้ขอให้อ่านผ่านไปก่อนนะครับ แล้วผู้เขียนจะเขียนบทความเกี่ยวกับ style ในคราวหน้าครับ)
ต่อไปเราจะลองใส่ข้อมูลใน table ให้ละเอียดมากขึ้นตามนี้ครับ (ขอขอบคุณข้อมูลภาพยนต์จาก majorcineplex และภาพถ่ายฟรีจาก pexels มา ณ ที่นี้ด้วยนะครับ)
จากนั้นที่หน้าเว็บให้ Refresh ดูอีกครั้ง จะพบกับผลลัพธ์ดังนี้
จบเรียบร้อยครับสำหรับบทความนี้ ในครั้งหน้าผู้เขียนจะเขียนถึงการใช้งาน Connect กับ Database เบื้องต้นนะครับ ขอขอบคุณท่านผู้อ่านทุกท่านนะครับที่ได้อ่านจนจบ
หากท่านผู้อ่านมีคำถามหรือข้อสงสัย หรือมีคำแนะนำ คำติ สามารถติดต่อผู้เขียนได้เลยครับ
