ASP.NET MVC Music Store Series 3

สร้าง StoreController
จาก series 2 เราได้สร้างหน้า home กันแล้ว ต่อไปเราจะสร้าง controller สำหรับการทำงานกับ music store กันซึ่งมี 3 ฟังชั่นดังนี้
  • หน้าแสดงรายการเพลงแบ่งตามประเภทที่มีอยู่ใน music store ของเรา
  • หน้าแสดงรายการเพลงที่ระบุประเภทของเพลง
  • หน้าแสดงรายละเอียดข้อมูลของแต่ละอัลบั้ม
เริ่มจากสร้าง StoreController ขึ้นมาทำแบบเดียวกันกับหน้า HomeController ใน series 2 โดยคลิกเมาส์ขวาที่โฟลเดอร์ “Controllers” และเลือกเมนู Add->Controller ตามรูปที่ 1
รูปที่ 1
จะปรากฏตามรูปที่ 2 ให้ตั้งชื่อ “StoreController” แล้วกดปุ่ม Add
รูปที่ 2
จากรูปที่ 3 เราจะได้เมธอด “Index” เป็น default เลยเราจะใช้เมธอดนี้เพื่อ implement ฟังชั่นที่ 1 คือหน้าแสดงรายการเพลงแบ่งตามประเภทที่มีอยู่ใน music store ของเราและเราจะทำการเพิ่มอีก 2 เมธอดเพื่อ implement ฟังชั่นที่เหลือคือหน้า Browse (หน้าแสดงรายการเพลงที่ระบุประเภทของเพลง) และ หน้าแสดง Details (หน้าแสดงรายละเอียดข้อมูลของแต่ละอัลบั้ม)
เราจะได้ 3 เมธอดคือ Index, Browse และ Details ซึ่งจะเรียกว่า “Controller Actions” เช่นเดียวกับ  series 2 คือ HomeController.Index() ก็คือ “Controller Actions” ซึ่งทำหน้าที่ตอบกลับไปยัง URL request
ให้เราแก้ StoreController เมธอด Index, Browse และ Details เพื่อตอบกลับเป็นข้อความง่ายๆ ตามตัวอย่างที่ 1
รูปที่ 3

 

ตัวอย่างที่ 1
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace MvcMusicStore.Controllers
{
    public class StoreController : Controller
    {
        //
        // GET: /Store/
 
        public string Index()
        {
            return “Hello from Store.Index()” ;
        }
 
        //
        // GET: /Store/Browse
 
        public string Browse()
        {
            return “Hello from Store.Browse()” ;
        }
 
        //
        // GET: /Store/Details
 
        public string Details()
        {
            return “Hello from Store.Details()” ;
        }
 
    }
}
ทดลอง run โปรเจคและทดสอบไปยัง URLs ต่างๆ:
  • /Store
  • /Store/Browse
  • /Store/Details
ซึ่งการเรียก URLs เหล่านี้เป็นการเรียกใช้ action methods ที่อยู่ใน controller ของเรานั่นเองครับและผลที่ได้จะตอบกลับมาเป็นข้อความตามที่เราได้เขียนไว้ดังรูปที่ 4
รูปที่ 4
ต่อไปเราจะทำให้มัน dynamic ขึ้น ให้แก้ไขที่เมธอด Browse เพื่อรับ querystring ที่ส่งมาพร้อม URL โดยการเพิ่มพารามิเตอร์ “genre” ที่ action method ซึ่งการทำแบบนี้ ASP.NET MVC จะรับค่า querystring มาอัตโนมัติ แก้ไขไฟล์ StoreController ตามตัวอย่างที่ 2 (ก่อนแก้ให้ stop การรันก่อน)
ตัวอย่างที่ 2
        //
        // GET: /Store/Browse?genre=Disco
 
        public string Browse(string genre)
        {
            string message = HttpUtility .HtmlEncode(
                new System.Text.StringBuilder (“Store.Browse, Genre = “)
                .Append(genre).ToString());
            return message;
        }
