Full Stack Vue.js & Laravel

[Music] hey what's going on guys so I got a lot of requests when I asked last week what you guys wanted to see a lot of you guys said view and laravel so I'm guessing that you want to know how to build a view Jas front end to a laravel back end which is pretty easy because view comes comes basically by default with laravel you just have to do a few things to set it up alright so in this video what we're going to do is take the API that we built in this video about a month ago called laravel 5.5 api from scratch using resources where we basically created a REST API for articles and we can create read update and delete articles through that API so what we're gonna do in this video is build a view j/s front-end alright so I'm not gonna go through everything if you want to you can watch this video and build the backend or you could just clone it from the repository which I'll put in the in the description I'll have a repository for just the API and then a repository for the full app that I'm building now alright and if you do clone it you just want to clone this link here or download it and just install the laravel dependencies go ahead and do the migration of course you'll need to connect your database parameters into your dot env file and then you can add the seed data or if you want if you want to add some sample articles I think there's like 30 of them and you may need to just generate an encryption key if this is empty which it probably will be alright and then you'll have you'll have you'll be at the point that I'm at now alright so I have it up and running on a virtual host at L articles app dot test and the landing page is just the regular laravel landing page but if I go to API slash articles you can see that it's outputting 15 articles we have it set to 15 per page and it's using the API resources which is really cool because it gives us all of our data but it also gives us extra like links for pagination and we're actually going to add some pagination in this app which is something that I don't usually do because I freaking hate it I hate doing pagination but it is it's requested a lot so I'm sure a lot of guys will appreciate that but using the API resources really makes pagination easy and we're not going to use a view component or anything like that we're gonna do it all from scratch alright so that's what we'll be building to show you the finished products real quick let me just go to let's see I think it's HTTP l articles dot tests so this is what we'll be building this is the view J s front-end and we're showing five articles at a time and we have our pagination right here you can see previous as is disabled if I go to next you can see previous is now not disabled this will show the next five the next five and we have six pages once we get on the last page this is disabled so really nice pagination alright and of course we can add an article it'll say test two and we can add it just as an article added and there it is we can delete article removed and we can edit I'll just say test and the number one save article updated and you can see that updates all right so that's what we building we're using bootstrap for for the UI so hopefully you guys enjoy this and let's get started alright guys so I am at the point where we were at the end of that first video where we built the back end where we built the API so now we want to implement view j/s on the front end alright now if you notice over here in the lerigot files there's a package dot JSON file it has a bunch of scripts but if we look at the dependencies you can see view J s is one of them so we have view we have lodash Axios which is an AJAX library laravel mix is going to take care of building and compiling our java script so we want to go ahead and install all of these dependencies and the first step is to an npm install okay and that will create a node modules folder with all of the these dependencies in there okay and then once that's done we're gonna run the watch script which will have laravel mix constantly watch and build our files for us all right so now that's done let's clear this up and let's just do NPM run watch and that will just that'll take up your console and just it'll constantly watch everything for us okay and you'll get that you may get this little message here that says build successful okay so we're gonna leave this running I'll just make that a little smaller and then we're gonna go into resources and then assets j/s and then that's where our view application is so the app.js file this is our main view file you can see it's we're initializing view j/s it's looking for an element with the ID of app which we're gonna have to create in our template okay it's also bringing in this example component which is in this components folder right here and it just it's nothing really it just says I'm an example component we're not going to be using this but that's that's what they give you as a boilerplate alright now as it is we're just seeing the this the the standard laravel landing page and we want to change that so where this is located as in the views and then the Welcome dot blade okay so this is basically our index file and I'm gonna go ahead and just kind of clear most of this stuff out let's change the title here we'll just say L articles app and let's see we're gonna get rid of all these inline styles so just that whole style tag we don't want that and then we're going to get rid of everything that's in the body all right so you should just have a clear body like that and let's just put it in test and save and make sure that that works so if I reload we just see tests now when we want to use view it's going to look for a div with the ID of app so we want to put that in here so we'll get rid of this test and we'll put an ID of app and then in here we can put any view components that we want so we're gonna have an articles component so we're gonna say articles we're just gonna put in like a custom tag like that and you know what let's actually wrap that in a bootstrap container let's see put that down and we'll bring this up here alright so we'll save that now that's not going to show us anything because we haven't actually created the articles component so let's go into components create a new file called articles dot view and in here we're gonna put in our template and let's just put a div and then we'll put an h2 and we'll say articles okay so we'll save that now it's still not going to show up if I reload because we need to go to our app j/s which is our main view file and bring it in so you can see it they brought in this example component we're not going to use that so we're gonna bring in articles from articles dot view and if we save that we're still not gonna see it because we haven't brought in this main app.js file into our welcome dot blade so let's go down to the right above the ending body tag here and let's put in a script tag so we'll say script source and we're going to use this asset helper we'll put in double curly braces and say asset acet and it's gonna be Jay s slash fjs and save reload and there we go and if we open up our console you're gonna see this SC RF token not found so if you're going to use the view front end you need to add this to your head area so we're gonna go up here and we're gonna add a new meta tag meta phone no we're gonna say meta name and set this to CSRF - token and this just protects against cross-site forgeries we're gonna set the content to whoops that should be in here I'm gonna set the content to CSRF underscore token I'm gonna set it to that function then we need to add one more line which will be a script tag and inside the script tag we're going to say window dot laravel and we're gonna set that equal to an object which will be CSRF token and we're gonna set that to CSRF underscore token like that so that should get rid of that error if we save that and reload now we don't see that error anymore okay so now we're ready to start working with view now as far as bootstrap I'm not going to use sass or anything I'm just gonna get the bootstrap CDN so let's just let's go to get bootstrap calm go to get started and I'm just gonna grab this and put it up here and then grab the three javascript files we need and put those down here right above our app j/s all right prettier is not working inside of the blade template for some reason okay so that should there we go so now we're using bootstrap so we have our articles component which has nothing in it yet before we get to that I just want to create a navbar component so we're gonna say inside of our components folder new file navbar dot view and in here this is actually gonna be very simple and we're not even going to have any links it's just really for show so let's say Neve let's give it a class of nav bar and I'm using Emmet by the way will say navbar - expand - sm say navbar - dark and let's give it a class of BG - info which will make it blue and then a class of mb - - to give it some margin bottom alright and then we'll put a container inside of it and then just our brand so an 8 and a tag with the class of nav bar - brand and we'll go ahead and put in here L articles all right so we have our nav bar now we can go to our blade template our basically our index file and I'm gonna put it right above the container here so right here will say navbar like that let's just have the silver alright so if I reload that we're not seeing anything it says unknown custom element now about did you register the component so we're gonna have to just bring that into app KS just like we did with articles so say navbar that okay laravel mix build successful let's see we're still not and I do wrong here clear the cache maybe yeah I just said I did ctrl f5 clear the cache so now we have our navbar and that's all we need for that file we can close that up and now we're pretty much gonna work in our articles the whole time now if we go if we look at our API data so if we go to a lot of L articles app dot test slash API slash articles we get 15 per page and I want to change that to 5 so we're actually just going to edit inside the laravel file if we go to our app HTTP controllers and then article controller you can see I did this in the last video we did paginate 15 I'm going to change it to paginate 5 and then I also want to just change the ordering so that the most recent is first okay so we can do that by just going right here and saying order by should be an uppercase B so order by created underscore at and we want to order it we want it descending so we want to do d ESC and then we just want to then do paginate all right so if I save that we go to our API and reload now you can see we're getting five per page so that's what I want so that's all we need to do here we can close that up and now we're going to go into our articles dot view file now under the template we're gonna put our script tag this is where all of our component JavaScript is going to go we want to export default and this is not an intro to view Jas video I do have a view Jas in 60 minutes video if you want to watch that that'll explain everything I'm just going to assume that you know at least a little about PJs basically in our data we want to return our state okay so we're gonna have articles which is going to be an empty array to start with we're going to have article which is going to represent a single article which is an object that'll have an ID blank to start with title and body okay in addition to that we're gonna have an article underscore ID set to nothing I just move that on the next line whoops and the reason we have this is because when we do our update well if we do a put request to our API we actually have to send this field with it for it to be a put because if we look at routes API dot PHP this is all stuff we did in that first video the put request also goes to the store method okay along with the post request they both go to the same method we don't pass the ID with the URL so what we pass is that article underscore ID field that's how it's gonna know that it's that that's how it's gonna know which article to update okay so in addition to that we want pagination which is going to be an object and we also want edit which is our edit state will be false by default because we're going to be using the same form to add and edit so that's our data alright now we want to fetch our articles so we're gonna go directly under data I'm going to put a comma right here and we're going to use the created method which will run automatically when the page loads and when it loads we want to run a method called fetch articles okay so it's gonna run this method now this method has to be defined inside of methods so we'll say right here fetch articles and this is where we actually want to make our call now as far as making our request we're going to use the fetch API so in here we'll say fetch and we put in our URL which will be API slash articles and then we'll do our first dot then let's put this on a new line and with the fetch API we have to do one dot then which will give us the response but that's not going to give us the data we want to say that we want to map that to Jason and then we do another dot then and that gives us the actual data okay and I'm actually it I'm actually going to change this to res because what it gives us is this and if we look at this it's not just an array of data it's an object and this object has inside of it an array called data so to access this actual the actual articles we have to access res dot data in addition to that we can get links okay res dot links will give us the pagination links and then res dot meta will give us like the last page current page total things like that so what we want to do here or all I'm going to do here is console dot log res dot data like that alright now this should run automatically because we have it inside of created so let's save that and go back and reload the page and then down here you can see we're getting all five articles okay remember we're using five per page so that's what it's going to give us we're gonna add the pagination later so don't worry about that so we need this to output onto our page right so we want to assign the articles that are coming in to this articles array right here so to do that we can simply say this dots articles equals res dot data right and then we'll go up here into our view into our template and we're gonna put these let's see we're gonna put these inside of cards bootstrap cards so we're going to use a div here and we want to basically just loop through the articles so to do that we need to use a v4 directive so V dash four and we're gonna say for article in articles like that for v4 now we're gonna we have this error here because it's saying that it expects a V bind key so that's kind of like in react it does the same thing you want to have a unique value as a key so we're also gonna add here V dash bind and we want to bind a key of a unique value so our unique value will be article dot ID like that alright and for this div that we just created I want to also add a couple classes one of card and one of card body so that each article is wrapped in a bootstrap card which is basically just a boarder some padding stuff like that all right and then in our h3 here we'll put the title so we'll say article dot title and then in a paragraph we'll put article dot body so let's save that and let's reload and there we go we get our five articles now I don't want these squished together so I'm also gonna add a class here of mb2 margin bottom two so now there's some space in between now for the pagination it's gonna be a little difficult it's kind of it's kind of hard but I'll try to explain it the best I can basically if we look at our API response we have the page four first okay so this would be the first page articles and then a parameter of page equals one that we have the last page which would be six and then we have the previous page which would be two alright so I'm sorry the next page would be two so we need to get those values and we need to use those inside of our fetch instead of just fetching from this so what will what will happen is we'll have a parameter here called page underscore URL and then right here we're gonna say page underscore URL is going to be equal to the page URL if there is one or it's just gonna be equal to slash API slash articles and then instead of putting this inside the fetch we're going to put our page URL okay and there are components to do pagination but I figured that doing it you know custom would be a better option and show you guys how to do it alright so once we get that page URL we want to how we're gonna have another function called make pagination okay so I want to call this dot make pagination but we need to kind of assign a different variable for this so we're going to use VM we're gonna say let VM equals this like that and then down here inside of our response our promised response we can then say VM dot make pagination and we want to pass in here both the links okay if you look at our response the links and the meta okay and we're getting that from this res so we're gonna say res dot meta and res dot links okay so we're gonna pass those into the make pagination we should probably add a catch on to this as well just in case there's an error that alright so now what we want to do is create our make pagination function or method and that's going to go right under the fetch articles okay so make pagination takes in the meta and the links and then what we'll do is say let's pagination equals we're gonna create an object here made up of this stuff that's passed back to us like the current page the last page and all that so let's say current page we'll set that to meta dot current page because if we look in right here where as let's see where's meta right here so we have meta current page which right now is one so we're assigning that we're also what we also want the last page which we can also get from that meta object so meta dot last page we also want the next page URL and that comes from the links so links dot next and then we also want whoops we also want the previous page URL so prove page URL also comes from links and that's dot free v' and we can clearly see that right here breve next alright so now that we have that object we're going to set that to this pagination value right here so we'll simply say this dot pagination equals pagination so that's it that's all we need for our make pagination so I'll go ahead and save that should still work should see any errors or anything good now we need to display it we need to display our pagination so we're going to go back up to our template and I want to put the pagination above the articles so I'm going to go right above the card right here and we're gonna put this actually you know what we'll do is just go to get bootstrap and let's go to components pagination and yeah I'm gonna grab this and let's put this here okay now I'm not going to do the one two three and all that in between instead in between it's gonna say like one of six two of six and so on but for now I'm going to just get rid of the one two and three and just have the previous and the next and then we have some directives we have to add to this stuff all right so for this this previous li we're gonna bind the class to it okay so we're gonna say V - bind and we want to bind a class and we're gonna set this to some brackets and in here we want to say disabled because we want it to be disabled if there's no previous page so we'll say disabled if not and then we're going to use that pagination object which has a previous underscore page underscore URL value let's see why does it look like that to save oh I didn't put I gotta put quotes around this like that all right so hopefully you can see what's going on here we want this to be disabled if there's no previous page URL which is gonna come from down here previous page URL all right and then we also want if we click on the previous we want it to fetch articles but we want to pass in the previous page URL so I'm gonna go let's we actually want to put this on the a tag on the inside so let's go right here and let's say I click equals and we want to call fetch articles and then we'll pass in here the pagination object and then we want the previous page URL okay but it will be disabled if there is no previous page URL so let's just save this and see what we get okay so you can see that it is disabled and that's good because we're on the first page so now let's work on the next so same thing here we wanted we want it disabled if there's no next page URL so I'm gonna grab this and put that right here except we're going to say disabled if there's no next page URL and we also want the click I want this click event we're going to put that in the a tag right here get a quote in there and then we're gonna change this to next page URL alright and we're passing this in as this right here page URL so let's see what happens if we try it so we'll reload and if we click Next there we go so this is the next page and now you can see previous works if I go back it doesn't if I keep going we get to the last page it doesn't it we can't go any more all right so we're just about there now we just want that middle part that says what page were on so I'm going to go back up to the pagination and go in the middle of the the previous and the next and let's put another Li so just I'll just grab like one of these and put that in here we want the page item we want it disabled so it has a class of this is always going to be disabled it's not a link and then I'm also going to change the text to dark bootstrap has a text dark class we can use and then inside here instead of the number two we're going to say page and then remember from the pagination object we can get the current page okay we set it up so we can get the current page and then we're gonna say of and then also from the pagination we can get the last page all right so let's save that and let's take a look and there we go one of six two of six all right so our pagination is now complete and I know it's a lot of steps but it's nice to have pagination in case you have you know a ton of articles alright so now that that's done let's do the next easiest thing which is probably the delete alright so we'll go ahead and we'll go up here into our card okay so our recurring cards and under the paragraph let's put an HR and then we're gonna have a button so let's see we'll give this button a class of BTN BTN - danger - make it red and it's going to be a delete button alright we're going to add a click event to this so we'll say klipsch not client click equals and we're going to set this to delete article and we're going to pass in the article dot ID and then we'll go down to our methods we'll go under the make pagination which ends here we'll say delete article oops I want to say delete article actually yeah that was right and it's going to take in ID so we want to make a delete request to our API alright but before we do that let's just do a confirm since it's a delete so we'll say if confirm are you sure and then we're going to go ahead and make our request so we'll say fetch and we're gonna pass in here I'm gonna actually going to use back ticks when you use a template string because we want to do API slash article okay singular and then the ID like that okay then we're going to pass in a second parameter of an object and we're going to say the method is gonna be delete and let's do dot then and it's going to give us the the article back so let's say res dot jason and we'll do a dot catch as well if something goes wrong all right now inside this dot then all I really want to do here is just do an alert and just say article removed and then we just want to call fetch articles again so this dot fetch articles first page obviously so we don't pass anything in and that should do it so it's safe it's reload and now if I click delete are you sure okay article removed and you can see it goes away all right so that's done now let's do the add form it's actually gonna be the add and edit form so we're going to create this right below the h2 we put in a form here doesn't need an action and let's see inside here we'll put a form group which is just a bootstrap class we'll put input and let's give this a class of form control and give it a place holder of title and we want to now map this or bind this input to this right here the article title so to do that we use B model so V - model and we're gonna set that to article dot title and if you're familiar with angular or not view or angular 2 plus this is like ng model okay and then let's see we'll go ahead and just copy this paste in again and this is gonna be the body but it's gonna be a text area so I'm going to just replace this with text area and of course that needs an ending tag placeholder we'll say body and then V model is gonna be article dot body all right and then finally we need a submit' so we're gonna say button let's give it a type of submit and let's say save I'm also gonna give it a class of BTN and BTN - light and let's also do BTN - block all right so let's see if that shows up okay there's our form let's move this stuff down a little bit so for our form let's give it a class of MB will do MB three and then we also need to add a submit event to this so we'll say submit and then we're going to do submit prevent because we want to prevent it from actually submitting to a file or anything so submit prevents and then we're gonna call add article alright so down here in our methods let's go below delete article and then this is actually going to handle the add and update so remember we had that that state value of edit which is false by default so what I'm going to do is I'm going to say if let's do if this dot edit is equal to false then we want to add else we want to update okay so we're we want to deal with the add so let's say fetch let's get rid of that so fetch API slash article is our end point and we want to pass in some options method is gonna be post making a post request and then the body we want to wrap this in Jason dot stringify because we want this to be adjacent string and we're just gonna pass in this dot article which has the ID the title on the body okay now we also have to add headers and we have to add the content type so we're gonna say content - type is going to be application slash Jason all right and then we'll go down here and we'll do our dot then okay we take our response res dodgy s'en do another dot then and our dot catch okay so inside the den here let's take the data and I want to clear the form so we'll say this dot article dot title equals nothing and this dot excuse me article dot body equals nothing and then we'll do a alert you don't have to do these alerts if you don't want to they are kind of ugly but I just want some kind of notification and I don't feel like getting into flash messages and then we just want to fetch our articles again all right so let's try that out so we'll say test article added and there it is cool so now last thing to do is the edit so what I'm going to do is put another button right above the delete so we'll take the delete button here and we'll just copy it up and let's change the click oops we'll change the click to edit article and we want to just pass in the entire article not just the ID we'll change the text to edit and we'll change the class - BTN warning which will make it yellow alright so the edit article is basically just going to it's going to change this value to true and it's also going to add everything to this ok this article object so let's go down here after edit add article it's not going to do the actual update the update happens here but it's going to just basically set us up for the update it's gonna input the stuff into the form and so on alright so let's do edit article actually yeah this is fine I guess so edit article takes in the entire article and then we're going to set this dot edit to true we're gonna set the article this dot article dot ID to the article being passed in ID and then remember what I said when we do the update we have an article underscore ID field that will also get set to the article ID that's being passed in and the title whoops and the body okay and that should do it so now if we save this and we go back and actually let's add a some margin bottom right here to the edit button so if I click Edit you can see it goes right into the form good now when we save it's gonna now call it's gonna it's gonna run this code because this edit is now true so it's not going to run this it's going to run whatever we put in here so what I'm gonna do is let's see I'm gonna copy all of this this fetch and put that here except we're gonna do put it's gonna be a put request and for the body that's gonna stay the same it's just going to be all this stuff including the article underscore ID which is needed for an update all right and then let's see we have our headers we need that down here we'll just change the message to updated and that should be good all right so let's try it so we'll reload we'll say test article edit let's say test article updated and save article updated okay and you can see now it's updated alright so we now have a complete crud application with pagination in view J s using laravel as it backend alright so whenever you're going to edit this just make sure you run your watch script we can just now stop it with ctrl C and that's our application alright and maybe I'll go through a deployment with this in a separate video laravel is pretty easy to deploy compared to like nodejs and some other some other languages and frameworks and technologies so that's it guys thanks for watching hopefully you enjoyed this and I will see you next time hey guys if you've been watching my videos for a while and you really like what I do when I've helped you out a lot consider becoming a patron even for one dollar per month it pushes me to keep bringing you guys the best content I possibly can there's reward tiers for discounts for you to me courses personal support and more so check out the patreon link in the description below for more info

Channel: Traversy Media

Views: 489,967

Keywords: laravel vue, laravel vue.js, vue, laravel, laravel api, vuejs laravel, full stack vue

Id: DJ6PD_jBtU0

Length: 45min 14sec (2714 seconds)

Published: Mon Feb 19 2018