Payment

Payment

Above UI we are going to create by Tkinter for payment in our Hostel Management System desktop application. For that first we create a window and configure its title, size and color. Here we are creating a window at Top Level so we can add this window at the top of any other window.

    

    self.root = tk.Toplevel()
    self.root.title("Payment")

    self.root.configure(bg="#585858")
    self.root.resizable(width=0, height=0)
    win_width = 1280
    print(1024 * 56.25 / 100)
    win_height = int(1280 * 56.25 / 100)
    self.root.geometry(str(win_width) + "x" + str(win_height))

    # Get screen size
    screen_width = self.root.winfo_screenwidth()
    screen_height = self.root.winfo_screenheight()
    Util.set_font_size(screen_width, screen_height, win_width, win_height)

    self.width = win_width * 96 / 100
    self.height = win_height * 94 / 100
    

After creation of window, we will add a canvas background.

    
bg_canvas = RoundBackgroundFrame(self.root, self.width, self.height, padding, cornerradius, self.color,
                                         "#585858")
bg_canvas.place(width=self.width, height=self.height, x=win_width / 2 - self.width / 2,
                        y=win_height / 2 - self.height / 2)

class RoundBackgroundFrame(tk.Canvas):

    def __init__(self, parent, width, height, padding, cornerradius, color, bg):
        tk.Canvas.__init__(self, parent, borderwidth=0, relief="flat", highlightthickness=0, bg=bg)
        self.width = width
        self.height = height
        self.padding = padding
        self.cornerradius = cornerradius
        self.color = color

        original = Image.open("images/corner.png")
        resized = original.resize((int(40), int(40)), Image.ANTIALIAS)
        self.image_r_t = ImageTk.PhotoImage(resized)

        original = original.rotate(90, expand=0)
        resized = original.resize((int(40), int(40)), Image.ANTIALIAS)
        self.image_l_t = ImageTk.PhotoImage(resized)

        original = original.rotate(90, expand=0)
        resized = original.resize((int(40), int(40)), Image.ANTIALIAS)
        self.image_l_b = ImageTk.PhotoImage(resized)

        original = original.rotate(90, expand=0)
        resized = original.resize((int(40), int(40)), Image.ANTIALIAS)
        self.image_r_b = ImageTk.PhotoImage(resized)

        self.shape(width, height, padding, cornerradius, color)
        (x0, y0, x1, y1) = self.bbox("all")
        width = (x1 - x0)
        height = (y1 - y0)
        self.configure(width=width, height=height)

    def shape(self, width, height, padding, cornerradius, color):
        self.create_polygon((padding, height - cornerradius - padding, padding, cornerradius + padding,
                                    padding + cornerradius, padding, width - padding - cornerradius, padding,
                                    width - padding, cornerradius + padding, width - padding,
                                    height - cornerradius - padding, width - padding - cornerradius, height - padding,
                                    padding + cornerradius, height - padding), fill=color, outline=color)

        self.create_image(width - self.image_r_t.width(), 0, image=self.image_r_t, anchor=NW)
        self.create_image(0, 0, image=self.image_l_t, anchor=NW)
        self.create_image(0, height - self.image_l_b.width(), image=self.image_l_b, anchor=NW)
        self.create_image(width - self.image_r_b.width(), height - self.image_r_b.width(), image=self.image_r_b, anchor=NW)

    

