ASP.NET MVC Part2: MVC with Bootstrap

สวัสดีค่ะ จากบทความที่แล้ว ได้กล่าวถึง ASP.NET MVC ไปบ้างแล้วว่าคืออะไร ในส่วนของบทความนี้จะแนะนำการเริ่มต้นสร้าง Project เพื่อพัฒนา Web Application ด้วย Microsoft Visual Studio 2013 โดยใน MVC5 ซึ่งเป็นเวอร์ชันล่าสุด ได้มีการติดตั้ง Bootstrap มาให้ในตัว ช่วยให้การพัฒนาในส่วนของ View สามารถเรียกใช้งาน Bootstrap class ร่วมกับ Razor syntax(จะกล่าวถึงในบทความถัดไป) ในการแสดงผลหน้า View ได้ง่ายขึ้นและทำให้สามารถรองรับหลากหลายอุปกรณ์ที่มีหน้าจอที่มีขนาดแตกต่างกันออกไป โดยที่เราไม่ต้องเสียเวลาติดตั้งเพิ่มเอง

Tools & Environment 

  • Microsoft Visual Studio 2013
  • Microsoft .Net Framework 4.5
  • ภาษาที่ใช้ในการพัฒนา Visual C#

Step 1: เปิด Visual Studio ขึ้นมา และคลืกที่ New Project

รูปที่ 1


Step 2: ที่เมนูด้านซ้ายให้เลือก Visual C# > Web >ASP.NET Web Application และตั้งชื่อ Project ดังรูปที่ 2 หลังจากนั้นให้กดปุ่ม OK

รูปที่ 2
Step 3: เลือก Template Web โดยเลือกเป็น MVC หลังจากนั้นกด OK
รูปที่ 3
Step 4: Check และ Update เวอร์ชัน Bootstrap
สังเกตที่ solution explorer ฝั่งด้านขวา ที่โฟลเดอร์ Content และโฟลเดอร์ Scripts จะพบไฟล์ Css และ JavaScript ของ Bootstrap ติดตั้งมาให้เรียบร้อยแล้ว
รูปที่ 4
ตรวจสอบเวอร์ชันของ Bootstrap ว่าเป็นเวอร์ชันล่าสุดแล้วหรือยัง โดย คลิกขวา ที่ Project แล้วเลือก Manage Nuget Packages ดังรูปที่ 5
รูปที่ 5
จะปรากฎหน้าต่าง Manage Nuget Package ซึ่งจะแสดง Package หรือ Library  ทั้งหมดที่ตอนนี้ Project เราติดตั้งอยู่ ให้เลือกดูที่ Boostrap และสังเกตคำอธิบายที่ช่องด้านขวา จะแสดงเวอร์ชั่นอยู่ ซึ่งจากรูปที่ 6 เป็น Bootstrap 3.0 ซึ่งเป็นเวอร์ชันปัจจุบันแล้ว หากยังไม่เป็นปัจจุบันจะขึ้นปุ่มให้สามารถ Update เวอร์ชันได้
รูปที่ 6
 หลังจากนั้นให้ไปดูที่โฟลเดอร์ App_Start > BudleConfig.cs  ดังรูปที่ 7 โดยไฟล์ ฺBundleConfig.cs จะทำหน้าที่ลงทะเบียนเก็บ Path ของไฟล์ Java script และ CSS ต่างๆที่มีการเรียกใช้ในระบบไว้ที่นี่ เพื่อไว้เวลาเราอ้าง Path เราสามารถอ้าง Path ตามชื่อ Bundle ที่เราสร้างโดยไม่ต้องเรียกไปยัง Path File ตรงๆได้
รูปที่ 7
Step 5: ทดลอง Run preview ดูหน้าเว็บ
ก่อนจะรัน ให้ไปที่ โฟลเดอร์ View > Shared >_layout.cshtml ซึ่งเป็น Layout ของระบบ(เทียบกับ Web Form ก็คือ Master Page) จากรูปที่ 8 จะเห็นว่า มีการเรียกใช้ Bootstrap Class ในการจัดวาง Component และ Layout ต่างๆไว้ให้
รูปที่ 8

กดปุ่ม Run  เพื่อดูผลลัพธ์ ออกมาดังรูป 9

รูปที่ 9
เมื่อทำการย่อปรับเป็นขนาด Mobile หน้าเว็บก็จะปรับตามขนาดของหน้าจอของอุปกรณ์ที่แสดงผลดังรูป  เป็นอันเสร็จเรียบร้อย ^^
———End——–

ASP.NET MVC Part 1 : ทำความรู้จักกับ ASP.NET MVC

