หน่วยที่ 2การสร้างโปรแกรมเบื้องต้น

หน่วยท่ี 2 การสร้างโปรแกรมเบือ้ งต้น สาระสาคญั การสร้างโปรเจคข้ึนมาใชง้ านน้นั โปรเจคหน่ึงๆอาจจะประกอบดว้ ยฟอร์ม (Form) หลายๆ ฟอร์ม เพอื่ ใหฟ้ อร์ม ทาหนา้ ที่แตกต่างกนั ไปจาเป็นตอ้ งกาหนดคุณสมบตั ิใหก้ บั ฟอร์ม น้นั ๆ บน ฟอร์มยงั ตอ้ งมี เครื่องมือควบคุมตา่ งๆเพ่อื ใหโ้ ปรแกรมท่ีสร้างมีความสมบูรณ์ยง่ิ ข้นึ เช่น Label Command Button และ Picture Box ฯลฯ การเขยี นโปรแกรมควบคุมบนเคร่ืองมือท่ีสร้าง การทดสอบโปรแกรม การบนั ทึก โปรแกรม และการสร้างไฟล์ .EXE หวั ข้อเร่ือง 1. การสร้างโปรเจค ข้ึนมา ใหม่ 2. การกาหนดคุณสมบตั ิของฟอร์ม (Form Properties) 3. การใชเ้ คร่ืองมือ Label Control, Text Box Control, Command Button และ Picture Box Control 4. การเขียนโปรแกรมควบคมุ 5. การทดสอบโปรแกรม 6. การบนั ทึกโปรแกรม 7. การสร้างไฟล์ .EXE จุดประสงคก์ ารเรียน เม่ือศึกษาจบหน่วยที่ 1 นกั ศึกษาสามารถ 1. สร้างโปรเจค ข้ึนมา ใหม่ได้ 2. กาหนดคุณสมบตั ิ (Properties) ใหก้ บั ฟอร์มได้ 3. เลือกใช้ เคร่ืองมือในการสร้างโปรแกรม ไดอ้ ยา่ งถกู ตอ้ ง 4. เขียนโปรแกรมควบคุมเคร่ืองมือตา่ งๆไดถ้ กู ตอ้ ง 5. ทดสอบโปรแกรมได้ 6. บนั ทึกโปรแกรมไดอ้ ยา่ งถูกตอ้ ง 7. การสร้างไฟล์ .EXE ไดอ้ ยา่ งถกู ตอ้ ง

เนือ้ หาสระ การสร้างโปรแกรมเบอื้ งต้น 2.1 การสร้างโปรเจคขนึ้ มา ใหม่ หลงั จากเรียกโปรแกรม Visual Basic มาใชง้ านแลว้ เราสามารถสร้างโปรเจคข้ึนมาใหม่ พร้อมๆกนั ได้ หลายๆโปรเจค เช่น โปรเจคแรกอาจสร้างเป็น เมนู เพื่อเรียกใชง้ านโปรเจท่ี 2 ท่ีสร้างเป็นโปรเจคควบคุม หลอดไฟฟ้ า หรือเรียกใชโ้ ปรเจคที่ 3 ท่ีสร้างเป็นโปรเจคควบคมุ มอเตอร์กระแสตรง เป็นตน้ โปรเจคท่ี สร้างข้ึนมาใหมส่ ามารถทาไดด้ ว้ ยกนั หลายวธิ ีเพ่อื คือ วิธีที่ 1 กรณีที่เรียกใช้ Menu Bar 1) คลิกเมนู File 2) เลือกคาส่งั New Project 3) จะปรากฏไดอะลอ็ กบอ็ กซ์ Save Changes to the following files? ข้นึ มา 3.1) คลิก OK กรณีทบั โปรเจคเดิมท่ีเปิ ดใชก้ ่อนหนา้ น้ี 3.2) คลิก NO หากไม่ตอ้ งการทบั 4) เลือกรูปแบบโปรเจคท่ีตอ้ งการในไดอะลอ็ กบอ็ กซ์ New Project (เช่น StandardEXE) 5) คลิกป่ มุ OK 1 3 2 45 รูปท่ี 2.1 แสดงสร้างโปรเจคใหมด่ ว้ ย Menu Bar วิธที ่ี 2 กดป่ ุม Ctrl+ N

