การเขียนโปรแกรมด้วย Visual Basic (ง่าย ๆ) ตอนที่ 1

รู้จักกับ Visual Studio 2010

สวัสดีค่ะ วันนี้จะมาแนะนำให้ผู้สนใจเรื่องเกี่ยวกับการเขียน ด้วย Visual Studio 2010 ซึ่งจัดได้ว่าเป็นภาษาที่ใช้ในการเขียนคำสั่งง่าย โดยในโพสนี้จะช่วยให้เราสามารถเขียนโปรแกรมด้วยคำสั่งง่าย ๆ บอกว่าง่ายจริงค่ะ โดยจะมีเนื้อหาดังนี้

1.1 รู้จัก Visual basic และเวอร์ชั่นต่าง ๆ

1.2 หลักการทำงานของ Visual Basic

1.3 ส่วนประกอบและหน้าตาของโปรแกรม

1.4 ตัวอย่างโปรแกรมการ ทำงานโดยใช้ VB

1.1 รู้จัก Visual basic และเวอร์ชั่นต่าง ๆ

รูปที่ 1.1 โปรแกรม Microsoft Visual Studio 2010

Visual Basic เป็นภาษาที่ได้รับความนิยมในการเขียนโปรแกรม เนื่องจากเป็นภาษาที่เขียนง่าย อ่านคำสั่งแล้วเข้าใจได้ไม่ยาก ทำให้เป็นที่นิยมใช้งานทั่วโลก และมีเครื่องมือพัฒนาแอพพลิเคชันที่ดีคือ Visual Studio ที่ได้รับการพัฒนาอย่างต่อเนื่อง มีเครื่องมือ เอกสารอ้างอิง เทคนิคใหม่ ๆ มาช่วยให้นักพัฒนาแอพพลิเคชันทำงานได้ขึ้น

Visual Basic เป็นภาษาที่ผ่านการพัฒนามาหลายเวอร์ชั่น เป็นโปรแกรมที่ประกอบด้วยเครื่องมือที่ช่วยให้เราสามารถพัฒนาแอปพลิเคชั่นที่หลากหลาย สะดวกและง่าย โดยมีวิวัฒนาการในการเวอร์ชั่นใหม่ ๆ มาดังนี้

Visual Basic 5 ถูกเรียกว่า Visual 97 เป็น Visual Basic ตัวแรก

Visual Basic 6 อยู่ในชุด VB Studio ปี 1998 เป็นเวอร์ชั่นที่ใช้งานง่าย ปัจจุบันยังมีผู้ใช้งานอยู่

Visual Studio.net 2002 มีชื่อเต็มว่า .Net Framwork

Visual Studio.net 2003

Visual 2005 Version 8

Visual Studio.net 2008 Version 9 สามารถ Load ใช้ฟรีได้

Visual Studio 2010 Version 10

ด้วยเวอร์ชั่นของ VB มีมากมายข้างต้น จึงทำให้มีลักษณะการเขียนที่มีความแตกต่างกันไปค่อนข้างมาก แต่ยังมีโครงสร้างภาษาที่เหมือนเดิม โดย Visual Studio 2010 Version 10 นี้ได้แบ่งเป็นหลาย ๆ ภาษาตามความถนัด คือ ภาษา visual Basic ,C# C++ ,Web Developer

รูปที่ 1.2 ภาษาใน Microsoft Visual Studio 2010

ในบทเรียนนี้จะนำเสนอวิธีการใช้โปรแกรม Visual Studio 2010 ซึ่งจะมีโปรแกรมให้เลือกใช้ตามความเหมาะสมของงาน โดยแบ่งได้เป็น 3 แบบคือ

1. Visual Studio 2010 Professional

2. Visual Studio 2010 Premium

3. Visual Studio 2010 Ultimate

รูปที่ 1.3 ชนิดของผลิตภัณฑ์ ของMicrosoft Visual Studio 2010

1.2 หลักการทำงานของ Visual Basic

รูปที่ 1.4 การแสดง object

จากรูปด้านบนเราจะเห็นว่า มีองค์ประกอบของ Drive เราเรียกว่า Object ซึ่ง VB ใช้ในการสร้างรูปร่าง หน้าตาของส่วนประกอบของ Window ในอดีตหากเราต้องการเขียนว่าในส่วนประกอบหน้าต่างมีขนาดเท่าไรคูณเท่าไร ตัว Scroll Bar สร้างขึ้นมาอย่างไร หากมีการเขียนในลักษณะที่เป็น Code จะใช้เวลานานในการเขียนโปรแกรม แต่หากใช้โปรแกรม VB ในการเขียนโปรแกรมแล้ว จะช่วยให้ทำงานได้ง่ายขึ้น เพราะหลักการทำงานของ VB นั้น มีส่วนสำคัญอยู่ 2 ประการคือ

