Search Book

Above UI we are going to create by Tkinter for searching book 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.Toplevel(self)

        root.title("Search Books")

        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))
        Util.center(root)

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

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


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

    def add_search_frame(base_frame, color, height, width):
        sfw = width * 0.94
        sfh = height * 0.87
        button_font = ("Lucida Grande", AppConstant.FONT_SIZE - 6)

        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.03, y=height * 0.12)

        
    

Now Create a Search UI for Search Book in database. First we create a entry box to search Book with Book Id and Book Name.

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

        self.ce_book_var.entry.bind('', self.search_book)
        

Here's the logic to search data in table

    
    def search_book(self, *arg):

        # self.hide_edit_button()

        if self.ce_book_var.entry.get() != "":
            self.tree.delete(*self.tree.get_children())
            conn = Util.connect_db()
            cursor = conn.cursor()
            cursor.execute(
                "SELECT book_number, book_name, book_authorname, book_cost, book_count FROM `book` WHERE `book_name` LIKE ? OR `book_number` LIKE ?",
                ('%' + str(self.ce_book_var.entry.get()) + '%',
                 '%' + str(self.ce_book_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
            cursor.close()
            conn.close()
        else:
            self.reset_book()

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

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 book_number, book_name, book_authorname, book_count, book_cost FROM book')
        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.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=100, y=230)
        self.tree["columns"] = "1", "2", "3", "4", "5", "6"
        self.tree.column("#0", width=0)
        self.tree.column("#1", width=110)
        self.tree.column("#2", width=240)
        self.tree.column("#3", width=180)
        self.tree.column("#4", width=150)
        self.tree.column("#5", width=150)
        self.tree.column("#6", width=165)

        self.table_heading()

        vsby = ttk.Scrollbar(self.base_frame, orient="vertical", command=self.tree.yview)
        vsby.place(x=self.width - 105, y=230, height=390)
        self.tree.configure(yscrollcommand=vsby.set)

        self.update_table_data()

        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.column("#6", anchor=tk.CENTER)
        self.tree.heading("#1", text="Book Id", anchor=tk.CENTER)
        self.tree.heading("#2", text="Name")
        self.tree.heading("#3", text="Author")
        self.tree.heading("#4", text="Total Count")
        self.tree.heading("#5", text="Available Count")
        self.tree.heading("#5", text="Price")
        self.tree.heading("#5", text="Price")

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

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


                

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

    
    def table_heading(self):

        heading_y = 203
        bg_color = "#2929ff"
        text_color = "#ffffff"

        canvas = Canvas(self.base_frame, width=995, height=30)
        canvas.create_rectangle(0, 0, 1000, 30, fill=bg_color)
        canvas.place(x=100, y=heading_y - 3)

        book_id_label = Label(self.base_frame, text="Book Id",
                            font=('Calibri', AppConstant.FONT_SIZE - 3, 'bold'), background=bg_color,
                            foreground=text_color)
        book_id_label.place(x=115, y=heading_y, width=120)
        book_id_label.configure(anchor="center")

        book_name_label = Label(self.base_frame, text="Name",
                            font=('Calibri', AppConstant.FONT_SIZE - 3, 'bold'), background=bg_color,
                            foreground=text_color)
        book_name_label.place(x=290, y=heading_y, width=120)
        book_name_label.configure(anchor="center")

        book_authorname_label = Label(self.base_frame, text="Author Name",
                            font=('Calibri', AppConstant.FONT_SIZE - 3, 'bold'), background=bg_color,
                            foreground=text_color)
        book_authorname_label.place(x=485, y=heading_y, width=150)
        book_authorname_label.configure(anchor="center")

        book_price = Label(self.base_frame, text="Price",
                            font=('Calibri', AppConstant.FONT_SIZE - 3, 'bold'), background=bg_color,
                            foreground=text_color)
        book_price.place(x=self.width / 2 + 65, y=heading_y, width=120)
        book_price.configure(anchor="center")

        book_total_count = Label(self.base_frame, text="Total Book",
                            font=('Calibri', AppConstant.FONT_SIZE - 3, 'bold'), background=bg_color,
                            foreground=text_color)
        book_total_count.place(x=self.width / 2 + 210, y=heading_y, width=120)
        book_total_count.configure(anchor="center")

        book_total_count = Label(self.base_frame, text="Available",
                            font=('Calibri', AppConstant.FONT_SIZE - 3, 'bold'), background=bg_color,
                            foreground=text_color)
        book_total_count.place(x=self.width / 2 + 358, y=heading_y, width=120)
        book_total_count.configure(anchor="center")
        

At last we will manage closing of window

    
    def on_closing():
                        
        root.destroy()
        args[0].deiconify()
                       
    root.protocol("WM_DELETE_WINDOW", on_closing)