Day: July 14, 2016

การสร้าง Hybrid App ด้วย Ionic Framework

wachirawit.j

July 14, 2016
ในบทความนี้จะนำขั้นตอนการพัฒนา Hybrid App อย่างง่ายด้วย Ionic Framework เพื่อเป็นแนวทางการพัฒนาแก่ผู้ที่สนใจ โดยเครื่องที่ใช้ในการทดลองเป็นปฏิบัติการ Windows 10 มีขั้นตอนการติดตั้งเครื่องมือต่าง ๆ เพื่อให้สามารถใช้ Ionic ได้ดังนี้
1. ติดตั้ง js โดยดาวน์โหลดไฟล์ node-v4.4.7-x64.msi ได้จาก http://nodejs.org วิธีการติดตั้งก็ไม่ยุ่งยากครับ ใช้ Next Technology ได้เลย จะมีหน้าจอขั้นตอนต่าง ๆ ดังรูป
1. ติดตั้ง Cordova และ Ionic command line tool โดยการเปิด command prompt ของ windows ขึ้นมา แล้วรันคำสั่ง
  $ npm install -g ionic
เริ่มต้นสร้าง App อย่างง่าย

หลังจากที่เตรียมความพร้อมของเครื่องที่พัฒนาเรียบร้อยแล้ว ขั้นตอนต่อไปก็จะเป็นการสร้าง App ขึ้นมา ซึ่ง Ionic ได้เตรียม template ตั้งต้นไว้ให้เราแล้ว ได้แก่ side menu, maps, salesforce, complex-list, blank เราก็ดูว่า App ของเราสามารถใช้ template ตัวไหนได้บ้าง ก็เลือกมาใช้ได้เลย

