Build a Tkinter Data Entry Form

Hello everyone and welcome back to my channel. So in today's video I'm going to show you how to create this data entry form using Tkinter. Data entry forms are super useful for people who need an automated way or a sort of faster way to enter data. Here you can just fill out certain information and then we're going to retrieve and collect this information using the python code ourselves. So here the user can type certain info such as their first name. So you can see John Smith choose a title. then they can select an age this is a spin box this here is a combo box it's a drop down then here they can check and uncheck they can select a number of completed courses number of semesters and then they can accept or not accept the terms and conditions the way this works if the user does not accept the terms and conditions before filling out the info and they press enter data they will get an error message saying you have not accepted the terms if they do accept it but the first name or the last name is blank you will see that first name and last name are required. So this is just some of the properties we have in this interface. Now if I do have the name, and I press on enter data, if it's valid, it will simply print out all of the information that it was able to collect. So you can see first name, john, last name, Smith, title, age, everything else. So this is a simple entry form that we're going to create. Then after creating the interface using Tkinter, after I show you how to create these three different groups, so or these three different like boxes that contain other widgets then we will write a function which is for the enter data which will retrieve the information from every single one of these different entries so we'll retrieve the information then print it out now an extension to this project would be to perhaps have the entry enter the data into excel so after retrieving them rather than print them out here we can enter them into excel i'd be happy to make that kind of video for you as well or maybe even into an SQL database. Okay, so that's sort of the overview of this project and what we're going to build in today's video. This project is beginner friendly. However, if you have seen some of my videos on Tkinter and my beginner series, it would definitely help because everything that we're going to use here has already been mentioned in this video, and it would be much faster for you to understand. However, if you feel like you're up for it, you can definitely just watch this video without having seen any of my other videos. So... this is definitely beginner friendly. Source code is in the description as always and yeah, without further ado let's just get started. For the first part we're going to write the code so that we can create everything related to the user information. Now first let's get started by actually creating our Tkinter application. In front of me I have an empty project, I'm using Visual Studio Code. As usual you can use any python text editor that you like. So, so long as you're able to run Python and use it and you're comfortable with it, you can use that. In my case, I use VS Code, but you don't have to follow the same logic. Alright, so this folder is empty. What I'm going to do is I'm going to right-click, press on New File, and create main.py. This will be where I'm going to write all of my code related to this interface. Now, the very first thing I always need to do is I need to import Tkinter, so you always need to import it. Then what I'm going to do is I'm going to create my root window, which will be equal to tkinter.tk. This is the root window. This means that this is the parent window for everything else. This is the widget that will contain all of the other widgets. So as we later on create the entries and the labels and things like that, we're all going to place them inside this root window. So think of it as the largest box and everything inside it will be placed inside this box. so in order to run a tkinter application you need to use something called window sorry window.main loop this main loop will run an infinite loop so long as the application is being executed as soon as you exit the application the main loop will stop running so as you can see if i go here and i run it this will launch an application very basic this is the basic window in tkinter the most basic application you can create and the main loop will continue running it until i press on x then this main loop will stop being executed. Now, one last thing I want to do here is I want to set the window title. I'm just going to set it to be something called data entry form just so that we actually have a title for our window. Let's check it again. And you can see here you have data entry form in the window title. Okay, now that we have created our window, let's actually start by placing all our widgets and seeing how we're going to organize them and position them on the screen. The very first thing I'm going to create is something called a frame and this will be frame equal to tkinter.frame. The parent of this frame is going to be our root window. So again this is what I mean by parent. This frame is contained inside the window. Actually allow me to visualize this for you. I'm just going to pull up paint. Not too many artistic skills here, but really I just want to show you the main logic and what essentially we're doing. So you have this. This is the window. So I'm just going to type here window. And then what I'm going to create now, what I just created, is something called the frame, which is going to be nested inside the window. So this is the frame that I just created. This is how it looks like. And it exists. inside of the parent window window is going to be the parent of everything else everything inside this application will be contained inside this window widget all right so i hope this visualization sort of helps you understand how this hierarchy is working so let's go back to the code now that i have created my frame the next thing i'm going to do is i'm going to pack it so in tkinter if you've seen any of my previous videos or if you've learned or used tkinter at all you you should know that anytime we create a widget and we want to show it on the screen, there are always going to be two steps. First things first, you actually have to create the widget and define it. You might want to save it in a variable as we do here, so frame is equal to tkinter.frame. The second step is you have to either pack, place, or grid. These guys are what we call the geometry managers or layout managers in Tkinter. They enable us to position everything and place it on the screen and sort of organize all our widgets. Now why am I saying frame.pack, not frame.grid, not frame.place? Because here pack is the easiest one, and this will keep everything responsive and nice looking, so that when we resize our window, it still looks the same. So for now, if I actually run it, you can't really see anything. In fact, you see nothing. This is because the frame itself is still empty, so it has a size of 0, so you can't really visualize it yet. As we add more widgets, I'm going to re-explain stuff related to the frame, just so you can understand why we used pack and how this is making a difference. Okay, so we have one frame inside the application. The next thing we're going to do is we're going to create something called a label frame. Now, this label frame will also exist inside this frame that we have right here. And in fact, let me actually change the color. The label frame, we're going to have three of them. So we're going to have one. and then later on we're going to have let's okay i'm changing the color let's now do a red one now you're going to have another one here and then finally you're going to have uh let's say a third one okay and this is how our application is going to be organized as you can see we have the largest window then you have a frame inside this window and finally inside this frame you have three stacked list frames now these three list frames think of it as if they're going to be part of something called a grid now this grid is going to be a three by one grid now i'm not sure if you can actually see that but essentially what i'm saying the grid is three by one so there are three rows and one column and this is how we're going to stack the label frames so they're going to be on top of each other in this format just so that we can combine the different information together and it still looks neat and organized Let's actually go ahead and create our very first label frame. So what we're going to do here is we're going to call it user info frame, and it's going to be equal to T counter dot label frame. So this is a label frame, not a frame. Now you will see the difference as I show you now, the parent for it is going to be the frame itself that we created before. Not the window. Why is that? This is because here, as I showed you, this blue label frame, the one we're creating right now, is contained inside this frame, the black one right here. And the frame itself is contained in the window. But the label frame, its direct parent is frame. This is why here we specify the parent to be frame. So the very first parameter you're going to pass is frame. Okay. Next, what I want to specify is the text. So the text here is going to be user information. Let's actually separate this code from the rest. I'm just going to put a comment here called saving user info, just so that we have some future reference. So now we have created the label frame. Next, what we're going to want to do is we want to put it inside the frame. So as we said before, two steps each time. You define your widget in Tkinter. And then finally, you also have to pack place or grid. Now, because we said we're going to use a 3x1 grid, so let's go ahead and say userInfoFrame.grid this time and not.pack. And anytime you use.grid, you need to say row and specify a certain number. And then you say column and specify a number again. How do I know the values for these? Let's go back to paint and visualize actually. So we're working inside this blue square right here. This is in the first row. first column. Well there is only one column anyway but we have to specify the column anyways. So this is the first column and the first row. In Python everything starts from an index of 0. So here it's actually row 0 and column 0 and not actually row 1. So let's go here and we specify row equals 0 and column equals 0. Now that I've done this let's actually run it and you still can't see anything. This is because the label frame is empty and it won't show up on the screen till we populate it with at least one internal widget just so you can actually see it. So let's actually do that. Close this and I'm going to start by creating the widgets inside of this label frame. So I'm just going to call something the first name label and this will be a tkinter.label. The parent here, so you should be able to guess what's the parent here. Rather than it being the frame or the window, it's going to be the user info frame. So now this label, if we come here and we draw it, it's going to be right here. This is going to be the label that we created. It's inside this label frame, which is inside the frame, which is inside the window. So there's a lot of hierarchy here, but we have to do this in order for us to actually create a very nice and neat looking interface. This helps us position and organize these widgets on the screen. Otherwise, we're going to have a big mess and it's going to be much more difficult to actually organize these widgets. So now we're actually placing this label inside the label frame. The label frame is inside the frame and then the frame itself is inside the window. So let's come back here. Okay, so now that you have this label frame and we've created the label, let's just give it a text. This text is going to say first name. So we've created a label. Again, let's actually run it. And as you can see, nothing happens. Why is that? This is because we didn't follow step two. Again, anytime in Tkinter that you want to add a widget to your screen, the first step is always going to be to create and define this widget. Then the second step is always going to be packing, placing it or grid. So here I'm going to say first name label dot grid. and now i have another grid this grid is actually inside of the label frame so if i come here and delete this one i can see that i have a grid going on here and this is how it's going to be divided so we're going to have three columns and we're going to have a certain number of rows we're going to see in the video but this is how the grid is going to look like for now the label itself it's going to exist okay sorry about that Let me just put this one back and change it to black. So for now, the label itself is going to exist in this cell right here. So this is going to be row zero, column zero. So let's actually come back and we're going to say row is equal to zero and column is equal to zero. So this is where we're placing our label in this grid. We run it and if you resize it, you can now you can see the label frame so you can see the label frame saying user information. This is a frame with a border and a title. So this will be able to group different widgets in the interface. And you can see the label that we created. Now you might ask me, why is this small? Why doesn't it look expanded? This is because grid by default will assign to these rows and columns as much space as you actually need. So here the maximum space is what you need for this label. So by default, this is the label size, the default label size. So the column... This will be how big it is. There are no other columns for now so this label frame is this size as well. As we add more widgets you're going to see the size is going to change and it's going to start looking better. Alright so let's actually close it and add another one for the last name. So I'm just going to come here and say last name label. And this is going to be another tkinter.label. Again, the parent is going to be the user info frame. So it has the same parent. And the text this time is going to be equal to last name. Then I'm just going to last name label.grid. And it's going to be in row 0, same row, but in another column. So this is going to be column equals 1. So now let's run it and check. you can see that now we have two separate labels in this interface within our label frame so you can see how it looks right here all right perfect so now that we've done this what we want to then go ahead and add is the entries so i'm just going to say again first name entry is equal to a tickenter dot entry so the entry is the text box so this is where the user user will write some inputs so the entry the parent again it will be the user info frame so here we're still working inside of this frame right here so this is the parent and we're going to create another one for the last name so last name entry is going to be equal to tick enter dot entry user info frame very like it's the exact same all right now we've added them again you can run you won't actually see them because you need to use grid to place them on the screen so first name entry you will say dot grid and this time This entry will be located, let's see, here in this cell right here. So this is row equal 1 and then column equal 0 again. So let's say row equal 1, column equal 0. And then on the other hand, for the last name entry dot grid, we will say the row is still equal to 1, but the column itself is equal to 1. Now that we have added these on the screen, I'm going to run it. And as you can see, we're starting to have a form, a kind of data entry form. Let's expand it. You can see you have the first name. You have the first name entry here. And then you have another entry right here. It looks good. And we're actually able to see some results on the screen. All right. So now we have created these two entries. And we are going to create some other types of entries, some combo boxes, a spin box. But for now, one thing I actually want to show you is we can actually change the padding related to this label frame. If I run it, as you can see right here, you can see everything is kind of squished together and the label frame itself is not really showing. I'm just going to add a padding to the label frame. So this is going to be pad X. So on the X axis, so horizontally, I'm going to add a padding of 20 and then the pad Y is also going to be 20. Let's run this again and you can see now we can actually see the label frame itself. Now the stuff here is still kind of squished together, but later on I'm going to show you how we're going to separate it and also make it look more presentable. So now let's add a new entry and this one is not going to be a tkinter.entry, it's going to be a sort of list that the user can choose from. So first things first, we also need a label for this one. So we're just going to call it title. So here the user will be able to choose a title like Mr., Ms., Dr., things like that. So the title is also going to be equal to a Tkinter.label. The parent again is still userInfoFrame and the text is going to be title. So by now you should be comfortable with this and sort of understand everything that makes up a Tkinter label in Tkinter. Now that we've created the label, next thing I'm going to do is I'm going to say title combo box and this will be equal to a combo box. Now one thing we're going to note The combo box itself cannot be found using tkinter.combo box. This is actually incorrect and this is not a thing in tkinter. Even this one as well that is suggested it's not a correct module. So what you need to do is you need to use the ttk module. So ttk you import it like so. So from tkinter import ttk. ttk stands for themed tkinter. So this is the collection of themed widgets. They're a collection of widgets that allow you to create more modern or native looking applications using Tkinter. Now we're not using them for everything in this tutorial, but for the combo box, it's absolutely mandatory because the combo box itself doesn't really exist inside of Tkinter. So we're going to have to say ttk.comboBox. And now we're actually able to create a combo box. Again, you have to specify the parent. So for every widget, you have to always the first thing you have to specify is the parent. Obviously, every widget except the very root. So which is the root window right here. So now that we've specified the parent, next thing we're going to do is we're going to say the values list. So this is a list of values that will be appearing in the combo box. This is what will enable us or enable the user actually to choose from a selection. So let's actually write the list of titles. You have Mr. You have Ms. You have Doctor. And let's actually just go with these three. And actually let's create the very first one. It's an empty one. So maybe the user doesn't want to choose a title. They don't have any title. They can just go with nothing. So now if you run it again, it doesn't show up because we haven't put it on the interface. We need to use the grid. So actually let's use the grid. So you have title the label. Let's actually replace this and rename it to title underscore label just so that we're consistent with the naming. So title label dot grid. And now the row is going to be zero, but the column is going to be two. Why is that? This is because currently what we're working with is this cell right here. So we're placing it in this cell. And then we're going to place the combo box in this cell as well. Okay. So now this is row zero column two. And then the title underscore combo box is going to be. In row 1, column 2. Perfect, let's run it. And as you can see, we have a combo box. This is a drop-down menu which the user can select the title from. And as you can see, it looks good and it's actually working. Alright, perfect. So we're done with the first row. What we want to create next is going to be the second row which will contain two more types of entries. The first one is going to be a spin box for the user age. So first things first, again, I'm always going to need a label. So the age label is going to be a tkinter.label. And then it will the parent will be user info frame. And this case, the text is going to be age. Now, age spin box. So the spin box, which is the counter, you're going to see it on the screen in a moment, it will be equal to tkinter.spinbox. So this is the number. It starts at a certain number and can be counted to another number. First things first, the parent is the user info frame. You actually don't need values. So the user info frame, let's run it and I'm going to show you how the spin box looks like. Again, I forgot to actually grid it, so let's say age label dot grid. This will be in row equals to two and then column equals zero and then age not label, age spin box dot grid. This is going to be in row equals to 3, and then column equals to 0. So now we have a total of four different rows. Now I can show you, as you can see, you have a new row. So you have this is row 0, row 1, row 2, and row 3. This is what a spin box is. It's a counter. But now you can see there are no values yet. We need to specify the values. To do so, we specify something which is first the from. and we're going to start at 18 so let's say users have to be at least 18 years of age and then we're going to say 2 and let's put a maximum at 110 years okay so now if we run it you can see now we have a spin box and you can count up or down using the buttons on the spin box itself perfect so now we have created the spin box what we're going to do next is create the final entry in this group which is going to be another combo box for the user's nationality So let's go ahead. First things first, again, a label, so nationality, label, and this is going to be equal to tkinter.label, same parent as usual, the user info frame, and then the text is going to be equals to nationality. Okay, now we've created it, then we're going to create the nationality combo box. So again, combo box, you need to use ttk, not tkinter, you create the combo box, you assign the parent, and then finally what you need to do is you need to assign the values after you've assigned the values here we're going to write a list of nationalities because the list of countries is pretty long and i don't want to go ahead and copy it from somewhere and create a very long thing so usually you can use this from a database you can get this from a list some type of json file maybe so i'm just going to type in the list of continents because it's still going to be much shorter than a list of countries i'm just going to go ahead africa and Antarctica. Let me just type them up real quick. So now that I'm doing this, as you can see, so two more and South America. Okay. So these are the continents that the user can select as nationality. Again, in your case, maybe you want to put the countries here. Maybe you don't want to put nationality. But to keep things simple and to keep things quick, I just went ahead and put the list of continents. All right. Now that we've created them, last thing we need to do, we need to put them in the grid. So nationality label. Sorry. So nationality label. Okay, what's going on? It's going to be in grid row equals to two and then column equals one. And then nationality combo box dot grid is going to be in row equals three. Column equals two. one again. Okay, perfect. Let's run it. And as you can see, we have the nationality here now, and you can see that you can select any one of these different continents. So this is another combo box or drop down menu. So now we have three types of entries here. You have text entries, so the regular entries where you can type stuff. You have the combo box drop down menus, and you have the spin box as well. Now, one last thing I'm going to do in this group. it's actually going to be changing the padding for these inputs. So the reason I actually want to change padding is because I kind of want to space them out and make them look neater. Now you can see there is a slight spacing here. This is due to the fact that the combo box here is taking up more space. This is why it's actually forcing us to have a space. However, it's still not very adequately spaced out here. So we're going to do this using a very quick hack. And this is how we're going to do it. So one thing you can do is similar to what we did here, you specify the padding x and padding y inside the grid. But let's look at how many grid functions we actually have. So we have so many widgets, so many grids, this can get messy. So we're going to do this using one short trick. So we're going to say for widget in the user info frame. So here we're, we're getting all the children widgets of this user in info frame, dot widget info. and then underscore children. So this is how you get it. So for each child, for each widget, what we're going to do is we'll say widget dot grid configure. And then here we specify the padding. So pad X is going to be 10 and then pad Y is going to be five. Now let's actually run it. And as you can see, we have better looking spacing. Everything is more spaced out now and nothing is really clashing anymore. but we still have the same form and the same interface that we're working with. Allow me to note here that this is still resizable. As you resize this label frame and everything inside of it will get centered and everything will be placed in the same place. All right, so this is the very first part. So now I'm going to create the rest of the UI. I'm going to kind of go... slightly faster just because I don't want to waste too much time on this video just typing everything up on the screen I'm going to kind of speed through the stuff that we already talked about and already created multiple times however once we start by creating something new I will definitely explain it step by step as I have already all right so now first thing we want to do is we want to create the second label frame which will contain all the course registration info so let's actually go ahead and as you can see you have the saving course info so i just created a comment right here and then i created a second label frame so this label frame will be called tkinter.labelframe and the parent again will be the frame let's actually go back and refresh in paint so now we're working inside of the red um the red label frame right here so similar to before we're going to create a grid inside it and kind of work inside of it But you still have to note that this label frame still belongs to the external frame, this one right here. And we're still working with this 3x1 grid that I have already highlighted right here. So this is going to be in the second row of this 3x1 grid that is our frame. Alright, so now we have created it, we added it in the grid. Then what we added is we specified the row is going to be 1. And then... we specified the column is going to be zero. We also added a bunch of stuff here and let's actually ignore it for now and we're going to go back to it in just a moment as soon as we create our very first widget. Alright, now if I actually run it you can't really see the new label frame, this is because it has a size of zero therefore it will not show up on the screen because we don't have any widgets inside of it. Similar to what happened at the beginning of the video when we were working on this label frame right here. So let's close it. And let's add our first widget. Our first widget as usual is a label. So Tkinter dot label. This time the parent is going to be the courses frame. So before the parent used to be the user info frame. Now it's going to be this courses frame, we assign the text to be registration status. So this is pretty straightforward. Next thing we're going to do, we're going to create a new type of widget, this is going to be the check button. So this is Tkinter dot check button. The parent again is courses frame. So anytime in Tkinter that you're creating a widget, the parent you have to assign it to a frame or a window or something like that. So it's another widget. And then the text is going to be currently registered. So let's run it again. And again, you won't really see anything. This is because we haven't used any geometry managers to place it on the screen. Let's go ahead and use grid on both of these. So we're going to say row equals zero column equals zero and then row one column zero. Sorry. I just accidentally did a ton of scrolling. Let's come here. And as you can see, you have the registration status label. And you can see that you have this widget, which is a check button. So you can check and uncheck. This is what this check button looks like. Okay, so this is how we were able to create two new widgets inside the new label frame. so let's actually go back and check these what was i actually talking about before let's actually remove them so i'm just going to clear these and run it again and you can see that the new label frame takes up a very small space in my overall grid and it's not the exact same size as the previous label frame which is actually kind of annoying because it doesn't really look that good this is why we use the following we use this sticky equal news So let's actually also clear the padding for now. And let's take a look at this sticky thing right here. So what does sticky really mean? Let's actually run it without the padding. And now you can see it took up all the entire space on both the X and the Y axis. So sticky, essentially, when you use it within the grid parameter, so within the grid function, so when you say grid function here, and then you say sticky equals something, you're saying expand in these directions. Now news. or N E W S, this stands for north, east, west and south. So when you specify all of these letters, you're saying expand it in the north direction. So on top, the south, the east and the west, sorry, east and west here. So this is how the sticky thing works. Then this is why we added the padding as well. So by adding the padding, we were able to get the same size as the previous label frame, and now it looks much better. and it looks like a more formal data form. Okay? So this is why we use these parameters right here, the sticky to expand it, and the padding to keep a consistent padding with the first label frame, because the first one, if you actually find it here, you can see it had a padding of 20 and a padding y of 20 as well. Okay. So now that we've created the very first pair of widgets, we're going to create some more. So we're going to create the number courses. So this is going to be a spin box very similar to the spin box we created before. So again, you have a label, this label belongs to this label frame, and the text is going to be number of completed courses. Finally, you have a spin box, same parent and then it's going to go from zero. So it's going to go from the so you can be registered in zero courses up until to infinity. So here we're not setting a maximum, so you can just put a string and say infinity, and this will not set a maximum to your spin box. Next, we of course have to add them to the grid. So this is going to be row zero column one and then row one column one as well. Let's run it again. So you can come here, you can see that they exist right here. So you have this number of completed courses and you can keep going up. Sorry, I'm pressing on the down one. You can keep going up as much as you want. And there is no maximum because the limit is infinity. Okay, so this looks good. Now we've added two more widgets. So the spin box is very similar to the one we already did here. We're going to add one more spin box. And this is going to be for the number of semesters. So let's go ahead and add this. So you can see a label again. and then a tkinter.spinbox. And you can see again, we go from zero to infinity. The label has the text already. And then we also added them to the grid. Let's run this one again. And as you can see right here, everything is sort of clustered together, but they all exist within this label frame. So now we were able to add them in this grid. So now our updated paint thing kind of looks like the following. So we have two rows actually. and then three columns again. So you have three different columns. Okay, so column one, two, and three, and this is how our grid looks inside this label frame. The label frame still exists within a larger grid inside the frame. We're still following this standard that we're doing. Okay, now one thing is we want to fix the spacing. So before we use these two lines of code to assign similar padding to all of the widgets within this frame, so we're going to do the same thing now. So this is how we're going to do it. So for widget in courses frame, so we get the children of courses frame, and then we're going to assign for each widget a padding X of 10 and a padding Y of 5. This makes it look much better, much more centered, and now it looks much more presentable and in line with the previous label frame. And as you can see, everything looks good now, and we have completed this label frame. All right. So now we have to add one more small labels frame as well as the final button and then we'll be able to finish the interface. So let's go ahead and add the new label frame. So this is going to be everything inside of it. Let's run it and then I'll actually walk you through the code after we take a look. So this is going to be the terms and conditions label frame and then it's just going to contain one check button and it's just going to say I accept the terms and conditions. Do notice one thing, if I check on this, or I uncheck this, they are kind of linked and they get changed together. The reason is we're going to talk about. it later on in the video as we get the information from this entry so for now just totally forget about it but these are essentially two check buttons and this is the third label frame so the last thing we're going to add actually before i do that let me just walk through the code real quick so again we have a new label frame we have the same parameters so row equal this time the row is two so we're using the row two here so we're looking at this label frame and then the column is zero still because we only have one column sticky equal news just so that it gets expanded and then you can see the padding as well if i remove these let me show you how it looks like then it will not take up the entire space and it won't look as neat so this is why we keep them finally another check button so again you it's the parent is the terms frame which is the new label frame that we defined you have the text which is just accepting the terms and conditions and finally we just placed it in the grid so Running it, this is what we have at the very end. Let's go ahead and add the button. So if we come here and add the button, so what we did is we just specify tkinter.button. The parent itself now is going to be the frame and not actually any of these frames right here because we want it to exist outside of them, but still inside the larger grid. So here you can see the grid is three by one. Now we have converted it to actually be... Um... a four by one grid, not a three by one. So you're going to have here another box for the button. So we come here and now let's actually run it. So we place it in row three and then column zero. Let's run it. And you can see the button right here. Of course, we want to make it look better. So then we're going to add this sticky equal news thing to expand it. Of course, now it takes up way too much space. So it takes up more space than the others. We're going to add some padding. So pad X equals 20 and pad Y equals 20 again. There you go. Now the button is sort of in line with all of our label frames. Now allow me to fix one thing. I think a pad Y of 20 is too much because as you can see, there is a larger space between all of the label frames. So let's actually come back to the very first label frame. And rather than pad Y is 20, I'm just going to change it to 10 and do the same. for the other two. So I'm just going for this one as well. And then for the accept terms one as well, and I'll do it for the button as well. So since the button is sort of similar, let's run it. And you can see now it looks better because it's more tightly knit together and they're not as spaced out as before. Okay, so now we have fully created our interface, we have the UI, we have the data entry form. What we want to do next is add the functionality related to saving all of this information. Now that we've finished with our interface, the next thing we want to do is add functionality to this button so that we can actually enter some data and retrieve the data from all of these entries and actually save it. So how are we going to do this? First things first, we need to create a function that gets executed when this button is clicked. To do so, let's close this. So here where I define my button, I need to add one thing which is this command right here. So what does this command property mean? This means that when this button is clicked, go ahead and execute the function enterData. What is this function? This is one we're going to define ourselves. So again, what happens here is when the button is clicked, we will go ahead and execute enterData. So this function enterData, we can define it like so. I just defined a very, very simple... print statement so when the button is clicked we're simply going to print high so this is just verify that this is working so let's run it and press on the button actually and you can see right here you have the high right here okay so great now we can actually see it you can see how this function is working when the button is clicked this will take us to this function now we don't actually want to print high we want to retrieve the information from these different entries that we added to our screen How are we going to do so? Let's start by retrieving whatever first name the user types here in this entry. So we go ahead and rather than printing hi, what I'm going to do is simply I'm just going to print out the following. So I'm going to print out, sorry not print out, I'm going to get the first name entry value. So here I will just say first name entry, this is the entry that we defined previously right here, this is the tkinter.entry. and we use the dot get function to get the contents of this entry so this is very straightforward using this we can actually save the value of the first name in this variable let's actually close this so we can do the same thing for the last name So you can see last name entry dot get again, super straightforward. And finally, now that we have these two values, let's actually go ahead and print them out. So you can see I added a print statement, it says first name, which is the actual first name and last name is the last name. Now, let's try to run it and see that this is actually working. I'm going to come here and I'm going to type john Smith. And then I will just press on the enter data. And you can see in the output, we have first name john last name Smith. so this totally worked we were able to actually see the information and retrieve it from our entries using these get functions so this is really straightforward super easy this is how we will do it for most of these entries as well okay so this is now working let's do it for the title age and nationality as well so we can go ahead for the title also the combo box has this very same dot get function the combo box is essentially an entry itself attached with a drop down list box but this isn't really the purpose of this video so I'm not going to get into it, but really you can also use the.get function. Same thing for the spin box, so for the age spin box we will also press the.get function, this function will be called and it will retrieve the information which is the age. Let's do the same thing for nationality, again same thing,.get function. So this is super straightforward, there's really nothing going on here. So let's actually print these guys out as well. So let's print the title, the age and the nationality as well. So now let's go ahead, let's say John Smith again. And now here we're going to say Mr. And then his age, let's say something like 24. And then nationality, let's go with Asia. And let's press on enter data. So if we scroll down here, you can see that this got printed out. So you can see first name, last name, and we have the title. the age, as well as the nationality. So for now, we're just printing them out. We're not really entering them anywhere, no database, no Excel file, nothing, because I just want to show you how you can actually retrieve them first, show you how this is working. And then later on, we can work on entering this data. Okay. So now we have this nationality. So what is the next that we want to get? We want to get these two. So we want to get the number of completed courses, as well as the number of semesters. I'm going to show you the currently registered checkbox thing at the very end. This is because this is the most complicated out of all of these. These two will also require to get functions. So you can see course info, number of courses. You can see numcoursespinbox.get and then numberofsemesterspinbox.get as well. So we're also getting the information. So now that I've got this information, I will print it out and you can see like this. So let's print it. Let's actually press on enter data without entering any information. Now by default, the number of courses and semesters is zero. This is because the spin box starts at zero. This is the default. So now we were all, we were also able to get these two different values. One last thing I can print out is a small separator just so that if we're printing this out multiple times, we have a separator between the two. So if I press on enter and enter multiple times, let me just make this bigger. you can see we have two separators between the two different users. So we were able to retrieve everything except the information related to this checkbox. So why can't we use a dot get function? Let's actually try it out. So I'm just going to come here and create a new variable. Let's call it registration status, and it's going to be equal to registration check dot get. Okay, and Let's also print it out. So I'm going to add another print statement here. And this is going to be registration status. And then we will print out the registration status that we saved. Let's run it. Press on enter data. As you can see, we have an exception error. And you can see it's an attribute error. Check button object has no attribute get. So obviously here we have a problem. This check button doesn't work with get. How do we solve this? Well, really here, what you need to do is you need to actually bind this checkbox to a variable. What does binding mean? I'm going to show you right now. Let's actually comment this line of code out and comment the print statement out as well. And let's head back to where we first defined our first checkbox. And this is here. So saving course info. And this is where we define the checkbox. So this check button right here. So I'm going to separate it from the rest of the code just for a bit and what I'm going to do. is create the following. I'm going to say registration status var. So this is going to be the status variable, which I'm going to bind. This will be equal to tkinter.string var. Now that this is equal to it. So as you can see, I created a tkinter.string var. This is basically a type of variable in tkinter, which will contain or actually. store the information of our check button. Let's actually just pause, pause on this for now and let's continue and you'll understand more as I demo it to you. OK, so next what I'm going to say here in the check button where we define the check button, I will simply add something variable equals to reg status bar. Let's actually go to a new line just so everything is clear. OK, oops, sorry. OK, so now you can see that we bound this check button to this variable. This variable will enable me to get the value of my check button. So this might sound a bit complicated. Let me actually show you two more things we have to define here. Something called the on value and something called the off value. Okay, so the on value is what the value of this check button will be when it's actually checked. And this will actually be registered. Okay. And then this one is going to be not registered. And these values will be stored in this variable as we check and uncheck this button. So this reg status var, this string var will contain this actual value. So the way we're going to get it ourselves here where we're retrieving stuff in our enter data, we will just simply... here in registration status, rather than execute the.get on the checkbox, we will do it on the reg status var. So this variable, this string var object actually does have a.get function. And now we can definitely print out the registration status. Let's stop and rerun this. And let me actually show you. So now we're really only concerned with this. We know all the other stuff actually already works. Let me uncheck it. So let me uncheck it and press on enter data. So if we come here, you can see registration status not registered. Now if I do check it, and I press on enter data, you can see registration status registered. So now it's totally working. We were able to achieve this because we bound this check button to a variable. So where was it? Here we go. This string var will always contain the value of my check button. Perfect. Now it's totally working. However, there is one last thing we have to check. Let's actually rerun it from scratch. We're running it for the first time. You can see it's checked by default. Now, if I press on enter data, registration status is nothing. This is because we haven't assigned a default value to this check button. So I'm just going to come here and I will say value. And let's say by default, you are not registered. Not registered. Okay. So by assigning the value, this is the original value as soon as I run the application. Now let me run it. You can see it's not checked. If I press on enter data rather than blank, it actually says not registered. Now if I go ahead and check it again, press on enter data, you can see the registration status is now actually registered. Okay, perfect. Now by doing so we were able to actually retrieve the information from this checkbox. And now we have all of the information from all of our data entry form. Now what we want to add is some validation. So obviously we have this I accept terms and conditions and we don't want to allow the user to enter any data unless they have actually checked this one. So we're going to do and follow a very similar process to what we did with this checkbox just to make sure that the user has already checked this one as well. So let's go back to this checkbox and actually scroll down. So here this is where we defined it the terms check we're going to assign it another string var and this is going to be accept var and this is going to be tkinter dot string var and then the default value so let's say value is going to be not accepted okay then here where we defined our check button we're just going to add a few more parameters firstly we will simply say the variable is equal to accept var so this is exactly like what we just did in order to assign a string variable to the check button next what we're going to do is say the on value is equal to accepted and then the off value is equal to not false it will be equal to not accepted okay so now we have this variable we were able to store everything what we're going to do is simply we come back here And then we do the following, we will say accept var.get, and this will be one of two values. So if accept var equals to accepted. In that case, we're going to do all of this other stuff. So we will perform the rest of this function. And then we'll simply just say, else print error. All right, let's run this one. So you can see it's not accepted for now. Let's press on enter data. And you can see that error was printed out. Now if I do check it, and I press on enter data, if I scroll down, still says error so we have some type of issue here so let's actually scroll back does it not say accepted so this is the on value this is accepted so let's go ahead i can actually see the error and this is because we called this directly on the accept variable this is not a string this is a string var so what we need to do is simply say accepted equals so this is now a variable just do this And now this should work as well. So let's go ahead and let's actually check it. You press on enter data, everything works. Let's uncheck it and press on enter data. And it says error. So now this is totally working. Now, of course, we don't really want to print out an error, what you can do is you can include a pop up using Tkinter. This is something called a Tkinter message box. So from Tkinter, import message box. this is you have to import it explicitly this is one of those things that you need to import explicitly so it's a lowercase m then you come here and you simply say um tkinter dot message box dot show warning let's actually do that and then you have to specify a title equals to something and a message equals to something else So let's actually specify empty strings for now and then I'll show you what these guys are. Now let's run it and let me show you how we have created a pop-up. You can see we have a warning pop-up right here. There is no text on it because we haven't specified the title and the message. The title will go here on the top and then the message will go here. So now I'll simply, the title will be error and then message you have not accepted the terms. So let's actually stop, run again, enter the data and you can see you get the error message, you have not accepted the terms. So this is really nice because we're able to actually validate and prevent our user from entering without actually accepting the terms and conditions. We can also do the very same thing for entering the first name and last name. So let's decide on what are the required entries here. So the age itself, there is a default value, so we don't really need to require it, we don't need to require these guys as well because they have default values. So let's only require the first name and the last name. So simply what I will do is come back here. So after we have a check that the user has accepted and actually here after we get the first name and the last name, what we're going to do, so if first name and last name, so if they are non-empty strings, what we're we will do is perform all of this stuff. So else we'll, we'll give another message box and this will be a tick inter dot message box dot show warning. And here we're going to say title is also equal to utter and the message is equal to first name and last name. are required. So I'll show you what I mean by all of this when I run it. So let's run it. So now first we enter data. It says you have not accepted the terms. Let's accept the terms that enter data again. I get another error. It says first name and last name are required. Now, if I do type my name here, so John Smith and then press on enter data, you can see we were actually able to enter the data. So my bad, I pressed on the button twice, but you kind of get the point. This is how we were able to add some little verification and validation. just to prevent the user from entering too many blank inputs. Alright, so that's really it for creating the interface as well as getting all the information and validating it. So that is really it for this tutorial today. In this video, we were able to create this interface using tkinter as well as write some python code to retrieve all the information from the user inputs that we have on the screen. As I mentioned at the beginning of the video, An extension to this project would be perhaps to enter this data into a database or to an Excel file. I'm happy to make this as a part two to this video, so do let me know what you prefer, whether Excel or a database. I opted to just keep this video just about Tkinter, just so that we can keep everything concise, but I'd be happy to make another video. So I'll see you in the next video and bye bye.

