อิมพอร์ตข้อมูลจาก Excel บันทึกลง ฐานข้อมูล SQL Server โดยใช้ EPPlus ตอนที่ 2 Export Excel


บทความจาก นิตยสาร WindowsITPro
ได้ขออนุญาตทางบก. เรียบร้อยแล้ว

จากบทความอิมพอร์ตข้อมูลจาก Excel…ในตอนที่ 1
คุณผู้อ่านได้รู้จักการอิมพอร์ตข้อมูลจาก
Excel
บันทึกลง ฐานข้อมูล
SQL Server โดยใช้ EPPlus ไปแล้ว
มาในตอนที่
2 นี้ เป็นการกล่าวถึงการเอ็กซ์พอร์ต (Export)
ข้อมูลออกไปเป็นรายงาน Excel

โดยเราจะนำโปรเจ็กต์ในตอนที่
1 มาใช้ต่อ ซึ่งข้อมูลที่คุณผู้อ่านจะนำไปสร้างรายงานบน Excel นั้น
จะใช้ข้อมูลใน
View Category Sales for 1997 ซึ่งเป็นตัวอย่าง View
ที่มีอยู่ในฐานข้อมูล
Northwind อยู่แล้ว ไม่ต้องสร้างใหม่
โดยคุณผู้อ่านจะได้ใช้
EPPlus Export ข้อมูลการขายเหล่านั้น
ออกไปเป็นรายงานบน
Excel พร้อมสร้างเป็นกราฟด้วย
ไปดูขั้นตอนการพัฒนาโปรแกรมกันเลย

ขั้นตอนการพัฒนาโปรแกรม

  • ขั้นตอนที่ หนึ่ง ออกแบบหน้าจอ
  • ขั้นตอนที่ สอง เพิ่มรูปภาพ
  • ขั้นตอนที่ สาม Update LINQ Data Model
  • ขั้นตอนที่ สี่ เขียนโค้ด
  • ขั้นตอนที่ ห้า ทดสอบโปรแกรม

 

ขั้นตอนที่ หนึ่ง ออกแบบหน้าจอ

1.1. ให้คุณผู้อ่านเปิดโปรเจ็กต์ ตอนที่ 1 ขึ้นมา

1.2. เปิดไฟล์ ImportExcel.aspx

1.3. จากนั้นทำการเพิ่มปุ่ม Button หนึ่งอัน

1.4. ระบุป้ายชื่อเป็น Export Excel Chart ดังรูปที่1

รูปที่ 1 ออกแบบหน้าจอ

 

ขั้นตอนที่ สอง เพิ่มรูปภาพ

เมื่อเพิ่มปุ่ม Export…เป็นที่เรียบร้อยแล้ว
เรายังไม่เขียนโค้ดในตอนนี้
จะไปทำการเพิ่มรูปโลโก้ WindowsITPro
เข้ามาก่อน ซึ่งหา Download ได้บนเว็บ http://windowsitpro.net
ขั้นตอนการเพิ่มรูปมีดังนี้

2.1. คลิกขวาบนโปรเจ็กต์ ImportExportExcelWithEPPlus

2.2. เลือกเมนู Add

2.3. เลือก New Folder

2.4. ตั้งชื่อโฟลเดอร์เป็น Images ดังรูปที่ 2

รูปที่ 2 สร้างโฟลเดอร์ Images

2.5. คลิกขวาบนโฟลเดอร์ Images

2.6. เลือกเมนู Add

2.7. เลือกเมนู Existing Item…

2.8. เบราว์ไปยังพาธที่เก็บรูปโลโก้ แล้วเลือกรูปที่เตรียมไว้

2.9. กดปุ่ม Add ดังรูปที่3

รูปที่ 3 เพิ่มรูปภาพ

 

ขั้นตอนที่ สาม Update LINQ Data Model

เมื่อออกแบบหน้าจอ และเพิ่มไฟล์รูปภาพโลโก้ เป็นที่เรียบร้อยแล้ว
ขั้นตอนนี้ เราไปเพิ่ม DataModel ของ View Category Sales for 1997

เพื่อ
เอ็กซ์พอร์ตข้อมูลออกมาเป็นรายงานบน Excel ตามขั้นตอนดังนี้

3.1 ในหน้าต่าง Solution Explorer คลิกโฟลเดอร์ DAL

3.2 ดับเบิ้ลคลิกเปิดไฟล์ Northwind.dbml

3.3 เมื่อไฟล์ Northwind.dbml เปิดขึ้นมา คุณจะเห็นว่า มีอ็อบเจ็กต์โมเดลของ Customer อยู่ ซึ่งเป็นของตอนที่1

3.4 คลิก Link Server Explorer เพื่อจะเข้าไปเพิ่มอ็อบเจ็กต์ Data Model ใหม่เข้ามา

3.5 หน้าต่าง Server Explorer จะเปิดขึ้นมา

3.5 ในหน้าต่าง Server Explorer คลิก NorthwindConnectionString1 (ImportExcelWithEPPlus)

3.6 คลิกขยายโฟลเดอร์ Views

3.7 คลิกอ็อบเจ็กต์ View Category Sales for 1997 ค้างไว้ แล้วลากไปวางบนพื้นที่ออกแบบ(Design surface) ดังรูปที่4

3.8 Build โปรเจ็กต์ หนึ่งครั้ง เพื่อ Update LINQ Data Model


รูปที่ 4
เพิ่มอ็อบเจ็กต์ View Category Sales for 1997

 

ขั้นตอนที่ สี่ เขียนโค้ด

เมื่อออกแบบหน้าจอ

เพิ่มไฟล์รูปภาพโลโก้
และ

Update LINQ Data Model เป็นที่เรียบร้อยแล้ว
ไปเขียนโค้ดบนปุ่ม ExportExcelChart ดังนี้


 

ขั้นตอนที่ ห้า ทดสอบโปรแกรม

เมื่อเขียนโค้ดเป็นที่เรียบร้อยแล้ว ไปทดสอบรันโปรแกรมกันเลย ดังนี้

5.1 กดปุ่ม F5 บนคีย์บอร์ด

5.2 กดปุ่ม Export Excel Chart

5.3 เลือกพาธที่ต้องการบันทึกไฟล์ Excel

5.4 กดปุ่ม Save

5.6 รอชั่วพริบตา เมื่อไฟล์ Excel โหลดเรียบร้อยแล้วให้เปิดขึ้น

5.6 คลิกบนไฟล์ Excel เลือกแสดงในโฟลเดอร์

5.7 ดับเบิ้ลคลิกไฟล์ ดังรูปที่5


รูปที่ 5 ทดสอบ Export Excel Chart

 

5.8 รายงานบนไฟล์ Excel คุณผู้อ่านจะได้ดังรูปที่6

5.9 คุณผู้อ่านจะเห็น ช่วงข้อมูลที่นำไปสร้างกราฟ
เริ่มที่แถวที่ 7 นั่นจึงเป็นเหตุผลว่าในขั้นตอนการเขียนโค้ด
ประกาศตัวแปร เก็บแถวสุดท้าย
ต้อง +6 [string endRow = (CategorySales.Count() + 6).ToString();]

เพื่อที่จะวางข้อมูลที่จะใช้สร้างกราฟตั้งแต่แถวที่ 7 เป็นต้นไปนั่นเอง

5.10 และการประกาศตัวแปร เก็บแถวสุดท้าย อันที่สอง
เพื่อวางข้อมูล Total คุณผู้อ่านจะเห็นว่า
ได้นำเอาแถวสุดท้ายของข้อมูล+1 [string endRow2 = (int.Parse(endRow) + 1).ToString();]

เพื่อวางข้อมูล Total ในแถวสุดท้าย ที่ต่อจากข้อมูลที่ใช้สร้างกราฟ


รูปที่ 6 ไฟล์ Excel Chart

 

การอิมพอร์ต และเอ็กซ์พอร์ตข้อมูล Excel

ผ่านคอมโพเนนต์ EPPlus มีข้อดีคือ

  • ไม่ต้องติดตั้ง โปรแกรม Excel ไว้บนเว็บเซอร์ฟเวอร์
  • ไม่ต้อง Upload ไฟล์ excel ไปวางบนฮาร์ดดิสก์ของเว็บเซอร์ฟเวอร์
  • สามารถใช้ LINQ ในการเชื่อมต่อกับฐานข้อมูล ซึ่งทำให้การเขียนโค้ดใช้เวลาน้อยลง โค้ดสั้นลง
    แล้วพบกันโอกาสหน้าครับ

 

แหล่งข้อมูลดาวน์โหลด

  • ตัวอย่างโปรเจ็กต์
    ตอนที่1:
    ImportExcelWithEPPlus: http://1drv.ms/1k7BhC0
  • ตัวอย่างโปรเจ็กต์
    ตอนที่2:
    ImportExcelWithEPPlus_Part2: http://1drv.ms/1n5xHfU

 

แหล่งข้อมูลอ้างอิง:

 

โดย:
นุชิต อรรจนวจรรน์
GreatFriends Community Leader (nano)
WindowsITPro Columnist
Microsoft MVP

2014-09-23

เขียนใน Uncategorized