Once your window is created with custom background, we will create a frame with some reduced dimensions.

    
    self.width = self.width * 98 / 100
    self.height = self.height * 96 / 100
    self.base_frame = Frame(self.root, width=self.width, height=self.height, bg=self.color)
    bg_canvas.create_window(self.width / 100, self.height * 2 / 100, anchor=NW, window=self.base_frame)

    # Add Heading Name
    add_heading_label(self.base_frame, self.color, 12, self.height, self.width)

    def add_heading_label(base_frame, color, font_size, height, width):
        label_heading = Label(base_frame, text="Payment", anchor=CENTER, bg=color,
                              font=("Lucida Grande", font_size + 6))
        label_heading.place(width=width * 90 / 100, height=height * 7 / 100, x=width * 5 / 100, y=height * 0.5 / 100)

    # Add line
    add_line_border(self.base_frame, self.color, self.height, self.width)

    def add_line_border(base_frame, color, height, width):
        line_canvas = Canvas(base_frame, bg=color, borderwidth=0, relief="flat", highlightthickness=0)
        line_canvas.place(width=width - 4, height=5, x=2, y=height * 10 / 100)
        line_canvas.create_line(0, 0, width, 0, fill="#787878")

    button_font = add_action_frame(self.base_frame, self.color, self.height, self.width)

    def add_action_frame(base_frame, color, height, width):
        afw = width * 0.35
        afh = height * 0.87
        button_font = ("Lucida Grande", AppConstant.FONT_SIZE - 6)
        label_frame_action = LabelFrame(base_frame, text="Actions", font=button_font, pady=afw * 2 / 100,
                                    padx=afw * 2 / 100, bg=color)
        label_frame_action.place(width=afw, height=afh, x=0, y=height * 0.12)
        return button_font



    add_search_frame(self.base_frame, button_font, self.color, self.height, self.width)

    def add_search_frame(base_frame, button_font, color, height, width):
        sfw = width * 0.638
        sfh = height * 0.87
        label_frame_search = LabelFrame(base_frame, text="Payment History", font=button_font, pady=sfw * 2 / 100,
                                    padx=sfw * 2 / 100, bg=color)
        label_frame_search.place(width=sfw, height=sfh, x=width * 0.36, y=height * 0.12)

        
    

Now we created UI in Action Frame.

    
    self.room_no_var = tk.StringVar()

    room_list_no = ["Select"]
    db = Util.connect_db()
    cursor = db.cursor()

    cursor.execute("SELECT * FROM room ")
    sql_output = cursor.fetchall()

    for data in sql_output:
        # room_list_no.append(data[0])
        room_list_no.append(data[0])
    # print(room_list_no)

    self.label_heading = Label(self.base_frame, text="Room No", anchor=CENTER, bg=self.color,
                           font=("Lucida Grande", AppConstant.FONT_SIZE - 6))
    self.label_heading.place(x=50, y=110)

    self.room_no = ttk.Combobox(self.base_frame, state="readonly", justify="center",
                            textvariable=self.room_no_var,
                            font=("Lucida Grande", AppConstant.FONT_SIZE))

    self.room_no.config(values=room_list_no)
    self.room_no.place(x=50, y=130)
    self.room_no.current(0)

    self.room_number = None
    self.room_no.bind("<>", self.get_room_data)

    self.label_month = Label(self.base_frame, text="Paid for", anchor=CENTER, bg=self.color,
                         font=("Lucida Grande", AppConstant.FONT_SIZE - 6))
    self.label_month.place(x=50, y=180)

    self.month_entry_var = tk.StringVar()
    self.month_entry = ttk.Combobox(self.base_frame, state="readonly", justify="center",
                                textvariable=self.month_entry_var,
                                font=("Lucida Grande", AppConstant.FONT_SIZE))
    self.month_entry['values'] = (
        "Select", "January", "February", "March", "April", "May", "June", "July",
        "August", "September", "October", "November", "December")
    self.month_entry.current(0)

    self.month_entry.place(x=50, y=200)

    self.room_rent = CustomEntrySimple(self.base_frame, 300, 60, ("Lucida Grande", AppConstant.FONT_SIZE - 6),
                                           self.color,
                                           "Amount")
    self.room_rent.place(x=50, y=260)

    self.std_id = CustomEntrySimple(self.base_frame, 300, 60, ("Lucida Grande", AppConstant.FONT_SIZE - 6),
                                        self.color,
                                        "Student Name")
    self.std_id.place(x=50, y=340)
    self.std_id.entry.config(state="normal")

    self.pay_button = RoundedButton(self.base_frame, 250, 130 / 2.56, self.color, "images/button3.png",
                                        "Pay",
                                        font=("Lucida Grande", AppConstant.FONT_SIZE - 2),
                                        command=self.pay_button_click)
    self.pay_button.place(x=75, y=self.height * 0.73)

        
    