Here you can just fill out certain information and then we're going to retrieve and collect this information using the python code ourselves. So here the user can type certain info such as their first name. So you can see John Smith choose a title. then they can select an age this is a spin box this here is a combo box it's a drop down then here they can check and uncheck they can select a number of completed courses number of semesters and then they can accept or not accept the terms and conditions the way this works if the user does not accept the terms and conditions before filling out the info and they press enter data they will get an error message saying you have not accepted the terms if they do accept it but the first name or the last name is blank you will see that first name and last name are required. So this is just some of the properties we have in this interface.

Now if I do have the name, and I press on enter data, if it's valid, it will simply print out all of the information that it was able to collect. So you can see first name, john, last name, Smith, title, age, everything else. So this is a simple entry form that we're going to create. Then after creating the interface using Tkinter, after I show you how to create these three different groups, so or these three different like boxes that contain other widgets then we will write a function which is for the enter data which will retrieve the information from every single one of these different entries so we'll retrieve the information then print it out now an extension to this project would be to perhaps have the entry enter the data into excel so after retrieving them rather than print them out here we can enter them into excel i'd be happy to make that kind of video for you as well or maybe even into an SQL database.

Okay, so that's sort of the overview of this project and what we're going to build in today's video. This project is beginner friendly. However, if you have seen some of my videos on Tkinter and my beginner series, it would definitely help because everything that we're going to use here has already been mentioned in this video, and it would be much faster for you to understand. However, if you feel like you're up for it, you can definitely just watch this video without having seen any of my other videos.

