Build Search Bar Using Angular & Laravel API | Part 1

hey what's up everybody so welcome back to this fabulous course in this video i'm gonna explain you about how we can work with the lamp stack so uh the backend is basically created with the help of larval where we have this larval search api and we have tests with the postman with the help of postman we are able to search the results and we are searching on base of title and the description we have a database we have created here the uh the seeder which will help us to generate the data and we have records of data that will be helped to to fetch the data and with the help of the angular we are able to search the product now we have a search bar here and as long as i type something here let's suppose if i type a and all the records which which actually match with the a it's it's going to show up right up here so we have a list of data so as long as i can type on based on the title and the description so let me type here the title first in order to test this one so if i use here e-x [Music] m-o-l-l-i-t-i-a you see now we are actually now if i type something wrong which doesn't exist so you see the data disappeared so that's the beauty of how we can work with the uh with the search and as well as i can search with the help of the description so let me gonna try uh search uh this and no n or actually um i've just reached to the to the description uh so i i just want to search the description once more so exp ili cabo and let me search make this search more descriptive um more precise so you see now the description is actually searched with a very good way so we are actually searching the result both on base of the title and the description plus we have here another topic now if i just click on this description and you see here we are able to uh to to get the result of the description so we are actually getting the title and whatever i type here now we actually able to get the results on on the on the descriptive form so once i click on it it rocks to the end of the page and we are able to check the complete uh the the description of this link right so that's what we are going to build in this video so i hope you guys love this so the first we will create the the larval backend api and then we are gonna work with the search and after that we are gonna work with the last phase which is the description uh like if i click on link and it's gonna go to reach to the detail page so that's what we're gonna cover in this lamp stack video so don't forget to like and subscribe and i'm gonna start this video right from the scratch so let's jump in and get started here hey what's up everybody so welcome back to the slamstack tutorial so first we will uh build the larval backend and then we will work with the front end as an angular right so first we will create the search api in laravel 8 and then we are going to work with the api and and make that an application in the front end angular as a search engine right so first we have to create here a very basic a search api using live so let's jump in and get started here and i already created here the laravel project with the help of composer create dash project laravel slash larval search underscore api all you need to do is to go into the into this directory search underscore api and open up with the help of vs code so simply type code space dot make sure you have git bash install and you have vs code installed in order to access that right so once you're gonna move inside you can use any text editor if you want but i prefer vs code all right so here i'm just inside my code and i already run php artisan server and that's the application running over here now if i just open up my postman and this is basically something that you can use um i'm gonna open up a new one and this is something that can help us to test your api and uh very basic installation all you need to do is just simply go to the postman and download that and the very basic something like this gonna open up and you can simply click on the file and new and that's how it can bring up right up to you inside this panel and in order to check your api or you can check your server is running and if i just want to test my on so i just simply need to type 8000 and make sure it should be http call and double slash and if i try to send the request and go to the preview so you see here just me uh make this uh um yeah i think it's just a little bit harder for me to yeah okay that's fine okay so here you see the preview open up everything that that it shows you the success of 200 requests make sure it should be the get request and uh something that is not in if if you include the body that should be the post request but in our case we are just dealing with the get request and that's the preview you see so that's basically helpful for testing your api all right so now if i just open up my uh my uh very fresh copy of the larval installation so a few things that i need to set up first so let's go inside your uh you need to create some migration for your product so i'm going to create here a table with the name of uh let me make this down actually and i'm i'm going to open up another terminal and let me check this out it works so php or it is artisan make model and let's give it the but i i have to first do a few things i need to set up my environmental file and i just need need to change that to search our laravel underscore search underscore api and that should be the name of the database that i'm going to create here so i already opened my database so just simply name up right here and creates that so it's created with the table and with the help of migration i'm gonna create my table all right so that's set up and the next thing that i'm gonna do here is let me go inside my terminal and let's type a php reset make model and let's give it the name of php product dash m for migration right and this gonna create actually say something here that too many argument to make model come on expect argument's name so something is gonna php artisan make model oh actually i don't know what's happened here so php artisan make model product dash m for migration and that's migration is built successfully and if i go to my database migration and there we are so create products table so a few things that i need to set up here so the first thing that i need to add is my description so let me add here the migration for the table so it should be of type string so let me add that up here title and i just want to grab this one and paste it three more times and let me change that to title description the third one should be image and the last one that i need here dollar table and string and make that to be of type integer and that should be price all right so that's fine so now our table is linked successfully so all i need is php is in my grade and that's going to create the table for us so if i go to my migration inside my database and let's see inside the table which is products and you see now the columns are migrated successfully now i i want to insert some data in order to test my search api and if i have more data it will be really helpful for me to insert so let me go inside to the migration so we have something which is known as factory and cedar so it will help us help you to generate the the data and that's the factory user factory and most of the things are already configured uh but we need to add it inside the inside our product model so in this case it's user model and you see how inside the definition method you see we have the attributes and in order to generate that we need to go inside our seeder and that's where we can create simply define that i need to uncomment this and this will generate the 10 records inside the users table now i need that same trick for my for my product model so um let me create here a factory for just like the factory that is created for the user i need to create just similar for the product so php artisan make factory and let's give it the name of um it should be product it should be product factory all right so it just created that again it's showing shown some error here yeah it should be product factory all right so the factory is created successfully and if i go to my product factory you see here the model is defined perfectly and we need to have to define here inside the definition few things that were related to the product factory so let me create that so first we have a table attribute and i need the faker with the help of faker so dollar this dash faker and we need some tax of teddy results and next we have the description so it should be dollar this that's faker and let me create the text for it and that's fine and for the image dollar this faker however i don't need that actually if i just want to see my okay it's fine if i just ended up here we might use it in our later case so dollar this dash faker and it should be actually faker dash image url and the next thing the last thing that i need here is the price and let me add that one so dollar this faker and that should be number and it should be number between so 10 and 100 so it will generate the number between 10 and 100 right it shouldn't be it should not be above or below to 10 or 100. all right so we define our definition and uh inside the factory class for the product and now i need to go to my database seeder and that's where i need to generate our record so um all i need here is few things to see first i have to define here the model which should be user use app slash model slash and the name of the model which in my case is product and let me go is just to uncomment this out or i just want to skip that because i don't need that way so let's create here a product and we have a factory of 30 recall or 50 records and let me create that one all right so if i just want to um yeah this is this all is done now and in order to access it all i need is uh let me just want to zoom this out so let's just give it the php r is in db column seed and i hope this is going to work actually we got some error here it says that call to undefined model product call and call and yeah the spellings were wrong actually so i need to go to database yeah it should be factory oops yeah all right so let me go inside my terminal and clear it out and if i just try to run php artisan dbc then you see now the database seating completed successfully now if i go back to my database and refresh this and you see now it generated the 50 record records for us right which help us to search and using our postman api and now we have the data we don't need to create manually which took a lot of time so with the help of factory and seeder we are able to generate the data right so that's the best part of the laravel all right so i'm going gonna close everything here and now i'm gonna create the api for us so let's go inside the routes and inside routes we have the web.php or api.php the preference goes for the api.php that is the the that is a file where we usually create our api you can either create on the web.php if you want but the preference with preferred ways that you just want to create like that so let me create here a route and and let's create here a route of product and it should be product slash and okay let's first test the very basic api for how how it actually works so product and i'm going to create here a controller uh so it should be product controller class and coma and actually i just need to check we have the route and actually i need to have here facades for the round which is defined and we have the request and i need to use something which is actually so i don't need to keep defining that so use app slash http slash controllers slash product controller all right so that that's help for us to so i i don't need to keep typing this all same and now here i need to define only the the method name which is which in my case should be products all right so let's go inside the product controller which i haven't created that so let's create a controller so php r is in make controller and let's let's give it the name of product controller right and press enter so this is going to create the controller for us so app http controllers product controller so let's do first define here the method so public function products and let me uh actually i just need here products equal to product all right so this should this will return all the products for us so return dollar products all right so now in order to test with the help of the api all i need is slash api is something that because we are inside the api.php file so make sure it should be slash api and slash products and you know the requests you just get now if i try to press send and it shows the error that your product model is not defined inside your controller so i need to define that first so let me go inside here and right after here so use app slash models uh slash product all right so now if i just want to test this out and i hope this is gonna work all right so like there are there are a few they have a few preferences the prettier view that is very elegant that help you to easily view your results of the api raw and it's something which is very messy preview maybe visualize it's something that you have to set up for this request but yeah this is this looks much better than the prettier right and it now it we have 50 records and you see the id1 and if i go the last one which should be id 50 now we are working with the api right so that's how we can get the results for the for the get all the products now the most important thing that we're going to do here in this in this functionality is to implement the search right so let's gonna go inside the api.php and uh let's go and work with the real one that we just we're gonna work with that so it should be product slash and let's give it the name of search underscore product right that's the url for this product and just change that method name to be search product all right so i'm going to go right after this method and create another one so public function search product and in inside here i'm going to work with the the the api for the search so let's first define the request that is coming in so that should be the request and we have the query and so i'm going to create here a variable with an item of query equal to product and that should be the query so now i need to search on base of the data so if dollar data and let me add here the query so dollar it should be query where raw and i'm going to search on base of the title so i'm going to use here title and with the help of matching the record we have to use something which is known as like clause and the percentages that will help us to uh to to find the matching record from the starting and the and the ending position so if i had percentage and right after the percentage i will add the request so it will check the the starting position of the it will check the result from the starting position and then if i type here the percentages uh and in between that i passed the request so that means that it will it will the it will match the record uh in any location or position so that's the uh beauty of the percentages so i'm going to use that and first i need to wrap this inside the single quotes and type those percentages and right after that let me add this one and dot dot so this will be for the concatenation and that's it all right so just simply put here semicolon and simply uh return the queue so return dollar query dash get andres and get and this will get the results on based off the search that we have so basically this search underscore product is is the key and make sure our url is product slash search underscore product so it's almost the same so let me go to the url and type your search underscore product and type the key which is basically again the request that we have which is search underscore product and the value is something that i'm going to search for so if i try to send the request and now we haven't passed anything so it's it shows all the records to me all the 50 uh i results right now in order to search it and i'm going to search this i don't know what actually is so i just copy that and write me a play and just paste it up here and you see now we are only getting the two records one and the 48 so you see here it's also if i just want to show you that will be a better explanation so we have two results from the title so this one and it's actually from the description not from the title so these are the two results that we searched for and let me search ipsum and if i just again remove this value and just search for the new one and send the request and you see now we are only getting one record right so that's the beauty of searching now what if i want to also search on base of the on base of the description so it's very simple i can use here r where clause and right inside here i just need to add the description so i'm going to grab the very same results from here and just wrap that in here and rather i should use here title let me use here description because i'm going to search on based off on base of description as well now i can search on both way i can either search on title or i can either search on description so let me i'm going to show you real quick that if i want this one right you just want to copy that all and and add that inside the title this is actually the description and actually it says yeah spelling should be wrong i believe yeah actually it's not the issue of the of the uh column and it's the clause error you see here the column not found a non-column q it's a it's a query exception so i i believe that i need to use here r where raw yeah so now if i try to search it and there we are right so you see here now we are actually we actually search on base of the description so i just want to show you real quick all right so now we can also search on base of description so that's the beauty of the uh of this postman that how easily we can uh search and we can work with the testing apis we can either search uh with the help of this tool so so that's it guys i think so that's it for the back-end functionality that we implemented for the search and in the in the next part of this video we are going to cover the front end of that with the help of angular we are able to search the results so that's it guys and i want to see you in the next part

Channel: AB Nation Programmers

Views: 148

Keywords: angular, laravel, lam stack tutorial, search bar using angular and laravel, Build Search Bar Using Angular & Laravel API | Part 2, laravel api, angular search, build laravel and angular search from scratch, laravel seearch api, lamp stack, laravel and angular course

Id: AHAPfVPCNno

Length: 22min 41sec (1361 seconds)

Published: Mon Oct 18 2021