รูปที่ 1 Ionic Template [ที่มา : http://ionicframework.com]

ขั้นตอนการสร้าง App โดยใช้ command line tools
1. เปิด command line ขึ้นมา แล้วกำหนด working directory เป็นที่ที่สำหรับใช้เก็บ project (ในที่นี้จะกำหนดเป็น “C:\ionic” )
1. สร้าง project กำหนดชื่อ myApp และใช้ tabs เป็น template ตั้งต้นโดยใช้คำสั่ง
  $ ionic start myApp tabs
  ผลลัพธ์ที่ได้จากคำสั่งนี้ จะทำให้ได้ไฟล์ต่าง ๆ ดังรูป
  จะพบว่ามีโฟลเดอร์ชื่อ www สำหรับเก็บโค้ด HTML, CSS, Java Script เหมือนกับการพัฒนาเว็บไซต์ ให้เราใช้ความรู้ด้านการเขียนเว็บไซต์สร้างไฟล์ต่าง ๆ เก็บไว้ในโฟลเดอร์นี้ได้เลย
1. หลังจากสร้างไฟล์ App ขึ้นมาแล้ว ก็จะเข้าสู่ขั้นตอนการ Build ให้ App สามารถรันบน Platform ต่าง ๆ ได้ สำหรับในบทความนี้จะแสดงเฉพาะการ Build สำหรับ Android เพื่อให้เห็นเป็นแนวทางการพัฒนา เนื่องจากเครื่องที่ใช้ทดสอบเป็น Windows 10 หากจะ Build ให้รันบน iOS ได้ ก็ต้อง Build บนเครื่องที่ใช้ระบบปฏิบัติการ iOS ในส่วนของการเตรียมความพร้อมสำหรับการ Build ให้รันบน Android ได้ เครื่องที่ใช้ในการพัฒนาจะต้องติดตั้ง Java Development Kit (JDK) 7 และAndroid Stand-alone SDK Tools หรือ Android Studio ก่อน ซึ่งขั้นตอนการติดตั้งก็ไม่ยากครับ ใช้ Next Technology เช่นเคย
1. Build และ Run บน Android โดยใช้คำสั่งต่อไปนี้
  $ ionic platform add android
  $ ionic build android
  $ ionic emulate androidจะทำให้ได้ผลลัพธ์ดังรูป
  
  จากรูปเป็นผลลัพธ์ที่ได้จากการใช้ Tab template ซึ่งผู้พัฒนาจะต้องแก้ไขโค้ดให้เป็นไปตามที่ได้ออกแบบไว้ ก็จะได้ Android App ตามต้องการ
July 14, 2016
ตอนที่ 4 : ใช้ Report Wizard ช่วยสร้างรายงาน

maliwan.s

July 14, 2016

จากตอนที่แล้วได้กล่าวถึงการสร้างรายงานว่าสามารถทำได้ 2 แบบ กล่าวคือ สร้างรายงานจากไฟล์ว่างๆ หรือ ใช้ Report Wizard เป็นตัวช่วยสร้างรายงาน ซึ่ง Wizard สามารถออกแบบรายงานเป็นTable หรือ Crosstab ตามรูปแบบที่มีให้เลือก โดยทำตามขั้นตอน ดังนี้

1. ไปที่ Solution Explorer คลิกขวาโฟลเดอร์ Reports > Add New Report จะปรากฏหน้าจอ Report Wizard ดังรูปที่ 1

รูปที่1 Report Wizard

2. คลิก Next เลือก Data Sources เป็นแบบ Shared หรือ Embedded Data Sources ดังรูปที่ 2

รูปที่2 Data Sources

3. คลิก Next เพื่อเขียน query โดยกดปุ่ม Query Builder… จะไปยังหน้าจอ Query Designer

รูปที่3 Design Query

4. คลิก Next จะปรากฏหน้าจอให้เลือกว่าจะสร้างรายงานเป็นตาราง (Tabular) หรือ Metrix (สามารถสรุปข้อมูลในลักษณะ Pivot Table) ดังรูปที่ 4

รูปที่4 Report Type

5. คลิก Next เพื่อมาออกแบบตาราง ผู้ใช้จะต้องเลือก fields ที่อยู่ใน Available fields มาใส่ใน Displayed field ในที่นี้จะจัดกลุ่มข้อมูล (Group) ตาม CAMPUS_ID, FAC_ID, DEPT_ID และ fields อื่นๆจะแสดงในส่วนของ Details

รูปที่5 Design Table

6. คลิก Next เพื่อเลือกรูปแบบการจัดวางข้อมูล (Layout) และคลิกเลือก Include subtotals เพื่อรวมข้อมูลในระดับที่ได้ Group ไว้ในข้อที่แล้ว (CAMPUS_ID, FAC_ID, DEPT_ID) และคลิก Next เพื่อเลือก Style ดังรูปที่ 6

รูปที่6 Table Layout & Style

7. คลิก Next จะเห็นช่อง Report name: ให้ตั้งชื่อรายงาน และกดปุ่ม Finish จะได้รายงาน ดังรูปที่ 7

รูปที่7 ตัวอย่างรายงาน

จากการทดลองสร้างรายงานโดยไฟล์ว่างเปล่ากับใช้Wizard เป็นตัวช่วยสร้างรายงาน พบว่า Wizard สามารถทำให้งานง่ายขึ้นได้ ซึ่งรูปแบบที่มีให้เลือกอาจจะยังไม่ถูกใจผู้ใช้ก็ค่อยมาปรับกันในทีหลังได้ เช่น Format จำนวนเงิน, ใส่ Header / Footer, ใส่ Expression ใน Textbox… ส่วนในเรื่องการคำนวณจะเป็นการรวมข้อมูลแบบตรงไปตรงมา หากผู้ใช้ต้องการการคำนวณที่ซับซ้อนขึ้นก็สามารถทำได้ เช่น อยากได้คอลัมน์ยอดเงินสุทธิ = AMOUNT – AMOUNT_FINE – AMOUNT_VAT เป็นต้น

July 14, 2016
Unit test สำหรับ method ที่ใช้ Entity Framework

wilaiwan.h

July 14, 2016
กลไกการทำงานของ .NET method โดยส่วนใหญ่ จะมีกลไกการทำงานที่ต้องขึ้นกับเงื่อนไข ปัจจัยต่างๆจากภายนอกอย่างเช่น method ที่มีเรียกใช้ database หรือ web service ทำให้การทดสอบจำเป็นต้องแยก component ที่ต้องการทดสอบออกมาจากปัจจัยแวดล้อมต่างรอบๆ component ซึ่งสามารถทำได้โดยใช้ shim ที่อยู่ภายใต้การควบคุมในกระบวนการทดสอบ สามารถที่จะควบคุมผลลัพธ์ที่ได้การทำงานตามที่กำหนดในทุกๆครั้งที่เรียกใช้งาน ซึ่งทำให้การเขียน unit testing ทำได้ง่ายขึ้นมาก

การพัฒนา unit test สำหรับ method ที่ใช้ Entity Framework เพื่อเข้าถึงฐานข้อมูล ก็สามารถใช้ shim type ในการกำหนดชุดของข้อมูลเพื่อทำการทดสอบ ซึ่งการ query จะกระทำกับ property ของ DbContext ซึ่ง return IDbSet<T>
```
public partial class Entities : DbContext
{
   public Entities(): base("name=Entities")
   {
   }

    public IDbSet<CONFIG> CONFIG { get; set; }
   ...
}
```
ในการพัฒนา unit test จะต้องสร้าง shim type สำหรับ class “Entities” และแทนที่ property ที่ดึงข้อมูลจากฐานข้อมูลจริงแยกออกจากการทดสอบ ด้วยข้อมูลสำหรับทดสอบ จากตัวอย่างข้างบนคือ property “CONFIG” ซึ่งเป็นประเภท IDbSet<CONFIG> โดยจะทำการ returm DbSet<CONFIG> ที่เตรียมข้อมูลไว้สำหรับการทดสอบ
```
using (ShimsContext.Create())
{
     ShimEntities.AllInstances.CONFIGGet =
              (e) =>  {
                         return ... DbSet<CONFIG>
                      };
}
```
แต่ใน DbSet ไม่มี public constructor ทำให้ไม่สามารถสร้าง instance ของ DbSet ได้ จึงจำเป็นต้องสร้าง class ใหม่ที่ implement interface IDbSet<T> แทนการใช้ DbSet
```
public class TestDbSet<T> : IDbSet<T>, IQueryable, IEnumerable<T>
    where T : class
 {
     ObservableCollection<T> _data;
     IQueryable _query;

     public TestDbSet() //: base()
     {
        _data = new ObservableCollection<T>();
        _query = _data.AsQueryable();
     }

     public virtual T Find(params object[] keyValues)
     {
        throw new NotImplementedException("Derive from TestDbSet<T> and override Find");
     }

     public T Add(T item)
     {
         _data.Add(item);
         return item;
     }

     public T Remove(T item)
     {
         _data.Remove(item);
         return item;
     }

     public T Attach(T item)
     {
         _data.Add(item);
         return item;
     }

     public T Create()
     {
         return Activator.CreateInstance<T>();
     }

     public TDerivedEntity Create<TDerivedEntity>() where TDerivedEntity : class, T
     {
         return Activator.CreateInstance<TDerivedEntity>();
     }

     public ObservableCollection<T> Local
     {
         get { return new ObservableCollection<T>(_data); }
     }

     Type IQueryable.ElementType
     {
         get { return _query.ElementType; }
     }

     System.Linq.Expressions.Expression IQueryable.Expression
     {
         get { return _query.Expression; }
     }

     IQueryProvider IQueryable.Provider
     {
         get { return _query.Provider; }
     }

     System.Collections.IEnumerator System.Collections.IEnumerable.GetEnumerator()
     {
         return _data.GetEnumerator();
     }

     IEnumerator<T> IEnumerable<T>.GetEnumerator()
     {
         return _data.GetEnumerator();
     }
 }
```
หลังจากนั้นสร้าง class อีกหนึ่ง class ที่ inherit มาจาก TestDbSet<T> ระบุ generic type เป็น model class ที่ต้องการในที่นี้คือ CONFIG และเขียน code override Find() method ของTestDbSet<T> เพื่อทำหน้าที่ค้นหา object ตาม key ที่ส่งมา ( สาเหตุ ต้องสร้าง class ที่ inherit มาจาก TestDbSet<T> เนื่องจาก แต่ละ model class อาจจะมี key ที่ไม่ตรงกัน ดังนั้นใน TestDbSet<T>.Find() method จึงไม่สามารถ implement code ที่ต้องการได้ )
```
 public class ConfigDbSet : TestDbSet<Models.CONFIG>
 {
    public override Models.CONFIG Find(params object[] keyValues)
    {
        return this.SingleOrDefault(s => s.ID == (decimal)keyValues.Single());
    }
 }
```
จากนั้นกลับมาที่ unit test method ก็จะทำการ new ConfigDbSet() แล้วส่งข้อมูลที่สำหรับทดสอบกลับไปได้ โดยไม่ต้องใช้ข้อมูลจริงจากฐานข้อมูล
July 14, 2016

ทำอย่างไรให้เว็บไซต์ที่เราพัฒนาสามารถอัพโหลดไฟล์แบบคราวละหลายไฟล์ได้โดยไม่จำกัดจำนวน ด้วย ASP.NET(C#)

wanwarang.j

July 14, 2016

ในการพัฒนาเว็บไซต์ บางครั้งอาจมีความจำเป็น หรือความต้องการจากผู้ใช้ที่ต้องการให้เว็บไซต์ดังกล่าวมีฟังก์ชั่นการทำงานในส่วนของการอัพโหลดไฟล์เพื่อแนบไฟล์เข้าไปในระบบและบันทึกลงฐานข้อมูล เพื่อให้สามารถเรียกดูข้อมูลการแนบไฟล์ดังกล่าวได้ในภายหลัง การอัพโหลดไฟล์จึงถือเป็นอีกหนึ่งฟังก์ชั่นการทำงานที่นักพัฒนาเว็บไซต์ควรทราบไว้ ซึ่งลักษณะการทำงานโดยทั่วไปส่วนใหญ่เราจะใช้ Control ที่มีเรียกว่า “FileUpload” แบบอัพโหลดครั้งละ 1 ไฟล์ และหากมีมากกว่านั้นก็จะมีการสร้างตัว FileUpload มาวางไว้ในหน้าจอเพิ่มตามจำนวนที่ต้องการแบบตายตัว เช่น หากในหน้าจอดังกล่าวต้องการสามารถให้ทำการอัพโหลดไฟล์ได้ไม่เกิน 5 ไฟล์ต่อการอัพโหลดแต่ละครั้งก็จะมีการลากคอนโทรล FileUpload มาวางไว้ในหน้าจอจำนวน 5 ตัว เพื่อให้สามารถรองรับความต้องการในการอัพโหลดไฟล์ของผู้ใช้ได้ แต่ผู้เขียนพบว่าการทำงานดังกล่าวอาจไม่รองรับความต้องการในการทำงานของผู้ใช้ที่จะเพิ่มไฟล์ได้ครั้งละหลายๆไฟล์โดยไม่จำกัดและผู้พัฒนาไม่จำเป็นต้องระบุหรือสร้างคอนโทรล FileUpload มาวางในหน้าจอในจำนวนที่ตายตัวโดยไม่จำเป็น โดยผู้ใช้สามารถคลิกปุ่มเพื่อเพิ่มจำนวนในการอัพโหลดไฟล์แต่ละครั้งได้เองเพื่อความยืดหยุ่นในการใช้งาน ในบทความนี้ ผู้เขียนจึงขอเสนอแนวทางในการพัฒนาเว็บไซต์โดยใช้ ASP.NET(C#) ในแบบที่มีการอัพโหลดไฟล์ได้คราวละหลายๆไฟล์ในแบบไม่ต้องจำกัดจำนวนคอนโทรล FileUpload ในหน้าจอโดยมีการระบุจำนวนไฟล์ที่สามารถอัพโหลดได้ในแต่ละครั้งโดยผู้พัฒนาแบบตายตัวอย่างเช่นที่กล่าวไว้ข้างต้น

หลังจากที่ได้มีการศึกษาเพิ่มเติม ผู้เขียนพบว่าใน .NET Framework เวอร์ชั่น 4.5 นั้นจะมีการเพิ่ม Feature การทำงานในส่วนนี้ให้กับคอนโทรล FileUpload ไว้แล้วผ่าน Properties ที่เรียกว่า AllowMultiple ซึ่งจะทำให้สะดวกต่อการพัฒนาและสามารถลดปัญหาดังกล่าวข้างต้นได้ แต่สำหรับเวอร์ชั่นที่ต่ำกว่ายังคงต้องมีการปรับปรุงพัฒนาเพิ่มเติมเอง ในบทความนี้จึงขอยกตัวอย่างการพัฒนาทั้ง 2 แบบในเบื้องต้นโดยจะเน้นไปในแบบเวอร์ชั่นที่ต่ำกว่า 4.5 เพื่อให้ผู้อ่านได้นำไปเป็นแนวทางในการพัฒนาต่อไป ดังนี้
1. การอัพโหลดไฟล์คราวละหลายๆไฟล์โดยใช้ .Net Framework เวอร์ชั่นที่ต่ำกว่า 4.5

ในบทความนี้ ผู้เขียนขอเสนอแนวทางแบบที่เป็นการพัฒนาโดยใช้จาวาสคริปต์เข้ามาเป็นตัวช่วยให้สามารถอัพโหลดไฟล์ได้ครั้งละหลายไฟล์ต่อการอัพโหลดแต่ละครั้ง เพื่อลดจำนวนการโหลดของหน้าจอและทำให้ผู้ใช้รู้สึกว่าการทำงานดังกล่าวเป็นไปด้วยความรวดเร็วไม่ต้องใช้เวลานาน โดยจะอธิบายทีละขั้นตอน ดังนี้

1) ออกแบบหน้าจอการทำงานในฝั่ง Client ทำการออกแบบหน้าจอการทำงานไว้ในเบื้องต้น โดยมีการสร้างคอนโทรล FileUpload มาตั้งต้นไว้ 1 ตัว และมีปุ่มเพื่อให้ทำการเพิ่มคอนโทรล FileUpload ได้เองอัตโนมัติโดยตัวผู้ใช้เอง และปุ่มที่ใช้ในการอัพโหลดไฟล์จากคอนโทรล FileUpload ทั้งหมด ดังนี้

<body>
<form id="form1" runat="server">
<div>
 <div id="fileUploadarea" class="Divborder">
  <div id='divfirstUpload'><br /><asp:FileUpload ID="fuMultiple" runat="server" CssClass="fileUpload" onchange="javascipt:FileValidate(this,5);" />&nbsp;  <input style="display:inline;" id="BtnRemove" type="button" value="Remove" onclick="DelFileUpload('divfirstUpload');" /> 
</div> 
</div>
<br /> 
<div>&nbsp; 
<input style="display:inline; background-color: #A4EDFF; color: #333333; width: 150px; font-weight: bold;" id="btnAddMoreFiles" type="button" value="Add more files" onclick="AddMoreFilesWithMax(6);" />
&nbsp; <asp:Button ID="BtnUpload" runat="server" onclick="BtnUpload_Click" Text="Upload" OnClientClick="return ValidateFileUpload();" BackColor="#3399FF" Font-Bold="True" ForeColor="White" Width="150px" /> 
<br> 
<asp:GridView ID="gvResult" runat="server" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None" Width="410px">
<RowStyle BackColor="#EFF3FB" /> 
<Columns> 
<asp:BoundField DataField="Name" HeaderText="ชื่อไฟล์"> 
<ItemStyle Width="200px" /> </asp:BoundField> 
<asp:BoundField DataField="FileSize" HeaderText="ขนาดไฟล์(KB)"> 
<ItemStyle HorizontalAlign="Right" Width="120px" /> 
</asp:BoundField> 
</Columns> 
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> 
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" /> <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" /> <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> 
<EditRowStyle BackColor="#2461BF" /> <AlternatingRowStyle BackColor="White" /> 
</asp:GridView> 
</div> 
</div> 
</form> 
</body>

2) ในส่วนของจาวาสคริปต์ที่ใช้เป็นตัวช่วยในการตรวจสอบ โดยจะแยกเป็นแต่ละ function ดังนี้

2.1) ฟังก์ชั่นที่ใช้ในการเพิ่มไฟล์ได้ไม่จำกัด โดยใช้ชื่อว่า AddMoreFiles()

