Razor Engine

ASP.Net MVC มีความสามารถรองรับ concept ของ View Engine
View Engine เป็น Render หน้า web ที่ Browser ทั่วไป โดย View Engine จะมี Syntax และความสามารถแตกต่างกันไป
ASP.Net MVC จะมี View Engine มาให้อยู่แล้วสองตัวคือ Razor และ ASP.Net แต่จะมีที่ Support อยู่อีกคือ Spark และ nhaml (นิยมใช้ใน Ruby)

ใน Course นี้จะใช้ Razor เป็นหลัก โดย Razor นี้เพิ่งเพิ่มมาใน ASP.Net และ ASP.Net MVC version 4
นอกจาก ใน ASP.Net MVC แล้ว Razor ยังใช้ได้ใน ASP.Net Web Form ได้ด้วย

Razor ถูกออกแบบมาให้
    – Compact, Expressive, and Fluid กระทัดรัด มี syntax น้อย เวลาเขียนใช้ร่วมกับ html ได้สะดวกไม่กระโดดข้ามไปมา อยู่รวมกันอย่างสวยงามเป็นระเบียบ
    – Easy to Learn
    – Is not a new language
    – Works with any Text Editor
    – Has great Intellisense

Guide to Razor Syntax

1. ขึ้นต้นบรรทัดด้วย @ แล้วจะเป็น Single Statement หรือ Multi-Statement

2. ปิด Block ของ Statement ด้วย {…}

3. Multi-Statement ขั้นด้วย Semi Colon ;

4. ใช้ var ได้ ในการประกาศตัวแปร และเรียกใช้ Class ต่างๆของใน .Net และใน Project

5. ใช้ " " (Double Quotation Mark) เวลา Assign String
6. Case sensitive
7. โดยแล้วมากจะใช้เพื่อแสดง Value ของ Object และ HtmlHelper
8. เขียนเงื่อนไขได้

http://www.asp.net/webmatrix/tutorials/2-introduction-to-asp-net-web-programming-using-the-razor-syntax

HtmlHelper

เป็น Class ที่ช่วยสร้าง Tag HTML โดยมีที่ใช้บ่อยๆเช่น

@Html.TextBox

@Html.TextBox("Text1","value")

@Html.TextArea

@Html.TextArea("textarea1","value line1\n value line 2")

@Html.CheckBox

@Html.CheckBox("check1",true)

@Html.ActionLink

@Html.ActionLink("List","List","Home")

@Html.Hidden

@Html.Hidden("Hidden1","hidden value")

@Html.Label

@Html.Label("EditText","Label Text")

@Html.RadioButton

@Html.RadioButton("Radio1","r1")

@Html.DropDownList*

* @Html.DropDownList ปกติใช้ กับ SelectListItem ซึ่งแปลงจาก IEnumerable

Routing System

เป็นการ Mapping ไปยัง Controller และ Action มองได้ง่ายๆว่า Controller คือ Class และ Action คือ Method ที่อยู่ใน Class นั้นๆ โดยค่า Default ของ Routing จะอยู่ใน Global.asax

• Host/{Controller}/{Action} เช่น http://localhost/Home/About
  • จะมาจาก Controller Class ชื่อ HomeContrller และ Method ชื่อ About
• Host/{Controller} จะเป็นการเข้า Action ชื่อ Index เพราะว่ากำหนด Default จะ Routing ไว้ เช่น http://localhost/Home
• Host/ จะเข้าที่ Host/Home

การ Customize Routhing จะว่ากันใน Course Advance

First Controller

ลองสร้าง Controller กับ Action โดย Click ขวาที่ Controller Folder แล้ว Add Controller ตั้งชื่อ TaskController ใช้ Template แบบ Empty Controller

สร้าง Method ชื่อ Hello return เป็น string แล้ว Code ตามนี้

เมื่อ Run แล้วเข้า URL /Task/Hello จะได้เป็นหน้า Page ที่มีเป็น string ที่ return มาจาก Controller ตรงๆ

First View

แต่ถ้าต้องการแสดงผลผ่าน View จะต้องให้ Method return เป็น ViewResult หรือ ActionResult ซึ่ง ActionResult จะครอบคุมมากกว่าโดยจะ Return ได้เป็น View, PartialView, Redirect, RedirectToAction, Content, Json, Javascript, File, EmptyResult

