Search Products - Django Wednesdays ECommerce 26

in this video we're going to add search to our e-commerce app with Django and python hey guys John Alder here from cod.com and in this video we're going to build out search so we've got a search page here users can fill out the little form and we want them to be able to search for both product names and descriptions and you can see when they fill out the form and click the button we have some search results that they can then click on and go to the product pages so search in Django is fairly simple we'll be quering the database we should be able to get through this in just one video and it should be pretty fun so let's head over to recode I'm using this text editor and they get bash terminal as always and as always you can find a link to the code in the pin comment section below as well as a link to the playlist with all the other videos in this Django e-commerce Series so check that out if you haven't so far so first thing we want to do is create a page for our search stuff so let's go to our store directory and our urls.py file and I'm just going to copy one of these guys and go to the end here and paste in another one and let's call this search and the view is going to be views. search and the name is you guessed it it search right so go ahead and save that all right and now let's go over to our views.py file and let's create this function real quick so let's define search we want to pass in a request and for now I'm just going to kind of come down here to any of these tags and just grab this whole thing and paste it in so we want to return render and then request and we want to send this to the search. HTML page and right now we don't need to pass anything in the context dictionary that should be good so okay let's go ahead and save this now we need to create this search. HTML page so let's come over to our templates right click and create a new file and let's go file save and let's call this search. HTML now I'm going to come over to my let's say about page and just copy all of this over and then let's see we don't need all this weird text here let's just kind of get rid of all of that and up here let's have this say a what search products something like that and for the tagline let's say find what you're looking for okay that looks good let's go ahead and save this now we need to add this link to the navbar so that people can find this page so let's head over to our navbar and let's come down here to let's look at the page real quick I think I want it right after the home link right here right between the home and about links really doesn't matter where we put this but that seems good to me so here's our home link and I'm just going to copy this whole thing and paste in another one but instead of having this point to home we want it to say search and the URL needs to be search okay that looks good let's go ahead and save this and head over to the website and see if that all worked so hit reload we've got our search link we click on it it says search products okay pretty good on this page I want a little form sort of right here in this white section that people can type whatever they're looking for and search so let's head over to get bootstrap.css and let's come down here to cards uh there it is card and I'm just going to scroll down and find something that I like yeah let's do this one right here so I'm just going to copy this to clipboard and head back over to our code and let's go to our search section and come down here and right there let's go ahead and do that let's change this to search products and then that's fine let's go ahead and save this head back over here and just reload to see that looks pretty good now this is stretching across eight H spans for the bootstrap framework here so let's see right here call eight maybe we change this to call 10 this a little bigger yeah okay so all right now inside of here we want a form so again I'm going to come back over here to get bootstrap and I'm going to come up here to forms and click on form control I'm just going to copy this basic text here and let's come back over here and instead of all of this stuff inside of our card I'm going to create a form and let's give this a method of post and we want to give it an action of and let's create a d Jango link tag we want to point this to the URL of search which is this page we just want it to post back to itself and close that tag and anytime we create a form in Django we need a csrf token to prevent procite request forgery hacking and then I'm just going to paste in all this stuff that we just copied from get bootstrap now uh let's see we don't need a label get rid of that and the input type is not email we want this to be a text box form control it doesn't really need an ID uh for placeholder text let's have it say search for products or whatever and let's give this a name of searched okay that looks good tab this over a little bit whatever okay and now we don't need this text box so let's go get rid of that but we are going to need a button so let's give this a button of type equals submit and give it a class of BTN BTN secondary which is a gray button in bootstrap go ahead and close our button and then we want the button to say search or search products okay let's go ahead and save that head back over here and hit reload and okay looking pretty good now there's a bunch of white space here maybe I don't know maybe we'll just add a bunch of line breaks or something for now got push that down a little bit whatever so we've got this thing we can click it doesn't actually do anything so now let's set this thing up to actually pull whatever user types in into the back end and then do something with it so let's head over to our reviews up high and inside of here we want to determine if they filled out the form so a user can either just go to the page or they can go to the page and submit the form so we need to take different actions appropriately if they just went to the page we just want to show the page with the form if they went to the page and then filled out the form we want to do something so let's do some logic let's go if request. method equals post we get pass else we just want to render the page right so in the past we've used forms remember we had our let see where did it go our forms.py file where we actually defined forms and let Jango do all the work for us we're not going to do that this time because it's more work than we need this is just a very basic form a user is just passing something in it's just one thing we don't need to create a whole form for that so what we can do is instead just grab whatever they typed in in this post method that gets pass to the back end so I'm going to create a variable called searched and we're going to set that equal to request. poost and then searched and the reason this is request. post. searched is because on our form over here in our search. HTML page we named this input box searched so we're saying hey get that that input box with the name of searched and that's what this is now we're going to assign that to this variable searched now let's just make sure that worked so let's return back the page and let's pass in that searched so now let's go back to the page here and underneath the form which is this guy right here let's add a couple of line breaks and let's do some logic let's say if searched and right away I want to end my if just so I don't forget let's say you searched for dot dot dot searched and we can put spaces here if we want but we don't have to head back over here and try this again and I'm going to type in John Elder search products it says boom you search for John Elder so we know this whole thing is working right uh the thing got passed into the website we processed it sent it back to this website and then output it onto the screen so all right very cool so now let's see I would maybe take out one of these and then add some more here so now we need to actually run a query for our database so let's head back over to our views up high let's query the products database model now you remember if we head over to our models.py file we have our let's see scroll down here we have our product model and that has name it has price category description is sale sale price and you could search for any of these things you could search for name you could search for price you could search for category right I think we should start out with name and then maybe add in description that sort of makes sense for me if you wanted to add a function to search for price you could do that too but I don't know let's just stick with name and description and to start with let's just do Nam we'll just keep it very easy and just one thing so let's take our searched variable here and let's set that equal to we want the product Doob and we want to set up a filter now we can access our product model because up here we from Models imported product way back when if you haven't done that be sure to do that so that we can access that model otherwise you can't read it right so we got to import that now we need to set up a filter so filters in Django are pretty easy you just say the thing you want to search in right so we want to search in name because our models.py we've got this name category right field whatever you want to call it we want underscore underscore and we want I contains now you can have just regular contains but I want I contains I contains allows us to search that's not case sensitive it's insensitive I insensitive so if you you know if we search for for instance if we search for python or we search for python notice this is a lowercase p and this is a capital P this will both return the same results you know we don't want to say it has to be capitalized if the name of the book is capital P Python and you search lowercase p it wouldn't return that result we want to return that result so we want it to be insensitive case insensitive so it could be uppercase or lowercase so we set that equal to our searched variable right which is whatever the user typed into the form so okay product. objects. filter name underscore underscore there's two underscores here right I contains searched we're already passing that back into the page now it says you know you searched for actually let's put this line break back so we want to get rid of that now let's just print out searched to see what this is actually returning because it's going to return possibly many things and it's going to be an object looking thing so let's just save this file and let's type in Python search and we get this query set with looks like two things in it very cool if we type in programming and search for that we get another query set with one two three four different things in it so all right coming right along now obviously this is not the search result we want for the user they don't know what this is this is meaningless to them but what we can do is head back over here and let's create a for Loop in our little section here so let's go for product in searched and for now let's just output product and a line break as always we want to end our four right away okay so now if we come back over here and hit reload and do this again this is Python Programming T programming rubri programming and PHP programming we're getting somewhere it's still not looking great but we can modify this fairly easily but before we do that let's say I search for Bob it just doesn't do anything so we need some sort of logic in here to determine hey did it actually find a result if it didn't give us some sort of message or something right so let's fix that real quick head back over to reviews.i and after we query the database Let's test for null right so let's go if not searched then let's give a little message let's come down here and grab any of these messages and let's say sorry or that product does not exist please try again and then maybe we want to pass back in the page but with no searched information else we want to do do all this stuff send it back send it to the page send our query search results and go from there so let's go and save this head back over here make sure that worked I'm going to type in Python okay we get two things if I type in Bob babo we get a message that says that product does not exist please try again and then I can type in programming we could try again and it works all right so that's great but we don't want just a list of things that look stupid if we come to our homepage we want it to kind of look like this or youve got like a categories page same thing so I'm going to use the categories page and let's come back over to our code and go to our templates category. HTML and let's just sort of come down here and here we have the same for Loop for product and products and we check if it's on sale if it is we do a certain thing if it's not uh we have an else statement right here here I'm just going to copy all of this stuff all the way up to the end if but not the end for and let's come back to our search. HTML and inside of our for Loop here get rid of that product thing just going to paste that in so let's save that and that might just do the trick so let's type uh Python and whoa we get very big stuff here all right so we need some bootstrap classes let's come back to our category page and let's see here this div will probably do the trick let's just copy it and above let's see above our if searched area paste in that div there we go and we need to close that div so let's come down here to the bottom after our end four I suppose and close that div okay that looks I think hopefully good or maybe it's there yeah somewhere around there so let's come back over here and hit reload and boom now we get these two things if we type in programming we get four things very nice and one of them is on sale if we type in Bob we get nothing that product does not exist all right so that's great we've got now a search for our product names what if we also want to include descriptions well first I don't know that all any of our books have descriptions so uh let's log into the admin area and add one real quick let's go to our product section and I don't know let's go do com lifestyle it has description of com lifestyle let's also type in Bob why not save this okay so now let's head back over to the website and if we search for Bob now we won't get anything why because we haven't set this up to search for descriptions yet right so this is actually kind of interesting and a little tricky not really intuitive if we come back over here to our views.py file this is our filter right this is where we're querying the database and we're looking up one thing right so we've got the name remember our models.py file has for products here name and description so we also want to search description how do we do that well we can query multiple items using a filter if we import a little thing up here at the top so let's go from django.db Doods we want to import Q This is not Q andon This is D Jango q and I suppose the Q stands for query I don't know that for a fact but I'm guessing it stands for query so let's go ahead and save this now we can use Q's inside of our filter to do multiple queries so here we just go q and then we wrap this whole thing in parentheses right so this is one query now we can say or by using the python pipe it's just a straightup thing that's sort of like saying or right I think normally in Python it's in some languages it's double pipe for this it's just one pipe and then here we can just make another query so let's go query and again just set another set of brackets and now we want the description to underscore uncore I contains equals searched which is again our query thing here now I'm using contains and I contains again because I want this to be insensitive case insensitive so it could be uppercase or lowercase but I'm using contains because I want whatever they search for to be somewhere in the description or somewhere in the title it doesn't have to be exact if you want it to be exact there are different search queries you can do for exact things but I think that's kind of dumb you don't want exact things in a search because people aren't exact they don't know what they're searching for they might type in book you know you know it's you know you just want to be as broad as possible so now this will return anything with the name of whatever they searched or the description of it so now if we save this and head back over here and search for Bob that do lifestyle comes up if we search for . again that shows up because that's the title if we search for python we just get two things there is no Bob in there um let's get crazy let's go to admin and products and let's find one of the Python guys let's change the description oh there actually isn't a description this must have been before we set that up uh let's try python Journal yeah it has a description so let's go Bob I don't know I don't know why we're using Bob okay so now let's search for Bob we get two things if we search for python we get two things but also the python Journal is one of those things we can view the product go to the page hey Bob right very cool and that's all there is to it so I think that's a pretty good search function and we still got all those line breaks maybe we'll take those out I don't know whatever I'll leave that to you got this nice little box it's looking good it's bootstrap ified it kind of glows when you click on it and very easy so that's all for this video if you liked it be sure to smash like button below subscribe to the channel give me a thumbs up for the YouTube algorithm and check out codemy.com or you can use coupon code YouTube 50 to get 50% off lifetime membership so that's access to all my courses over 60 courses thousands of videos and the PDFs of all my bestselling coding books joing over 190,000 students learning to code just like you my name is John aler from cod.com and I'll see you in the next video

Channel: Codemy.com

Views: 3,281

Keywords: django query, django search, django Q, django Q Filter, Django Search Query, Django Model Search, Django Database Search, Django Ecommerce Search, Django Ecommerce Product Search, Codemy.com, John Elder, John Elder Django, John Elder Django Tutorial, Django Wednesday, Django Wednesdays, John Elder Django Wednesday, John Elder Django Wednesdays, django tutorial for beginners, john elder django ecommerce tutorial, django ecommerce tutorial, django ecommerce website tutorial

Id: A0mSfYDH-nY

Length: 21min 5sec (1265 seconds)

Published: Wed Feb 14 2024