<script language="javascript" type="text/javascript">

function AddMoreFiles() {

  if (!document.getElementById && !document.createElement)
    return false;
////อ้างอิงถึง div ที่มีชื่อว่าfileUploadarea
  var fileUploadarea = document.getElementById("fileUploadarea"); 
  if (!fileUploadarea) return false; 
   var newLine = document.createElement("br"); fileUploadarea.appendChild(newLine); 
   var newFile = document.createElement("input"); 
   newFile.type = "file"; newFile.setAttribute("class", "fileUpload");

/////กำหนดค่าเริ่มต้นให้กับตัวแปร AddMoreFiles.lastAssignedId 
เพื่อใช้ในการกำหนด ID ให้กับคอนโทรลที่สร้างขึ้น และเป็นตัวนับ
  if (!AddMoreFiles.lastAssignedId) 
    AddMoreFiles.lastAssignedId = 1;

 //////กำหนดค่าแอททริบิวต์ต่างๆให้กับ FileUpload ที่ทำการสร้างใหม่ ในทีนี้คือ id และ name
    newFile.setAttribute("id", "FileUpload" + AddMoreFiles.lastAssignedId);  
    newFile.setAttribute("name", "FileUpload" + AddMoreFiles.lastAssignedId); 

 //////สร้าง div ขึ้นมาใหม่ และกำหนดค่าแอททริบิวต์ต่างๆให้กับ div ที่ทำการสร้างใหม่ 
ในทีนี้คือ id และ เพิ่มคอนโทรลที่สร้าง tag ไว้ด้านบนเข้ามาไว้ใน div 
    var div = document.createElement("div"); 
    div.appendChild(newFile); 
    div.setAttribute("id", "div" + AddMoreFiles.lastAssignedId); 

//////เพิ่ม div ที่สร้างใหม่ไปยัง div ที่มีชื่อว่า fileUploadarea และเพิ่มค่าของตัวแปร AddMoreFiles.lastAssignedId   
    fileUploadarea.appendChild(div); 
    AddMoreFiles.lastAssignedId++; 
}