วธิ ีที่ 3 คลิกป่ มุ Add Standard Exe Project บน Tool Bar 1 รูปที่ 2.1 แสดงสร้างโปรเจคใหม่ดว้ ยเคร่ืองมือบน Tool Bar โปรแกรม Visual Basic สามารถสร้างโปรเจคงานไดพ้ ร้อมๆกนั หลายโปรเจค และเมื่อตอ้ งการจะ ลบโปรเจคที่ไม่ตอ้ งการออกไปสามารถทาไดโ้ ดย 1) คลิกเมาส์ขวาเลือกโปรเจคท่ีตอ้ งการลบในหนา้ ต่างโปรเจคบลอ็ ก 2) เลือกคาสั่ง Remove Project 3) คลิก No กรณีไมต่ อ้ งการบนั ทึกไว้ 1 2 3 รูปท่ี 2.2 แสดงการลบโปรเจคที่ไม่ตอ้ งการ

2.2 การกาหนดคุณสมบัตขิ องฟอร์ม เมื่อเปิ ดโปรเจค ข้ึนมาใหม่ แล้วจะปรากฏฟอร์มข้ึนมาใช้งาน จากน้ันต้งั ช่ือโปรเจค ใน Project Explorer Windows แล้วต้ังช่ือในหน้าต่างคุณสมบัติ (Properties Explorer) หากต้องการต้ังค่าใน คุณสมบตั ิของฟอร์ม ทาไดโ้ ดยช้ีเมาส์ไปที่พ้นื สีเทาของฟอร์มก่อนแลว้ ทาตามลาดบั ขอ้ ดงั น้ี 1) คลิกเมาส์ป่ มุ ขวามือลงบนฟอร์ม จะแสดง Pop up Menu 2) เลือกคาส่ัง Properties 3) ต้งั ชื่อ ฟอร์ม 4) ต้งั ชื่อคาอธิบายที่อยบู่ นฟอร์ม ในช่อง Caption 5) เปลี่ยนไอคอนเป็นรูปอื่นตามตอ้ งการ โดยคลิกป่ มุ … ต่อจากน้นั เขา้ ไปที่ Folder Programs File\\ Microsoft Visual Studio 6.0\\Common\\Graphis\\Icon\\Computer ต่อจากน้นั เลือกไอคอน ที่ ตอ้ งการ( นามสกลุ จะเป็น .ICO) ตามดว้ ยคลิก Open 6) กาหนดคณุ สมบตั ิอ่ืนๆ ตามตอ้ งการ 2 3 1 คลิกเมาส์ขวาบนฟอร์ม 4 รูปที่ 2.3 แสดงการกาหนดคุณสมบตั ิของฟอร์ม

2.3 การใช้ Label Control การกาหนด Label Control คือการกาหนดขอ้ ความที่จะใชแ้ สดงบนฟอร์ม อาจใชเ้ ป็นป้ ายบอกช่ือ แผน่ งาน หรือป้ ายบอกป่ ุมเครื่องมือในงานควบคุมตา่ งๆ มีวธิ ีการดงั น้ี 1) คลิกป่ มุ Label ท่ี Tool Box 2) เลื่อนเมาส์นามาวาดบนฟอร์ม ยอ่ ขยาย เคล่ือนยา้ ยจดั วางใหส้ วยงาม 3) กาหนดคณุ สมบตั ิในหนา้ ต่างคุณสมบตั ิ เช่น 3.1 ช่ือในช่อง Name 3.2 กาหนดขอ้ ความบนแสดงบน Label ในช่อง Caption 3.3 กาหนดรูปแบบตวั อกั ษร ในช่อง Font 3.4 กาหนดสีพ้ืนของป่ มุ ในช่อง Forecolor 3.5 กาหนดขนาดกรอบใหพ้ อดีกบั ขอ้ ความดว้ ยช่อง Autosize เป็น True 1 2 3 รูปท่ี 2.3 แสดงการใช้ Label Control

