First Time Making GUI (Graphical User Interface) Application With Python

Source : Tkinter based GUI- Application form — IoTEDU (iot4beginners.com)

Introduction

Hello this is the first time i write this article in the medium website.

This Article will be talking about how i make a simple crud gui application with python programming language

Python is a popular and versatile programming language that can be used for various purposes, such as web development, data analysis, machine learning, and more. But did you know that you can also use Python to create graphical user interfaces (GUIs) for your applications?

A GUI is a way of interacting with a computer program using graphical elements, such as windows, buttons, menus, icons, and so on. A GUI can make your application more user-friendly and appealing, as well as provide more functionality and feedback to the user.

In this article, you will learn how to create a simple GUI application with Python using one of its most widely used GUI frameworks: Tkinter. Tkinter is a standard library module that provides a set of classes and functions for creating and managing GUIs based on the Tk toolkit. Tkinter is cross-platform, meaning that it can run on Windows, Linux, and Mac OS.

Get David Aditya Susanto’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

To follow along with this article, you will need to have Python 3 installed on your computer. Make sure to get standard package manager for python as well like pip or conda to make sure you could install Tkinter Properly. You will also need a code editor or an integrated development environment (IDE) of your choice like Visual Studio Code, Sublime Text, etc.

Setup In The New Python File

After installing the requirements, first open your code editor and create a new python file in it. At the first row ensure that you include the following syntax

import tkinter

This represents the fundamental code requirement for creating a Windows GUI using Python.

# create a windows
root = tkinter.Tk()
# config icon windows
root.iconbitmap("Path Into Your Icon File")
# config size windows
# <width>x<height>+<x_position>+<y_position>
root.geometry("1280x720+150-50")   
# make a windows size fixed
root.maxsize(1280, 720)
root.minsize(1280, 720)
# disable maximize and resize capabilities 
# you don't need to setup code below
# if you want your code to be resizable
root.resizable(False, False)
# config title windows
root.title("Rent A Car (Personal Project)")
# config background color windows
root.config(bg="#4a9c46")

# create your code here

# make a windows loop
root.mainloop()

This Is The Result

Method Design Placement In Tkinter

There is some method to do the placement design in tkinter but i will show you only the method i am using in my project is the GRID. So basically you defined row, and column like the picture below:

From Tkinter Grid Geometry Manager (pythontutorial.net)

So For Example If I want to add 4 Square Column 0,0;0,1;1,0;1,1 then the code will look like this:

first_frame = Frame(root, width=200, height=200, bg='grey')
first_frame.grid(row=0, column=0, padx=40, pady=50) #0,0
second_frame = Frame(root, width=200, height=200, bg='grey')
second_frame.grid(row=0, column=1, padx=40, pady=50) #0,1
third_frame = Frame(root, width=200, height=200, bg='grey')
third_frame.grid(row=1, column=0, padx=40, pady=50) #1,0
fourth_frame = Frame(root, width=200, height=200, bg='grey')
fourth_frame.grid(row=1, column=1, padx=40, pady=50) #1,1

# You really need "from tkinter import *" to make this work.

This is the result

Make The Button That Do Change The View

So i will add the button that make the view like the image above disappear and change it with the new view. here is the code:

def button_click():
    fourth_frame.destroy() # Destroy the fourth frame
    third_frame.destroy() # Destroy the third frame
    # Create a new label
    first_label = Label(root, text="You Click The Button", bg='grey') 
    first_label.grid(row=0, column=2, padx=40, pady=50) # Place the label

first_button = Button(root, text="Click Me!", command=button_click)
first_button.grid(row=2, column=0, padx=40, pady=50)

This is the result

Optional Object From Tkinter That Make Input More Useful (Personal)

Here is the object that consider needed when creating a CRUD GUI python application

• Treeview Widget

first_frame = Frame(root, width=1100, height=600, bg='grey')
first_frame.grid(row=0, column=0, padx=40, pady=50)
tree_scroll_y = Scrollbar(first_frame)
tree_scroll_x = Scrollbar(first_frame, orient='horizontal')
tree_scroll_x.pack(side=BOTTOM, fill=X)
tree_scroll_y.pack(side=RIGHT, fill=Y)
my_tree = ttk.Treeview(first_frame)
my_tree.pack(side=LEFT, fill=BOTH, expand=True)
my_tree.configure(yscrollcommand=tree_scroll_y.set)
tree_scroll_y.configure(command=my_tree.yview)
my_tree.configure(xscrollcommand=tree_scroll_x.set)
tree_scroll_x.configure(command=my_tree.xview)
my_tree['columns'] = ('NIK', 'Name', 'Car', 'DateIn', 'DateOut', 'Price', 'Status')
my_tree.heading('#0', text='No')
my_tree.column('#0', width=50)
my_tree.heading('NIK', text='NIK')
my_tree.column('NIK', width=150)
my_tree.heading('Name', text='Name')
my_tree.column('Name', width=150)
my_tree.heading('Car', text='Car')
my_tree.column('Car', width=150)
my_tree.heading('DateIn', text='Date In')
my_tree.column('DateIn', width=150)
my_tree.heading('DateOut', text='Date Out')
my_tree.column('DateOut', width=150)
my_tree.heading('Price', text='Harga (Rupiah)')
my_tree.column('Price', width=150)
my_tree.heading('Status', text='Status')
my_tree.column('Status', width=100)