2.2) ฟังก์ชั่นที่ใช้ในการเพิ่มไฟล์ได้โดยมีการระบุจำนวนสูงสุดที่ยอมให้อัพโหลดแต่ละครั้ง ในกรณีที่ต้องการระบุค่าจำนวนไฟล์ที่ต้องการให้ผู้ใช้สามารถอัพโหลดได้สูงสุดในแต่ละครั้ง สามารถปรับแก้เพิ่มเติมจากฟังก์ชั่นก่อนหน้านี้ โดยการส่งพารามิเตอร์จำนวนมากสุดที่ยอมให้สร้างตัวอัพโหลดไฟล์ได้ โดยใช้ชื่อฟังก์ชั่นว่า AddMoreFilesWithMax(x) ดังนี้

function AddMoreFilesWithMax(x) 
{ //////กำหนดค่าให้กับ AddMoreFiles.lastAssignedId 
เพื่อเป็นค่าตั้งต้นในการไปเซทค่า id และ name ของคอนโทรลที่สร้างใหม่ 
โดยในที่นี้เริ่มต้นที่ 2 เนื่องจากเดิมมีคอนโทรลอัพโหลดไฟล์อยู่เดิมแล้ว 1 ตัว
  if (!AddMoreFiles.lastAssignedId)
      AddMoreFiles.lastAssignedId = 2;

   if (!document.getElementById && !document.createElement)
      return false; 
  var fileUploadarea = document.getElementById("fileUploadarea");
    if (!fileUploadarea) return false;

/////เป็นการตรวจสอบเงื่อนไขว่ายังไม่เกินจำนวนมากสุดที่ระบุไว้ผ่านพารามิเตอร์ x
      if (AddMoreFiles.lastAssignedId <= x) 
      { 
      var newLine = document.createElement("br"); 

      //สร้างปุ่ม Remove เพื่อใช้ลบคอนโทรล FileUpload ที่สร้างขึ้นออกโดยผู้ใช้ 
      var newbtnDel = document.createElement("input"); 
      newbtnDel.setAttribute("id", "btnDelUpload" + AddMoreFiles.lastAssignedId);
      newbtnDel.setAttribute("name", "btnDelUpload" + AddMoreFiles.lastAssignedId); 
      newbtnDel.setAttribute("value", "Remove");   
      newbtnDel.type = "button"; 

     //////สร้างคอนโทรล FileUpload ขึ้นใหม่และกำหนดแอททริบิวต์ต่างๆให้
      var newFile = document.createElement("input"); 
      newFile.type = "file"; 
      newFile.setAttribute("class", "fileUpload");
      newFile.setAttribute("id", "FileUpload" + AddMoreFiles.lastAssignedId); 
      newFile.setAttribute("name", "FileUpload" + AddMoreFiles.lastAssignedId);

//////เป็นส่วนของการเรียกฟังก์ชั่นในการตรวจสอบไฟล์ที่ทำการอัพโหลดว่าถูกต้องตรงตามเงื่อนไขหรือไม่
     เมื่อมีการเลือกไฟล์ใดๆจากผู้ใช้ ซึ่งจะพูดถึงในส่วนถัดไปในการสร้างฟังก์ชั่น FileValidate(ctrl,maxVal) 
      newFile.setAttribute('onchange', 'javascipt:FileValidate(this,5);');

//////สร้าง div ขึ้นมาใหม่ และกำหนดค่าแอททริบิวต์ต่างๆให้กับ div ที่ทำการสร้างใหม่ 
ในทีนี้คือ id และ เพิ่มคอนโทรลที่สร้าง tag ไว้ด้านบนเข้ามาไว้ใน div 
      var div = document.createElement("div");
      div.appendChild(newLine);
      div.appendChild(newFile);
//////เพิ่มช่องว่างระหว่างคอนโทรลอัพโหลดไฟล์และปุ่ม Remove เพื่อความสวยงาม
      div.appendChild(document.createTextNode('\u00A0'));
      div.appendChild( newbtnDel);
      div.setAttribute("id", "div" + AddMoreFiles.lastAssignedId);

//////เพิ่ม event การคลิกปุ่ม Remove เพื่อให้ไปเรียกใช้ฟังก์ชั่น DelFileUpload
โดยส่งค่า id ของ div ที่ต้องการให้ลบออกซึ่งจะกล่าวถึงในส่วนถัดไปของการสร้างฟังก์ชั่น DelFileUpload(divid);
      newbtnDel.setAttribute('onclick', 'javascipt:DelFileUpload(\'' + "div" + AddMoreFiles.lastAssignedId + '\');');

      fileUploadarea.appendChild(div);
      AddMoreFiles.lastAssignedId++; } 

///////กรณีที่มีจำนวนตัวอัพโฟลดไฟล์ที่ถูกสร้างขึ้นเองเกินกว่าที่กำหนด(ค่าพารามิเตอร์ x) 
จะแสดงข้อความให้ทราบ
 else { 
       alert("ขออภัย ท่านสามารถอัพโหลดไฟล์ได้สูงสุดครั้งละไม่เกิน " + x + " ไฟล์ต่อการอัพโหลดแต่ละครั้ง กรุณาลองใหม่อีกครั้ง"); 
      return false;
       } 
      }