แนะนำ: จะเห็นว่าในตัวอย่างที่ 2 แทนที่จะรับค่ามาแล้วใช้ + เพื่อต่อข้อความ string แต่จะใช้ StringBuilder แทนอันนี้ควรจะใช้ให้ติดเป็นนิสัยเพราะการต่อข้อความตัวแปร string ด้วยเครื่องหมาย + นั่นถ้าเป็นระบบใหญ่ๆ จะมีผลถ้าหากการต่อข้อความนั้นทำอยู่หลายที่ซึ่งถ้าให้ดีควรใช้ StringBuilder ไปเลยจะได้ไม่ต้องมาตามแก้กันทีหลัง
และการใช้ HttpUtility.HtmlEncode เป็นเมธอด utility  ซึ่งช่วยป้องกันจากการส่ง script บางอย่างเพื่อโจมตีระบบ เป็นการป้องกันการ injection Javascript เช่น
/Store/Browse?Genre=<script>window.location=’http://hackersite.com’</script> 
เมื่อแก้ไขเสร็จแล้วให้ทดลอง run เลยครับตามรูปที่ 5
รูปที่ 5

ต่อไปเราจะแก้ไขเมธอด Details ส่วนของ Details จะรับ ID เป็นพารามิเตอร์ เช่น /Store/Details/5

สังเกตเห็นว่าจะต่างกับแบบแรกที่ซึ่ง ASP.NET จะสามารถรับค่าได้เลยแบบอัตโนมัติ ให้แก้ไขตามตัวอย่างที่ 3
ตัวอย่างที่ 3
        //
        // GET: /Store/Details/5
 
        public string Details(int id)
        {
            string message = new System.Text.StringBuilder(
                “Store.Details, ID = “).Append(id).ToString();
            return message;
        }
ทดลอง run ตามรูปที่ 6
รูปที่ 6

 

ทบทวนสิ่งที่ได้ทำไป

  • เราได้สร้าง ASP.NET MVC ด้วย Visual Web Developer
  • ได้เรียนรู้โครงสร้างโฟลเดอร์ของ ASP.NET MVC เบื้องต้น
  • ได้ทดสอบรัน website ด้วย ASP.NET Developer Server
  • ได้สร้างคลาส Controller 2 คลาส: HomeController และ StoreController
  • ได้สร้าง Action Method (ได้แก่ Index, Browse, Details) ที่อยู่ใน Controller และ return ข้อความกลับไปยัง browser

ติดตามต่อ

ASP.NET MVC Music Store Series 4
อ้างอิง
ผู้เขียน: procodeblog
Advertisements

ASP.NET MVC Music Store Series 2

 
การลงโปรแกรม
บทความนี้เราจะสร้างโปรเจค 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

การติดตั้ง SQL Server Compact 4.0

ไปยังลิงค์  http://www.microsoft.com/web/gallery/install.aspx?appid=SQLCE จะปรากฏตามรูปที่ 1 จากนั้นกดลิงค์ Install Now จะทำการ download ไฟล์ชื่อ SQLCE.exe ให้ทำการเปิดไฟล์ขึ้น

รูปที่ 1
จะปรากฏตามรูปที่ 2 จากนั้นให้กดปุ่ม Install
รูปที่ 2
จากรูปที่ 3 ให้กดปุ่ม I Accept
รูปที่ 3
รอสักครู่
รูปที่ 4
ถ้าปรากฏข้อความตามรูปที่ 5 ก็เป็นการติดตั้งสำเร็จกดปุ่ม Finish
รูปที่ 5

ผู้เขียน: procodeblog

การติดตั้ง ASP.NET MVC 3 Tools Update

เข้าไปยังลิงค์ http://www.microsoft.com/web/gallery/install.aspx?appid=MVC3 จะได้ตามรูปที่ 1 ให้กดลิงค์ Install Now จะ download ไฟล์ชื่อ MVC3.exe จากนั้นให้เปิดไฟล์

รูปที่ 1

 

จะได้ตามรูปที่ 2 กดปุ่ม Install ได้เลย
รูปที่ 2
เมื่อปรากฏตามรูปที่ 3 ให้กดปุ่ม I Accept
รูปที่ 3

 

จะเริ่ม download (ช้าหรือเร็วขึ้นกับความเร็ว internet ครับ) ตามรูปที่ 4
รูปที่ 4

 

เมื่อสำเร็จจะปรากฏข้อความตามรูปที่ 5 จากนั้นกดปุ่ม Finish
รูปที่ 5

 

ผู้เขียน: procodeblog

Install Visual Studio 2010 Express

ให้ไปยัง http://www.visualstudio.com/en-us/downloads/ จะได้ตามรูปที่ 1 จากนั้นให้คลิกลิงค์ Download now