ลองเขียน Method ชื่อ ListData โดยให้ return เป็น ActionResult ตามตัวอย่างนี้

เมื่อ Run แล้วเข้า URL /Task/ListData จะได้ Error Page เนื่องจากว่าหา View ที่จะให้ Render ไม่เจอ

ดังนั้นเราจะต้องสร้าง View มาเพื่อรับ ActionResult จาก Controller โดยที่จะใช้การ Click ขวาที่ Action แล้วเลือก Add View แล้วใส่ชื่อ View ใน Dialog ตามรูป

จะได้ /Views/Task/ListData.cshtml ซึ่งจะเป็น File ที่รวม Html กับ Razor Syntax ซึ่งจะ Render เป็น Html ที่ Browser แสดงผลได้ในตอน Runtime

เมื่อ Run อีกครั้งเข้าที่ URL /Task/ListData จะได้ Page ที่แสดงผลตามใน View โดยขณะที่ Run อยู่เราสามารถแก้ไข View ได้ แต่ไม่สามารถแก้ Controller ได้

Pass Data ระหว่าง Controller กับ View

เราสามารถ Pass Data ซึ่งหมายถึง Objects, Model, Value, etc. จาก Controller ไปยัง View ได้ด้วย

• ViewBag เป็น Dynamic Collection ที่เก็บ Object ใดๆ จะเขียนแบบ Dynamic Property หรือเป็น Array ก็ได้
  • Controller

    ViewBag.TestData1="My Test Data1"; //ViewBag["TestData1"]="My Test Data1";
    
    

    • ViewBag.TestData1="My Test Data1"; //ViewBag["TestData1"]="My Test Data1";
  • View
    • @ViewBag.TestData
• Model Binding เป็นการส่ง Data Object ผ่านไปกับ View โดยที่ View จะใส่ keyword @model {Full Name Class} หรือ @model IList<> เพื่อส่งเป็น List ไปก็ได้ และใช้ Keyword @Model ในการแสดงผล
  • View
    • @model MvcApplication1.Models.RegisterModel
    • User Name: @Model.UserName
    • หรือ
    • @model List<MvcApplication1.Models.RegisterModel>
    • @Model[0].UserName
• AJAX ใช้ technique AJAX รับส่ง Data

จะใช้ ViewBag เพื่อแทน Model Binding ก็ได้ แต่ว่าจะไม่มี CodeC Intellisense ขึ้นให้

ตัวอย่าง ViewBag

ตัวอย่าง @Model

Controller	View
เพิ่ม Method ShowData	สร้าง /Views/Task/ShowData.cshtml

ตัวอย่าง @Model IList

Controller	View
เพิ่ม Method ListTask	สร้าง /Views/Task/ListTask.cshtml

การส่ง Data จาก View มา Controller

เหมือนการ Post จะรับจาก Request หรือจากที่ Parameter ของ Action เลยก็ได้

จาก Request

แบบ Parameter ของ Action

จะเห็นว่าแบบเป็น Parameter ของ Action จะสวยงามกว่า เขียน Code สั้น กระชับ เห็นชัดเจนว่า Action นี้ต้องการ Parameter อะไรบ้าง และยังใส่ค่า Default ลงไปได้ทันที

Return View

โดย Default ถ้า Actionใน Controller Return View โดยไม่มี Parameter ใดๆ ASP.Net Engine ก็จะใช้ชื่อของ Action ไปหา View ใน Folder ของ Controller แต่ถ้าต้องการให้ไปหา View ชื่ออื่นก็ทำได้โดยใส่ Path ของ View ที่จะให้ Render หรือใช้ RedirectToAction เช่นตัวอย่าง

ASP.Net Web Form

เขียน Code ในแบบของ Event Driven

ข้อดี

1. Rapid Application Development สร้าง Web App. ได้เร็ว
2. ถ้าเคยเขียน Windows Form มาก่อน จะเรียนรู้ได้ทันที
3. Designer เป็น WYSIWYG
4. มี Server Side Controls ให้ใช้ในแบบ Drag and Drop

ข้อเสีย

1. เกิด network traffic มากจาก Viewstate และ Postback
2. Page Life Cycle ซับซ้อน
3. Control Client Script ได้ไม่สะดวก