2.3) ฟังก์ชั่นที่ใช้ในการตรวจสอบขนาดของไฟล์ โดยมีการระบุขนาดสูงสุดที่ยอมให้อัพโหลดแต่ละครั้ง โดยใช้ชื่อฟังก์ชั่นว่า FileValidate(ctrlFile,MaxSize)

////เป็นการประกาศตัวแปรที่ใช้ในการตรวจสอบชนิดของไฟล์ที่ยอมให้อัพโหลดได้
var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png", ".pdf"];

function FileValidate(ctrlFile,MaxSize) 
{//////พารามิเตอร์ที่รับเข้ามาคือตัวคอนโทรลของการอัพโหลดไฟล์ที่ต้องการตรวจสอบ(ctrlFile) 
และขนาดสูงสุดของไฟล์ที่ยอมให้อัพโหลดในแต่ละคอนโทรล(MaxSize)

////ดึงค่าชื่อของไฟล์ที่อัพโหลดที่ต้องการตรวจสอบ
  var sFileName = ctrlFile.value;

/////ตรวจสอบเมื่อพบชื่อไฟล์ที่ดึง
   if (sFileName.length > 0) 
   { 
     var blnValid = false; 
//////////ตรวจสอบนามสกุลของไฟล์ที่ดึงมาจากชื่อไฟล์กับค่าของนามสกุลไฟล์ที่ยอมให้อัพโหลด
จากตัวแปร _validFileExtensions
     for (var j = 0; j < _validFileExtensions.length; j++) 
      { var sCurExtension = _validFileExtensions[j]; 
       if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) 
       { 
         blnValid = true; 
         break; 
        } 
      }   
//////กรณีไฟล์ดังกล่าวมีนามสกุลที่แตกต่างจากที่กำหนดจะแสดงข้อความแจ้งเตือน 
และล้างค่าของชื่อไฟล์ในคอนโทรลอัพโหลดไฟล์ตัวดังกล่าว
     if (!blnValid) 
     { alert("ไม่สามารถอัพโหลดไฟล์ดังกล่าวได้ เนื่องจากรองรับเฉพาะไฟล์ที่มีนามสกุลดังนี้เท่านั้น: " + _validFileExtensions.join(", ")); 
      ctrlFile.value = ""; 
      return false; 
     } 
     else 
     {
/////หากไฟล์ที่อัพโหลดมีนามสกุลไฟล์ตามที่ระบุ จะทำการตรวจสอบขนาดของไฟล์ว่าไม่เกินจากขนาดสูงสุด
ที่กำหนดหรือไม่ โดยมีการคำนวณหน่วยเป็น MB
       var fileSize = parseFloat(ctrlFile.files[0].size / 1048576).toFixed(2);

/////หากขนาดของไฟล์เกินกว่าที่กำหนดจะแสดงข้อความแจ้งเตือน และล้างค่าไฟล์ที่ต้องการอัพโหลด
ในคอนโทรลอัพโหลดไฟล์ดังกล่าว
       if (fileSize > MaxSize) 
        { alert(" ขออภัย ขนาดของไฟล์ที่ต้องการอัพโหลดมีขนาดใหญ่เกินกว่าทีกำหนด(" + MaxSize + " MB)"); 
          ctrlFile.value = ""; 
          return false;   
       } 
     }   
    }   
  return true; 
  }