รูปที่ 1
เมื่อ download สำเร็จเราจะได้ไฟล์ VS2010Express1.iso ให้เราใช้โปรแกรมอ่านไฟล์ iso เช่น UltraISO ทำการอ่านไฟล์เราจะได้ virtual cdrom มาให้ทำการ install ได้เลยครับ ตามรูปที่ 2 แสดงตัวอย่างการ mount ไฟล์
รูปที่ 2
ให้เลือกไฟล์ Setup.hta แล้วกดเปิดครับ
รูปที่ 3
จะได้ตามรูปที่ 4 ให้เลือก Visual Web Develper 2010 Express
รูปที่ 4
เมื่อปรากฏตามรูปที่ 5 ให้กดปุ่ม Next >
รูปที่ 5
ให้เลือกตามรูปที่ 6 และกดปุ่ม Next >
รูปที่ 6
ตามรูปที่ 7 กด Next >
รูปที่ 7

 

ตามรูปที่ 8 กด Install >
รูปที่ 8
รอตามรูปที่ 9
รูปที่ 9
ตามรูปที่ 10 แสดงข้อความการลงโปรแกรมสำเร็จ และกดปุ่ม Exit เพื่อจบการทำงาน
รูปที่ 10
จะปรากฏลิงค์บน start เมนูให้ทดลองเปิดโปรแกรมเลยครับ
รูปที่ 11
ขั้นตอนต่อไปให้ Register Product
รูปที่ 12
ตามรูปที่ 13 ให้กดปุ่ม Obtain a registration key online
รูปที่ 13
จะปรากฏหน้า login ตามรูปที่ 14 ซึ่งก็ใช้ hotmail ได้เหมือนกันครับจากนั้นจะให้กรอกข้อมูลต่างๆแล้วกดปุ่ม Continue
รูปที่ 14
รูปที่ 15

 

จากนั้นเราจะได้ Product Key
รูปที่ 16

 

เสร็จสิ้นการลงโปรแกรมครับ
ผู้เขียน: procodeblog

Java Bookstore(Series 5.1) Struts 2

จาก Java Programming Bookstore Appication (Series 5): Building a Web Application Using Struts 2 เราจะแก้ไข HelloWorld project ให้สามารถรับค่าและแสดงผลได้อย่างง่ายๆ กันก่อนครับ สิ่งที่เราต้องทำคือต้องสร้างคลาสสำหรับ action และมีหน้าจอในการกรอกชื่อ และส่วนของการแสดงผล เริ่มต้นที่หน้าจอกรอกข้อมูลกันตามตัวอย่างที่ 1 เป็นการแก้ไขไฟล์ index.jsp 

ตัวอย่างที่ 1 index.jsp
<html >
<body>
        <form action= “hello”>
               <label for= “name”>Enter your name </label> < br /> < input type =“text”
                      name= “name” /> < input type =“submit” value= “Submit” />
        </form>
</body>
</html>
จากตัวอย่างที่ 1
  • เมื่อเรากดปุ่ม Submit หน้าจอจะมีการเรียก action hello และจะถูกส่งไปยัง container
เมื่อมีการเพิ่ม action เราจำเป็นต้อง map URL Pattern เพิ่มที่ไฟล์ struts.xml ซึ่งจากโปรเจ็คเดิมเราจะ config ไว้แค่ action index ที่จะไปเรียก index.jsp เพื่อแสดงผล ให้แก้ไขไฟล์ struts.xml ตามตัวอย่างที่ 2
ตัวอย่างที่ 2 struts.xml
<?xml version= “1.0” encoding =“UTF-8”?>
<!DOCTYPE struts PUBLIC
 “-//Apache Software Foundation//DTD Struts Configuration 2.0//EN”
 
<struts>
        <constant name= “struts.devMode” value =“true” />
        <package name= “basicstruts2” extends =“struts-default”
               namespace=“/” >
               <action name= “index”>
                      <result> /index.jsp</result >
               </action>
 
               <action name= “hello” class=“com.apress.helloworld.action.HelloWorldAction”
                      method= “execute”>
                      <result name= “success”>/hello.jsp </result>
               </action>
        </package>
</struts>
จากตัวอย่างที่ 2
  • action name ชื่อ hello จะถูก map ไปยังคลาส HelloWorldAction (ยังไม่สร้าง) และจะเรียกใช้เมธอด execute
  • เมื่อรันสำเร็จจะถูกส่งไปยังหน้าจอที่ชื่อ hello.jsp
ต่อไปเราจำเป็นต้องสร้าง action คลาสขึ้นมาชื่อว่า HelloWorldAction ตามรูปที่ 1 เมื่อกดปุ่ม Finish จะได้ผลตามรูปที่ 2
รูปที่ 1

 

ให้เราแก้ไขไฟล์ HelloWorldAction ตามตัวอย่างที่ 3
รูปที่ 2

 

