 Hi class, this is Christian. I want to talk about the final project. I know it's a little bit late, but I do still have a few of you who are still kind of Unsure of what to do with it. So I will walk you through this process just to create one Move one thing over so you can see how that works. Okay, so the final project is really just a collection of The some of the assignments that you already created in the past couple of weeks So I'm not asking you to put everything there just a few of them. So the assignment Six and assignment one if you remember, it's just we redo of unit one Assignment when you create your personal home page Okay, but we move that unit six because we use the HD HBS or the handlebars So it makes that really nice. So you move that over including the these pages and the drag-and-drop the Ajax calls and the chat program and Also the rest API down here. Okay, so I will show you Maybe the one that is a little bit challenging could be the chat program here And that's because it's using a Different server setup. It also uses the socket that I also That could be a little bit confusing. So I want to show you how to do that and the rest would be kind of pretty straightforward okay, so let's go to the IDE and So here are the assignments. So in the unit six is the one that we create about our home pages and all those pages and I think you need five was the chat program. So if you remember This will looks like it might be limited for me yours. I might have changes change things around a little bit But we should still be the same. Okay, so here's my chat program and Just to make sure that it does work. Let's just go and make this run this first. Let's go to unit five and inside Chat service, okay So I'm running a port 8080. Let's go to the browser and load on localhosts port 8080 Okay, so you can see that's the chat program. I put my name here and Then I do my chatting here, right and as you see notice, you know, it It works right away You don't have to you know navigate anywhere else is using the same route It doesn't matter which one I what I put here. I can put something ABC here I still kind of get well, I know it doesn't match to route, but Yeah, never mind that usually you would grab that it depends on how you set it up Okay, so this is the chat program you want to port this over to the home page and Let's run the other app So let's say I'm going to use as use unit six because this is the one that has all me up my pages I'm using the handlebars, right? And let me just run this as well. Let me open the second tab down here and go to unit six Okay, and that's around unit six. That's point nine zero zero. I'm just going to control click this and Hopefully it fires up. Okay. So here is the unit six assignment Right. It's about you and your profile and things like that So we want to do is add all your buttons right here. So this could be about you I can add another button here to say chat and that would take me to this chat program over here Okay, but I'm not going to go to a different port number like this though I'll be using the same port eight nine zero zero in this case and Just put everything here and navigating to a different route just like up here contact, right about Portfolio things like that Okay, so let's first create a navigation and we'll port the other things over So let me close this down here So in my handlebars My views folder I have the partials and there's the header that HBS and this is where I put the link. So let me copy this Just press the control shift and then down. No, I'm all to shift down. I think to duplicate that line Okay, so this will be called chat. Okay, this is the URL pattern I'm going to use in here. We'll just put here chat as well. So that's my link Okay, I Make sure I do it right. I had I think I did something bad here We've got to close this and I have an extra one down here. Okay so if I save it and close down for now so you can add the other stuff like the Ajax and So you can do that here, right? So you have your Ajax And then you have your crud For example, whatever these whatever you want to call it and Then crud and then one more for maybe this is the drag and drop. So just a drag drop Right Okay, so if it's save let's save that to go to the browser again and Refresh it and there's all my links. Oh, it's kind of bad. I'd probably use it too much Yeah, let's fix it So back again Chat I probably forgot to close something Yeah, maybe I'll lie Okay, this is a bit too long. So let's put here Just put drag for now Okay, that should be okay now. So here we go Right. So here are my links. So if I go to the chat as you can see It will load the chatting program right in here. Okay, so everything else remain intact and Same thing for crud drag and drop and and and so forth. Okay again, I'm not Worry too much about how you do this just as long as everything works on the same port number, okay? So I'm going to work on the chat here So let's go over and see how this is done. So we're pretty much done with that header So now in the so I'm using all these different route, right? So I need to create one for the chat right in the landing page here about about in contact The order doesn't matter here, but just make sure it goes above this Star so I'll put right down here after the portfolio Kind of match my router my URL. So here will be just chat Okay, I will have a view they don't have one yet, but I'm gonna have a view called chat as well oops and Then the title will be You know chat with me Yeah, I don't have anything to pass over other than that. So just Just like that just a title itself. Okay, so that's my chat and then now I need to go and create one HBS file for this chat. I'll do that in a minute So let's go open the chat program up here. If you notice in the index.js, right? So we need to create a server to connect to now We have it done already now in index.js if you look up at the top we use the Express and then app.listen to the port if you look at down here line 24 App listen to port toward different port number a 9 0 0 So we need to modify this just a little bit to make it work for our chat Okay, as you can see the chat uses an HTTP And then it creates a server that way and then down the bottom It connects to port 8080 using this server instead of the app, right? So it's no big deal. Okay, so you can just really just copy this This line here, or you don't have to copy it, but you just change that to say server instead. I'll show you in a minute So first, let's go to the top and see what we need. So these are the three lines that you will need okay, so just copy that over and Add it to the top right below the app right here Okay, so we're going to create a server through the server file Object and set up the app object. So down here when we did the app listen to this would be the server Listen to okay. All we do is create a server that listens to a port number in this case will keep it a 9 0 0 and That's pretty much it For that one and it will still work. Okay, it should still work fine Let me turn this off first because we don't have that I owe yet So if I save this on the unit 6 if I save it if I go back to the browser Okay, as you can see is it still work just fine All right, even though I'm using the server that listen to instead of the app that listen to the port number Okay, so all I'm doing is create a server to listen to the port. That's it And I'm still able to use the app around and the code to do all my Patterns, okay, so that is it for this one and then now we need to install the socket.io Okay, if you remember in unit 5 you have to install that using the npm install right because unit 6 doesn't have it So that means in the terminal You have to install it if you don't it's gonna have an error So for example if I save it and do that and save that if I go to the server I mean to the site and run it I'm gonna have an error as you can see it's trying to get the port the socket that I owe It wouldn't find it and if you look in the source code down here in the terminal It would say it will tell you that Cannot find the module socket.io. Okay, so that means we need to install it. So Let's create a new terminal here and go to unit 6 Okay, so just basically install it so npm install and Call that socket I owe So we need to install that to the app and Once that installed it should work Okay, so we're done here. We can close this terminal and you can see everything's going back to normal again Right, so go back to the browser and you see everything's up back to normal again Okay, so we're now ready to go and add the chat as you can see doesn't work here because we have we don't Have to view yet. All right, so let's go and add our views So this is done So now let's go back to the unit 5 and copy. We had this already set up We don't need to do where about that the chat program. So from line 10 All the way to line 30. Okay, copy all of that and You can close that and put a similar one here like I'll put like maybe right in the bottom down here somewhere Down here, okay, that's my chat program now how to get there is through this link here the chat So then I got that done now need to create a A view for this chat So as you look at the views over here, I can copy one of these One of these views and just use it. So I'll just copy the The about page just copy and paste right in here and rename it to Say chat that hbs and we're going to replace all of these. Okay, so these are going to be placed With something else In a minute. So let's save that And now let's go back to unit 5 in the chat program Our files are in the public folder So we have the we need the If you look at the index file, this is the actually chat program, right? So we don't need all these here again because we have already have a a based url But we do need the css the jquery And the sake that all files in our own script. So You can copy this The css everything copy that and Leave that open and port it over to the layouts folder At the index hbs. This is the main one, right? So this is the one that we have for unit 6. I'm just going to paste it right below it right here. This are my chat programs Okay, and I'll show you in a minute how that works in the Here so I think it remains the same. So you can save this for now Uh, it does come through an error. I I believe but we'll fix that show you and then go back and what do we need? Well down here is the same. This is the body of your your chat So you copy this whole thing in their body and move it to the chat Hbs here we're here. Okay, you can put a writing instead of main tag Like that So everything stays in in in there and save this file And we need to do one thing here over here. So notice this scripts It uses a script folder It doesn't use a css folder for the css file because our file is structured that way So how we do it you want to make sure it matches the layout down here Okay, so I need to copy my scripts. I call the default so you can copy that And paste it into the public folder down here unit 6 and there's a js folder if the same Wherever this call just paste it right in here. So I have my js all over my css I just called it. Um, we just call it default that css right in the root of this public directory Copy that and since we use a css folder, we put it right into a css folder. It just makes sense that way put it right in there I think that's all we need over here, right? We got our script and so on. Yeah, that's all we need for that chat service So now we need to go to the index hbs and change this to the point is to the correct file So that's inside the You know css folder And then the script is inside the js folder instead of script and that's it That's all we need to do here for this part now, so let's save this main layout file And as close this css and js file over here This one we don't need anymore close that the chat contains our chat information already And then let's save this and go to the browser and run it again Okay, so if I refresh my page Notice the ask you again for the name and Do some chatting even though I'm not even in the chat page, right? You don't want to load that And the reason why is because if you look at the source view Let me press f12 show you Because our script is right on the front page and every page. So if you see this This is the socket that I owe right and the default here these two These two files are causing every page to load and ask for a chat Even though we're not in the chat program if I go to about as you can see it keeps prompting that we don't want that We only want that to show when we go to the chat page Okay, and then if I put that here as you can see the chat is already working I move that over already Right and I can do my chat just like before As you can see it's working So to We've moved to make this go away. You have to put those scripts inside the chat View only So do that. It's very simple. You just basically go back in here the index Copy these two lines or actually cut these two lines out move them And add them to your chat file You put on the top of the bottom doesn't matter. Um, I like to put on the bottom here So it's away from my code Okay, so just save that and I think that's all there is to it So now if I go back and uh, you know, we load my page again So you can see that it doesn't ask to get any more, right? If I go to chat then it shows Up so I put here christian Okay, you can see that's working Okay, if I copy this and load to another browser So here's my second chat Um, okay, so his his if I minimize this you can see How they Where they are working, right? It just still works just like before or though my Full mining is kind of ugly here, but um Okay, so here is The chat so I can say hello And it's working just like normal Okay, so that is how you would want to do with this one and the rest will be very similar. Okay, so go back to You know the other assignments and then just move things over and create the views for your New layout go to the views folder and create that layout And if it need any css or other main css files go to the index layout is the main index page and add them here all right and And that should work and if if it looks really different from your main route here You can always create another template as another route template so I can say, hmm This one doesn't match what I want mine is very different So I mean for the chat and you could have done you could have done differently. I could have done Uh, something like this. I'll show you so if I copy my Index here Copy that and paste it and let's let's say that I'm going to use this route This pattern or this uh route For my chat I can say something like chat Main okay, hbs and then Um in my index file up here. I can copy Well, what I had earlier, right? I'm not going to copy that again. I'm going to go to Uh, where to go So where's the chat? Okay, so I can move this back To the main chat here put up here again like before so it is only it only applies to the chat And so if I save this in my main index, maybe yeah, I don't need this stuff so I can remove all these out Right back to my default only And then this is the main uh layout for the chat so if I save this here And when you do that though in your index.js file, you can go and then use a different File so like in the chat program line 49 Um, I can add another parameter here after the title to say layout. I'm going to use the layout called Chat main Okay, so what that does is is going to use the main the chat main here as the layout As a root layout instead of the index It's because by default We set it to use the index right the default layout But I mentioned the video the way back so you can override this by specifying the layout here explicitly To use a different layout. Okay, so we'll see that if I save this if I go back See if this works Okay, let me just refresh my page as you can see it works just fine If I look at the source view and do a source view you'll see that I'm not using The links for the chat at all. Okay, if I now go to my chat and it loads the chat So here we go again, and there it is if I do my Source view you see that I'm using The other template right for this chat only if I navigate away And then if I do a source view refresh that I'm not this one But it goes back to the other source view other main page All right, so it gives you that flexibility You can choose any main layout you want by creating one inside the layouts Voter and then you know link it through the layout attribute here. All right, so I hope that Gives you an idea of how to move things around and it was a little bit long, but Let me know if you have any questions. Okay. Thanks