So... this is definitely beginner friendly. Source code is in the description as always and yeah, without further ado let's just get started. For the first part we're going to write the code so that we can create everything related to the user information. Now first let's get started by actually creating our Tkinter application.

In front of me I have an empty project, I'm using Visual Studio Code. As usual you can use any python text editor that you like. So, so long as you're able to run Python and use it and you're comfortable with it, you can use that.

In my case, I use VS Code, but you don't have to follow the same logic. Alright, so this folder is empty. What I'm going to do is I'm going to right-click, press on New File, and create main.py. This will be where I'm going to write all of my code related to this interface. Now, the very first thing I always need to do is I need to import Tkinter, so you always need to import it.

Then what I'm going to do is I'm going to create my root window, which will be equal to tkinter.tk. This is the root window. This means that this is the parent window for everything else. This is the widget that will contain all of the other widgets.

So as we later on create the entries and the labels and things like that, we're all going to place them inside this root window. So think of it as the largest box and everything inside it will be placed inside this box. so in order to run a tkinter application you need to use something called window sorry window.main loop this main loop will run an infinite loop so long as the application is being executed as soon as you exit the application the main loop will stop running so as you can see if i go here and i run it this will launch an application very basic this is the basic window in tkinter the most basic application you can create and the main loop will continue running it until i press on x then this main loop will stop being executed. Now, one last thing I want to do here is I want to set the window title.