Introduction
สวัสดีค่ะ วันนี้ผู้เขียนจะมาแนะนำให้รู้จักกับแนวทางการพัฒนา Web Application ด้วย ASP.NET MVC ก่อนหน้านี้ผู้เขียนจะพัฒนา Web Application ด้วย ASP.NET Web Forms มาตลอด และช่วงที่ผ่านมา ผู้เขียนเองมีโอกาสได้ศึกษาและทำความเข้าใจกับ ASP.NET MVC มาซักระยะหนึ่ง จึงมาเขียนบทความเล่าสู่กันฟังเกี่ยวกับ การพัฒนา Web Application ด้วย ASP.NET MVC ซึ่งในบทความนี้ อ้างอิงมาจากบทความ WebForms vs MVC ซึ่งจะประกอบไปด้วย

  • ASP.NET คืออะไร?
  • ASP.NET Web Forms คืออะไร?
  • MVC คืออะไร?
  • ASP.NET MVC คืออะไร?
  • เปรียบเทียบระหว่าง Web Forms และ MVC
  • เลือกใช้อะไรดี ระหว่าง Web Forms และ MVC ?

ASP.NET คืออะไร?

   คือ Web application framework ที่ถูกพัฒนาโดย Microsoft สำหรับนักพัฒนาในการพัฒนา web application ขึ้นมา โดยโปรแกรมด้วยภาษา C#,VB.NET และอื่นๆ ณ ปัจจุบัน มีอยู่ 2 รูปแบบในการเลือกใช้พัฒนา ได้แก่ Web Forms และ MVC
ASP.NET Framework
ที่มา: http://www.codeproject.com/Articles/528117/WebForms-vs-MVC

 

ASP.NET Web Forms คืออะไร?

   คือ framework ในการพัฒนา web application ที่ถูกออกแบบมาในลักษณะ RAD(Rapid Application Development) คือ สามารถพัฒนา Web application ได้อย่างรวดเร็ว โดยใช้วิธีการลาก control มาวางบนพื้นที่ design หน้า page และเขียน code ภายใต้ control เหล่านั้น โดยอาศัย concept การทำงานของ Postback(การส่งข้อมูลไปมาระหว่าง server และ client) และ ViewState(การเก็บค่าให้คงไว้ระหว่างการทำ postback)

วิธีการสร้างหน้า page ของ Web Forms

 

การทำงานของ Web Forms
ที่มา: http://www.codeproject.com/Articles/528117/WebForms-vs-MVC

MVC คืออะไร?
คือ design pattern ที่ใช้ในการสร้าง Web Application แนวความคิดของ MVC design pattern จะจัดการแยกหน้าที่ขององค์ประกอบใน application ออกเป็นส่วนๆ(separation) เพื่อให้สะดวก รวดเร็ว และง่ายขึ้น ในการสร้าง พัฒนา และขยายระบบเพิ่มเติม รวมถึงมันจะทำให้เราทดสอบ application นี้เป็นส่วนๆได้โดยไม่กระทบ หรือกระทบน้อยที่สุดกับส่วนอื่น โดย MVC ย่อมาจาก Model, View และ Controller

Model คือ คือส่วน Business Model หรือส่วนที่ติดต่อกับฐานข้อมูล
Controller คือ ส่วนควบคุมและรับ request จาก user มาและไปดึงข้อมูลจาก Model มาเพื่อแสดงผลข้อมูลกลับไปยัง user ที่ส่วน View
View คือ ส่วนที่แสดงผลข้อมูล

 

 

ASP.NET MVC คืออะไร?
คือ framework ในการพัฒนา web application ที่ถูกออกแบบให้รองรับ MVC pattern โดยจัดการแยกหน้าที่ขององค์ประกอบใน application ออกเป็นส่วนๆ(separation of concerns) ด้วยการจัดการที่แยกออกเป็นส่วนๆ ทำให้การทดสอบระบบ(Unit Testing)ที่ซํบซ้อน ทำได้ง่ายขึ้น

วิวัฒนาการ ASP.NET Framework
การทำงานของ ASP.NET MVC

 

เปรียบเทียบระหว่าง Web Forms และ MVC
1. Web Forms
ข้อดี

  •      Web Form support Rich server control คือ มี control ฝั่ง server มาให้ใช้งานมากมายและหลากหลาย
Tool box control ที่ ASP.NET Web Forms เตรียมไว้ให้
  • เป็นการเขียนโปรแกรมแบบ Event Driven Programming คือ การเขียนโปรแกรมในลักษณะว่า “ถ้าเหตุการณ์นี้เกิดขึ้น เราจะให้โปรแกรมของเราจัดการกับเหตุการณ์นั้นๆ อย่างไร”  สำหรับ ASP.NET Web Forms จะมีตัวช่วยในการเขียนลำดับเหตการณ์ ประกอบด้วย Code behind,กลไก postback ตัวเอง และ ViewState ซึ่งด้วยวิธีการนี้ นักพัฒนาไม่จำเป็นต้องพึ่งพา Get/Post method ในการติดต่อกับ Server
