ทส 215 การเขียนโปรแกรมบนเว็บ 1
DESCRIPTION
ทส 215 การเขียนโปรแกรมบนเว็บ 1. ASP.NET MVC Framework. อาจารย์อรรถวิท ชังคมานนท์ สาขาวิชาเทคโนโลยีสารสนเทศ คณะวิทยาศาสตร์ www.itsci.mju.ac.th. MVC. - PowerPoint PPT PresentationTRANSCRIPT
ทสทส215215 การเขียนโปรแกรมบนเว็�บ การเขียนโปรแกรมบนเว็�บ 11
อาจารย�อรรถว็�ท ชั�งคมานนท�สาขีาว็�ชัาเทคโนโลยสารสนเทศ
คณะว็�ทยาศาสตร�www.itsci.mju.ac.th
ASP.NET MVC Framework
MVCMVC
สิ่��งหนึ่��งในึ่รูปแบบเหล่�านึ่��คื�อ โมเดล่ วิ�วิ คือนึ่โทรูล่เล่อรู� (Model View Controller หรู�อ MVC ) กำ�าเนึ่�ดขึ้��นึ่ในึ่ภาษาสิ่มอล่ทอล่�คื (Smalltalk ) ในึ่วิ�ธี�นึ่��รูะบบจะถูกำแบ�งออกำเป'นึ่ 3 คือมโพเนึ่นึ่ต์� ปรูะกำอบด*วิย โมเดล่ (Model) วิ�วิ (View) คือนึ่โทรูล่เล่อรู� (Controller)
MVC แสิ่ดงให*เห,นึ่ปรูะโยชนึ่�ขึ้องม.นึ่ในึ่กำารูโต์*ต์อบกำ.บผู้*ใช*ด*วิยกำารูแสิ่ดงผู้ล่ท��หนึ่*าจอหล่ากำหล่ายขึ้องขึ้*อมล่เด�ยวิกำ.นึ่ สิ่นึ่.บสิ่นึ่0นึ่กำารูนึ่�ารูห.สิ่ต์*นึ่ฉบ.บ (Source code ) มาใช*ใหม�แล่ะช�วิยให*นึ่.กำพ.ฒนึ่าม0�งสิ่นึ่ใจกำ.บหนึ่*าต์าแอพพล่�เคืช.นึ่(วิ�วิ )เด�ยวิ โดยไม�สิ่นึ่หนึ่*าต์าแอพพล่�เคืช.นึ่สิ่�วินึ่อ��นึ่ เพรูาะแต์�ล่ะสิ่�วินึ่ได*นึ่�าขึ้*อมล่ขึ้องสิ่�วินึ่กำล่างมาแสิ่ดงผู้ล่ ขึ้*อมล่ไม�ได*ขึ้��นึ่กำ.บหนึ่*าต์าแอพพล่�เคืช.นึ่ใด กำารูเปล่��ยนึ่แปล่งสิ่�วินึ่ใดสิ่�วินึ่หนึ่��งขึ้องคือมโพเนึ่นึ่ต์�จะไม�สิ่�งผู้ล่กำรูะทบต์�อคือมโพเนึ่นึ่ต์�อ��นึ่ต์ามไปด*วิย
ModelModel
"Models " คื�อสิ่�วินึ่ขึ้อง components ในึ่รูะบบม�หนึ่*าท��สิ่�าหรู.บจ.ดกำารูสิ่�วินึ่ขึ้อง Object State (Data + Value)
เป'นึ่ Class ท��ออกำแบบมาเพ��อ get/set Attribute ซึ่��งสิ่�วินึ่ใหญ่�จะใช*งานึ่ปรูะย0กำต์�รู�วิมกำ.บขึ้*อมล่ปกำต์�ท��จ.ดเกำ,บในึ่ database แล่*วิสิ่�งต์�อไปย.งสิ่�วินึ่ขึ้อง View เพ��อกำ�าหนึ่ด Format ขึ้องกำารูแสิ่ดงผู้ล่ต์�อไป
สิ่ามารูถูใช*งานึ่รู�วิมกำ.บสิ่�วินึ่ขึ้อง View หล่ายหนึ่*าจอได*โดยไม�ต์*องเปล่��ยนึ่แปล่ง code ใดๆ จ�งท�าให*สิ่ะดวิกำในึ่กำารูต์รูวิจสิ่อบ reusable
หากำกำรูณี�ท��ขึ้*อมล่ท��ได*รู.บมาไม�ถูกำต์*องกำ,ให*ท�ากำารูต์รูวิจสิ่อบรูะบบท��สิ่�วินึ่ขึ้อง Controller ซึ่��งเป'นึ่สิ่�วินึ่ท��ม�กำารูคื�านึ่วิณีปรูะมวิล่ผู้ล่แล่*วิสิ่�งผู้ล่ล่.พธี�ไวิ*ท�� Model
ViewView
“Views " คื�อสิ่�วินึ่ขึ้อง components ในึ่รูะบบม�หนึ่*าท��สิ่�าหรู.บจ.ดกำารูสิ่�วินึ่ขึ้องกำารูแสิ่ดงผู้ล่แกำ�ผู้*ใช*งานึ่(User Interface)
MVC model สิ่ามารูถูม�สิ่�วินึ่ขึ้องกำารูแสิ่ดงผู้ล่ได*หล่ายปรูะเภทเช�นึ่ WEB-FORMS, HTML, XML/XSLT, XTML, and WML or can be Windows forms etc.
View สิ่ามารูถูแสิ่ดงผู้ล่ในึ่แบบท��เป'นึ่ Graphical data presentation ได*เพ��อคืวิามนึ่�าเช��อถู�อขึ้องขึ้*อมล่ look and feel, formatting, sorting etc .
กำารูท�างานึ่ขึ้อง View จะแยกำออกำจากำกำารูปรูะมวิล่ผู้ล่ขึ้*อมล่ท��ซึ่.บซึ่*อนึ่ เช�นึ่รูะบบขึ้องกำารูซึ่��อขึ้ายสิ่�นึ่คื*า Online product catalog กำารูท�างานึ่สิ่�วินึ่ขึ้อง view จะท�าหนึ่*าท��เพ�ยงรู.บขึ้*อมล่จากำ Model มาจ.ดรูปแบบให*ถูกำต์*องแล่ะสิ่วิยงามแล่*วิแสิ่ดงผู้ล่ทางหนึ่*าจอแกำ�ผู้*ใช*งานึ่รูะบบต์�อไป ซึ่��งจะไม�เกำ��ยวิขึ้องกำ.บกำารู database connection, query, tables etc .
ControllerController
"Controllers " คื�อสิ่�วินึ่ขึ้อง components ในึ่รูะบบม�หนึ่*าท��สิ่�าหรู.บจ.ดกำารูสิ่�วินึ่ขึ้องกำารูปรูะมวิล่ผู้ล่คื�าสิ่.�งกำารูท�างานึ่ต์�างๆ แล่*วิสิ่�งผู้ล่ล่.พธี�ในึ่รูปแบบขึ้อง model จากำนึ่.�นึ่จะสิ่�งต์�อไปย.งview.
Handles and Responds to user input and interaction . = Method
ปรูะโยชนึ่�อย�างหนึ่��งขึ้องกำารูออกำแบบรูะบบแบบ MVC methodology คื�อช�วิยแบ�งแยกำกำารูท�างานึ่เป'นึ่สิ่�วินึ่ๆ อย�างช.ดเจนึ่ ซึ่��งจะท�าให*กำารูปรู.บปรู0งต์รูวิจสิ่อบ แกำ*ไขึ้รูะบบเป'นึ่ไปได*ง�ายย��งขึ้��นึ่
MVC pattern ย.งม�สิ่�วินึ่ช�วิยในึ่กำารูทดสิ่อบรูะบบ แบบ Red/Green Test Driven Development (TDD)
BenefitsBenefits
Since MVC handles the multiple views using the same enterprise model it is easier to maintain, test and upgrade the multiple system.
It will be easier to add new clients just by adding their views and controllers.
Since the Model is completely decoupled from view it allows lot of flexibilities to design and implement the model considering reusability and modularity. This model also can be extended for further distributed application.
It is possible to have development process in parallel for model, view and controller.
This makes the application extensible and scalable.
DrawbacksDrawbacks
Requires high skilled experienced professionals who can identify the requirements in depth at the front before actual design.
It requires the significant amount of time to analyze and design.
This design approach is not suitable for smaller applications. It Overkills the small applications.
ASPXASPXprotected MVCDesignCSharp.XMLData.Orders ordersDataSet;private void Button1_Click(object sender, System.EventArgs e){
BizOrderManager.GetOrderList(ordersDataSet);if(DataGrid1.Visible==false){
DataList1.Visible =false;DataGrid1.Visible =true;DataGrid1.DataBind();Button1.Text="Show View 1";
}else {DataList1.Visible =true;DataGrid1.Visible =false;DataList1.DataBind();Button1.Text="Show View 2";
}}private void Button2_Click(object sender, System.EventArgs e){
BizOrderManager.GetOrderList(ordersDataSet);DataList1.Visible =true;DataGrid1.Visible =true;DataList1.DataBind();DataGrid1.DataBind();Button1.Text="Show Only View 2";
}
Business ObjectsBusiness Objects
public static void GetOrderList(DataSet OrderDS){OrderDS.ReadXml(AppDomain.CurrentDomain.BaseDirector
y + "/XMLData/Orders.xml");}
Photos.aspxPhotos.aspx
<p>The following files were found in your <b>Upload</b>folder. Click on <b>Import</b>to import these pictures to your photo album. This operation may take a few moments.</p>
<asp:ImageButton ID="ImageButton1" Runat="server" onclick="Button1_Click" SkinID="import" />
View
Photos.aspx.csPhotos.aspx.cs
protected void Button1_Click(object sender, ImageClickEventArgs e) {
DirectoryInfo d = new DirectoryInfo(Server.MapPath("~/Upload"));
foreach (FileInfo f in d.GetFiles("*.jpg")) {byte[] buffer = new byte[f.OpenRead().Length];f.OpenRead().Read(buffer, 0,
(int)f.OpenRead().Length);PhotoManager.AddPhoto(Convert.ToInt32(
Request.QueryString["AlbumID"]), f.Name, buffer);
}GridView1.DataBind();
}
Controller
PhotoManager.csPhotoManager.cs
public static void AddPhoto(int AlbumID, string Caption, byte[] BytesOriginal) {using (SqlConnection connection = new SqlConnection(
ConfigurationManager.ConnectionStrings["Personal"].ConnectionString)) {using (SqlCommand command = new SqlCommand("AddPhoto", connection)) {command.CommandType = CommandType.StoredProcedure;command.Parameters.Add(new SqlParameter("@AlbumID", AlbumID));command.Parameters.Add(new SqlParameter("@Caption", Caption));command.Parameters.Add(new SqlParameter("@BytesOriginal", BytesOriginal));command.Parameters.Add(new SqlParameter("@BytesFull", ResizeImageFile(BytesOriginal, 600)));command.Parameters.Add(new SqlParameter("@BytesPoster", ResizeImageFile(BytesOriginal, 198)));command.Parameters.Add(new SqlParameter("@BytesThumb", ResizeImageFile(BytesOriginal, 100)));connection.Open();command.ExecuteNonQuery();}
}}
Controller
Photos.aspxPhotos.aspx
<asp:FormView ID="FormView1" Runat="server" DataSourceID="ObjectDataSource1" DefaultMode="insert“ BorderWidth="0px" CellPadding="0" OnItemInserting="FormView1_ItemInserting"><InsertItemTemplate>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" Runat="server"
ErrorMessage="You must choose a caption." ControlToValidate="PhotoFile" Display="Dynamic" Enabled="false" />
<p>Photo<br /><asp:FileUpload ID="PhotoFile" Runat="server" FileBytes='<%# Bind("BytesOriginal") %>' /><br />Caption<br /><asp:TextBox ID="PhotoCaption" Runat="server" Text='<%# Bind("Caption") %>' /></p><asp:ImageButton ID="AddNewPhotoButton" Runat="server“ CommandName="Insert" skinid="add"/>
</InsertItemTemplate></asp:FormView>
View
Photos.aspxPhotos.aspx
<asp:ObjectDataSource ID="ObjectDataSource1" Runat="server“TypeName="PhotoManager" SelectMethod="GetPhotos"InsertMethod="AddPhoto" DeleteMethod="RemovePhoto" UpdateMethod="EditPhoto" >
<SelectParameters><asp:QueryStringParameter Name="AlbumID" Type="Int32" QueryStringField="AlbumID" />
</SelectParameters><InsertParameters>
<asp:QueryStringParameter Name="AlbumID" Type="Int32" QueryStringField="AlbumID" />
</InsertParameters></asp:ObjectDataSource>
Mapping Method of “PhotoManager”
Call Controller “PhotoManager”
View
PhotoPhoto.cs.cs
public class Photo {
private int _id;private int _albumid;private string _caption;
public int PhotoID { get { return _id; } }public int AlbumID { get { return _albumid; } }public string Caption { get { return _caption; } }
public Photo(int id, int albumid, string caption) {_id = id;_albumid = albumid;_caption = caption;
}
}
Model
Controller with ModelController with Model
public static List<Photo> GetPhotos(int AlbumID) {using (SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["Personal"].ConnectionString)) {
using (SqlCommand command = new SqlCommand("GetPhotos", connection)) {command.CommandType = CommandType.StoredProcedure;command.Parameters.Add(new SqlParameter("@AlbumID", AlbumID));bool filter = !(HttpContext.Current.User.IsInRole("Friends") ||
HttpContext.Current.User.IsInRole("Administrators"));command.Parameters.Add(new SqlParameter("@IsPublic", filter));connection.Open();List<Photo> list = new List<Photo>();using (SqlDataReader reader = command.ExecuteReader()) {
while (reader.Read()) {Photo temp = new Photo((int)reader["PhotoID"],(int)reader["AlbumID"],(string)reader["Caption"]);list.Add(temp);}
}return list;
}}
}