I'm just going to set it to be something called data entry form just so that we actually have a title for our window. Let's check it again. And you can see here you have data entry form in the window title. Okay, now that we have created our window, let's actually start by placing all our widgets and seeing how we're going to organize them and position them on the screen. The very first thing I'm going to create is something called a frame and this will be frame equal to tkinter.frame.

The parent of this frame is going to be our root window. So again this is what I mean by parent. This frame is contained inside the window.

Actually allow me to visualize this for you. I'm just going to pull up paint. Not too many artistic skills here, but really I just want to show you the main logic and what essentially we're doing.

So you have this. This is the window. So I'm just going to type here window. And then what I'm going to create now, what I just created, is something called the frame, which is going to be nested inside the window.

So this is the frame that I just created. This is how it looks like. And it exists. inside of the parent window window is going to be the parent of everything else everything inside this application will be contained inside this window widget all right so i hope this visualization sort of helps you understand how this hierarchy is working so let's go back to the code now that i have created my frame the next thing i'm going to do is i'm going to pack it so in tkinter if you've seen any of my previous videos or if you've learned or used tkinter at all you you should know that anytime we create a widget and we want to show it on the screen, there are always going to be two steps. First things first, you actually have to create the widget and define it.

You might want to save it in a variable as we do here, so frame is equal to tkinter.frame. The second step is you have to either pack, place, or grid. These guys are what we call the geometry managers or layout managers in Tkinter.

