Merancang Tampilan Form Pengelolaan Data

Form yang ditampilkan dalam latihan sebelumnya merupakan form kosong. Untuk latihan kali ini kita akan merancang form yang digunakan untuk pengelolaan data. Form yang dirancang ini akan menampilkan data mahasiswa (NIM, NAMA, ALAMAT) dalam bentuk daftar disertai dengan sejumlah tombol pengelolaannya (Tambah, Edit, Hapus, Refresh, Tutup).

cover

Tombol-tombol yang ada ketika diklik akan merespons dengan menampilkan kotak pesan yang berisi pesan "Under Construction". Di latihan-latihan berikutnya kita akan mengisi kode-kode untuk tombol-tombol ini. Tampilan yang dirancang seperti pada gambar berikut:



Untuk mewujudkan tampilan tersebut, kode di fungsi data() dalam latihan sebelumnya kita modifikasi menjadi seperti berikut:

def data():
    global win
    global formData
    global tv

    formData = tk.Toplevel(win)
    formData.title("Data Mahasiswa")
    # membuat kotak dalam form untuk tombol/entrian yang akan kita buat nantinya
    frame = tk.Frame(formData)

    tv = tk.ttk.Treeview(frame)
    tv['columns'] = ('Nim', 'Nama', 'Alamat')
    tv.heading("#0", text='No')
    tv.column("#0", anchor="w", width=50)
    tv.heading('Nim', text='Nim')
    tv.column('Nim', anchor='center', width=100)
    tv.heading('Nama', text='Nama')
    tv.column('Nama', anchor='center', width=200)
    tv.heading('Alamat', text='Alamat')
    tv.column('Alamat', anchor='center', width=300)

    

    btnFrame = tk.Frame(frame)

    # tv.grid(sticky=(N, S, W, E))
    # self.treeview = tv
    # self.grid_rowconfigure(0, weight=1)
    # self.grid_columnconfigure(0, weight=1)


    tambah = tk.Button(btnFrame, text="Tambah", width=15, command=tombol_tambah_click)
    edit = tk.Button(btnFrame, text="Edit", width=15, command=tombol_edit_click)
    hapus = tk.Button(btnFrame, text="Hapus", width=15, command=tombol_hapus_click)
    refresh = tk.Button(btnFrame, text="Refresh", width=15, command=tombol_refresh_click)
    tutup = tk.Button(btnFrame, text="Tutup", width=15, command=tombol_tutup_click)

    tv.pack()
    tambah.pack(side=tk.LEFT)
    edit.pack(side=tk.LEFT)
    hapus.pack(side=tk.LEFT)
    refresh.pack(side=tk.LEFT)
    tutup.pack(side=tk.LEFT)
    btnFrame.pack(side=tk.BOTTOM)
    frame.pack()

Ada tambahan untuk variabel tv yang kita buat global supaya bisa diakses dari fungsi-fungsi lain. Variabel tv ini merupakan sebuah treeview yang nanti akan berisi data-data mahasiswa yang dikelola dalam bentuk daftar. Tentu saja ada sejumlah alternatif lain untuk menampilkan data dalam bentuk daftar. Tetapi untuk saat ini kita gunakan yang termudah dengan menggunakan sebuah treeview.

Selain treeview tv, dalam kode penyusun tampilan di fungsi data() di atas terdapat 5 buah tombol yaitu Tambah, Edit, Hapus, Refresh, dan Tutup. Masing-masing tombol tersebut diatur ketika dipilih/diklik akana memanggil fungsi masing-masing. Tombol Tambah akan memanggil fungsin tombol_tambah_click(), tombol Edit akan memanggil fungsi tombol_edit_click(), tombol Hapus akan memanggil fungsi tombol_hapus_click(), tombol Refresh akan memanggil tombol_refresh_click(), dan tombol Tutup akan memanggil fungsi tombol_tutup_click(). Masing-masing fungsi ini perlu kita definisikan supaya tampilan kita berjalan sesuai dengan rancangan.

Rancangan kode untuk masing-masing fungsi yang melakukan respons terhadap pemilihan tombol seperti pada kode berikut:

def tombol_tambah_click():
    global formData
    msgbox.showinfo("Tambah Data", "Under Construction!", parent=formData)

