การลงโปรแกรม
บทความนี้เราจะสร้างโปรเจค ASP.NET MVC 3 โดยใช้ของฟรีกันครับนั่นคือ Visual Web Developer 2010 Express (ตอนนี้ไป 2015 แล้วที่แจกฟรี แต่เชื่อว่าหลายๆที่ยังคงใช้ version เก่าอยู่แต่ก็ถือว่ายังใช้ได้ครับ ของใหม่เดี๋ยวจะมีออกบทความมาเรื่อยๆ ละกันครับ) เราจะค่อยๆ เพิ่ม features เรื่อยๆ จน application ของเราสมบูรณ์
เราสามารถใช้ได้ทั้ง Visual Studio 2010 SP1 หรือ Visual Web Developer 2010 Express SP1 นะครับแล้วแต่สะดวก และจะใช้ SQL Server Compact (ของฟรี) ในการเก็บข้อมูล หรือ Database นั่นเอง
เริ่มสร้างโปรเจค ASP.NET MVC 3 กันเลย
ให้เปิด Microsoft Visual Web Developer 2010 Express กันเลยครับ ตามรูปที่ 1
รูปที่ 1
ให้เลือกตามรูปที่ 2 Visual C# > Web > ASP.NET MVC 3 Web Application (ถ้าเป็น VB.NET ก็เลือกที่ Visual Basic) ให้พิมพ์ที่ Name ตั้งชื่อโปรเจคว่า MvcMusicStore ส่วน Location คือ path ที่เราจะใช้บันทึกโปรเจคเลือกตามใจชอบ จากนั้นกดปุ่ม OK
รูปที่ 2
ให้เลือกตามรูปที่ 3 และกดปุ่ม OK
รูปที่ 3
จะได้โครงสร้างโปรเจคตามรูปที่ 4
รูปที่ 4
จากรูปที่ 4 โครงสร้างโปรเจคหลักๆที่สำคัญมีดังนี้
Folder
|
Purpose
|
| /Controllers | Controllers มีหน้าที่ตอบสนอง input ที่ส่งมาจาก browser ซึ่งจะทำหน้าที่ตัดสินใจว่าจะทำอะไรกับ input ที่ได้และส่งผลลัพธ์กลับไปยังผู้ใช้ |
| /Views | Views มีหน้าที่สำหรับ UI templates |
| /Models | Models เป็นตัวเก็บข้อมูล |
| /Content |
เป็น folder สำหรับ images, CSS, static content
|
| /Scripts | เป็น folder สำหรับ JavaScript files |
เกี่ยวกับ Controllers
เมื่อก่อน web frameworks จะมีการทำงานคือเราจะเรียก URL ประมาณว่า "/Products.aspx" หรือ "/Products.php" เป็นการเรียก URL ที่เข้า map กับไฟล์บน disk
แต่ Web-based MVC frameworks จะ map ไปยัง server code ต่างออกไป แทนที่จะ map URL กับไฟล์ เปลี่ยนเป็น map URL กับ method ของคลาสแทน ซึ่งคลาสเหล่านี้ก็คือ "Controllers" และคอยทำหน้าที่ตอบสนองหรือประมวลผลของ HTTP request และ รับ user input ทำหน้าที่รับข้อมูลและบันทึกข้อมูล และยังทำหน้าที่ส่งผลลัพธืกลับไปยัง user เช่น แสดงผลเป็น HTML หรือส่งไฟล์กลับให้ donwload หรือ redirect ไปยัง URL อื่นๆ เป็นต้น
เริ่มสร้าง HomeController
เราจะเริ่มสร้าง MVC Music Store application กันโดยเริ่มจากการสร้าง Controller คลาสที่คอยตอบสนอง URL ของหน้า Homepage ซึ่งเราจะใช้ defalut naming conventions (เป็นข้อกำหนดของ framework ที่จะต้องตั้งชื่อคลาสตามข้อกำหนดเพื่อลดการเขียน code ลง) เราจะตั้งชื่อว่า HomeController
ให้เราคลิกเมาส์ขวาที่โฟลเดอร์ "Controllers" และเลือก "Add" และ "Controller..." ตามรูปที่ 5
รูปที่ 5
จะปรากฏหน้าต่าง "Add Controller" ดังรูปที่ 6 ให้เราตั้งชื่อ Controller name ว่า "HomeController" แล้วกดปุ่ม Add
รูปที่ 6
จะได้ไฟล์ HomeController.cs และ code ตามรูปที่ 7
รูปที่ 7
เพื่อจะทดสอบเราจะแก้ไเมธอด Index ง่ายๆด้วยการให้ return ค่า string โดยทำการแก้ไขดังนี้
นำ code ตัวอย่างที่ 1 ไปทับ ตั้งแต่บรรทัดที่ 14-17 ตามรูปที่ 7
ตัวอย่างที่ 1
public string Index()
{
return "Hello from Home" ;
}
ทดสอบ Application
ที่นี้เราสามารถทดสอบรัน web site ได้แล้วครับ โดยการกดปุ่ม Start Debugging ตามรูปที่ 8 หรือกดปุ่ม F5
รูปที่ 8
เมื่อกดปุ่มรัน หรือ F5 โปเจคเราจะถูก compile และ build และจะทำการ start ASP.NET Development Server ซึ่งทำหน้าที่เหมือนกับ IIS Web Server ของ windows (ข้อดีของการใช้ IDE Tool คือลดการ setup ไปได้เยอะ) เมื่อเริ่ม start จะปรากฏข้อความตามรูปที่ 9 เราสามารถเข้า URL ตามนั้นได้เลย (URL ที่ได้อาจไม่เหมือนกัน)
รูปที่ 9
ผลการรันตามรูปที่ 10
รูปที่ 10
ติดตามต่อ
ASP.NET MVC Music Store Series 3
อ้างอิง
ผู้เขียน: procodeblog
ไม่มีความคิดเห็น:
แสดงความคิดเห็น