ASP.Net ก็มีทั้งข้อดีและข้อเสียอยู่ แต่แล้วด้วยกระแส MVC จาก Ruby On Rails, Struts, JSF, etc. ทาง Microsoft จึงออก ASP.Net MVC ขึ้นมาเป็นทางเลือกเพื่อให้ Developer เลือกใช้ตามความเหมาะสมของ Project

ASP.Net MVC

เขียนในแบบ MVC

ข้อดี

1. แบ่งส่วนการทำงานอย่างชัดเจน เป็น Model, View และ Controller
2. ควบคุม
3. เรียบง่าย

MVC คืออะไร

Model – “Data” ที่วิ่งผ่านไปมาใน Application ทั้งที่เป็นการ View และInput รวมถึง Database และ Data Rules, Business Logic View – ส่วนของการแสดงผลติดต่อกับ User Controller – ส่วนของการควบคุม Flow การทำงานระหว่าง View และ Model

Asp.Net MVC 3 Pattern

View Engine, Controller, Model

First Asp.Net MVC 3 Project

สิ่งที่่ต้องมี

1. Visual Studio 2010 หรือ Visual Studio 2010 Express Web Development
   http://www.microsoft.com/visualstudio/en-us/products/2010-editions/express-iso
2. Asp.Net MVC 3
   http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=1491

ตอนนี้เราจะมาเริ่มสร้าง Project แรกกัน

1. ไปที่เมนู File –> New Project ที่ Dialog New Project เลือก Visual C# –> ASP.Net MVC 3 Web Application (ใส่ชื่อและเลือก Location ตามต้องการ) แล้ว OK
   
2. เลือก Project Template เป็น Internet Application และ View Engine เป็น Razor แล้ว OK
   

   

3. ที่ขั้นตอนนี้เราจะได้ Project Asp.Net MVC 3 โดยที่ Solution Explorer จะเห็น Structure ของ Project ดังนี้

• App_Data เหมาะสำหรับใส่ Physical Data เช่น MDB, SDF, SQL Lite, etc.
• Content สำหรับพวก CSS, Image อะไรๆที่เป็น static
• Controllers เป็นที่เก็บ code ในส่วน Controller โดยปกติ Class ที่ทำหน้าที่เป็น Controller จะลงท้ายด้วย Controller ใน Template Project จะมีตัวอย่างมาให้คือ AccountController.cs กับ HomeController.cs
• Models เป็นที่เก็บ code ที่เกี่ยวก้องกับ Model เช่น Entity Class, Data Access
• Scripts เป็นส่วนของ Client Scripts จาก Template จะใส่ jQuery 1.5.1 และ jQuery UI 1.8.11 และ scripts อื่นๆของทาง MS มา
• Views เก็บส่วน View การแสดงผล ถ้า View Engine เป็น Razor จะเป็น .cshtml ส่วน ASPX ก็จะเป็น .aspx
  • View จะแยก Folder ตาม Controller
  • Shared จะเก็บสิ่งที่ View ใช้ร่วมกันอย่าง Master Page (_Layout.cshtml), Partial Page
  • _ViewStart.cshtml จะเป็น

กด F5 เพื่อ Run ก็จะเห็น Default Project ของ Asp.Net MVC ตามรูป

ใน Part ต่อไปและอธิบายการทำงานของ Controller

JSF ย่อมาจาก JavaServer Faces เป็น Framework ที่ใช้ในการ Develop Web Application ด้วย Java โดยมีลักษณะการทำงานแบบ MVC (Model View Controller)

จุดเด่นของ JSF

• เป็น Component-Based Framework ทำ ให้ ง่าย ใน การ Develop
• มี Component Support การ ใช้ งานเยอะ
• เป็น รูปแบบ Programming แบบ Event-Driven ซึ่ง ผู้ ใช้ ส่วน ใหญ่ คุ้นเคยดี
• Support จาก Vendor เจ้า ใหญ่ๆ เช่น IBM, Oracle, Apache, etc.
• ทำ งานร่วม กับ Framework อื่นๆ ได้
• เป็น แบบ MVC ทำ ให้ ง่าย ใน การ Develop และ Maintenance

MyFaces

MyFaces เป็น JSF Component จาก Apache ซึ่ง จะ ประกอบไป ด้วย Component จำนวนมากที่มาช่วยให้การ Develop ง่ายขึ้น

Development Environment

• Eclipse WTP 1.53
• Exadel Studio 4.0.4 (Eclipse Plug-in)
• Apache Tomcat 5.5

(MVC) Model, View, Controller

