การสร้างเว็บแอพพลิเคชันโดยใช้ ASP.NET MVC 4 ตอนที่ 1 : รู้จักแนวคิดของ MVC

สวัสดีครับ บทความตอนที่ 1 นี้จะสอนให้ท่านเข้าใจวิธีการสร้างเว็บแอพพลิเคชันโดยใช้ภาษา C#, JavaScript, HTML, CSS ตลอดจนแนวคิดการออกแบบเว็บแอพพลิเคชันบน MVC (Model-View-Controller) framework ก่อนอื่น คอมพิวเตอร์ของท่านต้องติดตั้งโปรแกรม Visual Studio สำหรับเขียนและดีบั๊กโค้ด หากใครยังไม่มี ก็สามารถดาวน์โหลดเวอร์ชัน Community มาใช้ฟรีได้ที่นี่

ลำดับถัดมา คอมพิวเตอร์ของท่านต้องติดตั้งโปรแกรม Microsoft SQL Server Express สำหรับการเก็บและสืบค้นข้อมูลในดาต้าเบส และโปรแกรมเว็บเซิร์ฟเวอร์ IIS Express สำหรับโฮสต์และเอ็กซิคิวต์ตัว logic ที่เราสร้างไว้ในแอพพลิเคชัน MVC นั่นเอง เมื่อท่านมีเครื่องมือพร้อมแล้ว ให้เปิดโปรแกรม Visual Studio แล้วคลิก New Project (หรือคลิกเมนู File > New > Project) เพื่อสร้างโปรเจ็กต์ใหม่

ภายในหน้าต่าง New Project ท่านจะพบเท็มเพลตต่างๆ สำหรับสร้างแอพพลิเคชันสารพัดรูปแบบ ให้เลือก Visual C# > ASP.NET MVC 4 Web Application จากนั้นตั้งชื่อโปรเจ็กต์ เลือกโฟลเดอร์ที่จะเซฟโปรเจ็กต์ แล้วคลิกปุ่ม OK

โปรแกรม Visual Studio จะให้ท่านเลือกเทมเพลตย่อยในการสร้างโปรเจ็กต์ ในที่นี้ เลือก Internet Application ซึ่งมีโฮมเพจ ตลอดจนยูสเซอร์อินเทอร์เฟซ (UI) และหน้า login สำเร็จรูป ส่วน View engine เป็นส่วนประกอบของแอพพลิเคชันที่ช่วยให้ท่านสร้าง HTML สำหรับตอบกลับไปหาเว็บบราวเซอร์ ให้เลือกเป็น Razor และกาเครื่องหมายถูกที่ Create a unit test project เพื่อให้ Visual Studio สร้างโปรเจ็กต์ยูนิตเทสต์ด้วย แล้วคลิกปุ่ม OK

สิ่งที่พึงสังเกต คือ Visual Studio จะรวบรวมไลบรารีต่างๆ ภายนอก เช่น jQuery, jQuery UI เข้ามาในโปรเจ็กต์เป็น NuGet packages ซึ่งช่วยให้ง่ายต่อการอัพเดทไลบรารีเหล่านี้ภายหลัง เพราะท่านไม่ต้องลำบากเข้าเว็บดาวน์โหลดและก็อบปี้ไฟล์ไปมาอีก เอาล่ะครับ เมื่อสร้างโปรเจ็กต์เสร็จแล้ว ทดลองรันแอพพลิเคชันนี้ในโปรแกรม Internet Explorer ด้วยการคลิกปุ่ม play หรือกดแป้น F5

Visual Studio จะคอมไพล์โค้ดและรันเว็บแอพพลิเคชัน นี่คือหน้าตาของเทมเพลต Internet Application ที่ท่านเลือกตอนสร้างโปรเจ็กต์ อันประกอบด้วยโฮมเพจ สีสัน สไตล์ และเมนูดีฟอลต์ ดังรูป

คลิกเมนู Contact สังเกตว่า URL ที่ปรากฏคือ /Home/Contact หน้าตาสวยงามเกลี้ยงเกลา ไม่มีนามสกุลใดๆ ต่อท้าย

คราวนี้ คลิกขวาบนหน้าเว็บ เลือก View Source เพื่อดูซอร์สโค้ด HTML

โดยดีฟอลต์ หน้าเว็บมีการใช้แท็ก viewport ซึ่งช่วยในเรื่องการปรับหน้าจอดูเว็บบนอุปกรณ์โมบายล์ (ต้องทำงานร่วมกับชุดคำสั่งใน style sheet) หากปราศจากแท็ก viewport อุปกรณ์โมบายล์จะอนุมานว่าหน้าเว็บของท่านมีความกว้างเกิน 900 pixel แล้ว zoom out เนื้อหาทั้งหน้าเว็บให้พอดีแสดงบนจอภาพแคบๆ ทำให้ตัวอักษรเล็กตีบลงตามไปด้วย

นอกจากนี้ โค้ด HTML ยังมีลิงก์ชี้ไปยัง Modernizer JavaScript library ที่ช่วยให้ element ของ HTML 5 อย่าง

<header>, <section>, <nav> 

แสดงผลบนเว็บบราวเซอร์รุ่นเก่าๆ อย่าง Internet Explorer 6 ได้อย่างถูกต้อง