2.4) ฟังก์ชั่นที่ใช้ในการตรวจสอบว่ามีการเลือกไฟล์ที่ต้องการอัพโหลดแล้วหรือไม่ เมื่อมีการกดปุ่ม “Upload” โดยใช้ชื่อฟังก์ชั่นว่า ValidateFileUpload()

function ValidateFileUpload() { 
//////เป็นการค้นหาคอนโทรลไฟล์อัพโหลดที่มีในหน้าจอโดยใช้ tag input 
และตรวจสอบที่มี type เป็น "file" ใส่ไว้ในตัวแปร arrInputs
    var arrInputs = document.getElementsByTagName("input");
    var blnValid; 
    var oInput;
    for (var i = 0; i < arrInputs.length; i++)
     { oInput = arrInputs[i]; 
      if (oInput.type == "file") 
      { 
       var sFileName = oInput.value; 

 ///////หากพบตัวอัพโหลดไฟล์ตัวใดที่ยังไม่ได้ทำการเลือกไฟล์ไว้ จะทำการแสดงข้อความแจ้งเตือนให้ทราบ
       if (sFileName.length == 0) 
         { blnValid = false; 
          alert("ขออภัย ไม่สามารถอัพโหลดไฟล์ได้ เนื่องจากพบว่ามีบางไฟล์ไม่ได้ถูกเลือก กรุณาลองใหม่อีกครั้ง"); 
          return false;   
         } 
      }   
     }   
return true; 
}

