**Pendahuluan**
Membuat form input adalah salah satu kebutuhan dasar dalam pengembangan aplikasi berbasis GUI. Dengan PyQt5, Anda dapat merancang form yang rapi dan responsif menggunakan **QGridLayout**. Artikel ini akan memandu Anda membuat form input sederhana dengan label, field teks, dan tombol—cocok untuk pemula yang ingin memahami integrasi komponen GUI dasar.
---
### **Struktur Proyek**
Proyek ini terdiri dari dua file:
1. **`main.py`**: File utama untuk menjalankan aplikasi.
2. **`MainForm.py`**: File yang berisi logika GUI dan tata letak form.
---
### **File `main.py`**
```python
#!/usr/bin/python3
#########################################################
# Nama file: main.py
#########################################################
import sys
from PyQt5.QtWidgets import QApplication
from MainForm import *
if __name__ == '__main__':
a = QApplication(sys.argv) # Inisialisasi aplikasi Qt
form = MainForm() # Membuat objek form
form.show() # Menampilkan form
a.exec_() # Memulai event loop aplikasi
```
**Penjelasan Kode:**
1. **`QApplication(sys.argv)`**: Membuat instance aplikasi Qt untuk mengelola alur GUI.
2. **`MainForm()`**: Membuat objek dari kelas `MainForm` yang berisi desain form.
3. **`form.show()`**: Menampilkan form ke layar pengguna.
4. **`a.exec_()`**: Menjaga aplikasi tetap berjalan hingga pengguna menutupnya.
---
### **File `MainForm.py`**
```python
#########################################################
# Nama file: MainForm.py
#########################################################
from PyQt5.QtWidgets import (QWidget, QGridLayout,
QLabel, QLineEdit, QPushButton)
class MainForm(QWidget):
def __init__(self):
super().__init__() # Memanggil konstruktor parent class (QWidget)
self.setupUi() # Memanggil metode untuk menyusun UI
def setupUi(self):
# Konfigurasi window utama
self.resize(300, 100) # Ukuran window (lebar: 300px, tinggi: 100px)
self.move(300, 300) # Posisi window di layar (x: 300, y: 300)
self.setWindowTitle('Demo QGridLayout') # Judul window
# Membuat komponen GUI
self.label1 = QLabel('Nama') # Label untuk input nama
self.lineEdit1 = QLineEdit() # Field input teks nama
self.label2 = QLabel('No. Handphone') # Label untuk input nomor HP
self.lineEdit2 = QLineEdit() # Field input teks nomor HP
self.button1 = QPushButton('OK') # Tombol submit
# Membuat layout grid dan menambahkan komponen
layout = QGridLayout()
layout.addWidget(self.label1, 0, 0) # Baris 0, Kolom 0
layout.addWidget(self.lineEdit1, 0, 1) # Baris 0, Kolom 1
layout.addWidget(self.label2, 1, 0) # Baris 1, Kolom 0
layout.addWidget(self.lineEdit2, 1, 1) # Baris 1, Kolom 1
layout.addWidget(self.button1, 2, 0, 1, 2) # Baris 2, Kolom 0, Span: 1 baris & 2 kolom
self.setLayout(layout) # Mengatur layout untuk window utama
```
**Penjelasan Kode:**
1. **`QLabel`**: Widget untuk menampilkan teks statis (misal: "Nama").
2. **`QLineEdit`**: Widget input teks yang memungkinkan pengguna memasukkan data.
3. **`QPushButton`**: Tombol yang dapat diklik untuk trigger aksi (misal: submit form).
4. **`QGridLayout.addWidget()`**:
- Parameter ke-3 dan ke-4 pada `layout.addWidget(self.button1, 2, 0, 1, 2)` adalah **rowSpan** dan **columnSpan**.
- Arti: Tombol "OK" akan menempati **1 baris** (rowSpan) dan **2 kolom** (columnSpan), sehingga tampil lebar penuh.
**Hasil Tampilan:**
```
---------------------------
| Nama | [Input] |
| No. HP | [Input] |
|-------------------------|
| [Tombol OK] |
---------------------------
```
---
### **Mengapa QGridLayout Cocok untuk Form Input?**
1. **Alignment Rapi**: Label dan input teks dapat disejajarkan dengan presisi.
2. **Responsif**: Komponen menyesuaikan ukuran saat window di-resize.
3. **Spanning**: Memungkinkan komponen seperti tombol untuk mengisi lebar penuh.
---
### **Cara Menjalankan Aplikasi**
1. Pastikan PyQt5 sudah terinstall:
```bash
pip install PyQt5
```
2. Simpan kedua file (`main.py` dan `MainForm.py`) dalam folder yang sama.
3. Jalankan melalui terminal:
```bash
python main.py
```
---
### **Tips Pengembangan untuk Pemula**
1. **Tambahkan Fungsi Tombol**:
Hubungkan tombol "OK" dengan fungsi untuk menampilkan data input:
```python
self.button1.clicked.connect(self.on_button_click)
def on_button_click(self):
nama = self.lineEdit1.text()
no_hp = self.lineEdit2.text()
print(f"Nama: {nama}, No. HP: {no_hp}")
```
2. **Validasi Input**:
Gunakan `QLineEdit.setPlaceholderText()` untuk panduan input:
```python
self.lineEdit2.setPlaceholderText("Contoh: 08123456789")
```
3. **Eksperimen dengan Spanning**:
Coba ubah span tombol ke `2, 1, 1, 1` untuk melihat perbedaan posisi.
---
### **Kesimpulan**
Dengan QGridLayout, Anda bisa merancang form input yang rapi hanya dalam beberapa baris kode. Komponen seperti `QLabel` dan `QLineEdit` adalah dasar dari form interaktif, sementara spanning pada grid memungkinkan desain yang fleksibel. Lanjutkan eksperimen dengan menambahkan komponen lain (misal: radio button atau dropdown) untuk memperkaya fungsi form.
**Selamat mencoba!** 🚀
---
**Bacaan Lanjutan:**
- [Dokumentasi Resmi QGridLayout](https://doc.qt.io/qt-5/qgridlayout.html)
- [Tutorial Validasi Input di PyQt5](https://www.pythonguis.com/tutorials/qlineedit-input-validation/)
Komentar
Posting Komentar