Django Context Processor

hello everyone this is kenny braney from cambridgetech and welcome back to the channel so in this particular video you are going to work on context processes now what you find interesting is we can have a context processor and apply a particular logic to different pages of our website and that's exactly what you are going to do now this is going to be something we are going to demonstrate so just stick around and you are going to enjoy it so the reason for doing some of these short videos is to actually put some few things together because the next project or the next big project i'm going to handle is going to encapsulate some of these things so having a better understanding of some of these concepts will help moving forward so in vs code what i've done is i've created a project and the jungle project i have over here is context project so there's a project i have settings.pi and the other files in here then i've also created an app which uh called dashboard and the only thing i've done over here as and now is to i've gone into settings.pi and the first thing i did was to register the app so i have dashboard dot apps dot dashboard config and i've also linked it up with an external templates folder over here so this is a templates folder and you see me do this a number of times in other videos i'll leave the link in the description and also in the card so that you can refer to how to create a jungle project and how to create a jungle app so over here i'll click on the templates folder and i would want to create a dashboard subfolder within the template folder then inside of dashboard i'm going to have index.html and i'm also going to create another one and it is going to be about dot html then i'll click on the template again and i'm creating partials folder and within partials i'm going to have nav dot html and finally i'm going to have base dot html so that's how i organize all my work and we are going to see it soon so i have this setup now i want to collapse what i have over here and concentrate on my dashboard app for now i'll come into my views dot pi and i'm going to create a function based view so i'm going to have index and index is going to take in a request and i'm just going to return and call the render method over here and over here i'm going to pass in a request and the name of the template so the template is located in the dashboard sub folder so i'll do dashboard for slash index dot html so this is just about it now i'll just copy this for the sake of time so i'll do a ctrl c and create another one over here and i'm going to call this about so i have the function name chained to about and also the template name will now be about dot html and that's exactly what i did over here so inside of the dashboard food i have index.html that's been returned in the index view or in the index function over here and about two.html is also being returned in the about function over here so now i haven't done this the next thing i want to do is to creating a urls.pi so i will do urls.pi like this and i'll do some internal routing over here so i'm going to run an import i'll say from jungle dot urls i want to import path then i would also do from the current directory i want to import view so that i can have access the reviews so i'll do url patterns and there's going to be a list so i'm going to call in path and it's going to be a base url so i'm going to leave it blank now call the view module over here so i'll do view dot index for this one and i'll give it a name over here for the url routine and i'll just say index i'll bring in a trailing comma and i'll duplicate this so on my keyboard i'll do a shift alt and the down arrow key and as you can see this has been duplicated and for the next route i'll do about for a slash and the function i want to call over here is about function and a name is also going to be about all right so i'm through with this now what i then need to do now is to go into my projects folder i'm going to url pi inside of my project and let me shrink this a little bit so over here i'm going to import the include method over here and i'll do this and all that i need to do is to include my dashboard dot urls let me bring your trailing comma over here so i have everything set up so the first thing i'm going to do is i'm going to run python manage dot py run server so i'll do a control and click on the link and here we have it open up in room so currently there's nothing showing up over here and that's simply because we haven't done anything inside here so if i'm to come into my index page and let's say type in my name kenneth and save and come back here we are going to see kenneth over here so everything is working now i also want to open a new terminal over here and do the initial migrations and things like that so i'll do python manage dot spy and i'll do migrate so this process has actually migrated the default jungle models into our project so that everything is set up i'm going to creating a super user so that i can have access to the back end so i'll do python manage dot spy create super user in the name or username i'm going to say admin the email is going to be admin at gmail.com the address or the password is what i've typed over here and i'm just going to accept this all right so i'll come back here and open a new terminal and this time around i'll do a forward slash admin so i can now log in with the credentials i used and here we are all right so now let's build it from this end so the first thing we are going to do is we are going to go into bootstrap and we are going to grab the bootstrap cdn i'll click on all releases and i'm working with version 4.6 so i'll quickly come in here and grab the starter template so i'll click on this to copy this and i'll come into the partials folder coming to base and come and paste this over here let me quickly set things up now i'll just want to change this to let's say let's type in here context and come back here and come into the nav bar i'll go and search for number but and for number i'm going to select this example and i'm going to paste this over here now i'm going to do some few modifications over here i want some imagine to the left and right so i'm going to put this i'm going to wrap this up in a container class and i'll just do it this way and come and close the div tag over here then what i need is i need a background of dark and i'll change this one to dark as well so i'll save this and for the rest of the elements in here i don't necessarily need them so i'll just love this and collapse this and get rid of this i don't need this and i don't need this as well okay so i'll save this and what i then need to do is to come inside here and use the templates inheritance to include this over here so i'm going to say include the number and it's inside a folder called partials and the reference is nav.html i'll save this and all i need to do in here is to also extend so i'll do um using this template stack i'll say extends and i'm gonna have in here partials for slash base dot html so when i save this and now come back come in refresh we now have this nav bar showing up over here so you've made some progress now the next thing i want to do is to put things in place over here so what i'm going to do is i'm going to have a container class in a div tag over here and inside of this i am going to have my block content so i'll bring in block content and i'll duplicate this and do the need for by closing it over hazel and block let me just quickly copy this ctrl c and i'll come in here and come and paste it over here and right about now i'll just want to have a rule and inside the rule i want to have a call and this is where the cats are going to be so i'll have a cut off or a call of md md4 because i just want to have three cards display over there so let me do my which is going to be imagine top and bottom of four so let's do a card and a card body over here and for now let me just say let's see 20 i just want to see how things are going to look okay so it looks good for what i want to display let's start things up over here now let's bring in the shadow and let's do a bg secondary over here and what i didn't need over here is an each and h5 of a text stationary then i'll bring in a horizontal rule and finally i'll need some h4 of the text so let's say 20 let me do it this way and i think i had a txt center over here to center the text when i refresh now this looks cool but as you can see the text looks a little bit some way so i just want to have this white okay so what i then need to do is i'll just come in here and do a txt white so when i do it this way and now come back to come and refresh you see everything showing up very nice over here okay so having done this all i'm going to do is i'm just going to grab the call over here so i'll do a ctrl c to copy this and i'll paste it over here i'll paste it twice and what i then need to do is to open it okay so i have stationary let me have electronics then for the color i'm gonna do primary over here and finally let me have boot and for the color let me do success and yeah i think that's just about it and when i come back to come and refresh this what you want okay so this is going to be the card and now let's look at the other aspect of what you want to achieve so what i'm going to do now is i'm going to go into my and let me collapse everything over here and close this so we are going to work with our model so i'm going to open a dashboard app folder and go into models and this is going to be a very simple model so i'm going to have a class of products and product is going to inherit from models. model and i'm going to have a field over here name and there's going to be a models.char field and for char field we need to specify a maximum length attribute over here and is going to be 100 now the next obvious thing is going to be the category so i'll just duplicate this and do category and for category the maximum length is 100 but then i want to have some choices over here and before we even proceed let me just have this category choice listed over here and it's going to be a couple of tuples so i'll just open this up and the first thing i'm going to have is stationary and let me just copy this so that we move very fast so i'll do a ctrl c and i'll just end it up with a trailing comma and i'll duplicate this so i'll do a shift alt and a down arrow key to duplicate this and what i need over here is electronics and finally i'll highlight this and do a ctrl d and what i have over here is food so i'll save this now we have category over here and all that i need to do in order to make this a field which i can select is i need to add in choices over here and choices is going to be equal to category all right so i'll save this and we are good to go so i'm going to run a migration over here so first of all i'm going to have python manage dot pi make migrations so after running make migrations the next thing i'll then do is python manage.pi migrates so the model has been migrated now in order for us to see it at the back end now when i come back to come and refresh there's nothing showing up over here in order to see it we need to do the need for we need to come in here and register it so the first thing i would want to do is to bring in the model so i'll do from the current models i want to import the products model we just created then i'll do admin dot sites dots register and i'll just want to register do that like this okay so after going through this when i come back to comment register now you have this showing up over here there's one last thing i want to do so what i intend doing is i just want to have a list group so i'm going to have a class and i'm going to call this product admin and product admin is going to inherit from admin dot model admin like this and over here i'm going to have a list display and this is going to be the fields i want to display from the model and as you can see over here the fields we have is name and category so those are the things i want i'm gonna have a name over here and a comma and i'll also want to have category i have these things lined up and all i need to do over here is to bring in the products admin class i just created over here so i'll save this and i think we are in business so the next thing i want to do is to come back here and add in some products i'm quickly going to do this alright so over here i have some items um saved in my database so as you can see i have maca dictionary pencil pen drive pizza and coffee cappuccino and these are the categories of the items i have in here all right so what i then would want to do is to go into my views i'm going to write in some logic over here so first and foremost i'm going to bring in the product model over here so i'm going to say from the current models i want to import products and what i intend doing as i've earlier demonstrated is to have the number of counts showing up over here okay now in order to actually do this and bring everything into context now let's change the links we have over here so inside of our now.html you can see that we have home which is okay now let's have about i'll save this about and let's having the links over here so i'll use this url template tag and this is going to be index and i'm also going to use this and this is going to be url and the name i give it is about now these names you see me type over here are the names we give the url over here so having done this now we can have the about page to also render so when i come back here to come and refresh when i click on this you're on the index page and when i click on this you're on the about page remember for the about speech it is empty over here as you can see you can simply come in here and do a ctrl e ctrl c to copy everything and just use them over here and when i refresh now you have this when i click on this you are in the home page you can check from the url when i click on this you are in the about page let me just add in some text over here so that's we can at least distinguish everything we see over here so let me put it in an h4 and i'll see about page so i'll save this and when i come back to come and refresh nowadays about page and when i click on this there's a home page so clearly we see the differences now we want to work with a count of the items over here so go into our view and we've already imported this okay now if you would want it to only appear in the index page then we write the logic within the index function and that's exactly what you are going to do so i'm going to say um for instance let's say we can have something like food tutor should be called to the products that's from the model.object dot filter because we want to filter based on the category and the category should be equal to and this time around we need to be very careful over here you need to go into the models i'm going to look at the name of the category we have over here which is food so i'll just copy food come back here and you want to filter by food now this is just going to give us everything but we want the quantity so you apply the dot count method on it just like this and the next thing i would want to do is after doing this we then need to put this in a contact stationary let's do things the proper way so i have this in a context dictionary and i'll just have to come and copy this so i'll do a ctrl c and this is going to be the key and the corresponding value is going to be what i have over here and all i need to do now is to bring in the context within this template or within the return value i have over here so now i can now have access to this food count within index.html so when i come in here instead of just typing in this i can now bring in a template tag for representing data and there's a double curly bracket and i'll just bring in the variable food total over here so now when i come back here to come and refresh we can see that this has now changed to two and that's simply because we have two instances of food in our database if i'm to adding another thing that's food let's say rice and for rice is food and when i save this and come back here to come and refresh now we can see that rice has increased all food has increased to three because we now have we have three items that have been categorized as food all right so obviously we can just do a copy and paste and change in the parameters to get these ones also fixed and in order to do so let's just go into this over here and let me just duplicate this i'll do a shift alt down arrow key to just duplicate this and we can have stationary total and we want to sort by the stationary as you can see over here then we can also have electronics tutor and we would want to sort by electronics like this okay then all that we need over here is to duplicate this and bring in the variables over here so i'll do a ctrl c and i'll do this and i'll copy this ctrl c and i'll paste this over here as well so now we are good to go we have this stationary total and electronics total over here so having done this let's just come back here into our index.html and this is going to be the electronics total so let me just do this and this is electronics total and let's come back here and do stationary tutorial so bring in the template tag and let me change this to stationery all right so when i save this and now come back to our website and come and refresh me now we see everything showing up over here and this reflecting from our database all right so this is the index feed now when i go to the about page about page is unable to reflect the data i have in there and that's simply because with the about page first of all let's go to the view without about page i'm not passing in any logic over here now a simple way to go about it is to we can just copy the whole thing over here and come and dump it over here but then that will defeat one of the fundamental principles of software engineering and which is dry right simply means don't repeat yourself so if you are doing something and you find it's repetitive then it's almost as if you're not doing the right thing so one of the ways we can handle this is to use context processes and and that's more or less of an advanced topic but then i'm going to break it down using this example so what i have over here is okay it will work we can just repeat this over and over again but imagine we have to repeat this in a number of pages then our code is going to become bulky so what i'm going to do in order to use this context and first of all let me just come into the about um page over here and let me just copy what i have over here so i'll just do ctrl c or stationary and let me just paste this over here stationary let me paste this and change the name electronics and let me also change this to food so this is what we have over here now this is about page when i refresh we are unable to fetch in that data because based on our logic we don't have anything showing up over here good so what i'm going to do is i'm going to creating a module over here inside of my dashboard app folder so i'm just going to come in here and i'll creating i'll call this context underscore processor so context underscore processor dot pi because this is going to be a module all right and it is almost as if we are just going to write what was supposed to be written over here into it okay and that's what i mean we are just going to say from the current models we want to import do that just as we have over here and the next thing we'll do is to actually grab everything we have over here okay but before we do so let's creating a function so we are going to have a function and i'm going to call this function redux context and it's going to take in a request and the rest of the logic is going to emanate from what you have over here so i'm just going to grab what i have over here so i'll do a ctrl x and i'll come in here and come and paste this over here and let me just clear things up over here now you can see that you don't have any context dictionary over here so i need to clear this good and what i have over here it's not we are not quite done yet but then i want to show you something so if i should come back and come and refresh you don't seem to have any problem when i go to the home page we also don't have this showing up over here because clearly inside of our views we don't have any logic to replicate that kind of calculations we would want to do we are now using the context processor so over here after going through this um running the import and writing the logic over here we'd want to return some value over here so i'll do return and what do you want to return i want to return the context over here so i'll save this now after saving this there's one last thing we need to do and that's going to make it work finally so we want to go into the context projects folder the project folder go into settings.pi and this is where we specified our templates now what we have over here is we have context processes okay and this is by default what jungle gives us right out of the box let me shrink this up and yeah this is by default what jungle gives us out of the box now we can add in our own context processes over here we can have a number there now these are the convention goes when you are trying to add it over here and let me put it out in the comments so first of all you are going to have the app name okay dot module name dots the function name all right this is what i mean the app name is dashboard okay we are gonna have dashboard dots the module we are using over here is a context processor this one we just created where we have the logic in here and the function is the function we have which is a product context so let me quickly run through that and let me just put it up over here so what i'm going to have is i'm going to have dashboard that's going to be the app name dots and i have context underscore processor okay that's going to be the module name and the function name is now going to be this we have over here so let me just copy this and i'll paste this over here and let me just put up a trailing comma over here so when i do it this way and now save this now pay attention over here when i just come here to come and refresh we now have everything showing up over here interestingly whenever you go into about.html you now have everything showing up over here now if you remember we haven't written any logic over here okay for the index and from the about functions or the pages but because you are using the context processor it makes that context processor we are adding into application accessible to every view unless we pass in some restrictions but by default it's going to be accessible to every view and as you can see this is the logic we are trying to implement so every logic you want to implement we are using this over here so this is just one code and we are adding it or we can use it anywhere in our program and as you can see everything is showing up over here now you find these two are very interesting there are a couple of ways you can help me grow my channel finally subscribe to cambridgetech and don't forget to hit on the notification button so that anytime i release a video you'll be really notified also share this video with friends and family who find this content very useful at cambridge we say learn programming you can do it also don't forget to pass in any comments or ask a question you want answers to thank you very much and bye

Channel: KenBroTech

Views: 297

Keywords: KenBroTech, Web Development, Django Search Functionality, Django Filter Query, How to add a search functionality to project, django project, django app, how to create a django project, how to create a django app, python manage.py, python django settings.py, python manage.py startproject, django-admin startproject, pip install django, context processors

Id: 7cASiRz6o7c

Length: 34min 22sec (2062 seconds)

Published: Tue Oct 19 2021