ตัวอย่าง Code Behind ภายใต้ event หลังการกดปุ่ม
  • Rapid Application Development จากการที่ Web forms มีการเตรียม Server control มาให้ใช้มากมาย และการเขียนโปรแกรมในลักษณะ Event driven จึงช่วยให้การพัฒนา Application เป็นไปได้รวดเร็วขึ้น ตัวอย่างเช่น นักพัฒนาสามารถลาก control Button(ปุ่ม) มาวาง และ double click เพื่อเขียน code logic การทำงานเข้าไปได้เลย โดยไม่จำเป็นต้องรู้การทำงานเบื้องหลังของ event นั้นๆ ก็สามารถสร้าง Application ให้ทำงานได้
  • Less Learning Effort จากการที่ Web forms มีการเตรียม Server control มาให้ใช้มากมาย และประกอบกับมีการทำงานด้วย ViewState ทำให้ผู้พัฒนาที่มี Skill ทางด้าน HTML และ Java script เล็กน้อย ก็สามารถสร้าง Application ขึ้นได้

ข้อเสีย

  • Project Architecture
             code ทุกอย่างจะอยู่ภายใต้ code behind ซึ่งจะผูกติดกันอย่าแน่นหนากับ หน้า UI
  • Unit Testing  เนื่องจากภายใต้ code behind ที่มีจำนวน event ที่เยอะมาก ทำให้การทำ automatic unit testing ทำได้ยาก
  • Performance ด้วยการที่ Web forms ใช้ ViewState ในการเก็บค่าต่างๆของหน้า page ส่งผลให้ ขนาดของ ViewState ใหญ่ขึ้น ทำให้ performance ของระบบลดลงไปด้วย
  • Reusability  เนื่องจากการผูก code behind เข้ากับ UI ทำให้การ reuse code ทำได้ยาก
     จากรูป หากเราต้องการ binding ข้อมูลในลักษณะเดียวกับกับ Customer ทุกอย่างให้กับ UI อื่นๆ เราก็จะต้องสร้าง method binding ที่เหมือนกันกับในรูปขึ้นมาอีก เนื่องจาก code ถูกผูกเข้ากับ control gridview คนละตัวกัน
  • Less control over HTML control ที่มี่อยู่อาจไม่ support การทำงาน จำเป็นต้องนำเอา java script framework เข้ามาใช้ร่วมด้วย เช่น Jquery, AJAX เป็นต้น

2. MVC

ข้อดี
Project Structure แบ่งแยกส่วนต่างๆ ของ code ออกจากกันชัดเจน
  • Test Driven Development and Reusability
    • ด้วยการแบ่งส่วนการทำงานของ code ออกจากกันชัดเจน ทำให้สามารถทำ Unit Testing ได้ง่ายขึ้น
    • Controller ไม่จำเป็นต้องผูกกับ View ใด View หนึ่ง สามารถ reuse ใช้ได้กับหลายๆ View ได้
  • Performance ใน MVC จะไม่มี ViewState และ event ทำให้ลดขนาด page size ลงไป ทำให้ได้ performance ที่ดีกว่า
  • Full control over HTML ใน MVC ไม่มี server control มาให้เหมือน Web Forms ทำให้เราสามารถใช้ control ของ HTML และ java script ได้อย่างอิสระ
  • SEO,URL Routing and REST มีการเรียก url แบบ REST service และการทำ SEO(Search Engine Optimization) ง่ายกว่า
  •  Support Parallel Development  ใน MVC มีการแบ่งส่วนการทำงานออกจากกันชัดเจน ทำให้ผู้พัฒนาสามารถพัฒนาคู่ขนานกันไปได้ เช่น คนที่รับผิดชอบส่วน View ก็ทำส่วน Design wxพร้อมกับที่ทำส่วน Controller ได้เลย ไม่จำเป็นต้องรอใครทำเสร็จก่อนแล้วจึงจะทำต่อได้

ข้อเสีย

  • More Learning Effort จำเป็นต้องมีประสบการณ์ในการทำ web application มาพอสมควร เนื่องจากจะไม่มี ViewState, Event และ Server control ที่อำนวยความสะดวกเหมือนใน Web Forms
  • ไม่มี server control ให้ลากวาง เหมือนใน Web Forms ต้องเขียน HTML ขึ้นมาเอง

เลือกใช้อะไรดีระหว่าง Web Forms และ MVC?

    ในการพัฒนา web application เราจำเป็นต้องพิจารณาจากหลายๆปัจจัย เช่น หากเราต้องการ web application ที่ต้องการให้เสร็จเร็วและง่าย ก็ควรเลือกใช้แบบ Web Forms เนื่องจาก Web Forms ถือว่าเป็น RAD(Rapid Application Development) คือ เตรียมทุกอย่างมาให้พร้อมที่จะพัฒนาได้เลยเช่น Server control,ViewState,Event เป็นต้น แต่หากเราต้องการพัฒนา web application ที่ซับซ้อนและต้องการ performance ที่ดี ประกอบกับทีมพัฒนามีความรู้ทางด้านการพัฒนา web application เป็นอย่างดี ก็ควรเลือกใช้ MVC มาเป็นตัวเลือกในการพัฒนา
ที่มา: https://www.facebook.com/photo.php?fbid=685327044884788

อ้างอิง :