1. มีการสร้างเป็นลักษณะของหน้าจอ หรือเลเอ้าท์ ขึ้นมาก่อน

2. ส่วนใดที่มี Code ให้ใส่ Code

ในอดีตเวลาที่เราต้องการติดต่อสื่อสารหรือเขียนโปรแกรมเราจะต้องทำงานผ่าน DOS ซึ่งมีลักษณะการทำงานแบบทีละบรรทัดซึ่งเรียกว่า Procedure แต่ในปัจจุบันมีการทำงานผ่าน Window ซึ่งมีความแตกต่างออกไป ตัวของ Window จะมีการทำงานในลักษณะที่เป็น Object คือวัตถุที่มีคุณสมบัติส่วนตัว หรือเป็นวัตถุที่สามารถเปลี่ยนแปลงคุณสมบัติ มีคำสั่งที่ใช้ในการทำงานแตกต่างกัน ในที่นี้เราจะมาเรียนรู้การเปลี่ยนแปลงคุณสมบัติว่าเป็นอย่างไร หรือคุณสมบัติและตัวของฟังก์ชั่นและ Method เป็นอย่างไร

ทดสอบความเข้าใจ

1. ให้นักศึกษาเปิดหน้าต่าง window/my computer หากเราเอาเม้าส์ไปวางไว้ที่ Drive C (over) ที่ไดร์ฟ เราจะพบกับคุณสมบัติ ว่ามีพื้นที่เหลือเท่าไร พื้นที่รวมเท่าไร

2. คลิกขวา Properties จะเห็นว่าสิ่งที่เห็นทุกอย่างในรูปจะเป็น Object ทั้งหมด

Method คือคำสั่งที่ใช้ในการทำงาน ภายในปุ่มจะมีคำสั่งที่ใช้ในการทำงาน

1.3 ส่วนประกอบและหน้าตาของโปรแกรม

เมื่อได้ทำการติดตั้งโปรแกรมเรียบร้อยแล้ว เราจะมาดูว่าโปรแกรมของ VB มีหน้าตาอย่างไร และมีวิธีการทำงานอย่างไร ซึ่งจะมีหน้าจอที่ใช้ในการทำงานหลายตัว

1. หน้าจอนี้สำหรับการเลือก Tool ที่จะใช้ในการทำงานซึ่งได้ผ่านการติดตั้งมาแล้ว ซึ่งเราจะใช้ภาษา Basic หรือ C# หรือตามความต้องการได้ แต่ในที่นี้เราจะใช้ Basic

2. ที่หน้าต่าง Visual Studio 2010 เลือก Visual Basic Development Settings/เลือก Start visual Studio (Professional และ Ultimate ความสามารถของโปรแกรมที่ต่างกัน)

3. เข้าสู่หน้าต่างต้อนรับเข้าสู่ VB ที่ด้านซ้ายมีคำสั่ง New Project และ Open Project ด้านขวามือเป็นการแสดงรายละเอียด

Close Page After Project Load หมายถึง โชว์ทุกครั้งหรือไม่

Show Page on Startup หมายถึง หลังจากเริ่มทำงานหน้านี้จะปิดไป

4. เลือก New Project เพื่อเข้าไปดูองค์ประกอบของระบบ

5. เลือก template Windows form Application

ุ6. ที่ Name ให้ทำการตั้งชื่อ form ชื่อ Test หรือ Application จากนั้น ตอบ OK (ถ้าหน้าจอไม่ ปิด ที่ส่วนของ StartPage จะมีปุ่มกากบาท ให้คลิกปิด)

7. ผลลัพธ์จะได้หน้าจอพื้นฐานรูปตัวอย่าง Form ดังนี้

8. ส่วนประกอบของหน้าจอประกอบด้วย Menu Bar ,Icon Bar ส่วนบนสุดเป็นชื่อ form

9. คลิกที่เมนู File จะเป็นกลุ่มคำสั่งของการ save , open การ add ฯลฯ

10. เมนู Edit จะเป็นเมนูที่ใช้ในการ Copy การ Paste , การค้นหา การแทนที่ค่า

