**Part Five: Implementing Save Functionality**

So now we're on edit song it fetched all the information for that song and we can probably change stuff as needed put an exclamation mark at the end up with that and if we click save it should not do anything because i don't think we have anything really implemented ready to go. All right so save song when clicked we should be calling the save over here and we have a method called save let me just make sure that this is being invoked yep save clicked it's saying put is not a function so that makes sense we haven't implemented this put yet so if we go to our services and go to song service again we're going to have to add a put and basically this is for updating so we're also going to have to do slash song id. So i'll make the put right next to the git so it makes a little bit more sense so this is going to call a song's controller.output method if i go to my songs controller which is here.

Lastly we'd have to make a put method here oops so i'll say put and now what we want to do here is just go ahead and call update rec.body and then for the second parameter argument we pass in we only want to update where the id was equal to song id remember song id is going to be inside that routes here so we're going to grab it and only update the song which was or which matches that song id. And then if this works it should just return that song in fact i i think this will return it's something that we don't want so i'll just go ahead and return this.body so it's going to return the same song you uploaded so i'll do rec body sorry about that and if it doesn't it'll say an error has occurred trying to update the song.

**The Solution: Implementing Put Method**

Alright so hopefully let's see what happens when we do this call save song it does a it did a let's see a put on song six it pasted this information and then it redirected us to slash six and i'm not sure if it actually edited or updated it so let's let's make sure the payload that got sent was an updated title and it wasn't so if i go back to here and just add an exclamation mark hit save we see that it updated the song and it added a exclamation mark and it actually hit the back in over here and updated the database with that data. So i think that may wrap it up for part five um stay tuned for part six where i'm probably gonna add a search component here and restyle this page just a little bit more and then i think finally we could wrap this up in a part seven or part eight all right again thanks for watching and be sure to subscribe to my twitter which is in the description below if you want updates when the next parts are released alright see you