อิมพอร์ตข้อมูลจาก Excel บันทึกลง ฐานข้อมูล SQL Server โดยใช้ EPPlus ตอนที่ 1 Import Excel


บทความจาก นิตยสาร WindowsITPro
ได้ขออนุญาตทางบก. เรียบร้อยแล้ว

โปรแกรมเมอร์
ที่พัฒนาโปรแกรมด้านงานธุรกิจ(Business Applications)
คงหนีไม่พ้น ที่จะเกี่ยวข้องกับข้อมูลบน Excel

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

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

ครั้งหนึ่งนานมาแล้ว
ผมเคยเขียนบทความเกี่ยวกับ การอิมพอร์ตข้อมูล Excel
เข้าฐานข้อมูล Microsoft SQL แต่เป็นการอ่านข้อมูล Excel
ผ่าน Provider Microsoft.Jet.OLEDB

ซึ่งบทความนั้นถือเป็นบทความแรก ในชีวิตของการเป็นโปรแกรมเมอร์ ของผม
และนั่นเป็นจุดเริ่มต้นให้ผมได้เข้ามาเขียนบทความประจำ ในนิตยสาร WindowsITPro จนถึงปัจจุบัน
หากท่านผู้อ่านสนใจ การอิมพอร์ตข้อมูล Excel ผ่าน Microsoft.Jet.OLEDB

สามารถติดตามบทความ: Uploads Excel files to SQL DB
ได้ที่: http://greatfriends.biz/webboards/msg.asp?id=62078

กลับมาในบทความนี้ ผมจะแสดง อีกหนึ่งตัวอย่างของการอิมพอร์ตข้อมูล Excel
เข้าฐานข้อมูล Microsoft SQL โดยใช้คอมโพเนนต์ชื่อ EPPlus (อี-พี-พลัส)
ซึ่งผมจะใช้ตัวอย่างข้อมูลในตาราง Customer ของฐานข้อมูลตัวอย่าง
Northwind
ก่อนอื่นไปสำรวจสิ่งที่จำเป็นในบทความกันก่อน ดังนี้

สิ่งที่จำเป็น (Prerequisites)

ขั้นตอนการพัฒนาโปรแกรม

  • ขั้นตอน ที่หนึ่ง การสร้างโปรเจ็กต์
  • ขั้นตอน ที่สอง การออกแบบหน้าจอ
  • ขั้นตอน ที่สาม การเขียนโค้ด
  • ขั้นตอน ที่สี่ การทดสอบ

ขั้นตอน ที่หนึ่ง การสร้างโปรเจ็กต์
เมื่อมีเครื่องมือพร้อมแล้ว

ทำการเปิด Visual Studio Express 2013 for Web ขึ้นมา
แล้วทำตามขั้นตอนดังนี้
1.1. ในหน้า Start Page คลิก New Project…
1.2. ในหน้าต่าง New Project คลิก Web
1.3. เลือก ASP.NET Web Application Visual C#
1.4. ระบุชื่อโปรเจ็กต์ในช่อง Name: เป็น ImportExcelWithEPPlus
1.5. แล้วกด OK
1.6. บนหน้าต่าง New ASP.NET Project – ImportExcelWithEPPlus เลือกเทมเพลต Web Forms
1.7. Visual Studio จะติ๊กถูก Web Forms อัตโนมัติ
1.8. คลิก OK
1.9. เราไม่ได้นำเว็บไปวางบนคลาวน์ กด No thanks and do not ask me again
1.10. แล้วรอสักครู่… Visual Studio กำลังสร้างโปรเจ็กต์ ดังรูปที่1

รูปที่ 1 ขั้นตอน การสร้างโปรเจ็กต์

 

1.11. เมื่อสร้างโปรเจ็กต์ เรียบร้อย คุณผู้อ่านจะได้หน้าจอดังรูปที่2

รูปที่ 2 สร้างโปรเจ็กต์ ImportExcelWithEPPlus เรียบร้อย

 

ขั้นตอน ที่สอง การออกแบบหน้าจอ
หลังจากสร้างโปรเจ็กต์เป็นที่เรียบร้อย

เราไปทำการออกแบบหน้าจอ ตามขั้นตอน
ดังนี้

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

2.1.1 เลือกเมนู Add
2.1.2 เลือกเมนู New Item…
2.1.3 บนหน้าต่าง Add New Item – ImportExcelWithEPPlus เลือก Web Form with Master Page
2.1.4 ตั้งชื่อฟอร์มในช่อง Name: เป็น ImportExcel
2.1.5 คลิก Add
2.1.6 แล้วเลือกไฟล์ Master page ชื่อ Site.Master
2.1.7 จากคลิก OK เสร็จสิ้นขั้นตอน
การสร้างฟอร์ม ดังรูปที่3

รูปที่ 3 การสร้างฟอร์ม

2.1.8 เมื่อสร้างฟอร์มเรียบร้อย คุณจะได้หน้าจอดังรูปที่ 4

รูปที่ 4 สร้างฟอร์ม เรียบร้อย

2.2 การออกแบบหน้าจอ
เมื่อสร้างฟอร์มเรียบร้อย ลำดับต่อไป
เราจะไปทำการออกแบบหน้าจอโปรแกรมกัน ตามขั้นตอนดังนี้
2.2.1 วางเคอร์เซอร์บนฟอร์ม (MainContent
(Custom))
2.2.2 แล้วไปทำการเพิ่มตาราง (Table) เพื่อจัดวางเลย์เอ๊าต์ของคอนโทรล โดยคลิกเมนู TABLE => Insert Table
2.2.3 บนหน้าต่าง Insert Table ทำการกำหนด ให้ตารางมี 3 แถว
2.2.4 และ 1 คอลัมน์
2.2.5 จากนั้น กด OK
2.2.6 เพิ่มตารางสำหรับวางคอนโทรล เป็นที่เรียบร้อย ดังรูปที่5

รูปที่ 5 การเพิ่มตาราง

2.2.7 จากนั้นทำการลากคอนโทรลไปวาง
ดังนี้
2.2.7.1 แถวที่ 1 ระบุข้อป้ายความ Import Excel เพื่อบอกผู้ใช้ว่า หน้าจอนี้ ทำอะไร

2.2.7.2 แถวที่ 2 ใส่คอนโทรล FileUpload และปุ่ม Button
2.2.7.3 แถวที่ 3 ใส่คอนโทรล Label และ GridView ดังรูป6 หรือดูโค้ด Markup html ในไฟล์ ImportExcel.aspx

รูปที่ 6 ออกแบบหน้าจอ เรียบร้อย

2.2.8 โค้ด Markup เป็นดังนี้

ไฟล์ ImportExcel.aspx

<%@
Page
Title=””
Language=”C#”
MasterPageFile=”~/Site.Master”
AutoEventWireup=”true”
CodeBehind=”ImportExcel.aspx.cs”
Inherits=”ImportExcelWithEPPlus.ImportExcel”
%>

<asp:Content
ID=”Content1″
ContentPlaceHolderID=”MainContent”
runat=”server”>

<table
class=”nav-justified”>


<tr>


<td>Import Excel</td>
<%–แถวที่ 1 –%>


</tr>


<tr>


<td>
<%–แถวที่ 2 –%>


<asp:FileUpload
ID=”FileUpload1″
runat=”server”
/>
&nbsp;


<asp:Button
ID=”btImport”
runat=”server”
OnClick=”btImport_Click”
Text=”Import Excel”
/>


</td>


</tr>


<tr>


<td>
<%–แถวที่ 3 –%>


<asp:Label
ID=”Label1″
runat=”server”
Text=”Label”/>


<asp:GridView
ID=”GridView1″
runat=”server”/>


</td>


</tr>

</table>

</asp:Content>

 

2.3 การสร้าง LINQ to SQL Class
เมื่อออกแบบหน้าจอเรียบร้อยแล้ว
ลำดับต่อไปเป็นการสร้าง LINQ เพื่อเชื่อมต่อกับฐานข้อมูล
ตามขั้นตอนดังนี้

2.3.1 คลิกขวาบนชื่อโปรเจ็กต์ => เลือกเมนู Add
2.3.2 เลือกเมนู New Item…
2.3.3 บนหน้าต่าง Add New Item – ImportExcelWithEPPlus => พิมพ์ linq ในช่องค้นหา
2.3.4 จะเห็นไอเท็ม LINQ to SQL Class แสดงขึ้นมา=> จากนั้นทำการคลิกเลือก
2.3.5 ในช่อง Name: => ให้ตั้งชื่อเป็น Northwind.dbml
2.3.6 คลิก Add ดังรูปที่7

รูปที่ 7
สร้าง LINQ to SQL Class

2.4 สร้าง Connection
2.4.1 สร้าง Connection คลิกไอคอนรูปปลั๊กไฟ
2.4.2 เลือกเซอร์ฟเวอร์บนเครื่องตัวเอง => .\SQLEXPRESS (. เครื่องหมายจุด หมายถึง Localhost หรือเครื่องตัวเอง ที่โปรแกรมรันอยู่)
2.4.3 ระบุ UserName และ Password
2.4.4 เลือกฐานข้อมูล โดยในตัวอย่างนี้จะใช้ฐานข้อมูล Northwind
2.4.5 กด OK
2.4.6 จะเห็นชื่อ Data Connection
2.4.7 จากคลิกเลือกตาราง => แล้วลากไปวางบน หน้าต่าง Design Surface ดังรูปที่ 7

