เอกสารประกอบการเรยีนการสอนเทคโนโลยสีารสนเทศ ช้ันมัธยมศึกษาปีท่ี 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 เป็นต้น

เอกสารประกอบการเรยีนการสอนเทคโนโลยสีารสนเทศ ช้ันมัธยมศึกษาปีท่ี 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

เอกสารประกอบการเรยีนการสอนเทคโนโลยสีารสนเทศ ช้ันมัธยมศึกษาปีท่ี 5 โดยครูนฤมล สุนทอง 3

7. จะปรากฏหน้าต่าง File System ของไฟล์ Setup1

8. คลิกขวาที่ Setup1 และเลือกค าสั่ง Properties

9. ปรากฏหน้าต่าง Setup1 Property Pages

Output file name คือ ชื่อของไฟล์ติดตั้ง ซึ่งมีนามสกุลเป็น .msi

เอกสารประกอบการเรยีนการสอนเทคโนโลยสีารสนเทศ ช้ันมัธยมศึกษาปีท่ี 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

11. เลือก เมนู View > Editor > File System

12. คลิกเลือก Application Folder ในหน้าต่าง Properties ที่ช่อง DefaultLocation ก าหนดต าแหน่งการติ ด ตั้ ง เ ข้ า ไ ป ใ น โ ฟ ล เ ด อ ร์ ซึ่ ง ป ร า ก ฏ ดั ง นี้ โ ด ย [ProgramFilesFolder] ต าแหน่งที่เก็บโฟลเดอร์ และ [Manufacturer] กับ [ProductName] น ามาจาก Assembly

13. เลือก Project > Add > Project Output…

เมื่อปรากฏหน้าต่าง เลือก Project ที่ต้องการให้เป็น

Primary Output และคลิกปุ่ม OK

เอกสารประกอบการเรยีนการสอนเทคโนโลยสีารสนเทศ ช้ันมัธยมศึกษาปีท่ี 5 โดยครูนฤมล สุนทอง 6

จากนั้นจะมีการเพิ่ม Primary output มาให ้ 14. เพิ่ม Folder เพื่อเก็บไฟล์ท่ีจ าเป็นต่อการ ออกแบบหน้าจอในชุดติดตั้ง โดยคลิกขวาที่ Application Folder เลือกค าสั่ง Add > Folder

14.1 ตั้งชื่อ Folder ให้สื่อความหมาย เช่น resources 14.2 คลิกขวาที่ Folder resources เลือก Add > File

15. เลือกไฟล์ที่เตรียมไว้ และคลิกเลือก OK

เอกสารประกอบการเรยีนการสอนเทคโนโลยสีารสนเทศ ช้ันมัธยมศึกษาปีท่ี 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

เอกสารประกอบการเรยีนการสอนเทคโนโลยสีารสนเทศ ช้ันมัธยมศึกษาปีท่ี 5 โดยครูนฤมล สุนทอง 8

17. ที่ Welcome เลือก Properties “BannerBitmap” เพื่อก าหนดรูปโลโก้ที่เราเตรียมไว้ โดย

17.1 เลือก Browse…

17.2 ที่ Look in: เลือก Folder resources ที่เราใส่ข้อมูลเตรียมไว้ จะปรากฏไฟล์ logo.bmp ที่เตรียมไว้ ให้เราคลิกเลือกไฟล์ดังกล่าว และคลิกปุ่ม OK

เอกสารประกอบการเรยีนการสอนเทคโนโลยสีารสนเทศ ช้ันมัธยมศึกษาปีท่ี 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

เอกสารประกอบการเรยีนการสอนเทคโนโลยสีารสนเทศ ช้ันมัธยมศึกษาปีท่ี 5 โดยครูนฤมล สุนทอง 10

19. เมื่อเพิ่ม Dialog Bog จะปรากฏดังภาพ 19.1 จัดล าดับ โดยการคลิกขวาที่ Dialog ที่ต้องการ แล้วเลือกค าสั่ง Move Up หรือ Move Down ให้ต าแหน่งเป็นไปตามต้องการ

ภาพการจัดล าดับแล้ว

20. ก าหนด Properties ของ ReadmeFile

เอกสารประกอบการเรยีนการสอนเทคโนโลยสีารสนเทศ ช้ันมัธยมศึกษาปีท่ี 5 โดยครูนฤมล สุนทอง 11

21. ก าหนด Properties ของ License Agreement

22. ก าหนด Properties “BannerBitmap” ของ ทุก Diglog เป็น logo.bmp 22.1 คลิกที่ Dialog “Read Me” และเลือก Browse… ที่ Properties “BannerBitmap”

เอกสารประกอบการเรยีนการสอนเทคโนโลยสีารสนเทศ ช้ันมัธยมศึกษาปีท่ี 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

เอกสารประกอบการเรยีนการสอนเทคโนโลยสีารสนเทศ ช้ันมัธยมศึกษาปีท่ี 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 ไปติดตั้งที่เครื่องคอมพิวเตอร์อื่นได้

เอกสารประกอบการเรยีนการสอนเทคโนโลยสีารสนเทศ ช้ันมัธยมศึกษาปีท่ี 5 โดยครูนฤมล สุนทอง 14

ทดสอบการติดตั้ง น าไฟล์ท่ีได้มาติดตั้งในคอมพิวเตอร์ ดังขั้นตอนต่อไปนี้ 1. ดับเบิลคลิกที่ไฟล์ Setup1.msi จะปรากฏหน้าต่าง จากนั้น คลิก Next

2. ปรากฏข้อมูลจากไฟล์ Readme คลิกปุ่ม Next

3. ปรากฏข้อมูลจากไฟล์ License โดยคลิกเลือก I Agree และคลิกปุ่ม Next

เอกสารประกอบการเรยีนการสอนเทคโนโลยสีารสนเทศ ช้ันมัธยมศึกษาปีท่ี 5 โดยครูนฤมล สุนทอง 15

4. ปรากฏหน้าจอ ให้เลือกต าแหน่งที่ตั้งในการติดตั้ง และคลิก Next

5. ปรากฏหน้าจอให้ยืนยันการติดตั้ง คลิก Next

6. เม่ือการติดตั้งเสร็จแล้ว คลิกปุ่ม close

เมื่อติดตั้งแล้ว สามารถเข้าสู่โปรแกรมได้ ตัวอย่าง