Coding

BACKEND WITH LARAVEL | Laravel + Angular 2 / Vue.js 2

  • 00:00:01 welcome to this video in this series on
  • 00:00:04 building a lateral back and then
  • 00:00:05 connecting it to view chairs or angle to
  • 00:00:08 front ends or in general using lateral
  • 00:00:11 with UJS and angular 2 in this video
  • 00:00:13 we're going to both the lateral back end
  • 00:00:15 so write some PHP some lateral code now
  • 00:00:19 how does the back and look like what
  • 00:00:22 does backhand mean what do we need to be
  • 00:00:24 able to connect our angular 2 or view
  • 00:00:26 chair single page application to it as
  • 00:00:29 mentioned in the first video of this
  • 00:00:31 series we need some API endpoints and
  • 00:00:34 you could kind of translate that with
  • 00:00:36 some routes so let's go to the routes
  • 00:00:39 folder and here in a normal lateral
  • 00:00:43 application we always went to the web
  • 00:00:45 PHP file and started setting up our
  • 00:00:48 routes there so that we then could go
  • 00:00:50 there in the browser and simply enter
  • 00:00:52 localhost or whatever your domain is
  • 00:00:54 slash your route whatever you enter here
  • 00:00:57 now that is not how we do it or how we
  • 00:01:01 work when building chest at API and API
  • 00:01:04 is not there for a normal user to wizard
  • 00:01:07 it's not something you want to make
  • 00:01:09 available by just visiting localhost /
  • 00:01:13 something or you can make it available
  • 00:01:15 to be wizard like this but you don't
  • 00:01:17 want to return use there you don't want
  • 00:01:19 to return HTML instead typically you
  • 00:01:22 transfer JSON documents so you get JSON
  • 00:01:25 data and you return JSON data letter
  • 00:01:28 will has a specific group for that a
  • 00:01:31 group of routes and that is in the API
  • 00:01:34 dot PHP file the difference between the
  • 00:01:37 two files are the middle of where's
  • 00:01:39 which get applied to those routes we can
  • 00:01:42 have a look at those middle Aware's in
  • 00:01:44 the app folder and there at HTTP and
  • 00:01:47 then kernel PHP file here all the middle
  • 00:01:51 of wares are set up and here you can see
  • 00:01:53 those middleware groups web and API and
  • 00:01:56 as you can see the webmail or group has
  • 00:01:59 a lot of middle of wares which get
  • 00:02:02 applied to all the routes in the web
  • 00:02:03 tour PHP folder and the very important
  • 00:02:06 middleware is here are responsible for
  • 00:02:08 encrypting cookies
  • 00:02:09 checking the CSRF token storing the
  • 00:02:12 session so all those
  • 00:02:14 typical tasks we need to do when we
  • 00:02:17 create a normal well lateral application
  • 00:02:20 where we render some views where the
  • 00:02:22 user will do some things and send some
  • 00:02:25 requests back to us now for the API we
  • 00:02:27 only have to default middlewares
  • 00:02:29 for frauding and substituting the
  • 00:02:32 bindings and this is the difference here
  • 00:02:35 we're not storing or managing any
  • 00:02:37 session we're not encrypting cookies
  • 00:02:39 we're not setting any CSRF token because
  • 00:02:41 we won't use sessions our back and then
  • 00:02:44 this is important our back-end does not
  • 00:02:47 care about our front-end and the other
  • 00:02:49 way around we're not storing a user
  • 00:02:52 session because we're not using our
  • 00:02:55 back-end like this because we're not
  • 00:02:57 sending requests like in a normal
  • 00:02:59 lateral application our front-end yang
  • 00:03:02 go to application for example we'll from
  • 00:03:04 time to time send a request but this
  • 00:03:07 does not have to be connected to the
  • 00:03:09 user who's on the page the backend
  • 00:03:10 doesn't care you could have a mobile and
  • 00:03:13 app sending requests or a web app and
  • 00:03:15 your back and chest does not care your
  • 00:03:18 back and simply provide some services
  • 00:03:19 for example an API endpoint where you
  • 00:03:22 can send some data which then gets
  • 00:03:24 stored in the database and it just
  • 00:03:25 doesn't care who wants it to store that
  • 00:03:28 it doesn't need to manage your session
  • 00:03:30 and therefore we don't need that
  • 00:03:31 middleware now when it comes to
  • 00:03:33 authentication that is something I'll
  • 00:03:35 cover in separate videos but even there
  • 00:03:38 we won't need sessions so this is the
  • 00:03:40 difference we will have much less API or
  • 00:03:45 excuse me
  • 00:03:45 middle of where's in general being added
  • 00:03:48 to our routes and that is why we take
  • 00:03:49 the API dot PHP file now there we
  • 00:03:52 already get a route but we can get rid
  • 00:03:53 of this and instead create a new one now
  • 00:03:56 we will need four routes for the example
  • 00:03:59 application we want to have a route
  • 00:04:01 which allows us to create a new quote so
  • 00:04:05 a post route and we need to specify our
  • 00:04:08 path so our URL basically so let's name
  • 00:04:12 it slash quote for example this means
  • 00:04:15 whenever we send a post request at at
  • 00:04:18 what well at our domain where the app
  • 00:04:22 runs so that doesn't change from a
  • 00:04:24 normal lateral application so mine here
  • 00:04:26 has is mapped to level ng to view dot
  • 00:04:30 death and then not slash quote but slash
  • 00:04:34 API quote that's just something letter
  • 00:04:37 will ads in between two routes specified
  • 00:04:40 in the API dot PHP file it adds this API
  • 00:04:43 prefix so every post request getting
  • 00:04:46 sent to this route will trigger
  • 00:04:50 well this route we set up here so in
  • 00:04:53 this route here I use the normal route
  • 00:04:56 configuration here with an array and say
  • 00:04:59 uses quote controller a controller we
  • 00:05:02 still have to create at post quote for
  • 00:05:05 example now we also need free other
  • 00:05:08 routes we need get route to get all
  • 00:05:11 quotes so maybe from slash quotes and
  • 00:05:14 then here also an array where we use our
  • 00:05:19 quote controller at get quotes and then
  • 00:05:24 we also will need a route to update our
  • 00:05:29 client and our quote here I will accept
  • 00:05:32 a put request now put request something
  • 00:05:35 you maybe haven't seen before or at
  • 00:05:37 least not that often because in normal
  • 00:05:40 web applications ran bilateral where
  • 00:05:43 level also renders the views we only
  • 00:05:46 have post and get requests put delete
  • 00:05:49 and so on requests are other valid HTTP
  • 00:05:52 methods which are not supported in
  • 00:05:55 normal web applications where we send a
  • 00:06:00 request by for example clicking the
  • 00:06:02 submit button
  • 00:06:03 so by nan HX requests since we will only
  • 00:06:07 use Ajax requests though we can also use
  • 00:06:11 put delete in all those other methods to
  • 00:06:13 those from HTTP methods which better
  • 00:06:16 describe the purpose of the request so
  • 00:06:18 put basically means simply replace the
  • 00:06:22 old resource with a new content you
  • 00:06:24 could also use patch if you only want to
  • 00:06:27 update a part of your old resource now
  • 00:06:31 here it won't matter that much but you
  • 00:06:34 couldn't can use evil either of the two
  • 00:06:36 I will use put here now this shall also
  • 00:06:39 target
  • 00:06:40 would since we will simply add it a
  • 00:06:42 single quote but I will also pass a
  • 00:06:45 parameter here the idea of the quote you
  • 00:06:47 want to add it so a dynamic parameter
  • 00:06:50 here in the path and then again just the
  • 00:06:54 configuration where we use the quote
  • 00:06:56 controller to put a quote so to edit it
  • 00:07:00 and finally to delete it we have to
  • 00:07:03 delete HTTP method all should also
  • 00:07:05 targeting a quote with the ID passed as
  • 00:07:08 a dynamic parameter and then once we
  • 00:07:12 configure that I will also target the
  • 00:07:15 the quote controller here of course
  • 00:07:16 quote controller at the lead quote so
  • 00:07:20 these are our routes setup
  • 00:07:22 the next step is to create the quote
  • 00:07:25 controller and actually hook those
  • 00:07:27 routes app so I will do this in the
  • 00:07:29 control this folder here in the app HTTP
  • 00:07:32 folder and simply create a new file
  • 00:07:34 quote controller tour dot PHP and here
  • 00:07:39 that's just no PHP file of course the
  • 00:07:43 namespace is simply the same namespace
  • 00:07:46 as here it's app HTTP controllers so we
  • 00:07:50 can set this up here and then I'll have
  • 00:07:54 a class quote controller which will
  • 00:07:56 extend the controller from app HTV
  • 00:08:01 controller so from the same namespace
  • 00:08:02 and in there I'll have four functions
  • 00:08:06 the first one is responsible for
  • 00:08:08 creating a new quote so post quote that
  • 00:08:11 was the function name we set up here
  • 00:08:14 post quote and this will get the request
  • 00:08:20 so we need to add that import the
  • 00:08:22 request object which will hold our data
  • 00:08:25 now I will also create three other
  • 00:08:28 functions here get quotes which doesn't
  • 00:08:32 take any arguments but which will in the
  • 00:08:34 end return all the quotes then I'll also
  • 00:08:39 have another function which I'll name
  • 00:08:42 put quote that's the same name I used in
  • 00:08:44 the mindy api dot PHP file in the routes
  • 00:08:47 folder here i will get the idea of the
  • 00:08:50 quote i want to change and the request
  • 00:08:53 object so both we will have a request
  • 00:08:56 body and a parameter in the URL and then
  • 00:09:00 finally the last function need is to
  • 00:09:02 delete quote function here I will just
  • 00:09:05 get the idea of the quote we need to
  • 00:09:08 delete so all those functions are of
  • 00:09:09 course not doing anything but we set
  • 00:09:12 them up we're going to work on them in a
  • 00:09:14 second before we do so we need a model a
  • 00:09:18 quote model for accessing it for storing
  • 00:09:21 it in the database and so on so let's
  • 00:09:22 create this in the command line using
  • 00:09:24 the artisan tool I'm in a command line
  • 00:09:27 in the project folder in my level
  • 00:09:29 project folder and in this project
  • 00:09:31 folder I will simply use PHP artisan
  • 00:09:34 make model so this command you probably
  • 00:09:36 know from my other projects and I'll
  • 00:09:39 name it quote and with that we can
  • 00:09:41 create the model now I also will create
  • 00:09:43 the fitting migration file so make
  • 00:09:45 migration of course you click on go
  • 00:09:47 ahead could have combined combined that
  • 00:09:48 create quote table so this will give me
  • 00:09:55 the quote model is quoted PHP file and
  • 00:09:58 here I don't really need to configure
  • 00:10:00 anything and then the database folder in
  • 00:10:02 the migrations folder I already deleted
  • 00:10:04 the to our default migrations files now
  • 00:10:07 I only get the new create quote table
  • 00:10:09 migrations file now in there I need to
  • 00:10:13 run schema create and I'll name it
  • 00:10:17 quotes that will be the table name I
  • 00:10:19 will create and quotes here of course
  • 00:10:23 takes a second argument will pass a
  • 00:10:26 function loop print table then also
  • 00:10:33 configure the table setup increments ID
  • 00:10:35 so I have this auto incrementing ID
  • 00:10:37 column to set up the time stamps and to
  • 00:10:41 be able to store some content some
  • 00:10:44 content off the quote so maybe in a text
  • 00:10:46 field the content field and then here
  • 00:10:49 I'll also create the schema drop
  • 00:10:52 function to drop the quotes table when
  • 00:10:54 we roll back the migrations so with that
  • 00:10:57 the model is set up the database
  • 00:10:59 migrations are set up you can now run it
  • 00:11:01 by running PHP artisan migrate make sure
  • 00:11:05 your database connections are correctly
  • 00:11:07 so that created the database tables so
  • 00:11:09 that should be all stuff you already
  • 00:11:11 know from the other projects with that I
  • 00:11:13 can now continue working on my methods
  • 00:11:16 in there so for creating a new quote I
  • 00:11:19 obviously want to create a new code
  • 00:11:22 using the quote model and I will set the
  • 00:11:26 content of the quote to the content we
  • 00:11:29 pass here in the request retrieving it
  • 00:11:31 with the input method the content
  • 00:11:33 already not quote content will be the
  • 00:11:37 field name I will use and of course we
  • 00:11:38 need to make sure that our front and
  • 00:11:40 application angler – or view chess will
  • 00:11:44 populate this content field here so that
  • 00:11:47 we actually send an HTTP request which
  • 00:11:49 has this content field so with that I'm
  • 00:11:52 setting the content of the quote I can
  • 00:11:54 thereafter simply save that save that
  • 00:11:58 quote and now I want to return a
  • 00:12:00 response I will use the response helper
  • 00:12:02 method to send a JSON response because
  • 00:12:06 as I explained Jaison is data format we
  • 00:12:09 will receive and we will return now the
  • 00:12:12 convenient thing with Larry Willis we
  • 00:12:15 receive JSON but as you see we access
  • 00:12:17 the input of our request the body of the
  • 00:12:20 request just as we do in a normal level
  • 00:12:23 application so Larry will unwrap that
  • 00:12:26 JSON content for us we don't have to do
  • 00:12:29 that which is great all we have to do is
  • 00:12:31 tell it to also send back a JSON
  • 00:12:34 response and I do so by using your
  • 00:12:36 response helper method here and then
  • 00:12:38 adjacent method now this method takes
  • 00:12:41 two arguments the first one is an
  • 00:12:43 associative array which will then be
  • 00:12:46 transferred into JSON format by level
  • 00:12:48 and here we could simply for example
  • 00:12:51 return the newly created quote like this
  • 00:12:53 so return the quote here and I also want
  • 00:12:58 to send G status code 201 for everything
  • 00:13:04 was successful quote related created now
  • 00:13:07 you could also do some error handling in
  • 00:13:09 case T database access goes wrong but
  • 00:13:11 I'll leave it like this now with that
  • 00:13:14 let's go on to the get quotes method
  • 00:13:16 here so here I want to get some quotes
  • 00:13:18 using the quote model and I will
  • 00:13:20 you see all method normal eloquence in
  • 00:13:23 text to fetch all the quotes from the
  • 00:13:25 database now with the quotes fetched
  • 00:13:28 I'll create a new response helper
  • 00:13:31 variable here which is an associative
  • 00:13:33 array and in this array I simply want to
  • 00:13:36 return my quotes like this just to show
  • 00:13:40 an alternative to inlining this as we
  • 00:13:42 did in the post quote method and then I
  • 00:13:44 will return response Jason the response
  • 00:13:48 object or very light just treated and
  • 00:13:51 then 200 so this gives me back all
  • 00:13:54 quotes not too difficult I guess now in
  • 00:13:57 the put quote method I first need to
  • 00:14:00 find the quote so again using eloquent
  • 00:14:03 quote and then find the ID and then I
  • 00:14:06 want to check if I did find it so if
  • 00:14:09 quote is not set is if it is empty then
  • 00:14:13 I want to return a response which is of
  • 00:14:16 course also of type Jason where I simply
  • 00:14:19 set some message let's say a message
  • 00:14:21 could be document not found and then a
  • 00:14:26 404 status code but if I do find the
  • 00:14:29 quote well in this case I want to set
  • 00:14:32 the quote content to the content I get
  • 00:14:35 in my request body retrieve Y at the
  • 00:14:38 input method again and then I can call a
  • 00:14:41 quote update to update it or save to
  • 00:14:44 override it maybe save since we put it
  • 00:14:46 here so we really overwrite the old
  • 00:14:48 record keeping the ideas and so on
  • 00:14:50 though and then I will return a response
  • 00:14:54 here the response is of type JSON and
  • 00:14:57 here I will simply also return quote
  • 00:15:01 let's say and you can return anything
  • 00:15:03 there any message you want to retrieve
  • 00:15:05 on your front that whatever you need and
  • 00:15:07 then also status code 200 last but not
  • 00:15:11 least here in the delete quote method
  • 00:15:14 I'll also fetch the query with fine
  • 00:15:17 method so find it here and then simply
  • 00:15:20 call the delete method on it like this
  • 00:15:24 now with that I can then also return a
  • 00:15:27 response of type JSON where I also say
  • 00:15:31 sets a message for
  • 00:15:33 Sowell quote deleted or simply return an
  • 00:15:36 empty array if you don't want to return
  • 00:15:38 any data you don't have to and then
  • 00:15:40 status code 200 so with that all the
  • 00:15:43 controller actions are configured you
  • 00:15:46 hold some code you use my model they are
  • 00:15:49 hooked up to my API routes so that looks
  • 00:15:52 good now to quickly test it I will use a
  • 00:15:56 tool named postman you can find it by
  • 00:15:58 simply googling folk postman and postman
  • 00:16:01 is a great tool for testing api's it
  • 00:16:03 allows you to send some requests there
  • 00:16:06 and get back your responses
  • 00:16:08 now I already installed it so I quickly
  • 00:16:10 switch to it and here in postman you
  • 00:16:14 basically can select type of request you
  • 00:16:16 want to send so I want to create a new
  • 00:16:18 cloudlets I switch to post then enter
  • 00:16:21 your URL for me it's level ng to view
  • 00:16:25 dev slash API as I explained this will
  • 00:16:28 be a prefix automatically added by level
  • 00:16:30 and then quote that was the route we set
  • 00:16:34 up here in the API I taught PHP file for
  • 00:16:37 creating a new poster excuse me quote
  • 00:16:40 here now we also need to attach some
  • 00:16:44 content here in the body what is that a
  • 00:16:47 raw body to send some well raw data this
  • 00:16:50 will be a JSON document a JSON data
  • 00:16:52 format so like a JavaScript object with
  • 00:16:56 opening and closing curly braces and
  • 00:16:58 then all keys and values wrap between
  • 00:17:01 double quotation marks and here we need
  • 00:17:03 to set a Content key and then a value of
  • 00:17:07 some content for example now to make the
  • 00:17:11 server understand that we're sending
  • 00:17:13 JSON data I'll set a content type header
  • 00:17:16 on this request set a to application
  • 00:17:19 slash Jason to inform the back at hey
  • 00:17:22 you're getting some JSON data and
  • 00:17:23 that'll hit send and here we see the
  • 00:17:26 newly created quote it has the ID –
  • 00:17:29 because I already created one comment or
  • 00:17:32 one quote test behind the scenes so
  • 00:17:34 probably has I do one for you and that
  • 00:17:37 looks good looks like it works so let's
  • 00:17:39 create a new request in a get request to
  • 00:17:42 see our newly created post here I'll
  • 00:17:45 send us two level NGT
  • 00:17:47 view F slash api's slash quotes to get
  • 00:17:52 all quotes no need to set some header
  • 00:17:54 here because this will just get some
  • 00:17:57 data and then click send and here indeed
  • 00:18:00 we get back an array of quotes which
  • 00:18:03 holds our one quote we created now let's
  • 00:18:06 change that quote I'll switch the post
  • 00:18:09 method on the first request to a put
  • 00:18:11 method and leave the URL as it is well
  • 00:18:15 almost I'll add the idea of the quote I
  • 00:18:18 want to add it so too was the ID so I'll
  • 00:18:22 add two at the end here and then I also
  • 00:18:24 need to adjust the body of that request
  • 00:18:27 and maybe switch this to some content
  • 00:18:30 with many exclamation marks and hit Send
  • 00:18:33 and I get back the updated quote as you
  • 00:18:38 can also see if I send to get quotes
  • 00:18:40 request again now you see we still get
  • 00:18:43 that array but in this single quote we
  • 00:18:45 have in a database
  • 00:18:46 the exclamation marks were added well
  • 00:18:49 and finally to set our to send a delete
  • 00:18:51 request I'll switch that to delete no
  • 00:18:55 need to send some body data there no
  • 00:18:58 need to set the header instead just half
  • 00:19:01 the URL with T parameter with the ID of
  • 00:19:05 the quote at the end hit Send
  • 00:19:08 quote deleted let's confirm by fetching
  • 00:19:11 all quotes we get an empty array so our
  • 00:19:15 API seems to work in the next video I
  • 00:19:18 want to bolt the angler to front end and
  • 00:19:21 try to connect it with our newly created
  • 00:19:24 back end here