รูปที่ 8
สร้าง Connection

2.4.8 เราจะได้ Data Model ของ LINQ ดังรูปที่ 9

รูปที่ 9
LINQ Data Model

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

3.1 Add Referent EPPlus.dll
การ Add Referent
EPPlus.dll ทำได้สองวิธีคือ

  • การ Add ด้วยตนเอง
  • และ การ Add โดยการติดตั้งผ่าน Package Manager Console
    ขั้นตอน
    การAdd Referent ดังนี้

3.1.1 ดาวน์โหลดไฟล์ EPPlus.dll ได้ที่ http://epplus.codeplex.com/releases/view/89923
3.1.2 เลือกดาวโหลดไฟล์ EPPlus 3.1.3 Binary
(เวอร์ชั่น ณ วันที่กำลังร่างบทความต้นฉบับ
24/4/2557)
3.1.3 จากนั้นทำการแตกไฟล์ คุณจะเห็นไฟล์ EPPlus.dll อยู่ภายใน
3.1.4 ให้ทำการ Add Referent EPPlus.dll
เข้ามาในโปรเจ็กต์
3.1.5 หรือ ติดตั้ง EPPlus ผ่าน
Package Manager Console
โดยเปิดหน้าต่าง Package Manager Console ขึ้นมาดังนี้
3.1.5.1 คลิกบนเมนู TOOLS=>
3.1.5.2 คลิกเมนู NuGet Package Manager =>
3.1.5.3 แล้วเลือก Package Manager Console
3.1.6 เมื่อหน้าต่าง Package Manager Console แสดงขึ้นมาแล้ว ทำการรันคำสั่งดังนี้
3.1.6.1 ป้อนคำสั่ง Install-Package EPPlus -Version 3.1.3.3 หลังเครื่องหมาย PM> จากนั้นกดปุ่ม Enter
3.1.6.2 รอสักครู่ เมื่อ Package EPPlus
ติดตั้งเรียบร้อย คุณจะเห็น EPPlus อยู่ใน Referent เรียบร้อย
3.1.7 จากนั้นทการเขียนโค้ด ตามไฟล์ ImportExcel.aspx.cs ดังนี้

ไฟล์ ImportExcel.aspx.cs

using OfficeOpenXml;

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

 

namespace ImportExcelWithEPPlus

{


public
partial
class
ImportExcel : System.Web.UI.Page

{


protected
void Page_Load(object sender, EventArgs e)

{

 

}

 


protected
void btImport_Click(object sender, EventArgs e)

{


//ประกาศตัวแปล: lsCustomer เป็นอ็อบเจ็กต์ List ของ Customer


List<DAL.Customer> lsCustomer = new
List<DAL.Customer>();

 


//ถ้าคอนโทรล FileUpload มีไฟล์ และเป็นไฟล์ นามสกุล .xlsx


if (FileUpload1.HasFile && Path.GetExtension(FileUpload1.FileName) == “.xlsx”)

{

 


//ใช้ using statement ประกาศตัวแปล: excel เป็นอ็อบเจ็กต์ ExcelPackage โดยผ่านอินพุตสรีมที่อ่านได้จาก FileUpload1


using (var excel = new
ExcelPackage(FileUpload1.PostedFile.InputStream))

{


//ประกาศตัวแปล worksheet โดยกำหนดให้เท่ากับ sheet แรก


var worksheet = excel.Workbook.Worksheets.First();

 


//วนลูบแถวข้อมูลใน Excel โดยเริ่มที่ 2 จนถึงแถวสุดท้าย


for (int row = 2; row <= worksheet.Dimension.End.Row; row++)

{


//ประกาศตัวแปล เก็บข้อมูลคอลัมน์ต่างๆ


var CustomerID = worksheet.Cells[row, 1].Value;//คอลัมน์ 1


var CompanyName = worksheet.Cells[row, 2].Value;//คอลัมน์ 2


var ContactName = worksheet.Cells[row, 3].Value;//คอลัมน์ 3


var ContactTitle = worksheet.Cells[row, 4].Value;//คอลัมน์ 4


var Address = worksheet.Cells[row, 5].Value;//คอลัมน์ 5


var City = worksheet.Cells[row, 6].Value;//คอลัมน์ 6


var Region = worksheet.Cells[row, 7].Value;//คอลัมน์ 7


var PostalCode = worksheet.Cells[row, 8].Value;//คอลัมน์ 8


var Country = worksheet.Cells[row, 9].Value;//คอลัมน์ 9


var Phone = worksheet.Cells[row, 10].Value;//คอลัมน์ 10


var Fax = worksheet.Cells[row, 11].Value;//คอลัมน์ 11

 


//เพิ่มข้อมูลที่อ่านได้จาก Excel ใส่เข้าไปในอ็อบเจ็กต์ List ของ Customer

lsCustomer.Add(new DAL.Customer

{

 

CustomerID = CustomerID == null ? “” : CustomerID.ToString(),

CompanyName = CompanyName == null ? “” : CompanyName.ToString(),

ContactName = ContactName == null ? “” : ContactName.ToString(),

ContactTitle = ContactTitle == null ? “” : ContactTitle.ToString(),

Address = Address == null ? “” : Address.ToString(),

City = City == null ? “” : City.ToString(),

Region = Region == null ? “” : Region.ToString(),

PostalCode = PostalCode == null ? “” : PostalCode.ToString(),

Country = Country == null ? “” : Country.ToString(),

Phone = Phone == null ? “” : Phone.ToString(),

Fax = Fax == null ? “” : Fax.ToString(),

});

}

 

 


//ใช้ using statement ประกาศตัวแปล: dc เป็นอ็อบเจ็กต์ ของ NorthwindDataContext


using (DAL.NorthwindDataContext dc = new DAL.NorthwindDataContext ())

{


//วนลูบ อ็อบเจ็กต์ List ของ Customer


foreach (var item in lsCustomer)

{


//คิวรี่ข้อมูล มาตรวจสอบ


var q = dc.Customers

.Where(t => t.CustomerID == item.CustomerID )

.FirstOrDefault();

 


//ถ้ายังไม่มีข้อมูล อยู่ในฐานข้อมูล (ให้เพิ่มได้)


if (q == null)

{


//ประตัวแปล:newCus โดยกำหนดให้เท่ากับ อ็อบเจ็กต์ใหม่ของ Customer


//พร้อมกับกำหนดค่าให้ อ็อบเจ็กต์ใหม่ของ Customer


var newCus = new DAL.Customer

{

CustomerID = item.CustomerID,

CompanyName = item.CompanyName,

ContactName = item.ContactName,

ContactTitle = item.ContactTitle,

Address = item.Address,

City = item.City,

Region = item.Region,

PostalCode = item.PostalCode,

Country = item.Country,

Phone = item.Phone,

Fax = item.Fax,

};

 


//เพิ่มอ็อบเจ็กต์ใหม่ของ Customer เข้าไปในเอ็นทีตี้ Customers

dc.Customers.InsertOnSubmit(newCus);

 


//ส่งอ็อบเจ็กต์ใหม่ของ Customer บันทึกลงฐานข้อมูล

dc.SubmitChanges();

}

 

}

}

 


//ผูกข้อมูลเข้า DataSource ของ GridView

GridView1.DataSource = lsCustomer.ToList();

 


//แสดงผ่านหน้าจอ

GridView1.DataBind();

 


//แสดงป้าย บอกให้ผู้ใช้งานทราบสถานะ การทำงาน

Label1.Text = “บันทึกข้อมูลเรียบร้อย”;

}

}


else

{


//แสดงป้าย บอกให้ผู้ใช้งานทราบสถานะ การทำงาน

Label1.Text = “คุณไม่ได้ระบุไฟล์ที่จะอัปโหลด”;

}

}

}

}

 

ขั้นตอน ที่สี่ ทดสอบ

4.1 เตรียมรูปแบบไฟล์ Excel
เมื่อเขียนโค้ดเรียบร้อย
มาถึงขั้นตอนการทดสอบโปรแกรม
ให้เตรียมรูปแบบไฟล์ Excel ที่จะอิมพอร์ตเข้า ดังรูปที่10 (หมายเลข 1)

ตามรูปแบบของตาราง Customer รูปที่10 (หมายเลข 2)
แล้วใส่ข้อมูลดังรูปที่10


รูปที่ 10
รูปแบบไฟล์ Excel สำหรับเตรียมข้อมูล อิมพอร์ต

4.2 รันโปรแกรม
4.2.1 กด F5 รันโปรแกรม
จากนั้นกดปุ่มเลือกไฟล์
4.2.2 เลือกไฟล์ Excel
4.2.3 กดปุ่ม Open
4.2.4 จะเห็นชื่อไฟล์ แสดงบนฟอร์ม ดังรูปที่ 11


รูปที่ 11 เลือกไฟล์ Excel

4.2.4 กดปุ่ม Import Excel เราจะเห็นข้อมูล Excel แสดงบนหน้าจอ ดังรูป12

