หน่วยที่ 2 EP.2: การสร้างกล่องรับข้อมูล (Widget & Layout)

By Admin
6
9 เม.ย. 2569

หน่วยที่ 2 EP.2: การสร้างกล่องรับข้อมูล (Widget & Layout)

หน้าต่างแอปพลิเคชันที่ว่างเปล่า จะเก็บข้อมูลได้อย่างไร? มาทำความรู้จักกับ "Widget" หรือชิ้นส่วนหน้าจอ ไม่ว่าจะเป็นป้ายข้อความ (Label), ช่องกรอกข้อมูล (Entry) และปุ่มกด (Button) พร้อมเรียนรู้วิธีการจัดวาง (Layout) ให้สวยงาม เพื่อสร้างแบบฟอร์มรับข้อมูลที่สมบูรณ์แบบ

🗂️ หน่วยที่ 2 EP.2: การสร้างกล่องรับข้อมูล

Widget & Layout in Tkinter

จาก EP.1 เราได้สร้าง "หน้าต่างเปล่าๆ" ขึ้นมาแล้ว แต่ถ้าเราจะทำแอปพลิเคชันเพื่อ เก็บรวบรวมข้อมูล (เช่น ชื่อ นามสกุล หรือเบอร์โทรศัพท์) ไปวิเคราะห์ เราก็ต้องมี "กล่อง" ให้ผู้ใช้งานพิมพ์ข้อมูลส่งมาให้เราครับ สิ่งเหล่านั้นในภาษา Python เราเรียกว่า Widget (วิดเจ็ต)

🧩 1. รู้จักกับชิ้นส่วนหน้าจอ (Widget)

Widget คือ องค์ประกอบต่างๆ ที่อยู่บนหน้าต่างโปรแกรม เพื่อให้ผู้ใช้มองเห็นและโต้ตอบด้วยได้ ในการทำแบบฟอร์มรับข้อมูลพื้นฐาน เราจะใช้ 3 วิดเจ็ตหลัก ดังนี้ครับ:

🏷️ Label (ป้ายข้อความ)

ใช้แสดงข้อความบอกผู้ใช้งานว่าต้องทำอะไร เช่น "กรุณากรอกชื่อของคุณ:"

⌨️ Entry (ช่องรับข้อความ)

ช่องว่างๆ สำหรับให้ผู้ใช้งานพิมพ์ตัวอักษรหรือตัวเลขลงไป เพื่อส่งข้อมูลเข้าสู่ระบบ

🔘 Button (ปุ่มกด)

ปุ่มสำหรับคลิกเพื่อยืนยันคำสั่ง เช่น ปุ่ม "ตกลง" หรือ "บันทึกข้อมูล"

📦 2. การจัดวางตำแหน่งด้วย pack()

สร้าง Widget ขึ้นมาเฉยๆ โปรแกรมจะยังไม่แสดงผลนะครับ! เราต้อง "สั่งจัดวาง" ลงบนหน้าต่างด้วย ซึ่งคำสั่งที่ง่ายที่สุดใน Tkinter คือคำสั่ง .pack()

📌 คำสั่ง pack() จะนำ Widget ไปวางเรียงต่อกันจากบนลงล่างตรงกึ่งกลางหน้าจอโดยอัตโนมัติ (นอกจากนี้เราสามารถใส่ค่า pady=10 ไว้ในวงเล็บ เพื่อเว้นระยะห่างด้านบน-ล่างให้ดูสวยงามไม่เบียดกันเกินไปได้ครับ)

👨‍💻 3. ลงมือเขียนโค้ดสร้างแบบฟอร์มเก็บข้อมูล

📝 โค้ดสร้างแบบฟอร์มรับชื่อนักเรียน

import tkinter as tk

# สร้างหน้าต่างหลัก
frame = tk.Tk()
frame.geometry("300x200") # กำหนดขนาดหน้าต่าง กว้างxสูง
frame.title("เก็บข้อมูลนักเรียน")

# 1. สร้าง Label (ป้ายบอกให้รู้ว่าต้องพิมพ์อะไร)
label_name = tk.Label(frame, text="กรุณากรอกชื่อของคุณ:", font=("Arial", 12))
label_name.pack(pady=10) # วางลงบนจอ พร้อมเว้นระยะ 10 พิกเซล

# 2. สร้าง Entry (ช่องให้พิมพ์ข้อมูล)
entry_name = tk.Entry(frame, width=20, font=("Arial", 12))
entry_name.pack(pady=5)

# 3. สร้าง Button (ปุ่มกดยืนยัน)
btn_save = tk.Button(frame, text="บันทึกข้อมูล", bg="lightgreen")
btn_save.pack(pady=15)

# สั่งให้โปรแกรมทำงานวนลูป
frame.mainloop()