การติดตั้งโปรแกรมแบบ Setup Project ใน Microsoft Visual Studio

1. Naruemon Soonthong
Bangbowitthayakhom School

2. สร้างชุดการติดตั้งโปรแกรมได้

3. โฟลเดอร์ไฟล์ติดตั้ง พร้อมไฟล์ประกอบ
(Readme/Logo/License)

4.  เป็ นไฟล์บีบอัด ให้นักเรียนทำกำรแตกไฟล์ จะได้ 1 โฟลเดอร์ ชื่อ setup
 นักเรียนสร้ำงโฟลเดอร์ตนเองใหม่ ในโฟลเดอร์ setup ตัวอย่ำงกำรตั้งชื่อ 5701วิศรุต
 นักเรียนสร้ำงไฟล์ Readme.rtf (Rich Text Format) และบันทึกลงโฟลเดอร์ตนเอง
 นักเรียนสร้ำงไฟล์ License.txt (Plain Text) และบันทึกลงโฟลเดอร์ตนเอง
 นักเรียนสร้ำงไฟล์ logo.bmp (ขนำด 700 * 50 pixel) และบันทึกลงโฟลเดอร์ตนเอง

5. ตัวอย่ำงไฟล์ logo.bmp

6. ตัวอย่ำงไฟล์ Readme.rtf

7. ตัวอย่ำงไฟล์ License.txt

12. Rollback
• ถ้ำกำรติดตั้งมีข้อผิดพลำด สำมำรถย้อนกลับไปที่เกิดข้อผิดพลำดนั้นได้โดยไม่ต้องเริ่มใหม่ทั้งหมด
Self
Repair• เมื่อแอพพลิเคชันที่ติดตั้งทำงำนผิดพลำด ซ่อมแซมด้วยตัวแอพพลิเคชันเองได้
Uninstall
• ทำกำรถอนกำรติดตั้งได้ทั้งหมด ลบทุกไฟล์ ไม่เหลือไฟล์ขยะ หรือรีจิสทรีขยะ
Advertisement
• แทรกโฆษณำ หรือข้อมูลที่ช่วยให้ผู้ใช้งำนมั่นใจ และเข้ำใจแอพพลิเคชันนั้น ๆ ได้

13. 1
•ไฟล์โปรเจ็กต์ที่ทดสอบแล้ว
2
•ไฟล์ Readme.rtf
•เป็ นไฟล์คำแนะนำเกี่ยวกับแอพพลิเคชัน (rtf คือ ชนิดไฟล์ Rich Text Format)
3
•ไฟล์ License.txt
•เป็ นไฟล์ข้อมูลเกี่ยวกับลิขสิทธิ์ (txt คือ ชนิดไฟล์ Plain Text)
4
•ไฟล์ logo.bmp
•เป็ นไฟล์ภำพโลโก้ในชุดติดตั้ง ควรมีขนำด 700 X 50 pixel

14. 1. เปิ ดโปรเจ็กต์ที่ทดสอบแล้ว
และเข้ำสู่หน้ำต่ำง Project >
Properties…

15. 2. เลือก Application และคลิกเลือก Assembly Informa

16. 3. เมื่อปรำกฏหน้ำต่ำง Assembly
Information
แก้ไขรำยละเอียดของโปรแกรม ได้แก่
Title คือ ชื่อโปรแกรม
Description คือ รำยละเอียด
เช่น ติดตั้งโปรแกรมแปลงหน่วยสกุลเงิน
Company คือ บริษัท/ผู้เขียนโปรแกรม
เช่น นักเรียนชั้น ม.5@บบว.
Product คือ เกี่ยวกับโปรแกรม
เช่น โปรแกรมแปลงหน่วยสกุลเงิน
Copyright คือ ลิขสิทธิ์

17. 4. เลือกเมนูBuild > Build tic tac toe

18. 5. เลือกเมนูFile > Add > New Project…

19. 6. เมื่อปรำกฏหน้ำต่ำง Add New Project เลือก Installed Templates

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

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

22. 9. ปรำกฏหน้ำต่ำง Setup1 Property Pages
Output file name คือ ชื่อของไฟล์ติดตั้ง ซึ่งมีนำมสกุลเป็ น .msi

