Search Functionality in Django Project

hello everyone this is kennedy from cambridgetech and welcome back to the channel so in this video we are going to look at how we can add in search functionality into a django application so this is going to be a very simple project so what i have over here is i have some kind of data entry from my database model and this is what i have over here and within this we want to search and finding a particular item or objects inside of our model so normally you have this search bar over here where you can type in either the first name or the last name now first of all i'm going to show you two things i'm going to show you a simple query where you can search by only the first name and also another way you can search by only the last name and later you're going to see how we can add the two together so you can search by the first or the last name so let's continue with a quick demo so let me search the name kenneth and when i click on search you can see that it sorts everything out and it only gives me the entries where i have kenneth in there now if you are very observant we have um within the last name we have brony over here and we also have bob browning so for instance we have kenneth browning and we have bob rony now if i'm to search brony and click search it's going to sort or it's going to filter through the list of items i have in my models and it's going to only give me instances where i have brony showing up whether in the first name or the last name so this is going to be the project we are going to build and it's going to be very simple and very easy so let's begin okay so what i have over here is i have created a jungle project and the name of the project as you can see over here is a search project and i've also created a jungle app and the name of the app is dashboard now inside the projects inside of settings.pi i've actually done some few things over here and that's basically to register the first thing i did was to register the app over here so inside of installed apps i have dashboard.apps.dashboard.config then also i have this setup over here where i want to link um the system to my templates folder which i have over here so this is basically everything i've done in settings.pi then also in my template folder like i showed i have a folder in here called dashboard and it's actually corresponding to the name of the app this pretty much everything i do in almost all my videos then i also have partials where i'll be having some partials which i'll be including using template inheritance so inside partials i have base dot ecm which is currently empty and i also have nav dot html which is also empty then inside of the dashboard subfolder within templates i have index.html which is empty so primarily this all that i have done all right so now let's run the project so i'll do python manage dot pi and i'll do run server all right so we have everything running up over here so i'll do a control and click on this link to open it up in chrome now one of the things i also need to mention is the fact that um [Music] let's create a new terminal and i've migrated the default model and i've also created a super user so what i'm going to do is i'm just going to come in here open a new terminal and type in this and do a forward slash admin because i want to have access to the admin page so i'll type in my credentials my username and my password i'll leave links in the description on how to handle some of these things which i've covered in other videos so you can see some of the videos showing up over here so i have this and now we need to work over here so i'm going to go into bootstrap getbootstrap.com and we are definitely going to use um the version 4.6 now i'll be covering a video where i'll be handling bootstrap version 5.0 and the latest one 5.1 so that people who want to start using that to also have a feel of it so i'll come down here and grab in the starter template so i'll click on this to copy then i'll come into my base.html and this is where i need to paste this over here now there are some few things i would want to change first of all let me change the title instead of hello world i'll say whom all right now we'll come back to this but then let's go back to what we have over here and work out some few things so let's go into our dashboard um app folder then we are going to the views.pi so we are going to creating a function based view so i'll declare function index and a passing a request as a parameter then for now i'll return render and the first parameter i need to pass in here is a request and the name of the template the template is um dashboard or it is in the dashboard sub folder within the templates folder and it's going to be index.html all right and that's exactly what we have right inside this template folder we have a dashboard subfolder and inside of this we have index.html that's what i have over here for now now in order to get this working properly i need to creating um a url.pi module over here so i'll click on this and i'll do urls.pi inside of the dashboard um app folder so over here i'm going to run an impossible see from jungle dot urls i want to import path then i also want to say from the current directory i want to import the model [Music] the module views okay so that i can have access to the functions i'm writing in there so i'll do url patterns and it's going to be a list so i'm going to call in the path method and for now let's leave it as an empty string and i'm going to have access to the index function from the views module over there and i'll give it a related name and i'll just say index like this so i'll save this and the next thing i need to do is to come inside of my let me collapse this i'm inside my search project so there's a project folder coming to urls.pi over here and pretty much come and inform our project that we are doing some internal routing so i'll import the include method over here then all that i need to do is to also bring in a path and this part is going to include everything in dashboard dots urls i think dashboard like this all right so i'll save this and at least we have something to work with so if i'm to come in here and back into my project and come and refresh you see that we have an empty slate okay because it is actually picking from this index.html and if i'm to come in here and do let's say type in my name connect brony and save i come back here you're going to see can it bring you over here but this is not what you want you want to use the bootstrap and all that all right so now that we know that everything is working let me organize our work very well so over here we are going to use template inheritance and remember we have inside of the partials.html and that's grabbing the bootstrap cdn so we need to inform our files that we want to extend it into this particular html so i'm going to bring in the template tag and we are going to say extends and the path over here is we want to look into the partial subfolder within templates and all that you want is base.html alright so when i do this and all that i need to do is to give it a block content so i'm going to say block content and i'll duplicate this over here and after the block content i need to end block so i'll save this and if i'm to type in let's say an h1 and type in my name kenneth now when i do it this way it's not going to show up yet because i haven't done so much okay now we see hello world instead now this hello world is actually coming from the base.html and that's what you see over here now we don't want this but instead of this you want to have the block content so i'm going to say block contents and these are topics i covered in other videos i'll leave the link in the description and also in the card showing up here so i can do end block and when i do it this way we are going to see that the name connect is going to show and this is basically what's happening this block content is like a block inside of our projects and whenever we see block contents we are trying to say that this is being imported into what you have over here now there's one last thing i would also want to bring over here and that's the number so inside of the navbar let's go into bootstrap and grab the navbar over here so i'll come in here and search for another and i'll grab in this template over here i'll click on this and i'll come and paste it over here now there are some few things i would want to change i want to put this in a container class so that i have some margin to the left and right and i need to end it over here so i'll just duplicate this loosen div tag and let me use the background of dark over here so that everything looks cool so now this is okay and in order to bring it over here we just have to put in the include tag over here so i'll do include and over here i'm going to say partials and i'll do for slash nav dot html so i'll save this and when i come back here to come and refresh you can see that you have this nav bar showing up good now i would want to have this in a container so that i also have that margin to my left and right so in order to do that all i need to do is i'll probably grab this okay so i'll do a ctrl x to cut it and i'll put it in a container but even before that i want to have a row and paste this in here all right so i have it this way and if i come back here to come and refresh you know how it's showing up this way all right the next thing i want to do is to grabbing a table where we have everything listed in a table and we just grab this template so i'll click on this to copy and i'll go into my index.html because that's where we are getting the data from and all that i need to do is to bring in the table over here all right so when i come back here and come and refresh you can see that you have this table showing up over here okay so there are some few things we need to change i just want to get rid of this and change this to first name last name and i think age so i'll get rid of the first rule over here then i'll change this to age and i also get rid of this and finally get rid of this as well yeah there's one last one over here all right so everything is looking cool and if i'm to come back here and come and refresh now we have this showing up now you want to type in the name over here click on search and see whatever is going to happen over here but before we do that we need to first work on our model so that you can have some data in our database and in order to do so we need to go into our app folder and go into models we don't have any model over here yet so what i'm going to do is i'm going to create a class and we are going to call this data and we are going to inherit from models. model and we are going to have a first name and there's going to be models dots chart field and for chart field it is mandatory we give a maximum length parameter over here so there's going to be a maximum length of 100 and i'll duplicate this and i'll simply change this to last name all right then the last thing i would want to do over here is to have age is equal to models dots then over here i'll choose positive integer field because uh age is definitely going to be zero or anything above zero then for a default value i'll say zero then the last thing i want to do is i want to have a strange representation of um the model so i'll do a def underscore underscore str a double underscore and i'll pass in solve then i'll return our tensile dots first name like this now the last thing i would want to do is to come into admin.pi and come and register the module over here so i'll see i run an import i'll see from the current models i want to import and i want to import data so i'll do admin dot site dots register and i want to say data over here so so after saving this we need to run a migration in here so first of all we are going to do python manage dot pi make migrations so around this and we need to finish it off with python manage dot pi migrate all right so we are good to go so having done this if i come back here and come and refresh you know i have this data showing up over here now i can add in some data and i'm quickly going to do that all right so what i have over here is i have these names saved over here and we want to show them or display them in here so we are going to go into our views and write in some query sets so inside of our views first of all we need to bring in the model over here so from the current models i want to import data all right then inside of this function i can have data is equal to data.objects dot all and i'll pass this in the context dictionary so the context and for my key value pair i'll have data as my key and the value is going to be data now all i need to do is to pass in the context as a parameter in the return value and this is going to make it work but in order to have this work properly we don't need to come into our templates and we just need um just one table row so the rest of these are going to just go off and we are going to use a loop to loop through this all right so all i need to do is to come in here and run a loop so i'm going to say for data in data and the next thing to do even before you type in anything is to say end for before you forget so over here i'm going to use the double curly bracket to bring in data so i'll do data dots and it's going to be the first name so best underscore name and i'll have over here i have data dots last underscore name and finally i have data dots age so i'll save this and if i come back over here we don't have the entries over here good now the next thing to do is to bring out the search functionality so that's anytime you type in something and search it's going to filter through this all right so what i'm going to do is i am going to go into my nav.html because that's exactly where we have this search bar showing up and this is within this form okay and as you can see we have the inputs and the type is search the placeholder is search and that's what we see over here now i'm also going to add in a parameter over here and that's going to be the name and the name for now let's use qr so i'll save this and yeah i think that's just about it for now and one last thing i would want to do is to bring in a template url over here so i'll do url and i have index over here so that's when i click on navbar is going to refresh and that's exactly what i want over here so first of all let me refresh this and when i click on this good so let's go back into our views dot pi to write our query set so i'll come in here so what i'm going to do is i'm going to come in here and say if the queue parameter we used as name over the if queue in dots get if q in request.get they want to set up a new variable we are calling q and this is going to be a request dot gets and we are passing in the queue parameter whichever item or whichever thing that we are going to type in over there all right so when this is satisfied then you want to set up a new variable called data and that's because we are using data over here so we want to maintain some consistency so data is now going to be the data dot objects dot and this time around we are not going to use all but then we are going to use the filter method over here and what do you want to filter we want to filter for instance the first name so we do first underscore name and this is actually going to conform to the model name we have over here so we want to filter through the first name all right then we are going to do a double underscore so underscore underscore then i'll say i contains and we do is equal to q which is the query we passed in over here so what we are trying to say is if through the query sets we are trying to make over here and inside of the nav we have this q over here so if whichever we are typing in okay we are saving it as q if whichever we are typing in and that's going to be the request.get and we are saving it in a variable called q then if that's the case then we have a data or a variable data and you want to filter through the objects that we have and even the first name contains that thing they want to display it so if that's the case you want to display this else so let's bring in else over here so else we would want to indent this one to else then everything should just show up so now let's save this and see how it works so after saving this let's refresh good now let's type in a name like kenneth so let's see kenneth over here and when i search i see that it has been sorted and we have connected over here now pay attention to the url you can see that you have here is equal to kenneth and that's exactly what i was trying to explain now let's refresh this and bring this back now you can see that we have common chroma over here so kwami is the first name and then chroma is the last name now kamikuma is an african legend and uh you can just check him up and we also have kwame abu so we have two qamis over here now when i search in or when i search for kwame and click on set you can see that so far as it contains kwame it is going to filter through what i have over there and now this is what you have so basically it is what this logic is trying to say if the parameter we passed in over there and as you can see the q is equal to kami so if we are saying that if for instance with the example that we are using kwame is in the request.get then we are saving that request or get in a variable called q now the data that we want to see or the query set you want to do is actually the data.object.filter and you want to filter through the first name contains um there's a value q now let me come back here and let's say if you want to filter or search through the last names okay and if i'm to type in brony which is obviously a last name showing up over here when i click on search it's not giving me anything and that's because our logic over here we're only filtering through the first name so it is only going to be possible to also do something like last name and now the query set is now going to work so when i search through [Music] um brony as you can see over here now you can see that everything that contains brony is showing up so for instance i have kenneth bruni and i have bob brony showing up over here now we don't want to have it this way because somebody can just or somebody want to search kenneth and kenneth is not in the list of last names so if you search it's not going to show us anything because it is empty what we then need to do is to actually use some kind of a complex query okay so what i'm going to do over here is i'm just going to comment this one out because maybe um there'll be a need to use this one way or the other so i'm just going to leave this commented and what i'm going to do is i'm going to say from i'm going to run an import from django dot db dots models i want to import i want to import q and it is this q complex query that's going to help us over here so all i need to do is instead of doing this now i can call in a variable and let me call this variable let's say multiple queue like multiple queries something of that sort and all i need to do is to bring in this queue i did a video some time ago where i use this skill in some query so all that i need to do now is to actually do this so i have this q and i need to pass in some arguments over here now the first argument i'm going to do is not too much of a difference from what we've done over here so i'm just going to say the first underscore name then double underscore i contains and it should be equal to kill just as i have over here okay then because i'm using this q i can now bring in multiple queries so i can do i can pipe it this way so this is basically saying like all so what i'm trying to say is if the query sets includes the first name or let me type in kill also should include the last name so i'm going to do last underscore name and that's called underscore i contains then i'll do q like this so when i do it this way let me close this up so that we see everything when i do it this way now i can i can see data should now be equal to the data dot objects dot filter we are still filtering and what do you want to filter but i want to filter by now this multiple query we have over here all right so now let me save this and let's go back into our browser and see what's happening so now refresh and we don't seem to have any problem now let me search kenneth and remember kenneth is we are searching based on the first name so when i say this we have kenneth over here now let me refresh and now let's search based on the last name and if i'm to do brony now when i search we can see that we are using multiple query sets so whether we search by first name or we search by last name we are definitely going to see this showing up over here and that's pretty cool and we can do any search that we want to say so let's search by john and we don't have to even remember whether is the first name or the last name and clearly you can see that you don't have john doe and john mills over here now as you can see we can also search using the age so that's also something you can do but then i'll leave it as some kind of an assignment for you to do so just um you can add in multiple query sets over here and you just have to reference it when you are done all right now this is the end of this video so you find this tutorial very interesting there are 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 families who find this content very useful at cambridge bc lm programming you can do it don't forget to pass in any comment on ask any question or make suggestions to videos that you want me to do thank you very much and bye

Channel: KenBroTech

Views: 1,079

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

Id: iFlSrEuyl8I

Length: 30min 3sec (1803 seconds)

Published: Tue Oct 12 2021