CREATE, READ, UPDATE AND DELETE EXPENSES. Django Project Tutorial [17]

Gregor's welcome back so in this video I'm going to be showing you how to build this crud feature so you're going to be able to create experiences that won't be able to view them in a table we're going to be able to edit them so you can find preferred values and update them and then we are going to be able to delete them so we can remove them from our list so it's going to be interesting let's go ahead and get started so first thing we are going to need to do is create this breadcrumb here so this breadcrumb I'm just going to use like a wrapper to start with so I'm going to start with this now on the bootstrap website so now come back to the app you we have already created that experiences up so I'm going to go to the experiences as I'm going to go to the templates by those guys if you're new please check out the previous videos because this is building on top of those so I'm going to go to add expenses that expenses view right here I'm going to put the bread crank so this of course will be leaking linking to the expenses page and then this is going to be add expenses add expenses once we have this then this is going to link to expenses so let's have a leveling setup so it's going to link to a list of expenses which will have Vone view named expenses and then of course this will be the current one so we don't need to link to anything so now I'm going to copy this and also have it in the index.html so right here I'm going to replace everything here okay so I'm going to name this as expensive and what to keep the second one and call it my expenses okay but we don't need to link anywhere so I will just keep it empty for now okay good so once we have this we need set up our view and then hook up the routing so going back to the views that py so in the expenses wrap use the py you notice that this goes to the index and then they add goes to the ad so this is good so let's go to our sidebar so you can add those links to the sidebar okay so right here in the sidebar pushes side by HTML the way we have expenses we are going to change the nature if two points to our views so URL then we are going to expenses okay so the let me just close check on the the names have given here so if we look at our ad expense it's going to expenses and then if we look at the URL is at py yeah so it's called expenses good okay so going back to the app new dog in here so you can see that when we log in we get these expenses and in my expenses so I need to add a button like add expense and I want to add it here so that we are all on the same line with its breadcrumbs so for me to do that I'm going to use I'm going to go to the template to the template this one and then I'm going to use the grid system to actually spit it out into 10 two columns so this one will be cool MD actually I'm a big name you know put the navigation there the breadcrumb then this one will be 2000 call MD 2 and this is going to is going to be a link to the ad is to add expense page so a so a chef actually chef will be add expense so if you going to the URL add - expense so guys this is the view name which has to be unique so if you get the URLs you'll see that the view name is add expenses okay so it's remember to correct that and then I'm going to give it some classes so it looks like a pattern so classes with BTN BTN primary but primary ok so then it's going to say and expense okay so once we have that we need to wrap everything in a row remember to do that so I'm also going to move this one down just so the messages come below so you can even move it here so all this is going to be wrapped in a in a row so wrong and everything will be in there so we have one taken off nine columns and one taking off - that makes it 11 so let's make this one take three so that it makes it 12 okay so coming back up if we reload you can see that we have add new here and it's quite living space on the top so let me come to the container I'll give it an empty pop it is to cut it again then you can see that it's yeah but I want it in this one a bit so I'm going to make this one 10 then this one - okay so now when we click here you consider to go to add expense good so now let's go set up the phone to create an expense so in the attic space HTML we are going to use like the same same kind of view so I'm going to copy this actually we can just type it out so in the head expense HTML we already have the breadcrumbs so I'm going to put a container underneath container and I'm going to give it an empty floor - this is maddening to do that basically bootstrap helper classes that can help you to fix those common issues so let's have this one in there and then now we set up the forms of the phone so phone actually not gonna phone or phone it's going to make a post request so it's going to make a post request to send view so it's going to be going to share expenses okay so once that's there then we need in the phone first thing we are going to need to actually step out from the model and define the model then the phone will reflect the murder so in the in the views so in the models expensive models @py this first describe our data and have you to look in the database sorry champ this is epic class we're going to call it expense of course we import from models data model just so you can get access to all our database functions and like definitions so right now I'm going to inherit the model that model then of course you're going to have some properties one of them is going to be the amount of course how much is spent to amount some art is going to be Moto's datatype I'm going to use the floats good okay so what we'll do then we need to define the day to spend this money so gates will basically equal to the dates will be models what date field and then I'm going to set the default so default because so I'm going to use this function code now so the forth is going is is going to equal to now so I'm going to put now from our two so from Django though it's you choose the time zone input now okay so basically what this does is by default if we don't supply a date it's going to use the in current date and of course if this was a dead time field is going to be using the parent date and time and so good so moving on the next thing we are going to have with the description so you'll again provide an optional description so this is going to be mothers text field okay so the next thing will be what we need to keep track of the user who is recording this experience this is going to be more those touch so yeah I'm going to be pouring a food so foreign key fields what is that foreign key so 2 will be the user 2 equals user we need to input the leaves are edible and then we need to define on delete so when we did the user want to eat for expenses so what does the Cascade so this do it's the rig they use as expenses once the user is no longer in our database so in putting the user so from Django contribute mother's import user okay so another thing are going to have its category so we are going to have different categories of expenses so if we're spending going like travel we want to keep track of it like food like housing insurance you want to keep / keep track of all this stuff so this is going to be mothers but I'm going to use the Excel field then I want to show you how to havoc custom model for category so we can we can like present the user with predefined categories so here I want you to find a max length 255 256 who cares okay so now those are the attributes if we get another one with Costigan er is updated so then let's define it to string so that it's described can easily describe an instance so I'm going to use the amount so Mart is unfruitful but we want something that's not string and this we want to transform it explicitly I'm going to use the category yeah so before we leave this place I won't show you how you can add like more customization to your model one of them will be if you want to change the sort order you can add a meta so you define class meta and then right here you can define something called ordering so yeah in ordering you define it like a property want order bar so want with a by date but of course we want to order by date then in descending order so you put a - then the attribute okay so that means that's going to require for the expenses we are going to get the latest expenses on top by date sorted by date bit okay so let's define our category okay so now when it comes to categories I'm going to do class category Oh sister shuttle captain category when we inherit from models what model and then you are going to have only one properties which would be name you can think of it as attribute so named because mother's childhood okay good so need to obey the max length so you'll be to do the fire okay so once we have this so VC max length not month link okay I try it's correct okay so this brings me to a point where we I'm going to show you something about the the models the admin interface so when you go to still have a file called admin admin dot py so Java allows you to register these models in in an app in the admin dot to Wi-Fi and that ways can give you like administrative access to this model so you can go in the change data at data and all these other cool stuff so right here we want to also add expenses to the backend such that we can easily go there and add categories so that our users can get those prefilled categories all right Jane admin dot py we define so we are going to import custom models so from Tata Motors import one is going to the expense is going to be category okay so under areas category was named inside I'm going to bring it outside so you can easily import it so once you have that they need to register it which you can do by doing admin good site with register then the models one is going to be explains then I'm going to copy paste this now we will just add a category okay good so once we have this how much we have to create a super user and then we login and create some categories so right here I'm going to do Python I need it be way create super user then he called cries middle price up calm that's why we'll be polite see common password it's okay they ain't crazy super user so now if you go back to the application we just bring it up bring up this one close this or the port is in use okay so I'm going to run it on another put so let me run home for the 200 okay so now when we go to the application you can see that we are already logged in but when I go to the admin when I prefix with admin you can see that we are brought to this admin section so right here we can come in here and then let's see after this initial so we set up the model but we didn't run the migration so this random I creations that's why you see we have the errors to python manager 3 why make migrations that it's create stream then we need to run them it's like a daily freaked so migrate okay so run okay come back over here then now we can add categories so I'm going to add let's say one of our expenses is this trouble okay so you can add travel then let's also add is also add maybe food would categorize it like restaurants okay so save it and we have quite problems one of them is it's showing us a category object instead of something more descriptive and that's because we didn't set up the two string method so right here we need set up a two string method binding give okay so right here we are just going to return the name so sir good name then of course I need to say to spell saved correctly okay so now if we come back and reload let's create a new one let's say we are spending on insurance save you can see that now it's this is readable this is okay okay so another problem we have is yes we have expenses here but then our categories it's it's prefixing it with an S which is not what we want so categories is that we are not written like this so for us to define another pure version of a model you can come in here and then you define a class meter right here mock you and copy this so right here now we are going to define how it should be called in pure phone how this model should be called in pure form so this one is going to be verbose underscore name underscore rule which we set up separate it like this really okay we will find out if that's correct so we set it to a string so here it's going to be in categories so this is not correct actually so my so it's rated preparing okay good okay so once we have that image that the service is preparing and then come back to the admin section you can see that now it's written properly so problems hope so now let's go back to of view and see how to create some data from the view so coming back to the ad we need to set up a form so from our model we need to be able to take we need people stick the category the owner no category that one I will pick it inside the app the description did then the amount okay so first thing let's pick the amount so we inside the phone we're going to define an input how did people okay so I'm going to add a card here just so it's kind of beta so card then inside the cut body cut body waiting okay that so I am going set up an in an input group a foam group actually so phone group then in here you can set up the phone controls all right here what's a type variable so this is going to be a month then India can set up from control for the month so input going to be input class will be phone control then I want it to be small so I can do from control s name like that so the first one we are going to be picking vacation amount so number can be a good fit at least better than text so we need to give it a name so we can be able to pick the values in the requested post race is going to be amount okay so once we have that then we need to set up just well can do for now so let's replicate is for the description and then the date so this now will be this now will be text of course change those so this is going to be description we change this one to okay so this one will actually be a strict so the category will be a select so define actually skip the label no no issue there so this will be so this will be category and now inhale and fineness select and then the options so don't select I said it we need to give it a name just so you can pick values name is going to be category so anyhow I need setup options so this now can be like one so for now remember we won't be fetching this from the DP so they may have it in this play proper and then which are we able to pull in the dynamic ones so the category the description then the amount okay so I hope that will be all so let's do this is first verify that we have all the properties gated for right here in our model this is good the date is nuts so let's set up a date so input type for date so coming back to our coming back to our template we need set up another one so this is going to be like dead multiple data the expense and input type will be tails then date the name will be experienced under splat date okay so we have a name here we have a name here we need a name we have a name these also need the names and values so this name equals name will be the same name as the category or keep that in the values we are going to add them just anyway okay so have this that so once you have that one set up now we can at least check it out to see how it looks but this add a submit button just so everything can be complete so right here let's see we'll move the form in the card actually okay then I'm going to move it inside in the card body okay so move it one motive inside okay so now we can set up that the submit button so input submit then the value will be said me okay so let's give it some classes looks good - BTN BTN primary am fine okay so let's see how it looks now if you come back to the app I'm going to go straight to the main website so come here click add we have add expense and then our foam is not showing up so let's find out why okay so this is a this is a problem that we have so actually I think we can get some things to learn here so whenever you whenever you explain from a base template the other thing is going to be rendered from YouTube are the things you add in the blog content ok so right now you see we are having an era where the blog content is down that's because we have we now have to move all our markup into the Brooke content ok good so bring them in here and then they should show so if we redo it you can see that we have everything show me okay so just some common issues that we need to fix yeah you notice that's our forms and they aren't looking great so for us to fix that we are going to come over here and then we need to add like phone controls to these inputs so this just make sure you have a firm control one and then the phone control is same okay so let's make sure we have the same [Music] for this then the input type submit the class PT NPT and primary before you have the same one please have your primary one a separate one so now if we check you can see that now it's looking a lot better okay so now we need to fix this so to fix it let's see so I need to give this select a class of one controller okay so once we do that and reload you can see that now it's looking good okay so first thing we are going to need to populate this with our options from our from our back end so that the user can use prefilled categories of expenses so for us to do that we are going to now go to a view and then before we render we need to first go for category so categories will be category which will be the model we used to query by both objects I didn't want to drop them okay so let's come over here and put that model so strong good mother's input category system also import explains what they want in it what we did a lot so now that we have it okay so now that we have it we can pass it so this is the index one but let's pass it to okay so now that we have it I'm going to bring it also in the add expands run view and then also passing so let me create a context object context because I'm going to have categories here and I'm going to set them to the categories from the DB then I pass the context as bits third parameter here okay so once we pass that now we can expect this in our template so if you go back to our template now we need to look through the categories right here and have a four so just have a for a fall so it's gonna be for category category not category this is going to be in categories and of course so it's going to be category in categories then of course tune it in the poll to and fro and then in here now we can render our option so now the auction will be basically as we know the category has an attributes name so now when we read an option you can set the name the name will be category okay and then in here we can put our dynamic name so the name game will come from category name okay so we also gonna need to set a value which you can do from value because category good name okay so once we come back to once you come back to a so once you come back to our page and reload it you can see that in categories we have our categories from the database so whatever we add from the back from the admin it will be reflected here okay good so how do we now submit this form to undo the first thing I'm going to show you is how to like validate some of these inputs and then show like errors and then I'll show you how to save it okay so first thing we are going to now work on validating it to make sure user can't submit without adding an amount or a description but the description is done in the optional but an amount at least shouldn't be optional so right here when we click Submit we need to to first forget that phone but first its first add our cross-site request forgery token so right here so in every phone we have to add it just so it hundred it can protect us from all of those vulnerabilities in the web so have it there then we need to create a beautiful to handle the dis post request so in the view that py which is used at py so right here so right here I'm going to create an if statement - if request good method because you guessed it post then we work from here and this occurs should be made that incorrect it so when it's it's post then we can check for the mount so to check for the amount you can do amount equals request with post and then we passed the clean so this case should map exactly to the name that we give the input so it should map exact you to this okay so once we have that we can check if it's not there then we can give it an error to the user so to check you can do if note amount and that means we don't have the amount user being submitted then you can add a message something like messages but error what's it texting the requests at first we just fix listener period then the second thing is the message so you can say amount is required okay so once we have that required that's correct when you input the messages we import from jungle contrib inputs messages so of course we also need to go back to our same view so we need to render we need to render our view to render view then this very one and then in the view we need to make sure that we have a space where the messages should display so area we set up the other path show this one to basically show our messages if if this is the first video you're watching I recommend you go back and check in the players who won the title to something like fresh messaging now that we have this we need to import it so in each input is right here in our view so I'm going to include it here so now I can do include then we are including partials slash underscore and seduce HTML okay so once we have that and go back to the page to load it's ready to submit its actual redirect so let's see what exactly is happening so let's see how it's a post request and then we are sending to expenses gonna come back to the view oh yeah interesting so it should be it should be we should be submitting to add expenses and not expenses which is yeah good okay so let's correct that one so now if we reload here go back via try to submit you can see that we keep on the same view and our message is not being displayed so let's try to see what exactly is happening here we need to check if this is being called so at the PTP okay so now if we submit I said it's not reaching here so I'm going to wrap everything in here in an if statement okay I'm sure this is actually straight for a lot cause okay so I'm going to check for post then I'm also gonna check for get so if so if request those method it was gate which will be the default one and then we want to have this image of this one over okay so now it's fine so if we're alert here try to submit so we see did not return every response returned nanny-state just because when it comes to post okay so let's let's see what we have in amount to put a PD bit area then reload it try to submit it's actually coming through so if request is skate then category then return this fine if it's post okay so the issue is we are actually nesting this if statement you guys probably know this that's one area so I'm going to bring it stop it back a bit and then we heard meaning now we save you can see that now the PDB catches it if we run if we display amount you can see that it's empty we click see to continue running the program can see we have an issue with context so the context we have to move it over outside any of these methods so we have to move it above and then make sure it's accessible in order the if blocks in the categories also have to put outside or you can actually keep them inside but then that means you might duplicate data in one way or the other if you ever need to use it in another if statement so if you come back you can see that now we have amount is required okay so if we submit the amount and then we wrote this would mean that of course you're going to get an error if you submit it lightly okay so let's do the validations for like for after I think that's the one we are going to do to enforce but then the issue that we have now is you notice that when we submit we lose the previous value okay so to persist the previous values we are going to need to save those values in a taking a variable I'm going to have a variable called values and in the context and then I'm going to set it to request dot post okay so now should work the templates we are we are going to have access to previous previous requests post various so if you go to the template which is an experience which is here sorry TIA like one amount we can pass a value value we can set it to a dynamic value which would be very good in the name of this which will be amount and post it should match the casing so amount okay so now if we reload and then try to save you can see that it's lost so if we add take 4000 okay we try to save let's see now PDB still running I'm going to have to remove it okay so let's do a check for for the description just to get the hang of the validation so right yeah I'm going to do the same thing for the description but then I need to tap this one over okay so description okay so if not description and once a description is required okay so if we reload and then pass the name passing but and then pass an amount and then save because that description is required and then how our previous amount is assisted okay so now if you pass description and then we don't pass the amount and then save you can see that the amount is saved but then we lose the description so let's see how we can keep that one so you notice that's when it came to the HTML we didn't like add a value for the description so the value here will be the previous description so here we can put values the description okay so let's try it again so let's put this one save description is required let's put description then we remove the amount then save get amount is bad but then the Egyptian escaped so now let's enter the submission of the phone okay so in the temp in the views that p1 we have to continue writing some code and by the way we don't need this other if statement you can remove it now we have the value for the amount and for the description now let's keep the value for the date and the one for for the category okay so right here I'm going to bring in date and then category okay so once you have this now if if we don't have like these errors we checked form then we can go ahead and save this to our database so the way we do that is by using the expense in the expense model then we call objects let's create then now we need to pass in this value so one we haven't passed among but I want to learn to put them on dead it's going to equal to the debt that the user gives then the category we're going to put the category that they either gives what is the description going to put the description that they either gives okay so that should create now when about grades now that should create and now we should be able to say that user that the experience was saved successfully so which you can do by doing by doing messages that actually message is good success then we can pass a request and you can do experience saved successfully okay good so let me have this been expelled correctly okay so once we have that now we can redirect to the expenses page such that we can see the expenses sorry ton redirect so redirect so this basically it make and makes an HTTP redirect to a view so in the if we are relating to a view in app you can just use the view name which now will be expenses for index dot HTML so these inputs redirect from shortcuts and test it out we come and try to submit the phone we get amount required keep submitted okay so we have an error we have we are trying to access date even when we are not providing date so if you see the name here in our ad explains the name that we have on the date input is expenses so this what you want to check for in the view so interview come over here and then make sure you're checking for explained stage okay so let's now retry again without submit is an error provide the amount submit the description provide date and then I'm going to choose maybe we spent on and restaurant then what you did so this series we did this yesterday okay so that I'm going to make this one like good then when I click Submit so we have an error so we are not passing the owner so this is where we we want to also save the user who is making this request so that we can always have a way to show to know which user say with this expensive right here you need to pass owner and when I was going to put request do it using so the current working user is - oh no this explains - being created yeah make sense so if we rewrote him then pass the amount the actual validation is okay restaurants yesterday and then submit okay so we are redirected to the expenses and then we see expense II saved successfully so I want to be able to retrieve all our previous ones we are going to go to our to our HTML so in expenses index.html right here outside they saw written outside the the breadcrumb section outside this row we are going to now create a table so I'm going to have another container showing the container just so we can get some padding on the top so right here I'm going to create a table so table I'm going to have some classes one will be table striped then one will be table over scroll that table over okay so okay so once we have this then we are going to have their table headers table header so in the head we can have a row and then we can have the heater so th is going to be for the amount and then the amount of course we have the currency which I'll show you how to retrieve later so the next thing will be the next thing will be that will be the amount the next thing will be the category then the next thing will be the description then the next thing will be the date and since we are the very usable credit then there is no reason to show the user who created it ok so now that we have the head they set up the body so tbody actual body 3 body so in here now we can set up our roast so these rules are going to need to be dynamic ok so TR ok so here we go going to have some titties so here one will be for the amounts so right now I'm going to encode some value just to have the mark up and then maybe travel for the category then maybe description description ok then the date so you can do to Jenny Jenny okay so now that's we go if we go back you're going to be able to see that now we have this basic basic table so I'm going to add a class table to eat just so it is cooks better to add a class table is to cut it now can see that now it's actually better okay so now let's retrieve our dynamic content so if you go to abuse that py in our index index route so we are going to get the expenses wedding expenses because use the modern expenses expenses or surveys so we do expense which is the model that doats we want to now show the user one of the expenses that they were created by them because if you get to think about it our website is going to be very popular we are going to be having the lot of users using it so we want to use it on the CD the expenses that they want they created so to do that you are going to filter all of them by the owner of which the owner has to equal to the current Velveteen user so requested you guessed it cool so the chosen so once we have that now we can pass this in our context so right here I'm going to create a context dictionary here context and whether you can name it anything but of course it has to be a good variable name so now context I'm going to pass expenses then for the value I'll pass our expenses so now we can pass identified parameter here context okay so now we should have access to expenses in our view so in the index.html I'm sure when I say view template in our templates okay so in the index dot HTML we should now be able to check if the user has some expenses and then display them so for us to check if a user has some expenses we are going to use an a via actually okay we can we can check it before we show the table so that we don't even show the table at all you can do if expenses you can call something called account and then only then we can show the table so outside we can end it and if okay so now that we have the expenses we can loop over them and replace this dummy data so right here we are going to use our for follow for expense in expenses then we need to show you wrong and then we need to end for outside so and okay so once we have that we go back and reload you can see that we have two instances so let's make them dynamic by replacing this two expense with amount okay then same thing for the category the description and the date okay so this will be the description and take oh no so description let's see actually a category comes second then the description and then the dates okay so once we have that now we can come back and reload and then you can see that we have some new we have it's prefilled with our data from the database so let's add another one so let's say here we spent five hundred okay then maybe it's a party with friends they say it was travel fine someone so here we can actually add more categories in the database let's say we spent this money yesterday okay so if we save you can see that it saved and then we have now three but then one thing that I don't like is a message is coming down some way to move it on top so going to click cut it out and then bring it on top the table right here so now if we reload come in and create another one say we were playing tricks okay in restaurants okay so that was yesterday and then if we submit you can see that itself and then everything is updated everything is real and good so last time I showed you how you can order this so you can see these are ordered by the date so the most recent is on top which is exactly what we wanted so so now that we have it there will you be able to actually update it so you can change like the category so we can be able to change that the category the amount and all that stuff so I want to first start by adding like a link here to go and edit so to start I'm going to bring up the project in my vs code so going back to our template which will be which we added which is the in the index HTML template so right here you see that we have our table header so in our table head okay so you know a table head I'm going to add another empty th so this one will correlate directly in the rows with a field that we are going to now add a an edit button on I might add another TD inside the TR that we loop through so that we can have ability to edit each of those of those expenses Teresa I want to add an a and each wave will be so we are going to create a view so the view you're going to give it a name of expenses expense edit okay so so when it's a so when it's like a detail view like the expense edit we can have a way of passing in like they do the instance it's all so right here what you're going to use the URL utility and then the second parameter that you can pass here will be the expenses of Cerreta we can pass expense like that then we can now call this one edit so once we have that I'm going to go ahead and give it some style that so it looks better so class equals BTN quit again equally primary I really secondary okay so once we have that now we need to create our view so I now have used HP Wi-Fi right here we can define our view which we do by multiple it expands underscore edit go sticks in a request now we are going to handle the get request so if request but method equals get request so this would mean when a user is trying to request for that page then we want to render it so return render so render text a request fast and then the the template that we want to render so the temperature's going to be in expenses then it's going to be called turn record let's see it's going to be called edit experience touch HTML okay so notice that this will be a detailed view they tell you can actually take in the resource itself so right here you can now pick their the ID or phosphorous you are saving they they expense but we're gonna send the ID instead Teresa once we get it we want to find find it so this will be experience because experience objects get and then we are gonna get it by the ID so this would be P K equals ID and whether you guys PK is just an attribute the jungle set support automatically any for any model so you can always refer to to these instances uniquely using it so you don't need to like manually track the increments it's all done behind the scenes using that PK attribute so once we have it now we can send it in here so I'm also going to move this one I'll totally on to the magnet use it in the post how to vet it okay then I'm gonna setup to a context so context is now with us experience context dictionary past experience this will be experience then we need to pass it here so past context okay so let's also do a narrow spot under the postcode we are going to need to be dating so we are going to need to handle a post so right here we can still render this but I want to just Adam may suggest so we remember to do it so I'm gonna put my skills go to info request then I'm gonna say maybe I'm doing post fun ok so we'll have that for now ok so let's go ahead and now create this template so you know actually create that 60ml file so in our expenses subfolder we are going to create it's right here and then I'm going to use most of this stuff worth having and cuz it's going to look a lot similar so I'm gonna copy it then you're gonna edit it a bit so this is fine then right here I'm going to to have so this is gonna be experiences then it's gonna be edit experience ok so from there what you are going to need the amount then we are going to need the we are going to need the ok the description fine we're going to need the categories fine so we are also going to need the date so you're going to need everything here I'm just going to change the submit takes to be update remove all it save ok so once we have that you can see that the values actual note for the values and the like from the view so right here we want to make sure that we are sending them so at the moment at the moment I'm going to have to send values which will also be the previous expense information so like that so that when we pick them out like this we are able to gable to actually display them by default okay so make sense so also so yeah so that's where I'm good so let's test it out and see but before we do that we need to register our view in our URLs so right here I'm going to let me first put this on there and they make it rotate this so this is going to be edit expensed then here we can take pass a route from that we can pass the roads are out so we can pass a dynamic value to a road by doing so since we're passing an idea actuates an int so we can cast it to to an int then pass the ID so once you have that you need to post rename this name to be the one that we refer to in the view then this has to go to view those edits okay so I come on yeah so once that's set up now we need to make sure that we are sending the ID so that we will go to our index.html and then here with a bunch sent explains to tidy okay so let's take a look okay so we have an issue so right here we have expense edit not found it's not a very few name okay so this come back again and take a look so you know your is py this should be expense - adt ok good let's reload again there's an issue of aspects when citizens find expense edits is not a very good Union its pains edits edits expand search ID okay so let's check out the view to make sure that so this should be experienced a bit okay so let's take a look at okay so I see the problem so you see here I'm actually passing this unnecessary character which could be an issue so let's reload so now you can see that's that we are able to render and we can see our edit page so if you look in my in my writes in my left bottom corner you can see that whenever I groove on an expense we get a dynamic URL to link to okay but for now these are quite big I'm going to go ahead and reduce the D button a bit so right here you know index.html when I had the simple class here so it's gonna be pitching a same [Music] sorry George so yeah this is quite better so click on it's added on Eddie's takes us to a page you can see now it's it's doing it's coming to a URL and then it's trying to route to this its routing to this and then it's passing a dynamic parameter which we are sending right here okay so when you're sending it a default parameter I have to make sure that the URL will be expecting it and then of course your view has to expect it to make sense I guess so right here it's able to render it and you can see since we have the prefilled values you can see that you can see that right here divide the amount and description I already prefilled so if I come back like here let's say I go to this one for 500,000 you can see that we have that do you think that we don't have is the category and then the and then the date so this is just what I'm fixing those so for the category we need to put in our categories from the TP and prefer them and also we select the previously selected one okay makes sense so coming back here to the Edit actually in the view its first getting our categories so I'm going to do whatever okay I'm gonna put this so then I'm going to bring this right here you know make sure I add it to my context okay so once we have that looking at our expenses you can see how edit expenses you can see that it's it gets them and then loops over them and then display the displays each one of them so if we reload here you can see that we have them but now looking at this we would want to have the prefilled one to be the okay the current one to be prefilled as they a default text so right now you can see it's picking up randomly so it's picking a different one to do that we are going to now have an option like this one and then I'm going to have it on top then I'm going to add I'm going to add another attribute called selected and then this basically is going to be showing various good category okay so values dot category let's see okay so let's take a look so right now our loop is going after we show this option and basically what our loop will do is add more options to that so this reload so yeah you can see that restaurants are selected so if I click like this one for insurance you see that insurance is already selected which is good so once we have that they - upon updating these values okay so right now when we send when we try to save you can see that there is an issue with the dates let me go back here okay so let me save that the ecolift ATM try to save you see we get expense saved successfully which is not actually true so looking at our phone you can select it submitting to so open that up on here you consider the submits to add expenses but what we actually want is it said me to edit expense okay so if we gotta you can see that our view actually takes in an ID so in also need to pass it in so right here you can pass the ID by doing since we are passing in the view since we are passing they which is yeah since we are passing the expense we can actually now in here to experience touch ID okay so that we can always pick it up okay so let's go back to our view to right here when the layout let's take a post request so I'm going to do after another explicit check so if it's post then basically we want to do all the things we did when creating so right here I'm going to come in and then add expense so I'm going to copy this okay actually I'm gonna copy everything gonna paste it and I need to move this one inside okay so you're going to now check if they are sending an amount very late then this will go to edit let's bring it up okay so once we have errors we want to basically render the same page and then show that error so if we don't have errors basically we want to now save this expense so right here we've already agreed for the experience so instead of creating we are going to do the updates so to do the updates you expense then the values that you want to update so I'm gonna pop it all this and have them close here so that ona this will be requested to chooser of course okay so experience but amount will be the new amount experience but date will be the new date so expense that category will be the new category okay and then finally the expense dirt sink we bring this one on top then finally the expense the description will be the new description okay so once you have that then we need to save it so here you can do it spins let's save and then that should update it then you can say experience updated successfully we should be able to test it out and see what we have so going back to the view I'm going to reload it then we get our list click on edit then we have an issue so reverse for edit expenses so that's because this we are making a mistake lecture here in edit experience it should be edit expense expense that should be the correct class okay so seven not starting I'm going to stop it and then restart it then reload so the initial notified opinion okay let me cross upon it so you know your is at P why it's called expense edit well that is so Riccio it's not a big expense but expense edit sorry dirt and yes we are there everything is fulfilled so now let's try to modify the amounts to be like 1 million through the folders to the six description new then this change this one to be family then this change the date also like six then save it okay so we have we have an error so it's saying kind of the same lazy object this trailing comma here if you look at what we are doing in my code see we have a comma on the user and this actually changes the meaning of everything so want to make sure that it's not there so let's continue now so if you come back to edit form let's say we edit this to fifth and then we change the description to be 12 sound files let's make the amounts to have more viewers and then try to save it so yeah so you can see that it it gets updated which is good which is what we want so now let's go ahead and actually be able to add ability to like do it this one so for us to do that I'm going to add it here but you can add it anywhere depending on you UI needs but this just to show you guys how you can do that so in our edit view right away we have the breadcrumb so you see the breadcrumb basically is taking off the whole the whole widok so I'm going to have a row and then I'm going to have two columns so this one will be take off 10 and I'm going to ask for two and then in the second one it's gonna take off to let that there they are 12 in total so I just lost my breadcrumb so let me just and do okay so this is taking off the whole with it so I'm gonna cut it away and then create a row then in later I'm going to create two columns this is gonna take off ten ten columns and then the next one is gonna take up to Sokol md2 so this will have the breadcrumb and then I'm gonna have the delete button in the next column okay sorry yeah I'm gonna have a then I'm going to add an ashraf cause we want of course heated view so this we are going to be vaulted it so you are rare so I'm gonna have like explains - the beach - the beach and then here we need to pass about our ID from the views of radium we can pass pass expense but I actually spread it out and let's give it a name to it then I'm also going to give it some classes just so it looks better this will be v TN p TN danger cause we enter getting stuff then I'm gonna make a small one because mod is good anyway so now we need to create a view otherwise it will crash so this could have used that py so they've gonna call it the leads expense takes in the requests and then our our unique ID so bring it in but you can call this anything but you just need to make sure it will expect the second parameter then right here now we can pick it so we can pick the experience using the ID so you can do expanse so now the expense here will be expense good objects gate so now we can get by ID so P k equals ID okay so once we get that now we can of course edit it so you can do expense to delete okay so this will do so what will happen now is a is going to be able to make a reverse to this view and then what you do is basically find it then delete it so I'm gonna also tell the user that we deleted it and now with an two messages that success plus our request and then the message which will be experience removed okay so now we let you direct our list so we can see an updated list to relate to experiences then we need to adjust our view then it's important that we don't forget the name that we are like looking out for so I'm gonna first paste it somewhere and copy the view come back to the URL then I will press P I will copy duplicate this okay so right yeah the part is going to be expensed elite in such the ID then now the name will be the name will be looking out and so once we have that then we need to call the correct function right here I'm gonna clean this one up remember to have a comma there then let's test out and see what we have so coming back to our app when you read order on the details you can see that we have a delete yeah so it's quite small but when you hover above it you can see that it's pointing to we have the view for expense delete so when you click it so we have an issue so this is because this is because it's saying it didn't return a very less DTP response okay so the problem is we are not returning the redirect so let's remember to do that then now we can actually remove our peb because that should actually work so reload go to this one click delete it's gone put this one with it it's gone but of course normally guys when you are trying to treat something it's always good to prompt a user to to confirm if they are Shwa so so they don't delete something that's so they don't take lose their data for now we are going to keep it to that but feel free to add those functionalities that we'll be posting this quadrant on github okay so that will do it for this video in the next video we are going to go ahead and start working with with chats I believe so if this video helped you out so if you're interested in this kind of content please consider subscribing give the video a thumbs up and I'll see you in the next one bye

Channel: Cryce Truly

Views: 5,431

Keywords: django crud

Id: knXq7FevN_Q

Length: 74min 27sec (4467 seconds)

Published: Thu Jun 04 2020