They enable us to position everything and place it on the screen and sort of organize all our widgets. Now why am I saying frame.pack, not frame.grid, not frame.place? Because here pack is the easiest one, and this will keep everything responsive and nice looking, so that when we resize our window, it still looks the same.

So for now, if I actually run it, you can't really see anything. In fact, you see nothing. This is because the frame itself is still empty, so it has a size of 0, so you can't really visualize it yet.

As we add more widgets, I'm going to re-explain stuff related to the frame, just so you can understand why we used pack and how this is making a difference. Okay, so we have one frame inside the application. The next thing we're going to do is we're going to create something called a label frame.

Now, this label frame will also exist inside this frame that we have right here. And in fact, let me actually change the color. The label frame, we're going to have three of them.

So we're going to have one. and then later on we're going to have let's okay i'm changing the color let's now do a red one now you're going to have another one here and then finally you're going to have uh let's say a third one okay and this is how our application is going to be organized as you can see we have the largest window then you have a frame inside this window and finally inside this frame you have three stacked list frames now these three list frames think of it as if they're going to be part of something called a grid now this grid is going to be a three by one grid now i'm not sure if you can actually see that but essentially what i'm saying the grid is three by one so there are three rows and one column and this is how we're going to stack the label frames so they're going to be on top of each other in this format just so that we can combine the different information together and it still looks neat and organized Let's actually go ahead and create our very first label frame. So what we're going to do here is we're going to call it user info frame, and it's going to be equal to T counter dot label frame.

So this is a label frame, not a frame. Now you will see the difference as I show you now, the parent for it is going to be the frame itself that we created before. Not the window.

Why is that? This is because here, as I showed you, this blue label frame, the one we're creating right now, is contained inside this frame, the black one right here. And the frame itself is contained in the window.

But the label frame, its direct parent is frame. This is why here we specify the parent to be frame. So the very first parameter you're going to pass is frame.

Okay. Next, what I want to specify is the text. So the text here is going to be user information.

Let's actually separate this code from the rest. I'm just going to put a comment here called saving user info, just so that we have some future reference. So now we have created the label frame.

Next, what we're going to want to do is we want to put it inside the frame. So as we said before, two steps each time. You define your widget in Tkinter. And then finally, you also have to pack place or grid. Now, because we said we're going to use a 3x1 grid, so let's go ahead and say userInfoFrame.grid this time and not.pack.

And anytime you use.grid, you need to say row and specify a certain number. And then you say column and specify a number again. How do I know the values for these? Let's go back to paint and visualize actually. So we're working inside this blue square right here.

This is in the first row. first column. Well there is only one column anyway but we have to specify the column anyways.

So this is the first column and the first row. In Python everything starts from an index of 0. So here it's actually row 0 and column 0 and not actually row 1. So let's go here and we specify row equals 0 and column equals 0. Now that I've done this let's actually run it and you still can't see anything. This is because the label frame is empty and it won't show up on the screen till we populate it with at least one internal widget just so you can actually see it. So let's actually do that. Close this and I'm going to start by creating the widgets inside of this label frame.

So I'm just going to call something the first name label and this will be a tkinter.label. The parent here, so you should be able to guess what's the parent here. Rather than it being the frame or the window, it's going to be the user info frame. So now this label, if we come here and we draw it, it's going to be right here.

This is going to be the label that we created. It's inside this label frame, which is inside the frame, which is inside the window. So there's a lot of hierarchy here, but we have to do this in order for us to actually create a very nice and neat looking interface.

This helps us position and organize these widgets on the screen. Otherwise, we're going to have a big mess and it's going to be much more difficult to actually organize these widgets. So now we're actually placing this label inside the label frame.

The label frame is inside the frame and then the frame itself is inside the window. So let's come back here. Okay, so now that you have this label frame and we've created the label, let's just give it a text.

This text is going to say first name. So we've created a label. Again, let's actually run it. And as you can see, nothing happens.

Why is that? This is because we didn't follow step two. Again, anytime in Tkinter that you want to add a widget to your screen, the first step is always going to be to create and define this widget. Then the second step is always going to be packing, placing it or grid. So here I'm going to say first name label dot grid.

and now i have another grid this grid is actually inside of the label frame so if i come here and delete this one i can see that i have a grid going on here and this is how it's going to be divided so we're going to have three columns and we're going to have a certain number of rows we're going to see in the video but this is how the grid is going to look like for now the label itself it's going to exist okay sorry about that Let me just put this one back and change it to black. So for now, the label itself is going to exist in this cell right here. So this is going to be row zero, column zero.

So let's actually come back and we're going to say row is equal to zero and column is equal to zero. So this is where we're placing our label in this grid. We run it and if you resize it, you can now you can see the label frame so you can see the label frame saying user information.

This is a frame with a border and a title. So this will be able to group different widgets in the interface. And you can see the label that we created.

Now you might ask me, why is this small? Why doesn't it look expanded? This is because grid by default will assign to these rows and columns as much space as you actually need.

So here the maximum space is what you need for this label. So by default, this is the label size, the default label size. So the column...

