การจัดการไฟล์บน LightSwitch ตอนที่ 1: การอัปโหลดไฟล์


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

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

คุณสามารถใช้หน้าจอออกแบบตาราง (LightSwitch table designer)
ในการออกแบบตารางข้อมูล โดยกำหนดคุณสมบัติของฟิลด์เก็บข้อมูลเป็นชนิด
ไบนารี่(binary) เพื่อเก็บข้อมูลไฟล์

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

  • ตอนที่ 1: การอัปโหลดไฟล์
  • ตอนที่ 2: การดาวน์โหลด และเปิดไฟล์
  • ตอนที่ 3: การดีฟอลต์หน้าจอ เพิ่มแก้ไขไฟล์เอกสาร

 

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

 

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

 

โดยขั้นตอนการพัฒนาโปรแกรม มีดังนี้

 

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

  • ขั้นตอนที่ 1 การสร้างโปรเจ็กต์
  • ขั้นตอนที่ 2 การสร้างฐานข้อมูล
  • ขั้นตอนที่ 3 การสร้างหน้าจอ
  • ขั้นตอนที่ 4 เพิ่มฟังก์ชันการอัปโหลดไฟล์ (ปุ่มอัปโหลด)
  • ขั้นตอนที่ 5 เขียนโค้ดการอัปโหลด
  • ขั้นตอนที่ 6 รันโปรแกรม
  • ขั้นตอนที่ 7 เปิดฐานข้อมูล LightSwitch ใน Visual Studio 2010

 

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

1. เปิดโปรแกรม Microsoft Visual Studio 2010 (VS2010)

2. ไปที่เมนู New Project… ในหน้า Start Page หรือคลิกเมนู File =>
คลิกเมนู New =>
คลิกเมนู Project…

