บทความ

สารบัญ (Table of content)

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

Part2 -> Section1 The Basic -> 005. Controller

รูปภาพ
     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 { // // GET: /Student/ public ActionResult In
แสดงความคิดเห็น
อ่านเพิ่มเติม

Part2 -> Section1 The Basic -> 004. Routing

     โดยปกติ 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/
แสดงความคิดเห็น
อ่านเพิ่มเติม

Part2 -> Section1 The Basic -> 003. MVC Folder Structure

รูปภาพ
     หลังจากที่เราสร้าง 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 ที่บรรจุ html ไฟล์ ซึ่ง ASP.NET MVC จะมี extension เป็น .cshtml และ view ของแต่ละ controller จะบรรจุอยู่ใน folder ชื่อเดียวกันกับ c
แสดงความคิดเห็น
อ่านเพิ่มเติม

Part2 -> Section1 The Basic -> 002. Create First ASP.NET MVC

รูปภาพ
     เรามาเริ่มสร้าง 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
แสดงความคิดเห็น
อ่านเพิ่มเติม

Part2 -> Section1 The Basic -> 001. Introduction

รูปภาพ
     ยินดีต้อนรับเข้าสู่ 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.facebook.com/learnaspnetmvcjquery
แสดงความคิดเห็น
อ่านเพิ่มเติม

Part1 -> Section2 -> Classes -> 008. Interface

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