รูปที่ 12 อิมพอร์ตไฟล์ Excel เข้าฐานข้อมูลเรียบร้อย

4.2.5 ตรวจสอบข้อมูลในฐานข้อมูล กรองเฉพาะ CustomerID ที่ขึ้นต้นด้วย NANO เราจะเห็นข้อมูลดังรูปที่ 13


รูปที่ 13 ตรวจสอบคิวรี่ ข้อมูลที่อิมพอร์ต

การอิมพอร์ตข้อมูล Excel ผ่านคอมโพเนนต์ EPPlus จะต่างกับการอิมพอร์ตผ่าน Provider Microsoft.Jet.OLEDB คือ

  • ไม่ต้องติดตั้ง ไลบรารี่ของ Excel ไว้บนเว็บเซอร์ฟเวอร์
  • ไม่ต้อง Upload ไฟล์ excel ไปวางบนฮาร์ดดิสก์ของเว็บเซอร์ฟเวอร์
  • สามารถใช้ LINQ ในการเชื่อมต่อกับฐานข้อมูล
    ซึ่งทำให้การเขียนโค้ดใช้เวลาน้อนลง โค้ดของเราสั้นลง

ในตอนต่อไป เราจะไปดูการเอ็กซ์พร์อตข้อมูลไปเป็น Excel แล้วพบกันครับ

แหล่งข้อมูลดาวน์โหลด

แหล่งข้อมูลอ้างอิง:

 

โดย:
นุชิต อรรจนวจรรน์
GreatFriends Community Leader (nano)
WindowsITPro Columnist
Microsoft MVP

2014-09-19

 

เขียนใน Uncategorized

โปรแกรมเมอร์ มีความสุข เกิดสมาธิ จากการเขียนโค้ด โปรดักทิวีตี้เพิ่มขึ้น ตอนที่ 3


บทความจาก นิตยสาร WindowsITPro (April – May 2014)
ได้ขออนุญาตทางบก. เรียบร้อยแล้ว

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

ปลาอยู่ในน้ำ
โดนน้ำกดทับอยู่ตลอดเวลา แต่ปลาไม่เคยเห็นน้ำ
เราอยู่กับบรรยากาศของโลก เราโดนอากาศกดทับตลอดเวลา
ทำให้เราไม่หลุดลอยออกไปนอกโลก แต่เราไม่เคยเห็นอากาศ
ความสุขก็เช่นกัน แท้จริงความสุขนั้น อยู่กับเราตลอดเวลา
แต่เราไม่เคยเห็น เรารู้สึกถึงมันน้อยมาก จนแทบไม่รู้สึก
เราโดนข้อมูลข่าวสาร ความคิดลบ ภายนอก กดทับตลอดเวลา
จนเราไม่หลงเหลือความรู้สึกดีดี เราจึงโหยหา ความสุขตลอดเวลา

ชีวิตคนคนหนึ่ง
45% อยู่กับชีวิตการทำงาน อีก
55% อยู่กับชีวิตส่วนตัว
หากคุณทำงาน ด้วยความทุกข์ตลอดเวลา
นั่นคือครึ่งชีวิต ของคุณจมอยู่ในกองทุกข์
คุณขาดทุน แต่หากคุณทำงานด้วยความสุข
นั่นเท่ากับว่า ครึ่งชีวิตของคุณมีความสุข ที่เหลือนั้น คือกำไร

ตลอดเส้นทางของชีวิตการทำงาน
นอกจาก งานสร้างเกียรติแล้ว ยังสร้างคุณค่าให้ชีวิตคุณด้วย
และคุณยังสามารถเก็บเกี่ยวความสุข ตลอดเส้นทางนั้น
โดยที่คุณไม่ต้องไปค้นหา ณ สถานที่ใดๆ
ความสุขนั้นอยู่กับเราตลอดเวลาเหมือนอากาศที่กดทับเราอยู่
ตลอดเส้นทางของการเป็นโปรแกรมเมอร์
คุณสามารถมีความสุขจากการเขียนโค้ดได้เช่นเดียวกัน

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

CodeLens คืออะไร?
CodeLens เป็นคุณสมบัติใหม่ใน Visual Studio 2013 รุ่น Ultimate
ซึ่ง CodeLens จะทำงานคล้ายๆ กับหน้าปัดรถยนต์ โดยหน้าปัดรถยนต์นั้น
จะเป็นตัวบอกให้คุณรู้ว่า ก่อนคุณสตาร์ทรถ

  • สภาพเครื่องยนต์ ปกติ หรือไม่
  • ระดับน้ำมัน เหลือเท่าไหร่
  • ถุงลมนิรภัย ปกติหรือไม่
  • คุณรัดเข็มขัดหรือยัง
  • ประตู ปิดแน่น ไม่แน่น
  • ฯลฯ


รูปที่1: CodeLens คืออะไร?

เมื่อคุณออกรถ และวิ่งออกไป มันจะรายงาน ข้อมูลของรถยนต์ให้คุณทราบตลอดเส้นทางว่า

  • คุณวิ่งความเร็ว เท่าไหร่
  • ความร้อนของเครื่องยนต์ ปกติใหม
  • ถึงเวลาที่คุณจะต้องเติมน้ำมันหรือยัง
  • โดยหน้าปัดนั้น จะเป็นรายงานสถานะของรถยนต์ให้คุณทราบ

CodeLens จะทำหน้าที่คล้ายๆ อย่างนั้น โดยจะรายงานสภาพโค้ดของคุณให้คุณทราบว่า

  • มีการอ้างอิงเมธอด
    (References) ที่คุณกำลังแก้ไข จำนวนเท่าไหร่ คลาสอะไร เมธอดอะไรที่อ้าอิงไปใช้ และนำไปใช้ที่บรรทัดเท่าไหร่
  • เมธอดดังกล่าวถูกทดสอบไปหรือยัง (Test Status)
  • สถานะการทดสอบเป็นอย่างไร ผ่าน หรือไม่ผ่าน
  • ถ้าคุณเชื่อมต่อกับ Team Foundation Server (TFS) จะทำให้คุณทราบว่า
    (ซึ่งในบทความนี้ไม่ได้กล่าวในรายละเอียด)
    • ใครเป็นคนสร้างเมธอด
    • การอัพเดตโค้ดครั้งล่าสุด ใครเป็นคนอัพเด็ต วันเวลาเท่าไหร่
    • มีบั๊กกี่ไอเท็ม
    • มีการ Review Code หรือยัง

Enabling CodeLens:

คุณสามารถเปิด-ปิดการทำงานของ CodeLens ได้ 2 ทางคือ

  1. บน CodeLens Indicators => คลิกขวาเลือก CodeLens Options… (รูปที่ 2.ก)
  2. บนเมนู TOOLS => เลือก Options… (รูปที่ 2.ข)

  3. หน้าต่าง Options จะปรากฏ ดังรูปที่ 2 (รูปที่ 2.ค)

โดยดีฟอลต์แล้ว CodeLens ถูกเปิดใช้งานอยู่แล้ว ฉะนั้นตอนนี้คุณไม่ต้องทำอะไรกับมัน ผมเพียงบอกวิธีว่าคุณสามารถเข้าไปเปิด-ปิดมันได้


รูปที่2: Enabling CodeLens

CodeLens
บนหัวของเมธอด

Retrieve
ให้คุณสังเกตุตรงไอเทมที่อยู่ระหว่างโค้ดคอมเมนต์
กับโค้ดจริง นั่นคือส่วนของ CodeLens ดังรูปที่ 3


รูปที่3: CodeLans

เราจะไปดูข้อมูลของ CodeLens ว่ามันบอกอะไรเราได้บ้าง ดังนี้

  • Reference information
  • Show on Code Map
  • Test information
  • Run Unit Test
  • Automatically updated Unit Test status

Reference information
บนหัวเมธอด Retrieve คุณจะเห็น CodeLen เป็น “2 references | 0/1 passing”
ในหัวข้อนี้เราพูดถึง references ฉะนั้นผมจะคลิกลงบน “2 references”
เพื่อแสดงหน้าต่าง ข้อมูลโค้ดที่ดึงเมธอด Retrieve ไปใช้งาน คุณจะเห็นมีสองคลาสที่เรียกใช้ คือ

  1. Customers.cs บรรทัดที่เรียกเมธอดคือบรรทัดที่ 73
  2. CustomersTest.cs บรรทัดที่เรียกเมธอดคือบรรทัดที่ 256

คุณสามารถดูรายละเอียดเพิ่มเติม โดยนำเคอร์เซอร์ไปวางบนบรรทัดที่ 73 => มันจะแสดงหน้าย่อยเพิ่มขึ้นมา แสดงพื้นที่โค้ดที่เรียกใช้เมธอด Retrieve ดังรูปที่ 3


รูปที่4: Reference information

Show on Code Map
Code Map เป็นฟีเจอร์ที่มีมาตั้งแต่ Visual Studio 2012
ซึ่งเป็นเครื่องมือที่ช่วยสร้างโค้ดของคุณจากรหัสที่มีความซับซ้อน
ออกมาเป็นรูปภาพไดอะแกรมง่ายๆ ทำให้คุณสามารถมองเห็นภาพ
การทำงานของโค้ดได้ง่ายขึ้น ในหน้าต่าง CodeLens
คุณสามารถเปิดหน้าต่าง CodeMap ได้ทีทันทีโดยคลิกบนเมนู
Show on Code Map คุณสามารถมองเห็นได้ทันทีว่า
เมธอด Retrieve ถูกนำไปใช้ 2 ที่ ดังรูปที่5