Here our Custom Entry Class.

    
class CustomEntrySimple(tk.Canvas):

    def __init__(self, parent, width, height, font, color, text):
        tk.Canvas.__init__(self, parent, borderwidth=0, relief="flat", highlightthickness=0, bg=color)

        self.width = width
        self.height = height
        self.color = color

        self.create_text(6, 5, anchor=W, font=font, text=text, fill="#000000")
        self.create_line(5, height - 8, width - 5, height - 8, fill="#808080")

        frame = Frame(parent,width=width * 95 / 100, height=height * 50 / 100, bg=color)
        self.entry = Entry(frame, bg=color, bd=0, highlightthickness=0, font=font)

        self.entry.place(relwidth=1, relheight=1, x=0, y=0)

        self.create_window(6, height / 2 - (height * 50 / 100) / 2, anchor=NW, window=frame)
        self.update()

        (x0, y0, x1, y1) = self.bbox("all")
        width = (x1 - x0)
        height = (y1 - y0)
        self.configure(width=width, height=height)
        
    

Here create UI for History table.

    
        style = ttk.Style()
        # style.element_create("Custom.Treeheading.border", "from", "default")
        style.layout("Custom.Treeview.Heading", [
            ("Custom.Treeheading.cell", {'sticky': 'nswe'}),
            ("Custom.Treeheading.border", {'sticky': 'nswe', 'children': [
                ("Custom.Treeheading.padding", {'sticky': 'nswe', 'children': [
                    ("Custom.Treeheading.image", {'side': 'right', 'sticky': ''}),
                    ("Custom.Treeheading.text", {'sticky': 'we'})
                ]})
            ]}),
        ])
        #   style.configure("Custom.Treeview.Heading", background="blue", foreground="red", relief="flat")
        style.map("Custom.Treeview.Heading", relief=[('active', 'groove'), ('pressed', 'sunken')])
        style.configure("Custom.Treeview", highlightthickness=0, bd=0, font=('Calibri', 11), rowheight=30)

        self.table_heading()

        self.tree = ttk.Treeview(self.base_frame, height=13, show='tree', style="Custom.Treeview")
        self.tree.tag_configure('odd', background='#DFEBF6', foreground="#000000", )
        self.tree.tag_configure('even', background='#FFFFFF', foreground="#000000", )
        self.tree.place(x=self.width / 2 - 160, y=180)
        self.tree["columns"] = "1", "2", "3", "4", "5"
        self.tree.column("#1", width=120)
        self.tree.column("#0", width=0)
        self.tree.column("#2", width=110)
        self.tree.column("#3", width=160)
        self.tree.column("#4", width=180)
        self.tree.column("#5", width=160)

        vsb = ttk.Scrollbar(self.base_frame, orient="vertical", command=self.tree.yview)
        vsb.place(x=self.width - 24, y=180, height=430)

        self.tree.configure(yscrollcommand=vsb.set)
        self.tree.column("#1", anchor=tk.CENTER)
        self.tree.column("#2", anchor=tk.CENTER)
        self.tree.column("#3", anchor=tk.CENTER)
        self.tree.column("#4", anchor=tk.CENTER)
        self.tree.column("#5", anchor=tk.CENTER)

        self.tree.heading("#1", text="Student Id", anchor=tk.CENTER)
        self.tree.heading("#2", text="Name")
        self.tree.heading("#3", text="Contact No")
        self.tree.heading("#4", text="Email Id")
        self.tree.heading("#5", text="Address")

        # self.tree.bind('<>', self.on_tree_click)

        self.root.attributes('-alpha', 0.0)
        Util.center(self.root)
        self.root.attributes('-alpha', 1.0)

        
    