This will be how big it is. There are no other columns for now so this label frame is this size as well. As we add more widgets you're going to see the size is going to change and it's going to start looking better.

Alright so let's actually close it and add another one for the last name. So I'm just going to come here and say last name label. And this is going to be another tkinter.label. Again, the parent is going to be the user info frame. So it has the same parent.

And the text this time is going to be equal to last name. Then I'm just going to last name label.grid. And it's going to be in row 0, same row, but in another column.

So this is going to be column equals 1. So now let's run it and check. you can see that now we have two separate labels in this interface within our label frame so you can see how it looks right here all right perfect so now that we've done this what we want to then go ahead and add is the entries so i'm just going to say again first name entry is equal to a tickenter dot entry so the entry is the text box so this is where the user user will write some inputs so the entry the parent again it will be the user info frame so here we're still working inside of this frame right here so this is the parent and we're going to create another one for the last name so last name entry is going to be equal to tick enter dot entry user info frame very like it's the exact same all right now we've added them again you can run you won't actually see them because you need to use grid to place them on the screen so first name entry you will say dot grid and this time This entry will be located, let's see, here in this cell right here. So this is row equal 1 and then column equal 0 again.

So let's say row equal 1, column equal 0. And then on the other hand, for the last name entry dot grid, we will say the row is still equal to 1, but the column itself is equal to 1. Now that we have added these on the screen, I'm going to run it. And as you can see, we're starting to have a form, a kind of data entry form. Let's expand it. You can see you have the first name. You have the first name entry here.

And then you have another entry right here. It looks good. And we're actually able to see some results on the screen. All right.

So now we have created these two entries. And we are going to create some other types of entries, some combo boxes, a spin box. But for now, one thing I actually want to show you is we can actually change the padding related to this label frame.

If I run it, as you can see right here, you can see everything is kind of squished together and the label frame itself is not really showing. I'm just going to add a padding to the label frame. So this is going to be pad X. So on the X axis, so horizontally, I'm going to add a padding of 20 and then the pad Y is also going to be 20. Let's run this again and you can see now we can actually see the label frame itself. Now the stuff here is still kind of squished together, but later on I'm going to show you how we're going to separate it and also make it look more presentable.

So now let's add a new entry and this one is not going to be a tkinter.entry, it's going to be a sort of list that the user can choose from. So first things first, we also need a label for this one. So we're just going to call it title.

So here the user will be able to choose a title like Mr., Ms., Dr., things like that. So the title is also going to be equal to a Tkinter.label. The parent again is still userInfoFrame and the text is going to be title.

So by now you should be comfortable with this and sort of understand everything that makes up a Tkinter label in Tkinter. Now that we've created the label, next thing I'm going to do is I'm going to say title combo box and this will be equal to a combo box. Now one thing we're going to note The combo box itself cannot be found using tkinter.combo box. This is actually incorrect and this is not a thing in tkinter.

Even this one as well that is suggested it's not a correct module. So what you need to do is you need to use the ttk module. So ttk you import it like so. So from tkinter import ttk.

ttk stands for themed tkinter. So this is the collection of themed widgets. They're a collection of widgets that allow you to create more modern or native looking applications using Tkinter.

Now we're not using them for everything in this tutorial, but for the combo box, it's absolutely mandatory because the combo box itself doesn't really exist inside of Tkinter. So we're going to have to say ttk.comboBox. And now we're actually able to create a combo box. Again, you have to specify the parent. So for every widget, you have to always the first thing you have to specify is the parent.

Obviously, every widget except the very root. So which is the root window right here. So now that we've specified the parent, next thing we're going to do is we're going to say the values list.

So this is a list of values that will be appearing in the combo box. This is what will enable us or enable the user actually to choose from a selection. So let's actually write the list of titles. You have Mr. You have Ms. You have Doctor. And let's actually just go with these three.

And actually let's create the very first one. It's an empty one. So maybe the user doesn't want to choose a title. They don't have any title.

They can just go with nothing. So now if you run it again, it doesn't show up because we haven't put it on the interface. We need to use the grid. So actually let's use the grid.

So you have title the label. Let's actually replace this and rename it to title underscore label just so that we're consistent with the naming. So title label dot grid.

And now the row is going to be zero, but the column is going to be two. Why is that? This is because currently what we're working with is this cell right here.

So we're placing it in this cell. And then we're going to place the combo box in this cell as well. Okay. So now this is row zero column two. And then the title underscore combo box is going to be.

In row 1, column 2. Perfect, let's run it. And as you can see, we have a combo box. This is a drop-down menu which the user can select the title from. And as you can see, it looks good and it's actually working.

Alright, perfect. So we're done with the first row. What we want to create next is going to be the second row which will contain two more types of entries.

The first one is going to be a spin box for the user age. So first things first, again, I'm always going to need a label. So the age label is going to be a tkinter.label. And then it will the parent will be user info frame. And this case, the text is going to be age.

Now, age spin box. So the spin box, which is the counter, you're going to see it on the screen in a moment, it will be equal to tkinter.spinbox. So this is the number.

It starts at a certain number and can be counted to another number. First things first, the parent is the user info frame. You actually don't need values.

So the user info frame, let's run it and I'm going to show you how the spin box looks like. Again, I forgot to actually grid it, so let's say age label dot grid. This will be in row equals to two and then column equals zero and then age not label, age spin box dot grid. This is going to be in row equals to 3, and then column equals to 0. So now we have a total of four different rows. Now I can show you, as you can see, you have a new row.

So you have this is row 0, row 1, row 2, and row 3. This is what a spin box is. It's a counter. But now you can see there are no values yet. We need to specify the values. To do so, we specify something which is first the from.

and we're going to start at 18 so let's say users have to be at least 18 years of age and then we're going to say 2 and let's put a maximum at 110 years okay so now if we run it you can see now we have a spin box and you can count up or down using the buttons on the spin box itself perfect so now we have created the spin box what we're going to do next is create the final entry in this group which is going to be another combo box for the user's nationality So let's go ahead. First things first, again, a label, so nationality, label, and this is going to be equal to tkinter.label, same parent as usual, the user info frame, and then the text is going to be equals to nationality. Okay, now we've created it, then we're going to create the nationality combo box.

So again, combo box, you need to use ttk, not tkinter, you create the combo box, you assign the parent, and then finally what you need to do is you need to assign the values after you've assigned the values here we're going to write a list of nationalities because the list of countries is pretty long and i don't want to go ahead and copy it from somewhere and create a very long thing so usually you can use this from a database you can get this from a list some type of json file maybe so i'm just going to type in the list of continents because it's still going to be much shorter than a list of countries i'm just going to go ahead africa and Antarctica. Let me just type them up real quick. So now that I'm doing this, as you can see, so two more and South America.

Okay. So these are the continents that the user can select as nationality. Again, in your case, maybe you want to put the countries here.

Maybe you don't want to put nationality. But to keep things simple and to keep things quick, I just went ahead and put the list of continents. All right.

Now that we've created them, last thing we need to do, we need to put them in the grid. So nationality label. Sorry. So nationality label.

Okay, what's going on? It's going to be in grid row equals to two and then column equals one. And then nationality combo box dot grid is going to be in row equals three.

Column equals two. one again. Okay, perfect. Let's run it. And as you can see, we have the nationality here now, and you can see that you can select any one of these different continents.

So this is another combo box or drop down menu. So now we have three types of entries here. You have text entries, so the regular entries where you can type stuff.

You have the combo box drop down menus, and you have the spin box as well. Now, one last thing I'm going to do in this group. it's actually going to be changing the padding for these inputs.

So the reason I actually want to change padding is because I kind of want to space them out and make them look neater. Now you can see there is a slight spacing here. This is due to the fact that the combo box here is taking up more space.

This is why it's actually forcing us to have a space. However, it's still not very adequately spaced out here. So we're going to do this using a very quick hack. And this is how we're going to do it.

So one thing you can do is similar to what we did here, you specify the padding x and padding y inside the grid. But let's look at how many grid functions we actually have. So we have so many widgets, so many grids, this can get messy.

So we're going to do this using one short trick. So we're going to say for widget in the user info frame. So here we're, we're getting all the children widgets of this user in info frame, dot widget info. and then underscore children. So this is how you get it.

So for each child, for each widget, what we're going to do is we'll say widget dot grid configure. And then here we specify the padding. So pad X is going to be 10 and then pad Y is going to be five.

Now let's actually run it. And as you can see, we have better looking spacing. Everything is more spaced out now and nothing is really clashing anymore.

but we still have the same form and the same interface that we're working with. Allow me to note here that this is still resizable. As you resize this label frame and everything inside of it will get centered and everything will be placed in the same place.

All right, so this is the very first part. So now I'm going to create the rest of the UI. I'm going to kind of go... slightly faster just because I don't want to waste too much time on this video just typing everything up on the screen I'm going to kind of speed through the stuff that we already talked about and already created multiple times however once we start by creating something new I will definitely explain it step by step as I have already all right so now first thing we want to do is we want to create the second label frame which will contain all the course registration info so let's actually go ahead and as you can see you have the saving course info so i just created a comment right here and then i created a second label frame so this label frame will be called tkinter.labelframe and the parent again will be the frame let's actually go back and refresh in paint so now we're working inside of the red um the red label frame right here so similar to before we're going to create a grid inside it and kind of work inside of it But you still have to note that this label frame still belongs to the external frame, this one right here. And we're still working with this 3x1 grid that I have already highlighted right here.

