Setup Project in Visual Studio C# การติดตั้งแบบ Setup Project

1. เอกสารประกอบการเรียนการสอนเทคโนโลยีสารสนเทศ ชั้นมัธยมศึกษาปีที่ 5 โดยครูนฤมล สุนทอง 1
การสร้างชุดติดตั้งแบบ Setup Project
การสร้างชุดติดตั้งแบบ Setup Project เป็นการเพิ่มโปรเจ็กต์อีกหนึ่งตัวเข้าไปใน Solution ของแอพพลิเคชันที่พัฒนา
Windows Installer เป็นตัวช่วยในการติดตั้งแอพพลิเคชัน ซึ่งมีจุดเด่นดังนี้
- Rollback ถ้าการติดตั้งมีข้อผิดพลาด สามารถย้อนกลับไปที่เกิดข้อผิดพลาดนั้นได้โดยไม่ต้องเริ่มใหม่ทั้งหมด
- Self Repair เมื่อแอพพลิเคชันที่ติดตั้งทางานผิดพลาด ซ่อมแซมด้วยตัวแอพพลิเคชันเองได้
- Uninstall ทาการถอนการติดตั้งได้ทั้งหมด ลบทุกไฟล์ ไม่เหลือไฟล์ขยะ หรือรีจิสทรีขยะ
- Advertisement แทรกโฆษณา หรือข้อมูลที่ช่วยให้ผู้ใช้งานมั่นใจ และเข้าใจแอพพลิเคชันนั้น ๆ ได้
ไฟล์ที่ใช้ในการติดตั้งแบบ Setup Project
- ไฟล์โปรเจ็กต์ที่ทดสอบแล้ว
- ไฟล์ Readme.rtf เป็นไฟล์คาแนะนาเกี่ยวกับแอพพลิเคชัน
- ไฟล์ License.txt เป็นไฟล์ข้อมูลเกี่ยวกับลิขสิทธิ์
- ไฟล์ logo.bmp เป็นไฟล์ภาพโลโก้ในชุดติดตั้ง (ควรมีขนาด 700 X 50)
วิธีสร้างชุดติดตั้ง
1. เปิดโปรเจ็กต์ที่ทดสอบแล้ว
และเข้าสู่หน้าต่าง Project > Properties…
2. เลือก Application และคลิกเลือก Assembly Information…
3. เมื่อปรากฏหน้าต่าง Assembly Information
แก้ไขรายละเอียดของโปรแกรม ได้แก่ Title คือ ชื่อโปรแกรม
Description คือ รายละเอียด เช่น ติดตั้งโปรแกรมแปลงหน่วยสกุลเงิน
Company คือ บริษัท/ผู้เขียนโปรแกรม เช่น นักเรียนชั้น ม.5@บบว.
Product คือ เกี่ยวกับโปรแกรม เช่น โปรแกรมแปลงหน่วยสกุลเงิน
Copyright คือ ลิขสิทธิ์ เช่น Copyright © 2017 เป็นต้น

2. เอกสารประกอบการเรียนการสอนเทคโนโลยีสารสนเทศ ชั้นมัธยมศึกษาปีที่ 5 โดยครูนฤมล สุนทอง 2
4. เลือกเมนู Build > Build tic tac toe
5. เลือกเมนู File > Add > New Project…
6. เมื่อปรากฏหน้าต่าง Add New Project เลือก Installed Templates
6.1 เลือก
Other Project Types >
Setup and Deployment >
Visual Studio Installer
6.2 คลิกเลือก
Setup Project
6.3 ตั้งชื่อ Setup1
6.4 คลิก OK

3. เอกสารประกอบการเรียนการสอนเทคโนโลยีสารสนเทศ ชั้นมัธยมศึกษาปีที่ 5 โดยครูนฤมล สุนทอง 3
7. จะปรากฏหน้าต่าง File System ของไฟล์ Setup1
8. คลิกขวาที่ Setup1 และเลือกคาสั่ง Properties
9. ปรากฏหน้าต่าง Setup1 Property Pages
Output file name คือ ชื่อของไฟล์ติดตั้ง ซึ่งมีนามสกุลเป็น .msi

