Python Django Project - Ecommerce Store (2021) - Part 1 - Building models, views and testing

hello and welcome to the django project e-commerce store so this is the first project of 2021 e-commerce store version 1. so to give you an overview of what's going to happen here in this project and the new way of working here for 2021 i'm going to set out this project in three stages so there's going to be three tutorials or three areas of three videos for this project and that's developed the basic application that's what we're going to achieve in this tutorial and then we're going to then build the shopping cart functionality go through all that type of development process and then we're going to head into part three and that's the payment portals so in this project there's going to be three core areas or three core tutorials the first tutorial this tutorial we're going to develop the basic application then in the second tutorial we're going to focus on creating a shopping cart functionality or the shopping cart functionality and then the last section we have a look at payment portals so connecting our application to a payment portal so we can accept payments within our application once we've completed the three course stages here you'll have a a usable working ecommerce store where you'll be able to take payments for products inside of your ecommerce store and then send confirmation of those payments to the user now four five etc etc at this point once we've done the core stages we can then have a look at some additionalities so i wanted to kind of front load the core sections at the start of the project so that when we have a look at the additionalities we can maybe make changes that we don't want to affect the next section for example so we don't necessarily have to have this in some sort of order we can look at different aspects that you might want to include in the project and make those into kind of individual tutorials okay so let's get started with part one so like i said if you're familiar with django and creating basic templates and testing um and views etc then you might want to skip to part two just download the code for part one and start with part two now if you are new to django um hopefully i will create an environment here for you whereby you'll be able to get started with django and start building this project now i'm gonna try and cover as much as possible here in the first part we'll start by getting django started and building a new project we're then of course going to have a look at models and then create a simple admin area for our model so we can start adding data to our database so we'll have a look at how we can import images and set up the media folder so that we can actually upload images to our project so i do want to include testing in all of the projects this year so we will go through the basics of testing and this first instance will be testing our models now this is a kind of an optional step so you don't have to have testing to get the code running of course but it is a good piece of knowledge or a good stage to kind of go through and become familiar with testing in django and python so we use coverage the package coverage to help us and guide us in what needs testing and i'll go through some of the basics there and then we'll move across and build our urls and our views and then start to bring in our templates now we are going to be utilizing bootstrap again as our framework our css html framework so that we can quickly build views so this isn't a css or html guide at all i'm going to take you through the steps of utilizing bootstrap and what changes you need to make but i am going to try and concentrate on the python code and the django code so once that's done we'll do some final testing of our views and then i'll give you a little bit of information about python style conventions and we install some applications or store some packages and just test our code to make sure it meets the pep 8 standards so that's again a little bit of an optional step there for you but it's just kind of good practice to start thinking about python styling or code styling so by the end of this tutorial you're going to have a project that looks a little bit like this so this is the home page here we have some links we've got a drop down here this is a category a list so this is dynamically produced from our database at the moment i've only got one category called django so that allows me to take me to the django books so this is a bookstore as you've probably seen so i've got some books here two books and we can click on these books and then that would take us to the individual page so at this point we can we can't in this state we'll look at this in the second tutorial where we can add this to the basket and track our basket before we can then make payments so you can see that we've got the template in place for us to kind of start performing those actions in the second tutorial now we don't have any search this is going to be additional kind of function we can add much later into our project but essentially that's what we have we have a home page where we can view the books that we have and of course there could be plenty more here we've got the search also the category functionality and then we have the individual page where we can add the products to the basket so now you've seen what we're going to build let's get started so here we are then in visual studio code so first of all let's have a look at the extensions here that i'm running so i've got the atom1 dark theme um i don't think i've actually applied that yet um but i've downloaded that i've got the django uh extension here so this is in extensions just search for the extension and download it um so this is going to give us a few different features here and when we're coding in django's gonna highlight some code for example and tell me what the code does and it's maybe going to give me suggestions on what code i need to use for example what options i have available okay so other things that would be useful here um i've got sqlite to allow me to kind of have a look into the database and the data within the database so i can view the sqlite database and then in addition to that we've got python here so that's also pretty useful for us to install and that's going to provide us some linting so it's going to um just let us know when potentially we've made a mistake for example um and formatting for example is going to help us with a little bit of formatting a style convention and so on so those are the um from the key extensions so you don't have to include them of course but it can be handy to have them so go ahead and file open a new folder uh create a new folder select the folder and here we are here we are so we have a new project folder so let's go ahead now and in the terminal you can see that i'm using windows this is going to be very similar on other operating systems of course so what we need to do is we need to first of all create a virtual environment so here i'm running whatever the latest version of python is at this point so let's just have a look hyphen version so i'm using 3.9 python so what i'm going to be doing is setting out a virtual machine of course to begin with so using the the m flag here um because i'm going to be referencing a piece of software for example so i'm going to create a new virtual environment the folder is called vemv so let's go ahead and do that there we go so this virtual environment allows me to kind of work within a smaller package area so i can install individual packages away from the main kind of computer and the main version of python on my machine so let's go ahead now and run the activation so we're going to activate the virtual machine here or the virtual environment sorry so there we go so now i'm in the virtual environment now i can actually install django so i run pip install django that's going to allow me to then run or download from the package manager the or with the package manager pip download django onto my machine so now django is now installed we can have a look in the lib here you can see django now has been installed so i'll be able to access um the django admin in here so i can do that by typing in django dash admin and then i want to start a new project so start project and then i'm going to call this project core and then what i also want to do is not to forget the space and then a full stop here that's going to make the project folder inside of this folder that i built and not in an additional folder there we go so if i didn't use the full stop i'd made a new folder called core and then core would have been inside of that so i just didn't want to work that way i prefer to work this way so i've got the manage pi file now available that's going to allow me access to the django admin and functionality and then i've got the core my core application so i want to go ahead and build a store so now i can use the pi manage pi command to now start a new app so i'm now going to start a new app and i'm going to call this a store there we go so you can see now a new folder has appeared excellent so this is where i'm going to build up my model my database and so on so i'll just go ahead and in the settings of core i'm just going to register this application so django knows to scan this project folder store for any model changes any models any database files that i build so let's go ahead and uh add it to our list here now you can add it to the top or the bottom at this point it doesn't really matter so there we go so i've now registered our store so it would now detect any changes i make when i build some models so now we need to build some initial models for our project so these models these classes that we're going to build these are the instructions for django or the templates for django to then create the actual tables in our database so we're going to describe the tables in a class to build tables in our database so i've already pre-coded this now i know some people prefer me to type out all the code but i just think it's easier to work this way if i just describe the code in a block you can then pause the video have a look at the code write it out and then rewind if you need to understand a little bit more about it again so plus it just makes it the video a lot quicker if i were just to explain each block at a time plus i find it really hard to explain and type at the same time and i don't see there being a need for me to have spaces in this tutorial whereby i'm just typing it seems like a waste of time so let's go ahead and build a new class called category because we're building a shop here so we need some tables for our products and we just need to think about think about how we're going to manage those products so we're going to need two tables initially i think or at least we can start off with two tables category table so that we can record the categories that we have in our shop for our products and then we're going to create a products table and then of course connect our products table to the category because we want to be able to define a category within our product but we know that there's going to be multiple categories now if you're not familiar with databases this is going to look and sound and feel pretty strange um it does help if you do have some kind of database knowledge or you're at least able to understand the basics of database in terms of tables and just basic connectivity thing things like foreign keys for example it does make it rather hard to to work in django initially if you're not too familiar with this and modeling your data is really important to make sure that later on in the product in your development that the data is set in a way that you don't have to kind of go back and make so many changes because a database is something that you don't really want to make too many changes with later on or we want to try and avoid them as much as possible because it can be quite a long-winded process making changes in your database so at this stage there are some other additional tutorials that you can have a look at so the models kind of series and the orm series that's going to help guide you on utilizing models in django but let's just go ahead now and flesh this out so here we're making a new table essentially here but we're describing it here with python and django's going to do the rest for us so we're extending from models that's going to provide us access to kind of the functionality that we're going to need to build a model and describe a model so first of all our category so what do we need to record about a category we need the name so here we use a name of the category and then we're just going to you can see this is a variable name and then we're going to basically describe the data type of on of our name which is going to be a character field means that we're going to put typing characters inside of this field and then we're going to describe some additional additionalities here um so max length 255 db index true okay so we've got two parameters there now there are a number of different parameters um that we could include here um so if you're not too sure what these are just head over to just copy and paste these into the django documentation and you'll be able to find out more about all the different attributes so let's go ahead and also add a slug so in order to get to the category we want to kind of type into the browser so we want to be able to kind of type into the browser here at the name of the of the category so for example django so this is what a slug is so this here is referring to this the slug name so what name are we going to type here in order to get to that category resource because we want to show all the items in this category for example django or react or whatever so this is what the slug is for and that's what we why we've included it right here so you can see i'm using a slug field this is obviously different from a character field now a slug field this is just going to be behind the scenes describing what should be inside of this field so a sludge field shouldn't include special characters that you can't include when you type in uh to you so for example here we can't use uh special characters like this for example so you would imagine by defining here the slug field behind the scenes that's basically going to ensure that whatever you type here kind of meets that formatting style when we enter into a database so here we go ahead and we do max levels again now this time included this unique equals true so unique means that in the database here there should only be one slug with for example the word django because otherwise we have a problem potentially we have two categories with the same name so when we're trying to actually direct um users to the category django isn't going to know what data to produce or to display because there's going to be two categories with the same name so we want to make that unique so these are the type of things that we can start to add into our database okay so second to all the different fields that's pretty much all the fields that we're going to need to begin with here we have the class meta so this is additional kind of metadata data about data that we can include in our project or sorry in our um in our model so basically just more instructions that we can provide django about our model here about our table so here is just um the plural name so i'm just setting the plural name for category because what's going to happen is by default django is going to put an s on the end of this obviously that's not the correct way of spelling categories so we can override that setting that's what i've done right here so behind the scenes and when we go into the admin area it will say categories and not category for example if i remember i'll just showcase where that might be utilized um so down here and we've also got this absolute url so these are just other parameters which are explained a little bit later um let me just zoom out so you can see it for example um so i'm just going to remove that for now we'll add that later so finally what we're going to include is a dunder string method here so what's going to happen is that we will return data from this database now by default um we return the data now this data is going to have two components so if we if we return that data how can we refer to that data that's returned so what we can do is basically just specify how we can [Music] or we can set the default name that gets returned when we return the data so if we return one piece of data from this database table um we could reference it by in this case the name so again i'll point this out and i'll show you where that's being utilized and how that's utilized and how it's useful later on in the project so next up we have our product table so this is going to look a little bit like this so class product this is our second table now we're going to need a double space here because it's a class so just following this style convention uh python style convention so we've got product models model again so extending from model and now i've tried to utilize as many fields of varieties here just to give you a flavor for different types of fields so let's go ahead and first of all we're going to add a link to we're going to add a link here so a field called category and this is our foreign key over to the category so what we're saying here is that we're going to build a load of categories so 10 20 30 categories now we want to associate those categories to the product so we don't want to add a new field here and add the word category and add different categories because we want the information to come from the category table so we'd build a link between the product and the category table so that we can automatically select and include data here in the product which is referenced to in the category table so we had a category here called django where basically you can make a reference to that with a foreign key okay so we can see here that we've got a related name and that will make it easier in our program to kind of name these relations or identify these relationships in different tables and we've got on delete equals model cascade so what's going to happen here is that by default here we've set to set this up with model cascade so what's going to happen here and there's a few different settings here in the on delete and it'd be worth going into the django documentation to have a look at these settings so i won't go through them all because that's going to take too much time but here essentially what's happening is that we ca we create a category now the important thing here is if we don't have a category we won't be able to have a product because there needs to be this this entry this field needs to be populated in the database at all times so there has to be a category so when there isn't a category it means that we're going to have to delete or we're going to delete all the products that are inside that category so here we're just spelling out what to do or what happens when for example we do change the category data so if we do delete it what happens to the product so there's a few different things we can do here and understanding a little bit more about this referential integrity and databases would be useful but hopefully that gives you enough information just to get started if this seems like too much information don't worry about it let's just enjoy developing this application getting something working and then you can fill in the gaps later okay so we've got that in let's go into the next one created by so what i'm going to do is the product is going to be um added to the database i want to record who actually made that data so what i'm going to do in a second or what i've done here is i've made a foreign key to the django default user table so again this is building the connection to the django user table i need to bring this in i'll do this in a second so we've got access to the user table so the default user table has all the users that you might set up in your django application so what i'm doing here is i'm building a foreign key to that table that django builds automatically for us um and i'm basically then going to record who is actually made that product so again i've got the on delete model cascade so when i delete the user from the user table will also delete the product and then i've got a related name again you can see here i've just put it in a different order to show there isn't really any order that you potentially need to follow okay so next up we've got some other parameters so we're going to go ahead and write the title we're going to need a title of the product the author so we can also add a default so maybe um remember this is the auth of the book not the author of the product so here we've got created by this is the author of the book so by default if someone doesn't type something in we can include some data so that's just an example of that so you may not want to follow that like i said it's just an example so here we have the description of the book now this time i'm using a text field which is a field that allows a lot more text for example than a character field potentially um so max length 255 so you'll find that the text field in database terms has a maximum character length of xyz you can see i've used here um because there's going to be a lot of text so typically this is quite a large field allowing you plenty of space to write text so that's a description so now i'm also going to bring in an image i want to record an image in this product so the reality here is that i'm just building a very simple application now i wouldn't necessarily bring the image in here because i would want to make a new table maybe make an album table and connect that all up so just to keep it simple for now we're going to assume that the product only has one image because we're only we're only able here to store one image potentially so let's go ahead and just add this for now and later on maybe when we think about additions um step 4 5x6 etc we can do that at a later date so here's is how to import an image notice it's an image field so django is going to handle that as an image field that's going to allow us to upload images and associate them to this product now what's important here is that we're not actually storing the image in the database we're storing the link to the image and we're going to have to set up that link system shortly in our django project to allow us to upload images to a specific file now here you'll notice that i've added the attribute here upload two and then i've defined what folder to upload these images to okay so let's go ahead and add the slug so we know a little bit about the slug now so the product is also gonna have a slug and which is means i can type in like the product name here and that will then be utilized this piece of information here can then be utilized this slug to actually present the individual item on the page so that's how we're going to use it and then we go ahead in stock and this is going to be a boolean field so a boolean field is a true false field i i set the default to true so is it in stock or not sell it true or false so that could be useful information is active so there might be some products that aren't actually active to buy maybe for example you've run out of stock so that might be is stop so depending on the situation um here you might change these parameters based upon what stock you want to sell for example so you need to think about what data you want to store to help you in the system and record and manage and track your data and your products that you're trying to sell okay so we've got created and updated so what we've got here are two fields uh one is going to be utilized when we actually build a new product so the auto now add that is only going to happen once so that's only going to be fired off once or triggered once when we make the product now what we want to do is if we make updates to our product maybe we want to record that somehow so we can do that by potentially creating an updated field and record the updates utilizing auto now so that will be triggered every time we make an update for that particular product so that's the difference there so let's move on and now create some meta again so we know about the plural name now we don't really need that here because django will put the s on the end so that's not really a problem but we've added that in and now i've added an ordering so ordering here we can order when we return all the data from this product we can specify what order we want that data to be in and here we've got for example the minus sign then created so here we can sort by ascending or descending and we can then also specify how we want to order or what we want to order it on so here what we're doing is we're ordering our list that gets returned from the database in descending order so it means that for example the last item that is added to the database is shown first so i could change that by doing it this way that means that all the data will get returned in the order it was actually placed within the database so the first one would get shown first so typically you want to order your data in descended order typically because you want to see what was the last item that was actually added to the database first right so let's move on and have a look at the dunder method so here we can see we're just going to return the default string of the title so when we return a piece of data it's going to say the title of that data and there we go so that's our models it now completed or our default set of models so over time we can add to this list so i don't recommend you start now adding loads of data to this i am going to be swapping and changing this around so it's best just to add a small pieces of information until we've completed the product or project sorry and then start adding lots of products so once we finish building our model so let's just save now we go ahead and migrate now we're not going to be able to migrate this because it's going to cause an error so let's just go ahead and do this so we've got two steps manage pi and then we need to make migrations so that's going to prepare this code in a format so that django then can build the sql to build the tables in our database and that's all done automatically so you can see here there's two problems i didn't define the user so remember that i brought in and i'm saving the user information as part of the foreign key so what i need to do is just add that into my database so i need to import that in so i'll go ahead and do that there we go so i've imported the user model from the django contrib off models so this is the user model that django automatically builds for us so the second problem hopefully we'll see this that we're going to have so let's try this again you can see here that we don't have pillow installed so you can see here there's a dependency for this image field um needing pillow so pillow is a package that we can install that helps us manage images within our product project so let's just pip install pillow so it's nice and simple it's nice small package so now that's installed so we can now go ahead and do the make migrations so like i said that's going to prepare a model or the data let's go back into here so we're going to store we can see migrations inside of here we've got the initial so you can see here what's happened is that django's prepared that class in a manner or in a fashion that would that can now be utilized to actually convert into sql and build our database so it's already popped up here a database there's nothing in it just yet so let's go ahead now and do py manage pi and then migrate so that's going to migrate it's going to take this file and any other data models that need to be built because django has some default models that it builds and so you'll see a load of models being built and then it's going to build up this database so let's just migrate there we go so you can read through that and you can see that all the tables have been built so now what we can do as long as you've got the extension i mentioned earlier and the extension you can now go in into the uh code here sorry into your database file right click open database and then open up the tab here and then we can then have a look at some of these tables so the product table let's just right click and show that table and you can see that there's nothing inside of it at the moment but that's how we're going to access our table so let me just tab put this tab over here so we can access it in a second okay so now we've got that set up we can now start thinking about adding data to our database so now we're going to configure in django the media folder and that's going to allow us to store images that get uploaded through the admin area in this case so it's a media folder that allows us to store images initially within our product in our project i don't see why i keep saying product in our project so what we're going to need to do is let's just uh zoom out here of our project and i'm going to right click and create a new folder i'm going to call this media so that's going to be our media folder that's where all the items are going to be stored now just looking down here you can see our image is going to be uploaded to a new folder called images inside of this media folder now we don't need to build this this is just going to happen automatically django is going to do that for us so we don't need to worry about that okay so once we've done that what we need to do now is we just need to tell django that we are using the media folder so what we need to do now is just head over into our core go to settings and at the bottom or anywhere you want really ideally at the bottom and we're just going to add two new statements here or variables um one's going to be the media url and the other is going to be the media root so these are two settings that we need to configure to allow our media folder to work now we are working locally so this isn't referencing development sorry production server so we are working locally so we're going to set this up so it allows us to work locally with the media folder okay so you can see what we're doing is that our browser so to access on our web page the media folder we've set up the url like this and so that's the reference point and you can see if we go into the folder structure here of our project project again product project um you can see the media folders there so it's kind of pointing to that folder so behind the scenes django might utilize it um the media folder we might reference it within the background of our server remember that all this code is running on the server and not the user's front end on the browser so when this runs it needs to know where that media folder is so the media root is a path a direct path so here i'm bringing the os module so i just need to add that in so i'm just going to import os so this is a python module that kind of allows us access to the uh path or the root directory or the directory system in your operating system and you can see here i've got path join and then i've got the base directory of our project and i'm going to connect that up to a media to build the actual link to the media folder so that django can access the folder okay so those are the two settings so next up we need to configure the url so this is going to be for for development only so you'll need to go over to your core and your urls inside of here i'm just going to remove all this inside of here we're going to need two settings and we're going to need to just import some resources so we can access the settings file um not those we're going to need to access the static and the uh the settings so that we can kind of set this up so we import those resources in and then we can go ahead and then just configure it so that we can use the media folder so you can see what's happening here is we're kind of adding to the url patterns if the settings equals kind of debug so while we're working in development in our development area we've got debug equals true and that provides us an additional information when we make mistakes or when we um have mistakes in our project and we can kind of view them here in the browser now of course we don't want that to happen in in our production environment so we turn that off so basically why that is true we're going to be utilizing the internal kind of we're going to be utilizing media in our development environment so we kind of set up this media url and here we're basically just defining the fact that we're using media url and we're also utilizing media routes while we're in development area or while we're developing here in our local area okay so now the media folder is accessible in our django project now let's head over to the admin configuration so we can start adding some products to our database so let's head across to the store app and open the admin file so here we're going to detail and tell django what models we want to access in the admin area so if you haven't used the admin area before this is a function or this is a service or feature that django has pre-built in and available for us so that we can administrate add new files to our database and so on so we just need to tell it what models we want to use so we can start adding data to those models so what we need to do is just go ahead and describe what it is we want to include so first of all we need to we're going to need access to our models so let's do um let's bring our models in so from models so we use the dot to refer to this directory and then models is the name of the file models so that's what we're doing there when we bring these imports in for this import and then we're basically going to describe what models that we need access to and there's going to be two of them because we've only got two models category and product so now to actually registering our model so there's a number of different ways and we can do this so this is just one method um using our admin dot register and then the name of the model so that's going to tell django um that we want to register this model and now we can add some additional information so i built this uh new class here uh and i'm just going to call this category admin for no particular reason and you can see what's happening um here is that i'm just extending from admin to model admin so i'm now going to give it some more instructions so i want to basically um edit information or want to kind of display things in a very specific way in my admin area so there's a whole host of different things we can do here this is just one parameter that will actually we can set up called list display so here i'm going to tell django what in the list why what features or what fields i want to show in my list so i just want the name and slug that's all really it's available here in the category and then also what i can do because i'm using the slug now remember the slug is like an identifiable keyword i can type into my url so i want that keyword to be similar to the actual category so why not just use the category name so what i can do is i can go ahead and create something called a pre-populated fields so i can specify fields that get pre-populated or populated based upon whatever i type into another field so the slug field will get populated automatically when i type something into the name so that's what's going to happen there um so i can then go ahead and now just uh set up the product so same kind of code here i'm going to register the product model and then build a simple class so this class here is going to allow me then to extend again and then from here i can go ahead and just manipulate and change what it is i want to display in my list i can for example create some filters so there's going to be a lot of products here so i want to be able to filter the page so i can go ahead and create some filters django would do the rest for me so it knows what type of data this type of data is and it will set up the filter for me automatically now if you want to learn a little bit more about the admin area there is an admin series so have a look at those tutorials i'll go into a little bit more detail so in addition to that i'm going to have a an edible edible list and then i'll also add some pre-populated fields again okay so you can definitely go and check out the documentation what this um means what this does in a little bit more detail but it's pretty much self-explanatory potentially um in some cases at least i do apologize um if it's not self-explanatory um i probably should have said that it's self-explanatory to me because obviously i know um what this does so i do apologize there so now we've done that we've now registered our admin um models so let's go ahead and actually add a new user so we can actually log into the admin so let's create a new super user so i'll type in uh py manage by create super user and then it's going to ask me for a username for my super user email address i can keep blank password and press y because i'm using a very short password of just admin okay so now i've done that i've added a new user i can now go ahead and just run the server okay so let's go back in so to access the admin area i need to type in admin and then username admin password admin and press a category now remember i need a category in order to make a product i'm not going to be able to make a product without a category so we can just show that created by title blah blah it's going to say there's an error because i'm going to need a category so i can just add it here or i can go back into my categories here and i can add a category here so django now notice that the name the slug is being pre-populated with the name so whatever i type in here is getting pre-populated so that's what that setting did in the um the admin file so i press save there and then i can then go back to my store products and then add a new product so i've got a category i've got a user remember the admin user i've just built and then i can just make a new um a new product so the image um let's go ahead and do that so we've got this image here called django and we've got a price 20 pound 99 and it's in stock and it's activated so you can see in a second when i press save um that all this data here all for slug price in stock created this is the list of the product and that matches up with the items that i've kind of identified here in my list display for example um so in addition to that if i now go into my media folder you can see there's a folder now called images and the image i just uploaded is right there so you can see that everything is working nicely so in addition to that if i go into my sqlite database which i the tab i had open before so right click on my table show table you can now see i've got data in my database and you can see how it's um stored and referenced in my database there we go so one thing i didn't mention was django automatically builds an id an auto incremented number that's a primary key associated to all the different fields so this is a number that auto increments as we add more data and it's unique to each item which means i can use this number to access this data somewhere else in my program if i wanted to okay so we've got started we've created created a new project and we've added some models and we've now configured the admin to allow us to add new data so now we have this optional element here testing so i'm going to just take you through the steps of basic testing in django introduce you to testing like i said you don't have to do this you can just skip ahead to the urls and carry on there that's not a problem but if you're interested in testing i do recommend that if you're not familiar with testing to start thinking about testing your code testing your application is obviously important to check for errors that you might not be able to test normally for example through the browser of course it can also save you time because you don't need to open up the application and test all the different elements you might have in your and all the features or you might have in your software so testing is a an important stage of any development to improve the quality of your application so here in django django creates essentially a wrapper around the standard python library unit test so the unit test unit testing framework is a python standard library you can go ahead and read a little bit about it if you wanted to of course so this provides us all the tools that we're going to need to run tests in our application and we can access this through the django wrapper around this python standard library so that information might be a little bit abstract at this point so let's just go ahead and do some simple testing so here in your application you may have and you will have by default sorry a file called tests.py so that file is created by default there isn't really anything in it there isn't any tests to begin with at least what i've done here is i've just created a new folder structure for my tests and that allows me just to separate my test from the the main application folder so just makes it a little bit tidier to find my tests and run my tests so you can see here inside the test folder i've created two new files and i can also then as you can see logically kind of separate my tests into different files and maybe i can test different features of my application so here i'm testing models and my data models and here i'm testing my views so here i can kind of logically separate my tests into separate files so in django if i want to run a test by default i can just use the manage pi facility and just use the keyword test so that's going to fire up a nice test here so you can see that django can't find any tests therefore it run zero tests in zero seconds but everything's okay and you can see that it tried to run tests so by by default django is going to try and look for files inside of your folders and your project files for files called test and if it does find a file called test it's going to then try and run those tests inside of that file now notice previously i do have a file here that begins with test so you might have assumed from basically what i've just said that this test file or these test files should have been run so the reason why it wasn't run because we need to include an init.pi file inside of our new folder to ensure that python essentially looks inside of this file or folder sorry for any files so now i've done that let's go ahead and just run the same command again and you can now see it's run a test because i do actually have a test already created in one of these files so you can see what happens when we run a test notice that there's a dot here indicating kind of a block of tests that we've run for example so round one test and this is how long it's taken and everything is okay so the test i run is working okay or should i say the test that is run has passed that's probably more correct so it's not always easy to know exactly what tests you actually need to run at least to begin with so what can help you along the way here is to utilize coverage which is a package which essentially scans your files and looks for where tests might be required so i think it's always a good start to utilize this program helps us kind of visualize and identify where the tests are needed so let's go ahead and pip install um coverage so i've already installed it so it's going to say i've already installed so i've got that running so what i can now do is run coverage so instead of running manage pi.test i can run coverage run and then manage.pi and then test so again it provides the same information here but behind the scenes coverage is scanning all my files essentially and looking for where tests are required and i can then pull up that information or should i say i can see the results of that by typing in coverage and then report so that will give me an overview there we go so you can see this uh look for all the files in my folder here my project folder and it's found where potentially tests are required and these numbers here uh indicate how much testing has been completed so 100 percent means that everything has been tested and anything below that means potentially there is a test that's required but notice here it's finding all these files inside of the event folder so it isn't my concern what's inside of the event folder it's not really part of my project this is just part of the virtual environment so further at the top here we start to see some of the files i have in my project and there it becomes a little bit more important to take a look at what code potentially requires testing now this is a little bit messy so what we can do is we can omit any kind of files or folders that we don't want to run with coverage so let's go down to the bottom here let's just run this command so coverage run and then you can see here i'm using omit and then i'm going to omit the event folder and then just run the tests as per normal so i'll do that again so the outcome is the same because i've already created a test which i'll show you in a second but now when i run the report it's a much more structured report without the vamp virtual environment folder so here we go so the manage pi file here is a django file so it's not really my concern about testing at this point um you can see that the models file requires two tests essentially i was indicating potentially there's two tests that are required so it looks like that's my main focus at this point now what i can now do is i can run not the report but the html and that's going to create a new folder in your project called html.com now inside of here is an index file and if you open that up in your browser it's going to look a little bit like this so we can kind of get the overview index let's just run that index again so we get the overview of the tests that are missing and then i can drill down to the models and then it then indicates the tests that are missing in red here so this is suggesting that i need to just check or make a test to ensure that what gets returned from the database uh the default name is the name of the item that is returned so that's something that we can definitely set up and i'll take you through the two tests that we can perform to to achieve that now this is where it gets potentially a little bit more complicated um but essentially what we're trying to do here if you've not done testing or neutral development is that generally in our program we make logic we say that if um one plus if one equals one uh then do something for example we make conditional statements to run code we create logic to perform actions and to return data and what we're trying to do in our testing is to ensure that the information that should return in these conditional statements or should return on the page or the data that should be collected from the database and calculated together and outputted these type of this type of functionality and logic that we're building in our software we want to test that to ensure that what should be the outcome of that is the outcome of course it's not just in our software testing to ensure the correct outcome occurs we can also test to make sure or to test against if the wrong outcome is also produced so let's take a look at a simple test so inside of our models here test models file you can replicate this you're gonna see a single test so this is essentially how to or the anatomy of a very simple test here so you can see django from django test we import test case so test case like i suggested at the start is a kind of a wrapper around the python standard library but django provides us then some django facilities that we can use and it ties up nicely with the python standard library okay so when we run test what we got to imagine is that we are running tests um on our system now the tests here can access all of our views all of our logic etc but generally what happens is that when we run tests we run tests on a separate database so we've made a database already but we don't run tests on our production database or our main database the testing set up here we'll automatically make a copy of that database or the structure of that database and in our tests we're going to have to create some separate data to run tests on so similar to what we do in the views for example when we access data in our database or models we need to import these models in so our functionality in this page here can access our our models so you can see here from this store referencing our application models import the category and the product model so we import that in now we have access to those models so now we have those models and the testing when it starts up we'll create a copy of that and then produce a a database which we can then insert data into so you can see here the first line we have a setup so typically you'll see a setup so the setup normally is a stage in the testing which you then create your data which you then want to test against so what we've done here is in the category table we're using the default object manager and we're going to use this keyword create to create some data now in this model here if you remember in the models file we have two fields name and slug so what we've done here is we've set up our data to insert two pieces of information in the same row or to make an instance name django slug django so that's going to go ahead and create an entry into the database into our testing database now we've also kind of created this into a variable here so notice that we're using self so if you're not familiar with self i just kind of generalize what this self is for um at least to begin with to kind of get a general picture here where you can see here we're setting up self.data so in order to make this available in other functions here we use self to to allow access to this data from other functions and so on so it just allows us to kind of access other data within other functions um throughout our testing or throughout our class here so now that we've created our data we can now access access it within our test so notice the testing naming conventions if and where possible always try and name your tests something that is easy to understand other people can read it and understand what it is that your tests are going to be testing so this is an actual kind of start of a test here so we've set out a class we've set out our setup so this won't get tested at all and now we're going to create a test and notice our test begins with the word keyword test and this is going to be a category model entry test that probably doesn't make sense so here you can see we've got some a commentary here this is a testing the category model data insertion type fields and attributes so what we're going to do is we're going to basically just take this data here and we're going to test to make sure that the name and the slug these fields match our model which they do of course so if we were for example add some more add a new field here of course that doesn't match our database so we can test to see if that is going to be inserted correctly now also in our database remember we set out some different attributes for example parameters that for example the name was a maximum of 255 so that's something we could potentially test and to check to see if that is being captured for example now this isn't probably a test that you would want to build maybe because this is really just testing the django um the software package really also the the django framework so we don't really potentially need to test this remember we're only going to test our own logic that we create um so this is just to show case a simple test so we've got our test set up here now in this new function we bring in self so make us make it available the self available the data here and then you can see we create this new variable and then we add the data here from our setup so we now capture this and what we're going to do is we're going to run this by the database to check to see if this data will get inserted or not into the database so we're going to check the data type fields essentially here so this last line here is actually going to perform the test or a test so what are we testing well essentially like i said earlier if we make a for example an if statement um if a equals one do this else if a doesn't equal one do this for example so in that type of situation we want to test to make sure that if a equals blah that it does actually perform the action in our code so if it does perform that action maybe the outcome of that is true or false might be a boolean or the outcome of that kind of statement that we built might be a number for example so it's those type of things that we're trying to test here so we can do that through these uh special kind of i'm gonna say commands here they're not commands but um so this is a kind of a library of different asserts that we have available and this is going to allow us to kind of perform testing actions um on data for example so equals sir equal um assert false so for example i'm going to run this i'm going to run this test here so what i'm doing here uh is instance so i'm checking to make sure that the data here actually fits this is my model reference so what's happening here is that his instance is going to take the data this is the data here that i'm bringing in over here and i'm going to test it against my model if the data fits if it's the right data type etc then what's going to happen is it's going to return true so what i'm going to do now is use a cert true basically if this returns true this test if it does return true it's going to be captured as true therefore assert true equals true so therefore the test is run successfully now i can just use assert false for example so if i knew that this would return false then i can double check i can check against that against the assert false and then the test would return as complete um as successful and there we go we've created a simple test so you can see that there's a number of different asserts here and we can check inside of the html for certain code we'd do that less or equal then um not almost equal we've got not in not an instance so we can check to see if something's in instance for example um so you can see that there's a lot of different things here if i were you starting off with development in testing sorry i'd have a look and get familiar with all of these here as someone who's going to do some testing because this is going to help you understand or help you kind of develop your tests and help you test different aspects of your software okay so i apologize if that was too simplistic or uh too difficult let's just go ahead and continue and i'll try and explain for those who um are finding this a little bit difficult here hopefully you've got an idea from what i've just said what is happening here once we start doing some more tests you'll get a general picture and as we start to build our program and do more testing on different things and once you understand programming a little bit more if you are new to programming uh this will make more sense of the type of things we're testing and then of course why we're testing so that's a basic test and so when we run our test here um when we run our tests uh you can see we have one failed test now um so the reason why that's failed is because you can see this it just says assert so let's just change that back to true um so you can see it also should give us some information here is identify where the problem was in our test so let's just do that again and you can see that we've run one test and it's all okay so let's go ahead and start building some simple tests here for our two missing uh elements that require a test so you can see the category and the product the default return is the title so let's go ahead and test to make sure that when we insert data into our database and recall it when we recall it the default name for that data is going to be the actual kind of name of that item right so back in our test model here let's make a new test so make a new function here called test category model entry i suppose i could have named that model return for example so we're going to test the category model data insertion type fields attributes uh needs changing we're going to test the category model return name that's what we're going to do so we already have our data up the top here in the setup so we can utilize that again so we're taking that data and this time we're running a sir equal so what we're saying here with this test is that on the left hand side should match the right hand side so equal so the string data so basically the data that gets inserted into the database here the name the default name should be django so here we run this string of the data that's the data so the default return because we've set up that dunder string method we returned the name so this is going to return django and we're going to test it against django so it should be true so let's just um make an error first just to check that so we run our tests and you can see that we've got a failure here um so it kind of identifies for us the failure so django doesn't equal django one so it's clearly showing us here the return django and then the fact it doesn't equal not equal django one so let's just go ahead and just make that true and we run that again and everything is okay so remember that django is being referenced here as the name and in our models just to double check um it should be returning the self name by default in the category so now we've done that we can now do the same thing to the to the other model to our product model so this is a little bit more complicated our product model because it has more fields potentially we need to ensure that we've got our or we've described all the mandatory field data that is required to actually create a a record so let's go ahead and create a new class here new set of tests for the test product model uh we bring in test case again we set up some data so here we're going to bring in the category remember if we're going to build a product we're going to need some categories to actually connect to because we're using the foreign key so we need to think about that as we go along so here we also need a user um so we're going to need to connect to the user objects [Music] for the the default user model so we're going to need to bring that up in here at the top in a minute so now we have that in place we can now add some data so here you can see we set up some data again so product this time database the product objects create and you can see that i've created a category id equals one now let's just confirm what's going on here so why does it say category id and not category because if you remember in the model it just says category so why id well behind the scenes if we take a look at our product table again you can see that in actual fact django has added the id um to the name up top here category id so you can see it's added the id component to that name so we just need to make sure that we're using underscore id to reference this field you can see it's using numbers and not the name so the category one represents the first category in the category table which is the name django so we're referencing the category table by the id and not by the name django in the category table of course there's only one item at the moment inside of our category table or there will be when we enter it inside of here so that kind of sets up that little bit there so you can see that we've already created a sorry in the categories we've created a new object we've then created sorry a new admin user so we've done that and now we've kind of connected to created by now remember also created by in the model users just created by but the database is going to be adding the id here again so we need to kind of follow that that's going to equal one so that means it's user one in the user table which we know there's only one user and that's admin so here we're making references via the id of our tables and to build those foreign key connections now i've gone ahead and added slug price and image so these are all mandatory fills that are required in order for our data to work now if we were to run this without adding a particular field that is mandatory it will tell us in our testing that we need to add that data so i'll go ahead and just add in the add in the user um table so we can access that and that should just be about it to create some data there for our um our products model so now we can build out our test so let's go ahead and create a new function we're going to call this test products model entry so similar to what we've already done we're just going to copy the same type of format here so this is going to test the product uh the model data insertion type field attributes etc so we're going to bring in this data here um that we've inserted in the database now just because it's in this variable here it does actually get inserted into the database into the testing database that we've created here um so we access that and check to see if the instance um is compatible uh with the product whether our fields and attributes match our product table so we do that first that should return true if it's correct there we go we're using insert true and then we can go ahead like we did before and test the string dunder method to make sure that the default return is the the title in this case so we're returning um the title if we go in our model at the bottom here the string should return the title okay so that should return django beginners and there we go so now what we can do is just run those tests out everything is okay and now what we can do is just refresh our coverage so we run the coverage html again we can refresh this page and you can now see we have completed all the testing we're 100 so that was a brief introduction to testing we've completed our testing now for our models we will dip into testing again and progress with the testing throughout this project so as we go through we'll learn a little bit more about testing and hopefully you'll become a little bit more familiar and confident at testing your application so let's get back to our development here we're now going to configure our urls and our views and then obviously connect this to some templates so say obviously we're going to connect the views to our templates and that's then going to be distributed to the user so that they can see the website that we're going to be building so for those who are new to django and want a quick overview here on what's roughly going on so i always like to try and paint this picture in your mind uh to give you an overview of um what the general kind of workflow here in terms of a user accessing information from your django application so let's remember that django is always working in the back end in the server so typically the user will open up their browser and they're going to type in some sort of domain which is then allows you to kind of access or send a request over to the django server so django is going to pick this information up or this is a html request sorry so we're going to send a html request to django okay so what's going to happen is django is going to look at that request and then it's going to try and access the url that you've typed in here and that url needs to be matched against one of the urls that we need to build so that's typically the first thing we may be thinking about what url we're going to use so if django does make a match the url that you've typed into the browser to the url that might be in this django system here your application what happens then is that your url is then attached to a view so the view think of the view as uh the glue that sticks together um the data from your database so in our view we're going to get the the data from our database whatever data we need for that particular page that the user wants to view so this is the view and in addition to that in order for the user to actually see the page we're also going to need some templates so also what happens is that the template will get connected here in the view and then that information can then be sent back obviously to the user and what the user sees is obviously the template with all the data inserted onto it that needs to be on that page in their browser so we can work in this way in that we can build the url first and then the view and then the template for example but it doesn't really matter as long as you've got a template a view a url and some data that can be all placed together nicely in the view and then the template will be sent back back to the user with all the data inserted so first of all let's just uh now you've got that picture in your head so remember i said that the user makes a html request by typing in something into their browser a url into their browser and that request um is attached to some sort of url so here for example the url would be this here so django needs to make a match for this url so that it can then be sent to a view to perform some sort of action so what we need to do in our application is we need to think about um what views we need we need to think about what urls we're going to need for this system so we're going to need a url for the home page that's just going to be slash the default or nothing slash home page the index so that's going to be a home page so then we're going to need some sort of category page maybe and then maybe this type of format so we might need to make this type of url for category django that's going to show then all the django books we have then we might need for example an individual page for the individual item the individual book so we might sometimes maybe um book and then for example the name of the book so we might need to build this type of structure as well to actually view the book so let's just do this one by one let's just start off by creating the home page now what we can do here to manage our urls is we can manage our urls within the application so in the core we have urls so we could put all of our urls here but it can be better sometimes to separate our urls into the application level so what we need to do to do that is that we need to include or user include and basically what we're going to do is we're going to create a separate let's bring that down we're going to say create a separate url file inside of our new application store here and basically we're just extending this list so let's just create a new file called urls urls.pi and now what we need to do is just make a reference here to tell the core django application to also use anything that's in this url list so it's also going to check any urls in this list here so first of all then in our core uh let's just add a new path here so you can see that um this is going to be the root directory the home page so nothing is here include so i'm basically bringing in an include here so i've brought in the facility for that and you can see that i'm linking to store.urls store.urls and i'm going to give it a namespace so namespace will allow us later on in the program to kind of access our urls in a more convenient way when we're trying to access urls to make links for example on pages or individual items okay so head over to the urls in the store so we started building this so from django url's import path so we're going to create some more url patterns here uh just one to begin with um so we're going to need to connect our url to the views so from dot dot referring to this folder here import view so that's going to import all the views from the views potentially um so or allow us sorry access to the views in the view so um we're going to get this as app name store now remember here we had a namespace store so we're just kind of matching that up uh and connecting that up to this list here of urls the app store equals store so basically what's happening here is i can somewhere in my project essentially say look at store referring to these urls here and not anywhere else and then access something within these url patterns so i'm going to create a simple path here again it's completely blank so this is the root directory and then i'm going to connect it to a view which i haven't built yet and this view is going to be all products so i could just call this home page for example and i'm going to give this a name of all products so now i've got that i now need to connect this url to my view okay so heading over to the view this is where i start to connect everything up now in my project so i'm working with models so i need to bring the models in so i have access to them so from.models dot referring to this folder models import the category and product model so that's the first thing that i need to do now remember um my function name should be called all products so let's create a new function here called or products and basically what i'm doing is i'm taking in the request so at this point you can think of this as like i explained in the diagram this is the user's request information for example so let's now perform some actions so on the home page i'm trying to build a home page which has all the data from my database so that's what i'm going to show and there's going to be a nice little list of all the books that is in my store now of course over time i probably won't want to do that because i might have thousands of books and i don't want to show that on the home page but for now we're just putting that on the home page so the first thing that we need to do is grab the data that we're going to want to show on to the home page so we do that by running this product.products.org so this is a query this query is equivalent in mysql or sql sorry as select all from products um sorry actually i need objects um.all so this is basically running um a query on the products table and collecting all the data so from product select all so it's pretty much that statement in sql so now i'm going to save all that data from the database inside of this products variable and now what i can do is i can make that data available on my template so what i need to do now is return so to finish this off we're going to be utilizing uh return render and request here so essentially what we're saying here in this return render request here is that in django render is used for loading the templates so we load the templates um and it's essentially it's a template shortcut so rendering is a process of gathering the data so what gated data do we need to gather so that's the data that's going to be returned here and load the associated template so that's essentially what we're doing here with this last command is we're basically telling django to get the data get the template um obviously pre pre-prepare the template um with the data and then obviously send it back to the user so the key parameters here are obviously the template that we're going to use and the data that we want to display on that template so let's go ahead now we've got a template so it looks as though we're going to need to set up our templates so we're going to make a new folder here called templates so let's make a new folder and inside of templates we're going to use the you can see we're using store here we're going to use the app name to kind of separate our templates we may have more than one app for example so let's go ahead and create a folder called store and inside of store we're going to have a new file called home so this is templates we can also use within the application locally and within the store application but we're going to put it into this one folder here html so that's going to be our home page so now that's all set i've just typed in home here into my html page we can close everything else up and let's just run the server and see if this works so if there are any coding issues at this point it will indicate that of course so let's just go back into our home page now we're going to refresh so go back to the home and it says template does not exist so the next thing we need to do is actually tell django where our templates are stored so what you need to do go over to the core and settings and you can see here on line 47 it describes the directory for the templates so we can make a little change there so base directory slash templates that's where our templates are going to be so obviously you can change that if you want to to another folder that just happens to be where my templates are going to be obviously it's extended with store and by that i mean if we go into our store and our view remember we're saying go inside of store and home so we don't describe the folder templates here that's kind of the base directory and then we go into the store and then html page so with that in place i just make sure we save now we go back into our project and refresh and there we go so that's all working so this is where we start to talk a little bit about the django templating system or the django templating language now you can of course go ahead to django and have a look at the template language and there's a fairly short page here which you can just read through which will give you the basics of the django templating language um so what we can do here you can see is we can enter a range of different kind of tags and variables and logic etc within our template to create a kind of structure of templates to allow and facilitate better usability so for example what we can do is uh if we imagine our page our html page might be broken up into three sections um so we have uh for example the header and the footer and we'll just call this the main content now of course the header and the footer are elements of your page that you can utilize on multiple pages so there's no need for us to actually recreate this header and footer on every single page we build because it means that anytime we want to change the header and footer we'd have to change all the pages headers and footers so we can import dynamically the header and the footer and the middle section of our page the content of our page so that we only have one header and footer which we can change and then the middle section will dynamically change within our website so typically what we can do is we can build a base file so inside of our well we inside of our templates here let's just go ahead and build a a base file html and what we're going to do is we're going to basically import the home section inside the middle of the base file so this is where it gets a little bit long-winded because i'm going to take you through all the different html if you're comfortable with html just copy and paste from the repository that we're using so you can see here what we've got is a basic setup which includes bootstrap at the moment and i'll take you through that in a second but we've got this load static so we might have some static files um static files refer to for example files like css pages which we kind of potentially need to set up for this project potentially a later point um and then we have the basic html syntax here so we've got the doctype referring to html5 we've got the the html tag here everything is encompassed in that we've got the head section of our page so i'm making an assumption that you know a little bit about html here um we don't have time to we do have time but it would be an extremely long tutorial if i went through every point here um so we've got the title and notice here we've got this block title um and m block so blocks are important here in the template django templating system we can override these blocks so imagine this page here this block title um is called my shop so what i can do on another page is i can kind of override this title so when i'm on that page we can override this um title block title with the name of that page so this is something that um is provides us some sort of uh dynamic ability to change on certain pages so here we've got some links to the bootstrap elements which i'll explain shortly and that finishes the head so that's kind of a meta section there and then we've got the body so this is remember this page is going to be utilized in every single page of the system and what we do is we're basically just going to import the block content so here we've got this block open and close and we're referring to this as content so what we can do here is on separate page we can call this page and insert the content of that particular page we're on inside of this section here so let's just kind of see that in action so let's go back to the other page that we have here the home page uh free major is too complicated potentially so what i want to do first is i want to extend from the base so this page is going to be loaded remember as for normal but this time what's going to happen is i'm going to load in that base html page so this is basically going to be loaded in here now what i can do now i've grabbed a copy of that is i can go ahead and just load any static that i might have so the css pages etc and now what i can do is override the base html and the base block title so here i've got block title home so no longer will it say my shop it will now say home and of course on separate pages the category page etc you'll want to change the title so that's how you can kind of dynamically change the title so at that point i'm then going to bring in some uh code for the middle section here so what i now need to do is open up a block content and i can also then close it and then anything inside of here is going to be included on the page so let's just type in hello page here and just see this in action so again my page my home page has been loaded i'm loading in the base and then i'm changing the home title the title sorry to home and then i'm going to inject my content into this block here and that's then going to be displayed on the page okay so let's go ahead and try this refresh you can now see it says hello page now the styling has changed because i'm using bootstrap styling now if i were to inspect you can now see in the head it now says home of course we can see it right here um well you can't see it there so we now have home so you can see where things are being overridden and you can see where the content is going and there we go so that's kind of the basics of the django templating system so i feel myself speeding up here simply because there's a lot of content here so i do apologize you can always slow me down on youtube by um just moving the notch down slightly or of course speed me up if you prefer to go a little bit quicker so now we need to create some sort of design for the page now obviously we're not featuring design here in this tutorial so we want to prototype as quickly as we can so bootstrap offers us a framework to pre-design pre-customize pre-developed sorry elements um that we can quickly drag and drop on to our onto our design onto our page and quickly build a website so we're going to use this bootstrap getbootstrap.com go over to the docs and go into the introduction and then you'll see the starter template so you can see in the starter template here that we've got a link to the css and to javascript that kind of is needed for some of the components that we can utilize in bootstrap so all we really need to do here because we've already built everything else is just go ahead and copy this css into the top of our page so i do have something here um we're just going to remove that and that anything that says bootstrap we'll just remove that too um so we're gonna need this viewpoint here um so the pace scales correctly this viewport um so we've got this css we'll bring that in and then we'll also just bring in the the javascript bundle here um so we can go ahead and just do this instead so let's just do that one instead um let's go down there so i'm just going to add it into the top here in actual fact so i'm going to load it in first why not there we go and then all you need to do is just double check the starter template so you don't need the character set and that's just set by default in your browser on most um new browsers modern browsers and you see we've got this uh scale facility here which has already been placed right there okay so now with that in place you will see instantly your page for example the font here will change or not um so it's already been changed uh so your font changes to the bootstrap font so that's all good so what we can now do is go back into bootstrap and now kind of design our page so what we're going to do is i'll just show you um the fact that we can go into the examples and bootstrap we can have a look at any of these items here and we can make some kind of simple changes to it to fit within our project so take for example we wanted this header here i could just right click view the page source and go down here to the header section all i would need to do is copy that across to my product project still doing it and then i can press control and shift and p and format that and it looks nice and nicely formatted uh indented and so on and so i can then go back into my code and have a look there we go so i've now got some sort of header bar so i'm going to make a slightly customized header bar for this project so i i'll quickly take you through the code okay so here is the navigation bar that i've developed so you can see that we start off with the nav tags here and that then opens up nicely we're going to create a container fluid so a fluid container in bootstrap means that it's a full width container if i just use container for example it will kind of appear in the middle a certain width and then continue to be at that certain width but i want a full length navigation bar so i've used fluid to perform that action okay so next up inside of here we have the nav brand so that's the link that you see and you can see here we have this button that's going to be a button that will appear when we get to a certain width screen width and underneath here we then have the collapsible navigation bar so this is going to appear and disappear when we get to a certain width um so let's just have a look at that in action if you've not seen that before so you can see here that um it folds down nicely and i've got this nice drop down that's all automatically been generated by bootstrap so that's essentially what that is there now these links here they're being generated and if i drill down a little bit further you can see i've got this unordered list here and inside of here i've got list items those list items are items that are appearing [Music] in my navigation bar and you can see here i've got this drop-down facility where i'm going to be displaying some information i've pre-coded this information about the category so i'm going to select all the categories that i'm going to have in my database and output them we'll go through that shortly but that's what you're going to find right here in this drop down now if you're unfamiliar with any of these classes etc just go to the bootstrap website and have a look and search through and just if you're interested in knowing a little bit more about bootstrap just go through the documentation have a look to see what some of these two okay so there's plenty of different examples now you can see here we've got this uh d flex um which means that this is form here is going to be pushed to the right hand side so you can already see on the page here that this is on the right hand side utilizing flexbox again if you're not familiar with flexbox have a look at flexbox and get an overview of that that's going to take you again a couple of more hours so this code is available in the repository so just go ahead and copy it just make sure you copy it note by note letter by letter otherwise you're going to have a problem okay so you can see um that pretty much uh in a nutshell explains what's going on there um so that then completes the header so that's the header section and more navigation bar okay so next up let's actually get this category list working properly so what's going to happen is that i'm going to build a drop down list here and the items that are inside of my admin area in the categories so let's just build another category because i think we've only got one um let's call it react and let's just make another one called next.js for example okay so we've got three categories now so we want that to appear in our list so that we can then navigate to those certain areas so let's go ahead and just build this out so we're just gonna open up the files let's just close those there okay so let's go back into our urls first okay so we're not actually going to need a url for this so we're simply going to collect the information and pass it over to that template so nothing goes into the url for this one so let's go over to the views now we're going to build a new view so we can collect that data and have it available on that page or in the header so i'm going to make a new function here called categories and basically all i need is a return so i'm just going to return and in this case i'm just going to return all the category information so i'm going to collect all the category information and then it will be returned in this reference here as category so i'll be able to find all the category information in this reference point categories now i do want to make this available on every single page so to achieve that if we go over to the core and settings what we can do is we can add this view here to the content processors so what that means is that for every page that we view we have access to that view the categories view so we can access the category data through this keyword here categories so let's go over now to the base again and have a look at this unordered list here so this is the drop down list in our navigation bar so i've already pre-built the code here so you can see i'm building this for loop and i'm grabbing the categories information which is now available that view is available through that context there and what i'm doing is i'm creating a a loop so for every time i loop that data goes into c and then i can reference any data in the categories table field um through c so here you can see that i'm referencing c name so that's going to get the name of the item so each time we look through the category items there's three categories now isn't there not we're going to grab the type the name and then i've extended an included title here and what that's going to do that's going to basically just provide a little bit of formatting here on the name so it capitalizes the um the name of the category so that's going to loop out and notice here i'm looping through this code so there's going to be a list item created for each item we find in the categories table okay so don't forget to add the end for to end the loop there and now let's just test it out so refresh go to library and you can see that they're working so obviously what we want to do shortly is to create some links um to these pages so that we can then access all the books within these specific specific um categories okay so before we go that far um let's just uh focus on the home here and let's just uh come back to here we've got all the data from the database remember this is the um the home page here that we're working on so we want just output on the home here all that data so we're going to need a build again another template well not a template we're going to need to build the html for this so let's go ahead and start this out so first of all i've got this uh section at the top of our page now this code is just uh copied and pasted from one of the templates uh so quickly show you so for example if you go over to [Music] one of these here so you can copy and paste this code here for example um or maybe if you prefer uh maybe this here i think this is what i've utilized so if we view this go down into the page we're looking for a section here um this section here potentially is what we're going to copy across it looks like the section so that's pretty much the code that you're looking at here this simple section here so just to display it on the page let's have a look um that looks a little bit like that there we go so obviously what we want to build now is this section below here to show all the books so go back to our code here so again all i've done is i've gone over to bootstrap again i've had a look at this code here we're utilizing this so inspect this um apologies not inspect go over and view the page source and you can basically just copy copy this all or this page and it depends how you want it to look and i basically just copied this in from the main so section main to main and that's pretty much what you're looking at on this page all the code is in the repository for this tutorial so go ahead and just copy it in so what's happening here you can see that i've created underneath the section here we've got this album here we've got a nice container so the container is making the page uh the whip defining the page width smaller than the whole width of the page so as i zoom out for example zoom in you can see that the page is being retained within the container width okay so in addition to that we then have another loop here so this for loop here now let's just go back into our view so we return the data as products so we get all the product data now we've got this template the home template that's the template we're working on and now we just ah send the data to that template so that we can then do something with it so here you can see we take that data and for every item we refer to product and we're just basically going to loop out this html here so this html refers to a card a bootstrap card which is going to format for us the size and make it look like a simple card that you saw in the other preview and you can see here what i'm outputting so product image now if i want to output the product image i need to remember to include the dot url to make that into the url that's needed to make the link to that image and in addition to that we're going to add a uh a link so that we can link to that individual item shortly we do that shortly but you can see here that we've got the product.title so all the information that's in the database all the fields we can access here and you can see the rest here is just some div and then some simple styling so we'll save that let's go back into our page and refresh and there we go we have our first book so the page so the image should be displaying um that we're using so that shows that the media is working properly and of course what we want to do is we want to click on here and we want it to take us to the single page for that book okay excellent so far we've completed uh the majority of this first page our home page so now what we're going to do is concentrate on creating the individual page for the individual books so we're going to start building the single page that's needed for that so first of all then let's just go through the process we're going to start off by creating in the store remember and not core install the url for this new page so we just need to think about how we want this to um to work so maybe we need to think about the path that we want to use so here i've kind of pre-made this so let's have a look at this so we're going to use a path so for each item i'm going to use the keyword item here but this could be absolutely anything you want you could call this a book for example or individual item or product or whatever you want i'm just going to call this item for no particular reason and now what i want to do is i want to then connect that to the product page so i'm going to connect this to the view called product.detail so that's the view i'm going to build and i give this a name product detail now i'm going to explain this slug item in a second so let's just head over to the view first and build our view and then we'll work out what this component is in a second so let's go over to our views so let's remember we're going to make a new function here called product detail so that's going to show our individual product now we're taking the request as per normal get all those details and we're going to take in slug so this is um the reference point here to slug and we're going to explain that shortly again but that's how we want to set this up and then obviously what we want to do here is we want to get an individual item from the database so what we can do is we're just going to bring in from the shortcuts we're going to import get object or 404 so this i get object or 404 essentially is a a shortcut another way of accessing the data from the database and like i said if the data doesn't get retrieved it means that we're going to return a 404 so we can build this up now so we're going to add this in and let's just move that back so you can see here uh we're going to get the data through the get object or 404 what data do we want to get we want to get product data and what do you want that to equal um the slug and then also the data that we return it needs to be in stock that's important so if the if the item isn't in stock then we're not going to show the item now let's just go back into our database and i'll explain this a little bit further so we've got in stock so if the book isn't in stock we're not going to show this so what this is saying here then let's uh now tell you about this slug now what's happening is we want to make a page which shows an individual item so here we want to use this slug of the book in this case it's going to be django and that's then going to show us that individual product but we need to ask ourselves the question well how do we get the individual product of course there's no magic here what's going to happen is that we're going to collect this here this word django how we're going to collect that is we're going to collect that through what you've already seen in the url so item and then after the slash we have this slug slug so what this refers to as the first item here refers to the data type that we want to store and pass across and the name of the reference point essentially this is a variable the variable's called slug and then whatever we typed into this space here in the url is going to be referenced as slug so essentially we're going to build a variable called slug and we're basically um naming that or referencing that as slug so this refers to the type of data this refers to the name of the the variable that essentially we want to um to build and store the data within so just to make it crystal clear we're basically we're capturing this word here and what we're going to do is we're going to use that word to make a query on the database so we collect that data here after the slash is here and then we're going to move that across into this view so we reference it here and we bring this in to our view and then what we say now is this then makes the statement the kind of sql statement up so select from the database the product database where the slug equals slug so in this case it means that our slug is called django so it's going to select the product where the slug equals django that's how it's going to get the individual item from the database now remember the slug equals that so let me just show to clarify that so in the admin here and we've got a product here called django and the slug is called django so basically we're selecting from the database where the slug equals django and remember obviously it needs to be also in stock so we add that there in stock equals true and then that will collect the individual item now it's stored in product obviously all we need to do now i say obviously all we need to do now is return a template and stitch that all together with the data so what we're going to do now is build a new template now i'm going to put this into a folder a new folder for no particular reason other than to kind of manage this more effectively at least in my mind so we're going to create a new folder here called products and we're going to create a new file inside of there called detail or html for example there we go so that's our file um so now what we can do is build up this individual page and obviously all the data is going to be sent to this page through this keyword here product and we can then build up that page and view the page so let's give this a go so we start off building the detail page utilizing the extend now here i'm in a new folder so another reason i did this just to show you this the fact that we can also refer to the base from other folders so i use dot dot dot slash to kind of tell um django to look in the prior or the previous folder i'll go up one folder structure and then look for the base file so that extends the base file again so again this is one of those pages which has quite a bit of html so i'll try and break this down give you a quick overview so in the content section here of our detail page we have a container so everything's stored within this container outer container and then we have this main section here so you can see that i'm using um a range of different column depending on the actual view or the size of the browser it will scale down the different sections but essentially i've got two sections i'm building here the section on the left hand side and a section in the right hand side and that's all on one row so i'm using two sections here left and right in one row so in each section or at least in the left hand section you can see i've got the image and now i don't need to loop through this because i'm only producing or returning one item and so i'm outputting the product image url on that page there and then in the bottom or the right-hand section sorry you can see there's quite a lot going on here so i've got a title i've got the author notice here i'm using the slice which means i'm basically taking the description and i'm slicing it i'm so it means that basically i'm limiting the output to 355 characters essentially that's what i'm doing there so that's slice you can see that i'm accessing the data using the doubles always and that's pretty much all that's there really apart from it a little drop down going on here and a button that we're utilize later on to add to the basket but um have a take have a look through um have a look at the code you can just copy and paste this across this isn't a key feature here as long as you understand what's happening with the django elements here um in this case just output in individual items and we're just slicing here so just to reduce the amount of output um we've got the price also down here there we go so let's have a look to see what this looks like um so notice that i've gone to item django so i've done this manually and notice that the actual data isn't actually appearing which is fairly interesting uh so product.price so let's go back to view okay so i've made a change there so just remember the data needs to be referenced as product so i can now refresh and there we go so all the data is now in place so i've only got one item in my database but obviously i can quickly test this by adding a new product um so let's just go to react admin title react so uh we can choose an image again there we go um the price is going to be 10.99 89 and then we just press save so we've got two items now so um the slug of this is react so we can then just go back to our page item and it's going to be called react that's what we just built and there we go so this is working nicely but of course we want to dynamically link to this page we don't want to have to type this in or manually hard code this into our project so what we want to do now is build some dynamic links so that means that we want to auto generate the urls in our project so that we don't have to kind of hard code them into our code and of course these links might change over time so it allows us to create dynamic links which can change based upon content and also based upon other changes that potentially we make within our code so go ahead and access your store model so first of all import reverse so this is a tool that's going to allow us to build a url so we're going to build that url inside of our products model so i've gone ahead and created this absolute url here um so what we need to do is use reverse so what do we want to build what url do we want to build we want to build this url here so we've already um produced an app name which allows us access or a quick reference point to these url patterns and then we've given the actual url a name so this is how we can name this url path so let's go back into our models and let's add the first parameter in this reverse which is going to be the url we want to use so store referring to store and then the product detail referring to the product detail name right here okay so this is a dynamic element here so we're going to need to pass that in so let's uh secondly pass that in so we've got a comma and then the argument that we want to send across is whatever item it is that we currently want to view self dot slug so that's the slug or element for that individual item so we're going to extract that down if it's django for example page we're looking at it's going to use django right here and so on so that's going to build us up that url and now we can dynamically use that to add urls to components within our page so let's go back to our home page first now remember here we had um the the link so the title was in a link an a link here so this anchor tag so we've got the href here so that's the link that we want to build for this particular product remember we're looping through these products so what we need to do now is just reference that get absolute url so we can do that through product so again everything can be accessed through product so product dot and then get absolute url that's the name of the function okay so that's gonna then um initiate that function and get this slug for or the um the the euro url for this product and all the products that gets looped out so let's go back now into our application go to home and just refresh so what we should have now when we click here you can see at the bottom here the link that's going to be produced or maybe you can't but anyway if we just click on here it will then take you to the page so you can see that our links are now working for our products so now what we want to do is exactly the same thing but for our categories okay so let's go back into the models and let's go back into let's just uh copy this for example let's go into our category here and let's just uh paste the same thing oh uh let's just paste the same thing in here this function for our categories okay so next up we need to build the category section of our page so that when we select a category it takes us to the individual category and it shows us all the books associated to that category so we start off building the url for this so i've just happened to create a new area called search and then it's going to then have the this new slug which is going to be the category slug so slug is referring to the data this is a reference point for that data so just again to remind you i want to type in here search and then for example django that's going to take me to the django category and show all the django books that's what i want to achieve here so let's go back into our app here so it's going to be connected to a function called category list and i've given it a name of category list so let's head over to the views now now you can see inside of here we have a new view called category list so what we're going to do here is taking request and the category slug so remember that's the uh the slug here which is going to be for example django so we take that information in so the first thing that we want to do potentially we don't necessarily have to is we want to maybe get all the information about the category we can do that first of course so what we can do is we can use that to find the name of the category if we wanted to um so what we do here is we build the get object or 404 so we want to select one item from the database in the category database where the slug equals the category slug in this case django so that's going to return one item from the database right so now what we returned is inside of category here in this variable is going to be django so we can now use that potentially to actually make a query on the products database so what we can now do is say well in the products database we can say find everything where using a filter where the category equals the category the data here which is going to be django and that's going to return a list then of all the books that has the category in this case django so as you might imagine at this point we now just need to return and create a new template so in products i'm going to create a new template called category right so what we can do here is we can reuse um potentially enough the similar um template we had here in home that might be possible because remember in home that's basically just going to show a a grid of items so let's just copy that into products let's just now rename that to category dot html okay and now remember that's going to loop through the items that's what we want now we don't want this section here um in the category html page so let me just save the view so you can see here that uh we're we've got the template and then we're just returning both the category data and the products data so we're returning the name of the category and that we want and the slug and we're also returning the product information so let's go back to the category.html page um here we go so we're getting the product absolute url and that would be useful so we can keep that in so let's just run this and see if it works in actual fact so search and django okay so template does not exist so maybe we've got a problem here with some naming so we call this cat e gory uh let's have a look in the views category dot html now store products so store products category.html so it doesn't look like it's um finding this this template here for some reason and so i think what the problem is if we go into categories we need to remember find the base template by using the double dot and slash that's what the problem is there so let's go back and refresh and there we go so this is django and there's one book now there's how many books in react there's one book in react how about if we go home we've got two books so what we need to do now we've got the category section working we just need to make these and build these up into the links so that they now link to the specific categories so it's the same situation again as making the links for the products so let's go into our models in our store and then we're just going to basically build up a new i've already i've already done it here build up a new reverse here so what we're going to need to do is collect the url from the category list so we're going to use this url now we need to dynamically add this second component here as the slug so go back into our code here you can see that we've passed in the slug argument here into the second component to build up our link so that should now be in place so let's go over to our um it's going to be our base isn't it so let me just close all these so we need to go over to the base and then we just need to add the uh here in 55 and this is all the drop down items so for each drop down is a category so what we're going to need to do here is just add in our new reference to that to that function so let's remember i'm referencing each piece of data via c so we're going to need c and then absolute url that's going to then reference the model function and there we go so let's have a look to see if that works refresh and go to library go to django and there we go let's go to react and there we go so we haven't got anything in next so it doesn't show any books and there we go so at the moment it says all books but of course it's not all books so if you remember when we um sent the let's look in the view remember when we pass the data back over to the category page we also sent across the category data so what we can do here is we can output the actual category name so let's go into our category template here where it says all books let's go ahead and change that to the category name so we access it through the category keyword and name and i'm using title again in order to capitalize the first letter in the name so if i go back now and refresh there we go now says django now says react so again i find myself apologizing hopefully that wasn't too quick there with the html and css templating all the code like i keep saying is in the repository so go ahead and download there might be a few different changes that you'll see in the repository where i've added uh some little elements that i didn't include for example some different links in different places etc so if yours isn't working then just go ahead have a look at that repository so at this point if you want to you can now go ahead to part two so have a look at that tutorial where we start to build the shopping cart now stay if you want to learn a little bit more about testing next up we're going to have a look at testing the views and just some of the other techniques that we can utilize to do that and then finally we will we will go on to the python style convention so we just test our code against pep 8 and to make sure that we we create some consistent code following these style guidelines okay so next up then we have testing like i previously said we're looking at building some tests for views now there are some different techniques and different approaches here to test views because it is slightly different and we are testing different things here than if we were to test what we previously done the the models so let's go ahead and have a look at some of these techniques so let's start off by running coverage so i'm going to emit the event folder again so coverage run omit vamp and then manage my test so let's go ahead and do that so i've run two tests so let's now open up the coverage html and let's just see what it provides us so remember you'll need to go into the folder here html cup folder find the index and run that in your browser so let's take a look at that so i've gone ahead and had a look at the store here so let's just go back to a list here so we've got this cover coverage report and you can see that i've been working in on the views or we've been working on the views it looks like there are some tests missing now it seems to be there's some tests missing also we need to test the reverse um here in the model so that's some more test potentially we need to also build in the model but let's have a look at the views looks like there's eight missing tests now this may make a little bit more sense here why we might need testing because we've set up here some custom views and in our views essentially what we've done is a two-stage process so we've identified the data that we want to collect from the database and then we've prepared that data in the template and provided that to the user so what we can do here is test to make sure the data that we're collecting from the database is the correct data and fits our template and successfully creates our template and then potentially then returns it to the user so that's something we can actually test let's test to make sure it actually works and of course what we're doing here is we're also testing the url to make sure the url works that's something else we can also test so a simple test here for example is we can just test to make sure that the home page actually appears or is or the user is actually actually able to access the home page and return it in their browser so these are all important tests to capture because before we actually put our or deploy our application to the server it's probably a good idea good idea to actually test to make sure that the home page is actually working or the pages are actually working so it seems like some very productive tests that we can build here so let's start off by going over to our store i've already created this file here called test views and inside of here i've started to set this up so i'm going to bring in the test case so that i can perform some tests i'm going to bring in the database the user database because i'm going to need to build a database again here i will not build a database but do build the data for the the database the testing database and i'm going to bring in the models category and products so similar to what we've previously done with the models we're just going to bring in all that resource so that we can start building and making data for our tables so that we can test upon it so something i wanted to show you before we start testing is unit test skip so this provides us a facility to actually skip tests so for example here's a simple uh example class skip test skip and we've got this one single test here now by decorating here with skip and then just describing why you're skipping this test that allows us to identify tests that have been skipped so if i were to now put forward to perform the tests again for example um there we go so you can see for example oh no let me just save that so going back here again you can see that it skipped one test so we've got this s to indicate the test of skipped so you can see here potentially that tests are done in a certain order and you can see this order here that the s is at the end here so it looks like the test in the models is done first and then the tests and the views so that's something that you might down the line want to start to think about changing the order of your tests but that indicates that the s is for skip and you can see here it clearly identifies that we've skipped one test so with that in mind that allows us to identify tests potentially that maybe we need to update maybe we've updated some code in our project and we haven't had time to complete the tests or change the test so maybe we want to skip it for now and come back later and that clearly identifies that we've done that if for example i would just to kind of highlight this out then i won't get an indication the fact that i've skipped a test i maybe forget to run that test and then that might come from compromise my application in our views here we want to kind of simulate a user accessing the the view we want to maybe simulate a user going to our page and accessing our views etc so we need a tool to do that so there are two options the first option here is from the django test we have client and that will allow us to kind of simulate a user in a test so from django.test we can import client of course you can head over to the testing tools or any of anything that we've mentioned here you can just search within the documentation it's likely you'll find some good documentation here in the django documentation so here it talks about the test client so the test client is a python class that acts as a dummy web browser allowing you to test your views and interact with your django powered application programmatically okay the first test that we're going to perform is just to test the home page so let's just set this out so we're going to set this new function here called test home page url and we've added some documentation here so what we need to do is we need to use the client to actually then send a request to our django application in this case the home page and that's then going to retrieve all the data that is returned from the home page and then we can perform some actions or perform some tests on that data so let's go ahead and do that so we set up this variable i've just called it response you can call it whatever you like and we're going to use this client here and we're going to use a get request so html get request to this location in our project which is the home page and then we're going to return this response and then store it here in response so now we've got that we've got the ability now to actually test response codes so hopefully we get the general idea here so let's go ahead now and actually build this up so i've created a new class for these tests um so we're going to have a little bit of a setup here for this so we're going to need to set up the database surely but let's just go for a simple setup i'm just going to bring in the client self.c equals client so i'm going to access the client here as c throughout my tests so now i can go ahead and build my first test so we're going to test as i previously previously mentioned there we're going to test if the url works correctly so here i've just created a new function called test url allowed host there we go that's going to test to see if we can access the home page and like before we're going to bring in the response here so response equals and then we're going to reference a client as c self c so we're going to try and get with this um with this client the home page and then what we should return is the let's just type this out um we want to use a an assert um equal so we're going to use this equal so there's two parameters here we need to set up or two things here we need to set up we need to set up um what we're going to compare if they are equal so we're going to need the response um so inside of this variable here called response and you can name it whatever you like we're going to look for the status code so what's happened here is that when we make a request a get request to this page what's going to return from the server is the status code so if you're not familiar with status codes or html status codes just go ahead and have a look at this page here and this is http http response status codes here from the mdm web docs um this is going to take you through some of the basic um responses that were received that we received from the server so this is um something that actually happens in your browser so if you were to open up your console you can refresh and um see the responses see the status 200 here so that basically says that we've retrieved the data or we've um that everything is okay the pages has returned correctly for example so that's the html status for all these different resources and you can see here that we've got this 304 status for example on different items so these messages here that get returned from the server from this page for example and they mean something and this is basically a run through of some of the more popular and lesser known status responses so what we're trying to receive here is the 200 which is okay the request has succeeded so that's the return that we're trying to return here when we access the home page of our of our application so we're just going to um assert equal so we're saying that this here this response code that gets returned from and stored in our response variable should equal 200. so we can probably now go ahead and just uh test that out so if i bring up the console here and we've seemed to got we seem to have an error um self deployment 917 unexpected indented block okay so um well that'd be why okay okay so now we've got okay so everything is run okay everything seems to be working all right so um everything is okay so let's go ahead and break this so let's just return say a 301 status and you can see that that will then cause an error so you can see what has been returned 200 and that is not equal to the 301 therefore it's called caused an error so clearly by running this test here suggesting that our home page is working okay and we can move on and build another test so just going back to our page let's just run our server so my shop here now let's remember that this is a a url that we've set up item slash django so we want to test to make sure it's returning the right data potentially here or it's just returning it something potentially so we want to kind of set up a test now to check to see if for example the item is returning something if we were to enter a parameter here remember this is the slug item here so we need to test that out and also we can also test the search and in this case this is obviously the categories where we can have react and we can have django so these are two tests that we need to build so let's go ahead and test the uh the product detail now what i'm going to do here if you remember in the return test so in the coverage it suggested there was a missing test here in the model so these reverse needed testing so what i'm actually going to do is i'm going to test um this reverse here this product reverse first and then i'll probably build a test for this so this is going to test not only if um the url is reversed and we can then access so not only going to test this piece of code here but also again then test because that obviously returns a url we're then going to test whether the actual page works as well so we can kind of buddy up the test here one test if this works the reverse works and also then if the page resource will return 200 response so back into the code let's go ahead and do this so we're going to need another function here so i'm going to name this test product detail url so what i want to do here is set up a response so similar to what we've done before here um let's just set this up so response and it's going to be a get request a http get request so i want to um run a reverse uh okay so i'm going to probably need to bring this resource in because i want to run this so let's just put it there for now um so this is all going to get tidied up later on i'm going to show you how to do this i'm kind of purposely messing this up the order of these imports so we're going to need to reverse so then we just need to kind of follow the the existing code almost here because we just need to work out what we want to reverse so almost just taking the code from our models wherever our models are and let's go to the products here so we can pretty much run this code right here but of course we're not going to get self slug this is where we're going to change the argument and to whatever we want so i'm going to run reverse and i'm then need to open up oh do you know what's happening let's put this in here okay so this case the argument is going to be django for example so we save that okay so there we go so we've uh requested this uh essentially we requested this url store product detail and the argument of django and that's then going to create this url which can then be utilized to access the page through c utilizing the client and that's then going to be returned and the page is going to be returned into response similar to what we've done here but a little just a little bit more complicated in how we're actually fetching the url or generating the url here so now we've done that we can now obviously test this um so let's just copy and paste this down again let's just move this across so let's just move this down again so again we're just going to use the assert equals response status 200. now before we run this the problem we have here is that we don't actually have any data in our database so we need to bring in and tell the testing that we're going to need the database or copy of a database so it's going to develop the testing database that's going to be utilized for these tests and then we need to insert some data so you can copy and paste this from the the previous uh the previous tests here so let's just bring this in so we're going to need to set up the user table we've already brought the tables in up here so the user table creates a new user called admin and then we're going to need a category remember because we can't build a product without the foreign key dependencies category and user so we built this great and then we created some data and then we go ahead here and we've created a new object so category id one and then titled django created by id1 that's the other foreign key and then slug django beginners price blah blah and image django so let's just uh concentrate here on the slug because what we want is the slug to match the argument here so let's go ahead and put that in there so there we go so we've set up now the data for this like i said that's just a copy and paste really of the previous code that we've previously made um so all the data now is ready in the setup and now we can then use it for our tests here so we can now perform this reverse here and hopefully return a status code of 200 so let's just give this a go so i'm going to stop the server there we go so it looks like it's working so let's just change this to 300 just to double check and there we go it's failed at that that time um you can see that we're expecting 200 but it's returned 300 or we've um compared it against 300 and so that doesn't equal so it's returned a an error or failed test so let's just go back and run that test again with the 200 and everything is okay so here is suggesting um that that reverse in the model is going to work okay and it's potentially suggesting that this page or this resource accessing the individual products it looks like it's going to work okay so what we can do here is we can just copy this and we can do exactly the same thing for the uh the categories so this is a test category detail um so test category response status so here we just need to change um the reverse so let's just go into our models go up to the um the category here so we just need the store category list remember that's connecting to the url so that's a reference point in the store urls and then that's the name of the url so let's just go back here and change that there we go so the argument here isn't going to be django beginners so let's just go back to my data here so the slug is called django that's the slug for the category so i need to use that slug to match the data that we have in our database and now i can just run this test looks like it's working okay and obviously i can double check so that was failed so it looks like it's working okay good so it is possible for us to actually return the html from the resource and then we can test that html against something to check to see if the actual page is the correct page or whether something that should appear in that page is actually appearing in that page for example so let's just go ahead just kind of make a i guess a html validation test for example so i'm going to call this test home page and what i'm going to do here is bring in a new resource called http request so let's go along go ahead and at the top here we're just going to import that from django http so just bring that in there so i brought that resource in so we have access to that so this is fairly interesting because what we can do with this http request is essentially we can use the views or send the request directly to our view so let's go into our views here we've got this view here called all products so what we can do is we can send it a test directly to this view or we can send a request to http request directly to this view so let's go ahead and see that in place so back in the code here we've already started to set this up here let's go back into our view and we're going to make a request and we're going to use the http request function for this so we're going to need to bring in the view first because we want to access the view it seems like a good idea to actually bring in the view the view so from store view let's bring us in from store uh then the views uh import the all products so that's the view that for the home page okay so that brings that in so we can now access that so we can send this kind of or we can simulate a request to that view um by creating a response or setting a new variable here called response and then basically detailing or referencing the view and then sending across the request which is obviously a http request okay so essentially what we're doing here is we're doing the same thing here with client but we're just accessing the view kind of directly here we're sending a request directly to the actual view okay so what we can now do is if we need to for example we can decode that response here so response so remember we've sent the request to the view here return back in the response now we can take that and we can then decode it into udf8 or whatever format we want to decode it in now it should the default should be utf-8 anyway but just added that in so what we can now do is what we find in this side of this variable here is all the html that's been returned from that page in this case the home page so what we can now do is we can check within that page um to see what we've got so actually let's just do a print here html let's just um see this in the console so i'm going to run the test there we go so you can see i've just printed out what is returned here and that's essentially just all the html from the the home page so what we can now do is we can run tests for items that are on this page here so we can check to see if data's inside of this page or not and so on so it provides us an extra level of testing okay so let's just go ahead now and do a simple test we know that the title should be home so we can run a an assert in so we're saying this text here should be in this variable the data in this variable here which is obviously all the html code so we can check that for example we can also do a starts with for example so just quickly show an example of that so the page should start with and it should start with this here for example so we can kind of check that so notice that um i've removed the the white space so we can also do the assert equal because we can also access like we've done before um the status code so let's go ahead and do that so there's three simple tests that we can run there so let's go ahead and run those looks like everything is okay and it looks like um our page is working so we can double check that of course let's just change that to another name see if that's working returns an error looks like everything is going well so i have included a final example here in the testing um i just wanted to introduce you to the idea of what django considers advanced testing topics the request factory so to kind of generalize here what's happening we previously used the client within our in our testing which essentially is kind of simulating the simulating the browser and then returning the data from the program as if we're running the browser requesting the data now that's not always um the best way to or best approach to test the actual functionality of our code so this request factory facility or tool allows us to test the view as a functional piece of code so as it says here this means you can test the view function the same way you would test any other function so it allows us to kind of go into the code and test the function as a function rather than to kind of go through the approach of the browser so let me just give you an example and this is something that we can introduce further in later topics etc but it's worth highlighting i think at this point and asking you to potentially just read through this and have a look at some of these approaches that this test factory provides us because if you were to look at other materials it's likely that this will pop up as a subject or an approach for testing so let's pretty much perform the same test as we've previously done here where we've requested the data let's do this um but with the the factory so first thing we're going to need to do is uh just bring this in so let's go to the top here um so we've got the client we're bringing in the client and we've also got the test case so that's all coming from the same place so let's just buddy this up so we're bringing the request factory um yep let's go back down here and now just build this out so we're gonna need a new function here um so we're just gonna call this test view function okay and so we start off with the request so we have request and then we bring in the factory self.factory.get so we are referencing it um like we previously done with the client so we need to go up here in our setup and just set that up so we're referencing or accessing the request factory via self factory so cell factory get so we're using factory to get the uh the url here um item and django beginners so pretty much now the the testing looks exactly the same so we're going to use the all products again to send that request and then pretty much from there is exactly the same code so we can just move that down and there we go so you will find that there's lots more different tools and facilities of course i'm just really introducing this idea um in this example here but you can potentially see how powerful this potentially might be and how useful this will be to kind of test out your functions inside of your your views and look for kind of specific functionality that you want to test within your views without having to go through the browser and so on so obviously there's a lot of logic in our views potentially that we might want to test out so it seems like a good idea to have direct access to those views so there's a little bit of testing i've gone ahead and i run my coverage again at this point i'm presuming that you've you know what to do so i've run the coverage and coverage html uh refreshed my coverage report here and you can now see it's looking pretty good looks like i've made all the tests that i need for my views um and my urls and also my models remember those are the tests that we're missing so it looks like now i've got a good bit of coverage here um so i'm not quite sure where that's in place and of course these are something that you can just potentially ignore apart from the urls but like i said here this is just for um development purposes so i'm not going to make a test for that but the main tests i wanted to run was for my models and the views because that's where i've added some logic in this program you can see i've now got 100 and we're good to move on potentially okay so hopefully that was useful a little bit of testing there hopefully you've kind of gained a little bit of knowledge and understanding if that was too quick i do apologize um just move through it slowly um try and make some tests ask yourself i'll utilize coverage to identify the tests and then maybe use other resources online to ask questions how do i test this and that and so on um stack overflow for example and of course you can always ask in the comments if i've got time to answer your questions how do i test this and that and so on but but slowly become more familiar with testing i think it's a really important aspect of development okay so we are at the final stage pepe python style conventions okay so if you're not familiar with this uh pep 8. let's just go over to uh pepe let's just type in pep8 so pepe is a style guide for python code and there's lots of different pep to have a look at there's different numbers it'd be worth having a look at that or just become familiar with the fact there are different uh python conventions and guidelines etc um so this is basically a guideline which you can may or may not follow so in different in different companies that you might work for in different projects you might work in there might be different style guidelines of course these are just generic guidelines which we can follow for python code of course they might be different from other types of code java etc and this is obviously for python so you can take a read through this obviously you can and that's quite a long read there's lots of lots of information here it's useful to kind of follow these guidelines so that we make consistent code so that we produce code that's easily readable by others so we're really thinking about here when we think about style conventions about readability of our code so one core area of this and i made a previous video um on this is the imports for example so the pep8 guide does actually specify the order of these and if you think about what these imports are these are important information to be able to read and identify what imports we've included in our program and if we to drill down here what we have here we have python libraries frameworks so python core library sorry um here and then we have the django resources and then also what we have our kind of program resources so here we bring in the models and the views that's very specific to the actual program that we're building so we have three clear areas here of imports and we want we want to kind of logically create separation between them so we can identify easily identify them and then also change them if needed so it just makes it easily readable so pepe is going to also describe the spaces between the classes etc the the line spaces and so on and the fact that you're going to need a a separate white space line here at the end for example so that's all detailed in pep 8. now if you're not interested in reading it and but you want to make sure your code is nicely presented and follows these guidelines and so it makes your code consistent basically all we need to do is pip install some programs right so let's pip install uh flake eight so flake eight um i think i've already got this installed this is a program that's basically going to scan check your code to see if it meets some of the guidelines and principles of pep 8. so i can just type in now flake 8 and then that's going to provide me a list of all the errors or all the areas where i potentially need to make changes to my code to follow these stylistic guidelines so that's taking a little bit of time looks like there's quite a lot of code um i didn't admit the the views i mean the uh the event folder that's probably why it's taking so long there's so many files in that event folder okay so that took a good 30 seconds to complete and you can see that what is returned are these code error codes and it does provide a information also so line's too long um so it looks like the line is too long here for example you can see there's lots of different things here and it's mainly from the event folder so we need to kind of we need a way of not asking flake not to check those type of files so what we can do is create a new file here i'm going to call this file setup and dot cfg okay so this is a file that i'm basically going to add some parameters to it and then flake will read these parameters so what we're going to do is exclude git files migrations in the event folder and then we're also going to set a max line length of 119. now typically the line length is around about 79 characters and this will change depending where you're working etc but django tends to use and if you look at the django documentation it utilizes the line level 119 so we may as well utilize the style convention of django um so i've changed the line length for maximum line length to 119 so what i can now do is save that i'll save that let's just run flake 8 again and now it's nice and super quick and you can see all the changes that need to happen so too many blank lines so let's just do this one views um okay in the views uh so this is a line 26 character 5 26 oh there's no where my test views i was in my tests uh test views line 26 and then character five so apparently there's a two impact line so this one here i think that's what it's referring to so let's just run this again you can see that now potentially that has been removed that problem okay so you get the idea we're basically just following this here and then you're going to remove all these items so that's one way of creating better code and as time goes by this will get less and less because obviously you'll be more familiar to some of the problems that do occur and you'll just naturally code in a cleaner way so that's going to help you overcome some of the stylistic conventions and it's going to improve the readability of your code now the next item uh we've got here is i was mentioning in pepe it describes the order or the ordering here of your inputs so we can also install an application for this so this is an application called isort so what we can do is we can install we can pip install flake um eight or nine and uh i saw it at the same time so that's a separate package which is going to install all those separate packages there so iso is basically going to look at your input so if i just run isort for example it's going to look at all your inputs and it's going to give you an idea of what is wrong or what needs changing so let's just run that again iso and then iso dot just run this again um so skip one file so i've used the dot to tell it to have a look at this where i am now in this folder structure so look at all these files uh so you can see that it's provided me some information um so dot refers to sort all python files starting with the current directory so it looks like it's already made the sort for me so let's just um do this for example on this page um because what i should sort should do is put a space between the different um imports so let's just run that again and there we go so you can see that's happening when i run the isort dot it's then going through all my pages so if i go to every page now it should have sorted all my code and you can see there's a space between the last parameter here or the last group which is kind of the local imports and then the the imports associated here to django um so if i go into the settings you can see here we've got some imports directly from the python libraries um nothing else there so that's what it's going to do for you it's just tidying up your code it's just a small program that you can run and it just improves the readability of your code okay so that was a mammoth effort if you've gone through that if you've completed all the tasks um and you've got to the end congratulations thank you very much for listening right to the end um now i guess we got to do it all over again in part two uh but this time in the next tutorial we start to have a look at the shopping basket so hopefully it won't be as long as this one um because it was just a lot of setup here for for new django developers um again if you've got any comments any improvements that you think i can make and then please leave them in the comments uh thank you again and hopefully i'll see you in the next tutorial

Channel: Very Academy

Views: 84,429

Rating: 4.9613061 out of 5

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

Id: UqSJCVePEWU

Length: 165min 57sec (9957 seconds)

Published: Mon Feb 01 2021