สอน ASP.NET MVC + JQuery + LINQ + C# + HTML

     คงต้องขอทักทายกันก่อนนะครับ ผมสร้างบล็อกนี้ขึ้นมานานมากแล้วแต่ไม่มีเวลาที่จะเข้ามาอัพเดตสักเท่าไร แต่ตอนนี้ผมตั้งใจไว้ว่าจะพยายามสอนเขียน ASP.NET MVC ตั้งแต่เริ่มต้น จนสามารถนำไปทำเว็บได้ด้วยตนเองนะครับ      ก่อนเริ่มต้นนั้นคงต้องออกตัวก่อนว่าผมทำงานด้านเขียนเว็บมาได้หลายปีเหมือนกัน จึงอยากจะแชร์ความรู้ที่มี ผมเข้าใจเลยว่าสำหรับผู้ที่ต้องการเริ่มฝึกเขียนโปรแกรมนั้นสื่อที่เป็นภาษาไทยมีค่อนข้างน้อย มันจึงค่อนข้างยากที่จะเริ่มต้นในกรณีที่เรียนรู้ด้วยตนเอง ผมจึงอยากทำบทความเป็นภาษาไทยที่อ่านเข้าใจง่าย เป็นภาษาที่พูดกันทั่วไป แต่อย่างไรก็ตามภาษาอังกฤษนั้นก็จำเป็นอย่างที่สุดสำหรับการเขียนโปรแกรม รวมถึงเทคนิคการเขียนโปรแกรมขั้นสูงก็ยังเป็นภาษาอังกฤษนะครับ หลังจากที่ทุกท่านเรียนรู้จนเข้าใจแล้วความรู้พื้นฐานเหล่านี้แล้วท่านสามารถที่จะนำไปต่อยอดเพื่อเรียนรู้สิ่งต่างๆเพิ่มได้อีกมากมายครับ สำหรับผู้ที่ต้องการเริ่มต้นนั้นไม่จำเป็นต้องเป็นผู้ที่เรียนจบคอมพิวเตอร์หรือน้องๆที่กำลังเรียนอยู่ก็สามารถเข้ามาศึกษาได้ครับ แต่ต้องขยันกว่าเขาเหล่านั้น เพราะเราไม่มีพื้นฐานเห...

     MVC , C คือ Controller ซึ่ง Controller ก็คือ class ที่สืบทอดมาจาก class System.Web.Mvc.Controller ภายใน Controller จะมี Action method      Controller และ Action method ทำหน้าที่จัดการ request ต่างที่เข้ามา, ติดต่อแลกเปลี่ยนข้อมูลกับ model และส่งค่ากลับให้ browser      สำหรับ ASP.NET MVC นั้น ทุกๆ controller จะต้องต่อท้ายด้วย "Controller" ตัวอย่างเช่น controller สำหรับ home page จะเป็น "HomeController" และ controller จะต้องอยู่ใน Controller folder เริ่มสร้าง Controller      ในตัวอย่างนี้เราจะสร้าง controller student โดยเริ่มต้นที่ คลิกขวาที่ folder "Controllers" => Add => Controller...    ใส่ Student ใน dialog      โปรแกรมจะสร้าง controller class ให้ดังโค้ดด้านล่าง using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MVC_Tutorial_2_1.Controllers { public class StudentController : Controller { // ...

     โดยปกติ url ของเว็บไซต์โดยทั่วไปจะชี้ไปที่ชื่อไฟล์ เช่น home.aspx, home.php หรือ home.html แต่สำหรับ MVC นั้น url จะชี้ไปที่ Controller class, Action method(คือ method ใน Controller class นั่นเอง) และ parameter value ซึ่งจะเป็น pattern ดังนี้ {domain name}/{controller}/{action}/{id} ตัวอย่างเช่น http://localhost:1234/home/index/7 domain name => http://localhost:1234 Controller class => home Action method => index parameter value => 7 ตัวอย่าง ของ coding Controller "Home" และด้านในมี Action "Index" public class HomeController : Controller { public ActionResult Index(string id) { return View(); } } Controller class => HomeController (ใน url เราจะตัด Controller ออก ซึ่งในที่นี้คือ home) Action method => Index ตารางด้านล่างเป็นตัวอย่าง url (parameter value หรือ Id จะมีหรือไม่มีก็ได้) URL Controller Action Id http://localhost/home HomeController Index null http://localhost/home/index/...

     หลังจากที่เราสร้าง MVC project มาแล้ว เรามาดูโครงสร้างของ project ว่ามีอะไรกันบ้าง       App_Data => เป็น folder ที่บรรจุไฟล์ข้อมูล เช่น local database, .mdf, xml, ไฟล์ข้อมูลต่างๆ ถ้าเราใช้ IIS เราจะไม่มีไฟล์ local database นะ       App_Start => เป็น folder ที่บรรจุ class ที่ใช้ในตอน start application เช่น AuthConfig.cs, BundleConfig.cs, RouteConfig.cs เป็นต้น       Content => เป็น folder ที่บรรจุ css ไฟล์       Controllers => เป็น folder ที่บรรจุ controller class ไฟล์ ซึ่ง ASP.NET MVC มีข้อบังคับว่า ชื่อของ controller ต้องต่อท้ายด้วยคำว่า "Controller" เช่น HomeController -> home controller       Images => เป็น folder ที่บรรจุไฟล์รูปภาพ       Models => เป็น folder ที่บรรจุ model class       Scripts => เป็น folder ที่บรรจุ javascript หรือ vbscript ไฟล์       Views => เป็น folder ที่บรรจ...

     เรามาเริ่มสร้าง Project ASP.NET MVC กันเห่อะ โดยเราจะเริ่มสร้างจาก template ที่ Microsoft เค้าเตรียมไว้ให้เป็นตัวอย่างกันเลยนะ 1. ในหน้า Start Page ของ Visual Studio คลิก "New Project..." 2. เลือก "ASP.NET MVC 4 Web Application" ดูตามภาพ 3. เลือก "Internet Application" 4. ทำการรันเว็บโดย คลิก "Debug -> Start Without Debugging"      โปรแกรมจะรันเว็บขึ้นมาให้เรา เนื่องจากเราสร้างจาก template มันจึงมีหน้าเว็บสวยงามให้เราโดยที่เรายังไม่ได้ทำอะไรเลยนะแจ๊ะ ได้เว็บ MVC มาละจร้า       ให้เราลองย่อขนาดของ browser จะเห็นว่าหน้าเว็บของเราทำการตัดบรรทัดรวมถึงเมนูก็จะเว้นบรรทัดลงมาอัตโนมัติ ลักษณะนี้เรียกว่า "responsive web pages" คือเว็บที่รองรับการแสดงผลทั้ง pc และ  mobile device นั่นเป็นผลมาจากตัว ASP.NET MVC นั้นใช้ JavaScript และ bottstrap(CSS) นั่นเอง เจ๋งไปเลยนะครัช สอบถามหรือติดตามได้ที่  https://www.facebook.com/learnaspnetmvcjquery

     ยินดีต้อนรับเข้าสู่ Part ที่สองนะครัช Part นี้จะเป็น Basic ของ ASP.NET MVC (MVC = Model, View, Controller) สิ่งที่ผู้อ่านควรรู้ก่อนที่จะเริ่ม Part นี้ก็จะประกอบไปด้วย HTML, CSS, C#(เราจะใช้ภาษา C# ในการอธิบาย) ถ้าพร้อมแล้วเราไปรู้จักกับเจ้า MVC กันเถอะ           Model : is a data and business logic ตามคำนิยามเลยครัช อธิบายง่ายๆเลยคือ ตัวที่คอย ดึงข้อมูลและเก็บข้อมูลไปยัง แหล่งเก็บข้อมูล(ยกตัวอย่างเช่น database) นั่นเอง       View : is a user interface ทำหน้าที่แสดงข้อมูลให้กับ user ซึ่งพูดง่ายๆคือ html อ่ะคับ       Controller : is a request handler เป็นตัวจัดการ request เช่น user ต้องการค้นหาข้อมูล นั่นคือ user จะส่ง keyword ผ่าน view ไปให้เจ้าตัว controller จะเป็นคนกำหนดว่าต้องนำเอาข้อมูลที่ต้องการค้นหานี้ไปหาที่ table(model) ใด เป็นต้น      ผมคิดว่าถ้ายิ่งอธิบายยาวจะยิ่ง "งง" นะครัช เพราะตอนที่ผมเริ่มดูรูปนี้แล้วอ่านคำอธิบายก็งงมากเลยอ่ะ สอบถามหรือติดตามได้ที่  https://www.faceb...

     จากบทความที่แล้ว (Inheritance) ในตอนท้ายเรามีการกล่าวถึง class diagram คร่าวๆ ซึ่งพอเราสร้าง class diagram เสร็จแล้ว ขั้นต่อไปก็นำ diagram มาลงโค้ดจริง หากทั้งโปรแกรมมีแค่ class เดียว คงไม่มีปัญหาอันใด แต่ในชีวิตจริงมันมีมากกว่านั้นเยอะคับ เราจึงควรใช้ตัวนี้เข้ามาช่วยในการสร้างโครงของโปรแกรม สิ่งนี้คือ Interface นั่นเอง      อย่างที่ได้กล่าวไปแล้ว Interface คือ โครงของ class ซึ่งหาก class ใด implement interface จะต้อง implement method และ property ที่เราได้ประกาศใน Interface ให้ครบ ถ้าไม่ครบ build ไม่ผ่านนะจร๊ะ ดูตัวอย่างประกอบเลยจร้า

     หนึ่งในผู้เล่นคนสำคัญของ Object Oriented Programming (OOP) ก็คือ Inheritance หรือ การสืบทอด นั่นเอง มดูกันว่ามันจะมีประโยชน์อย่างไร ใช้งานกันอย่างไร ลองดูจากตัวอย่างแรก using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace ConsoleApplication2 { class Program { static void Main(string[] args) { Animal animal = new Animal(); animal.Greet(); Dog dog = new Dog(); dog.Greet(); Animal dogAnimal = new Dog(); dogAnimal.Greet(); } } public class Animal { public void Greet() { Console.WriteLine("Hello, I am Animal"); } } public class Dog : Animal { } public class Cat : Animal { } }

     จากบทความก่อนๆ ในการที่เราจะเรียกใช้งาน class นั้น ปกติเราจะต้องเรียกผ่านใช้งานผ่าน object ของ class นั้นๆ แต่จะมีการเรียกใช้งาน class โดยไม่ต้องผ่าน object นั่นก็คือจะต้องใช้งานผ่าน static member การเรียกใช้งานถือว่าสะดวกมากๆ      แต่จะมีคำถามสำคัญตามมาคือ แล้วเคสไหนจะใช้ static method เคสไหนจะใช้แบบ regular method (object) คำตอบของผมเองนะคับ มันอยู่ที่เราคับ แต่ก็จะมีหลักการไว้พิจารณาอยู่บ้าง ดังนี้ครัช (ผมลองค้นดูคร่าวๆ ก็ไม่มีที่ไหนตอบเหมือนกันเลยคับ สุดท้ายก็คงอยู่ที่เราจะพิจารณานะคับ)      - เป็นการแชร์ข้อมูลที่ตายตัว เช่น การหาพื้นที่สี่เหลี่ยม, การแปลงหน่วยอุณหภูมิ, การหาพื้นที่วงกลม อารมณ์คือ ใช้เป็นครั้งๆ แล้วจบไปเลยอ่าครัช      - ไม่ได้ใช้ในการเก็บค่า อธิบายคือ โปรแกรมจะมอง static เป็นตัวเดียวกันไม่ว่าจะเรียกใช้กี่ครั้งคือตัวเดิม แต่ถ้าเราใช้ new objcet นั้นการ new แต่ละครั้ง object นั้นๆคือคนละตัวกันะเลย ถ้ามีการ set ค่าใส่ตัวแปรของ class ล่ะก็ พอเรียกใช้มันก็จะเก็บค่าต่างกันไป เพราะ object มันคนละตัวกันเลย ...

      Visibility หรือ Accessibility คือ สิ่งที่กำหนดการเข้าถึงหรือเรียกใช้งานตัวแปรหรือ method ซึ่งโดยทั่วไปแล้วจะมีตัวที่ใช้บ่อยๆอยู่แค่ private และ public แต่เราลองมาดูตัวที่เหลือกันดีกว่าว่าจะมีตัวไหนบ้าง public สามารถเข้าถึงได้จากทุกๆที่ protected สามารถเข้าถึงได้จาก class เดียวกัน หรือจาก inherit class เท่านั้น internal สามารถเข้าถึงได้จาก project เดียวกันเท่านั้น protected internal จะเหมือนกันกับ internal  แต่ต่างที่ inherit class สามารถเข้าถึงได้แม้จะอยู่คนละ project ก็ตาม private จะเข้าถึงได้เฉพาะใน class เดียวกันเท่านั้น ( class และ struct หากไม่ระบุ visibility จะ default เป็น private )      ลองดูตัวอย่างการใช้งาน visibility

     โดยปกติแล้ว Method ใน Class เดียวกันจะไม่สามารถใช้ชื่อเดียวกันได้ (ด้วยเหตุผลง่ายๆคือ ถ้ามี Method ชื่อเดียวกันสอง Method แล้ว เวลาเรียกใช้งาน โปรแกรมจะรู้ได้อย่างไรว่าจะใช้งาน Method อันไหนนั่นเอง) แต่ในบางครั้งเราอาจจำเป็นที่จะต้องใช้ชื่อ Method เดียวกัน เพราะมันทำงานเหมือนกัน ซึ่งสำหรับ .NET Framework หลังจาก version 4.0 เราสามารถที่จะใช้ชื่อ Method เดียวกันได้แล้ว โดยจะเรียกการทำแบบนี้ว่า Method Overloading

      Constructors คืออะไร อธิบายง่ายๆเลย Constructor คือ method นี่แหละ แต่เป็น method แบบพิเศษที่จะใช้สำหรับการ instantiate class  (การสร้าง object ของ class) เท่านั้น, Constructor จะมีชื่อเดียวกับ class และจะไม่มี return type ลองดูตัวอย่างด้านล่าง

     perperties (หรือจะเรียกว่าคุณสมบัติของคลาส ก็ได้ แต่อย่าเลย เรียก property น่ะดีแล้ว)คือตัวที่ช่วยให้เราควบคุมความสามารถในการเข้าใช้ตัวแปร จาก class อื่น, ซึ่งสำหรับ programming language ที่เป็นแบบ object oriented programming (เช่นพวก C#, Java) นั้นแนะนำว่าควรใช้คุณสมบัติตัวนี้ มันดียังไง มาดูกัน      properties นั้นจะมีหน้าตาที่คล้ายกับการรวมกันระหว่างตัวแปรที่บรรจุ method ไว้ภายในซึ่งมันจะไม่สามารถรับ parameter (method รับ parameter ได้) ดูตัวอย่างด้านล่าง

     ยินดีต้อนรับสู่ Section ที่สอง Class, เมื่อเราเข้าสู่โลกของ C# .NET แล้ว เราจะต้องศึกษาการเขียนโปรแกรมแบบ Object Oriented Programming (OOP) เพราะเป็นส่วนที่สำคัญมากๆของตัวภาษา รวมถึงด้วยแนวทางนี้จะทำให้การอ่านโค้ดโปรแกรม การแก้ไขโปรแกรม การนำโปรแกรมกลับมาใช้ซ้ำๆ จะเป็นเรื่องง่ายเลยแหละ ซึ่งบทความเราจะอธิบายพอสังเขปเท่านั้น เพราะเอาเข้าจริงๆเรื่องของ OOP นั้นเนื้อหาสามารถยัดใส่หนังสือได้เป็นเล่มๆ มีหนังสือดีๆหลายเล่มลองหามาอ่านได้      Class เปรียบเหมือนกับ group ของ methods และ ตัวแปร ที่มีความสัมพันธ์กัน ฟังตอนนี้บางคนอาจจะงง ซึ่งก็น่างงจริงๆ ผมยังงงเลย, เราไปดูตัวอย่างประกอบจะเข้าใจได้ง่ายขึ้นครัช

     ตัวแปรปกติที่เคยได้กล่าวมาก่อนหน้านี้จะสามารถเก็บข้อมูลได้เพียงค่าเดียวต่อหนึ่งตัวแปรเท่านั้น หากเราต้องการเก็บค่ามากกว่าหนึ่งค่าต่อหนึ่งตัวแปร เราจะต้องใช้ Collection ในการเก็บข้อมูล ซึ่ง Collection นั้นก็มีอยู่หลากหลายชนิด แต่ที่นี้จะกล่าวเพียงแค่สองชนิดที่ใช้บ่อย คือ Arrays และ Lists 1. Arrays การประกาศนั้นจะเหมือนกับตัวแปรปกติ ต่างนิดเดียวที่มี brackets [] อยู่ที่หลังชนิดข้อมูล โปรดดูตัวอย่าง

     ฟังก์ชัน (Function) หรือใน .NET เรียกว่า เมธอด (Method) อธิบายแบบเข้าใจง่ายๆเลยก็คือ การยกโค้ดบางส่วนไปไว้ที่อื่น (เน้นที่มีการใช้งานโค้ดส่วนนี้ซ้ำๆหลายครั้ง) ซึ่งเราสามารถเรียกใช้โค้ดส่วนนั้นจากที่ไหนก็ได้ และเรียกกี่ครั้งก็ได้ ซึ่งเรียกการทำงานแบบนี้ว่าเป็นการ ใช้โค้ดซ้ำ (reuse) เชิญดูรูปแบบการสร้าง Method ด้านล่าง <accessibility> <return type> <method name>([parameters]) { <code> }

     วันนี้เราจะมาศึกษาการเขียนโปรแกรมเพื่อทำงานแบบวนซ้ำๆ เป็นส่วนที่สำคัญมากในการเขียนโปรแกรม ซึ่งเรามีตัวช่วยอยู่หลายตัวให้เลือกใช้ เราจะมาดูทีละตัวกันเลยว่าใช้งานอย่างไร The while loop      while loop เป็น loop ที่ง่านต่อการเริ่มศึกษา ซึ่งการทำงานของมันก็คือ มันจะทำงานใน block code ไปเรื่อยๆ จะกว่าเงื่อนไขที่เราส่งเข้าไปจะเป็น false ลองดูจากตัวอย่าง using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace ConsoleApplication1 { class Program { static void Main(string[] args) { int number = 0; while (number < 5) { Console.WriteLine("Number: " + number); number += 1; // equal to number = number + 1 } Console.ReadLine(); } } }

     switch พูดง่ายๆคือ ทำหน้าที่เหมือนกันกับ if statement คือการทำงานตามเงื่อนไข แต่ switch จะเน้นในกรณีที่มีเงื่อนไขหลายเงื่อนไข ลองดูจากตัวอย่าง using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace ConsoleApplication1 { class Program { static void Main(string[] args) { int cond = 1; switch (cond) { case 0: Console.WriteLine("Condition zero"); break; case 1: Console.WriteLine("Condition one"); break; } Console.ReadLine(); } } }

     if statement คือโค้ดบล็อกที่ใช้เลือกเงื่อนไข ซึ่ง if ต้องการ boolean เป็น input (มีแค่ true และ false) ลองศึกษาเพิ่มจากตัวอย่าง using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace ConsoleApplication1 { class Program { static void Main(string[] args) { int input; Console.WriteLine("Please enter a number 0 to 10"); input = int.Parse(Console.ReadLine()); if (input > 10) { Console.WriteLine("You enter a number more than 10"); } else if (input > 0) { Console.WriteLine("Good job"); } else { Console.WriteLine("You enter a negative number"); } } } }

     variable หรือตัวแปรเปรียบได้เหมือนกับเป็นห้องเก็บของ ใน C# นั้นรูปแบบการเขียนคือ <data type> <variable name>;      ตัวอย่างเช่น string name;      ตัวอย่างขางบนเป็นรูปแบบพื้นฐานของการประกาศตัวแปร มันสามารถเพิ่ม accessibility (visibility)  (ซึ่งจะได้อธิบายละเอียดอีกครั้งในส่วนของ Class) รวมถึงใส่ค่าให้กับตัวแปรได้ด้วย ดังนี้ <accessibility> <data type> <name> = <value>;