4. เอกสารประกอบการเรียนการสอนเทคโนโลยีสารสนเทศ ชั้นมัธยมศึกษาปีที่ 5 โดยครูนฤมล สุนทอง 4
Package files คือ ชนิดของชุดติดตั้ง มี 3 แบบ ได้แก่
- As loose uncompressed files เป็นชนิดที่ไม่ต้องบีบอัดชุดไฟล์ติดตั้ง
- In setup file เป็นชนิดที่รวมทุกไฟล์ที่ติดตั้งไว้ที่ไฟล์ .msi
- In cabinet file(s) เป็นชนิดที่แยกเก็บชุดไฟล์ติดตั้งที่ถูกบีบอัดแล้วไว้หลาย ๆ ไฟล์
ซึ่งชนิดนี้เหมาะสาหรับการเก็บชุดไฟล์ติดตั้งในเครือข่าย
ในขั้นตอนนี้ เลือก Package files: เป็นชนิด In setup file
10. เลือก Prerequisites… ที่ช่องของ Installation URL:
จะปรากฏหน้าต่าง Prerequisites… เลือกโปรแกรมที่จาเป็นในการติดตั้ง จากนั้นคลิกปุ่ม OK

5. เอกสารประกอบการเรียนการสอนเทคโนโลยีสารสนเทศ ชั้นมัธยมศึกษาปีที่ 5 โดยครูนฤมล สุนทอง 5
11. เลือก เมนู View > Editor > File System
12. คลิกเลือก Application Folder ในหน้าต่าง Properties ที่ช่อง DefaultLocation กาหนดตาแหน่งการ
ติ ด ตั้ ง เ ข้ า ไ ป ใ น โ ฟ ล เ ด อ ร์ ซึ่ ง ป ร า ก ฏ ดั ง นี้ โ ด ย
[ProgramFilesFolder] ตาแหน่งที่เก็บโฟลเดอร์ และ [Manufacturer] กับ [ProductName] นามาจาก Assembly
13. เลือก Project > Add > Project Output…
เมื่อปรากฏหน้าต่าง เลือก Project ที่ต้องการให้เป็น
Primary Output และคลิกปุ่ม OK

6. เอกสารประกอบการเรียนการสอนเทคโนโลยีสารสนเทศ ชั้นมัธยมศึกษาปีที่ 5 โดยครูนฤมล สุนทอง 6
จากนั้นจะมีการเพิ่ม Primary output มาให้
14. เพิ่ม Folder เพื่อเก็บไฟล์ที่จาเป็นต่อการ
ออกแบบหน้าจอในชุดติดตั้ง โดยคลิกขวาที่ Application
Folder เลือกคาสั่ง Add > Folder
14.1 ตั้งชื่อ Folder ให้สื่อความหมาย เช่น resources
14.2 คลิกขวาที่ Folder resources เลือก Add > File
15. เลือกไฟล์ที่เตรียมไว้ และคลิกเลือก OK

7. เอกสารประกอบการเรียนการสอนเทคโนโลยีสารสนเทศ ชั้นมัธยมศึกษาปีที่ 5 โดยครูนฤมล สุนทอง 7
จะปรากฏไฟล์ที่เลือกในหน้าต่างของ File System
16. เลือกเมนู View > Editor > User Interface เพื่อทาการออกแบบลาดับการทางานของชุดติดตั้ง
จะปรากฏหน้าต่าง User Interface Designer ที่แสดงลาดับการทางานของชุดติดตั้ง
มี 3 ลาดับ คือ ลาดับที่ 1 Start ลาดับที่ 2 Progress
และลาดับที่ 3 End โดยมีรายละเอียดดังนี้
ลาดับที่ 1 Start เป็นการต้อนรับและยืนยันการติดตั้ง
โดยปกติมี 3 หน้าจอ คือ Welcome, Installation Folder และ
Confirm Installation
ลาดับที่ 2 Progress เป็นการติดตั้ง แสดงความคืบหน้า
การติดตั้ง มี 1 หน้าจอ
ลาดับที่ 3 End เป็นการเสร็จสิ้นการติดตั้ง มี 1 หน้าจอ
คือ Finish แต่สามารถเพิ่มตัวเลือกได้ เช่นการกาหนดให้เริ่มต้น
โปรแกรมทันทีที่ติดตั้งเสร็จ หรือกาหนดการอ่านไฟล์ Readme.txt

8. เอกสารประกอบการเรียนการสอนเทคโนโลยีสารสนเทศ ชั้นมัธยมศึกษาปีที่ 5 โดยครูนฤมล สุนทอง 8
17. ที่ Welcome เลือก Properties “BannerBitmap” เพื่อกาหนดรูปโลโก้ที่เราเตรียมไว้ โดย
17.1 เลือก Browse…
17.2 ที่ Look in: เลือก Folder resources ที่เราใส่ข้อมูลเตรียมไว้ จะปรากฏไฟล์ logo.bmp ที่เตรียม
ไว้ ให้เราคลิกเลือกไฟล์ดังกล่าว และคลิกปุ่ม OK