รูปที่5: Show on Code Map

Test information
บนหัวเมธอด Retrieve ให้คุณคลิก CodeLen ตรง 0/1 passing
คุณจะเห็นหน้าต่างแสดงสถานะการทดสอบแสดงขึ้นมา
โดยคุณจะเห็นสถานะเมธอดยังไม่ถูกทดสอบ ดังรูปที่6


รูปที่6: Test information

Run Unit Test
คุณสามารถสั่งรันทดสอบเมธอด ได้สองทางคือ

  1. ทดสอบรัน ได้จากเมนูบาร์ TEST => Run => All Tests ดังรูปที่ 7.ก หรือ
  2. คลิก Run All บนหน้าต่าง แสดงสถานะการทดสอบ ของ CodeLens ดังรูปที่ 7.ข
  3. จากนั้นรอสักครู่ เพื่อให้ระบบทดสอบโค้ดของคุณ


รูปที่7: Run Unit Test

Automatically updated Unit Test status

  1. เมื่อรันทดสอบเรียบร้อย คุณจะเห็น สถานะของ CodeLen ตรง 0/1 passing=> เปลี่ยนเป็น 1/1 passing นั่นคือเมธอด Retrieve มี Unit test ทั้งหมด 1 เมธอด ทดสอบไปแล้วทั้งหมด 1 เมธอด
  2. เมื่อคุณคลิกเมาส์ลงไป หน้าต่างแสดงสถานะการทดสอบแสดงขึ้นมา คุณจะเห็นว่าได้รันทดสอบผ่านไปเรียบร้อยแล้ว โดยที่คุณไม่ต้องไปหาจากหน้าต่างอื่น


รูปที่8: Automatically updated Unit Test status

ก่อนหน้าที่จะมี CodeLens
การที่คุณจะหาข้อมูลว่า เมธอดถูกทดสอบ หรือยัง
ผ่าน/ไม่ผ่านอย่างไร มีกี่คลาส กี่เมธอดที่อ้างอิง
เมธอดที่คุณกำลังแก้ไขอยู่ คุณจะต้องเปิดไปค้นหาในหน้าต่างอื่นๆ
คุณต้องสูญเสียเวลาบางส่วนในการค้นหา เพื่อดึงข้อมูลเหล่านั้นออกมา
วันนี้ CodeLens จะรายงานสภาพโค้ดของคุณ
ให้คุณทราบเพียงปลายนิ้วคลิก โดยที่คุณไม่ต้องสลับหน้าจอไปที่อื่น
คุณไม่ต้องเสียเวลาในการค้นหา คุณสามารถเห็นข้อมูลได้ทันที
ในหน้าต่างการเขียนโค้ด(Code editor) ตรงหน้าคุณ

จากนี้ไป จะไม่มีอะไรมาฉุดความคิดของคุณให้หลุดออกไป
จากสิ่งที่คุณกำลังคิด กำลังเขียนโค้ด
ความคิดของคุณจะเริ่มไหลเหมือนน้ำท่อประปาแตก
ไม่มีอะไรไปร้างความคิดของคุณได้ งานของคุณเริ่มเสร็จเร็วขึ้น
งานของคุณเริ่มมีคุณภาพมากขึ้น และคุณเริ่มสนุกกับการเขียนโค้ดมากขึ้น
และที่สำคัญคุณเริ่มได้กลิ่นของความสุขโชยออกมา ทุกขณะที่กดแป้นคีย์บอร์ด

ในระหว่างทางที่คุณกำลังเขียนโค้ด
ความสุขอยู่ตรงหน้าคุณตลอดเวลา
จงรู้สึกถึงมันให้ได้

แหล่งข้อมูลอ้างอิง:

 

ตอนที่1
ตอนที่2

โดย:
นุชิต อรรจนวจรรน์
GreatFriends Community Leader (nano)
WindowsITPro Columnist
Microsoft MVP

เขียนใน Uncategorized

โปรแกรมเมอร์ มีความสุข มีสมาธิ จาการเขียนโค้ด…(ตอนที่3)


ความสุข อยู่ที่ใหน ?
>อยู่ใน วัยเเด็ก ?
>อยู่ใน วัยรุ่น ?
>อยู่ใน วัยผู้ใหญ่ ?
>อยู่ใน วัยเกษียณ ?

ความสุข อยู่ในทุกๆ วัย
และความสุข อยู่รอบๆ ตัวคุณ 
อยู่ที่ว่า คุณจะรู้สึก ถึงมันมากแค่ใหน?

แต่ความรู้สึกของคนส่วนใหญ่
รู้สึกถึง ความหดหู่ ความทุกข์ เสียมากกว่า
จึงไม่เหลือพื้นที่ ให้ความรู้สึก ดีดี ได้ปรากฎ

ส่วนหนึ่งจากบทความ
โปรแกรมเมอร์ มีความสุข มีสมาธิ จาการเขียนโค้ด โปรดักทิวีตี้เพิ่มขึ้น (ตอนที่3)
ในนิตยสาร WindoedITPro ฉบับ(APR-MAY 2014)

เขียนใน Uncategorized

โปรแกรมเมอร์ มีความสุข เกิดสมาธิ จากการเขียนโค้ด โปรดักทิวีตี้เพิ่มขึ้น ตอนที่ 2


บทความจาก นิตยสาร WindowsITPro (December – January 2014)
ได้ขออนุญาตทางบก. เรียบร้อยแล้ว

เมื่อวันที่ 26 พฤศจิกายน 2556 ที่ผ่านมา
ณ ห้องบอลรูม โรงแรมแชงกรีลา บางรัก กรุงเทพฯ
ไมโครซอฟต์ได้จัดงาน
Microsoft TechDays Thailand 2013
ซึ่งเป็นงานสัมมนาที่ Microsoft จัดขึ้นทุกๆ ปี
ที่คนอยู่ในวงการเทคโนโลยี และนักพัฒนาให้ความสนใจ
ในงานดังกล่าว ได้เปิดตัวผลิตภัณฑ์ใหม่ของ Microsoft ดังนี้>

  • Windows Server 2012 R2,
  • System Center 2012 R2,
  • Windows 8.1 Enterprise,
  • Windows Azure และ
  • Visual Studio 2013


รูปที่1:
Microsoft TechDays Thailand 2013

ซึ่งผมได้รับเกียรติจาก ไมโครซอฟท์ ให้บรรยายหัวข้อ
What’s new for developers in Visual Studio 2013
ซึ่งเป็นการพูดถึงฟีเจอร์ใหม่ที่มาใน Visual Studio 2013
ที่เน้นเรื่อง Productivity ของนักพัฒนาเป็นหลัก
สำหรับท่านที่สนใจข้อมูล สามารถเข้าไปโหลดสไลด์
และสคริปในการบรรยายหัวข้อดังกล่าวได้จาก

Blog โปรแกรม ซอฟต์แวร์
ในบทความ: What’s new for developers in Visual Studio 2013
และในบทความตอนที่2 นี้
ผมจะพาคุณผู้อ่านไปรู้จักฟีเจอร์ Enhanced Scrollbar
ซึ่งเป็นอีกหนึ่งฟีเจอร์ที่ช่วยให้นักพัฒนา
สามารถเขียนโค้ดโปรแกรมได้อย่างราบรื่น มีความสุข
และ เมื่อคุณทำงานอย่างมีความสุข คุณจะเริ่มมีสมาธิ
เมื่อคุณมีสมาธิ จะเริ่มมีสิ่งดีๆ ตามมา

สิ่งดีๆ
นั่นคือ ความสุข สงบในใจของคุณ
> ความสุข ที่คุณ ไม่ต้องไปพึ่งใคร
> ความสุข ที่คุณ ไม่ต้องค้นหา
> ความสุข ที่คุณ สามารถสัมผัสได้ด้วยตัวเอง
> ความ สุข จาก การ ทำ งาน
ความสุข เกิดขึ้น ได้อย่างไรนั้น ลองติดตามดู

Enhanced Scrollbar
ความแตกต่างของฟีเจอร์แรก
และ มองเห็นได้อย่างชัดมากที่สุด ฟีเจอร์หนึ่ง
ใน Visual Studio 2013 คือ Enhanced Scrollbar
ถ้าไฟล์โค้ดของคุณมีขนาดใหญ่ ฟีเจอร์นี้
จะช่วยให้คุณ ดูโค้ดส่วนอื่นๆ ได้อย่างง่ายดาย

  • โดยที่คุณ ไม่ต้องออกจากหน้าต่าง Editor
  • โดยที่คุณ ไม่ต้องไล่ดูลงไปในเนื้อซอร์สโค้ด
  • ในขณะที่คุณกำลังเขียนโค้ด คุณสามารถเห็นสถานกาณ์ต่างๆ
    ในโค้ดของคุณผ่าน Scroll bar ทันที เช่น
    • เมื่อคุณมีการแก้ไขโค้ด:
      • คุณจะเห็นเครื่องหมาย สีเหลืองปรากฏ
      • เพื่อให้คุณทราบว่ามีการแก้ไข ได้เกิดขึ้น
    • หากมีข้อผิดพลาด:
      • คุณจะเห็นเครื่องหมาย สีแดงปรากฏ
      • คุณรู้ทันทีว่า ณ จุดใหนของซอร์สโค้ด มีปัญหา