2.5) ฟังก์ชั่นที่ใช้ในการลบคอนโทรลที่ใช้ในการอัพโหลดไฟล์ โดยใช้ชื่อฟังก์ชั่นว่า DelFileUpload(dv) ซึ่งจะส่งพารามิเตอร์เป็น id ของ div ตัวที่ต้องการให้ลบ และถูกเรียกใช้เมื่อมีการกดปุ่ม “Remove”

function DelFileUpload(dv) 
{ ////ค้นหา div ตาม id ที่ส่งเข้ามา
   var elem = document.getElementById(dv); 
  ///ทำการลบ div นั้นออกจากหน้าจอและลดค่าของ AddMoreFiles.lastAssignedId ลง 1
เพื่อใช้ในการคำนวณค่าสูงสุดและกำหนด tag ของ id และ name ของคอนโทรลที่สร้างใหม่ต่อไป
   elem.parentNode.removeChild(elem); 
   AddMoreFiles.lastAssignedId = AddMoreFiles.lastAssignedId - 1; 
}

3) ในฝั่งเซฺิร์ฟเวอร์ (C#)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
/////เป็น namespace ที่ต้องอ้างอิงเพิ่มเพื่อใช้ในการจัดการข้อมูลกับ datatable
using System.Data;
/////เป็น namespace ที่ต้องอ้างอิงเพิ่มเพื่อใช้ในการจัดการเกี่ยวกับการอัพโหลดไฟล์
using System.IO;
public partial class MultipleUpload : System.Web.UI.Page
{
protected void BtnUpload_Click(object sender, EventArgs e)
{
  try
  {

 //////สมมุติเพื่อนำไปประยุกต์ใช้กับการบันทึกลงฐานข้อมูลต่อไป 
โดยสร้างโครงสร้าง datatable ที่ชื่อว่า dtFiles 
     DataTable dtFiles = new DataTable();
     dtFiles.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
     new DataColumn("Name", typeof(string)),
     new DataColumn("FileSize",typeof(string)) });

////เป็นการดึงคอนโทรลในการอัพโหลดไฟล์ที่ถูกสร้างขึ้นและวนรอบในการบันทึกไฟล์ดังกล่าว
 HttpFileCollection hfc = Request.Files;
 for (int i = 0; i < hfc.Count; i++)
 {
    HttpPostedFile hpf = hfc[i];
   if (hpf.ContentLength > 0)
    {
//////บันทึกไฟล์ตามที่ระบุไว้
    hpf.SaveAs(Server.MapPath("~/uploads/") + System.IO.Path.GetFileName(hpf.FileName));

////เพิ่มข้อมูลลงไปใน datatable ที่สร้างไว้ สำหรับการใช้งานจริงอาจเป็นการติดต่อเพื่อบันทึกลงฐานข้อมูล 
    dtFiles.Rows.Add(i,hpf.FileName, hpf.ContentLength / 1024);
     }
   }
 if (dtFiles.Rows.Count > 0) 
 {
//////ดึงข้อมูลจาก datatable มาแสดงในกริดวิว
    gvResult.DataSource = dtFiles;
    gvResult.DataBind();
 
 }
   }
  }
  catch (Exception)
  {
   throw;
   }
  }
}

เพิ่มเติม :
หากต้องการตกแต่งเพื่อความสวยงามสามารถใส่ StyleSheet เพิ่มเติมได้ ดังตัวอย่างต่อไปนี้

<style type="text/css">
  .fileUpload
  {
   width:255px;
   font-size:11px;
   color:#000000;
   border:solid;
   border-width:1px;
   border-color:#7f9db9;
   height:17px;
  }
 .Divborder
  {
   border: 2px solid;
   border-radius: 5px;
   padding:10px;
   width:390px;
  }
</style>

ตัวอย่างผลลัพธ์ที่ได้

1) แสดงหน้าจอ โดยแรกเริ่มมีอัพโหลดไฟล์ตั้งต้น 1 ตัว

uploadsingle

2) แสดงหน้าจอเมื่อมีการกดปุ่ม “Add more files”

3) แสดงผลลัพธ์หลังจากบันทึกข้อมูลเรียบร้อยแล้ว multipleResult2

2. การอัพโหลดไฟล์คราวละหลายๆไฟล์โดยใช้ .Net Framework เวอร์ชั่น 4.5 ซึ่งในบทความนี้จะไม่ลงรายละเอียดมากนัก ผู้อ่านสามารถนำไปประยุกต์เพิ่มเติมได้ โดยจะอธิบายทีละขั้นตอนคร่าวๆ ดังนี้

1) การออกแบบในหน้าจอฝั่ง Client

<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="file_upload" runat="server" AllowMultiple="true" />
<asp:Button ID="btnFileUpload" runat="server" Text="Upload" OnClick="btnFileUpload_Click" />
<asp:Label ID="lblUploadStatus" runat="server"></asp:Label><br />
 <asp:GridView ID="gvResult" runat="server" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None" Width="410px">
 <AlternatingRowStyle BackColor="White" />
 <Columns>
 <asp:BoundField DataField="Name" HeaderText="ชื่อไฟล์">
 <ItemStyle Width="300px" />
 </asp:BoundField>
 <asp:BoundField DataField="filesize" HeaderText="ขนาดไฟล์(KB)">
 <ItemStyle HorizontalAlign="Right" Width="110px" />
 </asp:BoundField>
 </Columns>
 <EditRowStyle BackColor="#2461BF" />
 <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
 <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
 <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
 <RowStyle BackColor="#EFF3FB" />
 <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
 <SortedAscendingCellStyle BackColor="#F5F7FB" />
 <SortedAscendingHeaderStyle BackColor="#6D95E1" />
 <SortedDescendingCellStyle BackColor="#E9EBEF" />
 <SortedDescendingHeaderStyle BackColor="#4870BE" />
 </asp:GridView>