ที่มา FAQ: MVC (Model-View-Controller) คืออะ ไรModel: Data, Data Access Object, Beans
View: JSP
Controller: Java Class

Project Structure

ประกอบไปด้วยส่วนที่สำคัญๆตามนี้

• Java Source คือที่ เก็บ source code ของ java ซึ่ง จะ เป็น ส่วน ของ Controller กับ Model
• JSP เป็น ส่วน ของ View
• web.xml เป็น config file ที่ ไว้ ควบคุม Web Project ตามมาตรฐานของ Java
• faces-config.xml เป็น config file ที่สำ คัญของ Project ที่ จะ เป็น การควบคุมการทำ งาน ทั้ง หมดของ JSF Project

Managed Bean

เป็น java class ที่กำหนดไว้ใน faces-config ว่าจะมีการใช้งาน class นั้นๆโดยจะมีการกำหนดชื่อ, scrope(request, session, application) และ Class

Tag Library

<%@ taglib uri=”http://java.sun.com/jsf/html” prefix=”h” %> เรียก ใช้ jsf html เป็น component สำ หรับแสดงผล ใน แบบ html เช่น Text Box, Combo, Check Box, etc.
<%@ taglib uri=”http://java.sun.com/jsf/core” prefix=”f” %> เรียก ใช้ jsf html  เป็น ส่วน ประกอบสำ หรับการแสดงผล เช่น item ใน combo, validator, etc.
<%@ taglib uri=”http://myfaces.apache.org/tomahawk” prefix=”t”%> เรียก ใช้ MyFaces Tomahawk component ของ MyFaces ที่ เพิ่มเติมมา จาก jsf html

JSP File Structure

จะเหมือน html ทั่วไปแต่จะมีเพิ่มส่วนของ f:view เข้ามาComponent ใน JSF จะ ถูก render ก็ต่อเมื่อประกาศ ไว้ ใน <f:view> ถ้า อยู่นอก f:view ก็จะไม่แสดงผลและถ้ามีการส่ง data ไป controller ก็จะต้อง อยู่ ใน <h:form> ด้วย
ตัวอย่าง<html>
<body>
<h1>JSF First Page</h1>
<f:view>
    <h:form>
        Name: <h:inputText></h:inputText>
    </h:form>
</f:view>
</body>
</html>

Create Project with Exadel

Kick Start Project
Kick Start Project ของ Exadel เป็น program เล็กๆ ที่จะสร้างการทำงานพื้นฐานของ JSF ขึ้นมาโดยจะมีขั้นตอนการทำงานตามนี้

1. รับชื่อจาก screen
2. แสดงคำทักทายชื่อที่รับเข้ามา

view: inputname.jsp, greeting.jsp
controller: GetNameBean.java
model: None       JSF Component

outputText
descrption: แสดงข้อ ความ
property: value- ข้อ ความ ที่ ต้อง การแสดง<h:outputText value=”Hello World” />
outputLabel
description: แสดงข้อ ความ ภาย ใต้ tag label
property: value- ข้อ ความ ที่ ต้อง การแสดง<h:outputLabel value=”Hello World” />
outputLink
description: แสดงข้อ ความ ที่ link ไป ยัง page อื่นๆ , จะ ต้อง ใช้ ร่วม กับ component อื่นๆ เพื่อแสดงข้อ ความ หรือ รูปแบบ
property: value-page ที่ ต้อง การ link ไป , target-target windows (blank, <window name>)<h:outputLink value=”http://www.yahoo.com” target=”blank”><h:outputText value=”Yahoo” /></h:outputLink>
inputText
description: รับ input text ใน แบบ text box
property: value-property ของ manage bean<h:inputText value=” ” />
inputTextarea
description: รับ input text ใน แบบ text area
property: value-property ของ manage bean, rows- จำ นวนบรรทัด , cols- ขนาดของ columns<h:inputTextarea value=” ” cols=”40″ rows=”4″></h:inputTextarea>
commandButton
description: คือ button โดย จะ ส่ง action ไป ยัง manage bean
property: value- ข้อ ความ ที่ ต้อง การแสดง , action-action ใน manage bean<t:commandButton id=”submit” action=”sayhello” value=”Say Hello” /> 

