 Hello, this is Christian. In this video, we're going to pass data and the processes data using the handlebars template engine and Node.js Express. So let's go and take a look. So here is our page. We've been working this in the previous video, and we just basically converted the static page here to an Express application. Notice we haven't created the other component yet. So let's go and create those views first, and we'll add some data to the application. Alright, so first let's go and fix something really quick. And the header here, the navigation here, this will not be called this anymore. The link will be linked to a view, right? So one of these views will be creating inside the views folder. So the home page will be called, we call it main, but you can change it to like home, maybe it makes more sense to call it home instead. But since I already called my main, I'll just leave it as that, okay? The above will be just called about, and then just contact, and I'll just call it portfolio, right? So it will render a particular view based on these links here. Okay, so let's close that for now. And so now in our views folder, we're going to create one for each of these, okay? So just go and then new, and we have the about, HBS, and one more, I can't do there, the contact, and then one more for the portfolio. Okay, so those are the ones. And notice that if you go to the view, I'll show something really quick. If I navigate to this side here, like there's no matching URL, so you get this, like, cannot get this page. Okay, so this here. So what you want to do is you want to create another, a catch all to have a really a friendlier message to the browser. So typically you create something called like a not found component or view. Oops, let's create one, let's call this one a not found, or sometimes you call it 404, right? But I'll call it not found. All right, so if you look at the about first, and so everything will be the same, we just basically copy, we're inside the main tag here, okay? We'll copy the main tag here, put into the about, and then we format that, and then save, and then open, you can close that now, open the contact. Again, just inside the main. And then we add that to the contact format, and save, and then the portfolio, the main all the way down here to the end of that and the portfolio here, and then format. Okay, so we can close these here now. All right, and then our not found will have to do something kind of similar. So I want to copy just the main and then the title here, put into the not found, and I'll just close the main tag here. Okay, so kind of consistent. And we'll put a message here, something's like, sorry, file not found. Okay, so it's better than cannot get something, right? All right, so now if you then go to the index.js file, the main file, we need to create those APIs, right? We got the landing page, this is the home page. And then we're going to create something similar. So what I'll do, we're just going to copy this to make it quicker. Put the about page, I just put here the about page, we have one for the contact, and then portfolio, and then so on. So this is the about, this would be the contact, portfolio, and this is the star. Okay, we'll use the start as a catch all, this is the wild card. So we don't want to, we want to make sure that we capture every not found. So it's going to render this call not found component or view. And at the message, we'll just leave that blank for now. I'll replace it later. And then the portfolio will be just portfolio as well. The same name, contact, and then the about. Okay, so if you save it and go to the browser and see if they work. Let's reload it. So here we go. See, there it is. So it's working beautifully, right? Okay, so as you can see, we have it not found. If I go like portfolios or something, right, has it sorry if I'm not found instead of that, can I get something. So that is pretty neat. Now, notice that all these data are static data. Just put that in the code manually. So let's go back. And so this page is good. Let's go to the, if you look at every page, you see that this part here, the main has an H1 about has an H1 and so on. So you have a main tag followed by a title. This title here could be put, let's put this above the contact page to be kind of consistent. I want to show you something here. You have too many div tags here. Let's just remove that div and then reformat that. Okay, so since they're all the same, this part is the same. So instead of doing this way, then you want to put that inside the index. I mean that, yeah, the index, the root here, and you put that inside here. So you would say, okay, every page can have a title and then you close the main here. All right, so notice how I do this. This is the title of the page. Let's see. No, no, not the title title. The title stays out. Well, no, that's not what I wanted. Okay, okay, let's go back in. I meant to, I'm going to replace this with a variable name instead of the hard code. All right, so yeah, I think this page will pretty much done. I'm not going to touch this favor now. You can wrap the main tag around here if you want, but we'll leave it inside the view. So it's kind of consistent. Okay, so what I meant was like this title here, you don't put it, you want to put it here. You can, but I want to do this way. So you go to the index file and the home page here, the main page, see how I do the message. Instead of message, here we put a title. Okay, and then you will wrap the title, the message right in here like that. Right, so the title goes in here and then same thing for this. So all of these will have a title page and whatever it is, we'll just, you know, cut that out and put it in here. Here, the contact will be just contact us or contact me, the title. And then this would be, I just call it, I think my work, something like that. And then here will be just not found. So we can leave it as a, yeah, well, let's just do everything the same title. And it will copy that message from the not found. Okay, this text here, take it up, put it right in here. Okay, so now this how you pass data to a view. Okay, so you pass data through this object. This object can pass a multiple data. One is called a title. Another could be whatever it is, you keep passing those data over. You just put a comma, add another property and so forth. So let's go to the main first, the title here. We're going to wrap this, replace this with the interpolation here. So the message tag, right? So here we call title. And that's going to be same for every page. So I can just copy this, save that and then go here, replace that in here. Inside the contact, portfolio, and then the not found. Okay, so that should be working flawlessly. If you go back and you see that it's working just fine. All right. So now the homepage doesn't work. I call it main. Oh, yeah, I call it main. That's why I should change it to just the slash. Okay. So the navigation was not correct. So the navigation down here in the partial, the header, this would be just slash or empty like that. So it goes to the homepage. Yeah, let's see if that solves it. Yeah. So that's the homepage. Okay. So now let's deal with this one here. So I'm going to go ahead and create an object to store the video and audio. We'll create another data to store data in this portfolio. So this could be a JSON data, right? An array of JSON data. This could be the title of the project. This is the description and then the URL. And we'll look through every object and every project and we'll display that using the template syntax. The about, yeah, this just has this contact the same. So just do two things, right? So let's go into the homepage first, the user one. I can close this now. I can close this now, portfolio, the contact. I think we're done with the contact. About page, we're done too. Okay. So the homepage, the main page here. So these are the two links here. Basically, I want to just copy this for now and go into, and it's pretty tiny. You really don't do it, but I'm going to do anyway. So go to unisex here again and create another folder. And we'll call it either models or data. Okay. I'll call it models for mine. And then create another file. Here we'll be, we'll call it the media.js. And they have another one for portfolio.js. Okay. So in the media, now, if you go in here, just paste that you can see. I'm going to create two object. This will be the video. And it's going to contain a list, an object of video. Here I have the ID field to have just any field called video. And they have a SRC field. And I'll just copy this, put it right in here. And then we'll put one more for the URL. Again, copy the URL of a site. And just some site. No, I'm sorry. Now URL. That's it, right? Just two. Oh, the source. Yeah, just two. I thought there are more, but just two. And then we'll do one more for the audio. Let's be just audio. And I copy audio, the link of the audio, put it right here. Okay. So you can delete this. And then now you just have to export them. Okay. So module exports, I can export them as objects. So the first is the video and then audio. Okay. Now just do that because this is already an object. Otherwise, you will do something like video. This is the same as in video, video. Okay. It's redundant, right? It's the same thing. You can go like, if you want to call different name, like V, then that's fine. But if you use the same name, then just use it like that. It's redundant. So I use the same one. So we got that done. Now in the portfolio, JS will be something similar. So constant, I'll call it maybe projects. It's going to be a list, an array of objects. Okay. So what is the first one we have? The first one, good portfolio page. We have the personal site. So personal site, copy that, put it here. This is the title. And then the second is the, I think the description. I think description, put something here. And then the next is the URL. Okay. And then we'll duplicate that for a couple of them. So this is the description. Put it here. And then the URL right here. And then we'll duplicate this. I think there are four of them. So we got that one there. This is the other site. Put that here. Okay. I'm going to pause this now. I'll just do it. It's taken too long. Okay. All right. So I pretty much copy everything and put it here. Okay. And then we've got that data here. And then finally, we just have to export it out. So again, I just go to exports. The shortcut is fine. Exports. A project is equal to projects. Okay. So we export that out. So these two are done. And then go back. And so for this one here, we're going to delete the rest. I'll just keep one. All right. Just keep one and we'll render through that using a loop. Okay. And then we're going to import the portfolio. Now in the index, we need to import them in. So go up here. We import up here. I'll call this like a data. And we'll constant a, a, this is the video. I'll extract the video and audio from the models and then the media. So you do that for both of them. And then this is the projects coming from the require model and then project portfolio. Okay. So now those are imported. And then now if you go to the main page, here's the home page, then we're going to pass in here. In addition to the title, I have a second two more properties. Video is video. And then audio, audio. Okay. So I pass those two properties to the home page. The portfolio will do something similar. I pass in here the projects. Use the same name. Okay. This is the variable will be rendered on the, on the template. This is the actual variable data here. It's kind of common to do this way. You can call different names. You want to say, you know, if maybe it works or something like that, it's fine too. Whatever you use here will be, just make sure you are rendering this in the view. Okay. So let's go, let's go to the home page first. Now go to the main HTTPS. So here we're going to replace this ID with the video.id, right? Because we call it video and our data because the video here is video.id because our data has the .id and .src. All right. So that's how you use it. It's an object. So, and then this part will be just video.src. And then here will be audio, id, and the audio. It has to put the wrap, src for the video too. And I'm doing this just example. Usually if you have a lot of like video files or audio files, then you loop through that. But here I'm just doing two very simple ones. So you kind of give you an idea of how they work. Okay. So here because now it's a template. So whatever you feed to this, variables will be rendered here. So you don't touch the template, right? Okay. So let's save this and make sure this works first. And let's go to the view and make sure it's still working. As you can see, it still works just fine, right? Okay. It's functional, as you can see. And I mean, make sure it does work. I'm going to, I can go in and make sure that it's incorrect. I could just say IDs, okay, for the video. And you will see that that should not work if I refresh it. You can see it's, yeah, I should not work. Did I not change that? Or either that or I didn't cache it maybe. Oh, well, I mean the SRC, yeah, that doesn't work here. I mean, here if I go like put an extra S there, then the video should not load. Okay. As you can see, it failed, right? So it does work just to show you that. Okay. Let's undo this. Okay. So this page is pretty much done. Same thing for the portfolio. Now we have a portfolio here. We pass in through the portfolio as projects. So it's a list of some projects. So here is the repeating part, right? So this is the same. This is repeating part here for every project. You're going to render this. So right above here, we use the each for each projects. Okay. It's like a for loop for each projects that render here. This is the title. So it'll be just title. And this is the description. And then here will be the URL. And also here, also the same URL. I want to display that as well. And finally, we close it right down here. You have to close to each slash each. Okay. So you begin and you end here. And I'm just going to tab this over so you can kind of see. So here we go. That's it, right? And then it's a loop through. It's going to render that to the browser and just go back and then go to portfolio. You can see, okay, it works just fine. Just again, to make sure it does work, you can go into the template here and change the data, say the portfolio, change the first one to something like this. Okay. So we know for sure that it's working and go back and refresh it. And there it is. Okay. Now I'll show you one more thing that will end this video is that what if you don't have any data? What do you do? Okay. So with that, the each and the width template syntax lets you also use another tag called else. So that means if there's any data, then go ahead and render all of these. What if there's no data? Then you can do something like this. You can say else. And that's kind of weird, but you do have this option here. You put a DT here and you can render something like an H3, sorry, no data, something like that. Okay. So if there's no data in the projects file variable, then it's going to go to else part and render this instead. Okay. Otherwise it would just have nothing shown. So that's not nice, right? So you want to show this one there's no data. And just to see that it still works. Let's go back and make sure it still works. Okay. So you can see now let's go and remove the data from the SRC. So if I go to the portfolio over here and let's say down the bottom, I'm going to export an empty object. Okay. As you can see, there's no data, right? Export empty object. And if I go to the view, refresh it. And now you see it right there. Sorry, no data because the data is empty. Okay. So that's pretty nice to, you know, let you do that. So, you know, it takes, it's that you're combining the if block and the loop together, which is kind of interesting. So let's go back to projects. And then that's it folks. So in here for the each part, you can also access the index number as well as the key if you're using the key of the array or object. So here, for example, I could do something like, you know, here at the index. And then we put that one here like that. So the index of the array. And this is kind of cool, but they're not so cool. So you can see has like zero, one, two and three. And handle bar is just for some reason, it makes it kind of really difficult to, you know, start from not from zero. It will always grab the index from zero because always start from zero. But you want to, you know, as a count, you only use as a counter. So you can say one, two and three instead. And usually, and frameworks like Angular you'll see later on it's really easy to do this. So you'll be tempted to say, okay, well index is zero. I want to plus one to print one instead of zero. And you can't do that. So that's kind of unfortunate. But what I mean was like index is zero. I want to plus one to that, right? So it'll be one instead of, you know, that. If you want to do something like this, then you have to write your own custom helper syntax, okay, or function to process this data. So if you see, so I can see if people do that and go back to the view, you render it, you get an error, right? It doesn't recognize that. What is that, right? So I wish to fix that, but oh well. So let's remove that. And I think that's it for this one. And so I hope you can kind of see how useful this can be using templates. You can pass data to this here, of course, and the about page and so on like the home page. Also, you could have, you know, all of these and a text file, right? You read a text file and no JS, you read text file and then you loop through the text file and then render this paragraph one at a time using a loop. So, you know, for every line or every paragraph you render that and then this whole thing will be rendered as just another each, right? Each and the render the content. It will render that for you. So, okay. Any questions, please let me know.