Create, Read, Update, Delete, Search, Paginate Income Records. Django Project Tutorial [21]

welcome back everyone it's chris in the last couple of videos we were able to set up the crowd for the expenses so a user is able to log in come in here create expenses they can edit and delete them so we've we've already added the pagination to the expense lists we've added the ajax search so pretty much everything that we we wanted to know about our crowd so in this one i want us to start working on the income crowd so it's going to be a lot similar to this so we are actually going to be raising most of the stuff we've already learned just so we could put up the crowd faster for the we could put up the crowd for the income faster so if this is the first video you're finding i recommend you check out the prayers that this video is in i cover most of the crab stuff more in detail in the previous one so in this one i'm going to be going a bit faster on them just because we've covered them before but if you're new i will also try as as much to explain everything that i've been doing so let's just get started so first thing we are going to need to set up a link from here so that you can go to the page and create income records and have everything there so to start i'm going to need to first create an app to manage that basically so let me actually zoom this one in a bit okay so python manage the py startup so i'm going to pull this up user income okay so but you can call it anything you can call it income but i'm just going to call it user income so once you have your name then you can create the app so this now basically creates a folder with all the abstraction so basically i start out in the models dot py like i said we are going to be like going very fast because we've looked at this so i'm going to come in here in the model.py for our expenses up you know bring in everything then we will update them accordingly so in the modules of py i'm going to replace this so we are going to need the models of course to define our model here so we are going to need the user because we want to link the user to an income but first let's change our model name so this is going to be income okay i'm actually going to quality user income but you can call it anything it doesn't matter as long as the varied class name by the python way the amount is gonna be a fraud field although we could make it a decimal field which is actually more recommended because with decimals you can get like much functionality with them than fruitful but we will keep fruitfuls for now but decimal fields would as well be a great fit for this so the date we will have it the description yes the owner yes so what will change will be the categories so the income actually will not have a category but we'll have a source so a source of income so that will be like where someone recording an expense will have gotten that money from so that will be the source we'll create some predefined sources so about the category this is going to be the source so we will create like this table that will go in and prefill with some income sources so about the plural name so when it comes to source it doesn't like have issues with naming for example category we're not so categories will be will be postfixed with this so which is wrong but when it comes to like source as long as an s is added it's going to be correct so we don't need the meta so we need this the string representation once we have this now we can run our migrations but before we do that we need to register this app in our main app settings file so in settings.py scroll down to where you have the installed apps then add our new app which is user income okay so once you have it there now we are ready to run the migrations such that our tables can be updated so this is going to be make migrations and this creates the two the two migrations so we need to migrate them such that the tables actually get applied so migrate and yeah so that updates everything you can see here so once we have that now we need to start working out on our view okay so the first thing i'm going to start by doing is create a view to show the that the list of of income records so in our in our templates right here i'm going to create a new file in a folder it's going to be called income so the folder is going to be called index dot html okay so right here basically we are going to start out by getting how our index.html and in the expenses looks like because they're going to look almost similar okay so let's edit it accordingly so you see we inhaled our base html that's because we want to get access to our other parts of our page so this is going to import in everything like css the header everything so in the main content see without static so if we want to like use javascript on this page we can do that css and images we can do that so this is a tag that will load to enable us to do that now in the block content this is where we are going to put our markup our main markup so this i will change to income then this will be my income call so this view will change to add income okay so this will be the button to click they use for user to click and then they can go to a page where they can add a new income record okay so right here we are bringing our fresh messaging just so we can get the lats when we like submit a new record so this here we check before we show the table so here we check that a user has some some records so this is going to change to income so income.count when this returns when this returns true basically it would mean that the count was greater than zero so that would mean this query set will pass down we'll have this question to pass down will have more than zero values okay so down here this will be our search input it's going to be the same so here the only thing that's going to change in our table headers is going to be we are going to now have the source instead of the category so if you scroll down this will be the source but we of course we want to change this object name so right here i'm going to comment out everything for now then we'll come back and edit them later so from where the table is actually from where the okay so from where the table is i'm going to comment out everything even the table results so i'm going to comment out up to here okay so let's look on top here okay so i believe that's going to do it for now so right here right here we need to change this file so i'm going to change this to be search income dot js then we need to create it of course so let's just do that now so set income dots js this will be the file that handles the user search so i'm going to bring it in here to js then we'll get back to it later okay so i'm pretty not certain about our our comment here so let me let me actually make sure it's it's the correct thing okay so vs code actually can allow us to minimize them just so we can look at them better okay so everything is in here then the first this is the main row so we need to look at this okay so we are working in this one so let's expand it okay so this is what we need to basically comment out everything here and that goes all the way to let's see let me check it again okay so everything here interesting is good okay so that does the job so now everything is commented out meaning we are only supposed to have the the breadcrumb and then the button to add a new one okay so let's now work on our views just so we don't get errors trying to refresh this view name so in our app if we go to views.py right here so in so right here we are going to now start out with what we already have in the expenses app so let's go to the expenses up and get the views so right here i'm actually going to bring in the index and the ad for now so let me bring those two in copy this then let's bring them into our app so views.py let's bring them in here and then let's edit them a bit okay so this will reference the sources so let me just call it source because this is the model name so let's import that model name just from dot modules import source of course will be very will be used much time then the second thing will be user income okay so let's import that one into then this will repress everything where we have the expense just import the paginator so from django dot co create coordinator import departunator just so you can have our pagination okay so this one for the currency yeah we are going to need it so let's bring in the user preference so that that now gets imported from user preferences go to modules import user preference okay good so right here i'm going to actually remove this this absolute input let's keep it relative so once we have that now we see we are going to be sending down it's going to be called income then the page object this is used for pagination then of course the currency is very much needed so right here we are going to be going to the income index.html the template we just created you should press this income to be this okay so it's going to be the same thing here so about the ad expense this is now this is now going to be sources so we can as well change that then this will be the source of the of the income when it's a get request we want to send a page called income then add income.html so let's update that then about the post request basically what you want to do is check for the amount yes we want to show an error when the when the amount is not provided so let's import the messages so from jungle contrib import messages once we have that we check for the category so the cut this now will change to source okay so about the description we are going to keep the same so it's it's now changed everywhere we have expenses so then now this will be source and this will be source of course the one we get from the requested post from the form okay so let's change this to be user income create user income create everything then we want to say income created successfully then we redirect our main income view so it's important that redirect from shortcuts okay so once we have that let's change this actually let me just look out for everywhere we have expense and change that to income okay so let's reiterate through this view so basically what we do here we create this function views then we protect it from unauthenticated users using this decorator and then for it you see it takes in their login url so this is the route to where they can login back and the reason why we provide it is because when i use the logs like gets redirect tries to access this and gets redirected to the login screen we have the next parameters so when they log in again they don't directly go to the app index page they go to the previous route they tried to access when they were not authenticated so this is something cool that's built in that we set up the context so this is data that's going to be used in our templates so one of them is going to be the sources basically this will be useful when we are showing a selected list for you to select the sources of income the values here this we use to prove to prefer the the information in the form when like a user gets an error and we want to render the form okay so these are our basic validations i want to name this so when there is no amount we render the same page give them an error so when everything is fine we create the new instance and then tell them that it was saved good so let me change this one to record then we will direct the home page so let's create the add underscore html file add income html file so when you come to our template right here i'm going to create a new file which i need to rename it just add some extra character just get it in shape okay so this is going to look a lot similar to this so i'm going to copy everything we have in the ad experience so right here now we can update it accordingly this is going to be going to basically guys is the breadcrumb this link will now go to income and this will be income so this will change to add income and now the form will submit to the same view so the view is add income and not add expense so we bring in our s csrf token to protect against cross-site request folder the amount yes the values to prefer when we are rendering the page good the description is the category we are changing the category to sources so we'll be ripping through the sources that will predefine so this will be source in sources okay so this now will be source and it should be the same name in this parenthetic so this will be source2 so and this one will be source so from the category so this also should be so so let's update it so this now changes to date of income and then this will be income underscore date okay good so we are moving so if we go to our urls basically we need to set up our urls so if we look at the urls in the expenses so basically here we are rendering the main view main url the index reading so this is the one to create the one to edit the one to delete the one to search so i'm going to take everything just so you can save some time then we need to create actually a file for the url so here is a py and we bring them in so it's going to be a lot similar so this is going to now point to income and everything where we have expense will be income okay so let me get that and repress this we press this this really expense anywhere else okay so this should be edit income okay so looking good so now that we only have the index and then the ad i'm going to comment out these ones just so they don't shout at us so let's now register it in the main application urls and then we can see how to test it out so in the main application your result py i will replicate this then this will be income and this will be user income tutorial so basically what this would be now would be the prefix for all these are the children roads so basically it's going to be slash income slash their view route here so this is pointing out to all the views defined in the other url buttons cool so let's now go to our so basically now we need to set up the link from here just so it can go to the page where we can see the income okay so let's go there so if we move to our template you notice that we have the sidebar html so this is where we need to add that link okay so this is thinking to experiences so now we need to set up the one to link to our income views so right here let's bring in the url utility so this goes to income good so let's rerun the server okay so we have an issue so we need to check some inputs let's see let's see okay so we have another issue this is in uh the login required we also need to import it so this is going to come in from django contrib both decorators login regard okay so now the server is up let's check it out so the app is running when i click on income you can set we are taken on a page where we should be seeing the list so we also have a link to create so when i click it you can see that the form to add income is showing and it's showing correctly so let's try to add the income since we worked on the post okay so right now we have an issue that our select isn't updating with resources so i'm just going to go to the admin and then add some sources okay so when we come to the admin first thing you notice is our our income model is not registered here so let's do that so in the app admin dot py we need to import our model so from dot models let's import our two models one would be user income then another one will be source okay so we need to register this to the admin site so we can do that by doing admin dot site the transistor and then we can give it one by one so user income this is going to be source okay so once we have that you can check again now you can see that the two are now are registered and we can view them so this is actually not correct so we are going to also define a plural name for user incomes because it should still be income i believe so but let's continue so now in the sources we can now add a source so this one is going to be like maybe server because okay so array let's have that let's add another one for business i'm not sure if you'll be doing a business and then you're paying yourself sorry i don't know how that would feel okay so right here let's also add maybe side hustles side hustles okay so let's save it so now that we've added some these three if we go back to our income creation page so income add income you can see that our sources are updated so let's try again i'm going to put 100k description let me pick the date here save it then you can see that we are redirected here so now let's let's now like uncomment or code in the html to show the table okay so in the index which is right here let's now come over here and then uncomment this code okay so let's see if there is an easier okay so we're going to need to remove the comments then remove them down okay so let's first edit out the things that we are not going to need so for example yeah we check for the account which is good we are bringing in the messages so last time you saw the message didn't show like for create successful but now this will be able to show it so if we move down we need to change expense to represent income because this is another this is something else so let's change this to be income okay so this will go to income edit which we need to create the view okay this is the sad stuff this will change to to source okay so down basically i will keep everything about the pagination it's gonna be all the same okay so now i think we can test it out so save it oh we need to change this one to source okay should not forget that okay so service come around and reload and then we it's complaining about the view for edit that we have not stated set up yet so let's do that so in our income let's add another another html page this one is going to be called edit underscore income dot html these are going to do all our edits so in the expenses dot py you can see that the edit expands with html so we're going to copy all of it bring it down to edit income let's go over it one more time so we bring in our template our main template that wraps like all our design which is here so you so in the main content block this is where we are now setting up our custom edit form so right here i'm going to change this to go to income when a user clicks there on that breadcrumb then this should change to this will change to add income remove the spaces good they delete we need it but it's going to go to to income delete okay so you might have noticed that we are using the income dot id so this is something that we send through the view like i'll show you since this is like a detailed view you bring in the messages then the token because we have a form to submit so the form is going to submit to the exact view that will be rendering this which will be edited which will be income edit bring that one in this will be the income that will pass in through the view so we keep everything here so this will change from category to source so let's repress category to source okay so i think so this should be sources this should now be date of income so let's replace it and the name should be income underscore date okay looking good so about the value you can see that we are able to display it to prevail it in the in the form in the edit form and the way we do that basically is using this date filter that enables us to specify the format that the html will understand okay so good then the button will say save which is good okay so now let's go ahead and work on the fuse okay so in the views dot py for expenses which is here so we have the expense edit and then the expense delete so i'm going to get the two because we are going to be using almost a similar thing and if there's something that you really don't get here just post it in the comment section below i will i'll come around and answer it for you you can as well check out the previous videos because i explained these things in depth when the views dot py down down down i'm going to now bring these ones in so let's go over them in a bit okay so the expense edit now will be income edit because now we are editing income okay so let me rename it to [Music] income edit so the view basically takes in an id so this id will be the this id basically will be the the primary key of the income record that will fetch the record by so right here we can now create an income instance and then we are going to query the user income table for this for this instance once we get it now we can use it in our view like i showed you okay so this will change to sources and then we are going to be querying the sources relation or table okay so this now will change to income then this will be income the values we basically will pass the previous income instance so in the form we can use that so the categories will change sources of course so if it's a get request then we want to render the template so the the template is going to be called edit underscore income i believe that's how i called it so i'm gonna select all the occurrences and then i will update them accordingly so it's gonna be edit income.html if not i will have to go back and rename it but let me check templates income add underscore okay so let me update this okay so this is going to be going to income slash add underscore income.html when it's a get request basically we show them the view and then we set we send our dynamic data just so we can prefer that information so if it's a push request we check the amount if it's not there we show a message and we render the page so check them the description so we so this gets the description so here we need to check by by another field okay so the field name for for editing the date it's going to be called income underscore date so let's change that and then here this is going to be the source so source has a name of source so you can get it like that okay so if there's no description we basically show them the error then if everything is good we now update actually we don't need to even update the owner because we are the owners so we update the amount we update the date we update the source so it should be sourced the description good then we save it and then we tell them income i'm gonna call it record so it's gonna be record saved updated successfully good and then we should redirect to our income list view good so about the delete this is going to be delete income and then you see text in the request and the id so we get the income from user income then now we can do this should now be income so this so now we get it from the db then we delete it so once we do that then we tell them that maybe the record was removed okay let's do that then we return to the main list view okay so now we can uncomment our our urls so if you go to our urls.py right here you can see that there they are ones we were commenting out so the edit one we now have it the edit is we have it but we don't have for the site so i'll keep it away for now okay so once we have that list to see what we have so if you come back to the site and then click income you can see that now we are basically showing our record okay and if we come back here and then try to add another one i'm actually going to use this just so it's quick here let's choose a date click submit you can see that it's saved it's updated here but then we have an issue so this form so this table that should be showing only when we are searching is actually showing by default so we need to now work on our js to make sure that it's not showing by default okay so if we go to our to our static files so that that will be that will be that will be in here so static yes you can see that we created the file that we link to so we are going to now reuse everything we we had in our you know our search expenses js so bring it bring it in in such income and then what it's gonna do is it's going to get the table output and then it's going to remove it remove it from the dome when the page is rendered okay so i just that should do it for us so if i come here and reload let me just add reload sometimes it takes a hard refresh you will see that now the the downer part is gone so now we brought in the search so we brought in the search here so we need to also work on that but this first place now so when we come over here you can see that we show the list let's look at the edit so we click when we click on edit if you look in my left bottom corner you can see that we are going to income edit and then i believe we have an issue it should be like slash one or something so but when we click there you can see that we go there but i want to prefix this with a slash okay so to do that let's first examine our view our urls and then we see how we are we are linking to that so in the in the in the app let's look at the url py so when it comes to edit this one you can see that we don't have a slash here so let's add it okay so let's come back here reload click on edit and then now you can see that it goes there correctly so everything is pre-filled so we can change the date let's say we change this date to to be like today which is ninth then the money to be like start with the for phone when you try to save you can set it saved and then it's updated here even this is not updated good so the update is working the imagination is is working so it's not showing the the links because we have not hit them the items per page number but once we add more it's gonna it's going to show and it's gonna work okay so now that we have that let's work on our search so now when we come in here and try to search it's actually not working it's searching another endpoint so to fix this we are now going to come and add the search the search so we're going to now add our search view so to get the search view let's look at what we already have in the expenses app so right here where is it where is it expenses use dot py so the first one so i'm going to bring in the search expenses and then we will turn it into a such we will modify it to fit our search for the income so first thing i'm going to rename this to search income so basically we look out for a post request from the user and then we see like in the adjacent that they send we basically convert it to a python dictionary using the json json utility so import json here okay so this gives us the string they are searching by because you see when you get the dictionary by turning it to by using loads we now do a gate to get like the value they sent so once we get that now we filter out the user income model so right here we basically will search by the the amount the date the description and then when it comes to the the source we do that too so we switch it for category so i'm going to now repress the the expenses everywhere with our user expense model because things have changed okay so just a reminder we query by two properties just to make sure that a user who is who is getting these results is actually the one that created them so the current object user the magic happens in the eye contains the crystal so this basically can do a very good full text search and then the i basically means that it's going to be case insensitive so once we get the values you see we use the income values and then we set them to data so now let's render them over as json using the json response class so let's import this from http so django http import jsonresponse okay so now the endpoint is actually set so in the view let's make sure it's going to this the correct place so it's going to search income which is good okay so now that we are done with that we need to update our javascript search file which is in static js then search income okay so we need to update the endpoint so right now if you come over here and you go to like edit you can see that our urls are prefixed with income then the the name okay the income that's the url space and then the name that we set up the url we set up for the for the view basically so this now we'll have to prefix it with the the namespace and then the name so this is now going to be such income okay so once we have that we can now come and test it out let's go to income and let's try to search let's put like a four you can set it's i've actually put it to you can see that it's now matching some results and that's because if you see clear it's matching by the dates which will always match but when i search for something like like description you can set it matches one if i search for the money value you can see that it matches so looking good so so at this point i want us to fix this issue so right here when we type like four you can see that the source is undefined and that's because we haven't actually updated the properties we look at so the property this will change from category to source so i'm going to update that so if i come back and reload then you can see that the source is now updated correctly we can edit let's test out the delete when you delete it it goes away okay so looking good so for now we are done with the crowd at least for now so in the next ones i'm going to be showing you guys how to graph this data like against each other like graph the the income again is the expenditure look at how we can visualize data using chat js and django so i'll be excited to see you then if this video helps you please consider subscribing the channel give it a thumbs up don't forget to leave a comment if you have any questions i'll see you guys in the next video bye

Channel: Cryce Truly

Views: 2,051

Keywords:

Id: uEW-QVoDNMs

Length: 39min 24sec (2364 seconds)

Published: Sun Jun 07 2020