ตัวอย่างที่ 3 HelloWorldAction.java
package com.apress.helloworld.action;
 
public class HelloWorldAction {
 
        private String name ;
 
        public String execute() throws Exception {
               return “success” ;
       }
 
        public String getName() {
               return name ;
       }
 
        public void setName(String name) {
               this.name = name;
       }
}
จากตัวอย่างที่ 3
  • เมธอด execute() จะถูกเรียกโดย user action ที่ได้ config ไปตามตัวอย่างที่ 2 และ return “success” จะถูกส่งต่อไปยัง hello.jsp (ตัวอย่างที่ 4) ตาม config ไฟล์ที่ชื่อ struts.xml
ให้เราสร้างไฟล์ hello.jsp ที่ path helloWorldStruts2/src/main/webapp และแก้ไขตามตัวอย่างที่ 4
ตัวอย่างที่ 4 hello.jsp
<%@ page language= “java” contentType =“text/html; charset=ISO-8859-1”
        pageEncoding=“ISO-8859-1” %>
 
<%@ taglib prefix=“s” uri= “/struts-tags”%>
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” http://www.w3.org/TR/html4/loose.dtd&#8221; >
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=ISO-8859-1”>
<title> Hello World</title >
</head>
<body>
       Hello your name is
        <s:property value= “name” />
</body>
</html>
จากตัวอย่างที่ 4
  • taglib คือ directive ที่บอกให้ servlet container รู้ว่า jsp นี้จะเรียกใช้งาน tags ของ Struts 2
  • s:property tag จะเป็นตัวแสดงค่าที่ได้จากเมธอด getName จากคลาส HelloWorldAction
ทดสอบโดยการ start Tomcat server และเรียก http://localhost:8080/helloWorldStruts2/ จะปรากฏหน้าจอดังรูปที่ 3
รูปที่ 3
พิมพ์ชื่อ แล้วกดปุ่ม Submit จะได้ผลตามรูปที่ 4
รูปที่ 4

เราจะเริ่มสร้าง Bookstore Application ในตอนต่อไป

Java Programming Bookstore Application (Series 5.2): Building a Web Application Using Struts 2
ตอนต่อไปติดตามได้ที่
Java Programming Bookstore Application (Series 6): Building Java Web Applications with Spring Web MVC
Java Programming Bookstore Application (Series 7): Component-Based Web Development Using JSF 2
Java Programming Bookstore Application (Series 8): Rapid Web Development with Grails
Java Programming Bookstore Application (Series 9): Play with Java and Scala
อ้างอิง
 
ผู้เขียน: procodeblog

ASP.NET MVC Music Store Series 1

คร่าวๆ
Series MVC Music Store เป็นบทความการสร้าง web application แบบ step-by-step ด้วย ASP.NET MVC และ Visual Web Developer บทความนี้ยังเหมาะสำหรับผู้สนใจที่จะเริ่มเขียน web ด้วยเช่นกัน ซึ่งเราจะสร้างเว็บ music store ง่ายๆกัน โดยมีส่วนประกอบกัน 3 ส่วนคือ shopping (การแสดงสินค้า), checkout (การสั่งซื้อ), administration (การบริหารเว็บ)
เรามาดูตัวอย่างคร่าวๆ กันว่าจะได้ web application หน้าตาแบบไหน
รูปที่ 1 หน้า Home

 

รูปที่ 2 สามารถเลือกแสดงตามประเภทของสินค้าหรือเพลง
รูปที่ 3 สามารถแสดงแต่ละอัลบั้มหรือสินค้า และเลือกซื้อได้โดยการกดปุ่ม Add to cart
รูปที่ 4 สามารถดูรายการที่จะซื้อสินค้า และยกเลิกรายการได้
รูปที่ 5 เมื่อต้องการซื้อสินค้า จะมีหน้า Log On หรือสมัครก่อนเพื่อยืนยันการซื้อสินค้า
รูปที่ 6 หน้าจอการสมัคร

 

รูปที่ 7 หลังจากสมัคร สามารถกรอกข้อมูลที่อยู่เพื่อส่งสินค้า
รูปที่ 8 เมื่อสั่งซื้อสินค้า จะแสดงหน้าจอยืนยันการซื้อสินค้า
รูปที่ 9 หน้าจอการบริหารงานระบบสามารถเพิ่มสินค้า แก้ไขข้อมูล หรือลบรายการสินค้าออกได้

 

ติดตามต่อได้ใน Series ต่อไปเร็วๆนี้

ผู้เขียน: procodeblog