9. เอกสารประกอบการเรียนการสอนเทคโนโลยีสารสนเทศ ชั้นมัธยมศึกษาปีที่ 5 โดยครูนฤมล สุนทอง 9
18. ที่ Start คลิกขวา เลือกคาสั่ง Add Dialog
18.1 เมื่อปรากฏ Dialog Bog “Add Dialog” เลือก Dialog “Read Me” คลิกปุ่ม OK
18.2 คลิกขวา Start > Add Dialog เมื่อปรากฏ Dialog Bog “Add Dialog” เลือก Dialog
“License Agreement” คลิกปุ่ม OK

10. เอกสารประกอบการเรียนการสอนเทคโนโลยีสารสนเทศ ชั้นมัธยมศึกษาปีที่ 5 โดยครูนฤมล สุนทอง 10
19. เมื่อเพิ่ม Dialog Bog จะปรากฏดังภาพ
19.1 จัดลาดับ โดยการคลิกขวาที่ Dialog ที่ต้องการ
แล้วเลือกคาสั่ง Move Up หรือ Move Down ให้ตาแหน่งเป็นไปตามต้องการ
ภาพการจัดลาดับแล้ว
20. กาหนด Properties ของ ReadmeFile

11. เอกสารประกอบการเรียนการสอนเทคโนโลยีสารสนเทศ ชั้นมัธยมศึกษาปีที่ 5 โดยครูนฤมล สุนทอง 11
21. กาหนด Properties ของ License Agreement
22. กาหนด Properties “BannerBitmap” ของ ทุก Diglog เป็น logo.bmp
22.1 คลิกที่ Dialog “Read Me” และเลือก Browse… ที่ Properties “BannerBitmap”

12. เอกสารประกอบการเรียนการสอนเทคโนโลยีสารสนเทศ ชั้นมัธยมศึกษาปีที่ 5 โดยครูนฤมล สุนทอง 12
เลือกไฟล์ logo.bmp
ที่ Dialog “Read Me”
จะปรากฏชื่อไฟล์ logo.bmp ที่
Properties “BannerBitmap”
22.2 กาหนด Properties “BannerBitmap” ของ Diglog “License Agreement” เป็น logo.bmp
ตามขั้นตอนในข้อ 22.1
22.3 กาหนด Properties “BannerBitmap” ของ Diglog “Installation Folder” เป็น logo.bmp
ตามขั้นตอนในข้อ 22.1

13. เอกสารประกอบการเรียนการสอนเทคโนโลยีสารสนเทศ ชั้นมัธยมศึกษาปีที่ 5 โดยครูนฤมล สุนทอง 13
22.4 กาหนด Properties “BannerBitmap” ของ Diglog “Comfirm Installation” เป็น logo.bmp
ตามขั้นตอนในข้อ 22.1
23. คลิกขวาที่ Setup Project เลือก Build
24. คลิกขวาที่ Solution ‘tic tac toe’ เลือก Build Solution
เมื่อ Build เสร็จแล้วจะปรากฏไฟล์ติดตั้งจาก Folder “Release” สามารถคัดลอกไฟล์ใส่ CD หรือ
Flash drive ไปติดตั้งที่เครื่องคอมพิวเตอร์อื่นได้

14. เอกสารประกอบการเรียนการสอนเทคโนโลยีสารสนเทศ ชั้นมัธยมศึกษาปีที่ 5 โดยครูนฤมล สุนทอง 14
ทดสอบการติดตั้ง
นาไฟล์ที่ได้มาติดตั้งในคอมพิวเตอร์ ดังขั้นตอนต่อไปนี้
1. ดับเบิลคลิกที่ไฟล์ Setup1.msi จะปรากฏหน้าต่าง
จากนั้น คลิก Next
2. ปรากฏข้อมูลจากไฟล์ Readme คลิกปุ่ม Next
3. ปรากฏข้อมูลจากไฟล์ License โดยคลิกเลือก
I Agree และคลิกปุ่ม Next

15. เอกสารประกอบการเรียนการสอนเทคโนโลยีสารสนเทศ ชั้นมัธยมศึกษาปีที่ 5 โดยครูนฤมล สุนทอง 15
4. ปรากฏหน้าจอ
ให้เลือกตาแหน่งที่ตั้งในการติดตั้ง
และคลิก Next
5. ปรากฏหน้าจอให้ยืนยันการติดตั้ง
คลิก Next
6. เมื่อการติดตั้งเสร็จแล้ว คลิกปุ่ม close
เมื่อติดตั้งแล้ว สามารถเข้าสู่โปรแกรมได้ ตัวอย่าง