ต่อมา ให้ปิดเว็บบราวเซอร์แล้วกลับมาที่โปรแกรม Visual Studio โฟกัสหน้าต่าง Solution Explorer ซึ่งเป็นบริเวณสำหรับเข้าถึงไฟล์ทั้งหมดในโปรเจ็กต์นี้ ไม่ว่าจะเป็นไฟล์ C#, JavaScript, CSS, ไอคอน หรือรูปภาพ ส่วนโฟลเดอร์ที่สำคัญๆ มีอยู่ 3 อัน ได้แก่ Models, Views และ Controllers

แนวคิด Model-View-Controller

MVC เป็นชื่อของ design pattern ที่แยกองค์ประกอบ Model, View และ Controller ออกจากกัน MVC เป็นแนวคิดที่มีการใช้งานมานานหลายทศวรรษ ประโยชน์ของ MVC คือการแยกความรับผิดชอบขององค์ประกอบต่างๆ ในระดับ user interface ดังแผนผังข้างล่าง

เริ่มต้นที่ Controller เว็บบราวเซอร์จะส่ง HTTP request เข้ามาตรงนี้ เช่น เราเปิดเว็บบราวเซอร์ไปที่ /Home/About การร้องขอก็จะวิ่งมาที่ Controller ของเว็บแอพพลิเคชัน ซึ่งมีหน้าที่สร้างโมเดลจากคลาสที่เก็บอยู่ใน Model เพื่อเตรียมนำเสนอแก่ผู้เข้าชมเว็บไซต์

ขั้นตอนถัดไป Controller จะเลือก View เพื่อแสดงโมเดลที่สร้างขึ้นมา ท่านอาจจะมองวิวเหมือน template ที่หยิบข้อมูลจากโมเดลมาใส่ในบริเวณที่กำหนดบนหน้าเว็บก็ได้ เช่น ใส่ในย่อหน้านี้ หรือใส่ตรงตารางนี้ สรุปคือเราจะแบ่งพฤติกรรมต่างๆ ในยูสเซอร์อินเทอร์เฟซเข้าอยู่ในหมวดใดหมวดหนึ่ง ระหว่าง Model, View หรือ Controller

View จะไม่รู้วิธีเรียกข้อมูลจาก data access layer ตรงๆ เนื่องจากข้อมูลทั้งหมดที่ต้องการได้มาจาก Model หมดแล้ว ส่วน Controller ก็ไม่จำเป็นต้องรู้ว่าจะวาง error message ไว้ตรงไหนบนหน้าเว็บ หรือจะทำตัวอักษรสีอะไร เพราะนั่นเป็นหน้าที่ของ View ที่ต้องทำ

การแยกหน้าที่บน MVC design pattern ช่วยให้การแก้ไขแอพพลิเคชันในภายหลังทำได้สะดวกขึ้น เนื่องจากโค้ดที่เขียนไว้ในแต่ละส่วนจะโฟกัสหน้าที่ชัดเจน อ่านเข้าใจง่าย ท่านอาจจะเพิ่มลอจิกใน Controller ให้พิจารณาเลือกใช้โมเดลที่ดีที่สุด โดยไม่กระทบกับ View ที่สนใจแค่เรื่องการแสดงผลข้อมูล

MVC design pattern ไม่บังคับว่าแอพพลิเคชันจะดึงข้อมูลจากแหล่งใด ท่านอาจจะดึงข้อมูลจากไฟล์ เว็บเซอร์วิส ดาต้าเบส หรือ data source รูปแบบอื่น รวมทั้งไม่บังคับหน้าตาของ business object หรือ domain layer แม้กระทั่งว่าแอพพลิเคชันจะแบ่งการทำงานเป็น layer หรือเปล่าก็ไม่สน พูดง่ายๆ MVC เป็นเพียง design pattern สำหรับสร้างยูสเซอร์อินเทอร์เฟซ ไม่มีอะไรซับซ้อนกว่านั้น

เพราะฉะนั้น MVC framework จึงได้รับการพัฒนาเพื่อช่วยท่านออกแบบแอพพลิเคชันตามหลักการของ MVC design pattern โดยมอบเครื่องมือและคลาสต่างๆ ในการสร้าง Model, View และ Controller ตลอดจนสามารถทำงานร่วมกับเทคโนโลยีฝั่งเว็บ อย่าง JavaScript, HTML และ CSS

MVC framework ทำงานอยู่ในระดับเหนือคอร์ ASP.NET runtime ซึ่งมีอายุนานเกินหนึ่งทศวรรษ เป็นเทคโนโลยีที่พิสูจน์แล้วในด้านความเสถียรและสมรรถนะ หากท่านคุ้นเคยกับ ASP.NET และรู้จักวิธีใช้งาน HTTP module, handler, caching ต่างๆ อย่างดีแล้ว การพัฒนาแอพพลิเคชันตามแนวคิดของ MVC จะกลายเป็นเรื่องไม่ลำบากเลย ที่สำคัญ MVC framework ยังสนับสนุน plug-in เสริมของผู้ผลิตค่ายอื่น และรองรับการทำ unit test อีกด้วย