"WEBVTTKind: captionsLanguage: enhey everyone and welcome to part five of building a full stack web application using vue.js and express.js i am cody and let's go ahead and get started so if you remember in the last one we kind of built up the songs panel and we made a songs endpoint to grab all the songs in a songs and point to post new songs created this panel to create songs and all these are required fields so in this part of the tutorial we want to continue on and build out the functionality of viewing a song so if you remember here when we clicked view it takes you to this url which is song slash id which is one in this case and if we were to go back to the routes just to refresh our memory we have a new route here called song song id and we have the name is song and the component is view song so basically that's just going to show this component here and we need to start implementing this out so to start off we can actually grab that same data from the backend so assuming that we have a backend endpoint we could do mounted and then run a function when it's mounted and then up here again we're just going to import whatever that song's thing is that we used so import song service go ahead and just close out of these extra tabs and make it easier to figure out what i'm doing so inside here we import song service from that services song services folder and what we can do when it mounts is remember to do async we can say const song is equal to await song service dot i'm going to say show and then here i'm going to pass in a song id in order to get the song id from the url here so remember this was a one and we want to grab it all we need to do is i say all but there's a lot of stuff you need to grab so this dot store.state.org route dot prams dot song id so there's a lot of stuff going on but basically this is the ux store we grab the state in the ux store route is defined because if you remember an app a long time ago we did added this line to sync the router to the store so whenever the router changes in the ui that value here route.params.songid changes as well so to kind of demonstrate that let's just go ahead and make sure that we can go to this page let's see song services grab but never use let me just comment this out really quick print out song id okay what is this one warning about now trailing space okay so again i was trying to explain how we can get the song id from the url and to demonstrate that as we change routes every time in view this route changed event is being dispatched so if you remember in if i go back to the store here we have set user is an action and set token is an action those are kind of actions that are dispatched and it turns out that the view router what i call or the view sync what is it called again i'm sorry the view x router sync module is basically just a way to map and send out dispatch events whenever our route changes so if you look here inside here we can go to route and at this point the prams or path or songs if i were to go to hit the plus it changed this to a full path of songs and again i can time travel back to those states that i was at if i want to so very useful but what i'm trying to explain here is that as you go to the different routes if there is a prams it will be declared on this brand's object so if i go back to here click view we see here on params we have a song id of one which is why we get that very long store state route param song id okay now that we have the song id we can go ahead and try to grab it from the back end so i'll say song service show song id and then if i go to services and go to song services we can add that show method here so i'm just going to say show song id and then i'm going to return an api dot get on songs slash song id so hopefully that makes sense for everyone we're basically just passing the songs id building up a string so it should try to access songs song id and again i'm going to go ahead and save it actually so when we get the song back we'll say this dot song and then up here we can say data return song of null see if it lets me save that and it does so now when we go to the song's endpoint i'll just do a hard refresh you can see that it's making a network request to song 1 404 not found and that's because again we have not implemented that in the back end so let's go ahead and do that part so if we go down here to songs controller before that go to routes let me just close out of all this we can just make a new route which is a get request two songs slash song id call the show method again that's not declared so i'm going to go ahead and copy paste this index method here and change it to show and now what we want to do is instead of find all we can say find by id and we do rec.prams.songid so instead of songs i'll say song and return that and i think that's all we need to do let me just double check yeah i think that's good so now at this point again it's always good to go over here just copy that and rename it to get song and then i can say song of id1 save that now if i do a git request look at that it returns an object it returns that some song object back to us it's not necessarily an array so what that means is in our ui at this point if we were to refresh this page it should request that song we should get a response with that entire song awesome and what we can do now at this point is go back to the ui go to that songs view and we can start building out our template to use that song data attribute right there so to do that let's just go ahead and create a couple of panels so again with the include panel case sensitive so make sure you do that right and components make sure you include panel so what we can do at this point is basically we can build out a panel give it a title of song meta data and then let's go ahead and just test to make sure we can print out our song so i'll just say song.title go over here is it called title should be called title cannot read property title of null i think in fact i should just make this an empty object let me just refresh the page really quick hmm well it should be putting in there let's see try to print out a couple of other ones song service show i mean i could print out what this dot song is at this point see if that gives us anything in the console gives us an object with data man every time i'm sorry so i keep forgetting that again this is going to return data okay so those all showed up now all right so going back to the view let's go ahead and actually build out a couple of different panels so the first panel i want to build i'll just say wrap that in a different now and then here actually i'll say v layout i'm gonna go v flex here and this is because i want to build again like side by side panel on the left and a panel on the right and if i were to go here simply just put that here and we should get half screen okay so very similar to how we did it before if i go to that songs view let's just go ahead and copy this code and maybe we can find a way to like reuse it if it's something that we find that we can reuse between components but i'll go ahead and copy this and i'll paste this here not sure why the indentation is off by a little bit oh see b flex v anyway okay so v layout is good now so again this should all work fine the only issue is again we had like some custom styles over there and the reason i'm i don't think i'm going to build a reusable component between these two things is because i do think view songs will change drastically because they might have different buttons and whatnot but for now i'm just going to copy and paste those styles into here so that we have a very similar look as to the other one and instead of having view we don't need a view anymore so i'll just go ahead and get rid of view because we're already on that page right so underneath i think the album we want to go ahead and just put the album title so i can say song.album and that puts it down there probably because i just need to i can just add a break to fix that but all right so that is the album title for whatever reason i put it as blah blah blah but just to show you i think there's going to be a lot of different stuff that's going to potentially be added maybe more buttons to like bookmark or unbookmark um to edit or delete we'll be on this panel so let's not go ahead and try to abstract you know a functionality for this view and this let's keep this one separate so with that being said i think on the right side so this is panel on the right actually sorry down here this is the panel to the right what we want to do is just go ahead and make another panel title can be uh tabs and close off that panel and then inside here we can just say song dot tab so we have a tabs panel now uh go ahead and just do a class of margin left two just to give it a little bit of space and the tab is not showing up yet and that could be because the thing we're getting back has nothing for tab so in this case i think it'd be useful if we could have some real data and this is going back to why you should have real data um it just makes it easier to build up an application with real data versus you trying to like figure stuff out so i think if we go back to bro uh yeah browse go to create i'm gonna go ahead and just try to fill that out more so float on artist modest mouse genre rock album and that's going to be good news for people who love bad news go ahead and copy this youtube id keep that intact so now here i can say float on guitar tabs let's just find a legit tab i don't care if it's even that good but basically i'm just going to copy this and paste it in here and honestly this i mean i wouldn't be doing this in a real live app because i'm not just going to copy someone else's guitar tab probably have like my own terms of service and privacy policy and require people to upload their own but this isn't even planned to be going live so unless someone else wants to grab my repo and do something with it feel free to so we have the guitar tab and float on we can say song lyrics now google's pretty good at just giving us the lyrics right here so thanks google so i'll go add the lyrics i'll go create song that gets us back a song down here so id6 is the good one that has all the good data so one thing you'll notice is on the tabs thing this is all like messed up so to inspect the element here i wonder if that's just because it's it's inside of a div i think i just need that inside of text area so anyway going back to create song let's go ahead and take the similar text field that we use for the tab so i'll go here i'll go to view song and instead of just doing song tab i will put the text field and have it point to song dot tab this one's not going to be required nor do we need the rules actually in fact let's just change this to text area change it to read only and then change it to v model oh we already have b model there so i'll just say text area because we don't want some extra styles on there so we have a text area now and i think it'd be useful if we made this like close to full width so down here i can say text area width is 80 see if that works okay so we do have a text area now with a width so i don't like how you can collapse it and stuff so first of all i'm going to say font family mono space we do width of 80 percent border none height of 600 pixels border color trans parent overflow auto so it's a scroll bar and then padding of 20 pixels i'll do 40 pixels all right so at this point i'm just going to do 100 why not cool so we have the tabs here that was pretty easy to do going back to review song if we were to add yet another b or i'm sorry you could do a bead layout underneath that so go ahead and make another video layout and inside here we're going to do a very similar thing so boom there's two there's a lot of copy paste going on here so i think at this point or soon i'm gonna refactor this to have nested files to represent all the different panels um but for right now we don't need song metadata here this is probably gonna be like a youtube embedded but here over on the right a cv layout hmm i think i accidentally deleted something that i shouldn't have let's see i think i'll just take the v layout and put it down here okay the issue is i don't have a root so i need to add all that and make that a little bit smaller so instead of tabs we can say lyrics over here you just do song dot lyrics we go ahead and save that see what it gives us in fact i think we should make the youtube video go up here and the right so that lyrics and songs are right next to each other so i'm going to pull that out hmm hold on okay let's see v-flex here all right so at this point i'm feeling this uh page is getting a little bit more complicated than i like it to so it's good if we can kind of split up a view into smaller views so again components i'm just going to go ahead and create a view song folder and i'm just going to cut that and put it into the viewsong folder whoops not sure why i did that anybody's click and drag yeah there you go so inside view song i'm going to go ahead and say song meta data view and that is going to be pretty much all of the stuff that is here i'm going to put the song metadata here in this file and what we can do here is just go ahead and pass down the props of song because we don't want all these different smaller panels to also make http requests to get that song using the song id and i'm sure there's stuff you can do like cash on your service or you could just use your vuex date and just have you know songs somewhere on the state um but for now i'm just going to have the props oops should be an array my bad but pretty much just clear up props and pass in song and so inside here all these should have access to song so if i were to save song metadata now and go back to view song i should be able to say song metadata and then for props i'm going to bind song equal to song and i'm going to go ahead and close out of all this or not close out but you know delete and then i think that's good if i were to save this let's see let me just go ahead and comment this stuff out for now no such style our directory okay so that's because we did not change it in our router so up here we can go to components view song and then slash view song and maybe we should rename this to something else instead of view song maybe like index.view i don't know if you guys have a different approach to that feel free to let me know but so instead we can just do yeah you song index song metadata is not registered okay so at this point we can go back here and make sure we import import song metadata from slash component slash song meta data and of course we need to put that down in the components here save this file and it should show up oh i forgot to put view song so the difference between this at symbol this is like absolute path we could just do a relative path if we wanted to in this case it might make more sense to just do a relative path to the folder because we know these are all kind of sub components of view song so instead i'll just do that all right so now we have a panel which is being displayed um actually panel's not being displayed because i forgot to include it over here so again what we can do is go back to the index we can go and grab this panel here and import it and then say components panel all right so now we have a panel and again that image is gigantic but if you remember here in the index.view we have like all this style defined and it's not even relative or it's not even relevant to the index in general it's more relative to that song metadata so what we can do is just put it in here instead of inside of that other thing so go ahead and just delete all that so then it makes it really easy to know okay if we're looking at this main view song index the only thing that's relative is this text area style which we're probably going to abstract later on so now we go back and our song metadata panel is being displayed perfectly and it's all nested inside the song metadata sub view so then we probably want to also create something similar to the um the panel but for youtube videos so i'll say youtube view i'll just say youtube why not so then in youtube if we can come over here and just say use something called you tube and again i don't yeah we do need to pass the song to it but in this case it make me make more mate sorry it might make more sense to just pass the youtube id which in fact if we were to go to youtube now we could say props it's going to be youtube id and go ahead and remember to install components panel i probably should have just copied and pasted a copy of this because it's very similar so if i were to go back to the youtube view and just go ahead and copy that into here what we could do at this point is just say panel title equals youtube video close the panel and then for now i'll just say youtube id because we're going to import another youtube module to be able to actually display that i think i actually need to include it here in the index so if i were to import youtube and go down here and paste youtube here go back we get a youtube panel and it prints out that youtube id so again for youtube video let me just add a little bit of margin left too just so it's not so adjacent to that other one but so we actually want to display this youtube video right an embedded youtube player so if we were to go and just do a google search review youtube uh component we can see that there's a couple on github so let's just go ahead and check out this one here it's got 113 stars so basically they say all you need to do is npm install it so if i were to go back to my client thing and install view youtube embedded and then i go to my main go ahead and include it it's just nice to just copy and paste code so close here i'll go to main go ahead and just paste all that in we don't need view we do need that we if you don't want to install the component globally i do not want it globally actually well yeah i don't really want to globally so i'll just put this down here save this and then we can go back make sure that the download's done it looks like it is go back to our docs what else did they say and they say we could just do something like this so at this point we can actually go to our youtube whatever this component was instead of just putting youtube out here we can say use youtube and then we want to pass it a couple of attributes so one is video id and that's going to be song id arts youtube id like we're passing in in the props and then we do a player with is 50 or 500 pixels player height is 194. i'm not sure why that's arbitrary let's do 200 and then get rid of that so now i think if we wanted to use that you know i'll just i'll just include it globally for now i think well let's see if we can just require it so i'll first import it here so import it i'll go to components and hopefully that will just work uh let's see let's see if they're docks they tell you how to not include it globally all right just for brevity i'm just going to go back and include it globally actually it's kind of bothering me i want to figure out why this isn't working so if i go back to youtube view and import this and try to import that and just say youtube see if that works huh nope all right scratch all that i'm just gonna go back here and include it globally for now so if someone has any information about how to actually just include that in my one little view feel free to leave me some feedback but in the meantime we got the embedded player working here i'm gonna go back and just make it a little bit larger so if i go back to youtube make the width like 800 height 400 yeah it's too big cool so that's good enough for now i mean i could spend more time making this perfect or just setting both these panels to a fixed height but for the next part we need to display the lyrics and the see i can actually play it over here pretty cool but anyway it i can go back and let's make some more views for the lyrics in the tab so here i'll just say lyrics.view and that's gonna have just copy and paste for one of these get rid of all this scope stuff go back to index i think we do need this text area so go back to lyrics paste that in here and get rid of all that and now to display those could just do a panel over here and assuming that song is passed in and panel's already declared if we save this i think this should work well hold on we have to first do this let me just delete all that stuff and here of course we need to include it first so i'm going to say lyrics and then in components we're going to go and include lyrics and then lastly we need to actually use it so lyrics and of course it required a property called song so i'm going to pass down song to that and let's just save that and see what happens okay we got the lyrics printed out down here awesome make sure you can't minimize it and i think this also needs like a margin top of two it's really close to the bottom panel there cool and then lastly we should build another sub component for the tab so i'm just going to do the same thing copy paste lyrics rename to tabs i think just tab and then here tab tab make sure everything's good save that cannot include tab from tab what does it say import tab from slash tab tab is defined but is never used okay never used it in component cool so now we have a tab section over here and again we need to add a little bit of margin top to that in fact i could just add it to this i think let's be done with it so because this is row two this is row one go up here nice all right so now we have let me just refresh this completely we have a view for viewing all the songs we have a view for creating songs we have a view for viewing the tabs and the lyrics on that song and we can play the youtube video over here and it'll display a couple of stuff on to the left okay so again i think the most important thing to recap on is first of all including an external module that i've like i didn't make someone else made and by simply just following their instructions by installing it installing it globally or you don't have to do it globally i should i should look into how to actually figure this out or um if you're not or and it's just copying and pasting that into your project to tell you what props you need to use what methods that you can listen to and that's about it so basically viewing their docs i was able to install it and quickly bring it into my project by following their instructions and that was kind of just to demonstrate how typically easy it is to kind of build pick and choose components from npm and i think the second thing i should highlight is i'm not sure if this approach is the best but basically if you're one page or state or route if your one route is starting to become really unmanageable i think it's a good idea to split it up into sub components as much as possible because if you saw before that index file was getting really large and like it's getting like impossible to actually find what i was looking for so instead if i just pull it out into these four sub components it kind of makes life easier for me and then again each one of these sub components knows exactly what it's concerned about so this one is just concerned about fetching the song this one's just concerned about rendering the lyrics this one's just concerned about the metadata so it makes it a lot easier to follow the code so at this point i think it's useful if we create yet another um page where we can edit a existing song so for now i'm just going to copy the create song page and rename it to edit song dot view and typically if you notice the structure i have this kind of a flat flat looking structure where every file here should be something that points to a route um except for you know a couple of them like panel which could go into a commons folder i believe you might refactor that in a second but for now for create song it's going to be very very similar to edit song if not identical except for like a couple of changes but let's first go to our router and again let's include it so edit song i think i was showing you create song a second ago but edit song here and that's going to be component slash edit song and then i can add a new path to the router here and say song song id slash edit and i can say songs song edit change that to edit song go ahead and save that and it'll be nice to have a way to get to that page instead of having to just change the url so let me just close this tab mayhem up here i have way too many tabs open let's take a little five second breather all right so we can go back to our i don't know what page it was on is view song and then our view metadata or song metadata let's go ahead and try to add in a button so that we can edit the song when we want to and we could add that in to like something here so let's say let me just go ahead and grab a button from something we know so like songs probably has v button except we don't want the fab button so go over here go ahead and just paste that in here song edit prams song id navigate to no maybe there's a way to like define a global so i could just do this in a global state so but in the meantime i'm just gonna go ahead and just do it this way maybe next part of the video i'll just refactor after i learn a bit a little bit more about vue so now we have a button called edit and it shows up here maybe we want to have it be at the bottom i think we can just add bottom here and it'll just put it to the bottom no maybe not but anyway we can style this later i don't want to waste too much time on styling because that is what eats up most of the time but now when we click this edit button we go to songs slash six slash edit and for whatever reason it loaded in no data so let me just clear that and refresh the browser just to make sure okay so it's not going to load data because we are in a edit song view and we haven't really loaded any data like this was expected to be blank and that we're creating the data so instead let's just go ahead and do a show and then again with that that route param that we needed if we go back to view song and just go ahead and copy these two this is a great example of what we need to do so inside the try catch grab the song id grab the song's data and we can just go ahead and close all that out go back to this page and i don't think anything is pointing to use let's see song this dot song maybe make sure this is printing out correctly oh wait it's because i have this in the wrong method so now i actually want a mounted call so instead of oh in addition to methods we want mounted and then we want to call something and do some logic whenever this component is melted and let's just go ahead and fetch that song and put it onto this dot song and then instead of create maybe we should do save so save song uh and what should save song do it should probably do all the same logic make sure every field is filled in and if it is we can just call put and also probably redirect the user to something else so let's go ahead and do that as well um and i think a good example would be crate song where we do router.push can close out of these i'm only concerned about edit song at this point so once we fetch or put the song id which again definitely wrap that in a try catch we just want to redirect the user to the uh the song that he was on previously i'm sure there's a way to do router dot back or something like that but i'm just gonna do pram's song id song id this dot song and i don't think we need to worry about this we don't we can implement this in a second all right so it's giving us an error here it's saying song id is not defined and it's not so i think we actually need to bring in this here pass in the song id there so we can actually go back to the song trailing space is not allowed on 113. trailing space is not allowed on what line was at 135 okay all right so now we're on edit song it fetched all the information for that song and we can probably change stuff as needed put an exclamation mark at the end up with that and if we click save it should not do anything because i don't think we have anything really implemented ready to go all right so save song when clicked we should be calling the save over here and we have a method called save let me just make sure that this is being invoked yep save clicked it's saying put is not a function so that makes sense we haven't implemented this put yet so if we go to our services and go to song service again we're going to have to add a put and basically this is for updating so we're also going to have to do slash song id so if i do something like that make sure i'm using the right back ticks basically this will push that song payload to that song endpoint which doesn't exist so let's go ahead and close out of these things and go to our routes and copy this one do a put do it on the song id in fact i think we can just do that's fine so i'll make the put right next to the git so it makes a little bit more sense so this is going to call a song's controller.output method if i go to my songs controller which is here lastly we'd have to make a put method here oops so i'll say put and now what we want to do here is just go ahead and call update rec.body and then for the second parameter argument we pass in we only want to update where the id was equal to song id remember song id is going to be inside that routes here so we're going to grab it and only update the song which was or which matches that song id and then if this works it should just return that song in fact i i think this will return it's something that we don't want so i'll just go ahead and return this.body so it's going to return the same song you uploaded so i'll do rec body sorry about that and if it doesn't it'll say an error has occurred trying to update the song all right so hopefully let's see what happens when we do this call save song it does a it did a let's see a put on song six it pasted this information and then it redirected us to slash six and i'm not sure if it actually edited or updated it so let's let's make sure the payload that got sent was an updated title and it wasn't so if i go back to here and just add an exclamation mark hit save we see that it updated the song and it added a exclamation mark and it actually hit the back in over here and updated the database with that data all right so i think that may wrap it up for part five um stay tuned for part six where i'm probably gonna add a search component here and restyle this page just a little bit more and then i think finally we could wrap this up in a part seven or part eight all right again thanks for watching and be sure to subscribe to my twitter which is in the description below if you want updates when the next parts are released alright see youhey everyone and welcome to part five of building a full stack web application using vue.js and express.js i am cody and let's go ahead and get started so if you remember in the last one we kind of built up the songs panel and we made a songs endpoint to grab all the songs in a songs and point to post new songs created this panel to create songs and all these are required fields so in this part of the tutorial we want to continue on and build out the functionality of viewing a song so if you remember here when we clicked view it takes you to this url which is song slash id which is one in this case and if we were to go back to the routes just to refresh our memory we have a new route here called song song id and we have the name is song and the component is view song so basically that's just going to show this component here and we need to start implementing this out so to start off we can actually grab that same data from the backend so assuming that we have a backend endpoint we could do mounted and then run a function when it's mounted and then up here again we're just going to import whatever that song's thing is that we used so import song service go ahead and just close out of these extra tabs and make it easier to figure out what i'm doing so inside here we import song service from that services song services folder and what we can do when it mounts is remember to do async we can say const song is equal to await song service dot i'm going to say show and then here i'm going to pass in a song id in order to get the song id from the url here so remember this was a one and we want to grab it all we need to do is i say all but there's a lot of stuff you need to grab so this dot store.state.org route dot prams dot song id so there's a lot of stuff going on but basically this is the ux store we grab the state in the ux store route is defined because if you remember an app a long time ago we did added this line to sync the router to the store so whenever the router changes in the ui that value here route.params.songid changes as well so to kind of demonstrate that let's just go ahead and make sure that we can go to this page let's see song services grab but never use let me just comment this out really quick print out song id okay what is this one warning about now trailing space okay so again i was trying to explain how we can get the song id from the url and to demonstrate that as we change routes every time in view this route changed event is being dispatched so if you remember in if i go back to the store here we have set user is an action and set token is an action those are kind of actions that are dispatched and it turns out that the view router what i call or the view sync what is it called again i'm sorry the view x router sync module is basically just a way to map and send out dispatch events whenever our route changes so if you look here inside here we can go to route and at this point the prams or path or songs if i were to go to hit the plus it changed this to a full path of songs and again i can time travel back to those states that i was at if i want to so very useful but what i'm trying to explain here is that as you go to the different routes if there is a prams it will be declared on this brand's object so if i go back to here click view we see here on params we have a song id of one which is why we get that very long store state route param song id okay now that we have the song id we can go ahead and try to grab it from the back end so i'll say song service show song id and then if i go to services and go to song services we can add that show method here so i'm just going to say show song id and then i'm going to return an api dot get on songs slash song id so hopefully that makes sense for everyone we're basically just passing the songs id building up a string so it should try to access songs song id and again i'm going to go ahead and save it actually so when we get the song back we'll say this dot song and then up here we can say data return song of null see if it lets me save that and it does so now when we go to the song's endpoint i'll just do a hard refresh you can see that it's making a network request to song 1 404 not found and that's because again we have not implemented that in the back end so let's go ahead and do that part so if we go down here to songs controller before that go to routes let me just close out of all this we can just make a new route which is a get request two songs slash song id call the show method again that's not declared so i'm going to go ahead and copy paste this index method here and change it to show and now what we want to do is instead of find all we can say find by id and we do rec.prams.songid so instead of songs i'll say song and return that and i think that's all we need to do let me just double check yeah i think that's good so now at this point again it's always good to go over here just copy that and rename it to get song and then i can say song of id1 save that now if i do a git request look at that it returns an object it returns that some song object back to us it's not necessarily an array so what that means is in our ui at this point if we were to refresh this page it should request that song we should get a response with that entire song awesome and what we can do now at this point is go back to the ui go to that songs view and we can start building out our template to use that song data attribute right there so to do that let's just go ahead and create a couple of panels so again with the include panel case sensitive so make sure you do that right and components make sure you include panel so what we can do at this point is basically we can build out a panel give it a title of song meta data and then let's go ahead and just test to make sure we can print out our song so i'll just say song.title go over here is it called title should be called title cannot read property title of null i think in fact i should just make this an empty object let me just refresh the page really quick hmm well it should be putting in there let's see try to print out a couple of other ones song service show i mean i could print out what this dot song is at this point see if that gives us anything in the console gives us an object with data man every time i'm sorry so i keep forgetting that again this is going to return data okay so those all showed up now all right so going back to the view let's go ahead and actually build out a couple of different panels so the first panel i want to build i'll just say wrap that in a different now and then here actually i'll say v layout i'm gonna go v flex here and this is because i want to build again like side by side panel on the left and a panel on the right and if i were to go here simply just put that here and we should get half screen okay so very similar to how we did it before if i go to that songs view let's just go ahead and copy this code and maybe we can find a way to like reuse it if it's something that we find that we can reuse between components but i'll go ahead and copy this and i'll paste this here not sure why the indentation is off by a little bit oh see b flex v anyway okay so v layout is good now so again this should all work fine the only issue is again we had like some custom styles over there and the reason i'm i don't think i'm going to build a reusable component between these two things is because i do think view songs will change drastically because they might have different buttons and whatnot but for now i'm just going to copy and paste those styles into here so that we have a very similar look as to the other one and instead of having view we don't need a view anymore so i'll just go ahead and get rid of view because we're already on that page right so underneath i think the album we want to go ahead and just put the album title so i can say song.album and that puts it down there probably because i just need to i can just add a break to fix that but all right so that is the album title for whatever reason i put it as blah blah blah but just to show you i think there's going to be a lot of different stuff that's going to potentially be added maybe more buttons to like bookmark or unbookmark um to edit or delete we'll be on this panel so let's not go ahead and try to abstract you know a functionality for this view and this let's keep this one separate so with that being said i think on the right side so this is panel on the right actually sorry down here this is the panel to the right what we want to do is just go ahead and make another panel title can be uh tabs and close off that panel and then inside here we can just say song dot tab so we have a tabs panel now uh go ahead and just do a class of margin left two just to give it a little bit of space and the tab is not showing up yet and that could be because the thing we're getting back has nothing for tab so in this case i think it'd be useful if we could have some real data and this is going back to why you should have real data um it just makes it easier to build up an application with real data versus you trying to like figure stuff out so i think if we go back to bro uh yeah browse go to create i'm gonna go ahead and just try to fill that out more so float on artist modest mouse genre rock album and that's going to be good news for people who love bad news go ahead and copy this youtube id keep that intact so now here i can say float on guitar tabs let's just find a legit tab i don't care if it's even that good but basically i'm just going to copy this and paste it in here and honestly this i mean i wouldn't be doing this in a real live app because i'm not just going to copy someone else's guitar tab probably have like my own terms of service and privacy policy and require people to upload their own but this isn't even planned to be going live so unless someone else wants to grab my repo and do something with it feel free to so we have the guitar tab and float on we can say song lyrics now google's pretty good at just giving us the lyrics right here so thanks google so i'll go add the lyrics i'll go create song that gets us back a song down here so id6 is the good one that has all the good data so one thing you'll notice is on the tabs thing this is all like messed up so to inspect the element here i wonder if that's just because it's it's inside of a div i think i just need that inside of text area so anyway going back to create song let's go ahead and take the similar text field that we use for the tab so i'll go here i'll go to view song and instead of just doing song tab i will put the text field and have it point to song dot tab this one's not going to be required nor do we need the rules actually in fact let's just change this to text area change it to read only and then change it to v model oh we already have b model there so i'll just say text area because we don't want some extra styles on there so we have a text area now and i think it'd be useful if we made this like close to full width so down here i can say text area width is 80 see if that works okay so we do have a text area now with a width so i don't like how you can collapse it and stuff so first of all i'm going to say font family mono space we do width of 80 percent border none height of 600 pixels border color trans parent overflow auto so it's a scroll bar and then padding of 20 pixels i'll do 40 pixels all right so at this point i'm just going to do 100 why not cool so we have the tabs here that was pretty easy to do going back to review song if we were to add yet another b or i'm sorry you could do a bead layout underneath that so go ahead and make another video layout and inside here we're going to do a very similar thing so boom there's two there's a lot of copy paste going on here so i think at this point or soon i'm gonna refactor this to have nested files to represent all the different panels um but for right now we don't need song metadata here this is probably gonna be like a youtube embedded but here over on the right a cv layout hmm i think i accidentally deleted something that i shouldn't have let's see i think i'll just take the v layout and put it down here okay the issue is i don't have a root so i need to add all that and make that a little bit smaller so instead of tabs we can say lyrics over here you just do song dot lyrics we go ahead and save that see what it gives us in fact i think we should make the youtube video go up here and the right so that lyrics and songs are right next to each other so i'm going to pull that out hmm hold on okay let's see v-flex here all right so at this point i'm feeling this uh page is getting a little bit more complicated than i like it to so it's good if we can kind of split up a view into smaller views so again components i'm just going to go ahead and create a view song folder and i'm just going to cut that and put it into the viewsong folder whoops not sure why i did that anybody's click and drag yeah there you go so inside view song i'm going to go ahead and say song meta data view and that is going to be pretty much all of the stuff that is here i'm going to put the song metadata here in this file and what we can do here is just go ahead and pass down the props of song because we don't want all these different smaller panels to also make http requests to get that song using the song id and i'm sure there's stuff you can do like cash on your service or you could just use your vuex date and just have you know songs somewhere on the state um but for now i'm just going to have the props oops should be an array my bad but pretty much just clear up props and pass in song and so inside here all these should have access to song so if i were to save song metadata now and go back to view song i should be able to say song metadata and then for props i'm going to bind song equal to song and i'm going to go ahead and close out of all this or not close out but you know delete and then i think that's good if i were to save this let's see let me just go ahead and comment this stuff out for now no such style our directory okay so that's because we did not change it in our router so up here we can go to components view song and then slash view song and maybe we should rename this to something else instead of view song maybe like index.view i don't know if you guys have a different approach to that feel free to let me know but so instead we can just do yeah you song index song metadata is not registered okay so at this point we can go back here and make sure we import import song metadata from slash component slash song meta data and of course we need to put that down in the components here save this file and it should show up oh i forgot to put view song so the difference between this at symbol this is like absolute path we could just do a relative path if we wanted to in this case it might make more sense to just do a relative path to the folder because we know these are all kind of sub components of view song so instead i'll just do that all right so now we have a panel which is being displayed um actually panel's not being displayed because i forgot to include it over here so again what we can do is go back to the index we can go and grab this panel here and import it and then say components panel all right so now we have a panel and again that image is gigantic but if you remember here in the index.view we have like all this style defined and it's not even relative or it's not even relevant to the index in general it's more relative to that song metadata so what we can do is just put it in here instead of inside of that other thing so go ahead and just delete all that so then it makes it really easy to know okay if we're looking at this main view song index the only thing that's relative is this text area style which we're probably going to abstract later on so now we go back and our song metadata panel is being displayed perfectly and it's all nested inside the song metadata sub view so then we probably want to also create something similar to the um the panel but for youtube videos so i'll say youtube view i'll just say youtube why not so then in youtube if we can come over here and just say use something called you tube and again i don't yeah we do need to pass the song to it but in this case it make me make more mate sorry it might make more sense to just pass the youtube id which in fact if we were to go to youtube now we could say props it's going to be youtube id and go ahead and remember to install components panel i probably should have just copied and pasted a copy of this because it's very similar so if i were to go back to the youtube view and just go ahead and copy that into here what we could do at this point is just say panel title equals youtube video close the panel and then for now i'll just say youtube id because we're going to import another youtube module to be able to actually display that i think i actually need to include it here in the index so if i were to import youtube and go down here and paste youtube here go back we get a youtube panel and it prints out that youtube id so again for youtube video let me just add a little bit of margin left too just so it's not so adjacent to that other one but so we actually want to display this youtube video right an embedded youtube player so if we were to go and just do a google search review youtube uh component we can see that there's a couple on github so let's just go ahead and check out this one here it's got 113 stars so basically they say all you need to do is npm install it so if i were to go back to my client thing and install view youtube embedded and then i go to my main go ahead and include it it's just nice to just copy and paste code so close here i'll go to main go ahead and just paste all that in we don't need view we do need that we if you don't want to install the component globally i do not want it globally actually well yeah i don't really want to globally so i'll just put this down here save this and then we can go back make sure that the download's done it looks like it is go back to our docs what else did they say and they say we could just do something like this so at this point we can actually go to our youtube whatever this component was instead of just putting youtube out here we can say use youtube and then we want to pass it a couple of attributes so one is video id and that's going to be song id arts youtube id like we're passing in in the props and then we do a player with is 50 or 500 pixels player height is 194. i'm not sure why that's arbitrary let's do 200 and then get rid of that so now i think if we wanted to use that you know i'll just i'll just include it globally for now i think well let's see if we can just require it so i'll first import it here so import it i'll go to components and hopefully that will just work uh let's see let's see if they're docks they tell you how to not include it globally all right just for brevity i'm just going to go back and include it globally actually it's kind of bothering me i want to figure out why this isn't working so if i go back to youtube view and import this and try to import that and just say youtube see if that works huh nope all right scratch all that i'm just gonna go back here and include it globally for now so if someone has any information about how to actually just include that in my one little view feel free to leave me some feedback but in the meantime we got the embedded player working here i'm gonna go back and just make it a little bit larger so if i go back to youtube make the width like 800 height 400 yeah it's too big cool so that's good enough for now i mean i could spend more time making this perfect or just setting both these panels to a fixed height but for the next part we need to display the lyrics and the see i can actually play it over here pretty cool but anyway it i can go back and let's make some more views for the lyrics in the tab so here i'll just say lyrics.view and that's gonna have just copy and paste for one of these get rid of all this scope stuff go back to index i think we do need this text area so go back to lyrics paste that in here and get rid of all that and now to display those could just do a panel over here and assuming that song is passed in and panel's already declared if we save this i think this should work well hold on we have to first do this let me just delete all that stuff and here of course we need to include it first so i'm going to say lyrics and then in components we're going to go and include lyrics and then lastly we need to actually use it so lyrics and of course it required a property called song so i'm going to pass down song to that and let's just save that and see what happens okay we got the lyrics printed out down here awesome make sure you can't minimize it and i think this also needs like a margin top of two it's really close to the bottom panel there cool and then lastly we should build another sub component for the tab so i'm just going to do the same thing copy paste lyrics rename to tabs i think just tab and then here tab tab make sure everything's good save that cannot include tab from tab what does it say import tab from slash tab tab is defined but is never used okay never used it in component cool so now we have a tab section over here and again we need to add a little bit of margin top to that in fact i could just add it to this i think let's be done with it so because this is row two this is row one go up here nice all right so now we have let me just refresh this completely we have a view for viewing all the songs we have a view for creating songs we have a view for viewing the tabs and the lyrics on that song and we can play the youtube video over here and it'll display a couple of stuff on to the left okay so again i think the most important thing to recap on is first of all including an external module that i've like i didn't make someone else made and by simply just following their instructions by installing it installing it globally or you don't have to do it globally i should i should look into how to actually figure this out or um if you're not or and it's just copying and pasting that into your project to tell you what props you need to use what methods that you can listen to and that's about it so basically viewing their docs i was able to install it and quickly bring it into my project by following their instructions and that was kind of just to demonstrate how typically easy it is to kind of build pick and choose components from npm and i think the second thing i should highlight is i'm not sure if this approach is the best but basically if you're one page or state or route if your one route is starting to become really unmanageable i think it's a good idea to split it up into sub components as much as possible because if you saw before that index file was getting really large and like it's getting like impossible to actually find what i was looking for so instead if i just pull it out into these four sub components it kind of makes life easier for me and then again each one of these sub components knows exactly what it's concerned about so this one is just concerned about fetching the song this one's just concerned about rendering the lyrics this one's just concerned about the metadata so it makes it a lot easier to follow the code so at this point i think it's useful if we create yet another um page where we can edit a existing song so for now i'm just going to copy the create song page and rename it to edit song dot view and typically if you notice the structure i have this kind of a flat flat looking structure where every file here should be something that points to a route um except for you know a couple of them like panel which could go into a commons folder i believe you might refactor that in a second but for now for create song it's going to be very very similar to edit song if not identical except for like a couple of changes but let's first go to our router and again let's include it so edit song i think i was showing you create song a second ago but edit song here and that's going to be component slash edit song and then i can add a new path to the router here and say song song id slash edit and i can say songs song edit change that to edit song go ahead and save that and it'll be nice to have a way to get to that page instead of having to just change the url so let me just close this tab mayhem up here i have way too many tabs open let's take a little five second breather all right so we can go back to our i don't know what page it was on is view song and then our view metadata or song metadata let's go ahead and try to add in a button so that we can edit the song when we want to and we could add that in to like something here so let's say let me just go ahead and grab a button from something we know so like songs probably has v button except we don't want the fab button so go over here go ahead and just paste that in here song edit prams song id navigate to no maybe there's a way to like define a global so i could just do this in a global state so but in the meantime i'm just gonna go ahead and just do it this way maybe next part of the video i'll just refactor after i learn a bit a little bit more about vue so now we have a button called edit and it shows up here maybe we want to have it be at the bottom i think we can just add bottom here and it'll just put it to the bottom no maybe not but anyway we can style this later i don't want to waste too much time on styling because that is what eats up most of the time but now when we click this edit button we go to songs slash six slash edit and for whatever reason it loaded in no data so let me just clear that and refresh the browser just to make sure okay so it's not going to load data because we are in a edit song view and we haven't really loaded any data like this was expected to be blank and that we're creating the data so instead let's just go ahead and do a show and then again with that that route param that we needed if we go back to view song and just go ahead and copy these two this is a great example of what we need to do so inside the try catch grab the song id grab the song's data and we can just go ahead and close all that out go back to this page and i don't think anything is pointing to use let's see song this dot song maybe make sure this is printing out correctly oh wait it's because i have this in the wrong method so now i actually want a mounted call so instead of oh in addition to methods we want mounted and then we want to call something and do some logic whenever this component is melted and let's just go ahead and fetch that song and put it onto this dot song and then instead of create maybe we should do save so save song uh and what should save song do it should probably do all the same logic make sure every field is filled in and if it is we can just call put and also probably redirect the user to something else so let's go ahead and do that as well um and i think a good example would be crate song where we do router.push can close out of these i'm only concerned about edit song at this point so once we fetch or put the song id which again definitely wrap that in a try catch we just want to redirect the user to the uh the song that he was on previously i'm sure there's a way to do router dot back or something like that but i'm just gonna do pram's song id song id this dot song and i don't think we need to worry about this we don't we can implement this in a second all right so it's giving us an error here it's saying song id is not defined and it's not so i think we actually need to bring in this here pass in the song id there so we can actually go back to the song trailing space is not allowed on 113. trailing space is not allowed on what line was at 135 okay all right so now we're on edit song it fetched all the information for that song and we can probably change stuff as needed put an exclamation mark at the end up with that and if we click save it should not do anything because i don't think we have anything really implemented ready to go all right so save song when clicked we should be calling the save over here and we have a method called save let me just make sure that this is being invoked yep save clicked it's saying put is not a function so that makes sense we haven't implemented this put yet so if we go to our services and go to song service again we're going to have to add a put and basically this is for updating so we're also going to have to do slash song id so if i do something like that make sure i'm using the right back ticks basically this will push that song payload to that song endpoint which doesn't exist so let's go ahead and close out of these things and go to our routes and copy this one do a put do it on the song id in fact i think we can just do that's fine so i'll make the put right next to the git so it makes a little bit more sense so this is going to call a song's controller.output method if i go to my songs controller which is here lastly we'd have to make a put method here oops so i'll say put and now what we want to do here is just go ahead and call update rec.body and then for the second parameter argument we pass in we only want to update where the id was equal to song id remember song id is going to be inside that routes here so we're going to grab it and only update the song which was or which matches that song id and then if this works it should just return that song in fact i i think this will return it's something that we don't want so i'll just go ahead and return this.body so it's going to return the same song you uploaded so i'll do rec body sorry about that and if it doesn't it'll say an error has occurred trying to update the song all right so hopefully let's see what happens when we do this call save song it does a it did a let's see a put on song six it pasted this information and then it redirected us to slash six and i'm not sure if it actually edited or updated it so let's let's make sure the payload that got sent was an updated title and it wasn't so if i go back to here and just add an exclamation mark hit save we see that it updated the song and it added a exclamation mark and it actually hit the back in over here and updated the database with that data all right so i think that may wrap it up for part five um stay tuned for part six where i'm probably gonna add a search component here and restyle this page just a little bit more and then i think finally we could wrap this up in a part seven or part eight all right again thanks for watching and be sure to subscribe to my twitter which is in the description below if you want updates when the next parts are released alright see you\n"