Build a CRM Tool With Treeview And Database - Python Tkinter GUI Tutorial #172

what's going on guys john elder here from codingame.com and in this video we're gonna build this cool little crm tool with a tree view and a database for kinter and python all right guys like i said in this video we're gonna build the crm tool using a tree view and a database but before we get started if you like this video you want to see more like it be sure to smash the like button below subscribe to the channel give me a thumbs up for the youtube algorithm and check out cody.com we have dozens of courses with hundreds of videos to teach you to code use coupon code youtube1 to get 30 off membership it's all my courses videos and books runtime fee is just 49. which is insanely cheap all right in the past in this playlist we have worked a lot with databases well the sqlite database and mysql database we've also done a lot of stuff with treeviews so that tree view is this thing right up here with the stripe d things and all the data in it in this video we're going to combine those two things together and we're going to use a tree view but we're going to pull the data from a database so i get a lot of questions about this hey how do we use the tree view with a database and that's what we're going to do in this video so this is probably going to take a couple of videos because this is a big app there's a lot of stuff going on here you see we've got a bunch of data here if i click on something it pops up here we've got aaron if i put aaron e i don't know ernie and we could come up here and click update you can see boom it changes to aaron e up there if we want to click on it again and change it back we can do that if we want to click on tim we've got tim tanaco if we want to add this record we can click it and we can see down here at the bottom tim tanaka has been added if we want to remove him we can let's see where's that remove one boom disappears so all the different things we can do and we're going to dive into this in this video so like i said this is likely to take several videos because there's a lot of stuff going on here so let's dive right into it so head over to our code i've got the sublime text editor in the git bash terminal as always and as always you can find a link to the code in the pinned comment section below as well as a link to the playlist with almost 200 other kinter videos so definitely check that out if you haven't so far and like i said earlier we've done a lot of stuff with databases and a lot of stuff with treeview on this playlist so if you check back in the playlist you can find half a dozen or so videos on the treeview so if you're not real familiar with the treeview maybe go back and watch those i'm going to fly through it very quickly in this video because there's a lot to do and i'm just going to assume you sort of already know about the treeview i mean i'm going to still write out all the code you'll be able to see how i do it but i'm not going to spend a lot of time talking about it so go back and watch those videos if you're a little bit confused so i've got our basic kinder starter code that we always have and the first thing i did was from tkinter import ttk we need the ttk library in order to do a tree view so we just go ahead and import that so you see i've got some bullet points here some of the things we want to get through in this video you can see there's a lot of stuff to do here so i'm just going to dive right in the first thing we want to do is add some style for our tree view because we want to be able to change the color and the formatting of it we don't just want the basic preview we want to make it look good so let's create a variable called style and this is going to be a ttk dot style and the style is a style widget it comes with ttk allows us to do all kinds of cool stuff so now let's pick a theme and so let's go style dot theme underscore use and we just want to use the default theme and even though it's the default theme it's not really the default theme if you just use the regular theme that comes with tree view it doesn't look as good but this default thing gives us some color at the top for our column headers and we'll see that in a minute so okay so now let's configure the tree view colors so let's go style dot configure and we're going to do a whole bunch of stuff here we're going to work on the tree view and let me put these on multiple lines so we can read it easier let's set the background 2 and i'm going to call d3 d3 d3 that's a sort of a gray color right and let's go for ground and let's set that equal to just black because we don't really see that and let's go row height this is going to be how high the rows are set that equal to 25 and then finally let's go field background and also set that to d3 d3 d3 and like i said d3 is like a silvery color so okay that will set our colors just the basic preview itself we're also going to change it to where there's striped rows and we'll do that in just a second so now whenever we click on a actually let me pull this back over whenever we click on one of these things we want a color to appear see how it's sort of darker blue so we can do that by using a style map so let's go style.map and again that style is just the style variable right and what do we want to do we want to work on the tree view again and let's set the background to and this is a little where we use a python list with a tuple inside of it and we want to go selected right and then set the color and then for this i want to go three four seven zero and that's like i said that's that sort of darker blue color because i'm going to use a light blue stripe and so this sort of dark blue i think looks good use any colors you like though uh whatever you like i just chose that okay so so far so good so now let's create a tree view frame and the reason why we're going to put our tree view in a frame is because we're going to put a scroll bar on there you see here and scroll bars as you probably know they're just easier to do when you stick them in a frame instead of trying to stick them in the tree view itself or stick them in the anything themselves much easier just to use a frame so that's we're going to do here i'm going to call this tree underscore frame and this is going to be a frame we want to put it in root and then let's go tree underscore frame dot pack and this gives us a pad y of like 10 just to push it down the screen a little bit so okay that looks good now let's create the scroll bar so i'm going to call this tree underscore scroll because i'm very creative with these names this is going to be a scroll bar and we want to put it in the tree underscore frame that we just created right here right and then we want to go tree underscore scroll dot pack and we want to put this on side equals right we want it on the right side there and we want to go fill equals w so that's going to be up and down the y sort of axis or coordinates or whatever you want to call that so okay now let's actually create our tree view i'm going to go my underscore tree and this is going to be a ttk dot tree view and then where do we want to put this we want to put it in tree underscore frame that frame we just created right and we want to give this a y scroll command of tree underscore scroll dot set and we'll play with that in just a second we also want to give this a select mode of extended okay so that looks good so then we can my underscore tree dot pack this guy and we don't want to give this any padding because we just want it to be right in the frame and the frame itself already has some padding push it down screen a little bit so we're good to go there okay so now we need to configure the scroll bar so let's go tree underscore scroll dot config and we want to give this a command of my underscore tree dot y view okay so now we want to define our columns and let me pull this back over here real quick we want first name last name id address city state zip code again put anything in there that you want but we're sort of making this a crm customer resource management app so pretend we're keeping track of customers what do we want to keep track of uh their first name their last name their address maybe you would probably put an email address in there if that email whatever this is getting a little cluttered as it is we'll just keep it like this so we need to define these columns so our tree view is called my underscore tree so we then set the columns to and this is going to be a tuple and here we just sort of name all these so let's go first name and then last name and then we want id and separating them all by commas and quotation marks right so then what address probably city state and let's go zip code okay pretty simple now we need to format those columns and say hey how do we want to do these and remember the tree view has a weird first column that's we hide off the side and that's the zeroth column it's just a weird trivia thing if you remember from our tree videos if not go back and watch those but we set these my underscore tree dot columns and then we just define them and remember this is that first weird one it's hashtag zero and we wanna set the width of this one to zero and we want to say stretch equals no all capitals no and then so now we could go my underscore tree dot column oh i misspoke column it's column not columns there we go and let me just kind of copy this and we want so first name last name id address city state zip code right so that sounds about right and here we just want to go first name and we want to give this an anchor of west and a width of i think 140 and that west anchor you notice up here our first name is right up against that side there that's anchored west west right this one we're going to anchor center right center center center center but for this first one i want to anchor it left and probably for this one too just because i don't know just to show you different ways to do it right so first name anchor west with 140 and actually let me just copy this too and paste it in here and actually let's just do it like this try and speed this up a little bit boom boom boom boom boom so we've got first name we've got last name we've got id we've got address we've got city it's not how you spell city at all city state and zip code now for id we probably don't want 140 let's just go 100 because it's just a number right and instead of west let's anchor this center and so first name last name west i think let's go center for the rest of these too so let's just boom knock this out this and like this there we go and 140 140 i think that's fine okay so now we've got our columns defined now let's define the headings so you see these sort of gray boxes up here we need to define those so let's do that here we formatted the columns we create our headings and very similar but instead of my underscore tree dot column i misspelled column again look at that it's heading and let's see there we go and it's uh it's early okay so column is spelled right there okay so my tree dot headings and again we have to do that weird first one which is hashtag zero which is just kind of weird want the text to be nothing because there's nothing there and let's give this an anchor of w and actually let's just copy this so first name last name id address city state zip code and we could just come through here and go first name and then last name here we want id address city state and zip code we are flying right through here and for the text for each of these we want the same thing here so we can just sort of copy this this just type in that one copy paste copy paste copy paste and copy and paste and again all of these anchors we probably want to change from w to center we'll keep the w for the first two like i said so what's the main difference between these well and these well these columns that's the stuff that's actually in the columns right and the headers are the ones on top so they're very similar but you know obviously different so okay we've got our headings so now let's add some fake data and i'm just going to copy and paste this because we're not actually going to use this data like i said we're going to paste this and we're going to actually connect to a database but for now just to make sure this all looks right i'm going to throw some fake data in that we'll use just to make sure everything looks right and we'll delete all this later once we connect the database so okay now let's create our striped rows so let's go my underscore tree dot tag underscore configure and here we want the odd rows so even and odd rows every other row we want the background for the odd ones so let's go back around and we'll set that equal to white and let me just copy this and instead of odd row now we want even row we want the background for that to be let's go light blue and again use any colors that you want okay so now let's add our data to the screen left off one so let's go global and we're going to get rid of all this later when we connect to the database but for now we'll just rough this in so i'll set account let's set that equal to zero and then let's go for a record in data and that's just what we called our data up here right so we want to loop through here and for each thing if let's go if count modulus 2 equals zero so this will get even rows so if the count is even we want to do a certain color otherwise we want to do the other color so in fact we can just go else now so what do we want to do we want to go my underscore tree dot insert and we want to insert parent equals nothing we want the index to equal end because we want to put each new one at the bottom below the previous one we want to put it at the end right and we want to go i i id equals count which is this guy up here that we just created we want the text to equal nothing and we want the values this is where it gets interesting to equal a tuple and here we just want to go a record and then let me just copy and paste so we want first name last name id address city state zip code i think right that's not about right and then for each of these records we just give it an index number so zero one two three four five and six right and then finally we wanna give this a tag so tags equal and this is also a tuple and we wanna go even row and then we have to put a comma and nothing because tuples even when they only have one thing they still need a comma and then it's just a weird tuple thing so okay so this will set even rows and we know it's even because we use this modulus here so modulus returns a remainder so if we took the number the count divided by 2 and there was no remainder so like 10 divided by 2 is 5 with nothing left over if there's no remainder that means it's even and we can do that just using modulus basic python so here we can just grab this whole thing and paste it in again but instead of even row this is going to be odd row okay now the last thing we need to do for this is to increase our count so let's go increment counter and that's just going to be count plus equals one every time this loops through here we'll add one to the counter and then it'll spit out all this data onto the screen so let's go ahead and save this and run it just to see if this is looking okay so let's go python treebase.pi get it treeview with a database treebase all right and so okay it looks good we got our treeview thing here we've got our nice scrollbar we've got striped rose with light blue and white i like that we click on something we get this dark blue all right looking good how are we doing on time wow that took a long time but let's try and knock out these two bottom things if we close this and pull back the regular one here we want two record we want two label frames down here and we want some stuff in here and for now we'll just rough this out these won't actually do anything just yet but we can at least put these on the screen so let's do that real quick i think we do that in a few minutes so let's come down here and add record entry boxes and i want to create something called a data underscore frame and that's going to be a label frame and we want to put that in root we want the text to equal records or record maybe so that's going to be that record box so we can go data underscore frame dot pack and we want to give this a fill equals x to pull it all the way across the whole app and we want to expand it so let's go expand equals um yes and let's also give us a pad x of 20 to sort of push it aside from the end of the app okay that looks good now let's just add a bunch of stuff so we want first name label and that's going to be a label we want to put it in that data frame that we just created we want the text to equal first name and then let's go fname underscore label and let's not grid this we can grid this because it's inside this frame even though the rest of our app we've been packing things inside this frame as long as all we do is grid we can grid inside of a frame so let's do that and let's go row equals zero let's go column equals zero and let's give this a pad x of like 10 and a pad y of 10 also to kind of push it apart from all the other things and then let's also create an fn underscore entry box and this is going to be an entry box we want to put it in data frame and then let's go fn first name dot entry dot grid and we can just copy this but instead of column zero we want column one so let me just copy and paste a bunch of these so we don't have to keep doing this so first name last name id address city state zip code so just come through here and instead of first name let's do last name last name last name last name this is going to be id so id id id id this one's going to be address so let me just copy this boom boom boom bear with me address this one's going to be what city boom boom boom almost done this one's going to be state goes by pretty quick and then finally we want zip code zip code boom boom boom okay so we've got our first name in row one row zero column zero one this one is going to be then two three and four and five so we want we want the first name last name and id on top below here we want address city state and zip code so let's change the row on these to one one one one one one one and one one and then so column zero one now this will be two three four five and six and seven is there seven you mess up zero one two three four five six seven okay that's right so let's go ahead and save this and run it make sure that looks okay and it does it's pushed down a little bit when we add the next thing it'll push it up a little so okay that's looking good stretches to the size of this thing because we filled and expanded it okay so we've got a record now let's pull up the other one and we also want commands with a bunch of buttons so we can knock that out very quickly let's add our buttons and let's create a button underscore frame and this is going to be a label frame we want to put it in root we want the text to equal commands or buttons or whatever you like and let's go button underscore frame.pack and also we want to give this a fill of x and we want to expand it so expand equals yes and let's also give this a pad x of 20. okay now let's just add a bunch of buttons so we want one two three four five six seven eight buttons so i'm just gonna go underscore button and we'll name these different things and this is gonna be a button we wanna put it in our button frame we want the text to equal something no command for now and let's go underscore button and let's also grid these so here let's go row equals zero column equals zero and let's also give these a pad x of 10 and a and a pad y of 10. okay so when i say we needed eight of those so there's one two three four five six seven eight and let's pull this guy over again so we can see we want an update button and an add a record button so let's go update update let's go add add remove all so remove underscore all and then remove underscore one and then remove underscore many i don't know we'll probably play with these as we go forward but right now i just want to give them up get them onto the screen this one's move underscore up move up this one's move underscore down move down and finally a select underscore record not sure we really need this button but whatever and then let's come through here and let's just rough in some text what do we want these to say update record add record blah blah blah so update record add record this one is remove all remove all records this one is remove selected or remove one selected this one is remove many selected and then move up move down and select record okay so let's go ahead and save this run it see how this looks oh man they are all scrunched together that is not good all right we got set i forgot to set the column so let's come up here to the top so the first one is going to be zero and then one and then two three four five six and seven okay so let's go ahead and save this get rid of that run this guy again all right so we are looking good we've got our nice layout all done we got the tree view with some dummy data in it that we're going to get rid of once we connect this thing to the database but it looks good now none of these actually work when we click on this it doesn't fill out these fields this video is getting way too long so we're gonna have to stop it right here we'll pick this all up in the next video but uh so far so good we're looking pretty good here and after this we'll just sort of connect this to the database and make all these buttons work and that'll be that so that's all for this video if you like to be sure to smash the like button below subscribe to the channel give me a thumbs up for the youtube algorithm and check out codeme.com where you can use coupon code youtube1 to get 30 memberships they pay just 49 to access all my courses over 47 courses hundreds of videos and the pds of all my best-selling coding books join over a hundred thousand students learning to code just like you my name is john elder from coding.com and i'll see you in the next video

Channel: Codemy.com

Views: 15,646

Keywords: tkinter crm app, tkinter treeview, tkinter treeview database, tkinter treeview sqlite, tkinter treeview mysql, tkinter connect treeview to database, tkinter crm tool, tkinter crm tool with treeview, tkinter crm treeview, tkinter crm treeview database, tkinter crm treeview sqlite3, tkinter treeview sqlite3, codemy.com, john elder, john elder tkinter, tkinter tutorial #172, codemy tkinter, tkinter john elder, tkinter.com, tkinter treeview insert, tkinter treeview color

Id: G9seoA3Mv4Y

Length: 25min 37sec (1537 seconds)

Published: Tue Mar 23 2021