จุดสี บน Scrollbar
บน Scrollbar จะมีการระบายจุดสี
เพื่อบ่งบอกถึงสถานการณ์ของโค้ดโปรแกรมของคุณ ดังนี้

  • สีเขียว: เป็นการบอกตำแหน่ง ของโค้ดที่เคยมีการแก้ไข
    และผ่านการ Build ไปเรียบร้อยแล้ว
    คุณสามารถรู้ได้ทันทีบน Scroll bar
  • สีเหลือง: เป็นการบอกตำแหน่ง โค้ดในการแก้ไขครั้งล่าสุด
    ในขณะปัจจุบันที่กำลังเขียนโค้ด ที่ยังไม่ผ่านการ Build
    คุณสามารถรู้ได้ทันทีบน Scroll bar
  • สีส้ม: เป็นการบอกคุณว่า ณ ตำแหน่งใหนของโค้ด
    ทีมี Message ที่คุณกำลังค้นหา
    โดย Message ดังกล่าวจะถูกไฮไลท์สีด้วย
    คุณสามารถรู้ได้ทันทีบน Scroll bar เช่น
    • ดังรูปที่2 ค้นหา Message “Page”
    • บน Editor จะไฮไลท์ โค้ดที่มีคำว่า Page
    • บน Scroll bar ระบายจุดสีส้ม ณ ตำแหน่งของโค้ดที่มีคำว่า Page อยู่
  • สีเทาเข้ม: เป็นการบอกคุณว่า ณ ตำแหน่งใหนของโค้ด
    ที่คุณวาง Bookmark ไว้บ้าง คุณสามารถรู้ได้ทันทีบน Scroll bar
  • สีแดง: เป็นการบอกคุณว่า ณ ตำแหน่งใหนของโค้ด
    ที่มี Error บ้าง คุณสามารถรู้ได้ทันทีบน Scroll bar
  • เส้นสีฟ้า: เป็นการบอกคุณว่า ตอนนี้ ตำแหน่ง Cursor อยู่ที่ใหน
    คุณสามารถรู้ได้ทันทีบน Scroll bar
  • สีน้ำตาล: เป็นการบอกคุณว่า ณ ตำแหน่งใหนของโค้ด
    ที่คุณได้วาง Breakpoint บ้าง คุณสามารถรู้ได้ทันทีบน Scroll bar เช่นกัน
    โดยจุดสีต่างๆ แสดงดังรูปที่2


รูปที่2:
จุดสี บน Scrollbar

จากรูปที่2
กล่าวได้ว่า Scroll bar จะเป็นตัวรายงานสถานะของซอร์สโค้ดบน Editor
ให้คุณทราบตลอดเวลา ณ ขณะที่คุณกำลังเขียนโค้ด

  • โค้ดตรงจุดใหน ที่เคยมีการแก้ไข และผ่านการ Build ไปเรียบร้อยแล้ว
  • โค้ดจุดตรงใหน ที่เคยมีการแก้ไข และยังไม่ผ่านการ Build
  • คุณวาง Bookmark, วาง Breakpoint ไว้ ณ จุดใหนของซอร์สโค้ดบ้าง
  • ซอร์สโค้ดของคุณ จุดใหนที่มี Error

คุณสามารถเห็นได้ทันที จาก Scroll bar
โดยคุณไม่ต้องเสียเวลาในการไล่ดูลงไปในเนื้อซอร์สโค้ด
ซึ่งช่วยให้คุณประหยัดเวลาได้มากในการเขียนโค้ด
จะไม่มีอะไรไปรบกวนความคิดคุณ
ให้หลุดหายไปจาก Flow ที่คุณกำลังคิด
ที่คุณกำลังเขียนโปรแกรม ความคิด และความอ่านของคุณ
จะไหลลื่นเป็นน้ำท่อประปาแตก ไม่มีอะไร จะไปฉุดควาคิดคุณได้
งานคุณจะเสร็จเร็วขึ้น นั่นคือ Productivity ของคุณจะสูงขึ้น

Scroll Bar Options
คุณสามารถเข้าไปปรับ Scroll Bar Options
ให้แสดงตามความชอบใจ ซึ่งสามารถเข้าได้ 3 ทางคือ

  1. คลิกขวาบน Scroll Bar
  2. ค้นหาในช่อง Quick Launch (Ctrl+Q)
  3. เข้าทางเมนู TOOLS=> Options…

1. คลิกขวาบน Scroll Bar
คุณสามารถปรับ Option ของ Scrollbar ได้โดย=>
คลิกขวาบน Scroll bar เลือก Scroll Bar Options… ดังรูปที่3


รูปที่3:
ทางเข้า Scroll Bar Options (1)

2. ค้นหาในช่อง Quick Launch (Ctrl+Q)
ค้นหาในช่อง Quick Launch
ให้พิมพ์ “Scroll bar” =>
คลิก Text Editor =>
All Languages =>
Scroll Bars ดังรูปที่4


รูปที่4:
ทางเข้า Scroll Bar Options (2)

3. เข้าทางเมนู TOOLS=> Options…
ในหน้าต่าง Option บนช่อง Search Option (Ctrl+E)
ให้พิมพ์ Scroll =>
แล้วคลิก Scroll Bars ดังรูปที่ 5

รูปที่5: ทางเข้า Scroll Bar Options (3)

จากทางเข้า 3 ทางดังกล่าวจะนำคุณเข้าสู่ หน้าต่าง Scroll Bar Options ดังรูปที่6

รูปที่6:
Scroll Bar Options

จากรูปที่6:
กล่าวได้ว่า

  • Show horizontal scroll bar: แสดง scroll bar ในแนวนอน
  • Show vertical scroll bar: แสดง scroll bar ในแนวตั้ง
  • ในกล่อง Display
    • Show annotations over vertical scroll bar: แสดงคำอธิบายประกอบบน scroll bar
    • Show changes: ระบายจุดสี เมื่อมีการเปลี่ยนแปลงโค้ด
    • Show marks: ระบายจุดสี เมื่อมีการ marks ในโค้ด เช่น Bookmark, Breakpoint
    • Show errors: ระบายจุดสี เมื่อมีการ Error
    • Show caret position: แสดงเส้นตำแหน่ง cursor
  • ในกล่อง Behavior
    • Use bar mode for vertical scroll bar: บาร์โหมด
    • Use map mode for vertical scroll bar: แมปโหมด
    • Show Preview Toltip: แสดงตัวอย่าง Toltip
      • Source overview: แสดงขนาดพื้นที่ของ Map mode

Scroll bar mode
Scroll bar คุณสามารถดูได้ 2 โหมด คือ

  1. Bar mode: แสดงเฉพาะแท่ง Bar และจุดสีต่างๆ
  2. Map mode: แท่ง Bar จะขยายกว้างขึ้น แล้วซอร์สโค้ดของคุณอยู่ภายใน เหมือนคุณมองจากที่สูง เหมือนคุณดูแผนที่ใน Google พร้อมกับแสดงจุดสีต่างๆ

1. Bar mode
ในการเปลี่ยน Bar mode คุณสามารถทำได้ง่ายๆ ดังนี้=>
คลิกขวาบน Scroll Bar เลือก Scroll Bar Options…=>
ในกล่อง Behavior=>
เลือก Use bar mode for vertical scroll bar
ซึ่งเป็นดีฟอลต์ที่ Visual Studio 2013
เลือกไว้อยู่แล้ว ดังรูปที่7
คุณจะเห็นเฉพาะแท่ง bar และจุดสีต่างๆบนแท่ง bar เท่านั้น
รูปที่7 Bar mode

2. Map mode
เปลี่ยน Map mode ทำได้โดย=>
คลิกขวาบน Scroll Bar เลือก Scroll Bar Options…=>
ในกล่อง Behavior=>
เลือก Use map mode for vertical scroll bar
คุณจะเห็น Scroll bar จากเป็นเพียงแท่ง bar จะขยายกว้างขึ้น
เปลี่ยนเป็นพื้นที่แสดงซอร์สโค้ดเล็กๆ แทน
พร้อมจุดสีต่างๆ เหมือนคุณกำลังดูแผนที่บน Google ดังรูป
รูปที่8 Map mode

ใน Map mode ถ้าคุณติ๊กถูก (CheckBox)
Show Preview Tooltip ตอนคุณนำ Cursor Mouse ไปบน Map bar
มันจะแสดงหน้าต่างขึ้นมา โดยจะขยายซอร์สโค้ดในส่วนที่ Cursor Mouse ชี้อยู่
เพื่อให้คุณทราบว่า ณ ตำแหน่งนั้นโค้ดคืออะไร?
(เหมือนคุณซูมกล้องส่องทางไกล ไปในจุดนั้น มันจะแสดงรายละเอียดให้คุณเห็นมากขึ้น)

