Staff Attendance

Staff Attendance

Above UI we are going to create by Tkinter for showing Staff Attendance Window in our Attendance 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("Attendance")

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

        # 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, corner_radius, 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)
    

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 Label
        add_heading_label(self.base_frame, self.color, AppConstant.FONT_SIZE, self.height, self.width)

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

        # Add check frame
        add_check_frame(self.base_frame, self.color, self.height, self.width)

        def add_check_frame(base_frame, color, height, width):
            sfw = width
            sfh = height * 0.87
            label_frame_search = LabelFrame(base_frame, text="Check",
                                            font=("Lucida Grande", AppConstant.FONT_SIZE - 6), pady=sfw * 2 / 100,
                                            padx=sfw * 2 / 100, bg=color)
            label_frame_search.place(width=sfw, height=sfh, x=0, y=height * 0.12)
    

Here we create a search bar


        self.ce_staff_var = CustomEntry(self.base_frame, 300, 55, 10, 2, self.color, "Search Staff",
                                        "images/ic_search.png")
        self.ce_staff_var.place(x=self.width * 5 / 100, y=self.height * 0.20)

        self.student_var = tk.StringVar

        self.ce_staff_var.entry.bind('', self.search_staff)
    

Here our customEntry class.


class CustomEntry(tk.Canvas):

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

        self.width = width
        self.height = height
        self.cornerradius = cornerradius
        self.padding = padding
        self.color = color

        original = Image.open(icon_path)
        resized = original.resize((int(height * 35 / 100), int(height * 35 / 100)), Image.ANTIALIAS)
        self.image = ImageTk.PhotoImage(resized)  # Keep a reference, prevent GC
    

        self.create_text(6, 7, anchor=W, font=font.Font(family="Lucida Grande", size=12, weight='bold'),
                         text=text, fill="#000000")
        self.create_image(10, height / 2 - self.image.width() / 2, image=self.image, anchor=NW)
        self.create_line(5, height - 8, width - 5, height - 8, fill="#808080")

        frame = Frame(parent,width=width * 86 / 100, height=height * 50 / 100, bg=color)
        self.entry = Entry(frame, bg=color, bd=0, highlightthickness=0,
                           font=font.Font(family="Lucida Grande", size=13, weight='normal'))

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

        self.create_window(width - width * 86 / 100 - 5, 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)
        

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_data')
        self.sql_output = cursor.fetchall()

        style = ttk.Style()
        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.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, 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(width=self.width * 92 / 100, height=self.height * 60 / 100,
                        x=self.width * 3 / 100, y=self.height * 35 / 100)
        self.tree["columns"] = "1", "2", "3", "4"
        self.tree.column("#1", width=128)
        self.tree.column("#0", width=0)

        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 * 96 / 100, y=self.height * 35 / 100, height=self.height * 60 / 100)

        self.tree.configure(yscrollcommand=vsb.set)

        self.tree.column("#1", anchor=tk.W)
        self.tree.column("#2", anchor=tk.W)
        self.tree.column("#3", anchor=tk.CENTER)
        self.tree.column("#4", 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.bind('<>', self.on_tree_click)

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

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


    def table_heading(self):

        heading_y = self.height * 30 / 100
        bg_color = "#FF4F00"
        text_color = "#000000"

        canvas = Canvas(self.base_frame, width=self.width * 92 / 100 - 5, height=self.height * 5 / 100)
        canvas.create_rectangle(0, 0, self.width * 92 / 100 - 3, 30, fill=bg_color)
        canvas.place(x=self.width * 3 / 100, y=heading_y - 3)

        staff_id_label = Label(self.base_frame, text="Staff Id",
                                 font=('Calibri', AppConstant.FONT_SIZE - 3, 'bold'), background=bg_color,
                                 foreground=text_color)
        staff_id_label.place(x=self.width * 3 / 100 + 45, y=heading_y, width=120)
        staff_id_label.configure(anchor="center")

        staff_name_label = Label(self.base_frame, text="Staff Name",
                                   font=('Calibri', AppConstant.FONT_SIZE - 3, 'bold'), background=bg_color,
                                   foreground=text_color)
        staff_name_label.place(x=self.width * 3 / 100 + 240, y=heading_y, width=120)
        staff_name_label.configure(anchor="center")

        staff_contact_label = Label(self.base_frame, text="Contact No",
                                      font=('Calibri', AppConstant.FONT_SIZE - 3, 'bold'), background=bg_color,
                                      foreground=text_color)
        staff_contact_label.place(x=self.width * 56 / 100, y=heading_y, width=120)
        staff_contact_label.configure(anchor="center")

        staff_email_label = Label(self.base_frame, text="Email Id",
                                    font=('Calibri', AppConstant.FONT_SIZE - 3, 'bold'), background=bg_color,
                                    foreground=text_color)
        staff_email_label.place(x=self.width * 77 / 100, y=heading_y, width=120)
        staff_email_label.configure(anchor="center")

Here the logic behind search and update table.


    def search_staff(self, *args):
        if self.ce_staff_var.entry.get() != "":
            self.tree.delete(*self.tree.get_children())
            conn = Util.connect_db()
            cursor = conn.cursor()
            cursor.execute("SELECT * FROM `staff_data` WHERE `staff_name` LIKE ? OR `staff_id` LIKE ?",
                           ('%' + str(self.ce_staff_var.entry.get()) + '%',
                            '%' + str(self.ce_staff_var.entry.get()) + '%'))
            fetch = cursor.fetchall()
            # print(fetch)
            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
                
            cursor.close()
            conn.close()
        else:
            self.reset_staff()

    def reset_staff(self):
        self.tree.delete(*self.tree.get_children())
        self.update_table_data()

    def update_table_data(self):
        conn = Util.connect_db()
        cursor = conn.cursor()
        cursor.execute('SELECT * FROM staff_data')
        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
            

when we click any record.


    def on_tree_click(self, *args):
        
        cur_item = self.tree.focus()
        AppConstant.STAFF_ID = self.tree.item(cur_item)["values"][0]
        AppConstant.STAFF_NAME = self.tree.item(cur_item)["values"][1]

        conn = Util.connect_db()
        cursor = conn.cursor()
        cursor.execute('SELECT * FROM attendance WHERE staff_id = ?', (self.tree.item(cur_item)["values"][0],))
        self.sql_output = cursor.fetchall()

        if len(self.sql_output) > 0:
            ShowDetails(self.root)
        else:
            messagebox.showinfo("Details", "Staff details not found")

        conn.commit()

    

At last we will manage closing of window


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

        self.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.