So this is going to be in the second row of this 3x1 grid that is our frame. Alright, so now we have created it, we added it in the grid. Then what we added is we specified the row is going to be 1. And then...

we specified the column is going to be zero. We also added a bunch of stuff here and let's actually ignore it for now and we're going to go back to it in just a moment as soon as we create our very first widget. Alright, now if I actually run it you can't really see the new label frame, this is because it has a size of zero therefore it will not show up on the screen because we don't have any widgets inside of it. Similar to what happened at the beginning of the video when we were working on this label frame right here.

So let's close it. And let's add our first widget. Our first widget as usual is a label. So Tkinter dot label.

This time the parent is going to be the courses frame. So before the parent used to be the user info frame. Now it's going to be this courses frame, we assign the text to be registration status. So this is pretty straightforward.

Next thing we're going to do, we're going to create a new type of widget, this is going to be the check button. So this is Tkinter dot check button. The parent again is courses frame.

So anytime in Tkinter that you're creating a widget, the parent you have to assign it to a frame or a window or something like that. So it's another widget. And then the text is going to be currently registered.

So let's run it again. And again, you won't really see anything. This is because we haven't used any geometry managers to place it on the screen. Let's go ahead and use grid on both of these. So we're going to say row equals zero column equals zero and then row one column zero.

Sorry. I just accidentally did a ton of scrolling. Let's come here.

And as you can see, you have the registration status label. And you can see that you have this widget, which is a check button. So you can check and uncheck.

This is what this check button looks like. Okay, so this is how we were able to create two new widgets inside the new label frame. so let's actually go back and check these what was i actually talking about before let's actually remove them so i'm just going to clear these and run it again and you can see that the new label frame takes up a very small space in my overall grid and it's not the exact same size as the previous label frame which is actually kind of annoying because it doesn't really look that good this is why we use the following we use this sticky equal news So let's actually also clear the padding for now. And let's take a look at this sticky thing right here.

So what does sticky really mean? Let's actually run it without the padding. And now you can see it took up all the entire space on both the X and the Y axis.

So sticky, essentially, when you use it within the grid parameter, so within the grid function, so when you say grid function here, and then you say sticky equals something, you're saying expand in these directions. Now news. or N E W S, this stands for north, east, west and south. So when you specify all of these letters, you're saying expand it in the north direction.

So on top, the south, the east and the west, sorry, east and west here. So this is how the sticky thing works. Then this is why we added the padding as well.

So by adding the padding, we were able to get the same size as the previous label frame, and now it looks much better. and it looks like a more formal data form. Okay?

So this is why we use these parameters right here, the sticky to expand it, and the padding to keep a consistent padding with the first label frame, because the first one, if you actually find it here, you can see it had a padding of 20 and a padding y of 20 as well. Okay. So now that we've created the very first pair of widgets, we're going to create some more. So we're going to create the number courses. So this is going to be a spin box very similar to the spin box we created before.

So again, you have a label, this label belongs to this label frame, and the text is going to be number of completed courses. Finally, you have a spin box, same parent and then it's going to go from zero. So it's going to go from the so you can be registered in zero courses up until to infinity. So here we're not setting a maximum, so you can just put a string and say infinity, and this will not set a maximum to your spin box.

Next, we of course have to add them to the grid. So this is going to be row zero column one and then row one column one as well. Let's run it again. So you can come here, you can see that they exist right here.

So you have this number of completed courses and you can keep going up. Sorry, I'm pressing on the down one. You can keep going up as much as you want. And there is no maximum because the limit is infinity.

Okay, so this looks good. Now we've added two more widgets. So the spin box is very similar to the one we already did here.

We're going to add one more spin box. And this is going to be for the number of semesters. So let's go ahead and add this. So you can see a label again. and then a tkinter.spinbox.

And you can see again, we go from zero to infinity. The label has the text already. And then we also added them to the grid.

Let's run this one again. And as you can see right here, everything is sort of clustered together, but they all exist within this label frame. So now we were able to add them in this grid. So now our updated paint thing kind of looks like the following. So we have two rows actually.

and then three columns again. So you have three different columns. Okay, so column one, two, and three, and this is how our grid looks inside this label frame.

The label frame still exists within a larger grid inside the frame. We're still following this standard that we're doing. Okay, now one thing is we want to fix the spacing. So before we use these two lines of code to assign similar padding to all of the widgets within this frame, so we're going to do the same thing now. So this is how we're going to do it.

So for widget in courses frame, so we get the children of courses frame, and then we're going to assign for each widget a padding X of 10 and a padding Y of 5. This makes it look much better, much more centered, and now it looks much more presentable and in line with the previous label frame. And as you can see, everything looks good now, and we have completed this label frame. All right.

So now we have to add one more small labels frame as well as the final button and then we'll be able to finish the interface. So let's go ahead and add the new label frame. So this is going to be everything inside of it. Let's run it and then I'll actually walk you through the code after we take a look.

So this is going to be the terms and conditions label frame and then it's just going to contain one check button and it's just going to say I accept the terms and conditions. Do notice one thing, if I check on this, or I uncheck this, they are kind of linked and they get changed together. The reason is we're going to talk about. it later on in the video as we get the information from this entry so for now just totally forget about it but these are essentially two check buttons and this is the third label frame so the last thing we're going to add actually before i do that let me just walk through the code real quick so again we have a new label frame we have the same parameters so row equal this time the row is two so we're using the row two here so we're looking at this label frame and then the column is zero still because we only have one column sticky equal news just so that it gets expanded and then you can see the padding as well if i remove these let me show you how it looks like then it will not take up the entire space and it won't look as neat so this is why we keep them finally another check button so again you it's the parent is the terms frame which is the new label frame that we defined you have the text which is just accepting the terms and conditions and finally we just placed it in the grid so Running it, this is what we have at the very end. Let's go ahead and add the button.

So if we come here and add the button, so what we did is we just specify tkinter.button. The parent itself now is going to be the frame and not actually any of these frames right here because we want it to exist outside of them, but still inside the larger grid. So here you can see the grid is three by one. Now we have converted it to actually be...

Um... a four by one grid, not a three by one. So you're going to have here another box for the button.

So we come here and now let's actually run it. So we place it in row three and then column zero. Let's run it.

And you can see the button right here. Of course, we want to make it look better. So then we're going to add this sticky equal news thing to expand it. Of course, now it takes up way too much space. So it takes up more space than the others.

We're going to add some padding. So pad X equals 20 and pad Y equals 20 again. There you go. Now the button is sort of in line with all of our label frames.

Now allow me to fix one thing. I think a pad Y of 20 is too much because as you can see, there is a larger space between all of the label frames. So let's actually come back to the very first label frame. And rather than pad Y is 20, I'm just going to change it to 10 and do the same.

for the other two. So I'm just going for this one as well. And then for the accept terms one as well, and I'll do it for the button as well.

So since the button is sort of similar, let's run it. And you can see now it looks better because it's more tightly knit together and they're not as spaced out as before. Okay, so now we have fully created our interface, we have the UI, we have the data entry form. What we want to do next is add the functionality related to saving all of this information. Now that we've finished with our interface, the next thing we want to do is add functionality to this button so that we can actually enter some data and retrieve the data from all of these entries and actually save it.

So how are we going to do this? First things first, we need to create a function that gets executed when this button is clicked. To do so, let's close this. So here where I define my button, I need to add one thing which is this command right here.

So what does this command property mean? This means that when this button is clicked, go ahead and execute the function enterData. What is this function?

This is one we're going to define ourselves. So again, what happens here is when the button is clicked, we will go ahead and execute enterData. So this function enterData, we can define it like so.

I just defined a very, very simple... print statement so when the button is clicked we're simply going to print high so this is just verify that this is working so let's run it and press on the button actually and you can see right here you have the high right here okay so great now we can actually see it you can see how this function is working when the button is clicked this will take us to this function now we don't actually want to print high we want to retrieve the information from these different entries that we added to our screen How are we going to do so? Let's start by retrieving whatever first name the user types here in this entry.

So we go ahead and rather than printing hi, what I'm going to do is simply I'm just going to print out the following. So I'm going to print out, sorry not print out, I'm going to get the first name entry value. So here I will just say first name entry, this is the entry that we defined previously right here, this is the tkinter.entry.

and we use the dot get function to get the contents of this entry so this is very straightforward using this we can actually save the value of the first name in this variable let's actually close this so we can do the same thing for the last name So you can see last name entry dot get again, super straightforward. And finally, now that we have these two values, let's actually go ahead and print them out. So you can see I added a print statement, it says first name, which is the actual first name and last name is the last name.

Now, let's try to run it and see that this is actually working. I'm going to come here and I'm going to type john Smith. And then I will just press on the enter data.