We have created our own heading for table, lets configure it.

    
def table_heading(self):

    heading_y = 150

    bg_color = "#2929ff"
    canvas = Canvas(self.base_frame, width=740, height=30)
    canvas.create_rectangle(0, 0, 740, 30, fill=bg_color)
    canvas.place(x=self.width / 2 - 163, y=heading_y - 3)

    room_no_label = Label(self.base_frame, text="Room No",
                         font=('Calibri', AppConstant.FONT_SIZE - 3, 'bold'), background=bg_color,
                         foreground="white")
    room_no_label.place(x=self.width / 2 - 130, y=heading_y, width=110)
    room_no_label.configure(anchor="center")

    paid_for_label = Label(self.base_frame, text="Paid for",
                           font=('Calibri', AppConstant.FONT_SIZE - 3, 'bold'), background=bg_color,
                           foreground="white")
    paid_for_label.place(x=self.width / 2 - 10, y=heading_y, width=100)
    paid_for_label.configure(anchor="center")

    paid_by_label = Label(self.base_frame, text="Paid By",
                              font=('Calibri', AppConstant.FONT_SIZE - 3, 'bold'), background=bg_color,
                              foreground="white")
    paid_by_label.place(x=self.width / 2 + 100, y=heading_y, width=140)
    paid_by_label.configure(anchor="center")

    paid_date_label = Label(self.base_frame, text="Paid Date",
                            font=('Calibri', AppConstant.FONT_SIZE - 3, 'bold'), background=bg_color,
                            foreground="white")
    paid_date_label.place(x=self.width / 2 + 265, y=heading_y, width=140)
    paid_date_label.configure(anchor="center")

    paid_amount_label = Label(self.base_frame, text="Paid Amount",
                           font=('Calibri', AppConstant.FONT_SIZE - 3, 'bold'), background=bg_color,
                           foreground="white")
    paid_amount_label.place(x=self.width / 2 + 425, y=heading_y, width=140)
    paid_amount_label.configure(anchor="center")

        
    

Here the logic of Pay button click.

    

    def pay_button_click(self):

        var = ""
        room_no = self.room_no_var.get()
        month = self.month_entry_var.get()
        paid_amount = self.room_rent.entry.get()
        std_id = self.std_id.entry.get()
        paid_date_time = datetime.datetime.today().strftime('%Y-%m-%d')
        is_month_entered = False

        if self.month_entry_var.get() == "Select":
            var += "Select Month, "
        else:
            month = self.month_entry_var.get()
            is_month_entered = True

        if is_month_entered:

            conn = Util.connect_db()
            cursor = conn.cursor()
            cursor.execute(
                'INSERT INTO rent_payment(room_number, paid_for, paid_by, paid_date_time, paid_amount) VALUES(?,?,?,?,?)',
                (room_no, month, std_id, paid_date_time, paid_amount))

            conn.commit()

            messagebox.showinfo("Success", "Payment successful")

            self.tree.delete(*self.tree.get_children())

            cursor.execute(
                "SELECT room_number, paid_for, paid_by, paid_date_time, paid_amount FROM rent_payment WHERE room_number = ?",
                (self.room_number,))
            self.sql_output = cursor.fetchall()

            for data in self.sql_output:
                self.tree.insert('', 'end', values=data)

            self.std_id.entry.delete(0, END)
            self.room_rent.entry.delete(0, END)
            self.month_entry.current(0)
            self.room_no.current(0)

        else:
            print(var)
            messagebox.showerror("showerror", var)
    
    
    

At last we will manage closing of window

    
    def on_closing():
            root.destroy()
            args[0].deiconify()

    root.protocol("WM_DELETE_WINDOW", on_closing)
                       

Programmer Mirta is for learning and training. Projects might be simple to improve learning. Projects are constantly reviewed to avoid errors, but we cannot assure full correctness of all content. While using Programmer Mitra, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 2021 by Programmer Mitra. All Rights Reserved.