def tombol_edit_click():
    global formData
    msgbox.showinfo("Edit Data", "Under Construction!", parent=formData)

def tombol_hapus_click():
    global formData
    msgbox.showinfo("Hapus Data", "Under Construction!", parent=formData)

def tombol_refresh_click():
    global formData
    global tv


    msgbox.showinfo("Refresh Data", "Under Construction!", parent=formData)

def tombol_tutup_click():
    global formData

    hasil = msgbox.askyesno("Tutup", "Anda yakin nutup form?", parent=formData)
    if hasil==True:
        formData.destroy()

Dari untaian kode-kode di atas, hanya tombol tutup yang akan merespons menutup form, sedangkan 4 tombol lainnya hanya akan menampilkan sebuah kotak pesan berisi rencana tombol tersebut akan digunakan sebagai apa. Di latihan-latihan berikutnya akan kita bahas rinciannya.

Kode lengkap untuk latihan kali ini bisa Anda lihat di kode berikut:

# simpan sebagai gui06.py
# jalankan dengan perintah python gui06.py

import tkinter as tk
import tkinter.ttk as ttk
import tkinter.messagebox as msgbox


def tombol_tambah_click():
    global formData
    msgbox.showinfo("Tambah Data", "Under Construction!", parent=formData)

def tombol_edit_click():
    global formData
    msgbox.showinfo("Edit Data", "Under Construction!", parent=formData)

def tombol_hapus_click():
    global formData
    msgbox.showinfo("Hapus Data", "Under Construction!", parent=formData)

def tombol_refresh_click():
    global formData
    global tv


    msgbox.showinfo("Refresh Data", "Under Construction!", parent=formData)

def tombol_tutup_click():
    global formData

    hasil = msgbox.askyesno("Tutup", "Anda yakin nutup form?", parent=formData)
    if hasil==True:
        formData.destroy()


def data():
    global win
    global formData
    global tv

    formData = tk.Toplevel(win)
    formData.title("Data Mahasiswa")
    # membuat kotak dalam form untuk tombol/entrian yang akan kita buat nantinya
    frame = tk.Frame(formData)

    tv = tk.ttk.Treeview(frame)
    tv['columns'] = ('Nim', 'Nama', 'Alamat')
    tv.heading("#0", text='No')
    tv.column("#0", anchor="w", width=50)
    tv.heading('Nim', text='Nim')
    tv.column('Nim', anchor='center', width=100)
    tv.heading('Nama', text='Nama')
    tv.column('Nama', anchor='center', width=200)
    tv.heading('Alamat', text='Alamat')
    tv.column('Alamat', anchor='center', width=300)

    

    btnFrame = tk.Frame(frame)

    # tv.grid(sticky=(N, S, W, E))
    # self.treeview = tv
    # self.grid_rowconfigure(0, weight=1)
    # self.grid_columnconfigure(0, weight=1)


    tambah = tk.Button(btnFrame, text="Tambah", width=15, command=tombol_tambah_click)
    edit = tk.Button(btnFrame, text="Edit", width=15, command=tombol_edit_click)
    hapus = tk.Button(btnFrame, text="Hapus", width=15, command=tombol_hapus_click)
    refresh = tk.Button(btnFrame, text="Refresh", width=15, command=tombol_refresh_click)
    tutup = tk.Button(btnFrame, text="Tutup", width=15, command=tombol_tutup_click)

    tv.pack()
    tambah.pack(side=tk.LEFT)
    edit.pack(side=tk.LEFT)
    hapus.pack(side=tk.LEFT)
    refresh.pack(side=tk.LEFT)
    tutup.pack(side=tk.LEFT)
    btnFrame.pack(side=tk.BOTTOM)
    frame.pack()


def keluar():
    global win
    win.quit()


win = tk.Tk()
win.title("Sistem Informasi")
win.geometry('800x600')
menubar = tk.Menu(win)

appmenu = tk.Menu(menubar)
appmenu.add_command(label='Data Mahasiswa', command=data)
appmenu.add_separator()
appmenu.add_command(label='Keluar', command=keluar)

menubar.add_cascade(label='Data', menu=appmenu)
win.config(menu=menubar)
win.mainloop()

Hasil menjalankan kode di atas sesuai dengan format perintah yang diberikan akan terlihat seperti gambar berikut:




Selamat Mencoba!