ตัวอย่างที่ 2.1 การสร้างป้ ายแสดงขอ้ ความ “เมนูรายการ” โดยใช้ Label Control ให้ปรากฏดงั รูปท่ี 2.4 รูปท่ี 2.4 แสดงป้ ายขอ้ ความ “เมนูรายการ” วิธีสร้าง 1) คลิกเลือก Label Control ใน Tool Box 2) วาดลงบนฟอร์มโดย แดร็กเมาส์คา้ งลากทะแยงมุมลงขา้ งลา่ ง 3) คลิกช่อง Name กาหนดคณุ สมบตั ิ ใหเ้ ป็น Mmenu 4) คลิกช่อง Caption กาหนดคุณสมบตั ิ ใหเ้ ป็น เมนูรายการ 5) คลิกช่อง Autosize กาหนดคณุ สมบตั ิ ใหเ้ ป็น True 12 3 5 4 67 รูปท่ี 2.5 แสดงการสร้างป้ ายขอ้ ความ “เมนูรายการ” ดว้ ย Label Control 6) คลิกช่อง Font กาหนดคุณสมบตั ิ ใหเ้ ป็น Angsana ขนาด 20 ทาไดโ้ ดย 6.1) คลิกป่ มุ จะปรากฏดงั รูปท่ี 2.5

6.2) คลิกเลือกรูปแบบตวั อกั ษรเป็น Angsana New 6.3) ช่อง Size คลิกเลือกขนาดตวั อกั ษรเป็น 22 6.4) คลิก OK 6.4 6.2 6.3 6.1 7 รูปท่ี 2.6 แสดงการเลือกรูปแบบและขนาดของตวั อกั ษร 7) คลิกช่อง Forecolor กาหนดคุณสมบตั ิ ใหเ้ ป็น สีน้าเงิน ทาไดด้ งั น้ี 7.1) คลิกเลือก ในช่องขวามือของ ForeColor 7.2) คลิกเลือกแถบ Palette 7.3) คลิกเลือกสีท่ีตอ้ งการ 7.2 7.3 7.1 รูปท่ี 2.7 แสดงการเลือกสีใหก้ บั ตวั อกั ษร

2.4 การใช้ Text Box Control Text Box เป็นกรอบใหผ้ ใู้ ชป้ ้ อนขอ้ มลู เขา้ ไป หรือระบใุ หแ้ สดงขอ้ มูลที่เกิดจากการใชค้ าสั่งในการ เขยี นโปรแกรมสาหรับวิธีการใช้ Text Box มีดงั น้ี 1) คลิกป่ มุ Text Box ของ Tools Box 2) เลื่อนเมาส์มาวางบนฟอร์ม ยอ่ ขยาย จดั ใหไ้ ดส้ วยงาม 3) กาหนดชื่อของ Text Box ในช่อง Properties Name เพอ่ื สะดวกในการอา้ งอิงช่ือ กรณี การใชค้ าสัง่ เช่นต้งั เป็น Txtname 4) กาหนดรูปแบบตวั อกั ษร สี 5) กาหนดสีพ้ืน กรอบ และอื่นๆ ตัวอย่างที่ 2.2 การสร้างกล่องเพือ่ รับการป้ อนรหสั ผา่ นจากเจา้ ของหอ้ งพกั โดยใช้ Text Box วธิ ีสร้าง 1) คลิกป่ มุ Text Box ของ Tools Box 2) เล่ือนเมาส์มาวางบนฟอร์ม ยอ่ ขยาย จดั ใหไ้ ดส้ วยงาม 3) กาหนดคณุ สมบตั ิ ดงั น้ี 3.1) ช่อง Name เป็น Txtpassword 3.2) ช่อง PasswordChr เป็น * 1 3.1 2 3.2 รูปท่ี 2.8 แสดงการเคร่ืองมือ Text Box

2.5 การใช้ Command Button Command Button เป็นการกาหนดป่ ุมข้ึนมา เมื่อเวลาคลิกแลว้ ตอ้ งการใหเ้ กิดอะไรข้ึน จะตอ้ งเขียน โปรแกรมควบคุมการทางานเขา้ ไปดว้ ย การกาหนดทาไดด้ งั น้ี 1) คลิกป่ มุ Command Button ใน Tool Box 2) เล่ือนเมาส์มาวางบนฟอร์ม ยอ่ ขยาย จดั ใหไ้ ดส้ วยงาม 3) กาหนดคุณสมบตั ิในหนา้ ต่างคณุ สมบตั ิ เช่น 3.1 ชื่อในช่อง Name 3.2 ขนาดตวั อกั ษร สีของตวั อกั ษร 3.3 สีพ้ืนของกรอบ และอื่นๆ 4) หากตอ้ งการเขยี นโปรแกรมควบคมุ ใหด้ บั เบิลคลิกบนป่ ุม Command Button ท่ีวาง บนฟอร์มน้ี จะปรากฏหนา้ ตา่ งแสดงข้นึ มาเพือ่ พมิ พค์ าส่งั เขา้ ไป ตวั อย่างท่ี 2.2 การสร้างป่ ุมในฟอร์ม บนป่ มุ ใหม้ ีขอ้ ความวา่ “เปิ ดไฟ” วธิ ีสร้าง 1) คลิกป่ มุ Command Button ใน Tool Box 2) เลื่อนเมาส์มาวางบนฟอร์ม ยอ่ ขยาย จดั ใหไ้ ดส้ วยงาม 3) กาหนดคุณสมบตั ิ ใหก้ บั ป่ ุมดงั น้ี 3.1) ช่อง Name ให้เป็น CmdOn 3.2) Caption ให้เป็น “เปิ ดไฟ” 3.3) ช่อง Font ใหเ้ ลือก Angsana New 1 3.1 2 3.2 3.3 รูปที่ 2.9 แสดงการสร้างป่ ุม “เปิ ดไฟ” ดว้ ยเคร่ืองมือ Command Button

2.6 การใช้ Picture Box Control เป็นการนาเอารูปภาพ หรือขอ้ ความที่เรากาหนดไวม้ าแสดงใน Picture Box มีวธิ ีการทาไดด้ งั น้ี 1) คลิกป่ มุ Picture Box ใน Tool Box 2) เลื่อนเมาส์มาวางบนฟอร์ม ปรับ ยอ่ ขยาย ใหส้ วยงาม 3) กาหนดคณุ สมบตั ิ ในหนา้ ต่างคุณสมบตั ิ เช่น ต้งั ชื่อในช่อง PictureName 4) นารูปภาพมาไวบ้ น Picture Box โดยคลิกป่ มุ ในช่อง Properties Picture จากน้นั ดบั เบิล คลิกที่รูปภาพที่ตอ้ งการ หากไมต่ อ้ งการนารูปภาพเขา้ มา แตต่ อ้ งการเขียนโปรแกรมไวใ้ นป่ ุม Command Button เมื่อมีการคลิกป่ มุ กใ็ หป้ รากฏรูปภาพข้ึนมา 1 2 3 4 รูปที่ 2.10 แสดงการนา Picture Box มาใชแ้ สดงรูปภาพ 2.7 การเขยี นโปรแกรมควบคมุ เม่ือกาหนด ออบเจกซ์ 2 ออบเจกซ์ ช่ือ UbName และ UbPicture (ที่สร้างจาก Command Button) บนฟอร์มแลว้ เราสามารถเขียนโปรแกรมสร้างความสัมพนั ธ์ระหว่าง ออบเจกซ์ต่างๆบนฟอร์มไดต้ าม ตอ้ งการ

ตวั อย่าง 2.3 การสร้างโปรเจคควบคุมการทางานของป่ ุม “ขอ้ ความ” น้นั คือเม่ือคลิก “ขอ้ ความ” ใหป้ รากฏขอ้ ความ “สวสั ดี” ที่ Text Box รูปที่ 2.11 แสดงการสร้างโปรเจคควบคมุ ป่ มุ “ขอ้ ความ” วิธีสร้าง แบ่งวิธีการสร้างออกเป็น 2 ส่วนคือ ส่วนท่ี 1 เป็นการสร้างออบเจกซ์ เช่น ป่ มุ “ขอ้ ความ” และ TextBox เพ่ือใชแ้ สดง “สวสั ดี” ดงั น้ี 1) คลิก Command Button ใน Tool Box เพอื่ สร้างป่ ุม “ขอ้ ความ” 2) เล่ือนเมาส์มาวางบนฟอร์ม ปรับ ยอ่ ขยาย ใหส้ วยงาม 3) กาหนดคณุ สมบตั ิ 3.1) ช่อง Name เป็น UbName 3.3) ช่อง Caption เป็น “ขอ้ ความ” 12 3.1 3.2 รูปท่ี 2.12 แสดงการสร้างออบเจก็ ซ์ป่ มุ “ขอ้ ความ”

4) คลิก Text Box ใน Tool Box เพอื่ ใหแ้ สดงขอ้ ความ “สวสั ดี” 5) เล่ือนเมาส์มาวางบนฟอร์ม ปรับ ยอ่ ขยาย ใหส้ วยงาม 6) กาหนดคณุ สมบตั ิช่อง Name เป็น TxtName 46 5 รูปที่ 2.13 แสดงการสร้างออบเจกซ์ TextBox ส่วนท่ี 2 เป็นการเขยี นโปรแกรมควบคุมป่ ุม “ขอ้ ความ” 1) ดบั เบิลคลิกท่ีป่ ุม “ขอ้ ความ” 2) จะปรากฏหนา้ ตา่ งแสดงชุดคาส่ัง 3) พิมพด์ งั น้ี Txtname.text = “สวสั ดี” 4) คลิกกากบาทเพอ่ื ปิ ดหนา้ ต่างโปรแกรม 4 12 3 รูปที่ 2.14 แสดงการเขียนโปรแกรมควบคมุ ป่ มุ “ขอ้ ความ”

2.8 การทดสอบโปรแกรม เม่ือพมิ พค์ าสง่ั โปรแกรมควบคมุ ออบเจกซ์ ต่างๆเรียบร้อยแลว้ สามารถทดสอบการทางานของ โปรแกรมไดด้ งั น้ี 1) คลิก Start ในเมนู หรือกด F5 2) คลิกป่ มุ “ขอ้ ความ” 3) จะปรากฏขอ้ ความ “สวสั ดี” ใน Text Box 1 2 รูปท่ี 2.15 แสดงการทดสอบโปรแกรม 2.9 การบนั ทกึ โปรแกรม หลงั จากทดสอบโปรแกรมเป็นท่ีเรียบร้อยแลว้ ควรบนั ทึกโปรแกรมเก็บไว้ ทาไดด้ งั น้ี 1) คลิกเมนู File 2) คลิกเลือกคาสง่ั Save Project As.. 3) จะปรากฏไดอะลอ็ กบอ็ กซข์ ้ึนมาใหเ้ ลือกโพรเดอร์ (Folder) ที่จะจดั เกบ็ ขอ้ มูล 4) พิมพช์ ื่อ Project ท่ีตอ้ งการจดั เก็บ แลว้ คลิกป่ มุ Save 5) คลิกเมนู File 6) คลิกเลือกคาสงั่ Save <ช่ือฟอร์ม> As.. 7) จะปรากฏไดอะลอ็ กบอ็ กซ์ข้ึนมา 8) พิมพช์ ่ือฟอร์มท่ีตอ้ งการจดั เก็บ แลว้ คลิกป่ มุ Save

1 3 44 2 6 รูปท่ี 2.16 แสดงการบนั ทึกโปรแกรม 2.10 การสร้างไฟล์ .EXE ไฟล์ .EXE เป็นไฟลท์ ี่สามารถนาไปปฏิบตั ิการบนเครื่องคอมพิวเตอร์เคร่ืองใดๆก็ได้ และเป็นไฟล์ ที่มีขนาดเล็ก ท้ังน้ีเพราะไม่รวมโปรแกรมต้นกาเนิด (Soure Code) อีกท้ังเป็ นการป้ องกันการคัดลอก โปรแกรมไปดัดแปลงผิดจากต้นฉบบั เดิม ดังน้ันหลงั จากที่พัฒนาสร้างโปรเจคงานเสร็จ ปรับแต่งและ ทดสอบโปรแกรมจนเป็ นท่ีพอใจแลว้ ก่อนส่งมอบโปรแกรม หรือแจกจ่ายเพื่อทดสอบ และเผยแพร่ โปรแกรม จึงควรสร้างเป็นไฟล์ .EXE เสียก่อน การสร้างไฟล์ .EXE สามารถสร้างไดด้ งั น้ี 1) คลิกเมนู File 2) เลือกคาสงั่ Make <ชื่อไฟล>์ .EXE .. 3) จะปรากฏไดอะลอ็ กบอ็ กข้ึนมา ใหเ้ ลือกโพรเดอร์ ท่ีตอ้ งการบนั ทึก 4) พมิ พช์ ื่อท่ีตอ้ งการ 5) คลิกป่ มุ OK 6) เปิ ด Windows Exploler 7) ดบั เบิลคลิกเปิ ดไฟล์ ที่บนั ทึกไวเ้ ป็น .EXE เพื่อทดสอบดู

1 3 45 2 รูปที่ 2.17 แสดงการสร้างไฟล์ .EXE

กจิ กรรมท้ายบทเรียนท่ี 2 ตอนท่ี 1 จงตอบคาถาม หรือใหเ้ หตุผลของคาถามตอ่ ไปน้ี 1. การเปิ ดโปรเจคใหม่ทาไดก้ ี่วิธีอะไรบา้ ง 2. สิ่งที่ควรกาหนดค่าในหนา้ ตา่ งคณุ สมบตั ิ ของฟอร์ม คืออะไรบา้ ง 3. จงบอกหนา้ ท่ี และคา่ ในหนา้ ต่างคุณสมบตั ิ ท่ีควรกาหนด ของเคร่ืองมือต่อไปน้ี 3.1 Label Control 3.2. Text Box Control 3.3. Picture Box Control 3.4. Command Button 4. การเขียนโปรแกรมควบคุม Command Button ทาไดอ้ ยา่ งไร 5. การบนั ทึกโปรแกรมควรบนั ทึกอะไรบา้ งในโปรเจคหน่ึงๆ 6. เพราะเหตุใดจึงตอ้ งทดสอบโปรแกรมที่สร้างข้นึ ใหม่ๆ 7. จงบอกวธิ ีแปลงไฟลเ์ ป็น .EXE ตอนที่ 2 ฝึกปฏิบตั ิการสร้างโปรเจคงานพร้อมท้งั เขียนโปรแกรมควบคุมออบเจก็ ซ์ ดงั รูป 2.18 โดยมี เงื่อนไขตอ่ ไปน้ี 1. คลิกป่ มุ “เปิ ด” ให้แสดงขอ้ ความ “ยนิ ดีตอ้ นรับ” ที่ Label Control 2. คลิกป่ มุ “เปิ ดภาพ” ใหแ้ สดงภาพท่ี Picture Box รูปที่ 2.18 แสดงการแผงควบคุมออบออบเจก็ ซ์