1.Build a Retail Billing System using Python Tkinter GUI - Step-by-Step Tutorial

my name is faizan Khan and in this video we are going to see how we can build this retail Billing System step by step from scratch so let me firstly give you a quick demonstration of how this project works firstly we need to enter customer details so if you are not going to enter these details then you won't be able to generate the pill thank you it says customer details required so I'll enter my name and then some random phone number after that we need to enter the quantity of the products that you want to purchase for example face cream I want to hair gel I want one then from grocery I'll select Dal as two quantity then sugar as three quantity from cold Rings I'll select Pepsi as one Coca-Cola S2 after this we have to click on this total which simply provides you the total cosmetic price total grocery price and total cold ring price and here some tax is added after this we can click on this bill so this will generate the bill inside this bill area and it will ask whether you want to save this bill or not so I'm gonna save it so once I click on see this bill with this bill number which is random is saved successfully after that you can send this bill to any email address for that you have to click on this email here you have to provide the sender's email means your email and your password and then to whom you want to send this bill okay that person email address you have to mention here after you enter you can click on the send button it says bill is successfully sent we can check it so I'll open my Google Chrome and will open Gmail as you can see that we have received the bill with Bill number 39360 okay after that we have this print button on clicking this print button if your printer is connected with your PC then this bill will be printed out here you just need to enter the file name in which this bill will be saved it will be a PDF file so you can simply enter any name once you will click save if your printer is connected this bill will be printed and at last we have the square button once you'll click on it everything will be cleared so do you really want to clear yes so you can see everything is cleared after that we have this search option here so whatever bills you have saved you can search them and open them inside this bill area for example let me show you which Bill numbers are saved already so we have two bills here I will be opening this one two seven six five so here I'll search for two seven six five once you search it you can see that will as open inside this bill area okay and at last what we will see we will see how we can create exe file of our project okay and we'll see how we can install it in our PC so you need two things to start with this project firstly is the python interpreter and then any IDE where you will write your code okay I'm gonna use pie charm I will be providing you the link in the description of this video from there you can watch and download and install so if you are using pycharm what you have to do go to file select new project give a project folder name here it can be billing project from here you need to select the python interpreter uh the latest one you can go with I have three interpreters installed so I'll select the latest one which is 3.10 okay 3.10 after that you just have to click on this create button I want this project to open on a new window so I'll select new window so once the project setup is done you will see something like this now you have to create a python file in which you will write the code so just right click on this project folder name go to new and select python file here you have to provide any python file name I'll go with name so this is your python file inside which you will write your python code so if you see this original project firstly we will be designing this GUI okay so for that we have one module in Python which is TK enter that will help us to create graphical user interface very easily we just need to import it and use its classes and methods so let's import that in our code so we'll write from TK enter import asterisk so this line means that we are importing all the classes and methods that are present inside this decanter module okay assume decanter as a file inside which we have some classes and methods that will help in creating graphical user interface very easily so firstly what we have to do we have to create a window right so for creating window we have a class inside this decanter module we just need to create object of that class so how do we do that we write object name as root and we assign this class to this object root okay so this is the way so this TK class will help in creating our window okay we are simply creating object of this TK class once you create the object of TK class and if you run at this stage you can see there are no errors and code is successfully ended okay but we were not able to see the GUI window this is because this code executed very fast so our eyes were not able to see that window so in order to see that window continuously we have one method inside this TK which holds the window on the screen Okay so in order to use that method will take help of this object variable so we'll write object variable Dot mean Loop method so this mean Loop method will help in viewing our window okay now if you rerun it you can see the window is created and by default this is the size of our window where the title is TK okay but we want a bigger size right so we will set the size of this window and we'll also change the title so in order to change the title of our window we have a method title inside this TK class so again we'll access that method with the help of this object root okay so we'll use title method and to this title method we have to pass the string so it will be retail billing system like this okay so now if you run it you can see the title is changed you are not able to see the title because the window size is small but if you drag it you will be able to see it and now let's change the size of our window for changing the size we again have one method which is known as geometry so we'll use that so we'll write root dot geometry and here we need to pass the width small X then the height okay so with that I am going to use is one two seven zero and the height that I'll be using is 685 this is the same width and the height that I have used in my original project so now if I run it you can see the window size is increased right so by default the icon is this leave okay but we can change it let's see how we can change the icon so firstly we will be requiring the icon image so from where you can get that just open your Google and there you need to search for Icon Dash icons.com here just simply enter billing so you will be getting these icons here whichever you like you can simply open it okay and you have to download the Ico formatted image okay so select Ico and download the smallest image 32px once the icon is downloaded you can simply copy the icon and paste it inside the same folder where your python file is okay you can change the name to Icon dot ICU or any name of your choice like this okay so this is the icon that we will be adding now to add the icon we have one method which is known as icon bitmap okay so that method we can access only with the help of the object variable so root dot icon bitmap and here we'll pass the icon name which is icon dot ICU like this now if you run it you can see the icon is changed all right and now what we need to create let's check the original project so we need to add this title firstly right so in TK enter the text is always added on our label okay and the label is known as a widget so what is a widget anything that you are seeing on this screen is a widget like for example this button is a widget okay this text area is a widget where you will be seeing the bill right this entry field is a widget where you will see the text amount tax amount right similarly this is a frame okay this is again a widget inside which we have added these products all these buttons are a widget only so labels buttons frames entry Fields text area all are widgets only okay so firstly let's create this heading so as I told you that we cannot directly add the text for adding the text we have to firstly create a label and then on that label we will be adding the text so I'll write heading label this is the name that I am giving to a label and label is created with the help of a label class that is present inside the stick enter module okay so we are simply using the class and this will help us in easily creating the label okay so first thing that we need to pass to this label is where you want to see this label we want to see this label on our window right and the window name is root so we'll pass root here after that what should be the text on this label so the text will be retail billing system now after adding the text if you run at this stage you won't be able to see this label the reason is you have just created a label but you have not placed it position it on your window right where you want to see this label at the top at the bottom on the left hand side or on the right hand side so for that we have a method inside this label class okay uh we will use that method and we'll place our label on our window so we'll be using this object variable heading label to access the method of this class and the method name that I'm going to use is path okay so this will simply add this label at the top now if I run it you will see the label here right retail Billing System so right now this is the font size okay and The Styling by default but we will change it okay we'll uh try to make it look uh in the same way as it is in our original project so let's add the font for this text so for adding the font we have to pass font argument here and the value will be inside these parentheses which is nothing but the Tuple okay first thing that we need to pass is the font style so I'm going to use Times New Roman after that we need to pass the size of the text so the size that I have used in my original is 30 PX so I'm gonna pass 30 here after that you can mention whether you want the text to be bold italic or underlined so I want the text to be bold so I'll pass bolder okay that's it now if you run it you can see the font is changed after that you can change the background color of this label on which this text is added right so we will be adding BG BG stands for background uh let me just move it to a new line so that it's visible to you so here we'll mention BG equals to the color name so the color that I'm going to use is gray 20. we can use a lot of different colors so let me show you uh what colors you can use so simply go to Google and search for tick enter colors open any of these images you can save these images and from here you can see different colors names that you can use in TK enter so I am going to use gray 20 right it's on this side yeah this is the gray 20 color that I'm going to use okay so it's up to you which color you use now if I run it so this is how it looks okay uh now we have to change this text color so in order to change the text color we have another argument which is FG which stands for foreground either you can write complete foreground spelling or just FG similarly either you can write background or just BG both Works same way and here we will mention the color name so I'm going to use gold okay so this is how it looks after that I want to fill this label completely onto this x-axis okay so for that to this pack method we have an argument which is fill and here we'll mention that in which direction you want to fill this label so we want to fill this in the X Direction like this after that let's add the border to this label so to this label we will add border BD equals to 12. okay I don't think you see any difference uh let's add The Styling to this border uh by using this relief argument and the value will be group yeah so this is how it looks now instead of GrooVe there are some more values that you can use for example there is this flat okay then there is uh this Ridge okay so it's up to you which one you want to use you can simply Google these values so we'll get a list of values which you can use okay so I'll go with Groove so after creating uh this heading now we need to create this customer details section okay so this is nothing but a label frame with a label customer details okay so firstly we will be creating a label frame okay and inside that we will be adding label name and its corresponding entry field okay this is known as entry field and then phone number it's entry field then Bill number it's entry field and then the search button so firstly we will be creating a frame customer details frame and this is a label frame so it will be created with the help of a label frame class okay which is present inside this peak enter again the same thing that where you want to see this label frame I want to see this label frame inside my window so we'll pass root here after that what text you want to see so we want to see customer details as the text right again if you run at this stage you won't be able to see this label frame the reason is you just have have created this label frame but you have not positioned it on your screen you have not placed it where you want to see this frame right so we will use this object variable dot pack method okay uh let's run and see you are not able to see it because the specialty of the label frame is that once you start adding things inside it then only it is visible for example once you will add a label inside it name label okay you will be able to see that frame okay so firstly let's add this name label inside this Frame okay so I'll create a name label and as you know the label is created with the help of a label class this label will be inside this customer details frame right so this time we will pass this customer details frame okay after that what will be the text so the text will be name and then other things like font and all we will be adding later okay for now uh let me just uh position it on inside this Frame okay so right now if I'll run you won't be able to see anything right so we need to position it so we'll write name label dot so we have used this path method to position something on our window right we also have one more method which is known as grid okay this helps in adding things on a window in the form of rows and columns okay so uh we have to just mention the row number and the column number okay to add this on our frame okay so to this grid method we will mention row 0 and column 0 y rho 0 and column 0 because uh this label is the first thing getting added inside this Frame okay so it has to be in at the starting position only right so if I run now you can see we are able to see this Frame first of all and then this label okay I hope you are able to understand it now we need to just provide some font to this label Okay add some border to it similarly font to this name label okay so let's add so font that I'm going to add for this customer details text is Times New Roman okay so the styling will be Times New Roman size of the text will be 15 and I'll make the text as bold so if you see this is how it looks okay I'll change the color so I'll move to a new line here I'll mention the text color to be gold okay I think I have added extra comma now if I run it yeah this is how it looks now let's add border to this Frame so here I'll mention border equals to 8 and then the styling to this border will be same as before Groove okay and now let's provide font to this label name so here we have this label name so I'll add font and it will be the same font okay so we can simply copy this font from here so styling will be Times New Roman size will be 15 and it will be bold and I forgot to add the background color to this label frame so let me add that to this customer details label frame here I'll mention the background color as Gray 20. yeah this is fine now after this to this label also I'll change the background color to gray 20 so that it can match with this Frame color right so here I'll mention BG equals to Gray 20. okay like this then I'll change the text color to a white or any color of your choice so I'll move it to a new line and here I'll mention FG which stands for foreground which is nothing but the text color and the color will be white like this and now after adding the label name after that we have to add its entry field okay inside which you will enter the name right this entry field so let's create it so just like we are creating the label in the same way we have to create the entry field okay using the entry class so here we'll mention that it's a name entry okay and entry field is created with the help of entry class again where you want to see the Sentry field we want to see this entry field inside this customer details frame right so we'll mention customer details frame before adding uh further things let me just position it so we'll write name entry dot grid this time what do you think what will be the row and column value if you see this original project this is at row 0 column 0 so this is at row 0 and column 1 right similarly this will be at row 0 column 2 okay it is in the form of a grid in the form of rows and columns so here we'll mention row 0 and column 1. so as you can see the entry field is created okay so by default this is the font that we are entering here this is the font size okay we can change it so here I will mention font a style that will be using is Ariel and the size of the text will be 15. okay yeah this is fine after that I will provide border to this entry field so here I'll mention border equals to 7 see these values you can change it according to your own requirement okay like this and then we will reduce some width of this entry field so here I'll write width equals to 18 like this a little uh reduce right and after that we will be providing some spacing between this name label and this entry field okay so in order to provide horizontal spacing uh inside this grid method of this name label I will mention pad x equals to 20. so this will add 20 pixels spacing on the left hand side and on the right hand side of this name label so you can see 20 pixels here and 20 pixels here is added okay in the same way you can provide some uh padding horizontal padding to this entry field so here you can mention pad x equals to 8 so 8 pixels here and 8 pixels here is added okay and similarly you can provide some uh vertical padding okay vertical spacing so to this name label only I will add pad y equals to 2 pixels okay so 2 pixels spacing is added from top and bottom foreign labels just next to this entry field right and its corresponding entry field just like you can see here okay so it will be created in the similar way just like we created this name and its entry field right so firstly we will be creating phone label so that will be created in the same way so I can simply copy this paste here and then change the name so we can place multiple cursors in pycharm with the help of ALT key and mouse left button so we can do changes at the same time at different places okay so this will change to phone label then the text instead of name will be changed to phone okay everything else like font background foreground will remain same then we need to change uh where you want to see this phone label this time the column value will be changed to 2. because at column one we have this entry field right so now if I run it you can see we got this phone label just next to this phone label we have to create entry field so it will be the same entry field only so we can copy this entry field from here okay and we will paste here and then we'll change the name to phone entry okay column value will be changed to 3. like this and now after this we have to create uh this bill number label and its entry field and then this search button so let's quickly create these three so we can again use the same label and same entry field and we'll do the changes in that so I'll simply paste it so this will become bill number label and here the text will be changed to bill number okay column will be changed to 3 row will remain same because it has to be in the same row right and then I'll copy this entry field so this will now be bill number entry fee right column will be changed to 4. so if I run it so this is how it is looking so actually I think I uh have given wrong column number to this label bill number let's see uh bill number has to be at column four right because this is already at column three right so this will be at column four then this will be at column five yeah now it's better and at last we have to add the search button so button is created with the help of a button class just like we are creating a label with the help of a label plus entry with the help of entry class so the button will be created with the help of a button class so where you want to see this button we want to see this button inside this customer details frame so we'll pass customer details frame here okay then what should be the text on that button uh we have to mention here search okay and then we will be providing font for this text okay that will do it later but firstly let's just position it so we'll write search button dot create method row will be 0 only column will be changed to 6 and I'll add pad X of 10 PX like this now let's change the font of this text okay so here I'll mention font The Styling will be Ariel size of the text will be 12 and I'll make the text as bold okay like this then we can add border border of seven like this okay let me just provide uh some more uh horizontal padding so I'll change it to 20px and to this search button I will also mention pad y of 8 pixels okay so this has increased the horizontal uh sorry vertical spacing of all the widgets right so we can remove uh the vertical spacing that we gave to this name label right two pixels so we can remove it it's of no use now because by giving vertical padding to this search button it has applied to all the other widgets right I hope this is clear and this and this spacing is left right so to the pack method of this customer details label frame we will mention fill X okay just like we did for the above label so customer details label frame to this pack method will mention filex so this will fill the complete x-axis sorry I have mistakenly cut from here I don't have to cut it yeah this is fine and you see uh there is no gapping between this label and this Frame right so we can provide pad y uh to this label oh sorry to this either to this label or to this Frame it's up to you okay so we can provide add y equals to 10. yeah this is better now uh after that I want to provide some width to this button see the size is increased okay uh one thing uh that I need to change here is this name it has to be phone number okay not just phone so here we have this text we'll change it to phone number yeah now it looks same as it is in original project right and now we have to create this particular section so how do we start firstly we will be creating one products frame okay inside which we will be adding uh this Cosmetics label frame and its product then grocery label frame and its product then cold Rings label frame and its product and then this bill area section okay inside that frame only okay so frame is nothing but a container which help us to simplify the sections right so this was added in this customer details frame right and now we are creating another frame inside which we'll be adding uh these sections okay so I hoped uh I'm making sense you will understand it once uh we'll do the code okay so firstly I'll be creating a frame okay so this will be uh products frame or you can name it anything and frame is created with the help of a frame class the difference between frame and a label frame is that uh frame does not have a label but label frame has a label that's it okay otherwise both are simply containers inside which we simply add buttons and labels and entry Fields okay so this Frame again where you want to add this Frame this time we will not be adding this Frame inside this customer details frame right we'll be adding this Frame inside my window name right which is root so we'll pass root here okay and then we can simply pack it so when we use pack method uh it simply packs everything one after the other okay so firstly we packed this heading label so it was at the top then we packed this customer details frame which was just next to this and now we are packing this products frame right which will be just next to that customer details frame right and inside customer details frame we added all these labels and buttons right sorry one button only right so I hope this is clear to you and as you know if I'll run at this stage you won't be able to see this Frame because I told you uh frames are visible only when you start adding things inside it so first thing that we need to add is this Cosmetics label frame okay firstly we'll create this Cosmetics label frame and then inside it we'll be adding these labels and the corresponding entry fields so we'll create cosmetics frame okay and this will be a label frame and this label frame will now be inside this products frame so we'll pass products frame here okay the text for this label frame will be cosmetics then we have to provide font for this text border for this label frame styling to the Border background color and the text color which we have already done it before right when we were creating the label frame so we can simply copy those uh values okay so we'll copy the font we'll copy the text color we'll copy the Border The Styling and the background color so you can copy these things and we can simply paste here put comma here okay so after creating the label frame you need to position it so I'll write Cosmetics frame dot grid method okay so where you want to grade it and why I am using grid method because as you can see in the original project uh this section is in the form of rows and columns where this Cosmetics frame is at row 0 column 0 this grocery frame will be at row 0 column one this will be at row 0 column two and then this will be at row 0 column three I hope you are getting it so that's why I'm using grid method it will be easy to position okay so row will be 0 and column will be zero okay so again if I run it you won't be able to see this because this is again a frame only right firstly we created this Frame and inside this Frame we have created this label frame and now once we start adding things inside this label frame you will be able to see this label frame right so first thing that we need to add is this bath soap label right and as you know how labels are created so but so label and we'll use a label class this label will be inside my Cosmetics frame right so I'll pass Cosmetics frame here then the text will be bar so okay after this we need to add font for this text so font will be same as the previous label that we created this phone label so we can copy the font from here okay in fact we can copy the text color as well so we'll paste here so we have copied font the background color and the text color so now if I run it oh you can't see it the reason is this we have not positioned it right so we'll write path soap label Dot grid method okay and it will be graded at row 0 and column 0. I hope you are able to understand what is happening here firstly we have created a frame inside this Frame we are adding Cosmetics frame okay and inside this Cosmetics frame we are adding this bar soap label okay and since inside this Cosmetics frame nothing is there so that is why we are writing row 0 and column 0 because this bar soap label is the first thing getting added inside that frame so now you are able to see this path soap label and also this Cosmetics label frame and this Cosmetics label frame is inside of frame okay so after creating this bar soap label next we need to create this entry field okay so we'll name it bath soap entry okay and it will be created with the help of entry class only so we can firstly uh grade it so right but so play entry dot grid method where do you think it will be graded it will be graded at row 0 and column one okay just next to this batch Loop label we want this entity right so that is why column one so now if you run it you are getting this error because you have not mentioned that where you want to see this entry field okay we want this entry field inside this Cosmetics frame only right so we'll mention Cosmetics frame yeah so this is how the entry field looks like uh will increase the font size okay so we will be using the same font okay then we'll reduce the width so we'll make the width as 10. yeah this is fine and then we'll add border of 5 pixels and let me just firstly add some uh pad y to this Frame right so that we can see some uh vertical spacing between this customer details section and this product frame right so uh to this product frame here we'll mention pad y equals to 10 pixels okay so now we have some spacing here coming to this uh just like we have created this bar soap and its center field in the same way we will be creating the other products face cream face wash hair spray hair gel body lotion okay and we also need to provide vertical spacing pad y Okay so to this bath soap only label I'll mention pad y equals to 9 pixels uh these values you can uh play around right you can decrease or increase according to your own choice okay so I have used 9 pixels in my original project that is why I'm using the same value here okay uh you can mention pad y equals to 9 here as so now let's create the other one which is face cream okay as it has to be created in the similar way so I'll be simply copying uh these lines okay so label and the entry field I'll copy and then I'll do the changes in the name to instead of bad soap uh this will be changed to face cream okay face cream label and face cream entry the text here will be changed to face cream uh then uh apart from this everything else will remain as it is only the grid value row and column value will change row will become 1 this time because it has to be just below this label right so row value will become one column will remain zero only okay here uh this entry field will be at Row 1 and column one okay so if you return it you can see this is how it looks uh we also need to add some horizontal uh padding okay Paradox uh so let's see uh we'll firstly add paddocks uh 10 PX okay so to this bar soap label to this entry field and to this face cream label and to the centrifield I mentioned pad x equals to 10 PX okay so when we added two bath soap it has added 10 PX here 10 PX here then when we add it to the entry field it has added 10px air and 10px here okay so this 10 PX of this bath soap and of the century field has simply overlapped okay and after this face cream next we have face wash okay so again I will simply copy the label and the entry field and will paste here so this will be changed to face wash okay uh the text will be changed to face wash row value will change only column will remain same as the above one okay like this so now I guess you can quickly complete it by yourself the products it's up to you what product names you choose and one more thing the text here is centered right I want it to be left aligned okay so that this B should start from the same X distance as this F okay so for that we have to use one uh argument which is a sticky Okay so uh to these labels we can add that sticky so just Place multiple cursors to these labels and mention sticky as w okay so these labels will be sticked on the western side like this I hope this is clear to you so let me quickly add other products and their corresponding entry field FIFA foreign so after adding all the Cosmetic products now if you run it you'll see something like this okay since in these three uh sticky is not added so that's why you are seeing them at the center you can add sticky and value w yeah now it's fine so after this cosmetic section next we have grocery section just next to this okay so we'll uh create grocery label frame and that will be created in the same way as this Cosmetics label frame right this Cosmetics label frame was inside this products frame so grocery frame will also be inside this products frame okay so Cosmetics frame was at row 0 column 0 so grocery frame will be at row 0 and column one I hope you are getting it so here we'll mention uh this is a grocery frame the text will be changed to grocery okay and it will be at column one row will be 0. I hope you are getting it so again if I'll run at this stage you won't be able to see this glossary frame uh let's add label and entry field inside this glossary frame so first product that we can see in my original project is rice so let's add rice and its entry field so I hope now you understood how things are getting added and it will be added in the similar way only so you can copy one entry field and one label from the top and you can simply paste it here what changes you need to do now firstly change the frame name this time you want these label and this entry field inside grocery frame right so we'll mention grocery frame after that you need to change the text to Rice okay change the name to Rice label and rice entry field okay after that you have to change the row and column value okay since uh it's a new frame okay and nothing is added uh inside this glossary frame yet so a rice label is the first thing we are adding so it will be at row 0 column 0 okay rice entry has to be just next to this price table so it will also be at row 0 but column value will be 1. okay if you run it you can see this rise label and its entry field I hope this is clear in the same way we will do for rest of the products next one is while so we can copy label and entry so this one will now be coil row value will be changed to 1. here row value will be 1. okay in the same way we'll do it for rest of the products I'll do it quickly okay foreign section is also ready okay just next to this grocery section we have to create cold ring section so firstly we will be creating cold Rings label frame okay so I'm going to copy the grocery frame and we'll do the changes so I'll name it drinks frame here the text will be cold drinks okay uh the column value will be changed to 2. okay because at column one we already had gross reframe right and now let's start adding things inside this drinks frame so again I'll be copying uh one of the label and entry field from the top and we'll paste here we'll change the name as it is in my original project so first is Maza you can add any name of your choice okay any products row value will be zero here also row value will be zero instead of gloss free frame it will be drinks frame now okay yeah like this uh its entry field is not visible why because the frame name is not changed here this is drinks frame yeah now it's visible after Maza we have Pepsi then a Sprite so I'll paste here this name will be changed to Pepsi here the text will be changed to Pepsi row value will be changed to 1. here also one after Pepsi then we have Sprite True Value will be 2 here also value will be 2. after Sprite then we have due fruity and Coca-Cola this is two uh let me just put it to lowercase do it will be 3 and 3. after due or it was fruity and the last one was Coca-Cola foreign and now we have to create a bill area Okay uh just like this one okay so firstly we will be creating a frame and that and then inside that frame we will be adding this uh heading Bill area Okay and then this is nothing but a text area and uh we'll also see how we can add scroll bar to the text area so if the text will move down so the scroll bar will be activated and you will be able to scroll up and down okay so we'll see this so let's create a frame uh Bill frame okay and this will be simply a frame okay not a label frame as you can see the original project this has does not have any label right so it's simply a frame so this Frame will be inside my product frame okay then I'll simply grade it so this will be graded at row or three I guess let's see where the earlier frame was added drinks frame was added at uh sorry row will be 0 only column will be 3 okay after this drinks frame only we want that right so row will be 0 only column will be 3. so we'll create Bill area label using a label class this label will be inside my build frame the text will be label area font for this text will be this only and now let's position this label so I'll write Bell area label dot pack method why I am using pack method uh as you know this bill frame is a separate frame right and inside this Frame we are adding this bill area right which is the first thing we are adding inside it okay and it has to be at the top inside this bill frame right so we are simply using pack method we could also have used grid method with row 0 and column 0 that would also uh be fine so now if I run it you can see this label area here we will provide border uh to the frame build frame and groove is styling to it okay so this is the bill frame so we'll pass BD as 8 and release as group okay like this then to this label area label also we'll add border BD equals to 7 and relief equals to group all right like this and now just below this uh title we have to add the text area okay inside which you will display the bill so for creating the text area there is a class called text okay so I'll write text area equals to text and this takes class where you want to add this text area we want to add this text area inside this build frame so mention Bill frame here okay and then we can simply pack it so we'll write text area dot pack so if I run it you can see this is the size it takes by default okay this is the text area that is added let's fix it so height that I am going to use is 18 and width that I'm going to use is 60. so it will look something like this okay so these values uh you can simply uh decrease or increase according to your choice okay so I have simply checked it played with these values uh to get the perfect values okay apart from this uh this text is wrong it should be uh Bill area right and it should be expanded uh completely inside this Frame okay so we'll use philx so here we'll mention fill X and this will be Bill area yeah now this is fine and now let's add this crawl bar on the right hand side okay inside this text area so in order to add this crawl bar uh we'll be using the scroll bar class okay to add the scroll bar and we'll name it scroll bar okay and this is scroll bar also has to be inside this bill frame only and after that we also have to mention that whether you want horizontal scroll bar or vertical scroll bar so Orient will be vertical and then after creating this scroll bar we also need to pack it and we have to pack it on the right hand side so we'll use pack method and side will be right okay let's see yeah so the scroll bar is added here okay actually we need to decrease some width of this uh text area so we'll make it 55 so as you can see the scroll bar is added inside this text area right let me just provide some pad X often to this bill frame okay so that you can see little spacing here and then uh fill this scroll bar completely on the y-axis okay so uh here I'll also mention fill equals to Y just like we used to fill in the horizontal axis this time we'll fill the scroll bar on the y-axis okay so inside this Frame uh this is filled right on the y-axis okay right now uh if I'll write some text and we'll move it down this scroll bar is not activated right this fault bar is not active so if you move it down you won't be able to see the bottom text okay so because this is not functioning with this text area okay this is not connected with this text area so how do we connect it firstly you will have to add y scroll command equals to scroll bar dot set okay so this uh will simply set the scroll bar with this text area okay so now if I run it so now this is scroll bar is set with this text area okay you can see this it is set with the text area but you will not be able to see the upper view when you will scroll up okay so in order to move uh this text area up and down uh using this scroll bar we have to configure this scroll bar so we'll write scroll bar dot config and here we'll pass the command equals to text area dot y view okay so what we want that whenever we scroll the scroll bar we should see the why view of the text area so we are simply configuring the scroll bar so we have firstly created the scroll bar okay then we have created the text area then we have set the scroll bar with this text area and then in order to see the vertical view of the text area you have to configure the scroll bar like this I hope this is clear to you now if you'll write some text and move it down so now you will be able to see the upper view of this text area by scrolling up this is scroll bar I hope this is clear to you okay so this products frame section is also completed just below it next we have to create this bill menu okay inside which we'll be adding these labels these entry fields and then these buttons let's quickly finish it so firstly we'll be creating a bill menu okay so just like we created uh the product frame in the same way we'll be creating the bill menu but it will be a label frame this time okay so we have created this products frame right so uh what we are going to copy we are going to copy this one okay because uh this time I'll be creating a label frame right that's why I'm copying a label frame okay I'll paste here and this will be Bill menu frame text here will be bill menu okay this build menu frame will be inside my root window okay if you see this products frame was inside my root window right and it was packed with a vertical spacing of 10 pixels right so this bill menu frame will also be inside my root window and it will be tagged okay so you won't be able to see it let's add things inside it okay so first label that we will be adding inside this bill menu frame is cosmetic price label okay as you can see in this original project okay cosmetic price so I'll copy the already created label like this one and I'll do the changes in it so this one will be named as cosmetic price cosmetic price and this label will be inside my bill menu frame the text will be cosmetic price okay then the row value will be 0 as this cosmetic price label is the first thing getting added inside this bill menu frame so if I run it and next to it we will be creating its entry field so I'll copy one entry field from above and will paste here so I'll change the name to cosmetic prize entry okay this will not be inside drinks frame but inside Bill menu frame okay its row will be 0 and column will be 1. and here you can add pad X of 10 pixels and similarly you can add this grocery price and cool ring price and their entry fields so we can copy these two things and we can paste here foreign this will be grocery price okay row value will be changed to 1 and here also it will be 1. let's change the text to grocery price and just below this we also had to add cold ring price okay but the space is not there so what we can do either we can reduce the size of the labels okay or we can simply remove the pad y values right that we added okay so it will move a little bit up this section will also move a little bit up so we'll get some more extra space right so what we can do we can search in our code so we'll press Ctrl R in pycharm and we'll check pad y equals to 10 okay so in heading label we added pad y equals to 10. so we can simply remove it and then add one more place we added here in products frame rate so we can remove it let's run yeah so you can see now we uh are having some space for the third one okay so let's add the third one so this will be drinks price and Rings entry ranks price label and Rings price entry okay cold ring price okay and this will be row 2. still we need some extra space so what we can do we can simply decrease some font size of the label and the entry Fields okay so here we have 15 let's make it 14 okay so just Place multiple cursors so we'll make it 14. uh we need some more extra spacing let's make it 13. yeah now it's better right and and if you want you can also decrease vertical padding of uh vertical padding nine right it is 9 here so yeah I think this will will be better uh instead of making it uh 13 we could make it 14 and we could reduce some vertical padding okay so you can press Ctrl Z make it 14. and then you can simply decrease pad y value instead of 9 let's make it 6. now I think this looks better and uh just next to this we have three more labels and their entry Fields cosmetic tags grocery tags and cold attacks and their entry Fields okay so we can simply copy these right and we can paste them and we can do the changes in it okay so cosmetic price label will be changed to cosmetic tax okay here the text will be changed to tax row value will be zero only a cosmetic tax label okay row value will be zero but the column value will become 2 here okay because it has to be after this uh Cosmetics entry uh field right which is at column one okay firstly we have this label then we have this entry field after this again we want uh cosmetic tax label right so it has to be at column two I hope you are getting it and the text will be changed to grocery tax okay row value will be 1 only uh the column value will be changed to 2 and I forgot to change the column value here of this entry field this will be three similarly this grocery tax entry will also be at column three then we'll change this label name and this entry field name to drinks tax and we'll change the text to cooling tags label column will be changed to 2 and entry field column will be three and lastly we have to create this button frame and inside that we will be adding these buttons so I'll create a button frame using the frame class this button frame will be inside my build menu frame then I'll add border to it and styling to this border after that I'll simply grade it Pro value will be zero column will be 4 because it has to be just next to this drink Stacks entry which is at column three right so that's why I call up 4 here now let's add button inside this Frame so first button will be total button so we'll create this button with the help of a button class this button has to be inside this button frame then the text on this button will be total after that I'll provide font for this text the spelling will be Ariel size will be 16. and the button text will be bold and then I will simply grade it so I'll write total button dot grid row will be zero and column will be 0. okay so this is how the pattern looks like now let me add background color to this button which will be Gray 20. then the text color will be white after that I will add border to this button and width to it so here I'll add border as 5 and width as 8. like this and now I'm going to add internal padding to this button okay and internal padding is provided in the same way but this time we will mention the pad y value inside this button so here I'll mention pad y equals to 10. so you can see the button size is increased okay vertically and if you notice what is happening here this is getting distorted right this is because uh this button is at row 0 okay so row 0 is taking this much space so Row 1 is starting just after that from here right that is why this is getting uh to the bottom okay getting outside of the screen if we will increase more pad y uh this will go more down okay so what we have to do I want this button to take three row spaces okay so it will be at the center position so it will take three row space this row space then this row space and the last row space okay so this button will take three row space for that uh to this button frame uh we can mention row span of three so now this button frame will take three row spaces so if I run it so now you can see that that issue is resolved right and now I'm going to provide vertical padding to this button and this Frame for that inside this grid method uh we have to pass pad y of 20 pixels okay so between this Frame and this button you can see vertical spacing okay and I also want to add horizontal padding so I'll mention pad X S5 okay and now in the same way we have to create other buttons so I will be simply copying this button and paste it so this will change to Bell button the text will be changed to Bill column value will be changed to 1. okay like this after this we have to create email button foreign button and at last we will have a clear button so the GUI part is completed in the next video we will work on the functionality part of these buttons let me know in the comments if you have successfully completed the GUI part see you in the next video thank you for watching

Channel: Coding Lifestyle 4u

Views: 65,763

Keywords: python project, tkinter gui project, billing system, retail billing system, billing system project, billing system in python, bill management system, tkinter project, python tkinter project, tkinter billing system, tkinter billing software, billing system using tkinter, billing system using python, python gui project, restaurant billing system in python, python tkinter gui, python tkinter billing system, python gui

Id: vB6hfWRX1ds

Length: 93min 18sec (5598 seconds)

Published: Mon Apr 03 2023