# Need "from tkinter import ttk" to make the code working

This is the result (Data Not Included)

• Options Button

# create a variable to store the selected value
selected_value = tkinter.StringVar()

# create an options button with some sample values
options = ["Option 1", "Option 2", "Option 3"]
option_menu = tkinter.OptionMenu(root, selected_value, "", *options)
option_menu.configure(font=("Arial", 14), background="white", foreground="black", borderwidth=2, relief="groove", width=10)
option_menu.pack()

This is the result

• Date Input Button

import tkcalendar
cal = tkcalendar.Calendar(root, selectmode="day", year=2020, month=5, day=22)
cal.pack()

This is the result

Implementation in the form input

top_frame = Frame(root, width=1175, height=50, bg='grey')
top_frame.grid(row=0, column=0, padx=100, pady=30)

label_nama = Label(top_frame, text="Nama", bg='grey', font=("Helvetica", 20))
label_nama.grid(row=1, column=0, padx=40, pady=10)
label_mobil = Label(top_frame, text="Mobil", bg='grey', font=("Helvetica", 20))
label_mobil.grid(row=2, column=0, padx=40, pady=10)
label_harga = Label(top_frame, text="Harga (Rupiah)", bg='grey', font=("Helvetica", 20))
label_harga.grid(row=3, column=0, padx=40, pady=10)
label_tanggal_masuk = Label(top_frame, text="Tanggal Masuk", bg='grey', font=("Helvetica", 20))
label_tanggal_masuk.grid(row=4, column=0, padx=40, pady=10)
label_tanggal_keluar = Label(top_frame, text="Tanggal Keluar", bg='grey', font=("Helvetica", 20))
label_tanggal_keluar.grid(row=5, column=0, padx=40, pady=10)
label_status = Label(top_frame, text="Status", bg='grey', font=("Helvetica", 20))
label_status.grid(row=6, column=0, padx=40, pady=10)

entry_nama = Entry(top_frame, width=52, validate="key")
entry_nama.config(font=("Arial", 14), bg="white", fg="black", bd=2, relief="groove")
entry_nama.grid(row=1, column=1, padx=40, pady=10)
entry_mobil = Entry(top_frame, width=52)
entry_mobil.config(font=("Arial", 14), bg="white", fg="black", bd=2, relief="groove")
entry_mobil.grid(row=2, column=1, padx=40, pady=10)      
entry_harga = Entry(top_frame, width=52)    
entry_harga.config(font=("Arial", 14), bg="white", fg="black", bd=2, relief="groove")    
entry_harga.grid(row=3, column=1, padx=40, pady=10)    
entry_tanggal_masuk = DateEntry(top_frame, width=50, background='darkblue', foreground='white', borderwidth=2, sticky='w')    
entry_tanggal_masuk.config(font=("Arial", 14))    
entry_tanggal_masuk.grid(row=4, column=1, padx=40, pady=10)
entry_tanggal_keluar = DateEntry(top_frame, width=50, background='darkblue', foreground='white', borderwidth=2, sticky='w')
entry_tanggal_keluar.config(font=("Arial", 14))
entry_tanggal_keluar.grid(row=5, column=1, padx=40, pady=10)
entry_status = tkinter.StringVar()
options = ["Progress", "Selesai"]
entry_status_options = tkinter.OptionMenu(top_frame, entry_status, "", *options)
entry_status_options.configure(font=("Arial", 14), background="white", foreground="black", borderwidth=2, relief="groove", width=48)
entry_status_options.grid(row=6, column=1, padx=40, pady=10)
button_add = Button(top_frame, text="Add", width=30, height=3)
button_add.grid(row=7, column=0, padx=10, pady=30)
button_exit = Button(top_frame, text="Exit", width=10, height=1)
button_exit.grid(row=0, column=2, padx=30, pady=10)

Result Form

Conclusion

With all of that, I’ve already shown you some tips on how to do it. I have already completed the project and published the code on GitHub. If you haven’t already, you can check it out here: GitHub link. Thank you, guys, for reading this article. Sorry for any misinformation or something. Thank you so much, and have a nice day.

Reference:

1. Tkinter Layouts, designing Python GUI (pythonguis.com)
2. Python Tkinter Table Tutorial — Python Guides