Add/Edit Staf

Add Staff

Above UI we are going to create by Tkinter for adding Staff in our Library 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.

    
        root = Tk()
        root.title("Add/Edit Staff")

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

        # Get screen size
        screen_width = root.winfo_screenwidth()
        screen_height = 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(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)

            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(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, AppConstant.FONT_SIZE, self.height, self.width, root)

    def add_heading_label(base_frame, color, font_size, height, width, root):
    label_heading = Label(base_frame, text="Add/Edit Staff", 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)

    button_logout = RoundedButton(base_frame, 130, 130 / 4.2, color, "images/button3.png", "Logout",
                                  font=("Lucida Grande", font_size - 6),
                                  command=lambda: login_click(root))
    #  button_logout.pack(side="right", fill=None, expand=False)
    button_logout.place(x=width - 150, y=25)

    # 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="Search", 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)
        
    

So we are done with all frame and background UI. Now we will add all the entry box and submit button in action frame to add Staff.

    
        # Add Staff UI
        self.std_name = CustomEntrySimple(self.base_frame, 300, 60, ("Lucida Grande", AppConstant.FONT_SIZE - 6),
                                          self.color,
                                          "Staff Name")
        self.std_name.place(x=50, y=150)

        self.std_contact = CustomEntrySimple(self.base_frame, 300, 60, ("Lucida Grande", AppConstant.FONT_SIZE - 6),
                                             self.color,
                                             "Contact No")
        self.std_contact.place(x=50, y=230)

        self.std_email = CustomEntrySimple(self.base_frame, 300, 60, ("Lucida Grande", AppConstant.FONT_SIZE - 6),
                                           self.color,
                                           "Email ID")
        self.std_email.place(x=50, y=310)

        self.std_pass = CustomEntrySimple(self.base_frame, 300, 60, ("Lucida Grande", AppConstant.FONT_SIZE - 6),
                                          self.color,
                                          "Password")
        self.std_pass.place(x=50, y=390)

        
    

Here is our class CustomEntrySimple:

    
    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)
            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)
        

Create a "Submit" button and show it.

    
    self.show_add_staff_button()

    def show_add_staff_button(self):
        self.add_button = RoundedButton(self.base_frame, 250, 130 / 2.56, self.color, "images/button3.png",
                                        "ADD STAFF",
                                        font=("Lucida Grande", AppConstant.FONT_SIZE - 2),
                                        command=self.add_staff_click)
        self.add_button.place(x=75, y=self.height * 0.75)

    

Now Create a Search UI for already added Staff in Database. First we create a entry box to search Staff with Staff Id and Staff Name.

    
    self.ce_student_var = CustomEntry(self.base_frame, 300, 55, 10, 2, self.color, "Search Staff",
                                          "images/ic_search.png")
    self.ce_student_var.place(x=self.width / 2 - 150, y=self.height * 0.20)
    self.student_var = tk.StringVar
    self.ce_student_var.entry.bind('', self.search_staff)
                        

Here's the logic to search data in table

    
    def search_staff(self, *arg):

        # self.hide_edit_button()

        if self.ce_student_var.entry.get() != "":
            self.tree.delete(*self.tree.get_children())
            conn = Util.connect_db()
            cursor = conn.cursor()
            cursor.execute("SELECT * FROM `staff` WHERE `staff_name` LIKE ? OR `staff_id` LIKE ?",
                        ('%' + str(self.ce_student_var.entry.get()) + '%',
                            '%' + str(self.ce_student_var.entry.get()) + '%'))
            fetch = cursor.fetchall()

            count = 0
            for data in fetch:
                if count % 2 == 0:
                    self.tree.insert('', 'end', values=data, tags=('even',))
                else:
                    self.tree.insert('', 'end', values=data, tags=('odd',))
                count = count + 1

            # for data in fetch:
            # self.tree.insert('', 'end', values=data)
            cursor.close()
            conn.close()
        else:
            self.reset_book()

    def reset_book(self):
        self.tree.delete(*self.tree.get_children())
        self.update_table_data()
l
                            

We have created a Database named "library.db", lets connect that database and put that code in seperate class "Util" because we are going to use it multiple time in our project.

    
    class Util:

        @staticmethod
        def connect_db():
            db = None
            try:
                db = sql.connect("library.db")
                return db
            except sql.Error as error:
                print("Failed to insert data into sqlite table", error)
                