ดังรูปที่9


รูปที่9
Preview Toltip

ใน Map mode นั้นคุณสามารถขยายพื้นที่ Map
ตามความชอบ ได้โดยการปรับแต่งที่ Source overview:
โดยเลือกขนาดจาก DropDownList
โดยดีฟอลต์ Visual Studio 2013
จะเลือก Source overview: เป็น Medium มาให้ ดังรูปที่10
รูปที่10 Source overview

ฟีเจอร์ Enhanced scrollbar
จะทำให้คุณมีตา เหมือนตานกอินทรีย์
ซึ่งสายตาอันเฉียบคมของนกอินทรีนั้น
สามารถมองไปได้ไกล เหมือนกล้องส่องทางไกล
และแม้จะบินอยู่บนที่สูง ก็จะมองเห็นเหยื่อตัวเล็กๆ
บนพื้นล่างได้อย่างง่ายดาย
และบินโฉบลงมาจับกินได้อย่างรวดเร็ว ทันที

คุณจะมองเห็นโค้ด
ของคุณได้อย่างง่ายดาย ในแบบนั้นเลย
แม้ไฟล์โค้ดของคุณจะมีขนาดใหญ่มาก
หลายหมื่น หลายแสนบรรทัดก็ตาม
เมื่อโค้ดของคุณมีความผิดพลาด ณ จุดใดใน Editor
คุณสามารถเห็นสถานการณ์นั้นบน scrollbar ทันที
คุณเพียง ดับเบิ้ลคลิกบนจุดสีนั้น
มันจะนำคุณกระโดดไปยัง จุดโค้ดเจ้าปัญหาทันที
โดยที่คุณไม่ต้องสลับหน้าต่าง ไปที่อื่น
โดยที่คุณไม่ต้องค้นหารายละเอียด
ลงไปในเนื้อซอร์สโค้ด แต่อย่างใด

Enhanced scrollbar
ช่วยให้คุณประหยัดเวลา
ช่วยให้คุณเขียนโค้ดได้เร็วขึ้น ช่วย
ให้คุณเขียนโค้ดได้อย่างราบรื่น
> เมื่อคุณเขียนโค้ดได้อย่างราบรื่น
> คุณจะเริ่มมีความสุข ในการเขียนโปรแกรม
> เมื่อคุณทำงานอย่างมีความสุข
> สมาธิคุณจะเริ่มเกิดขึ้น
> เมื่อสมาธิคุณเกิด
> Productivity ของคุณ ก็จะเพิ่มขึ้น

ความสุขนั้น
อยู่ตรงหน้าคุณ ตลอดเวลา
เหมือน อากาศธาตุ ที่อยู่รายรอบตัวคุณ

จงหายใจเข้า เพื่อ
นำความสุข ความสว่าง
เข้าสู่ตัวคุณ

และหายใจออก เพื่อ
คลาย ความทุกข์ ความมืดดำ
ออกไปจากตัวคุณ

จงใช้แสงสว่าง
นำทางชีวิตของคุณ ไปสู่เป้าหมาย
แสงสว่างเท่านั้น
ที่จะทำให้คุณเห็นความสวยงาม สองข้างทาง

จงเขียนโค้ดของคุณ อย่างมีความสุข
เมื่อคุณมีความสุข
คุณจะทำงาน โดยไม่ต้องทำงาน

แหล่งข้อมูลอ้างอิง:

ตอนที่ 1

เขียนใน Visual Studio

โปรแกรมเมอร์ มีความสุข เกิดสมาธิ จากการเขียนโค้ด โปรดักทิวีตี้เพิ่มขึ้น ตอนที่ 1


บทความจาก นิตยสาร WindowsITPro (November – December 2013)
ได้ขออนุญาตทางบก. เรียบร้อยแล้ว

เมื่อวันที่ 13 พฤศจิกายน 2556
ไมโครซอฟท์
ได้เปิดตัว Visual Studio 2013 และ .NET 4.5.1
ไม่ทราบท่านผู้อ่าน ได้ติดตามบ้างใหม
ปีนี้ ถือเป็นปีที่ยิ่งใหญ่ ของ Visual Studio
โดยไมโครซอฟต์ได้ส่งมอบฟีเจอร์ที่ดีเยี่ยม

เอดิเตอร์โปรดักทิวีตี้
สำหรับนักพัฒนา ซึ่งใน Visual Studio 2013 นั้น
ได้เน้นเรื่อง เอดิเตอร์โปรดักทิวีตี้เป็นหลัก
ซึ่งไมโครซอฟต์ ได้รับข้อเสนอแนะ (Feedback)
จากนักพัฒนาทั่วโลก และได้นำ ข้อเสนอแนะจากของฟีเจอร์เหล่านั้น
ผนวกเข้าไปใน Visual Studio 2013
ในบทความนี้ผู้เขียนจะยกฟีเจอร์หนึ่งมาพูดถึง
ซึ่งผู้เขียนชื่นชอบเป็นพิเศษ และคิดว่า สำหรับนักพัฒนาแล้วฟีเจอร์นี้
จะช่วยให้การเขียนโค้ด เป็นเรื่องที่สนุกมากยิ่งขึ้น

Go to Definition

รูปที่ 1: เมนู
Go to Definition

ในอดีตเมื่อคุณเขียนโค้ด
และต้องการดูรายละเอียดของบางอ็อบเจ็กต์ หรือบางเมธอด
คุณจะใช้วิธี คลิกขวาลงบนอ็อบเจ็กต์ดังกล่าว
แล้วเลือกเมนู Go to Definition (ดังรูป1)
แล้วมันจะพาคุณกระโดดไปในบรรทัดอื่น
หรือไม่ก็ไปเปิดโค้ดในหน้าต่างอื่น (ดังรูปที่2)
ซึ่งเมื่อคุณดูรายละเอียดเสร็จเรียบร้อย
และได้แนวคิดแล้ว คุณจะกลับไปเขียนโค้ดต่อ
เมื่อคุณจะกลับไปที่เดิม คุณจะเสียเวลาในการค้นหาว่า
เมื่อตะกี้ คุณอยู่ ณ ตำแหน่งใหนของซอร์สโค้ด
พอคุณจะกลับไปยังตำแหน่งเดิม เพื่อที่จะเขียนโค้ดต่อ

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


รูปที่ 2:
Go to Definition เปิดหน้าต่างใหม่

เมื่อคุณลืม และมึน
คุณจะลุกจากโต๊ะ ไปหาทานกาแฟ, คุยกับเพื่อน
กลับมาที่โต๊ะ ยังนึกไม่ออก และมึนกว่าเดิม
แล้วคุณเริ่มเปิด

Facebook Update Status
สักหน่อย แล้วถ่ายรูป แก้วกาแฟ เน้นโลโก้ สตาร์…บั๊ก แล้วแชร์….
จากนั้นคุณจะรอเพื่อนมา กด Like…
ขณะเดียวกันคุณก็หากด Like status ของเพื่อนๆ
มารู้สึกตัวอีกทีถึงเวลาเลิกงาน
เตรียมตัวเก็บกระเป๋ากลับบ้าน หมดไปครึ่งวัน
โค้ดดิ่งเท่าเดิม กับเมื่อเช้า
เพียงเพราะความคิดคุณไม่โฟลว์
ทำให้คุณลืม มัวแต่หาว่า เอ…เมื่องี้
เรากำลังเขียนตรงส่วนใหน? …

Peek Definition

รูปที่ 3: เมนู
Peek Definition


รูปที่ 4:
Peek Window

การที่ความคิดของคุณไม่โฟลว์ สิ่งนี้บอกอะไรกับเรา
สมาธิ!
สมาธินั้นสำคัญมาก
ไมโครซอฟท์ ได้เพิ่มฟีเจอร์
Peek นี้เข้ามา
โดยทำให้คุณสามารถ ดูรายละเอียดของโค้ดที่เรียกใช้

  • ณ จุดที่มีการเรียกใช้
  • ณ ตำแหน่งที่เคอร์อยู่
  • ณ ขณะในปัจจุบัน ที่คุณกำลังเขียนโค้ด โดยที่คุณไม่ต้องสลับหน้าต่าง ไปที่อื่น

ณ ขณะปัจจุบัน…
ณ ขณะปัจจุบัน นี้สำคัญมาก
เดล คาร์เนกี้ กล่าวไว้ในหนังสือว่า

“จงมีชีวิตอยู่ ในห้อง ที่มีแต่วันนี้”

อดีตผ่านมาแล้ว
ส่วนอนาคตเป็นเพียงสิ่งซึ่ง ยังไม่ปรากฏรูปร่าง
และยาวนานเท่าไหร่ ไม่มีใครบอกได้

ชีวิตจริงของคุณ
มีอยู่ ณ ขณะ ปัจจุบัน ที่คุณกำลังเขียนโค้ดนี้ เท่านั้น

ทุกครั้งที่เข็มวินาทีกระดิก
เหตุการณ์เหล่านั้นจะ กลายเป็นอดีตไปทันที