23. Package files คือ ชนิดของชุดติดตั้ง มี 3 แบบ ได้แก่
- As loose uncompressed files เป็ นชนิดที่ไม่ต้องบีบอัดชุดไฟล์ติดตั้ง
- In setup file เป็ นชนิดที่รวมทุกไฟล์ที่ติดตั้งไว้ที่ไฟล์ .msi
- In cabinet file(s) เป็ นชนิดที่แยกเก็บชุดไฟล์ติดตั้งที่ถูกบีบอัดแล้วไว้หลำย ๆ ไฟล์
ซึ่งชนิดนี้เหมำะสำหรับกำรเก็บชุดไฟล์ติดตั้งในเครือข่ำย
ในขั้นตอนนี้ เลือก Package files: เป็ นชนิด In setup file

24. 10. เลือก Prerequisites… ที่ช่องของ Installation URL:

25. จะปรำกฏหน้ำต่ำง Prerequisites… เลือกโปรแกรมที่จำเป็ นในกำรติดตั้ง จำกนั้นคลิกปุ่ ม OK

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

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

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

29. เมื่อปรำกฏหน้ำต่ำง
เลือก Project
ที่ต้องกำรให้เป็ น
Primary Output
และคลิกปุ่ ม OK

30. จำกนั้นจะมีกำรเพิ่ม
Primary output มำให้

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

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

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

34. จะปรำกฏไฟล์ที่เลือกในหน้ำต่ำงของ File System

35. 16. เลือกเมนูView > Editor > User Interface เพื่อทำกำรออกแบบลำดับ
กำรทำงำนของชุดติดตั้ง

36. จะปรำกฏหน้ำต่ำง
User Interface Designer
ที่แสดงลำดับกำรทำงำนของชุดติดตั้ง
มี 3 ลำดับ คือ
ลำดับที่ 1 Start
ลำดับที่ 2 Progress
และลำดับที่ 3 End
โดยมีรำยละเอียดดังนี้

37. ลำดับที่ 1 Start
เป็ นกำรต้อนรับและยืนยันกำรติดตั้ง
โดยปกติมี 3 หน้ำจอ คือ
Welcome,
Installation Folder และ
Confirm Installation

38. ลำดับที่ 2 Progress
เป็ นกำรติดตั้ง แสดงควำมคืบหน้ำ
กำรติดตั้ง มี 1 หน้ำจอ

39. ลำดับที่ 3 End เป็ นกำรเสร็จสิ้นกำรติดตั้ง
มี 1 หน้ำจอ คือ Finish
แต่สำมำรถเพิ่มตัวเลือกได้
เช่น กำรกำหนดให้เริ่มต้นโปรแกรมทันทีที่ติดตั้งเสร็จ
หรือกำหนดกำรอ่ำนไฟล์ Readme.txt

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

41. 17.1 เลือก Browse…

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

43. 18. ที่ Start คลิกขวำ เลือกคำสั่ง Add Dialog

44. 18.1 เมื่อปรำกฏ Dialog Bog “Add Dialog” เลือก Dialog “Read Me” คลิกปุ่ ม OK

45. 18.2 คลิกขวำ Start > Add Dialog เมื่อปรำกฏ Dialog Bog “Add Dialog” เลือก
Dialog “License Agreement” คลิกปุ่ ม OK

46. 19. เมื่อเพิ่ม Dialog Bog จะปรำกฏดังภำพ

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

48. 20. กำหนด Properties ของ ReadmeFile

49. 20. กำหนด Properties ของ ReadmeFile

50. 20. กำหนด Properties ของ ReadmeFile

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

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

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

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

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

56. เลือกไฟล์ logo.bmp

57. ที่ Dialog “Read Me” จะปรำกฏชื่อไฟล์ logo.bmp ที่
Properties “BannerBitmap”

58. 22.2 กำหนด Properties “BannerBitmap” ของ Diglog “License Agreement”
เป็ น logo.bmp ตำมขั้นตอนในข้อ 22.1

59. 22.3 กำหนด Properties “BannerBitmap” ของ Diglog “Installation Folder”
เป็ น logo.bmp ตำมขั้นตอนในข้อ 22.1

60. 22.4 กำหนด Properties “BannerBitmap” ของ Diglog “Comfirm
Installation” เป็ น logo.bmp ตำมขั้นตอนในข้อ 22.1

61. 23. คลิกขวำที่ Setup Project เลือก Build

62. 24. คลิกขวำที่ Solution ‘tic tac toe’ เลือก Build Solution

63. เมื่อ Build เสร็จแล้วจะปรำกฏไฟล์ติดตั้งจำก Folder “Release” สำมำรถคัดลอกไฟล์ใส่ CD
หรือ Flash drive ไปติดตั้งที่เครื่องคอมพิวเตอร์อื่นได้

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

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

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

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

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

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

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