Laravel Tutorial - Building API, Testing it using Postman & Ajax

hello everyone welcome to another video on this channel in this video we are going to build an api using laravel and then we are going to access that api using postman if you didn't use it yet it's a very useful tool that you can use to test your apis and also we are going to build an html and javascript websites very simple and we are going to access our api server from there so without getting anything longer let's get started and before that just let me just remind you with something if you didn't subscribe yet i don't know what are you waiting for please do it yeah i'm waiting do it do it okay now we are good so uh what if you didn't subscribe it oh cubic problem anyway if you want to subscribe just do it if you don't want if you didn't like me it's okay haters are gonna are going to hate so let's talk about apis first and api stands for application programming interface and what does that mean is you know what i have an idea just follow me okay let me take that okay is it recording yes okay so let's sit down here and we have now a whiteboard here we will discuss the concepts and we will learn the concepts and we are going to apply those concepts in the computer okay so let's just explain this in this marker and this whiteboard so the api is for getting any information from the internet okay so let's say that you are standing here okay with a big smile oh my god these are not eyes okay with a big smile and a lovely hair hair style and you are developing a website or a software or whatever you are going to develop and you want to have the current price of the gold okay you don't have this information and you want to get this information from the internet so another guy who is related more than you uh to the gold prices and he's in the gold like market and he knows the exact price of the gold in the specific time so he decided to build an api for that thing so he has here uh something like a server this is a server okay and he has here the gold price okay this is the money sign okay so in your place you want to ask that server to give you the gold price so you will send a get request you will send a get request with an ask you are asking that server to give you back the gold price okay because this server might have the gold price and silver price and some other things so you are asking him to give you the gold the gold price okay and that server will send a response eris pawns with the gold price so he will send the pro prize here okay so this is the basic uh usage of the uh of the apis it is this is not the only usage of the ap api there is much more than that for the api usage but this is the most basic one and this is how you understand the apis okay so let's move on to the another other example so here you want to develop a website okay so let's say that we have here a website and you want to divide your code into two parts one is for the front end and the other one is the back end so let's say that here you are using angular okay and here you are using laravel or also you can use uh vue.js or react or pla plain vanilla javascript so you can use anything you want it's not only with this these frameworks so here you have a code and you here you have another code okay this code is responsible for the back end so here you have a team to develop this code okay and this code is attached to the database okay so this code will ask this code to give him some information from the database okay so you will develop this code this is the code okay to like send some useful information for that code so this will send some get request get in capital and this will send a response and also he can send a post request to like add data to the database and he will send a response that yes the the data you sent is added to the database and so on so forth so that's another example or that that's another application for the apis you separate the front end from the back end and a third application of the api is that in that case you have a complete website that is up and running it has a front end and has a back end and for some reason you want to develop a mobile application okay so no problem you will develop your mobile phone your mobile application okay using android ios swift whatever you want flutter whatever you want okay and you will like get the information from the same back end using apis so here you will have api calls that gets the information and the back end will send the information back so this is another example or this is another application for developing a an api or this is another example for using api in the real life okay so now let's go back to the code and let's code this thing to make you happy okay yeah okay so welcome back so let me just check that i'm at the frame of the camera yeah i'm here welcome me and i have here now a laravel copy level 7 copy on my computer uh nothing interesting in it i just made a database i created a database in my database collection and i linked it that's all if you want to check it here it is it's api codes and it's linked in the air.n file where is it api so that's all about my level uh code now let's build our api using larval so the first thing i want to do is to create a model and i want to create a model for a bank okay our our example now as a bank so php artisan make model bank and i'm going to make a dash m to attach a uh migration with it so let's run this code and run this command and let's also create a controller artisan make controller and i'm going to make it resourceful now i'm going to go to the [Music] api.php when we create a regular website we usually put our routes in the web.php but in this example or when we create an api you will add them in the api.php okay and let's create our our route so it's resourceful resource uh no it's not like that banks it will go to the banks controller okay simple as that and let's just uh double check this php artisan route list and this will give us the list of the routes in the uh in the application and you will notice that the first segment is api make sure that you if you want to access the api routes you will have to type the api first before anything in the uh in the url okay so here's our get request post request uh also get and get also and then we have the put and the delete okay so now we are going to go to the uh model first and to configure or to add the guarded attribute and to do that we're going where's the models database oh we have to go to the migration first and in this migration string name and table string also location or let's just say a year okay so we have a name and a year for the bank i don't know what are these it's totally fake nothing nothing interesting and nothing uh creative so let's migrate php artisan my great and we have a problem here that this string string okay migration is succeed now let's go to the app and inside the app let's go to the bank and let's add the protected guarded to the empty string to use the mass assignment now we don't use this we will not use this and also we are done with this we will open it but later and now we are going to go to the http controllers oopsies not the middlewares controllers banks controller and we are going to write the code now before everything just try to use app just move the mouse cursor bank and here we are going to get all the banks in the database so banks banks bank all very easy very simple return response bank 200 and what 200 is when you send a request to a api server you will get a response from it and when the server tells you that the response code is 200 then the response is success or it's okay it went okay and went back okay maybe it's a like 500 which is an internal server error if some error happens in the code it will return 500 or maybe 404 which is the api doesn't exist or maybe it's a 401 or 2 i don't remember but it's unauthorized that you are not authorized to use this api and some apis you have to uh like pay some membership to use them to get the information not everything is for free so uh this is the code for getting all the banks from the database and we are going to now write the code in the store method and the store method stores new banks in the database so here we are going to like declare a new variable which which is data and here i'm going to go inside the request inside the request there is a validate and this validate takes an array name required and also the year is required for me year is required and there's a problem semicolon now we are going to add this bank in the database so we will declare a bank and bank create bank simple as that and finally we are going to return why are you yelling at me i didn't do anything wrong return response bank and 200. so when i add a new bank it will return it to me okay so let's now go to let's go to the postman okay and this application or this uh like program is to test your website and test your apis so whenever you want to test your website it's recommended to use it and it's recommended to test your website so let's do for the banks i i created here a collection and i will put all of the banks or all of the apis required or related to this api in this collection so let me just create a new request called get all banks i don't use this testing program a lot so i'm still beginner here as you local host or you may be professional not like me beginner 8000 api banks and this will give me all the banks i got a 500 error here let's preview it c line 18. oh line 18. let's go to line 18 and find what the problem okay banks should be banks so it's returned here an empty array which is realistic because we still have no banks in our database so let's create banks in our database and let's create a new request with add bank and here it will be a post request api not login ban cool and i will go to the body section here and i will choose this thing to have some formatted uh places to add my data so the name is bank one creative the year is 20 20. cool let's now add the bank and if i send this i will get an internal server error because i did think wrong variable bank i think that bank bank data cool i always make mistakes so we got the bank back and if we go here and send this request again we will get this bank here uh okay cool okay cool it's pretty i i have a like i don't know why it's like this but it's like this okay cool now we have to like write the code for the rest of the functions let's write for the update and we want to update a bank and to update a bank we will have to write the same code but we will make some changes here uh let's just type here where the id equals to the id that is passed here and this id is passed in the url and i will update the data okay and let's add here the id okay and here i will get a zero or one i will not get the bank so let's just leave it as it is if you are doing something more professional name it something different that back so update bank and we are going to send the same url but we are going to make it one and here let's make it for now put request there is a trick here but we are sending now a put request let's go to the body and go to the form data and here i'm going to pass the name bank one and the year is going to be 2019 now 1390 okay so now to send the put request if you send it it will it will tell you that you have you are you updated the data but if you get the data it's not really updated it's still 2020. and that's because you have to you you can't send something like this to the database or in laravel you have to send it as a post request okay but this will add in you if you did this this will add new bank but if you did this method you are sending a post request but inside it you are telling that this is a put request so if you send that now you got one because you updated this uh this bank and if you go to the get all banks and refreshed you really updated the bank okay let's add a new bank bank 2 with 2020 and bank 3 also with 2020 okay update bank oh no what did i do okay nothing nothing interesting here uh just like send here i have three banks now two with uh 20 20 years and one with 2019. i want to make or to write the code for deleting a bank so let's add a new request add request delete bank and where is it okay delete bank and we want to make it here as a delete localhost banks one i want to delete the first one and let's write the code i get the bank equals to bank find the id and here you have to bank oh my god delete let's destroy this bank and we will return a response of a string now because we have no bank to return a bank deleted and with a status code of 200 and let's just put a semicolon here to shut this down and let's change this request bank deleted let's get all the banks and we have both banks with 2020 and the first bank is deleted let's now add the bank with a 2018. okay bank four and we have now three banks so now i will create a function that will return only the banks with the year 2018 okay so to do that i'm going to go down here pop black function get banks by year and just pass the year okay cool now here i'm going to get the banks equals to bank where the year equals to year and i'm going to get the result because this doesn't return the result so i have the result here i will return response the banks oh my god banks with the status quo of 200 okay and now i can't do anything but let me just create the request get banks by here where is this added it happened for the second time get banks by year right cool what's wrong with you local host 8000 api banks get banks by id and the id is one okay or no the id not the id of the year by year and the year is 2018. and when i run this code now when i run this request it will return nothing it will return a 404 because it's not found and that's because i don't have the i don't have it in the routes so let's add it in the routes so route get banks get banks buy here and here i'm going to go to the banks controller at get let's go get paste okay cool now if i send this request i will get an 404 error because i think that get banks by year oh yeah because this should have a parameter here year all right now it should work okay and i got the bank with 2018 year and if i change this to 2020 oops to 2020 i will get the banks with 20 20 years okay that is cool now what i'm going to do is we are going to move forward to the next part of the video which is creating an html and javascript website and like get this information so now i'm going just to create some boilerplates for the website okay so now i have my uh ready code and i included the jquery library okay i added the code here in the jquery.js and also i have the app.js to write my javascript code and also i have the index.html so here in my website i have it which i have it here it's empty yet so let's create a button let's go here and create not in the head in the body and create a button okay and call it get info and i'll give it an id of btm and i'm going to make a p tag with an id of text text okay i forgot how to type not yet okay so now we have something that gets the information from the database and uh let me just open the console here and make it ready and i will just copy the code from the previous or from the training video that i did or from my training for this video so i'll explain everything in it so this code what it does is when i click the button okay it's an on click event jquery code it will start this ajax call and this ajax has a type which is get and has a url which is the url you want to get the infor information from and i will change this to banks okay and here if it succeed it has a success and it has an error so in the error i'll print out the error that it happened and in the success i'm going to i'm getting here the response which is the thing that i'm getting back if you notice here that we are getting here a response this is the response we are getting okay so i have here an array so i'm getting the array and i'm getting the first element in the array and i will type the name of the array in that text so let's go to the website and let's refresh this and let's click this button and we got the bank 2 which is the first element in the array let me just console.log this response console.log the response okay to see what the response is we have here an array with three objects and each object is a bank okay and we can like access anything we want if we want here the banks which is the let me copy the url from here we want the 2020 banks we will get them here let me just get the okay the name is is good let me refresh this and we are getting two elements in this array okay if i change this to 2018 i will get the 2018 bank which is here you can find it here 2018. okay so that is how to make an api call on an api server using larval and that is it for this video for now if you got anything useful from it subscribe you will never regret it and if you have any suggestions for me anything you want to say reach me out comment in the comments or you can find my social media accounts in the description just text me and i will respond i promise and that is it for this video for this week see you in the next one bye

Channel: Code Brain

Views: 3,456

Keywords: treehouse, technology, tech, learn, free, online, teamtreehouse, education, swift, ios, android, java, python, programming, developer, designer, Treehouse, Team Treehouse, Web Design, Web Development, iOS, tutorial, how to, JavaScript, jQuery, HTML, CSS, code, coding, rest api, restful api, what is rest, what is an api, api, what is rest api, http requests

Id: OuJB4TaI6G8

Length: 28min 14sec (1694 seconds)

Published: Fri Sep 18 2020