And you can see in the output, we have first name john last name Smith. so this totally worked we were able to actually see the information and retrieve it from our entries using these get functions so this is really straightforward super easy this is how we will do it for most of these entries as well okay so this is now working let's do it for the title age and nationality as well so we can go ahead for the title also the combo box has this very same dot get function the combo box is essentially an entry itself attached with a drop down list box but this isn't really the purpose of this video so I'm not going to get into it, but really you can also use the.get function. Same thing for the spin box, so for the age spin box we will also press the.get function, this function will be called and it will retrieve the information which is the age. Let's do the same thing for nationality, again same thing,.get function.

So this is super straightforward, there's really nothing going on here. So let's actually print these guys out as well. So let's print the title, the age and the nationality as well. So now let's go ahead, let's say John Smith again.

And now here we're going to say Mr. And then his age, let's say something like 24. And then nationality, let's go with Asia. And let's press on enter data. So if we scroll down here, you can see that this got printed out.

So you can see first name, last name, and we have the title. the age, as well as the nationality. So for now, we're just printing them out. We're not really entering them anywhere, no database, no Excel file, nothing, because I just want to show you how you can actually retrieve them first, show you how this is working. And then later on, we can work on entering this data.

Okay. So now we have this nationality. So what is the next that we want to get? We want to get these two. So we want to get the number of completed courses, as well as the number of semesters.

I'm going to show you the currently registered checkbox thing at the very end. This is because this is the most complicated out of all of these. These two will also require to get functions. So you can see course info, number of courses.

You can see numcoursespinbox.get and then numberofsemesterspinbox.get as well. So we're also getting the information. So now that I've got this information, I will print it out and you can see like this. So let's print it.

Let's actually press on enter data without entering any information. Now by default, the number of courses and semesters is zero. This is because the spin box starts at zero.

This is the default. So now we were all, we were also able to get these two different values. One last thing I can print out is a small separator just so that if we're printing this out multiple times, we have a separator between the two. So if I press on enter and enter multiple times, let me just make this bigger.

you can see we have two separators between the two different users. So we were able to retrieve everything except the information related to this checkbox. So why can't we use a dot get function?

Let's actually try it out. So I'm just going to come here and create a new variable. Let's call it registration status, and it's going to be equal to registration check dot get.

Okay, and Let's also print it out. So I'm going to add another print statement here. And this is going to be registration status.

And then we will print out the registration status that we saved. Let's run it. Press on enter data.

As you can see, we have an exception error. And you can see it's an attribute error. Check button object has no attribute get. So obviously here we have a problem. This check button doesn't work with get.

How do we solve this? Well, really here, what you need to do is you need to actually bind this checkbox to a variable. What does binding mean? I'm going to show you right now. Let's actually comment this line of code out and comment the print statement out as well.

And let's head back to where we first defined our first checkbox. And this is here. So saving course info. And this is where we define the checkbox. So this check button right here.

So I'm going to separate it from the rest of the code just for a bit and what I'm going to do. is create the following. I'm going to say registration status var. So this is going to be the status variable, which I'm going to bind.

This will be equal to tkinter.string var. Now that this is equal to it. So as you can see, I created a tkinter.string var. This is basically a type of variable in tkinter, which will contain or actually.

store the information of our check button. Let's actually just pause, pause on this for now and let's continue and you'll understand more as I demo it to you. OK, so next what I'm going to say here in the check button where we define the check button, I will simply add something variable equals to reg status bar.

Let's actually go to a new line just so everything is clear. OK, oops, sorry. OK, so now you can see that we bound this check button to this variable. This variable will enable me to get the value of my check button. So this might sound a bit complicated.

Let me actually show you two more things we have to define here. Something called the on value and something called the off value. Okay, so the on value is what the value of this check button will be when it's actually checked.

And this will actually be registered. Okay. And then this one is going to be not registered.

And these values will be stored in this variable as we check and uncheck this button. So this reg status var, this string var will contain this actual value. So the way we're going to get it ourselves here where we're retrieving stuff in our enter data, we will just simply...

here in registration status, rather than execute the.get on the checkbox, we will do it on the reg status var. So this variable, this string var object actually does have a.get function. And now we can definitely print out the registration status.

Let's stop and rerun this. And let me actually show you. So now we're really only concerned with this. We know all the other stuff actually already works.

Let me uncheck it. So let me uncheck it and press on enter data. So if we come here, you can see registration status not registered.

Now if I do check it, and I press on enter data, you can see registration status registered. So now it's totally working. We were able to achieve this because we bound this check button to a variable.

So where was it? Here we go. This string var will always contain the value of my check button. Perfect.

Now it's totally working. However, there is one last thing we have to check. Let's actually rerun it from scratch.

We're running it for the first time. You can see it's checked by default. Now, if I press on enter data, registration status is nothing. This is because we haven't assigned a default value to this check button. So I'm just going to come here and I will say value.

And let's say by default, you are not registered. Not registered. Okay. So by assigning the value, this is the original value as soon as I run the application. Now let me run it.

You can see it's not checked. If I press on enter data rather than blank, it actually says not registered. Now if I go ahead and check it again, press on enter data, you can see the registration status is now actually registered.

Okay, perfect. Now by doing so we were able to actually retrieve the information from this checkbox. And now we have all of the information from all of our data entry form.

Now what we want to add is some validation. So obviously we have this I accept terms and conditions and we don't want to allow the user to enter any data unless they have actually checked this one. So we're going to do and follow a very similar process to what we did with this checkbox just to make sure that the user has already checked this one as well. So let's go back to this checkbox and actually scroll down. So here this is where we defined it the terms check we're going to assign it another string var and this is going to be accept var and this is going to be tkinter dot string var and then the default value so let's say value is going to be not accepted okay then here where we defined our check button we're just going to add a few more parameters firstly we will simply say the variable is equal to accept var so this is exactly like what we just did in order to assign a string variable to the check button next what we're going to do is say the on value is equal to accepted and then the off value is equal to not false it will be equal to not accepted okay so now we have this variable we were able to store everything what we're going to do is simply we come back here And then we do the following, we will say accept var.get, and this will be one of two values.

So if accept var equals to accepted. In that case, we're going to do all of this other stuff. So we will perform the rest of this function. And then we'll simply just say, else print error.

All right, let's run this one. So you can see it's not accepted for now. Let's press on enter data. And you can see that error was printed out.

Now if I do check it, and I press on enter data, if I scroll down, still says error so we have some type of issue here so let's actually scroll back does it not say accepted so this is the on value this is accepted so let's go ahead i can actually see the error and this is because we called this directly on the accept variable this is not a string this is a string var so what we need to do is simply say accepted equals so this is now a variable just do this And now this should work as well. So let's go ahead and let's actually check it. You press on enter data, everything works. Let's uncheck it and press on enter data.

And it says error. So now this is totally working. Now, of course, we don't really want to print out an error, what you can do is you can include a pop up using Tkinter. This is something called a Tkinter message box.

So from Tkinter, import message box. this is you have to import it explicitly this is one of those things that you need to import explicitly so it's a lowercase m then you come here and you simply say um tkinter dot message box dot show warning let's actually do that and then you have to specify a title equals to something and a message equals to something else So let's actually specify empty strings for now and then I'll show you what these guys are. Now let's run it and let me show you how we have created a pop-up. You can see we have a warning pop-up right here.

There is no text on it because we haven't specified the title and the message. The title will go here on the top and then the message will go here. So now I'll simply, the title will be error and then message you have not accepted the terms.

So let's actually stop, run again, enter the data and you can see you get the error message, you have not accepted the terms. So this is really nice because we're able to actually validate and prevent our user from entering without actually accepting the terms and conditions. We can also do the very same thing for entering the first name and last name. So let's decide on what are the required entries here. So the age itself, there is a default value, so we don't really need to require it, we don't need to require these guys as well because they have default values.

So let's only require the first name and the last name. So simply what I will do is come back here. So after we have a check that the user has accepted and actually here after we get the first name and the last name, what we're going to do, so if first name and last name, so if they are non-empty strings, what we're we will do is perform all of this stuff.

So else we'll, we'll give another message box and this will be a tick inter dot message box dot show warning. And here we're going to say title is also equal to utter and the message is equal to first name and last name. are required.

So I'll show you what I mean by all of this when I run it. So let's run it. So now first we enter data.

It says you have not accepted the terms. Let's accept the terms that enter data again. I get another error.

It says first name and last name are required. Now, if I do type my name here, so John Smith and then press on enter data, you can see we were actually able to enter the data. So my bad, I pressed on the button twice, but you kind of get the point.

This is how we were able to add some little verification and validation. just to prevent the user from entering too many blank inputs. Alright, so that's really it for creating the interface as well as getting all the information and validating it.

So that is really it for this tutorial today. In this video, we were able to create this interface using tkinter as well as write some python code to retrieve all the information from the user inputs that we have on the screen. As I mentioned at the beginning of the video, An extension to this project would be perhaps to enter this data into a database or to an Excel file.

I'm happy to make this as a part two to this video, so do let me know what you prefer, whether Excel or a database. I opted to just keep this video just about Tkinter, just so that we can keep everything concise, but I'd be happy to make another video. So I'll see you in the next video and bye bye.

Transcript for:Build a Tkinter Data Entry Form

Transcript for:
Build a Tkinter Data Entry Form