Python Django Ecommerce CRUD and UUID - Managing multiple addresses

hello and welcome back to the e-commerce project this is part six if you are completely new to the ecommerce project that's not a problem at all you can download and start from this section so all the code is in the description the video description you can start to download it from there and then just start from this tutorial in this tutorial we focus on the account so in the previous tutorial we were looking at manipulating and changing and refactoring and normalizing sorry the tables for the products so now we're going to focus on the account so at the moment we have one table for the account and that causes a problem for example if the user wants to store multiple addresses so we're going to normalize the tables slightly to allow the user to have multiple addresses and then we're going to address the new user interface here or we're going to address the user interface and you can see it looks a little bit like the amazon interface so when users log in they are now presented with three options they can view their orders change their login and security details and then also now change their address so we're going to focus on this address section in this tutorial the address section is going to be a crud system create return update and delete so here you can see that the user can add a new address and then once they've added a new dress it would then appear and they can then set it to the default address they want to use as their delivery address and that can we can change that as and when we want to we can also go ahead and delete any addresses we don't need anymore and then edit them so that's what we're going to be building here in the e-commerce part six so to summarize we're going to create a simple crud example um we potentially will move this to class-based views in later tutorials and then in this tutorial i also want to introduce the universal unique identifier field which we can now start to utilize within our application and we'll have a look at why and how we might want to use that within our application so this is our workflow we're going to just review the accounts models i will take you through the changes that we're going to make there and then we go ahead and create the address table and then review the dashboard ui so i'll just take you through how or what changes we've made there and then we go ahead and build the address crud system so if you remember in the previous tutorial we are using the db diagram.io to help us plan out the tables that we're using in our system so this was a view here of the previous section that we covered and the tables that we created now this is all built um by this code here now if you want to access this service um it's free if you want the code that starts to build or shows you how to build these tables if you just go over to the projects and go into the documentation the underscore documentation folder you'll find that there is a file here called database schema text and that is the code that you can type into here on the left hand side to create all these tables so i've reviewed the oh let's move this down so i've reviewed the customer table and we've now gone ahead and just made this change and to the table so previously we had one table for the customer and that had for example the address within this table now the problem here is if i have the address information within the customer table if the customer wants to have two addresses for example we need to make two identical records inside of the database inside of this table sorry and of course if the customer has a unique id and we make a new row for the customer then we've then got two unique ids which represents the same customer and obviously that breaks our table because there's no way of then knowing which customer the same customer we want to actually utilize so the customer would have to have two logins for example so here what we've done is we've created a new table called address we've added all the address parameters or attributes to the address or field sorry in the address table and we're creating a one to many so here we're saying that um inside the address we're gonna have a foreign key customer here uh to the customer table and that's gonna create a one to many you can see the one and the star representing one to many so for one customer they may have many addresses so many addresses might be associated to one customer so one to many so you might be wondering about why i've called it customer when for example i am going to also have staff members here so eventually we're probably going to need to think of a way of having a separate table for customers and a separate table for admin maybe that's something that we can focus on in a later tutorial but for now we're going to call this table customer and we're also going to have staff within this table um just in case you're wondering why that is so go ahead and download the repository from the previous tutorial now you will find this on the github account or if you go over to youtube just access the part 5 video and you'll find the link in the description so once you've downloaded opened in visual studio code we can now go ahead and create a new virtual environment so go ahead and do that and take a couple of seconds and we just need to activate it if you're not familiar with this of course you can just skip this section of the tutorial if you want to so we'll just go ahead and activate it and now we just need to pip install the requirements so we need the r flag requirements give that a go and that take a couple of seconds just to install all the dependencies and other packages that we need so once that's done we can then start the server so py yours might be python of course so here i'm running on windows so pi and then manage pi and then run server okay and there we go as advertised we're going to first of all just review the account model and then make the changes to create the new address table so we are going through kind of the normalization process rather slowly but thinking about some of the features that we're going to need at the same time so let's have a look in the accounts and then the models so at the moment we have the user model um there we go and you can see that at the moment we we had all the fields about the delivery details inside of the user base that's the default or the new custom user table that we created so what we're going to do is we're going to remove all these items here from the user base table because we're not going to include them there and then we're going to place them inside of a new table so i'm going to be making some changes here to the names or the naming scheme of the custom user table so the custom user table is now going to be called customer and you can see that i'm going to go for id that's going to be the automatic id that django includes when we create the table when we migrate the table i'm going to go for email as per normal so the email is still going to be the login but this time we're going to just have name so we can have email name and then mobile it's probably very commonplace now to store the mobile phone details about the customer to validate them um in for security reasons maybe to send them messages account information um if there's a problem with the account or whether you if you need to for example change your password the mobile phone might also then come into that kind of process so we're include that in and then the password as per normal now the password we don't include you'll notice if you're wondering where the password comes from it's actually gets included through the abstract base user so this class here has a field and the password field so django puts that in for us and then everything else is pretty much the same is active so we're going to record whether the user or the customer in this case is active their account is active or not and again like i said previously we are kind of mixing here customer with the kind of admin so the admin is going to be stored at the moment on the customer table so we still have is staff created at and updated at okay so you can see here we're going to make a foreign key a new table address foreign key customer to the customer table and you can then see we're just going to add the normal type of information you might want to include in the address table now you might want to make this regional um here i'm just going to add a field here called country region i'm not actually going to be utilizing i did show you in a previous tutorial a plug-in that you could utilize uh countries so that you can create a massive drop down here so users can select their country so that's something that you can add i'm just going to try and go for a generic type of table here with the generic kind of fields that you might want to include in the address section so let's go ahead now make these changes to our table so here we are in the project an account and models you can see that the existing class or the table is called user base so now we're going to change that to customer of course and i'm just going to get rid of these delivery details that's what we're going to be utilizing in our new table so i'm also going to get rid of about that's not really applicable here and then in addition to that let's just uh quickly review this so email name and mobile so email we're going to call this name and we'll say again going to have mobile so now we've made those changes you'll see that we need to go through and now make additional changes here so required fields it's going to be name so that's going to be unique in our table so not only we're going to have an email that's going to be unique we're also going to have a name for that user which is also going to be unique now you can make changes here because i'm literally saying there's there must be an email and a username so unique username using the word name here suggests that for example if someone's name is bob and then someone else because another customer is called bob then we're going to have problems even if they put in their full name there's bound to be two people with the same name so we're gonna need to make a decision there so i'm gonna change my decision and then allow the name to be just a normal name field and then the email is going to be unique in the system of course they will have an id unique id for that customer too so now we've removed we need to now have a look through our required field now is going to be named so we need to look through here and basically we're not going to be utilizing the username anymore so we can get rid of that and so it's just going to be self and email that's going to be required now we can specify for example when we create a new user we also are going to ask for the name so because it's not a mandatory field now you don't need to necessarily have that in but let's just go through and make sure that we've removed all instances of username and we're going to now just uh change that to name okay so you can see that um visual studio code is helping us find those um so that should be it now okay so at the end here we've also got name so that also needs to be removed so you can see i'm going to keep the verbose name here and plural account so in the actual admin system it's going to be called accounts but the actual table is going to be called customer right so let's go ahead now and deal with the the address table so the address table then we're going to start off with the class address model model as per normal i'm going to add potentially where i can add some documentation later and this time now i'm going to use an id so i'm not going to use the django default id anymore i'm going to be utilizing this uuid field so let's try and explain what this uid field is for where we're going to use it so traditionally then django provides us when we create this table an id field it creates a nice id field for us an integer or it provides a way of us creating an auto incremented number so every time we add something to the address table that will increment so we add something to the address table and the id is going to be number one a reference point for that data so a primary key and then we add another address to a table that becomes number two and so on just kind of auto increments every time we add a new item so every item will then have this unique number within this table so potential problem here is that take for this example we go into we create our edit page now in order to create this edit page we're going to need the id of the address that we want to edit so if for example we add in a an address here that's going to have the id of one for example so if we wanted to access that address we would then need to utilize that id within the url here to then pass that back to the system to make the query to actually get that data from the database so this becomes very obvious to anyone because if you want to get the address the next address just type in the letter two there or the number two sorry there and that would get us then or try to retrieve the other address and so on we could just type in numbers here to see if we can get random addresses now obviously our system would protect us from that because not only will we not only we would use the id of the address we would also use the the username or the user also to collect that data so we wouldn't necessarily or users wouldn't necessarily be able to access any addresses but it does potentially make it easier for people to try and access addresses or other sensitive information because it's really obvious that we're just using this auto incremented id so we could potentially try to access things through just typing this into the browser now what we're going to do with the uuid here is that we're going to create a much longer string a random kind of string here with lots of numbers so it makes it a lot harder for someone to try and guess that unique identifier for this for example address so now we have this unique identifier here like i said it becomes a lot harder for someone to guess and we then remove the normal traditional id potentially from our table and now we're utilizing the new uuid field which is going to be this longer string that's going to be created to uniquely identify the address there are a number of pros and cons here of utilizing the uid here build and it'd be well worth reading into that but i'm just presenting it to you based upon the fact that it does provide us some a little bit of security here on the front end in that we don't need to utilize the the traditional kind of primary keys now what you could also do let's not forget we could create a unique identifier in this way as a for example a public facing identifier and then we could also just use the traditional id as well so we could call this for example public id and then just allow then django to utilize the normal id so we could also run that way if we wanted to so like i said there are a number of pros and cons maybe when you start um start running your queries etc um that could maybe provide some overhead for example so it's well worth planning out if you're seriously thinking about utilizing this right let's just uh move on i don't want to dwell on it too much please go and have a little read if you've not utilized this before it's well worth having to think about and implementing it within your system so like i said we can apply that throughout the whole system and we're not going to at this point we're just going to move on so we want to add the other fields now to our address table so we have the customer field so that's going to be our foreign key now remember that django is going to place underscore id here um in the actual database and this is why i've not included it here um as like the the id to denote the fact it's kind of a foreign key over to the customer table so i'm just going to use customer foreign key and there we go um so then we have the full name phone number uh postcode address addressed to town city delivery instructions so here i've included delivery instructions we probably won't apply it here but you can add this into your form so that users or customers can add any kind of delivery instructions that you might want to include created and updated and default field so customers will potentially want to select their default address so we've added this boolean here to allow them to do that so we just finish off with some meta for the table addressing dresses and last of all then we just return the string address and there we go so that's our table now sorted so now we've made these changes um eventually we'll go ahead and create some maybe some management features or management commands to manage this more effectively but we are still doing this manually in the migrations so i'm just going to remove all the migrations i realize i could probably uh fake this for example um but i'm just doing this manually for now so in accounts and then in our store the migrations just need to remove all the migration records and then orders and that removes all the migrations now go ahead and remove the table so i am still doing this manually like i said i realize this can all be done automatically we'll get there and then we can go ahead and now do a make migrations um oh i forgot to add that so going back into the account um because we're using uuid we're going to need to bring that in and so at the top here we just need to add that resource and that is going to be just import uuid so that's going to be from the python core library or packages so uid there we go and so now we should be able to migrate okay looks like we've got a problem here and properly so off user model refers to account user base of course it does okay so if we go now into our core and we've added a settings folder if this looks strange to you and we've got the base that's our just the normal settings at the bottom here we need to change the the author the account and then customer that's our new table the off user model so that's just the default user model for the custom user model we've created so we've changed the name there and hopefully now we can then go ahead and migrate now we can't okay where are we looking so line three um because we're importing it into other files so we just need to sort this out account admin so i forget about that so that's the admin area so import not user base customer and that's just for the admin okay so we need to change that and then can i import user base accounts model account models um looks like a line so account so cannot import user base from account model so that's in the account forms okay user base import customer so we sorted out the form to allow our users to log in now if we give us a go we've now got some more problems on the form so let's just uh account um so it was user base wasn't it so let's have a look a look so from models import customer and so here we've got the model to find us incorrectly so we just need to select from the the right table so we're just going through now i'm looking for where it says user base and changing it to customer i realized i could just do a search and find here but i just want to do this manually okay so and one last one here so in the forms okay so i think i'm done there um we have seen tell me of course okay so line 13 in the view so now i need to go over to the views and line 13 where i've imported it in so this um this is exactly why you don't want to potentially import this in manually um all the time so we can refer to this table through the settings you're probably wondering why i haven't done this so of course here we are setting up the off the um the default user model here and we've defined it here but i'm manually calling it in the other file so you don't need to do that of course you can just refer to it from the settings within these files so if you do make these changes then you wouldn't need to do this of course so there we go so now we can create migrations so once you've done that let the errors guide you on where you need to make changes but essentially you need to change the model uh the the forms and the view in order to get this working so i've gone ahead and made the mic the migrations there so now i can migrate and now we're back up to where we were so i'll just go ahead and create my cpu user oh we did create super user just to check to see if this is still working um so we have now the email name not username anymore so that's the two mandatories that we need so you can see here we've got an error because somewhere it still says username so we need to go back into our models and just do a search here for username so you can see here it says username so that should be name and looks like that's the only place we've got there so now let's go ahead and try this again create a super user and there we go so we started the server so while we're not using the django debug toolbar it's probably worth just turning it off so if you remember here in the core we created the settings we created a dev debug and we've got the base so the dev debug was just to kind of activate the debug toolbar so what we need to do is if we go into the uh our manage pi file here and we just change this now to core and then the default which is base so base then when we start up our project server sorry let's close the server and start the project server again we should now be running the base um seems to be a problem here no module named core base um let's just go back to our manage file so core dot base so we had settings so we needed to go into the settings file that's why because we have a settings folder sorry so let's just start that up again okay so now we're running without the debug toolbar okay so this is where we end up ended up with now you've seen from the preview that we want to kind of make some changes here we want to kind of integrate the login and the accounts into a separate feature now so that we have a drop down and then of course we also now want to um change up the dashboard so that we have like we do for example in amazon some links here some boxes which will then connect us to different areas of the system so this is where i really want your feedback here please how should i best show you through the ui when i start making these changes here normally i kind of just drift through giving you some basic overview of giving you a basic overview of how i've done this and i don't go through this line by line etc um hopefully you kind of get the idea what's going on in my opinion or what i'm thinking is that you would have a look at the base code that are provided in github and you can then just copy and paste it in so that might not be your preference or if you can think of a better way i can kind of present this to you and that would be more valuable um then please let me know it'd be a good idea just to get your general feedback on how you like the front end to be kind of delivered um so that i can change things to make it more palatable for you so first up then we're going to just change the menu here and like you saw in the preview so we have a nice little drop down so let's just go ahead and do that now we just need to remember where the drop down is or where that bar is and that's in the templates and that's our base so this base file here has it's a rather big file this navigation area here which is rather large it's rather cumbersome to kind of show you um how to make these changes just because there's just so much code on the screen here and again if you're not familiar with bootstrap that makes it even more difficult for you i appreciate that so let's have a look at some of the changes that we need to make so this is incredibly easy to get wrong here by removing the wrong element etc so the first thing we need to do is just get rid of the log out section now it's just the case working out where that starts and ends so this is an a tag here which is wrapping it around and it allows me to kind of then create that link for the log out section so i'm just going to delete that because i'm not going to need that anymore else it's going to show login well i don't need login either and so i'm just going to remove that but i'm going to keep this if else so this if our statement here is for when people are authenticated so if someone is authenticated i'll show them this if they're not authenticated then i'm going to show them this instead so that's what's happening there so we keep that for now so i've made those changes and we should have now that is now disappeared so we have no login or log out button so now to the account button so here we do the same thing again so we find out where this button is looks like it's just here i'm going to remove that button and now we refresh and it's gone so there's a fair bit of code here so i'm just going to remove that i'm going to put this between the button and where the link starts here for the for the basket so i'm just going to go ahead and paste this in here so you can see it's quite a large block starts with a div element here so we're going to create a a collapsible um [Music] copy and paste them from bootstrap the collapse of collapsible uh drop down menu essentially and you can see i've got this unordered list here and then this list so that's kind of the drop down list inside of this list i then have some different items so i'm just kind of retrofitting here a list drop down you can see that inside of this list item i'm adding more elements here so i start off with my my link for the account button so here um it's going to say hello if the user's logged in it's going to say their username and if they're not logged in it's just going to say login so again similar to amazon when you're not logged in it just says hello login [Music] if you are logged in it says hello comma then your name um so then underneath that it's going to say accounts or account list and then that's about it really so then we have this drop down so this is a drop down element here you can see that i've created a number of different links to different areas um so we've got a links to your account orders log out and login now they should all exist so there's nothing new there so let's just um give us a go we have this drop down and there we go so that takes us to the um there and everything else this log out will allow us to log out and so on so you can just copy and paste from the repository and this section and it should work absolutely fine there should be absolutely no other changes that you need to make so from line 64 we've just added in this new piece of code here so that's pretty much all that's needed there now secondly to this if i were just to move this down into mobile view you can see that disappears apologies you can see that disappears i've got the drop down here but we're also now going to need to add to this drop down all the other user items so let's just go ahead and do that so what we need to do here is just find that section where it drops down which is right at the bottom the last component here so it's this component here so when we drop down this component is shown i think that's right oh yep okay so what we need to do now is uh just add uh some code in here which is basically going to be a copy and paste right of the items i've just shown you previously so i'm going to copy paste it right here let's just get this right so it's going to be after this unordered list that's the normal one ordered list for that so i'm going to create this new section here you can see that i'm creating a a title uh using a h6 my account and then this is the list that we had above which i've just copied in and then let's just have a look at that see if that works so when we go into mobile view so f12 now when i drop down shop we now have the all as in all products and we also now have your account orders etc okay so that kind of completes that section then of the ui so you can see in the dashboard if you remember from the previous example we had some new sections now so we're going to get rid of this change detail and add these small sections so that users can click on the button to allow them to or signpost them to the separate areas that they want to go to so let's go over to the which is going to be the account and then dashboard and then the dashboard.html that's the page that we're utilizing for the home page of the dashboard now if you were just to copy and paste from the repository the code repository there's just going to be one slight problem so all i've done is i've made the changes here sorry i've copied from the repository in the github repository and just copied the new dashboard code across it and what you're going to receive is this error here for addresses not found because we haven't built that yet so let's just go ahead and just remove line 58 and then just save that up go back in refresh and you can see that we've got this uh new section here it's going to look a little bit like this but essentially what we've done is we've created some blocks here in the middle we've utilized some icons from bootstraps if you're wondering where those are from if you go over to bootstrap and then just go into the icons here i've just collected all the icons from here so we're just using the icons from bootstrap here so that's the icons but here essentially what's happened if we move up is we've created this column inside of these columns we've got three new ico three new items here three new columns that's pretty much it really that's pretty much all that's happening so you can copy and paste that in and you'll then have or be presented with this section here like this now you can see that when i zoom in um at the moment it's potentially not really responding very well we want this we want this box to potentially scale up as we move in so what we're going to need to do is if you go into where the dashboard is come out if you remember it's using this sub base here so at the moment you can see that this sub base it says that's a bit of a mixture going on here at the smaller size or all sizes it should be column 12 so the whole width and so the smaller size that box we saw will be at the full width and then it goes into md6 and then large six and mx auto because it's in the middle so i think what we need to do here is just make a a few changes to this so we're going to change this over to cold 12. so everything's going to be cold 12. so let's just go back now into the code so you can see now that um it's completely looks like it's completely messed up let's just go back into the um there we go so so now you can see it's kind of moved across to the full width so what we need to do now in the sub base is just change container fluid to container because we don't want it the whole width so let's go back in now and there we go so now when we zoom in you can see that it's going to be nicely formatted on the page those are just the small changes that we needed to make again these are just small changes i understand bootstrap um again if this is where the problem occurs if you're following this step by step and you make one little mistake it's then hard for you to understand what's gone wrong so please just refer to the code here um like i kind of said i'm never too sure whether how much information to give you here because we can't go on for hours about front end things here so hopefully that was useful so now then we've got everything hooked up um the orders isn't hooked up anymore so that's something that we'll be missing after this tutorial the orders and then we now have your addresses so now we can focus on the your addresses okay so we've created a reviewed and created a new table and that's pretty much all the changes that we're going to make to the dashboard and ui so now we can go ahead and build the crud system so create return update and delete so we have the table in place the address table in place so now we just need to build this so we're going to make it as simple as possible we're going to have a url for each section so create return update and delete so go ahead and do that and then we just add some simple views using functions approach uh for these different functions that we're going to need to build so let's just start off by just removing everything here okay so we're going to be in the the account and we're going to go into the urls so it's a little bit of a mess in here at the moment we're going to tidy up this eventually um but we're going to add some more paths so let's just think about what we're going to need here so we're going to need to uh view update delete the addresses so we may as well just go ahead and build everything that we need um so first of all we're going to need like a home page for the addresses right um so we're going to build a path for that so this is going to be called addresses and then we're going to need to add an address so we have the add address path and then we're going to need to edit so when we edit you can see here we're going to pass in the id of the actual address we want to edit into the view so then we can then run the query against that id and collect the right address to edit we're then going to do the same type of thing here for delete so we're going to need to be able to identify what we want to delete so the view is going to bring up an address that's going to have an id of the course and we're going to pass it over to the view which is then going to delete that address from the database and then the last of all set default so this is going to be a path that's going to allow us to set the default based upon the id of that particular address that the user is asked to select the or set the default on so here we're going to create one two three four five paths now of course it's just one approach and this is obviously the most simplistic way of building this so you can see exactly what's going on here we could convert this potentially into maybe two paths if we were utilizing class-based views and of course we could probably just build one class and have one address in actual fact that could potentially work too so hopefully over time we're we're great and we'll look at more kind of um exotic code that we could utilize to create a more efficient way of working but this works at the end of the day this will work and therefore it will be a valid way of working so now we have everything in place let's just do this one by one so uh let's just uh comment that out so let's start off by building the address view so we're going to need to go into the views of course for this so we call this addresses just to remind myself of that so let's open up the view um so let's just uh build a new section then i'm at the bottom here so we're going to create a new section let's just call this address section for now so we can just point to it later or just easily find it later on and now the next thing we're going to need to do of course is we're going to be working with the address model so let's just bring in that bring that in so that's the address model that we're bringing in to our view so we can start working with it so previously apologies again to scroll up it's always hard to see when you scroll up so previously then we brought into this project the login required declarator and by decorating our function it essentially means in this case um for example here you can see that um this view will only be accessible if the user is logged in so we'll start off then with the login required declarator here because the user has to be logged in to actually view their address so um first of all we're going to create view address to allow the user to actually view the address so this is going to be like the home page for the addresses here so that kind of matches up here with our url view and now we can then go in and create a new variable addresses we want to capture all the addresses um that are related to that user so here we're going to need to build a filter so we're going to be in the addresses table objects the object default object manager we haven't created a a separate object manager for this and then a filter so here what we're going to filter is where customer equals request.user so when the user makes a request notice that we've got a request here we can collect the user id from that request so when the user's logged in what they're going to have is a session in the background that session data is potentially going to hold the user id so basically what we're doing here is we're bringing in that request information and we're collecting the user id from it so basically what we're doing here is we're running a filter now we're going to collect all the addresses in the address table where the customer equals a request.user that's the id of the user now if we were to go into the models here and go at the bottom where the addresses are you can see i've got a table here called customer and that will have the foreign key that will have a number one two three four five six whatever and those numbers obviously correlate to the id of the user in the customer table remember that the ide here doesn't exist because django puts it on for us so if we were to go into our table so remember i've got the sqlite the sqlite [Music] extension here so if i right click on the table go to tables explorer and go to my table and then just go into the user table and if i can quickly find it it's called customers account customer and right click and show table you can see that i've got one user here and that's got the id of one so that's how we're collecting it's got the password last login is super email name etc so that's my user table that i created earlier but notice that django's put the id or the id field automatically in there so that just adds and just explains all of that so now we've collected all the addresses about that user we can then return them so just a simple render return and we then define the template we want to use so we're going to need to build that in second and then we're going to also send across the context which is the addresses that we've collected into the template so we can display them to the user so now we've got that in place we may as well build this template so that's going to be account dashboard addresses so let's just drop some of this down let's move this across so in our templates dashboard inside of a dashboard we're going to need a new um html template and that template is going to be called addresses so let's just bring this in um so i've gone ahead and pre-built this so this is it so this is going to extend the sub base as per normal is the title is going to be called edit addresses and you can see we've got the h1 title your address so this is just building upon the existing template that we have and all we're doing here is we're going to have a box on the left hand side to allow the user to click on it to add a new address so that's going to take them to the um add address url which we're going to build up shortly so that won't work just for now so that's the button there that's going to allow the the user to actually press and go to where they can add a new address so these are just columns so you can see for the second column here we've got this for loop um so what's going to happen now is we're going to collect the addresses that are returned from the table from the database and then we're going to loop them out so for each an individual address we find it's going to go into the address variable say here and then we can access all the duress address parameters from the address so default if it's default it's going to say default so this is the top section and then we're going to then just output the address full name line so this is just matching all the fields we have in the database here just to output the address and then at the bottom here we've got um three new areas to allow the user to edit to allow the user to delete and then also set the default so just remove them for now before before we then go and add them back in so that's the edit delete and set default and then we just end the if statements and the four statements end the block and then now we've kind of looped out all the addresses and the customer has so now we can go back in and we should be able to go to your addresses so we just need to hook that up again so this button is in the dashboard so let's go into the dashboard let's go and hook up that button if we can find it it should be in the third column here and it's going to be the link so we're looking for the a link which is uh just here so we're going to add the address back in now so the address here is going to be referenced as addresses so in the dashboard so let's just quickly manually add this in so this is going to be url and then um it's going to be account slash addresses okay so let's go back into here refresh go to addresses and there we go so that's we're now in the addresses html page we just created where we can now go ahead and add a new address obviously i've taken the links out here so we can't actually add anything next but that's the next task so back into my urls let's um activate the path for the adding the address here so this is going to be a new function called add address so here we're going to need a form so we're probably going to need to create a form in a second so let's just go into the views now obviously this is going to be login required also the users aren't the user isn't going to be able to do this unless they're logged in so we're going to need to add an address so let's start off by going into the forms so we're in account and forms we're going to need to build a form that accesses all of those address fields so that we can display them on the screen so that the user can type them in so we're going to first of all in the forms here let's just close everything down so in the account forms we're going to now include the address table so that we can access those fields and let's now build a new form for this so i'm going to call this form user address form and then i just want to define some meta say the model that i want to use or where i want to collect all the fields from or to have them automatically created for me so what django is going to do here because i've specified the actual model i want to use django can automatically look at all the four fields that are in that table and then generate obviously some input forms for me some input fields sorry for me in a form so that users can just type it in so i can specify here the fields i want to use so notice here i'm not utilizing some of the fields that are inside of this table here one being for example where users can add their preferences so by all means add some more fields in here if you want to and extend this of course and then i'm basically just going to add in some bootstrap here so what i'm doing is i'm going to overwrite and set some field um classes so here you can see i'm selecting the field name input and i'm adding a class to it so some html classes to it so this just connects me to the uh the bootstrap classes i want to add for it and i'm just basically going to do the same thing for all of these so this is basically me formatting all the different input fields so i just go through each one address line address line two city postcode and that just allows me just to add some simple formatting so i've done this i could loop through this potentially and add this in but i've just manually added all of this in so there we go so that's what you're looking at here this is a class styling for each of those inputs okay so that's my form created so django is going to provide me all of these fields inside of a form so i now need to hook this form up so i need to bring this form into my view so go into the views i'll just go to the top and then go to form and if i now add that in user address form that brings the form in here so i can now go back to the bottom and now finish off my view so the users can add data to the form or to the database so let's go ahead and build up this view we have the login required as per normal and then we're going to create this function as we know called add address so that's the function that we're going to build add address yep and now we can go ahead and create the return so what we want to do here finally then is return both the template which is going to be edit address or edit addresses in this case and then also the form data to the template so that's what we want to return ultimately so what we can do is bring in the form that we've just created called user address form so at the top here we're going to need to bring that in right here so we bring that in from the forms as for normal like we've done with the other forms in this in this view and then i'm also going to then go ahead and now create an if statement so what's going to happen now is if we just left it like this is that we would just return the template with the form data so what we want is the user to submit that new data the new address so that also goes to this view so what we want to do now is manage that so when the user submits an address once they've filled in the form and submit the address they've sent them a post request to this view so we can capture that post request with an if statement so if request method equals post then we're going to take the data from the form that's what we're doing here we name the form and then the data within it and we put it into this address form variable and then basically we're just going to check to make sure that data is valid so we use the is form so the address form that's the data is underscore valid that's going to run the data against the database essentially and check to make sure that the data type sort of correct in order for the data to actually be entered into the database and then we go ahead and start preparing the data to be saved and then of course this data doesn't include the customer field now remember this is a field that's inside of our model we go so down here we have the in the address the customer so we've added some data some of these uh from these fields here but obviously in order for us to actually submit the address we need to match it against the customer so we're going to need to the customer id here which matches the foreign key customer table so that just matches up the the users in both tables so we need to add that manually so we take that from the request now a request is made by a user whether it's user one user two etc um so that data can be passed across and we can collect that as user so that will be in this case we've only got one user so that'll be user number one and then we go ahead and save that information so we're just preparing the information to be saved we're adding more information to the address form and then we're just saving that data out so we then return a http response redirect we redirect them to the address home page so we're going to bring in http response redirect so at the top here um we've brought that in the redirect and we're also using reverse so we've also brought that resource into right so those are all the resources that we're going to need for that um and yeah that's uh ends up with an else so basically if they've submitted the form that's going to run if they haven't submitted the form it's just going to show them the form so that they can fill it in and submit it right so let's go ahead and have a look at the edit addresses.html so in our templates let's go down to here edit addresses so i've already added this in um so it's edit addresses.html so you can see here it's just going to be uh extending from the sub base and we've got the title and i'm going to heading here for that so we're just using the same setup as as we've done previously utilizing the column six um mx auto so center aligns inside of the sub content block and you can see this is going to be a form so we set out the form and you can now see that we're just running to check for errors we're going to need our cs rf token and then from then on we're just um naming from the form remember this is the form so we're sending across the data as form so the data about the form is sent off and we can reference it via form here so you can see inside of here we can reference form phone address address town city postcode and so on so we add the labels like we've done before and the input fields and they've got a button at the end here which is styled and that's pretty much it so what will happen now is that a user would submit it would take them to the address page and the thing is here is that they could also press back in the browser for example and that would then take them back to the page and show them the form with the data inside of it so that's not something that i want to happen so what i've done here is i've created a little bit of javascript here which basically detects whether the form is submitted so when we um sorry it doesn't detect that so on click it runs the function uh submit form so what happens is that we're basically we submit the form but what we also do is reset the form so that for example if we were to go back press back after we've submitted then all the data would have been would be gone from the form so it would actually be reset so it's just kind of a reset for the form so with that in place we now need to go back to the addresses and then just go into here and just add in line 13 we just need to add the link back to the add addresses and let's go back into our code we're just going to refresh and you can now see um we've already added some here but we should now be able to add some addresses to our form and press add address it says error please try again which was a little bit strange wasn't expecting that um so i missed some of one of the fields and there we go so we now have our new address added so i can go ahead now and uh or do nothing else but what we now need to do is now complete the edit delete and set default so we can definitely add let's just try one more time all the fields are required um there we go and yep so now let's go ahead and set up the other options right so back in the urls let's uh activate the new edit here so you can see with this edit that we're taking in the id of the actual address so it's going to take us to edit slash and then you're going to see the id of the address and of course we're using the uuid field so it's going to be quite a long string there so we're going to create a new view called edit addresses so let's go into our views and do that okay so this is going to be the same type of setup as before as the ad address so we're going to need login required as per normal and it's going to be called edit address but now this time we're taking in the id as well so this is a separate parameter here so remember we're taking in the id here that's the name of the parameter so that's the type of data that's the the name or the parameter or the i guess we could call that the variable name so we need to take that into our view id here comma id and now that data is saved so that's the data that's actually in the url whether it be one or two or three etc so it passes in now eventually what we're going to do is we're going to render this out to a new template called edit addresses.html there's going to be a form on that and we're going to pass the data in as address form so this edit address function is for a new template whereby we can view an existing address and make an edit onto it so uh if we for example um don't submit any data then we want to obviously show the form with the data inside of it so what we're going to do is get the address so address equals address to objects get and then we're going to get where the primary key equals the id that's the primary key of the address now also in addition to the actual id the uid in this case and we're passing in we also want to match the customer because if we just use this here it would mean that anyone could potentially just type in a random string and get one of the addresses so we're protecting the user's address by matching the primary key and also the fact that it must be a customer that's actually made the request to request.user so that way we're kind of protecting the user from accessing and ensuring that the user can only access their data so once we've done that you can see we've got address form equals address user address form that's the actual form and then what we do is we say instance equals address so here what we're doing essentially is we're getting the form we're injecting that data this instance into that form so that what gets displayed on the form is the address that got returned or the data about the address that's got returned from the database that's what we're doing here so that would get them passed out into the template and then as per normal we're going to use the same template as before so the user address form that's what we set up previously so we don't need to make a new form here for this so what we want to do now is allow the user to submit the update so again what we're going to do is just create our if request method equals post again so let's go ahead and do that so if request method equals post let's get the data from the database and then also let's uh get the data um the instance equals address data equals request post so this is basically just collecting the data that's been returned or been edited and now we're going to check whether the data is valid so we check um whether the data is valid or not and now what we have is we've we know essentially here we know now what um entry we want to edit we now know what address we want to edit because we collected the data from the database we've then got that instance got the new data and now we want to apply that new data so we do address form dot save and that will then apply the new data to the address so where before we actually selected um we just basically selected the data and we returned it now we're kind of selecting the data returning it and then saving the new data so we then return the http response as like before to the account addresses the home page of the addresses and then we run the else because if we're not um saving data then we just want to display the data and there we go so that's pretty much the rundown of what that is doing um so we'll just save that and now we need to create a new file called edit addresses.html and it's going to be a very similar setup um to this one and in actual fact you can already see that we don't need to make any template at all because we've already created that template so we're going to use the template that we use for the address add address so there's nothing we need to do there in actual fact so let's go into the addresses now and we just need to find edit because we want to now add uh this new url right so that we can link to the edit page so let's just um bring that in um so that's going to be account and then i think it was edit address foreign memory serves me right so let's go back into urls edit address that's the name so let's just give that a go just refresh uh select edit and there we go so i'm editing this let's just update this there we go we've made an update so that looks like it's working okay notice it says edit and then we see the uu uuid um here uh instead of the number one two three four etcetera so you can see where that is being brought in and obviously that's then being captured by this slug id element here that's then being passed over to our view it has id and obviously we're using that to actually run against the database to find the data right okay so with that done let's uh go back uh so now we need to for example delete so this is pretty simple so let's go back into our urls let's run and create this delete view so this is called delete addresses so super simple here login required as per normal so the user needs to be logged in uh delete address we're going to take in the id um remember that's the address id so we can run against the database to delete it so we know which address we're going to delete and then we're just going to run this filter here so address equals um and match we don't need this variable we could just run address but address equals address.object.filter and then we're going to select the address via the id and also match the customer user customer user id and then we're just going to extend that with a delete so that would delete it nicely and then we're just going to return a redirect to the addresses page okay so that's pretty much it for the delete so with that in place we should now be able to delete there we go so we don't have ajax here so we are refreshing the page every time we um click on delete so that's delete so that leaves us then we're setting the default so we want to allow the user to set a default address so that it just automatically appears when they go to purchase something so again this is just going to be called set default and we're going to take in the slot id so we can identify what the user wants to set as the default so this is called set default so let's go back into our views and just build this out so no surprises we're going to start off with the login required and then we're going to call this set default so take in the id of the address so we can identify which we want to set as default so here we're going to run this query first so address.objects.filter customer who calls request user default equals true so what we're going to do here is we're running a filter in the address table we're looking for where the customer equals the customer id and where the default equals true right so the customer is only going to have addresses in that table that's belonging to them that's going to be uniquely identified by their user id so once we've collected all of those say they had four addresses we're then going to filter further where the default equals true now remember in our model we've got the default uh by default it's false so when we add a new address it's off by default so what we want to do is we want to look for where in the table the address equals true that's the one that's currently active as the default and then what we want to do is we want to just change it so we're just going to run update default equals false so we're going to find the address that has the default equals true and then we're going to false it out so once we've done that we now have no addresses that are set to default equals true so all we need to do now is take in the id of the address that the users clicked on to be the default address and then also match it against the user id and then run an update and then default equals true and that's going to change that particular address to default equals true in the database therefore now becoming the the default address so we're just switching over in the table the default so let's go back now and we return them or redirect them to the addresses so let's go back now i think there's nothing else that we need to do there uh yeah let's go back now into our address and just refresh so let's set this to default there we go now we've already set in our template this option here so let's just double check that in addresses here at the top uh we've created a an if statement if i remember uh yeah so if the address dot default now this is basically returning true so if we're checking here we're just running if address equals default so if it returns turns true we're going to say default there if it doesn't return true you can see we're running this space here the reason why i'm running this here is just a small hack to ensure that we actually have something in the box so it scales properly so for example if i if i take this off um and go back you can see that um to refresh so this box here potentially was scaled down um to a smaller size so the whole point of that um was to ensure that the box at the top box here stays at the the same size as all the others so that was it really that's going to be the set default so now we pretty much have everything that we set out to make so you may have already come into this problem and i do apologize for not addressing this earlier utilizing different code bases here and different versions running i've got a little bit mixed up so let's just uh finish this up by just defining what we need to complete in the urls now the urls aren't quite complete now when we send across when we go across to different urls we're also going to need to specify particularly for example the edit here and the delete and the set default this is in the addresses template we're going to need to in addition to the actual url we're also going to need to pass in the actual address id so that's going to be needed and required here so the account set default delete and edit address are going to need to we're going to need to pass in the address id across so let's just uh change that so once you've got that it does look like this is the actual version of code that we're finishing up with so set default that's working so let's go ahead and just add a new address so that is working okay we can also delete them so let's just make sure that we can finally just set the default and there we go so everything looks like it's working okay now so let's go back into the accounts and yeah there we go so to change this here uh change your details so this is a profile edit so let's just go into that uh edit details now this is just about changing uh some of these elements here so we want this to be wrapped around so that we can just scale this down we just want to wrap this around in a div here column six and then center align it and that will just then bring it down to the same size as the the address section um so as the other sections that we're going to create sorry um yep the address section here so we're just addressing that size there so nothing else has changed there so i think we're just about done here we can now move on to the next section so of course the next section will be the next tutorial so there we go that's a simple overview there of really just a crud a simple quad system um implementing that into the address table so that the users can add multiple addresses for their account so i hope there was some value there in this tutorial of course we're just chunking these components into a smaller components so the tutorials aren't as long so there's lots more to do on this of course and i value your input if you want to suggest different ways and approaches for me to actually display the information or present the information to you so i will take any feedback that you have and yeah hopefully i'll see you in the next tutorial

Channel: Very Academy

Views: 5,296

Keywords: python, django, django crud, django ecommerce, django project, django tutorial, djangotutorial, django tut, django 3, djangoproject, django examples, learn django, django beginners, beginners django, django framework, django example, django 2021, python django

Id: 8SP76dopYVo

Length: 71min 6sec (4266 seconds)

Published: Tue Mar 02 2021