</div>
</form>
</body>

2) การพัฒนาในฝั่งเซิร์ฟเวอร์(C#)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Data;
namespace WebAppTest
{
 public partial class MultipleUpload : System.Web.UI.Page
 {
 protected void btnFileUpload_Click(object sender, EventArgs e)
 {
 try
 {
///////การตรวจสอบขนาดไฟล์และไฟล์ต้องเป็นชนิด image/jpeg เท่านั้น
 if (file_upload.HasFile && file_upload.PostedFiles.All(x => x.ContentType == "image/jpeg" && x.ContentLength < 102400))
 {
///////ประกาศตัวแปร และกำหนดโครงสร้างของ datatable
 int i = 1;
 DataTable dtFiles = new DataTable();
 dtFiles.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
 new DataColumn("Name", typeof(string)),
 new DataColumn("FileSize",typeof(string)) });
 foreach (var file in file_upload.PostedFiles)
 {
//////บันทึกไฟล์ที่เลือก
   file_upload.SaveAs(Server.MapPath("~/Fileupload/") + Path.GetFileName(file.FileName));
////วนบันทึกข้อมูลไฟล์ที่อัพโหลดลงใน datatable  
    dtFiles.Rows.Add(i, file.FileName, file.ContentLength / 1024);
 }

////แสดงข้อความเมื่อการอัพโหลดเสร็จสมบูรณ์
   lblUploadStatus.Text = "บันทึกสำเร็จ";

////แสดงค่าที่ได้ลงในกริดวิว
 if (dtFiles.Rows.Count > 0)
 {
 gvResult.DataSource = dtFiles;
 gvResult.DataBind();

 }
 }
 else
 {
////แสดงข้อความแจ้งเตือนกรณีเกิดปัญหาไฟล์มีขนาดใหญ๋เกินกว่าที่กำหนดและไม่ใช่ชนิด image/jpeg
   lblUploadStatus.Text = "กรุณาเลือกไฟล์ที่ต้องการอัพโหลดให้เหมาะสม";
 }
 }
 catch (Exception ex)
 {
////แสดงข้อความแจ้งเตือนกรณีเกิดปัญหาในการอัพโหลดไฟล์
   lblUploadStatus.Text = "เกิดข้อผิดพลาดในการอัพโหลดไฟล์ :" + ex.Message;
 }
 }
 }
}

ตัวอย่างผลลัพธ์ที่ได้

1) ก่อนทำการอัพโหลดไฟล์

2) หลังอัพโหลดไฟล์ทั้งหมดเรียบร้อยแล้ว

หมายเหตุ : หากกำหนดค่าให้กับ Properties ที่ชื่อว่า AllowMultiple=”false“ ตอนเลือกไฟล์ที่จะอัพโหลดจะสามารถเลือกได้เพียงไฟล์เดียวเท่านั้น

จากบทความและตัวอย่างข้างต้น จะเห็นว่า ลักษณะผลลัพธ์ที่ได้จะคล้ายคลึงกัน แต่จะแตกต่างกันในส่วนของความซับซ้อนในการตรวจสอบความถูกต้องของข้อมูลไฟล์แนบที่รับเข้ามา ซึ่งผู้พัฒนาเองสามารถเลือกใช้วิธีที่ตนถนัดและขึ้นกับเวอร์ชั่นของ .NET Framework ที่กำลังพัฒนา รวมถึงเงื่อนไขของการตรวจสอบให้ตรงตามความต้องการของผู้ใช้มากที่สุด โดยเนื้อหาในบทความนี้เป็นเพียงแนวทางหนึ่งให้กับท่านในเบื้องต้นเท่านั้น ท่านสามารถนำไปประยุกต์ต่อยอดเพิ่มเติมได้ และผู้เขียนหวังเป็นอย่างยิ่งว่าบทความนี้จะเป็นประโยชน์กับผู้พัฒนาที่กำลังค้นหาวิธีการอัพโหลดไฟล์คราวละหลายไฟล์นี้อยู่เช่นกัน หากมีเนื้อหาส่วนใดผิดพลาด ผู้เขียนขออภัยไว้ ณ ที่นี้ด้วย ขอบคุณค่ะ ^^
แหล่งข้อมูลอ้างอิง :
http://www.aspsnippets.com/Articles/Uploading-Multiple-Files-using-JavaScript-Dynamic-FileUpload-Controls-in-ASP.Net.aspx
http://www.codeproject.com/Articles/667604/Upload-multiple-files-in-asp-net
http://www.c-sharpcorner.com/UploadFile/99bb20/upload-multiple-files-using-fileupload-control-in-Asp-Net-4/

July 14, 2016

Day: July 14, 2016

การสร้าง Hybrid App ด้วย Ionic Framework

เริ่มต้นสร้าง App อย่างง่าย

ตอนที่ 4 : ใช้ Report Wizard ช่วยสร้างรายงาน

Unit test สำหรับ method ที่ใช้ Entity Framework

ทำอย่างไรให้เว็บไซต์ที่เราพัฒนาสามารถอัพโหลดไฟล์แบบคราวละหลายไฟล์ได้โดยไม่จำกัดจำนวน ด้วย ASP.NET(C#)