Create A Search Bar - Django Wednesdays #9

what's going on guys john elder here from coding.com and in this video we're going to add a search function for app with django and python all right guys like i said in this video we're going to add a search function but before we get started if you like this video you want to see more like it be sure to smash the like button below subscribe to the channel give me a thumbs up for the youtube algorithm and check out codeme.com wrap dozens of courses with hundreds of videos to teach you to code use coupon code youtube wanting to get 30 up membership that's all my courses videos and books i want that fee just 49 which is insanely cheap all right we are moving right along with our sort of club app and in this video i want to show you how to add this search function up at the top here so uh you can see we can search for you know anything click here you search for city it's clickable we can go to the actual city park page we can come up here and click vegas whatever we get these two vegas place click on it good to go so that's we're going to look at in this video alright so i'm using the spline text editor and the git bash terminal as always and as always you can find a link to the code in the pinned comment section below as well as a link to the playlist for the other jingo wednesday videos so check that out if you haven't already so all right the first thing we need is a page that we can redirect to whenever somebody searches you know that will have the search results on it so let's head over to our templates events and let's create a new file and let's go file save as and we can save this as anything we want but let's call this searchunderscorevenues.html because that kind of makes sense to me we're going to search the venues right so i'll just pop that there and i'm going to head over to my home.html and i'm just going to copy all this code and sort of paste it in here and get rid of this i'm just kind of copying this so this will put our nav bar up on the screen and here for the h1 let's type in you searched for dot dot dot and we'll get rid of the rest of this stuff for now so okay let's go ahead and save this so we've got this page now we need a url to point towards the page so let's head over to our urls.pi file and just sort of come down here and again i'm going to paste that in and just copy any of these basic ones and paste it in and we can see let me just copy this again so this is going to be search underscore venues we want to point this to views dot search underscore venues which we haven't created yet and we want the name of this thing to be search underscore venues or maybe search dash venues we sort of have this dash theme going here so we'll stick with that okay so that's our url so let's go ahead and save this so we've got the page itself we've got a url we need the third thing that you always need whenever you create anything with django which is this view so we call this view search underscore venues so we need to create that so let's head over to our views.pi file and anywhere in here we can just define search underscore venues we want to pass in request as always okay so i'm going to paste this in one more time so what do we need to do well the first thing we're going to have to render something render a web page so let's see here's where we'll copy that so here we want this to be events slash search underscore venues.html and for now we're not passing anything at all so we can sort of get rid of that okay so you just sort of put this on different lines so we can see it easier okay so strictly speaking this is pretty much all we need so now we're going to need to do some work here to actually query the database and stuff but we'll get to that in just a second now i want to head over to our nav bar because if you see on our site pull this back up and hit reload here's our nav bar we've got the search thing if we click this now nothing happens so we need this button to now point to that new page we just created so let's head over to our nav bar that's in our templates slash events folder look for navbar and just come down here to the bottom and where you see search that's the form there and right off the bat i'm going to change this from btn outline success to secondary that success makes the button green secondary makes it gray so hit reload okay so now the button is grey it's a little thing but you know kind of bothers me so i like gray better this sort of keeping with the theme of black and gray so okay that's that now we need to actually point this thing somewhere so here's our form thing and this is going to be let's make this a method of post we want to post this form and let's give this an action of something well let's use a django url tag and this is going to be a url and where do we want to point this we want to point this to let's grab our url we call this search dash venues so right there boom search dash venues so okay that is almost good now we also need a csrf token anytime you have a form with django you always need a csrf underscore token so a cross site request forgery token helps keep hackers from hijacking your form so okay let's go ahead and save this now i don't know that this will actually work just yet we can give it a try come back here and hit reload if we click this yeah it goes to you searched for if we type in something here it'll still go to this page you see search venues but it doesn't actually say anything yet we're not doing anything with whatever we typed into this box yet so now we need to do that but at least we're coming along pretty quick and easy so let's head over to reviews.pi file and we need to determine whether or not somebody has gone to the page or has posted filled out the form and posted to the page if you'll notice if you come back here here we're at search venues if we just go to this page it still shows up so right now it makes no determination whether you're clicking whether you're just going to the page or whether you're filling out the form so we need to fix that so let's do that with an if statement let's go if and let's go request dot method equals host so here we're saying hey if they actually post then do something what do we want to do well right now we just want to return this thing all right let's copy this let's go else we also want to return this thing we'll see it's going to be slightly different okay so now let's head back over to the nav bar and you'll notice if we look at the website we've got this one input box right so if we look at that in the code that is this box right here input and you'll notice it has a class of form control it has this type of search as a placeholder let's maybe change the placeholder to search venues so if we save this come back over here hit reload whatever now inside of here it says search venues i think that's a little better but that's just cosmetic what we need to do is add a name to this so we can reference it so let's call this name equals and what do we want to call this i'm just going to call it searched because it's just one thing it doesn't really matter what you name this we just need to be able to reference it later on so we call this search go ahead and save this now head back over to reviews.pi file and we can sort of see whether or not there is a search did somebody fill out the form if so then there's a search so how do we do that well if you look in other things we've done with forms we created an actual form like this venue form right which is over here in our forms.pi file it's a whole thing we did the thing now we could do that right but this is just a sort of a simple thing so instead i'm going to show you sort of a hacky easier way to do it when you're not that serious about the form and we're not that serious about this form it's just one little field right so what we can do is create this variable and set it equal to request dot post and then brackets and then searched now sometimes this works for people and sometimes it doesn't doesn't sometimes instead of square brackets you have to use parentheses right i don't know why play around with it if this doesn't work for you for some reason try parentheses if that doesn't work google request post brackets and maybe look that way but but this usually does work so now this variable will be whatever this is which is whatever somebody typed into that box so now we can just make sure that we got this correctly let's pass this back to the page so let's come down here and pass it in as a dictionary right so we could save that now let's head back over to the page itself and up here let's go hey is there a searched so let's go if searched and i always want to close my if right away otherwise i forget so let's go if search let's say you searched for and then let's pass in searched and then we can go else let's go h1 close our h1 hey you forgot to search for a venue dot dot okay so now if we fill out the form we'll have a search and it'll say hey you search for whatever you search for otherwise it'll say hey you forgot to search so let's go and save this and test this out so let's just come back here and i'm just going to click on this and hit enter and it says hey you forgot to search for a venue otherwise i'm going to come here and type in bob you search for bob so okay the form is working we're passing something to the back end to the views.pi file we can then do something with it in this case we're you know sort of passing it back to the page itself so now all we have to do is query the database to search how do we do that well this is incredibly easy and a lot of fun and it's one of the reasons why we like django so much it's really easy to search and query the database so up here we can take our search and let's create a new variable called venues this will be the returned search results of venues since we're searching for venues so what do we want to do well we want to search venue dot and we want to grab objects from the venue model but we want to filter them by something so why venue well because remember our model is not pi file that's the venue model right we want to search that model so we want to find we can search by anything but it's probably best to search by name so we can do that by filtering by name and we do that by going name underscore underscore contains and then set that equal to something what do we want the name to contain whatever the person searched for so we could just pass in searched that should do the trick so now we just need to pass this back to the page itself so we come back down to our context dictionary and just pass it in like we always do with other things and so now we can access this venues on the page itself so go ahead and save this head back over here and underneath where it says you searched for let's put a line break now this could return one thing it could return 50 things it could return a bunch of things right we don't know so we're gonna have to loop through what it returns and print each one out on the screen so we need a for loop for that so let's go for venue in venues that venues is what we're passing to the page right and i always want to end for because otherwise i forget so here let's just print out venue and we'll play around with this in a bit and we probably also want a line break so they're one per line so okay let's go ahead and save this and head back over here and first let's look at venues and see what we got we've got las vegas vegas city park so let's try city i'm going to search for city click here to search you search for city park let's search for vegas because we have several we have a couple with vegas in the name so here you search for vegas and maybe you want to change this maybe we don't care what we searched for we don't really need that on there but i'll leave it there and you can see we've got the names of each one now we can access the entire model not just the names so if we head back over here and look at our model in our venue model here we have names address zip codes phone web email address so let's try web say we want to put their their name and their website so we just do that by coming back over here and here we can go venue and then maybe we want to dash and then here we want venue.web right so whatever you want from the model you just dot and then put it on so if you wanted for instance the phone number then you would put venue dot phone right whatever it's called in the model where'd you go these things here you can reference them right so we've looked at stuff like that before so okay let's go ahead and save this head back over here save this save this make sure everything's saved come back here and let's search again for vegas click search and now we get the url right so maybe the url is not clickable we can make that clickable i think i showed you how to do that in last video now we can make this entire thing clickable you notice this one doesn't have a website because it doesn't have a website if we go back to venues and look for yeah see it doesn't actually have one of those so very cool so if i type 41 area 41. and now head back over here and notice this is a capital v in vegas if i search for lowercase vegas it's still going to show up so it's not case sensitive so that's nice that's what you want in a search you don't necessarily want it to be case sensitive so all right let's head back over here and get rid of this url thing i don't really want it what i really want is to make these clickable so that they can go to the page that has all of the information for each venue so to do that we just wrap this in an a tag so a her f equals and then closing a tag and how do we search for venues well we looked at this in the last video so if we come over here and show venue no let's see the venue page we see this url so it's django url now i'm just going to copy the whole thing it points to show venue and it passes the venue dot id we can reference the venue dot id because like here we just did venue.web we could also do venue.id right whatever so we have access to all of the model stuff for our venue model so i just pass this guy in there url show venue venue id and go ahead and save this head back over here hit reload resend and boom now these are links if we click on it las vegas high school gym it goes to the las vegas high school gym web page which is show venue slash three which you can also get by going to here and clicking on that goes to the same way or you know you can search let's search for vegas there it is we click on it oops clicked on the wrong one boom right very cool so just that easy to create a search function oh and you can search for anything we're searching the we're searching the venues model but you know we've got it over here on models.pi file we've got a venue model we've got the my club user model we've got the event model you can search for all of these things in the exact same way you just grab the thing you search for run a venue.objects.filterby and here we're doing filter by name where it contains searched and that sort of makes sense right if you're searching for something you don't necessarily know the exact name you might not necessarily know the full name you might know one word or two words or something like that so if it contains it that's probably what we're looking for that will then return it as this variable which we then just pass into the page loop through spit it out onto the screen as always boom boom and just that easy and also still when we search so vegas it's going to search venues right we don't have a link to search underscore venues in our navbar anywhere but if somebody was trying to be a little sneaky and just went to this website for instance we just went to the website it says hey you forgot to search for a venue and there's nothing else on this page maybe you would want to put another form underneath this or maybe you would put a message that says you're not you don't have access to this page you know whatever you like i'll just leave it like this because who really cares but uh very cool and just that easy now you could also style this page however you wanted maybe you'd make a table out of it like we did here on our venues page uh you know whatever you like to do you can do that but i'll leave that to you and uh pretty fun so that's all for this video if you like to be sure to smash the like button below subscribe to the channel give me a thumbs up for the youtube algorithm and check out coding.com you can use coupon code youtube1 to get 30. memberships to pay just 49 to access all my courses over 47 courses hundreds of videos in the pds of all my best-selling coding books join over a hundred thousand students learning to code just like you my name is john elder from coding.com and i'll see you in the next video

Channel: Codemy.com

Views: 26,607

Keywords: django search bar, django search filter, django search form, django search database, django search api, django search function, django search engine, django search table, django search field, django search form tutorial, django search query, python django search, django filter queryset, django filtering, django filter table, django filter tutorial, codemy.com, john elder, john elder django, django tutorial #9, django search box, best django tutorials, how to django

Id: AGtae4L5BbI

Length: 17min 4sec (1024 seconds)

Published: Wed Mar 17 2021