commandLink
description: จะ คล้าย กับ commandButton แต่ แสดงผล เป็น link ที่ส่ง action ไป ยัง manage bean ซึ่ง จะ ไม่ เหมือน กับ outputLink ที่ ไม่ ได้ ส่ง action
property: value- ข้อ ความ ที่ ต้อง การแสดง ( ไม่ เหมือน outputLink), action-action ใน manage bean<t:commandLink id=”submit” action=”sayhello” value=”Say Hello” />
t:inputCalendar
description: แสดง Calendar เพื่อรับ input วันที่
property: value-Date, renderAsPopup,popupDateFormat<t:inputCalendar renderAsPopup=”true” popupDateFormat=”yyyyMMdd”></t:inputCalendar>
selectBooleanCheckbox
description: checkbox
property: value-true/false, ใน การแสดงข้อ ความ จะ ใช้ ร่วม กับ output component<h:outputText value=” ” ><h:selectBooleanCheckbox value=”true” /></h:outputText>
selectOneMenu
description: combo
property: value-property ของ manage bean
f:selectItems – สำ หรับแสดง option โดย เอาค่ามา จาก property ที่ เป็น list of SelectItem ใน manage beans
f:selectItem – สำ หรับแสดง option ใน ใส่ เอง ซึ่ง กำ หนด label กับ value ได้ ที่ itemLabel กับ itemValue<h:selectOneMenu value=” “>
    <f:selectItem itemLabel=”Option1″ itemValue=”1″/>
    <f:selectItem itemLabel=”Option2″ itemValue=”2″/>
</h:selectOneMenu>
<h:selectOneMenu value=” “>
    <f:selectItems value=”#{GetNameBean.optionList} “/>
</h:selectOneMenu>
selectOneListbox
description: List
property: value-property ของ manage bean
f:selectItems – สำ หรับแสดง option โดย เอาค่ามา จาก property ที่ เป็น list of SelectItem ใน manage beans
f:selectItem – สำ หรับแสดง option ใน ใส่ เอง ซึ่ง กำ หนด label กับ value ได้ ที่ itemLabel กับ itemValue
ตัวอย่างเหมือน กับ selectOneMenuselectOneRadio
description: Radio Button
property: value-property ของ manage bean
f:selectItems – สำ หรับแสดง option โดย เอาค่ามา จาก property ที่ เป็น list of SelectItem ใน manage beans
f:selectItem – สำ หรับแสดง option ใน ใส่ เอง ซึ่ง กำ หนด label กับ value ได้ ที่ itemLabel กับ itemValue
ตัวอย่างเหมือน กับ selectOneMenu

panelGrid
descrption: สร้าง layout ใน รูปแบบ table
property: columns- จำ นวน columns<h:panelGrid columns=”2″> </h:panelGrid>   panelGroup
descrption: จัดกลุ่มของ component ให้ อยู่ เพื่อ ให้ อยู่ ใน column เดียว กัน จะ ใช้ ร่วม กับ panelGrid
property: value- ข้อ ความ ที่ ต้อง การแสดง<h:panelGrid columns=”2″><h:inputText value=” ” /><h:panelGroup><h:commandButton action=” ” value=”Ok” /></h:panelGroup></h:panelGrid>
Common Propertyrendered – ซ่อน หรือ แสดง readonly – อ่าน ได้ อย่างเดียว disabled – ไม่ Enable id – id ของ component นั้น ถ้า ไม่ ใส่ จะ auto generate ให้ แต่ ถ้า ใส่ ก็ห้าม ซ้ำ กัน style – style ที่ จะ กำ หนด ให้ กับ component นั้น เช่น font: tahoma; font-size:small styleClass – css class ที่กำ หนด ให้ class นั้น title – text ที่ จะ แสดงตอน mouse hover
Reference to Manage Bean
จะ ใช้ รูปแบบนี้คือ #{manageBeans.property} เช่น <h:inputText value=”#{loginCtrl.userName} ” /> หรือ <h:outputText value=”Hello #{loginCtrl.userName}, How are you?” />จะ มี Component ที่สำ คัญอีกตัวหนึ่งคือ DataTable ซึ่ง จะ พูด ถึง ใน ส่วน ต่อไป

Navigator Rules