3. ในหน้าต่าง New Project คลิก LightSwitch =>
เลือก LightSwitch Application(Visual C#)

3.1 ในช่อง Name: ระบุชื่อโปเจ็กต์
ในบทความนี้ระบุชื่อเป็น FileManagOnLS

3.2 ช่อง Location: ระบุพาธที่เก็บโปรเจ็กต์
ในบทความนี้ ระบุเป็น E:\Article\WindowsITPro\LightSwitch\2012-08-21\Solution

3.3 ช่อง Solution name: ระบุชื่อโซลูชั่น (ปล่อยตามดีฟอลต์ ซึ่งเป็นชื่อเดียวกับชื่อโปรเจ็กต์)
ในบทความนี้คือ FileManagOnLS

4. จากนั้น กด OK

5. เมื่อ VS2010 สร้างโซลูชั่น FileManagOnLS
เป็นที่เรียบร้อย จะเข้าสู่หน้าจอ Start with Data
ดังรูปที่ 1

 


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

 

 

ขั้นตอนที่ 2 การสร้างฐานข้อมูล

6. จากรูปที่ 1 ในข้อ 5 ให้คุณสร้างตารางใหม่โดยการคลิก Create new table

7. คุณจะเข้าสู่หน้าจอ LightSwitch table designer หรือ
LightSwitch entity designer ให้ทำการ เปลี่ยนชื่อตารางเป็น Document
และทำการออกแบบฟิลด์ต่างๆ ในการจัดเก็บข้อมูลไฟล์เอกสาร
ดังรูปที่ 2

 


รูปที่ 2 การสร้างฐานข้อมูล Document

 

 

ขั้นตอนที่ 3 การสร้างหน้าจอ

8. เมื่อสร้างตารางจัดเก็บข้อมูลเรียบร้อย
ให้คลิกปุ่ม Screen (รูปที่ 3 หมายเลข 1) หรือ
คลิกขวาบนโฟลเดอร์ Screens =>
เลือกเมนู Add Screen…
(รูปที่ 3 หมายเลข 2)

 


รูปที่ 3 เมนูการสร้างหน้าจอ

 

9. ในหน้าต่าง Add New Screen =>
เลือกเทมเพลตหน้าจอเป็น New Data Screen
ซึ่งเป็นเทมเพลต หน้าจอในการเพิ่มข้อมูล

10. ในคอนโทรลดรอปดาวน์ ให้เลือก Screen Data
เป็น Document(อ็อบเจ็กต์ ตาราง ที่คุณสร้างก่อนหน้านี้)

โดยช่อง Screen Name: ให้ระบุชื่อหน้าจอ
ในบทความนี้ปล่อยตามดีฟอลต์ เป็น CreateNewDocument และ
ติ๊ก Document Details เพื่อแสดงรายละเอียด จากนั้นคลิก OK
ดังรูปที่ 4 (หมายเลข 1)

11. คุณผู้อ่านจะเข้าสู่หน้าจอ Screen Designer
ดังรูปที่ 4 (หมายเลข 2)

 

รูปที่ 4 การสร้างหน้าจอเทมเพลต New Data Screen

 

 

ขั้นตอนที่ 4 เพิ่มฟังก์ชันการอัปโหลดไฟล์ (ปุ่มอัปโหลด)

12. ในหน้าต่างการออกแบบ (Screen Designer)
คลิกขวาบนฟิลด์ FileData เลือกเมนู Add Button
(รูปที่ 5 หมายเลข 1)

13. ในหน้าต่าง Add Button
เลือก New Method โดยระบุชื่อเมธอดในช่อง Name:
เป็น UploadFileDocToDB จากนั้นคลิก OK
(รูปที่ 5 หมายเลข 2)

14. คุณจะได้ปุ่ม (Button) Upload File Doc To DB
(รูปที่ 5 หมายเลข 3)

15. จากนั้นเข้าไปเขียนโค้ดโปรแกรมบนปุ่ม Upload File Doc To DB
โดยคลิกขวาบนปุ่ม เลือกเมนู Edit Execute Code
(รูปที่ 5 หมายเลข 4)

 

 

รูปที่ 5 การเพิ่มฟังก์ชันการอัปโหลดไฟล์

 

 

ขั้นตอนที่ 5 เขียนโค้ดการอัปโหลด

16. จากข้อ 15
ในรูปที่ 5 หมายเลข 4
เมื่อคุณคลิกเมนู Edit Execute Code
ณจะเข้าสู่หน้าต่างการเขียนโค้ด ในเมธอด UploadFileDocToDB_Execute()
ให้เขียนดังนี้


 

ขั้นตอนที่ 6 รันโปรแกรม

17. เมื่อเขียนโค้ดโปรแรกมเป็นที่เรียบร้อย
ให้ทำการกดปุ่ม F5 เพื่อรันโปรแกรมทันที
คุณจะได้หน้าจอโปรแกรม
ดังรูปที่ 6

 


รูปที่ 6 โปรแกรมอัปโหลดไฟล์

 

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

 


รูปที่ 7 การปรับแต่งหน้าจอ ในโหมดรันไทม์

 

 

19. จากนั้นคุณจะเข้าสู่หน้าจอ Customization Mode
ให้ทำตามขั้นตอนดังนี้

19.1 คลิกบนเลย์เอาต์หลัก(Row Layout)
(หมายเลข 1)

19.2 จากนั้นในหน้าต่าง Properties ตรง Sizing
กำหนด พรอเพอร์ตี้ Horizontal Alignment เลือก Left
(หมายเลข 2)

19.3 คุณจะเห็นผลการปรับแต่งทันที
(หมายเลข 3)

19.4 ถ้าคุณพึงพอใจผลการปรับแต่งแล้ว
ให้ทำการบันทึก โดยการกดปุ่ม Save
(หมายเลข 4)

19.5 ผลการปรับแต่งจะส่งผลกลับมา
ที่หน้าจอปัจจุบันทันที รวมถึงบันทึกไปที่ VS2010 ด้วย
(หมายเลข 5)
ดังรูปที่ 8

 


รูปที่ 8 Screen Customization Mode

 

 

20. เมื่อปรับแต่งหน้าจอ เป็นที่เรียบร้อย ทดสอบอัปโหลดไฟล์เอกสารทันที
โดยคลิกเมาส์ลงบนปุ่ม Upload file Doc To DB
คุณจะเห็นหน้าต่าง Open เปิดขึ้นมา ทำการเบราว์หา และ
เลือกไฟล์เอกสารที่ต้องการ จากนั้นคลิก Open
รายละเอียดไฟล์จะมาปรากฏบนหน้าจอ

21. ทำการบันทึก โดยกดปุ่ม Save บนเมนูบาร์
ข้อมูลไฟล์จะถูกบันทึกลงฐานข้อมูล
ดังรูปที่ 9

 


รูปที่ 9 อัปโหลดไฟล์เข้าฐานข้อมูล

 

 

ขั้นตอนที่ 7 เปิดฐานข้อมูล LightSwitch ใน Visual Studio 2010

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

22.1 เปิดหน้าต่าง Server Explorer จากนั้นทำการสร้างคอนเนคชั่น
โดยคลิกขวา Data Connection
(หมายเลข 1)

22.2 ในหน้าต่าง Add Connection ทำการเปลี่ยน Data Source
โดยการคลิก ปุ่ม Change…

(หมายเลข 2)

22.3 คุณจะเข้าสู่หน้าต่าง Change Data Source
ทำการเปลี่ยน Data Source เป็น Microsoft SQL Server Data file แล้วคลิก OK
(หมายเลข 3)

22.4 คุณจะเข้าสู่หน้าต่าง Add Connection ทำการกดปุ่ม Browse…

(หมายเลข 4)

22.5 เพื่อเบราว์ไปหาไฟล์ฐานข้อมูลของ LightSwitch
โดยพาธของฐานข้อมูลอยู่ที่ …\[ชื่อโปรเจ็กต์]\Bin\Data ซึ่งในบทความนี้คือพาธ
E:\Article\WindowsITPro\LightSwitch\2012-08-21\Solution\FileManagOnLS\FileManagOnLS\Bin\Data
(หมายเลข 5)

22.6 คลิกเลือกไฟล์ฐานข้อมูลชื่อ ApplicationDatabase.mdf
(หมายเลข 6)

22.7 จากนั้นคลิกปุ่ม Open
(หมายเลข 7)

22.8 คุณจะกลับมาสู่หน้าต่าง Add Connection อีกครั้ง
ให้คลิกปุ่ม OK เพื่อสิ้นสุดขั้นตอนการติดต่อฐานข้อมูล
(หมายเลข 8) ดังรูปที่ 10

 


รูปที่ 10 การสร้างคอนเนคชั่นติดต่อฐานข้อมูล LightSwitch

 

 

23. จากข้อ 22
คุณจะได้ คอนเนคชั่นชื่อ ApplicationDatabase.mdf
ซึ่งเป็นชื่อเดียวกับฐานข้อมูลของ LightSwitch
จากนั้นคลิกขยาย โฟลเดอร์เข้าไปที่ โฟเดอร์ Table
แล้วคลิกเมาส์ขวา ในตาราง Documents ซึ่งเป็นตารางที่เราสร้างขึ้นเอง (เมื่อสักครู่)
แล้วคลิกเมนู Show Table Data เพื่อเปิดดูข้อมูล
คุณจะเห็นเร็กคอร์ดข้อมูล ที่อัปโหลดไปเมื่อครู่ ก่อนหน้านี้
ดังรูปที่ 11

 


รูปที่ 11 Show Table Data

 

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

 

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

  • Time Leung & Yann Duran, Pro Visual Studio LightSwitch 2011 Development, Apress

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

ขอบคุณ บทความจาก นิตยสาร WindowsITPro (ฉบับ October – November 2012)

โดย:
Mr.Nano

  • บล็อก โปรแกรม ซอฟต์แวร์http://bit.ly/JANAWAT
  • บล็อก โปรแกรม จิต ฝึกความคิด สร้างความสุข: http://bit.ly/jNuchit
เกี่ยวกับ

Nuchit Atjanawat is a Microsoft MVP, GreatFriends Community Leader, WindowsITPro Columnist(Mr.Nano), Silverlight Business Application Instructor, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession. He has a very good skill over Silverlight, LightSwitch, C#, XAML & Blend. He shares his technical findings, tutorials in his technical blog. Follow his Blog and Facebook page to be updated on latest articles. - Technical Blog: https://janawat.wordpress.com - WindowsITPro Columnist(Mr.Nano): http://windowsitpro.net - The GreatFriends.Biz Community Discussion Board (nano): http://greatfriends.biz - witter: https://twitter.com/janawat - Facebook Page: https://www.facebook.com/nuchit - Instructor: http://bit.ly/GF250-01, http://bit.ly/GF150-02

เขียนใน LightSwitch

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

In Archive
%d bloggers like this: