การพัฒนาโปรแกรมทางธุรกิจ

หน่วยท่ี 5 การพัฒนาโปรแกรมทางธรุ กจิ ก า ร เ ขี ย น โ ป ร แ ก ร ม โ ด ย ใ ช้ เ ค ร่ื อ ง มื อ ก ร า ฟิ ก โ ห ม ด : จุ ฬ า ลั ก ษ ณ์ ถ า ไ ช ย ล า ภ า ค วิ ช า ค อ ม พิ ว เ ต อ ร์ ธุ ร กิ จ วิ ท ย า ลั ย อ า ชี ว ศึ ก ษ า ม ห า ส า ร ค า ม

หน่วยท่ี 5 การพัฒนาโปรแกรมทางธุรกิจ **************** 1. การสร้างโปรแกรมทมี่ ีหลายฟอร์ม การออกแบบฟอรม์ สามารถแบง่ ออกเป็น 3 ประเภท ดงั นี้ 1. ฟอรม์ หลัก (Main Form) เปน็ การสรา้ งฟอร์มขึ้นมาเพ่อื ใช้ในการเชื่อมต่อไปยังฟอร์มอน่ื ดังนั้นฟอร์มหลักจะเปน็ เพียง Interface ท่ที าหนา้ ทีเ่ รยี กฟอรม์ อืน่ ข้ึนมาใช้งาน 2. ฟอร์มท่มี หี นา้ ตา่ งเดียว (Single Document Interface : SDI) เป็นฟอรม์ ท่ใี ช้สร้างโปรแกรม ที่มีหน้าตา่ งเดยี ว ซึง่ ไม่มีคาสั่งในการเรยี กหนา้ ตา่ งยอ่ ยข้นึ มา เช่น Notepad 3. ฟอร์มทมี่ หี ลายหนา้ ตา่ ง (Multiple Document Interface : MDI) เปน็ ฟอรม์ ท่สี ามารถเรยี ก ฟอรม์ ย่อยขน้ึ มาได้อกี หลายฟอร์มพรอ้ มๆกนั เหมาะสาหรับสร้างเป็นฟอร์มเมนูเพอื่ เรยี กใชโ้ ปรแกรม ยอ่ ย เช่น Microsoft Word 1.1 การสร้างฟอร์มแบบ Multiple Document Interface : MDI การสร้าง Main Form หรือ Parent Form 1. สรา้ ง Project ใหม่ สมมตชิ ื่อ BusinessForm ขยาย Form ใหม้ ขี นาดทีต่ อ้ งการ 2. กาหนดให้เป็นฟอร์มหลัก โดยกาหนด Properties IsMdiContainer มีค่าเปน็ True การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จุฬาลกั ษณ์ ถาไชยลา

3. สีพ้ืนของฟอร์มจะเปลีย่ นเปน็ สเี ทาเขม้ และขอบของ Form จะมีลักษณะนนู ข้นึ 1.2 การสรา้ งเมนใู ห้กับ Form หลัก การสร้างเมนทู าได้โดยใช้ Control MenuStrip การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

การสร้างเมนู File และสร้างคาส่ัง New ไว้ภายในเมนู File กาหนด ShortcutKeys เป็น Ctrl+N 1. คลกิ ท่ี Control เพื่อนาไปสร้าง Form หลัก จากนน้ั พิมพช์ ่ือของเมนทุ ่ี ต้องการ เชน่ File เปน็ เมนูหลัก และ new เปน็ เมนยู อ่ ย 2. การกาหนด ปุม่ ลดั หรือ ShortcutKeys สาหรับรายการ New โดยกาหนดเป็น Ctrl+N สามารถกาหนดใน Properties ShortcutKeys 3. เพม่ิ เมนแู ละรายการอน่ื ๆ การเขียนโปรแกรมโดยใช้เครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

1.3 การสร้าง Form ลกู หรือ Child Form 1. คลิกที่ Project บน Menu Bar และเลือก Add Windows Form… เมื่อสร้าง Form ลกู แลว้ จะสามารถใช้คาสัง่ ในการเพมิ่ Form ใหม่ผ่านทางเมนทู ี่สร้างข้นึ โดยใช้ Form ลูกทส่ี ร้างขึ้น เปน็ ต้นแบบ การเขียนโปรแกรมโดยใช้เครื่องมือกราฟิกโหมด : จุฬาลกั ษณ์ ถาไชยลา

2. ดับเบิลคลิกที่คาสั่ง New ในเมนู File แลว้ พิมพ์โคด้ ดังน้ี 4. ทดสอบโปรแกรมโดยใช้คาสัง่ New ในการสร้างฟอร์ม การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จุฬาลกั ษณ์ ถาไชยลา

1.4 การสรา้ งเมนูเพอื่ กาหนดการจดั เรียงของ Form ย่อย 1. สร้าง Form หลัก ซงึ่ ประกอบด้วยเมนู และรายการ ดงั นี้ 2. ดบั เบิลคลิกที่รายการ เขียนโค้ดเพื่อกาหนดการจดั เรยี งของ Form ยอ่ ยใหม้ ีการ จดั เรียงในแนวตง้ั ดังนี้ ทดสอบโปรแกรม การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จุฬาลกั ษณ์ ถาไชยลา

3. ดับเบิลคลิกทร่ี ายการ เขียนโค้ดเพื่อกาหนดการจัดเรียงของ Form ยอ่ ยใหม้ ีการ จดั เรยี งในแนวนอน ดงั น้ี ทดสอบโปรแกรม การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

1.5 การสรา้ งเมนูแบบ ToolStrip ToolStrip เปน็ คอนโทรลหนึง่ ที่สามารถนามาใช้เปน็ เมนูคาสัง่ กบั ฟอรม์ โปรแกรมได้ ซึ่งการใช้งาน ToolStrip นน้ั สามารถทา เมนคู าสั่งไดห้ ลากหลายรปู แบบ เช่น สร้างเปน็ เมนูทแี่ สดงแบบไอคอน (Icon) หรอื เปน็ เมนคู าส่ังที่แสดงแบบตัวอักษรขอ้ ความ หรือจะ แสดงแบบลสิ ต์รายการคาสง่ั ขั้นตอนการใชง้ าน ToolStrip 1. จัดเตรียมรปู ไอคอนท่ีต้องการใช้แสดงคาสั่ง ควรเป็นไฟล์แบบ (Format) PNG 2. เลอื กกล่มุ Menus & Toolbars คลิกเลือกคอนโทรล ToolStrip นามาวางบนฟอร์ม 3. ทีค่ อนโทรล ToolStrip บนฟอรม์ ให้เลอื ก Buuton การเขียนโปรแกรมโดยใช้เครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

4. ที่ Properties ให้เลอื ก Image คลกิ ที่ ... ดา้ นท้าย 5. ใหเ้ ลอื กรูปภาพท่ตี ้องการนามาทาเป็นเมนทู ่ีแสดงผลแบบไอคอน ใหเ้ ลอื กปุ่ม Import 6. เลอื กรปู ภาพทีต่ อ้ งการ (รูปไอคอนต้องเตรยี มไว้ก่อน) โดยการดบั เบิลคลกิ รปู ทีต่ อ้ งการ การเขียนโปรแกรมโดยใช้เครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

7. คลกิ ท่ปี มุ่ OK ที่หนา้ ตา่ งสาหรับการ Import 8. จะได้รูปภาพที่นามาใช้เป็นไอคอนเมนูตามตอ้ งการ 9. เพ่ิมรปู ไอคอนอ่ืนๆ ตามตอ้ งการ การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

การเขยี นโค้ดให้กับเมนไู อคอน เม่ือสรา้ งเมนูไอคอนโดยใช้ ToolStrip แล้ว จากนน้ั จึงทาการเขียนโปรแกรมใหแ้ กเ่ มนูไอคอน ท้ังนโี้ ปรแกรมที่เขียนควร สมั พนั ธก์ บั รูปไอคอนท่ใี ช้ในการสือ่ สารกบั ผใู้ ช้งาน มขี ั้นตอนดังน้ี 1. เลือกทเ่ี มนไู อคอนท่ตี ้องการเขียนโปรแกรม 2. ดบั เบิลคลกิ ทีไ่ อคอนทเี่ ลอื ก เพอ่ื เข้าไปเขียนโคด้ โปรแกรม 3. ดบั เบิลคลกิ ที่ไอคอนทเี่ ลอื ก เพอื่ เขา้ ไปเขียนโคด้ โปรแกรม การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

ตัวอยา่ งที่ 1 ธุรกิจรา้ นขายกาแฟ 1. ออกแบบฟอร์ม กาหนด Properties ดังนี้ Object Properties คา่ ทก่ี าหนด Form Text ชอ่ื ร้านกาแฟ GroupBox1 Text เลือกประเภทกาแฟ CheckBox1 Text เอสเปสโซ CheckBox2 Text ลาเต้ CheckBox3 Text มอคคา่ CheckBox4 Text คาปชู ิโน CheckBox5 Text อเมริกาโน GroupBox2 Text ราคาเครื่องด่มื Label1 Text 50 Label2 Text 55 Label3 Text 60 Label4 Text 50 Label5 Text 60 GroupBox3 Text จานวน TextBox1 - Text คา่ ว่าง TextBox5 Label7 Text ค่าว่าง Button1 Text รวมเงนิ การเขียนโปรแกรมโดยใช้เครื่องมือกราฟิกโหมด : จุฬาลกั ษณ์ ถาไชยลา

2. เขียนโค้ดใหก้ ับป่มุ การเขียนโปรแกรมโดยใช้เครื่องมือกราฟิกโหมด : จุฬาลกั ษณ์ ถาไชยลา

การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จุฬาลกั ษณ์ ถาไชยลา

ตวั อยา่ งท่ี 2 โปรแกรมรา้ นจาหน่ายอุปกรณค์ อมพวิ เตอร์ กาหนดราคาไวด้ งั น้ี CPU ราคาตวั ละ 10,000 บาท VGA ราคาอันละ 5,000 บาท RAM ราคาอนั ละ 2,000 บาท 1. ออกแบบฟอร์ม กาหนด Properties ดังนี้ Object Properties ค่าท่กี าหนด Form Text ช่ือรา้ นคอมพิวเตอร์ GroupBox1 Text รายการสินค้า CheckBox1 Text CPU CheckBox2 Text VGA Card CheckBox3 Text RAM NumericUpDown1-3 Button1 Text ราคารวม TextBox1 Text คา่ ว่าง GroupBox2 Text ชาระเงนิ TextBox2 Text คา่ วา่ ง Button2 Text เงนิ ทอน TextBox3 Text คา่ วา่ ง Button3 Text จบการทางาน การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

2. เขยี นโคด้ ดงั น้ี การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จุฬาลกั ษณ์ ถาไชยลา

การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จุฬาลกั ษณ์ ถาไชยลา

ตวั อยา่ งท่ี 3 โปรแกรมสาหรบั การ Log in ระบบ Log in เปน็ ระบบท่ใี ช้ในการยนื ยนั ตวั ตนของผูใ้ ช้ เพ่ือสิทธ์ใิ นการเขา้ ถงึ ข้อมลู ต่างๆ เป็นระบบท่มี ี ความจาเป็นอย่างมากในปัจจุบนั โดยท่วั ไประบบ log in จะประกอบดว้ ย 2 ส่วนท่สี าคญั คือ ชือ่ ผใู้ ช้ และ รหัสผา่ น โดยผ้ใู ชก้ ับรหัสผ่านจะตอ้ งตรงกนั ระบบจึงจะอนญุ าตใหเ้ ขา้ สรู่ ะบบได้ ตัวอยา่ งโปรแกรม Log in ผ้แู ละใช้กรอกชือ่ ผใู้ ช้งานและรหัสผา่ น โปรแกรมจะทางานดงั นี้ 1. หากช่อื ผู้ใชง้ านและรหัสผ่านตรงกนั เมื่อคลิกปมุ่ เข้าสรู่ ะบบ จะปรากฏกล่องข้อความ “ขอตอ้ นรบั เขา้ สู่ระบบ” 2. หากไมม่ กี ารใสช่ ื่อผู้ใชง้ านหรอื รหสั ผ่าน ระบบ จะแจ้งเตอื นดว้ ยข้อความ “คุณใส่ข้อมูลไมค่ รบ” 3. หากใส่ชอ่ื ผู้ใช้งานหรือรหัสผา่ นไมถ่ ูกต้อง ระบบ จะแจ้งเตือนดว้ ยขอ้ ความ “ชื่อผู้ใช้ หรือ รหัสผา่ นไม่ถูกตอ้ ง” การออกแบบสรา้ งโปรแกรมมีขัน้ ตอนดงั นี้ 1. สร้าง Project ใหม่ ชื่อ ProgramLogin 2. กาหนด Object และ Properties ดงั น้ี Object Properties ค่าทีก่ าหนด Label1 Name lblUsername Text ช่ือผ้ใู ช้งาน Label2 Name lblPassword Text รหัสผ่าน TextBox1 Name txtUsername TextBox2 Name txtPassword Use System Password Char True Button1 Name btnUser Text เข้าสูร่ ะบบ Button2 Name btnExit Text ออกจากระบบ การเขียนโปรแกรมโดยใช้เครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

3. เพ่มิ Form ใหม่ เพ่อื ใช้ในกรณีทม่ี ีการใสช่ อื่ ผู้ใชง้ านและรหัสผา่ นได้ถกู ต้อง โดยใชช้ ่ือ Form2 4. กาหนด Object และ Properties ดงั น้ี Object Properties ค่าที่กาหนด Label (สาหรบั แสดงชื่อผู้ใช้งาน) Name lblUser Autosize False Button (สาหรับออกจากระบบ) Borderstyle Fixed3D Name btnSignOut Text ออกจากระบบ การเขียนโปรแกรมโดยใช้เครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

5. ดับเบลิ คลิกท่ปี ุม่ เขา้ สู่ระบบ ใน Form1 พิมพโ์ ค้ด ดังน้ี 6. ดับเบลิ คลกิ ท่ปี มุ่ ออกจากระบบ ใน Form1 พมิ พ์โค้ด ดังน้ี 7. ดับเบลิ คลกิ ที่ Form2 พมิ พโ์ ค้ด ดงั นี้ 8. ดับเบิลคลกิ ทป่ี ุ่ม ออกจากระบบ ใน Form2 พิมพ์โค้ด ดังนี้ การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

ทดสอบโปรแกรม กรณีไม่ใสช่ ่ือผู้ใช้ หรอื รหัสผ่าน กรณใี ส่ชื่อผู้ใช้ หรอื รหสั ผ่าน ไมถ่ กู ตอ้ ง กรณใี ส่ชอ่ื ผู้ใช้ และ รหัสผา่ น ถกู ต้อง การเขียนโปรแกรมโดยใช้เครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

เมอ่ื คลกิ OK ระบบจะทาการโหลด Form2 พรอ้ มขอ้ ความตอ้ นรบั เมอ่ื คลกิ ปุ่ม ออกจากระบบ จะปรากฏข้อความแจ้งการออกจากระบบ เมอื่ คลกิ OK จะกลบั ไปยังหนา้ Log in อกี ครั้ง การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จุฬาลกั ษณ์ ถาไชยลา

การตรวจสอบข้อผิดพลาดจากการป้อนข้อมลู 1. การตรวจสอบขอ้ ผดิ พลาดจากการปอ้ นข้อมูล ด้วย Control MaskedTextBox การเขียนโปรแกรมโดยใช้เครื่องมือกราฟิกโหมด : จุฬาลกั ษณ์ ถาไชยลา

คลกิ เลอื ก Numeric (5-digits) จากน้นั ด้านลา่ งจะปรากฏรปู แบบ จานวนหลักท่ตี อ้ งการปอ้ นขอ้ มลู เช่น ต้องการปอ้ นรหสั นักศึกษา จานวน 9 หลกั จะกาหนด Mask เป็น “000000000” เมื่อ Run แลว้ ป้อนรหัสนกั ศึกษา จะใส่ไดไ้ ม่เกิน 9 หลกั ตามที่กาหนดขอบเขตไว้ การเขียนโปรแกรมโดยใช้เครื่องมือกราฟิกโหมด : จุฬาลกั ษณ์ ถาไชยลา

เพ่มิ รายการอน่ื ๆ ในฟอรม์ ตามตัวอย่าง กาหนดรายละเอียด Properties ดงั นี้ Object Properties คา่ ท่กี าหนด MaskedTextBox1 Font Tahoma , 12 pt MaskedTextBox2 Mask 00000000 MaskedTextBox3 Font Tahoma , 12 pt Mask LLLLLLLLLLLLLLLLLL MaskedTextBox4 Font Tahoma , 12 pt MaskedTextBox5 Mask Phone number (999)000-0000 Font Tahoma , 12 pt Mask 0-0000-00000-00-0 Font Tahoma , 12 pt Mask Short date 00/00/0000 การเขียนโปรแกรมโดยใช้เครื่องมือกราฟิกโหมด : จุฬาลกั ษณ์ ถาไชยลา

การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จุฬาลกั ษณ์ ถาไชยลา

ทดสอบโปรแกรม การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

2. การตรวจสอบข้อผิดพลาดจากการปอ้ นขอ้ มูลด้วยการเขียนโปรแกรมขน้ึ เอง 1. ออกแบบฟอร์มโดยกาหนด Object และ Properties ดังน้ี Object Properties คา่ ทีก่ าหนด MaskedTextBox1 Name MaskedStdCode Font Tahoma , 12 pt TextBox1 Mask 00000000 TextBox2 Name txtNameThai Font Tahoma , 12 pt Name txtNameEng Font Tahoma , 12 pt 2. ดบั เบิลคลิก เขียนโค้ด ดงั น้ี (Eventที่ใช้ตรวจสอบคอื KeyPress และ LostFocus) การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

3. ดับเบิลคลิก TextBox1 เขยี นโค้ด ดังนี้ 4. ดับเบิลคลิก TextBox2 เขยี นโคด้ ดังนี้ การเขียนโปรแกรมโดยใช้เครื่องมือกราฟิกโหมด : จุฬาลกั ษณ์ ถาไชยลา

ทดสอบโปรแกรม คลิก OK แล้วพมิ พใ์ หถ้ ูกตอ้ ง การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จุฬาลกั ษณ์ ถาไชยลา