Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Setup Project in Visual Studio C#

1,673 views

Published on

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

Published in: Education
  • Be the first to comment

  • Be the first to like this

Setup Project in Visual Studio C#

  1. 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. 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. 3. เอกสารประกอบการเรียนการสอนเทคโนโลยีสารสนเทศ ชั้นมัธยมศึกษาปีที่ 5 โดยครูนฤมล สุนทอง 3 7. จะปรากฏหน้าต่าง File System ของไฟล์ Setup1 8. คลิกขวาที่ Setup1 และเลือกคาสั่ง Properties 9. ปรากฏหน้าต่าง Setup1 Property Pages Output file name คือ ชื่อของไฟล์ติดตั้ง ซึ่งมีนามสกุลเป็น .msi
  4. 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 โดยครูนฤมล สุนทอง 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. 6. เอกสารประกอบการเรียนการสอนเทคโนโลยีสารสนเทศ ชั้นมัธยมศึกษาปีที่ 5 โดยครูนฤมล สุนทอง 6 จากนั้นจะมีการเพิ่ม Primary output มาให้ 14. เพิ่ม Folder เพื่อเก็บไฟล์ที่จาเป็นต่อการ ออกแบบหน้าจอในชุดติดตั้ง โดยคลิกขวาที่ Application Folder เลือกคาสั่ง Add > Folder 14.1 ตั้งชื่อ Folder ให้สื่อความหมาย เช่น resources 14.2 คลิกขวาที่ Folder resources เลือก Add > File 15. เลือกไฟล์ที่เตรียมไว้ และคลิกเลือก OK
  7. 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. 8. เอกสารประกอบการเรียนการสอนเทคโนโลยีสารสนเทศ ชั้นมัธยมศึกษาปีที่ 5 โดยครูนฤมล สุนทอง 8 17. ที่ Welcome เลือก Properties “BannerBitmap” เพื่อกาหนดรูปโลโก้ที่เราเตรียมไว้ โดย 17.1 เลือก Browse… 17.2 ที่ Look in: เลือก Folder resources ที่เราใส่ข้อมูลเตรียมไว้ จะปรากฏไฟล์ logo.bmp ที่เตรียม ไว้ ให้เราคลิกเลือกไฟล์ดังกล่าว และคลิกปุ่ม OK
  9. 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. 10. เอกสารประกอบการเรียนการสอนเทคโนโลยีสารสนเทศ ชั้นมัธยมศึกษาปีที่ 5 โดยครูนฤมล สุนทอง 10 19. เมื่อเพิ่ม Dialog Bog จะปรากฏดังภาพ 19.1 จัดลาดับ โดยการคลิกขวาที่ Dialog ที่ต้องการ แล้วเลือกคาสั่ง Move Up หรือ Move Down ให้ตาแหน่งเป็นไปตามต้องการ ภาพการจัดลาดับแล้ว 20. กาหนด Properties ของ ReadmeFile
  11. 11. เอกสารประกอบการเรียนการสอนเทคโนโลยีสารสนเทศ ชั้นมัธยมศึกษาปีที่ 5 โดยครูนฤมล สุนทอง 11 21. กาหนด Properties ของ License Agreement 22. กาหนด Properties “BannerBitmap” ของ ทุก Diglog เป็น logo.bmp 22.1 คลิกที่ Dialog “Read Me” และเลือก Browse… ที่ Properties “BannerBitmap”
  12. 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. 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. 14. เอกสารประกอบการเรียนการสอนเทคโนโลยีสารสนเทศ ชั้นมัธยมศึกษาปีที่ 5 โดยครูนฤมล สุนทอง 14 ทดสอบการติดตั้ง นาไฟล์ที่ได้มาติดตั้งในคอมพิวเตอร์ ดังขั้นตอนต่อไปนี้ 1. ดับเบิลคลิกที่ไฟล์ Setup1.msi จะปรากฏหน้าต่าง จากนั้น คลิก Next 2. ปรากฏข้อมูลจากไฟล์ Readme คลิกปุ่ม Next 3. ปรากฏข้อมูลจากไฟล์ License โดยคลิกเลือก I Agree และคลิกปุ่ม Next
  15. 15. เอกสารประกอบการเรียนการสอนเทคโนโลยีสารสนเทศ ชั้นมัธยมศึกษาปีที่ 5 โดยครูนฤมล สุนทอง 15 4. ปรากฏหน้าจอ ให้เลือกตาแหน่งที่ตั้งในการติดตั้ง และคลิก Next 5. ปรากฏหน้าจอให้ยืนยันการติดตั้ง คลิก Next 6. เมื่อการติดตั้งเสร็จแล้ว คลิกปุ่ม close เมื่อติดตั้งแล้ว สามารถเข้าสู่โปรแกรมได้ ตัวอย่าง

×