11. เมนู View จะเป็นเมนูเรื่องของมุมมอง เช่นต้องการเปิดหน้าต่างบางหน้า หรือบางหน้าต่าง ถูกปิดไปเราสามารถเปิดได้จากเมนูนี้ เช่น การใช้ Shift+ F7 คือการเปิดหน้าจอ Design (วิธีปิดForm คือ คลิกเครื่องหมายกากบาทที่ด้านบนของ FormVB[Design]

12. เมนู Project ใช้ในการ Add form, Control,Component

13. เมนู Build เป็นเมนู ที่ใช้ในการสร้างข้อความ การแก้ไข การ Clear

14. เมนู Debug ใช้ในการตรวจสอบโปรแกรม

15. ด้านซ้ายมือ จะมี Tool Box ซึ่งจะมีหน้าต่างย่อย ๆ (ซ้ายสุด) All window form ซึ่งจะประกอบไปด้วยปุ่มต่าง ๆ เช่น List box, Combo box, เราสามารถคลิกนำออกมาสร้างได้เลย

16. ที่ Data Sources

17. สามารถปักหมุดได้ ในกรณีที่ต้องการให้แสดงผล ในกรณีที่เราต้องการให้เปิดขึ้นมา

18. ในส่วนของ Control จะมีอยู่ 2 ส่วนคือ ส่วนที่เป็น Control และส่วนที่เป็น Components 1.ส่วนที่เป็น control ได้แก่ ListBox ComboBox

2. ส่วน Component คือส่วนที่มองไม่เห็น เช่น ตัวจับเวลา ตัวปิด File

19. โครงสร้างของโปรแกรม VB จะประกอบด้วย 2 ส่วนหลักคือ

1. การออกแบบหน้าจอ

2. การเขียนโค้ด (Code)

ตัวอย่างที่ 1 ถ้าเราดึง Label แล้วทำการ Double Click สิ่งที่เห็นคือจะเข้าไปในปุ่มนั้นโดยตรง เพื่อทำการเขียน Code และถ้าเราเลือก Label จะรู้ว่าคุณสมบัติ Label คืออะไร สามารถเปลี่ยนแปลงคุณสมบัติได้ เข้าไปในปุ่มนั้นโดยตรง ในส่วน Property ก็จะแสดงด้านขวามือ

1. ดึง Label มาที่ Form1

2. ขวามือ จะมี Solution explorer เป็นหน้าจอที่ใช้ในการแสดงหรือบอกรายละเอียดว่าในฟอร์มนี้มีอะไรบ้าง จะประกอบด้วย

Property คือแสดงคุณสมบัติ

Show all file หมายถึง แสดงรายละเอียดทั้งหมดของฟอร์ม

Refresh ใช้แสดงในกรณีที่มีการเปลี่ยนแปลงข้อมูล เช่นการเพิ่ม Object ต่าง ๆ

View Code การเปลี่ยนมุมมอง Code

View Design การเปลี่ยนมุมมองเป็น Design

1.4 ตัวอย่างโปรแกรมการทำงานโดยใช้ VB

เราจะมาทำการสร้างโปรแกรมที่ มีปุ่มคลิกเพื่อให้แสดงข้อความขึ้นมา โดยใช้เพียงแค่ปุ่มเดียว แต่ให้มีการ Event ในการการทำตามโค้ดที่เราเขียนขึ้นโดยจะมีตัวอย่างให้ประมาณ 4 รูปแบบ คือ 1.คลิกปุ่มเพื่อให้แสดงข้อความ 2. คลิกเพื่อให้แสดงบนฟอร์มทันที 3.คลิกที่ฟอร์มบริเวณใดก็ได้ 4. การเขียนโค้ดโดยใช้ Event โดยการดับเบิ้ลคลิก

วิธีทำ

1. New Project

คลิกเลือก Windows Form Application

2. จะได้ฟอร์มเปล่าพร้อมออกแบบ

3. เลือกคลิกคอนโทรล Button และปรับขนาด โดยปุ่มนี้เมื่อคลิกจะแสดงข้อความว่า Hello

4. กด F5 แต่ยังทำงานไม่ได้ หรือยังไม่มี Method

5. ที่ Property ไปเปลี่ยน Button1 ที่ Text เปลี่ยนให้เป็น Click แล้ว Enter

6. ที่ Name คือชื่อของปุ่ม หรือชื่อของ Control มีความสำคัญมากเพราะเป็นตัวที่ต้องรับ Code ถ้าจะดู Properties ของตัวไหนคลิก object ตัวนั้น

7. คลิกเลือกปุ่ม Click และ Double Click เขียน Code ซึ่งเราสามารถเปลี่ยน Event ของปุ่มได้โดยคลิกที่ Click จะมี List ให้เลือก ในที่นี้จะให้ใช้ Click เพื่อแสดงข้อความ hello หรือ Message Box