ถ้าคุณลองสังเกตุ ย้อนกลับมาดูที่ตัวเองดีดี
สิ่งที่ทำให้คุณกังวลใจ ไม่สบายใจ
เครียดจนเขียนโค้ดไม่ออก
เป็นเพราะคุณใช้หน่วยความจำ(Memory) ในหัว
ไปคิดเรื่องในอดีต (เมื่อเช้าตื่นสาย คนที่บ้าน บ่นแต่เช้า ตอนนี้ยังรู้สึกอยู่…)
หรือไม่ก็เป็นเรื่องที่ยังไม่เกิดในอนาคต
(โอ้…งานโค้ดดิ้งกองโตเลย จะส่งลูกค้าพรุ่งนี้ จะทันใหมนี่…จะโดนด่า โดนปรับใหม?)

โดยคุณนำความกังวลใจเหล่านั้นมาคิดในปัจจุบัน
จนหน่วยความจำในหัวของคุณเหลือน้อย
หรือแทบไม่เหลือ
สำหรับการประมวลผลข้อมูลตรงหน้าคุณ
ในขณะที่คุณกำลังเขียนโค้ดอยู่
ทำให้คุณแก้ไขปัญหาได้ล่าช้า หรือไม่สามารถหาทางออกของปัญหาได้
สิ่งที่จะทำให้ ชีวิตของคุณมีความราบรื่นได้จริงๆ คือ

ชั่วขณะ ปัจจุบัน
นี้เท่านั้น

ณ ขณะปัจจุบัน
ที่คุณกำลังเขียนโค้ด
ถ้าคุณไม่เสียเวลา
ในการสลับหน้าต่างไปมา
ทำให้คุณเกิดความว้าวุ่นใจ
เมื่อไม่มีเหตุปัจจัย ในการดึงความคิดของคุณให้หลุด
ไปจากสิ่งที่คุณกำลังโค้ดดิ้ง

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

  • คือความราบรื่น
  • คือความสงบสุข สบาย ในใจของคุณ
  • คือหน่วยความจำที่มากมายในหัวคุณ ที่ถูกคืนสู่ความว่าง พร้อมสำหรับ การนำไปใช้งานทันที

การใช้งาน Peek นั้น
เมื่อคุณต้องการดูรายละเอียดของบางอ็อบเจ็กต์
หรือบางเมธอดใดๆ คุณเพียงคลิกขวาบนอ็อบเจ็กนั้นๆ
แล้วเลือกเมนู Peek Definition (ดังรูปที่3)
หรือวางเคอร์เซอร์ บนอ็อบเจ็กต์ดังกล่าว
แล้วกดปุ่มชอร์ตคัต(shortcut) Alt+F12
หน้าต่าง Peek จะเปิดออกมาทันที ณ …

  • ณ จุดที่มีการเรียกใช้
  • ณ ตำแหน่งที่เคอร์อยู่
  • ณ ขณะในปัจจุบัน ที่คุณกำลังเขียนโค้ด โดยที่คุณไม่ต้องสลับหน้าต่าง ไปที่อื่น ดังรูปที่4

ปุ่มคีย์บอร์ดชอร์ตคัต สำหรับ Peek Definition ดังตารางที่ 1:

ตารางที่ 1: Keyboard shortcuts for Peek Definition

Functionality

Keyboard shortcut

Open the definition window

Alt+F12

Close the definition window

Esc

Promote the definition window to a regular document tab

Shift+Alt+Home

Navigate between definition windows

Ctrl+Alt+- and Ctrl+Alt+=

Navigate between multiple results

F8 and Shift+F8

Toggle between the code editor window and the definition window

Shift+Esc

 


รูปที่ 5: Stack Peek Window

และนอกจากนั้น
เมื่อคุณต้องการดู อ็อบเจ็กต์อื่นๆ ในหน้าต่าง Peek
คุณสามารถคลิกขวาเลือกเมนู Peek Definition
แล้วคุณสามารถดูลึกเข้าไปในหน้าต่าง Peek
ซึ่งจะเก็บหน้าต่าง Peek เป็นสแต็ค (Stack)
ไว้ดังรูปที่ 5 โดยคุณสามารถคลิกเมาส์สลับหน้าต่าง Peek อื่นๆ ได้ทันที
และคุณยังสามารถแก้ไขโค้ดในหน้าต่าง Peek ได้ทันที อีกด้วย

เมื่อคุณดูรายละเอียดของอ็อบเจ็กต์
เป็นที่เรียบร้อย คุณได้แนวคิด และรู้ว่า
อ็อบเจ็กต์ดังกล่าวทำงานอย่างไร รับส่งพารามิเตอร์อย่างไร
คุณเพียงปิดหน้าต่าง Peek ดังกล่าวทิ้งไป
จะเห็นว่า คุณไม่ได้สลับหน้าต่างไปที่อื่น

คุณสามารถเขียนโค้ดต่อได้ทันที
ความคิดของคุณจะใหลต่อทันที จากจุดที่คุณค้างไว้เมื่อครู่

รูปที่ 6 เขียนโค้ดต่อได้ทันที จากจุดที่ค้างไว้เมื่อครู่

ความสุขนั้นมีอยู่ตลอดเวลา
ตรงหน้าคุณ รอบๆ ตัวคุณ
อยู่ที่ว่าคุณจะเหลือหน่วยความจำในหัว
เพียงพอที่จะรู้สึก ถึงมันได้มากแค่ใหน


ด้วย Visual Studio 2013 สามารถช่วยคุณได้
ช่วยให้คุณมีความสุข ในการเขียนโค้ดมากขึ้น

เมื่อคุณมีความสุข
สมาธิของคุณก็จะเกิด

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

เมื่อนั้น หน่วยความจำในหัวของคุณจะเหลือพื้นที่มากพอ
ในการประมวลผลกับปัญหาตรงหน้า
ความคิดของคุณจะใหลเหมือนท่อประปาแตก
และจะทำให้คุณแก้ไขปัญหาได้อย่างรวดเร็ว
เมื่อนั้นโปรดักทิวีตี้ของคุณจะเพิ่มขึ้นหลายเท่าตัว

โปรแกรมเมอร์
สามารถมีความสุข และมีสมาธิ ได้จากการเขียนโค้ด
จงเขียนโค้ด ของคุณอย่างมีความสุข
เมื่อคุณทำงานอย่างมีความสุข
คุณจะทำงานโดยไม่ต้องทำงาน

แหล่งข้อมูลอ้างอิง:

บทความจาก นิตยสาร WindowsITPro (November – December 2013)

โดย:
Nano,2014-05-02

เขียนใน Uncategorized

Import Export Excel using EPPlus


วันเสาร์ที่ 26 เมษายน 2014
Greatfriends ร่วมกับ มหาวิทยาลัยหอการค้า จัดงาน
งานสัมมนา DevRock #00 Hello MVC Rocks .NET Community
สำหรับ ASP.NET WebDeveloper

ผมได้นำ Tip เล็กๆ เกี่ยวกับการทำงาน กับ Excel ด้วย EPPlus
ไปแชร์ ให้ผู้ฟังทุกท่าน ในหัวข้อ Import Export Excel using EPPlus

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


อีพีพลัส (EPPlus) คืออะไร?



ตัวอย่าง:
จะแสดงการ Import และ Export Excel ด้วย EPPlus

Import Customer

Export Category Sales for 1997

ออกแบบหน้าจอ

เขียนโค้ด

เขียนโค้ดบนปุ่ม Load Excel to GridView
btLoadExcel_Click

 

เขียนโค้ดบนปุ่ม Import Customer
btImport_Click

 

เขียนโค้ดบนปุ่ม Export Excel Chart
btExporrt_Click

ทดสอบโปรแกรม
Import Excel
Load Excel to GridView คลิกปุ่ม เลือกไฟล์ =>

เลือกไฟล์ => กด Open

คลิกปุ่ม Load Excel to GridView

ข้อมูล Excel จะไปแสดงบนหน้าจอ
ให้ User ตรวจสอบ อีกครั้ง

เมื่อข้อมูลถูกต้องแล้ว
กดปุ่ม Import Customer

Import เรียบร้อย

ตรวจสอบใน
ฐานข้อมูล => ข้อมูลเข้าเรียบร้อย

Export Excel

กดปุ่ม Export Excel Chart

เลือกพาธ
กดปุ่ม Save

คลิกเปิดไฟล์

รายงาน Category Sales for 1997

การทำงานกับ ข้อมูล Excel ผ่านคอมโพเนนต์ EPPlus มีข้อดีคือ

  • ไม่ต้องติดตั้ง ไลบรารี่ของ Excel ไว้บนเว็บเซอร์ฟเวอร์
  • ไม่ต้อง Upload ไฟล์ excel ไปวางบนฮาร์ดดิสก์ของเว็บเซอร์ฟเวอร์
  • สามารถใช้ LINQ ในการเชื่อมต่อกับฐานข้อมูล ซึ่งทำให้การเขียนโค้ดใช้เวลาน้อนลง โค้ดของเราสั้นลง

ดาวน์โหลด ตัวอย่างโปรเจ็กต์

แหล่งข้อมูลอ้างอิง

โดย:
JANAWAT, 2014-04-26


 

เขียนใน ASP.NET
In Archive
ติดตาม

Get every new post delivered to your Inbox.

Join 172 other followers