Vue js Customer Manager App Frontend

hey guys in this video we're going to be building a front-end to the slim PHP restful api that we created that I created a few days ago alright so before I start I just want to mention a couple things a couple important things one if you're going to be following along copying the code I'd strongly suggest that you go back and build the backend first by watching that video I'll put a link in the description if you're just watching that's fine but in order to code it all out you'll need access to that back-end API alright I have it on github ok this link right here so you can download it you can import the database which is in this SQL file right here ok it just has our customers table with some fields so if you want to do that but I'd still suggest watching the video so that you can get your virtual host setup and all that alright the second thing I want to mention is that if you're looking to learn the basics of UJS and you want good explanations of all the different fundamentals then go back and watch my few j/s in 60 minutes video all right this isn't a step-by-step tutorial this is a project video so I won't be explaining every single little piece of code because I want to get this done in a timely manner all right so just keep those things in mind as you're watching this video now if we take a look at the application we'll be building you can see that we're listing all the customers that are in our bio school database coming from the API and we can actually filter by last name if I go ahead and I add D in there you'll see that it filters last name D and if I continue to type let's see that it'll filter down to dough all right so we can filter the the customers we can list them if we click view it'll take us to customer slash and then whatever the idea is we can see the name the contact info the address and so on all right we can also delete ok so if I click delete you'll see we get a little alert says customer deleted and Tom Doe is no longer there ok we can also edit so let's see we want to edit Katie Dotson let's say we want to change her name to Catherine and submit and you'll see that she's been updated all right we can also add a customer so let's go ahead and add John Doe okay address will say three Main Street Miami Florida okay submit and you can see that John Doe has been added okay and then we just have a simple about page as well so that's all be building I still have my slim app back-end set up from from the last video we did there are a couple things that we need to change from that video all right a couple small things one we need to enable cores so that we can actually have cross-domain requests so to do that if we go into I've already updated this in the github so if we go to source routes customers PHP right here is what you want to add okay this is this will enable cores on your server alright you want to have allow origin by any domain okay or you could put a specific domain where you're building your front-end but this will allow requests from anywhere ok get post put and delete requests so just add these two blocks of code and that should work the second thing really simple when we're getting our single customers I should have actually did this in the last video but we had it at fetch all right here and what that does is it gets in a wreck an array of objects even though it's only one customer and I don't want that I want to return just a single object so change fetch all to fetch alright if you still have the code from the video those two things are all you should have to change on the backend alright I actually have to change those things myself on my end so I'm going to go ahead and just open up see htdocs slim app routes customers and we just pull this down okay so I'm just going to grab this and we'll put that right here and I'm also going to just change under single customer fetch all we're going to change that to fetch okay and that should that should be all set so I'll save that and now the back end is prepared and we can continue with UJS alright so let's head over to view js2 the website and go to get started and let's say you want to click on installation right here alright we're going to be using the view CLI if you watch the my view in sixty minutes video we're going to do the same thing we're going to go ahead and you want to install view CLI if you don't have it okay of course you need nodejs and npm but you want to run this I already have it installed so I'm not going to run that and then we just want to generate a project like this view in it alright so let's go to let's see I'm going to go to my projects folder and this is where I want to create it so I'm going to open up a command line okay so let's go to projects alright and we're going to do few in it and we want to use the webpack module and then we'll name the application I'm just going to call it V customers all right and that will go ahead and generate the application okay it's just going to ask us a couple questions we're going to enter through this let's say simple customer manager enter it's fine ok so I don't want to use es lint so I'm going to say no to this same thing with the testing we don't need that all right so now what we want to do is CD into V customers and we're going to run NPM install and that'll get the dependency setup all right so that's all set let's go ahead and run NPM run dev and that should start up our application oh you know what I have to change my port number on the dev server so let's see I'm going to open up my editor and we're going to open up the full project folder which is V customers all right and you shouldn't have to do this if port 8080 is open on your machine but I'm going to go to build and then dev server j/s and let's see I'm just going to change this right here to port 8000 all right we'll save that run it again and it should open on port 8000 all right so we have our boilerplate app running now I'm going to just kind of get rid of all the the demo stuff so let's go over to source SRC folder and we're going to go to let's see app dot view and let's get rid of this image right here we'll get rid of the hello component and for now let's just say test get rid of the import from hello get rid of it right here and we'll also delete the styling right here all right so let's save that and now we get test ok no errors in the console it's good so the first thing I want to do is create I want to create two components I want to create customers which will be basically our landing page and then about which will be just a simple about page alright so in the components folder what we're going to do is let's actually just rename hello to customers okay so customers view and then we're just going to get rid of everything in this div with the class of hello and let's change this class to customers and we'll just put right here for now customers we're going to change the name of the component okay we can get rid of this message value here and let's get rid of all this styling all right very simple save that and then we're going to copy everything that's in it and create another component called a boat view paste that in change this to a boat and change this and this okay we'll save that now if we go back to app dot view and what we want to do actually we're not even we're not going to use this at all this file because what we're going to do is set up our router in main j/s so that we can load customers as our home page and we'll have a nav bar with some links and we'll be able to go to the about page from there alright so we're going to have to install the the view router so I'm going to go back to the command line here just stop it with control C and we're going to say NPM install we want to install view - router and we also want to install view - resource later on for when we make our HTTP requests alright so let's just add - - save and we'll go ahead and run that alright so that should be all set let's go ahead and run the server again NPM run dev okay and then let's just get rid of this stuff here we don't need any of this alright so now we're going to go to main j/s and we're going to bring in the the view router so let's say import view router and that's going to be from view - router alright while we're here we might as well bring in the resource so view resource and that's going to be from view - resource alright actually you know what that's going to be a lower case V alright now we need to just add a little bit of middleware here so we're going to save view dot use and then we're going to pass in our view resource and it's do view dot use and we're going to pass in the view router alright so now what we'll do is create our router object so let's say Const router and we'll set this to new view router inhale pass in an object I'm going to say mode history the base will be the current directory which is a double underscored our name let's see and then we're going to put our routes which will be an array ok so let's say path this will be for the home so I'll just slash and then we want to define the component that should load which will be customers ok then we want to have path and let's say slash boat and obviously we want to load the about component alright now we have to import the customers and about components so up here we're going to say import customers and that's going to be from C dot slash components slash customers ok we'll do a boat components slash about all right so we have our two routes here now we want to do is go down to our instance and we're going to get rid of the element right here we don't need that template we're going to clear that out for now we're going to use back ticks so that we can use multiple lines and then we don't need this and then we just want to at the end here say dot money sign mount and we want to mount to the app ID now in here I'm going to put a div with the ID of app okay and we want to put in our router - view so this will just load whatever the current view is okay oh I forgot to pass in router get a pass setting right here alright so if we save that you can see that we're getting the customers view because that's that's the route component that's the route view so that's what's being loaded all right we should be able to if we were to put in router - link and say 2 equals slash about that should bring us to about yep all right now we're going to be using bootstraps so I want to implement the navbar all right as far as bringing bootstrap and I'm just going to use the CDN so let's grab that okay so we'll grab this link copy that let's change this title while we're at it we'll say V customers let's say manage customers all right now we'll put in a link rel stylesheet and let's put our href and paste that in okay we're also going to need the JavaScript and we're going to put that down here so let's say script source and we'll grab that as well okay now we're also going to need jQuery for bootstrap j/s so let's get that just grab this link here and we'll put that make sure you put it above the bootstrap up didn't copy okay paste that in and we should be good to go so now you can see the fonts changed and stuff so now let's get a navbar so we'll go to get bootstrap comm do this the quick way we're going to go to examples start a template control you and let's grab this okay then we're just going to go back to main j/s so we can close that out so in main j/s I'm going to go right above the router view and paste that in and then what we'll do is change its get rid of the class active change this to router linked will say to slash okay we'll do the same thing with the boat that's going to go to slash a boat and we'll get rid of the contact okay let's also get rid of navbar fix top and change navbar inverse to navbar defaults which will make it the light color alright and then project name change that to the customers save it let's go back or is it and there we go so now if I click home we get customers about we get a boat okay no error is good so let's go ahead and go into the customers component I'm going to add a class of container okay and then we'll just add an h1 and give it a class of page header and we'll just say manage customers and let's go to a boat also add a container okay we'll just say about save that and there we go so now what we want to do is bring in our customers from our API so let's go over to the customers component and we're going to add in the data here customers and we'll set this to an empty array now let's go under the data here put a comma and we'll say methods and we're going to have a method called fetch customers okay we're going to use the view resource module and say this dot money sign HTTP okay we're going to make a get request and we want to make it to HTTP and mine is in slim app I believe slash API slash customers okay then we're going to do dot then and in here our function with a response and then what I'm going to do is just console dot log and let's log response dot body ok now this isn't going to run yet what we're going to do is add it to a life cycle hook called created which runs whenever the component loads so we're going to go down here put a comma and say created okay make sure you don't put created inside methods okay it doesn't go in there and then we're just going to we're going to run this dot fetch customers all right so let's go ahead and save that and there we go so we're getting our customers from our API now if you didn't add the coconut enable cores as I did in the beginning of the video you're going to get an error saying something about allowing access all right so you want to enable cores on the server so what we want to do we obviously don't want to just console.log it we want to assign it to this customers right here all right so let's say this dot customers now we want to make sure it's in JSON format so we're going to say json dot parse and let's pass in not request response dot body now we should be able to access customers from within our view so let's go up here and what we're going to do is we're going to have a table so i'm going to go ahead and paste the first part in so we just have a table with a class of table and table striped we have the t head with the table row first name last name email and then an empty one for the button and then the t body is where we want to loop through our customers so we're going to put a table row and we want to use the V for directive okay which basically allows us to do a for loop and we'll say customer in customers okay so we're grabbing this value which is being filled here by our response so let's go ahead and put in our TD oops okay so this is going to be the first name so double curly brace customer dot first name alright and I'm just going to copy that [Music] okay so have first name last name and email and then the button is going to go here I'm not gonna put that in yet alright so let's go ahead and save that and now you can see we're getting our customers so the next thing I want to do is I want to be able to add customers so for that we're going to need another component so in components let's create a new file and I know I'm going kind of fast here guys but it's a lot of code so I want to get it done kind of quickly and again if you are having trouble understanding what's going on I would suggest watching the sixty minutes video first all right so let's call this add dot view and I'm just going to copy what we have in about paste that in okay we'll change the heading to add customer change that to add and then we want to we'll save this and we'll create a route so in main j/s up here let's go ahead and copy that and we'll say add change this to add which we have to import just like that and then what we'll do is add a link down here now I want the add link to be over here on the right so what I'm going to do is copy this ul paste that in and we'll add another class of nav bar right okay we can delete one of these and then we're going to change this one to add customer and the link will be slash add save it okay so if I click on that we get add customer all right so now we need to create our form so let's go back to the add component and inside the data here we're going to have customer and we're going to set that to just an empty object for now all right now up in the template let's put form and we're going to put a V on submit okay so what that's going to do is when the form is submitted it's going to call whatever function we put in here which is going to be add customer okay now just to save time I'm going to paste this form in and I'll go over it so I separated it into three different parts which are wrapped in a div with the class of well okay so we have the customer info which is the first name we have a label then we have the input which is a text and notice that we have this v-model attribute which is going to bind it to customer dot first-name okay we're doing the same thing with the last name then we have the contact area which we have the email and the phone okay you can see v-model customer email customer phone and then finally we have the location info which we have the address the city and the state okay and then we just have a button with the type of submit all right so let's save that okay that gives us a form now it just says add customer is not defined so we have to add that so let's go under data and we'll say methods ad customer so this actually will take in the event object and we want to say e dot prevent default to prevent the form from actually submitting and for now let's just do a test you'll say console.log one two three reload and if we were to submit this you can see down here we get one two three all right now as far as validation I'm not going to do anything advanced we're just going to make sure that there's a first name a last name and an email so we'll do a simple if okay we'll say if no this dot customer dot first name or actually yeah we'll just do that so or copy that okay so we'll change this one to last name and this to email and for now we're going to console.log what I want to do is create an alert component okay because we'll have different types of alerts so I think that they should be in its own component but for now let's just say console.log okay and then we'll have an else I'm just going to put this in here as well all right and then what we want to do is we want to create an object from all the form fields so let's say let new customer okay that's going to be an object and I'm just going to grab I'm just going to paste this stuff in alright so we're just creating an object here with all the fields and setting it to this dot customer dot and whatever that field alright and then what we want to do is take this object and we want to make a post request to our API and submit it alright so again we can use the view resource will save this dot money sign HTTP POST and even though it's a post request it's formatted just like the get requests and we want HTTP slim app or whatever you called whatever you use for your API domain slash API slash customer slash ad all right now we just want to put a second parameter here with that new customer object okay and then we want to do then and in here we'll have our function this will give us a response but all I want to do is redirect so after it's inserted into our database in the backend we want to redirect back to the home page alright now since we're using the router we should have access to this dot money sign router and then we can say dot push which is basically redirect alright we want to go to let's see you put an object path we want to go to slash alright so let's go ahead and save that okay now if we go to add customer let's go ahead and try it out we'll say Tom Williams phone alright so let's go ahead and submit and there we go Tom Williams okay if we reload he's still there good now I want to make sure that the requests the fetch user our fetch customer is always called when this is updated so in addition to put it it putting it in the created hook I'm going to copy that put a comma I want it in the updated hook as well alright just like that so let's see now when we submit this I want to have an alert telling us that it's been submitted okay it just looks nicer from a UI standpoint so we're going to create a new component called alert dot view and for now let's copy what we have in the about okay and we'll just change actually you know what this is going to be formatted differently but let's change this and what I'm going to do is go to get bootstrap and we're going to go to components and alerts and I want to get the collapsible one this one here are dismissible whatever and we're going to copy this and then put that as our template okay now for this component I want to be able to pass in a message when we when we call the components so we're going to add a prop our property right here we'll say props and just pass in here message all right and then up here we're going to get rid of this line we're going to replace it with whatever that message is all right so that should do it for the component itself so let's save that and then in customers we're going to import it so let's go right here and say import alert from alert okay let me just tab this over and then we're going to put it let's see let's put it above the h1 and we'll say alert and say message equals for now we'll just say test okay now let's see we're going to have to add it as a component so down at the bottom here we'll put a comma say components alert and let's save it let's take a look I expected token oh I've got the comma and the alert component right here all right so let's save that and now we have our alert component now obviously we don't want this to show all the time so what we're going to have to do is add in our data not in the alert component in our customers component we'll go right here and say alert and we'll set that to nothing by default and then up in the component we're going to put a v if because we only want this to display if there's something in alert so if we save that now you'll see it's not showing and then we also want obviously we don't want to pass in test we want to pass in whatever is in the alert so what we'll do is add V bind to this okay since we're putting in a variable we need to use this V bind and then whatever alert is all right now the way that we're going to get the alert okay when we add a customer what we can do is if we go to our add component and where we have this push we're going to path home we can actually send a query along with this okay we can send information along with this so what I want to do is send the alert message so we're going to add a comma right here and then we're going to say query and let's say alert and we'll say customer added so now we can send this along to that route so let's save it and then we'll go back to our customers and then what we need to do is check for that alert so we'll go to created because this is going to run when we when we redirect back and we're going to say if we'll say if this dot money sign wrote a dot query dot alert okay so that means that there is an alert so then we'll set this dot alert equal to this equal to the alert that's coming in so let's go ahead and save that and then what I'm going to do to test this out actually we'll just add another customer so let's go back and say add customer we'll say Jen Thompson all right so let's say submit and now we get customer added okay and we can cancel we can close that with the X button as well all right good so we can now create and read customers but we want to be able to get a single customer as well and get the rest of the information so we need a View button over here that will take us to a details component all right so let's go ahead and create a new component and we'll call this customer details dot view okay and again we'll just copy what we have in a boat we'll change this right here to details okay for now we'll just change this to details for the name it's going to be all lowercase customer details and let's save that now we want to create a route for this so let's go to main j/s and we're going to go ahead and import that and let's add a route so the route is going to be customer slash and then colon ID okay it's going to have an ID parameter and we want to load customer details component all right so let's save that now let's go to our customers view file and go up to where our table is and we're going to want to put a router link button in here alright so let's say router [Music] link and we're going to give it a class default now it's going to have a two attribute but since we're going to have a variable in it we're going to use V bind so V bind colon 2 equals ok and then inside this two let's see we're going to have we're going to put single quotes and then slash customer slash and then go outside of the single quotes and we're going to concatenate customer ID all right let's save that now if I hover over it and you look down here in the corner you'll see we get customer slash for customer slash 3 click on that takes us to the details now in the details we want to again make a request to our API to get the single customer so let's go to customer details and we're going to go under the data and let's say methods and we'll create a method called fetch customer and just going to copy what we have in the customers right here ok paste that in and then let's change this route to API slash customer let's see yeah this is actually going to take in an ID and then we're going to just concatenate say slash ID all right and then we want to set this dot customer singular to the body all right now we want to call this when the page loads so we're going to go under methods and add the created hook okay we're going to call this dot fetch customer and then we need to pass in the ID which we can get from the parameters from the route so this dot route dot params dot ID all right and then once we assign this dot customer we should have access to it in the template actually we need to put it here first that and then up here let's try and do customer dot first name okay save it and there we go so we can get the first name let's put the last name okay so now we can do the rest of the info I'm going to paste this in so we're putting two UL with the class of list group and you can see we have we're using the bootstrap icons this glyphicon class click on dash phone and we put in customer dot phone and customer dot email and then down here we just have the contact I'm sorry the location info all right so if we save that you can see we can get all that stuff alright so we can now get individual customers if I click on Sam Smith view we get his info all right and I just want to put a back button up above the up above the h1 so we'll just put in router link and we'll say two slash okay so now we have a back button so now we want to do is we want to have an edit and a delete button on this page on the details page so let's let's go within the h1 right here and let's say try to think what I want to do here let's put a span we'll give it a class of pull right just to bring it up bring the buttons over to the right and let's do the delete first because that's easier so we'll say button and it's going to have a V on so V on click and we'll say delete customer okay let's also give it a bootstrap class BTN danger okay so now we have a delete button we also want to pass in the ID to this function so let's put parenthesis and we'll say customer dot ID all right and then down here in our methods let's say delete customer okay that takes in ID and just to test it out let's pass along the ID okay so now let's reload this but click that we get to now we want to make a delete request so I'm going to copy this what we have in fetch customer and we're going to change it to dot delete and we want this to go to API slash customer / delete slash and then the ID all right and then in here we just want to redirect let's get rid of that and say this dot router dot push okay and we're going to put in here our path which is going to be the home page and we also want to pass along query because we want a message so we'll say alert customer deleted all right let's save that and hopefully this works we'll go to Gen Thompson click delete and we get customer deleted and she's gone good so we're just about we're almost there we a we can create read and up I'm sorry create read and delete now we need to be able to update so for this there's a couple ways you could do this I'm going to actually create another component called edit with the Edit form so let's go ahead and do that edit dot view and it's very similar to the add form so I'm going to just grab everything in there and paste it in edit okay we'll go up to the top here change that that the submit function here is going to be I would say update customer [Music] this stuff will all stay the same the v-model that can all stay the same you could actually use the same form for add and edit but I'm going to just separate it alright and then let's see down at the bottom [Music] we're going to want to fetch the customer just like we did in the details so we're going to have to add a route with a parameter so for now I'm going to just get rid of this add customer just for now actually no let's keep that because I guess we could just edit it now so we'll just change that to update customer and let's say we want this the check in here and then we're going to build a new object let's change it to update customer that can all stay the same and then it's going to make a request but we want to make a put request this time and we want to make it to API slash customer slash update and slash update and then the ID is going to come from the route so we can say slash and then this dot route dot params ID okay and then we're going to pass along the update customer object and then we're going to redirect that's good we'll change this to updated all right so let's save that for now and we're going to create a new route so we're going to go to main J s and we want to bring in edit okay and then let's copy this change this to edit / ID component edit alright so we'll save that now we need a button going to that route so let's go back to customer details go up to after where we have the delete button which is right here alright and for this we're going to use a router link I'm actually going to put the edit button first so we'll go right above the delete and say router link and we can give this a class of BTN and BTN let's see default I will do primary and then for our two we want to use V bind so V bind to and in here we want the the route we want to go to which is going to be a slash edit / and we want to just add on to that customer ID all right so that'll give us the button so if we click that we go to edit customer now these aren't filled in because we have to make our request to our API to get that current customer all right so let's go down here actually no we want to go to edit dot view and let's go right above update customer and we'll say fetch customer make sure you put a comma there alright and it's the same fetch customer from the details page so we can just grab that and go ahead and paste that in okay that's going to take in an ID and we want to go down and go to the created hook which will go after methods function and we're going to call this dot fetch customer and we want to just pass in from the params so this dot route dot params dot ID all right and we're setting that to this dot customer so that should then fill in all those fields so let's save that and I can see all the fields are filled in and we should be able to update it because we already did this update customer so let's say Sam Smith we want to change his email to let's say Sam it Yahoo okay we submit we get updated and his email has been update it okay so we now have full crud functionality one thing I do want to do here is when we for instance add a customer and we forget the first name and stuff and we try to submit we get a console log all right I actually want to use the alert component here so let's go to our add component and we're going to import the alert so from dot slash alert and the semicolons I always use semicolons but by default when you use view CLI you can see they don't use them so you might see sometimes they are there and sometimes they're not I'll just leave it off I guess I just want to tab that over all right so we're bringing in the alert component and then what we want to do is add that here in our data so work and we want to go up here to the top above the h1 and say alert and we'll have the V if and the bind so V bind message alert all right and then down here well we have the test and we do the console log we're going to just change that to let's say this dot alert and we'll set that to that text okay save it and let's see whoops what happened here oh this alert I forgot the slash okay so now if we try to submit unknown custom element all we got to register it we just have to add it down here as a component so we'll go after methods that is that in there whatever all right so let's save that and we'll try it again okay submit and we get please fill in all required fields all right when we want to do the same thing for the Edit so I'm just going to let's see we'll copy this and we'll go to edit view same thing okay we need to import it and we're going to what else add it here and change the console.log this dot alert okay and then we just need to add it as a component okay so alert all right so let's save that okay so if I were to get rid of that and try to submit we get our message good so that's all set now let's see the last thing we need to do is just the filter now this search filter was much easier in viewed 1.0 because there were predefined filters and search was one of them so this was easier but they took those out for some reason I don't know if they're going to put them back later or what's going on with it but we have to create our own which isn't too bad so first thing we'll do we need to go to our customers view and we're going to put in a fun input a text input right below the h1 so we'll say input and let's see we're going to give this a class of form control and let's give it a place holder and we'll say enter last name okay and then we're going to give it a V model of filter input all right and then we're just going to put a line break below it all right so now we have our input okay so we need to add that filter input in our data that's what it's complaining about and let's see what else we're going to go and tie into the methods right under fetch customers and let's say filter by ok this is going to take in list and value and let's say return list dot filter and that's going to take in a function okay inside here let's say customer and then we just want to return customer dot last name and we want the index of so index of the value and then we're going to say greater than negative one all right and then up here where we have the for the V for and we have customers we're just going to wrap this in filter by and we're also going to pass along the filter input okay which is whatever we're pass whatever we're typing in the text box is going to get passed along in here okay so let's go ahead and save that okay so if I were to do let's say s you'll see we get Sam Smith now notice that if I do lower case asks wait a minute that's not right yeah if I do a lowercase s it's different so what we're going to do is as we type that in we want it to automatically capitalize the first letter so that it works so let's see let's go to filter by and we're going to say value equals value dot char at okay we want the first character which is zero and then we just want to call to uppercase to uppercase and then we're going to say value dot slice one okay so let's see if that works we say s there we go Smith okay T yep all right so that's working good and we can just add some text to the about this is a customer manager app built with the view J s framework and we'll say version 1.0.0 all right cool so we can now create read update and delete customers from the PHP API that we created so we have a front end and a back end all right so that's going to be it I know that this video was was quick and there was a lot of code and a lot of information I know that some of you may have gotten a little confused along the way if you have any questions put them in the comments if I can't answer them I'm sure someone else will be able to help you out but hopefully you enjoyed this if you did please leave a like please subscribe if you're not already subscribed and I will see you in the next video

Channel: Traversy Media

Views: 193,187

Keywords: vuejs, rest api, vue js, vue.js tutorial, vuejs app

Id: IUgstalu6zo

Length: 61min 33sec (3693 seconds)

Published: Sun Dec 18 2016