ใน JSF มีการส่ง message เพื่อที่จะทำการ link ไป ยัง page ใดๆ ใน project โดย ผ่านทาง Action ซึ่ง Navigator Rules จะ กำหนด ไว้ ใน faces-config.xml <navigation-rule>
  <from-view-id>/pages/ShowcaseView.jsp</from-view-id>
  <navigation-case>
   <from-outcome>go_ShowcaseView</from-outcome>
   <to-view-id>/pages/ShowcaseView.jsp</to-view-id>
  </navigation-case>
 </navigation-rule>หมายถึงจากหน้า /pages/ShowcaseView.jsp ถ้า มี Message เข้ามาว่า go_ShowcaseView ให้ ไปที่ /pages/ShowcaseView.jspExercise
สร้าง Page ที่รับ input จาก component ต่างๆ แล้ว แสดงผลค่าที่รับเข้ามา
ขั้นตอน

1. สร้าง controller class
2. ใน controller class สร้าง property สำ หรับรับ Input ตาม Type
3. สร้าง manage bean จาก controller class
4. สร้าง view โดย แบ่ง เป็น ส่วน การรับ Input แล Show Row ใน DataTable

DataTable

t:dataTable เป็น Component ที่ ใช้แสดงผลของข้อมูลในรูปแบบตาราง ซึ่งสามารถปรับเปลี่ยนได้ หลายรูปแบบตามความ เหมาะสม
property:

• value – Collection ของ Object อาจ จะ เป็น Array หรือ List ก็ ได้
• var – ชื่อที่ ไว้ สำหรับ reference ไปยัง object ในแต่ละ row
• rowIndexVar – ชื่อที่ไว้สำหรับ reference ไป ยัง row idex
• rows – จำนวน row ที่แสดงผล
• styleClass, headerClass, footerClass, rowClasses – Class ของ Style ที่สำหรับกำหนดรูปแบบของ Table

t:column สำ หรับกำ หนดการแสดง ใน แต่ละ column ใน dataTable จะ ต้อง ทำ งานร่วม กับ component อื่นๆ ้ เช่น outputText, commandLink, etc.<t:dataTable
                id=”dataTable”
                value=”#{displayEmployeeCtrl.employeeList} “
                var=”data” rowIndexVar=”rowNo”
                rows=”10″
                styleClass=”scrollerTable”
                   headerClass=”standardTable_Header”
                footerClass=”standardTable_Footer”
                rowClasses=”standardTable_Row1″ >
                <t:column>
                    <f:facet name=”header”><h:outputText value=”#” /></f:facet>
                    <h:selectBooleanCheckbox value=”#{displayEmployeeCtrl.select[rowNo]} ” />
                </t:column>               
                <t:column>
                    <f:facet name=”header”><h:outputText value=”No.” /></f:facet>
                    <h:outputText value=”#{rowNo+1} ” />
                </t:column>
</t:dataTable>Exercise
สร้าง Page ที่รับ input เป็น จำ นวนของ Row ที่ ต้อง การ ให้ แสดงผล เมื่อ ใส่ เสร็จกดปุ่ม Ok ก็ จะ แสดงข้อมูล ใน DataTable ตามจำ นวน Row ที่ ใส่ เข้า มา
โดย แต่ละ row จะ มีข้อมูลตามนี้

1. Row Number
2. Input Text
3. ข้อ ความ ว่า Input Filename Number + Row Number

ขั้นตอน1.       สร้าง Class ของแต่ละ Row 2.       สร้าง Class ของ Controller ให้ มี property สำ หรับรับ Input จำ นวน Row และ List ของ Row3.       ใน Controller สร้าง Function ที่ ไม่ มี Argument เพื่อ Generate List ของ Row ตามจำ นวนที่ Input เข้า มา 4.       สร้าง View ที่มีการรับ Input และ แสดงผล DataTable

Create Real World Application

ในส่วนนี้จะเป็นการสร้าง Web Application ด้วย JSF โดย เป็น Screen สำ หรับ Search, Add, Edit and Delete ข้อมูลพนักงาน โดย จะเริ่มตั้งแต่การ Design Program จาก Draft Design ที่ User ส่งมาResource JSF Website http://java.sun.com/javaee/javaserverfaces/
MyFaces Website http://myfaces.apache.org/

1. รวบรวมข้อมูลเส้นทางจากแหล่งต่างๆ
   1. แผนที่รถเมล์
   2. เส้นทางถนน
   3. เส้นทางทางด่วน
2. Design วิธีการเก็บข้อมูล
3. Design Service
4. Design ระบบการใช้งาน
5. Coding
6. Etc.

ประมาณนี้