Fetch data from database and show it in table form with the use of "Treeview" of Tkinter.

    
        db = Util.connect_db()
        cursor = db.cursor()

        cursor.execute('SELECT * FROM staff')
        self.sql_output = cursor.fetchall()

        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=230)
        self.tree["columns"] = "1", "2", "3", "4", "5"
        self.tree.column("#1", width=80)
        self.tree.column("#0", width=0)
        self.tree.column("#2", width=100)
        self.tree.column("#3", width=185)
        self.tree.column("#4", width=185)
        self.tree.column("#5", width=185)

        count = 0
        for data in self.sql_output:
            if count % 2 == 0:
                self.tree.insert('', 'end', values=data, tags=('even',))
            else:
                self.tree.insert('', 'end', values=data, tags=('odd',))
            count = count + 1

        vsb = ttk.Scrollbar(self.base_frame, orient="vertical", command=self.tree.yview)
        vsb.place(x=self.width - 24, y=200, 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="Staff 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="Password")

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

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

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

    
    def table_heading(self):

        heading_y = 200
        student_id_label = Label(self.base_frame, text="Staff Id", width=12,
                                     font=('Calibri', AppConstant.FONT_SIZE - 3, 'bold'), background='white',
                                     foreground="black")
        student_id_label.place(x=self.width / 2 - 160, y=heading_y)
        student_id_label.configure(anchor="center")

        student_name_label = Label(self.base_frame, text="Name", width=13,
                                       font=('Calibri', AppConstant.FONT_SIZE - 3, 'bold'), background='white',
                                       foreground="black")
        student_name_label.place(x=self.width / 2 - 70, y=heading_y)
        student_name_label.configure(anchor="center")

        student_contact_label = Label(self.base_frame, text="Email id", width=13,
                                          font=('Calibri', AppConstant.FONT_SIZE - 3, 'bold'), background='white',
                                          foreground="black")
        student_contact_label.place(x=self.width / 2 + 203 - 130, y=heading_y)
        student_contact_label.configure(anchor="center")

        student_email_label = Label(self.base_frame, text="Contact No", width=13,
                                        font=('Calibri', AppConstant.FONT_SIZE - 3, 'bold'), background='white',
                                        foreground="black")
        student_email_label.place(x=self.width / 2 + 390 - 130, y=heading_y)
        student_email_label.configure(anchor="center")

        staff_password_label = Label(self.base_frame, text="Password", width=13,
                                         font=('Calibri', AppConstant.FONT_SIZE - 3, 'bold'), background='white',
                                         foreground="black")
        staff_password_label.place(x=self.width / 2 + 430, y=heading_y)
        staff_password_label.configure(anchor="center")

        

UI part is completed, lets move to funtionality. First we need to add click on "Add Staff" button.

    
    def add_staff_click(self):
        var = ""
        student_email = ""
        student_name = ""
        student_contact = ""
        student_pass = ""
        is_student_pass = False
        is_name_entered = False
        is_contact_number_entered = False
        is_email_id_entered = False

        if self.std_email.entry.get() == "" or self.std_email.entry.get() == " ":
            var += "Email Should not be empty, "
        else:
            student_email = self.std_email.entry.get()
            is_email_id_entered = True

        if self.std_name.entry.get() == "" or self.std_name.entry.get() == " ":
            var += "Name Should not be empty, "
        else:
            student_name = self.std_name.entry.get()
            is_name_entered = True

        if self.std_contact.entry.get() == "" or self.std_contact.entry.get() == " ":
            var += "Contact Should not be empty, "
        else:
            student_contact = self.std_contact.entry.get()
            is_contact_number_entered = True

        if self.std_pass.entry.get() == "" or self.std_pass.entry.get() == " ":
            var += "Contact Should not be empty, "
        else:
            student_pass = self.std_pass.entry.get()
            is_student_pass = True

        print(student_email, student_contact, student_name, student_pass)

        if is_name_entered and is_email_id_entered and is_contact_number_entered and is_student_pass:
            conn = Util.connect_db()
            cursor = conn.cursor()

            key = "STAFF_LAST_COUNT"

            cursor.execute('SELECT value FROM system_setting WHERE key IS ?', (key,))
            rows = cursor.fetchone()
            print(rows[0])

            id_count = Util.convert_string_to_int(rows[0]) + 1

            student_id = get_staff_id(id_count) + str(id_count)

            cursor.execute(
                'INSERT INTO staff(staff_id, staff_name, staff_contact_number, staff_email_id,staff_password) VALUES(?,?,?,?,?)',
                (student_id, student_name, student_contact, student_email, student_pass))

            conn.commit()

            messagebox.showinfo("Success", "Student has been added successfully")
            self.std_email.entry.delete(0, 'end')
            self.std_contact.entry.delete(0, 'end')
            self.std_name.entry.delete(0, 'end')
            self.std_pass.entry.delete(0, 'end')

            self.std_name.entry.focus()

            cursor.execute("UPDATE system_setting SET value = ? WHERE key = ?",
                           (id_count, key,))
            conn.commit()

            cursor.execute('SELECT * FROM staff')
            self.sql_output = cursor.fetchall()
            self.tree.delete(*self.tree.get_children())
            for data in self.sql_output:
                self.tree.insert('', 'end', values=data)

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

            

When we click on "Add Staff", data will be added to database, after that we need to update the data on UI.

    
    def update_table_data(self):
        conn = Util.connect_db()
        cursor = conn.cursor()
        cursor.execute('SELECT * FROM staff')
        self.sql_output = cursor.fetchall()

        count = 0
        for data in self.sql_output:
            if count % 2 == 0:
                self.tree.insert('', 'end', values=data, tags=('even',))
            else:
                self.tree.insert('', 'end', values=data, tags=('odd',))
            count = count + 1

    

To edit and delete book on click on table row, we need to show Edit And Delete Button.

    
    def on_tree_click(self, *args):
        self.show_edit_button()
        self.show_delete_button()

    def show_edit_button(self, *args):
        self.edit_button = RoundedButton(self.base_frame, 110, 130 / 3.75, self.color, "images/button3.png",
                                         "EDIT",
                                         font=("Lucida Grande", AppConstant.FONT_SIZE - 4),
                                         command=lambda: self.edit_staff(self.height, self.color))
        self.edit_button.place(x=self.width / 2 + 240, y=self.height * 0.20)

    def show_delete_button(self, *args):
        self.delete_button = RoundedButton(self.base_frame, 110, 130 / 3.75, self.color, "images/button3.png",
                                           "DELETE",
                                           font=("Lucida Grande", AppConstant.FONT_SIZE - 4),
                                           command=self.delete_staff)
        self.delete_button.place(x=self.width / 2 + 420, y=self.height * 0.20)
    
    
    def edit_staff(self, height, color):

        cur_item = self.tree.focus()

        self.std_name.entry.delete(0, END)
        self.std_contact.entry.delete(0, END)
        self.std_email.entry.delete(0, END)
        self.std_pass.entry.delete(0, END)

        self.std_name.entry.insert(0, self.tree.item(cur_item)["values"][1])
        self.std_contact.entry.insert(0, self.tree.item(cur_item)["values"][3])
        self.std_email.entry.insert(0, self.tree.item(cur_item)["values"][2])
        self.std_pass.entry.insert(0, self.tree.item(cur_item)["values"][4])

        self.add_button.place_forget()

        student_id = self.tree.item(cur_item)["values"][0]

        self.hide_edit_button()

        self.update_button = RoundedButton(self.base_frame, 170, 130 / 2.56, color, "images/button3.png", "UPDATE",
                                           font=("Lucida Grande", AppConstant.FONT_SIZE - 2),
                                           command=lambda: self.update_staff_click(student_id))
        self.update_button.place(x=25, y=height * 0.75)

        self.cancel_button = RoundedButton(self.base_frame, 170, 130 / 2.56, color, "images/button3.png", "CANCEL",
                                           font=("Lucida Grande", AppConstant.FONT_SIZE - 2),
                                           command=self.cancel_button_click)
        self.cancel_button.place(x=220, y=height * 0.75)
    

Implement Update And Cancel Button functionality

    
    def update_staff_click(self, student_id):
        var = ""
        student_email = ""
        student_name = ""
        student_contact = ""
        student_pass = ""
        is_student_pass = False
        is_name_entered = False
        is_contact_number_entered = False
        is_email_id_entered = False

        if self.std_email.entry.get() == "" or self.std_email.entry.get() == " ":
            var += "Email Should not be empty, "
        else:
            student_email = self.std_email.entry.get()
            is_email_id_entered = True

        if self.std_name.entry.get() == "" or self.std_name.entry.get() == " ":
            var += "Name Should not be empty, "
        else:
            student_name = self.std_name.entry.get()
            is_name_entered = True

        if self.std_contact.entry.get() == "" or self.std_contact.entry.get() == " ":
            var += "Contact Should not be empty, "
        else:
            student_contact = self.std_contact.entry.get()
            is_contact_number_entered = True

        if self.std_pass.entry.get() == "" or self.std_pass.entry.get() == " ":
            var += "Name Should not be empty, "
        else:
            student_pass = self.std_pass.entry.get()
            is_student_pass = True

        print(student_email, student_contact, student_name, student_pass)

        if is_name_entered and is_email_id_entered and is_contact_number_entered and is_student_pass:
            conn = Util.connect_db()
            cursor = conn.cursor()
            cursor.execute(
                "UPDATE staff SET staff_name = ?, staff_contact_number = ?, staff_email_id = ?, staff_password= ?  WHERE staff_id = ?",
                (student_name, student_contact, student_email, student_pass, student_id))
            conn.commit()

            self.std_email.entry.delete(0, 'end')
            self.std_contact.entry.delete(0, 'end')
            self.std_name.entry.delete(0, 'end')
            self.std_pass.entry.delete(0, 'end')

            messagebox.showinfo("Success", "Staff detail has been updated successfully")

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

            self.add_button = RoundedButton(self.base_frame, 250, 130 / 2.56, self.color, "images/button3.png",
                                            "ADD STAFF",
                                            font=("Lucida Grande", AppConstant.FONT_SIZE - 2),
                                            command=self.add_staff_click)
            self.add_button.place(x=75, y=self.height * 0.75)

            self.hide_edit_button()
            self.cancel_button.place_forget()
            self.update_button.place_forget()

    def cancel_button_click(self):

        self.std_email.entry.delete(0, 'end')
        self.std_contact.entry.delete(0, 'end')
        self.std_name.entry.delete(0, 'end')

        self.show_add_staff_button()

        #  self.hide_edit_button()
        self.show_edit_button()
        self.cancel_button.place_forget()
        self.update_button.place_forget()

        print("cancel")
    

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.